Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Desain)

Di bahan sebelumnya kita telah berhasil menjalankan
instalasi bagi file project yang akan kita gunakan, bagi bahan sebelumnya
taman-teman dapat klik di link https://kursuswebprogramming.com/cara-membuat-crud-menggunakan-laravel-vue-js-dan-mysql-instalasi/
berikutnya di bahan Cara Merancang Crud
Menggunakan Laravel Vue js dan Mysql (Desain) kali ini kita akan merancang
desain tampilan yang akan kita gunakan di project crud dan kita pun akan
merancang sebuah authentication atau login user.

Langkah pertama-tama kita akan merancang authentication atau login user, silahkan teman-teman buka di terminalnya yang telah diarahkan di folder projectnya kemudian ketikan :

php artisan make:auth

1	php artisan make:auth

Jikalau proses make:authnya berhasil karenanya kita akan memperoleh sebuah folder baru di views, yaitu folder auth dan folder layout dan file home.blade.php seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Desain)

Jikalau kita jalankan di browser karenanya akan terdapat sebuah
form login dan register seperti dibawah ini :

Berikutnya silahkan teman-teman buka di PostController kita akan merancang sebuah
function atau method baru dengan nama homepage()
di method tersebut kita akan menampilkan data yang berhasil kita create
nantinya bagi scriptnya seperti dibawah ini :

Berikutnya di views kita akan merancang sebuah file baru dengan nama homepage.blade.php, homepage.blade.php tersebut berisikan script html dan proses authentication-nya bagi scriptnya seperti dibawah ini :

&lt;!doctype html&gt;<br />
&lt;html lang=”en”&gt;<br />
  &lt;head&gt;<br />
    &lt;!– Required meta tags –&gt;<br />
    &lt;meta charset=”utf-8″&gt;<br />
    &lt;meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”&gt;</p>
<p>    &lt;!– Bootstrap CSS –&gt;<br />
    &lt;link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” integrity=”sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anonymous”&gt;</p>
<p>    &lt;title&gt;Hello, world!&lt;/title&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;</p>
<p>@extends(‘layouts.app’)</p>
<p>@section(‘content’)<br />
    &lt;div class=”container”&gt;<br />
        &lt;div class=”jumbotron jumbotron-fluid mt-4 shadow p-3 mb-5 bg-white rounded”&gt;<br />
            &lt;div class=”container pl-5″&gt;<br />
              &lt;h1 class=”h1″&gt;Laravel Vue.js CRUD&lt;/h1&gt;<br />
              &lt;p class=”lead”&gt;Dumet School&lt;/p&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;</p>
<p>    &lt;button type=”button” class=”btn btn-secondary mb-2″&gt;&lt;i class=”fas fa-folder-plus”&gt;&lt;/i&gt; Create New Post&lt;/button&gt;<br />
      &lt;table class=”table table-bordered”&gt;<br />
        &lt;thead&gt;<br />
          &lt;tr&gt;<br />
            &lt;th scope=”col”&gt;#&lt;/th&gt;<br />
            &lt;th scope=”col”&gt;Title&lt;/th&gt;<br />
            &lt;th scope=”col”&gt;image&lt;/th&gt;<br />
            &lt;th scope=”col”&gt;Description&lt;/th&gt;<br />
            &lt;th scope=”col” class=”text-center” colspan=”3″&gt;Action&lt;/th&gt;<br />
          &lt;/tr&gt;<br />
        &lt;/thead&gt;<br />
        &lt;tbody&gt;<br />
          &lt;tr&gt;<br />
            &lt;th scope=”row”&gt;1&lt;/th&gt;<br />
            &lt;td&gt;Mark&lt;/td&gt;<br />
            &lt;td&gt;Otto&lt;/td&gt;<br />
            &lt;td&gt;@mdo&lt;/td&gt;<br />
            &lt;td&gt;&lt;a class=”btn btn-primary” href=””&gt;&lt;i class=”fas fa-eye”&gt;&lt;/i&gt; Show&lt;/a&gt;&lt;/td&gt;<br />
            &lt;td&gt;&lt;a class=”btn btn-success” href=””&gt;&lt;i class=”fas fa-edit”&gt;&lt;/i&gt; Modifikasi&lt;/a&gt;&lt;/td&gt;<br />
            &lt;td&gt;&lt;a class=”btn btn-danger” href=””&gt;&lt;i class=”fas fa-trash-alt”&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/td&gt;<br />
          &lt;/tr&gt;<br />
        &lt;/tbody&gt;<br />
      &lt;/table&gt;<br />
    &lt;/div&gt;<br />
@endsection<br />
    &lt;!– Optional JavaScript –&gt;<br />
    &lt;!– jQuery first, then Popper.js, then Bootstrap JS –&gt;<br />
    &lt;script src=”https://code.jquery.com/jquery-3.4.1.slim.min.js” integrity=”sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n” crossorigin=”anonymous”&gt;&lt;/script&gt;<br />
    &lt;script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”&gt;&lt;/script&gt;<br />
    &lt;script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js” integrity=”sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6″ crossorigin=”anonymous”&gt;&lt;/script&gt;<br />
    &lt;script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js”&gt;&lt;/script&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;

<!doctype html>

<head>

<!— Required meta tags —>

<!— Bootstrap CSS —>

<title>Hello, world!</title>

</head>

<body>

@extends(‘layouts.app’)

@section(‘content’)

<h1 class=“h1”>Laravel Vue.js CRUD</h1>

<p class=“lead”>Dumet School</p>

</div>

<button type=“button” class=“btn btn-secondary mb-2”><i class=“fas fa-folder-plus”></i> Create New Post</button>

<thead

(Visited 9 times, 1 visits today)

Leave a Reply Cancel reply