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 :

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 :

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

Jika kita jalankan pada browser maka akan terdapat sebuah form login dan register seperti dibawah ini :

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

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 :

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

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 :

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 :

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

Kemudian kita akan coba refresh kembali browsernya maka akan terlihat hasilnya seperti dibawah ini :

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

Berikutnya pada file .env pada bagian APP_NAME=Laravel kita akan rubah sesuai dengan nama project yang kita gunakan seperti dibawah ini :

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

Kemudian silahkan restart kembali project laravelnya, maka akan terlihat hasilnya seperti dibawah ini :

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

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.

WhatsApp chat