Bootstrap adalah framework CSS gratis dan open-source untuk pengembangan web front-end responsif dan mobile-first. Ini berisi tata letak desain berbasis HTML, CSS, dan JavaScript untuk tipografi, formulir, tombol, rute, dan komponen antarmuka lainnya. Framework populer ini memiliki sistem grid responsif untuk tata letak, komponen pra-bangun untuk pola desain, dan plugin JS untuk interaksi pengguna
Pada artikel ini, saya akan memperkenalkan Anda ke Bootstrap, dan cara menginstalnya di dalam aplikasi Laravel 9 Anda
Apa itu Bootstrap?
Bootstrap mempercepat pengembangan web dan membuatnya lebih mudah. Desainnya responsif dan kompatibel dengan berbagai browser. Ini menawarkan desain yang andal melalui komponen yang dapat digunakan kembali, dan sangat mudah digunakan dan dipelajari.
Bootstrap menggunakan JavaScript, built-in back untuk plugin jQuery, dan API JavaScript terprogram. Itu dapat digunakan dengan IDE apa pun atau editor PHP gratis, dan bahasa dan teknologi sisi server apa pun, dari ASP. NET dan Ruby on Rails ke PHP. UI Bootstrap adalah pustaka desain yang konsisten untuk aplikasi web yang cantik dan intuitif
Dengan Bootstrap, desainer web dapat berkonsentrasi pada peningkatan tanpa menekankan desain, untuk membuat situs web interaktif aktif dan berjalan dengan cepat. Ini juga menawarkan arsitek web pendirian yang kuat untuk membuat tema Bootstrap yang menarik
Bagaimana cara menginstal Bootstrap 5 di Laravel 9?
Ikuti panduan langkah demi langkah ini untuk menggunakan laravel bootstrap.
1] Instal Proyek Laravel
Jalankan perintah berikut untuk menginstal proyek Laravel baru dari awal
komposer buat-proyek laravel/laravel –prefer-dist laravel-bootstrap
Untuk menggunakan aplikasi Laravel yang baru dibuat
cd laravel-bootstrap
2] Instal Laravel/UI
Laravel UI adalah perpustakaan resmi komponen UI tertentu atau yang telah ditentukan sebelumnya. Ini menawarkan platform login dan pendaftaran untuk format Respond, Vue, jQuery, dan Bootstrap
Jalankan perintah ini untuk menginstal Laravel/UI
komposer memerlukan laravel/UI
3] Instal Bootstrap di Laravel
Jalankan perintah ini untuk menginstal framework Bootstrap CSS di proyek Laravel Anda
php tukang ke Bootstrap
4] Instal Bootstrap Auth Scaffolding
Jalankan perintah berikut untuk menginstal perancah autentikasi
php artisan up Bootstrap –auth
Ini menyimpulkan proses instalasi Bootstrap. Untuk memastikannya terinstal dengan benar, buka resource/js/bootstrap. js. Anda akan melihat popper itu. js dan jQuery telah ditambahkan ke file JavaScript Bootstrap
5] Instal Paket Bootstrap
Sekarang mari instal paket Bootstrap untuk komponen frontend terkait
Sebelum melanjutkan, pastikan Anda telah menginstal Node di sistem pengembangan lokal Anda dengan perintah berikut
# untuk simpul
simpul -v
# untuk npm
npm -v
Terakhir, instal paket Bootstrap dan dependensi frontend terkait seperti jquery dari npm dengan perintah berikut
instal npm
6] Kompilasi Aset
Folder sumber daya/sass _variables. scss dan aplikasi. file scss akan ditambahkan bersama dengan variabel sass dan font
// Font
@import url['https. // font. googleapis. com/css?family=Nunito’];
// Variabel
@import 'variabel';
// Bootstrap
@import ‘~bootstrap/scss/bootstrap’;
Sekarang jalankan perintah di bawah ini untuk kompilasi aset
# untuk pengembangan
npm menjalankan dev
Jalankan perintah di bawah ini untuk mengkompilasi file CSS dan JavaScript dari folder resources/js dan resources/sass ke folder publik
# untuk produksi
npm menjalankan produksi
7] Otomatiskan Perubahan SASS dan JS
Jika Anda tidak ingin menjalankan perintah npm run dev setiap kali Anda membuat perubahan pada file SASS dan JS, gunakan perintah berikut
npm menjalankan menonton
Ini akan mengawasi file Anda dan mengompilasi kode secara otomatis jika mendeteksi adanya perubahan pada file SASS dan JS
8] Menggunakan Bootstrap di Laravel Blade Template
File sass sekarang dikompilasi menjadi satu file CSS di dalam folder publik. Kita dapat menentukan path js dan CSS dan menggunakan Bootstrap js dan CSS di template blade Laravel
Membuat tata letak adalah bagian penting dari proyek apa pun. Menyadari hal ini, Laravel hadir dengan mesin template Blade yang menghasilkan desain dan template ramping berbasis HTML. Semua tampilan Laravel yang dibangun menggunakan Blade terletak di sumber daya/tampilan
Bootstrap terkenal di kalangan pengembangan untuk opsi desain yang mengesankan. Laravel membuatnya sangat mudah untuk menggunakan template Bootstrap dalam tampilan proyek. Dalam tutorial ini, saya akan mendemonstrasikan bagaimana template Bootstrap dapat digunakan di dalam mesin Laravel Blade
Secara default, Laravel menggunakan NPM untuk menginstal kedua paket frontend ini. Laravel tidak menentukan pra-prosesor JavaScript atau CSS mana yang Anda gunakan, Laravel menyediakan titik awal dasar menggunakan Bootstrap, React, dan/atau Vue yang akan berguna untuk banyak aplikasi
Mengintegrasikan template Bootstrap dengan Laravel adalah proses yang sederhana. Yang perlu Anda lakukan adalah memotong Bootstrap HTML Anda menjadi konten template Blade kecil, lalu gunakan, perluas, dan/atau sertakan template di file Blade utama. Untuk mendemonstrasikan prosesnya, saya akan menggunakan Contoh Album Untuk Bootstrap
Prasyarat sederhana adalah instalasi baru Laravel 9
Apakah Laravel Menggunakan bootstrap?
Laravel 8 menyediakan cara mudah untuk bekerja dengan bootstrap, vue dan react, Direktori bootstrap berisi aplikasi. php yang mem-bootstrap kerangka kerja. Direktori ini juga menampung direktori cache yang berisi file yang dihasilkan kerangka kerja untuk pengoptimalan kinerja seperti file cache rute dan layanan. Biasanya Anda tidak perlu mengubah file apa pun di dalam direktori ini
Bootstrap adalah kerangka kerja CSS, dan menyediakan komponen UI yang mudah digunakan yang membantu membangun aplikasi web atau seluler tingkat berikutnya. Ini adalah panduan langkah demi langkah tentang cara menggunakan Bootstrap 4 di Laravel
Buat File Tata Letak
Sebelum membuat file layout, Anda perlu memahami struktur file Laravel. Untuk ini, saya sarankan membaca artikel saya tentang cara membuat tata letak Laravel menggunakan mesin template Blade
Sekarang mari kita lihat kode halaman template dan mengidentifikasi berbagai bagian halaman. Simpan bagian-bagian ini dalam file terpisah untuk pengelolaan yang mudah
Follow on Twitter
Album
Selanjutnya, buat file header. Pedang. php. File ini akan berisi header yang terlihat dari halaman Bootstrap
Album example
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sIet, but not too short so folks don't simply skip over it entirely.
Main call to action Secondary action
Langkah selanjutnya adalah membuat file untuk footer. Untuk ini, buat file bernama footer. Pedang. php
_
Back to top
Album example is © Bootstrap, but please download and customize it for yourself!
New to Bootstrap? Visit the homepage or read our getting started guide.
Sekarang buat file bernama footer-scripts. Pedang. php berisi file JS yang harus disertakan di bagian bawah halaman
Setelah membuat semua file view, folder views akan terlihat seperti ini
[email protected]']; Route::get['my-users', '[email protected]'];_
Tambahkan Pengontrol
Pada langkah ini, saya akan membuat HomeController baru dan menambahkan dua metode untuk halaman dasbor dan halaman pengguna saya. Ketik kode berikut untuk HomeController
app/Http/Controllers/HomeController.phpSet Theme Blade Files
The next step is to set up theme blade files. I will create three files for the Cool Admin Dashboard theme. If you have any other large theme, then you can also create some more files to manage it. I will create a theme folder containing three files within the view folder:
The three files are named as:
1]default.blade.php
2]header.blade.php
3]sidebar.blade.php
Now I have to add code for these three files as listed below:
resources/views/theme/default.blade.php SB Admin 2 - Bootstrap Admin Theme@include['theme.header'] @include['theme.sidebar']
@yield['content']
Setup Header Insert the following code inside the directory file resources/views/theme/header.blade.php
Dashboard
Toggle navigation
search
-
dashboard
Stats
-
notifications
5
Some Actions
Mike John responded to your email You have 5 new tasks You're now friend with Andrew Another Notification Another One
-
person
Account
Profile Settings Log out
Setelah berhasil mengatur header, saatnya mengatur sidebar. Ketik kode berikut
Album example for Bootstrap_0
Rumah
Pada langkah ini, saya akan membuat dua file blade baru menggunakan tata letak tema terintegrasi. Saya telah menambahkan dua rute satu untuk rumah dan satu lagi untuk pengguna. Mari buat dua file dan lihat cara kerja tema terintegrasi
Album example for Bootstrap_1
Meja Karyawan
Album example for Bootstrap_2
Template Bootstrap Laravel Populer
OneUI
OneUI adalah template – dibuat untuk aplikasi Laravel – dibangun di atas Bootstrap. Ini adalah antarmuka pengguna yang memungkinkan pengembang membuat konsol admin yang profesional, fleksibel, dan dapat dikelola sepenuhnya untuk semua jenis proyek
Bahan Dasbor Laravel
Dasbor Material Laravel meningkatkan proses pengembangan, terinspirasi oleh desain material baru Google. Ini memiliki frontend yang ramah pengguna dan backend Laravel yang berfungsi penuh. Dasbor memfasilitasi pengembang untuk mengelola pengguna dengan teknik CRUD out-of-the-box
Laravel Dasbor Hitam
Black Dashboard Laravel menggunakan komponen frontend yang dapat disesuaikan dan mudah dipahami. Ini menggunakan kombinasi warna yang mencolok, cukup bersemangat untuk menjalankan analisis yang efisien dalam proses pengembangan Anda dengan kartu dan tipografi yang luas
Sudut
Angle adalah panel admin dinamis yang kompatibel dengan Laravel dan banyak framework lainnya. Pengembang dapat menggunakan panel ini di semua jenis dasbor aplikasi untuk membuat aplikasi halaman tunggal [SPA], aplikasi eCommerce, sistem manajemen proyek, dll. Komponen dasbor ini memfasilitasi pengembang untuk bekerja dengan HTML5, Bootstrap, JS, CSS, dan teknologi utama lainnya
Tingkatkan Kecepatan Aplikasi Laravel Anda hingga 300%
Cloudways menawarkan Anda server khusus dengan penyimpanan SSD, kinerja khusus, tumpukan yang dioptimalkan, dan lainnya untuk waktu muat 300% lebih cepat
Untuk menyimpulkan
Pada artikel ini, saya telah mendemonstrasikan integrasi Cool Admin Dashboard ke dalam aplikasi Laravel dan juga menunjukkan cara mengonfigurasi tema khusus di aplikasi. Kedua teknik integrasi diilustrasikan dengan cukup detail, dan mudah-mudahan, mereka akan bekerja untuk Anda, dan membantu Anda mengembangkan aplikasi web yang dioptimalkan
Jika Anda masih memiliki pertanyaan tentang tutorial ini, silakan gunakan bagian komentar untuk pertanyaan Anda
Dalam tutorial ini, saya telah mendemonstrasikan cara mudah untuk mengintegrasikan template Bootstrap di aplikasi Laravel. Jika Anda memiliki pertanyaan silakan komentar di bawah ini. Juga, ikuti saya di Twitter dan terhubung
Apakah Laravel menggunakan bootstrap?
Laravel tidak menentukan pra-prosesor, JavaScript, atau CSS mana yang perlu Anda gunakan, tetapi Laravel memberikan titik awal penting menggunakan Bootstrap, React, dan / atau Vue yang akan mendukung banyak aplikasi. Secara default, Laravel menggunakan NPM untuk menginstal kedua paket frontend ini
Apakah Laravel 8 mendukung bootstrap?
laravel 8 memberikan cara sederhana untuk bekerja dengan bootstrap, vue dan react. Setelah berhasil menginstal paket di atas maka kami siap menginstal bootstrap 4 dengan aplikasi kami
Tinjauan Pelanggan di
“Cloudways hosting memiliki salah satu layanan pelanggan dan kecepatan hosting terbaik”
Sanjit C [Pengembang Situs Web]
Saquib Rizwan
Saquib adalah Pakar Komunitas PHP di Cloudways - Platform Cloud Hosting PHP Terkelola. Dia fasih dalam PHP dan secara teratur memberikan kontribusi untuk proyek open source. Untuk bersenang-senang, dia menikmati game, film, dan berkumpul dengan teman-teman. Anda dapat mengirim email kepadanya di [email protected]