Home Web Memahami dan Menginstal Laravel UI untuk Pengembangan Web

Memahami dan Menginstal Laravel UI untuk Pengembangan Web

0

APA ITU LARAVEL UI?

Laravel UI adalah alat atau paket yang disediakan oleh kerangka kerja Laravel untuk membantu Anda membuat tampilan dasar dalam proyek web Anda dengan lebih mudah. Ini termasuk pembuatan halaman autentikasi (login, pendaftaran, dll.) dan tampilan papan tulis (dashboard) yang umum ditemukan dalam banyak aplikasi web. Laravel UI membantu Anda menghemat waktu dengan menghasilkan kode tampilan yang sudah jadi, sehingga Anda dapat fokus pada pengembangan fitur inti aplikasi Anda.

Langkah 1: Membuat Proyek Laravel

Jika Anda belum memiliki proyek Laravel, ikuti langkah ini untuk membuatnya:

1.Buka terminal atau command prompt.

2.Jalankan perintah berikut untuk membuat proyek Laravel baru. Ganti NamaProyek dengan nama yang Anda inginkan.

composer create-project –prefer-dist laravel/laravel NamaProyek

3.Pindah ke direktori proyek yang baru saja dibuat.

cd NamaProyek

Langkah 2: Instalasi Laravel UI dan Membuat Tampilan

Setelah memiliki proyek Laravel, langkah selanjutnya adalah menginstal Laravel UI dan membuat tampilan dasar. Dalam contoh ini, kita akan menggunakan template Bootstrap.

1.Jalankan perintah berikut untuk menginstal Laravel UI.

composer require laravel/ui

2.Setelah selesai, jalankan perintah ini untuk membuat tampilan autentikasi dengan template Bootstrap.

php artisan ui bootstrap –auth

Langkah 3: Kompilasi Aset dan Menjalankan Server Lokal

Kemudian, kita perlu mengkompilasi aset seperti CSS dan JavaScript serta menjalankan server lokal.

1.Jalankan perintah berikut untuk menginstal dependensi JavaScript.

npm install

2.Kompilasi aset menggunakan perintah:

npm run dev

3.Jalankan server lokal:

php artisan serve

Langkah 4: Menyesuaikan Tampilan (Opsional)

Anda dapat menyesuaikan tampilan sesuai kebutuhan Anda dengan mengedit berkas-berkas yang dihasilkan oleh Laravel UI. Berikut adalah beberapa berkas yang mungkin perlu Anda perhatikan:

  • resources/views/auth: Berisi tampilan autentikasi seperti login, pendaftaran, lupa kata sandi, dan reset kata sandi.
  • resources/views/layouts: Berisi tata letak dasar untuk halaman Anda.
  • resources/views/home.blade.php: Ini adalah tampilan papan tulis (dashboard) setelah pengguna berhasil masuk.

Langkah 5: Ekstra – Menggunakan Laravel Jetstream (Opsional)

Jika Anda ingin tampilan yang lebih modern dan fitur-fitur tambahan, Anda juga dapat mempertimbangkan menggunakan Laravel Jetstream.

1.Instal Jetstream dengan perintah:

composer require laravel/jetstream

2.Pilih tipe tampilan yang diinginkan (Inertia atau Livewire) dan jalankan perintah berikut:

php artisan jetstream:install inertia

atau

php artisan jetstream:install livewire

Dengan mengikuti panduan ini, Anda sekarang memiliki pemahaman dasar tentang bagaimana menggunakan Laravel UI dalam proyek Laravel Anda. Laravel UI membantu Anda dengan cepat membuat tampilan dasar seperti halaman autentikasi dan papan tulis, mempercepat proses pengembangan Anda.