Pada materi sebelumnya kita telah berhasil melakukan instalasi untuk file project yang akan kita gunakan, untuk materi sebelumnya taman-teman bisa klik pada link https://kursuswebprogramming.com/cara-membuat-crud-menggunakan-laravel-vue-js-dan-mysql-instalasi/ selanjutnya pada materi Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Desain) kali ini kita akan membuat desain tampilan yang akan kita gunakan pada project crud dan kita juga akan membuat sebuah authentication atau login user.
Langkah pertama kita akan membuat authentication atau login user, silahkan teman-teman buka pada terminalnya yang telah diarahkan pada folder projectnya kemudian ketikan :
|
1 |
php artisan make:auth |
Jika proses make:authnya berhasil maka kita akan mendapatkan sebuah folder baru pada views, yaitu folder auth dan folder layout dan file home.blade.php seperti dibawah ini :
Jika kita jalankan pada browser maka akan terdapat sebuah form login dan register seperti dibawah ini :
Selanjutnya silahkan teman-teman buka pada PostController kita akan membuat sebuah function atau method baru dengan nama homepage() pada method tersebut kita akan menampilkan data yang berhasil kita create nantinya untuk scriptnya seperti dibawah ini :
Berikutnya pada views kita akan membuat sebuah file baru dengan nama homepage.blade.php, homepage.blade.php tersebut berisikan script html dan proses authentication-nya untuk scriptnya seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> @extends('layouts.app') @section('content') <div class="container"> <div class="jumbotron jumbotron-fluid mt-4 shadow p-3 mb-5 bg-white rounded"> <div class="container pl-5"> <h1 class="h1">Laravel Vue.js CRUD</h1> <p class="lead">Dumet School</p> </div> </div> <button type="button" class="btn btn-secondary mb-2"><i class="fas fa-folder-plus"></i> Create New Post</button> <table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">image</th> <th scope="col">Description</th> <th scope="col" class="text-center" colspan="3">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td><a class="btn btn-primary" href=""><i class="fas fa-eye"></i> Show</a></td> <td><a class="btn btn-success" href=""><i class="fas fa-edit"></i> Edit</a></td> <td><a class="btn btn-danger" href=""><i class="fas fa-trash-alt"></i> Delete</a></td> </tr> </tbody> </table> </div> @endsection <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script> </body> </html> |
Untuk script diatas kita menggunakan bootstrap untuk desain tampilannya, kemudian pada routes/web.php kita akan membuat sebuah route baru dengan nama homepage untuk memangil method yang terdapat pada PostController, untuk scriptnya seperti dibawah ini :
Kemudian kita akan coba refresh kembali browsernya maka akan terlihat hasilnya seperti dibawah ini :
Berikutnya pada file .env pada bagian APP_NAME=Laravel kita akan rubah sesuai dengan nama project yang kita gunakan seperti dibawah ini :
Kemudian silahkan restart kembali project laravelnya, maka akan terlihat hasilnya seperti dibawah ini :
Oke teman-teman itulah pembahasan kita pada tutorial Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Desain). Untuk materi selanjutnya kita akan setting router yang akan kita gunakan nantinya.
Semoga bermanfaat.
Terima kasih.