Cara menggunakan bootstrap di laravel

Sejak versi 8 Laravel menggunakan Tailwind CSS sebagai framework CSS utamanya. Meskipun menjadi framework CSS kelas satu, mengembangkan menggunakan Tailwind CSS memerlukan banyak pekerjaan karena Anda harus mengembangkan sendiri setiap komponen yang dapat digunakan kembali dari awal

Dulu banyak developer, seperti saya, menggunakan Bootstrap. Laravel telah menghentikan dukungan Bootstrap sejak versi 8. Cara termudah untuk tetap menggunakan Bootstrap di Laravel 8 adalah dengan membuat proyek Laravel baru dan kemudian menggunakan kedua perintah tersebut

composer require laravel/ui
php artisan ui bootstrap --auth

Ini menginstal versi sebelumnya Bootstrap 4. 6. x dan menambahkan beberapa perancah jika Anda menggunakan opsi – – auth.  

Bagi kita yang ingin tetap menggunakan Bootstrap, ada cara sederhana untuk membuat proyek Laravel baru menggunakan framework Bootstrap 5 terbaru.

Cara menggunakan bootstrap di laravel

Tip

Jika Anda mencari Server Pengembangan Web Lokal yang luar biasa untuk mengembangkan aplikasi berbasis PHP di lingkungan Microsoft Windows, silakan baca postingan saya tentang Laragon

2. LARAVEL 9 - Bangun aplikasi secara manual dari awal

a. Buat proyek Laravel baru

Mulailah dengan membuat proyek Laravel baru

composer create-project laravel/laravel your-project-name
_

Kemudian cd ke dalam folder proyek yang baru dibuat dan instal paket Laravel UI

composer require laravel/ui

Paket warisan ini adalah perancah autentikasi yang sangat sederhana yang dibangun di atas kerangka kerja Bootstrap 4 CSS

Hasilkan perancah Bootstrap

php artisan ui bootstrap --auth	

Ini menginstal Bootstrap 4. 6 dan menghasilkan file yang diperlukan untuk otentikasi

b. Instal Bootstrap 5

Sekarang mari kita instal Bootstrap 5.   

npm install bootstrap@latest bootstrap-icons @popperjs/core --save-dev
_

Ini memperbarui Bootstrap 4. 6. x ke versi 5. x dan menambahkan Bootstrap Icons dan popper. js versi 2
Jangan lepaskan popper. js versi 1

c. Konfigurasikan. env

Sekarang buka proyek Anda di editor kode favorit Anda. Saya menggunakan Kode Visual Studio

Periksa dan tambahkan semua pengaturan, terutama koneksi database dan pengaturan email

d. Impor Ikon Bootstrap

Di dalam proyek Anda, buka file resources\sass\app. scss dan tambahkan.  

@import '~bootstrap-icons/font/bootstrap-icons';

Cara menggunakan bootstrap di laravel

e. Ganti file perancah

Di dalam proyek Anda, ganti file Bootstrap 4 scaffolding dengan yang dapat Anda unduh di sini

Jadi ganti konten folder project /resources/views/ Anda dengan folder di arsip ZIP yang diunduh

Cara menggunakan bootstrap di laravel

f. Selesaikan aplikasi

Sekarang buat tabel database.  

php artisan migrate
_

Lalu mari selesaikan penyiapan

npm install
npm run dev

Tip

Jika perintah npm run dev melontarkan kesalahan tentang dependensi yang hilang, jalankan saja perintah itu untuk kedua kalinya

Normalnya semua sudah baik-baik saja sekarang dan Anda dapat mulai mengembangkan aplikasi Laravel 8 Bootstrap 5 Anda sendiri

2. LARAVEL 9 - Bangun aplikasi dengan mengkloning repositori GitHub

Proyek demo Laravel 9 kosong yang berisi Bootstrap 5 tersedia di GitHub

a. Kloning repositori GitHub

Di dalam folder root lingkungan pengembangan web lokal Anda, buka jendela terminal baru
Masukkan perintah

git clone https://github.com/MGeurts/laravel-9-bootstrap-5.git
_

Ubah direktori ke folder proyek yang baru dibuat

b. Instal Ketergantungan Komposer

Masukkan perintah.  

composer install
_

c. Instal Ketergantungan NPM

Masukkan perintah.  

composer create-project laravel/laravel your-project-name
_0

d. Buat salinan Anda dari. env

Masukkan perintah

composer create-project laravel/laravel your-project-name
_1

e. Buat Kunci Enkripsi Aplikasi

Masukkan perintah.

composer create-project laravel/laravel your-project-name
_2

f. Buat database kosong untuk aplikasi kita

Gunakan alat manajemen basis data favorit Anda untuk membuat basis data kosong
Konfigurasikan nama pengguna dan kata sandi

g. Konfigurasikan. env

Buka. env untuk diedit.

composer create-project laravel/laravel your-project-name
3Sesuaikan opsi DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME dan DB_PASSWORD agar sesuai dengan situasi Anda. Sesuaikan juga pengaturan email.
composer create-project laravel/laravel your-project-name
4Sesuaikan opsi MAIL_HOST, MAIL_PORT, MAIL_USERNAME, MAIL_PASSWORD, MAIL_ENCRYPTION, dan MAIL_FROM_ADDRESS agar sesuai dengan situasi Anda

h. Migrasikan database

Masukkan perintah. .

php artisan migrate
_

i. Buka aplikasi

Anda sekarang memiliki aplikasi Laravel 8 yang berfungsi menggunakan framework Bootstrap 5 

Buka browser dan buka url aplikasi Anda

Cara menggunakan bootstrap di laravel

Gunakan tombol Daftar untuk mendaftarkan diri Anda

Cara menggunakan bootstrap di laravel

3. LARAVEL 9 - Perluas aplikasi dengan DataTables

Jika aplikasi Anda harus mengelola banyak catatan, silakan kunjungi posting saya tentang mengintegrasikan DataTables

Bisakah kita menggunakan bootstrap dengan Laravel?

Pengantar. Meskipun Laravel tidak menentukan pra-prosesor JavaScript atau CSS mana yang Anda gunakan, Laravel menyediakan titik awal dasar menggunakan Bootstrap, React, dan/atau Vue yang . Secara default, Laravel menggunakan NPM untuk menginstal kedua paket frontend ini.

Bagaimana cara menggunakan bootstrap di Laravel 8?

Bagaimana Cara Memasang Bootstrap di Laravel? .
Langkah 1. Instal Laravel
Langkah 2. Instal UI Laravel
Langkah 3. Menghasilkan Perancah
Langkah 4. Instal Paket Bootstrap
Langkah 5. Gunakan Bootstrap di Tema
Jalankan Aplikasi Laravel

Bagaimana cara menggunakan template bootstrap di Laravel?

Integrasikan Template Bootstrap dengan Laravel .
Apakah Laravel Menggunakan bootstrap?
Buat File Tata Letak
Buat File Parsial
Menguji Integrasi
Buat Rute
Integrasikan template admin bootstrap di Laravel
Unduh Dasbor Admin Keren
Rute Konfigurasi

Bagaimana cara menggunakan bootstrap 5 di Laravel 8?

3 cara install bootstrap 5 di laravel 8 .
3 cara install bootstrap 5 di laravel 8. Langkah 1. Buat Proyek Laravel. Langkah 2. Menambahkan Bootstrap 5 CDN. .
Langkah 1. Buat Proyek Laravel
Langkah 2. Menambahkan Bootstrap 5 CDN
Langkah 3. Menambahkan Folder Publik Bootstrap
Langkah 4. Menambahkan Bootstrap 5 menggunakan Laravel Mix