Halo teman-teman semuanya, di artikel sebelumnya kita semua sudah belajar bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Laravel. Di artikel kali ini kita semua akan belajar bagaimana cara menampilkan data dari database dan untuk user interface kita akan menggunakan Tailwind CSS. Show Langkah 1 - Membuat Controller PostPertama, kita akan membuat controllernya terlebih dahulu. Silahkan jalankan perintah berikut ini di dalam CMD/terminal :
Jika perintah di atas berhasil, maka kita akan dibuatkan 1 file baru yaitu di dalam folder
Di atas pertama kita import Model
Kemudian kita juga import
Dan kita juga import
Kemudian kita menambahkan Yaitu, ketika ada request dengan nama
Selanjutnya, kita parsing data posts tersebut ke dalam view menggunakan helper
Langkah 2 - Membuat RouteSetelah berhasil membuat controller dan juga method, sekarang kita lanjutkan untuk menambahkan route, ini digunakan agar controller kita dapat kita akses melalui web browser. Silahkan buka file
Di atas, pertama kita set untuk
Setelah itu, kita menggunakan route dengan jenis
Keuntungan menggunakan Route dengan jenis untuk melihat route
Langkah 3 - Membuat LayoutSekarang, kita lanjutkan untuk membuat layout untuk view nantinya, silahkan buat folder baru dengan nama
Di atas kita memanggil beberapa CSS dan JavaScript untuk kebutuhan project kita, diantaranya ada Tailwind CSS, yaitu di dalam file :
Kemudian, kita juga menambahkan library
Untuk menampilkan
Dan untuk melakukan render konten kita akan menggunakan kode berikut ini :
Langkah 4 - Membuat View IndexSetelah berhasil membuat layout, sekarang kita tinggal lanjutkan untuk membuat view untuk menampilkan data dari database. Silahkan buat folder baru dengan nama
Di atas untuk menampilkan data post kita menggunakan perulangan
Dan untuk menampilkan image dari post, di atas kita menggunaka kode seperti berikut ini :
Dan untuk pagination, kita menggunakan style Tailwind CSS yang sudah disediakan oleh Laravel. Akan tetapi nanti kita harus melakukan publish view-nya terlebih dahulu untuk menggunakan fitur ini :
Langkah 5 - Publish View PaginationKarena kita akan menggunakan view pagination Tailwind CSS bawaan dari Laravel, maka kita harus melakukan publish view-nya terlebih dahulu. Silahkan jalankan perintah berikut ini :
Jika berhasil, maka teman-teman akan melaihat beberapa sample view pagination di dalam folder Langkah 6 - Menjalankan ProjectSekarang kita bisa mencoba menjalankan projectnya di http://localhost:8000/post dan jika berhasil kurang lebih tampilannya seperti berikut ini : Di atas, kita telah berhasil menampilkan data dari database, pesan Terima Kasih
Artikel ini dibaca sebanyak 4.655 kali |