Bagaimana cara memasukkan bootstrap js di laravel?

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

Sekarang seperti yang Anda lihat kode template Anda. Ini terdiri dari bagian-bagian yang berbeda dan saya akan membuat tata letak di mana saya akan memisahkan semua bagian sebagian dari tata letak

Buka folder resources/view dan buat folder baru dengan nama, layout. Folder ini akan berisi tata letak utama (dan file lain yang akan disertakan dalam tata letak)

Sekarang, buat folder lain dan beri nama parsial. Folder ini akan berisi sebagian file seperti header dan footer yang akan digunakan oleh file tata letak

Buka folder layout dan buat file bernama mainlayout. Pedang. php. Tambahkan kode berikut ke dalamnya

 

   @include('layout.partials.head')

 

 


@include('layout.partials.nav'

@include('layout.partials.header')

@yield('content')

@include('layout.partials.footer')

@include('layout.partials.footer-scripts')

 

Kode ini membuat file tata letak yang akan menyertakan (@include) semua konten file yang ditentukan di lokasi yang diinginkan di dalam file HTML. @yield akan menempatkan konten tertentu dari file yang memperluas tata letak ini

Buat File Parsial

Selanjutnya, buat sebagian file yang disertakan dalam file tata letak utama. Buka folder parsial dan buat file bernama head. Pedang. php. File ini akan berisi konten yang masuk ke bagian kepala halaman

Album example for Bootstrap

Buat file nav. Pedang. php. File ini akan berisi kode yang terkait dengan pembuatan navigasi halaman bootstrap

 


     


       


         


           
About

           
Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.

         


         


           
Contact

           


             
Follow on Twitter

             
Like on Facebook

             
Email me

           

         


       


     


   


   


     


       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

Itu dia, Contoh template Bootstrap Album Bootstrap sekarang sudah terintegrasi dengan Laravel

Menguji Integrasi

Mari buat file tampilan yang memperluas file tata letak ini sehingga Anda dapat melihat integrasi tata letak Bootstrap dengan template Laravel Blade beraksi

Buat file demo. Pedang. php di folder views dan tambahkan konten berikut ke file

@extends('layout.mainlayout')

@section('content')

   


     


       


         This is a demo text

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas dolor vulputate quam convallis consequat. Quisque eu lorem eget magna lacinia suscipit. Maecenas condimentum vehicula eros. Fusce massa lacus, blandit et leo sed, accumsan commodo sem. Sed eget pulvinar tellus. Praesent ex diam, sodales at consequat id, viverra ut dolor. In eget orci sit amet magna sagittis mattis sit amet sed augue. Vivamus facilisis libero ligula, vel sodales ipsum sollicitudin id. Duis vitae urna rutrum, dignissim arcu ac, elementum augue. Quisque id interdum ligula. Donec tincidunt feugiat massa sed aliquam. Duis eu vehicula turpis.



     


   


@endsection

Buat Rute

Sekarang setelah tampilan dibuat, langkah selanjutnya adalah pembuatan rute untuk mengakses tampilan. Untuk ini, buka rute/web. php dan rekatkan rute berikut

Route::get('/demo', function () {

   return view('demo');

});

Sekarang jalankan aplikasi menggunakan URL pementasan. Anda akan melihat template Album Bootstrap terintegrasi dengan aplikasi Anda

Integrasikan Templat Admin Bootstrap di Laravel

Dalam contoh ini, saya akan menunjukkan cara mengintegrasikan Cool Admin Dashboard ke dalam aplikasi Laravel. Ini akan menjelaskan secara menyeluruh kepada Anda betapa mudahnya mengintegrasikan tema bootstrap di aplikasi Laravel

Berikut adalah contoh yang mengilustrasikan proses langkah demi langkah dalam mengintegrasikan tema admin ke dalam aplikasi. Ini adalah salah satu persyaratan utama aplikasi web apa pun, karena memungkinkan kami mengelola berbagai komponen situs web hanya dari dasbor

Dalam tutorial ini, saya akan membuat dua halaman setelah integrasi tema. Dalam dua halaman ini, saya akan menggunakan tema terintegrasi kami. Halaman itu akan memuat nama-nama berikut

1) rumah saya

2) pengguna saya

Unduh Dasbor Admin Keren

Pertama-tama, unduh semua dasbor yang ingin Anda integrasikan dengan aplikasi Laravel Anda. Saya telah mengunduh Dasbor Admin Keren karena mudah digunakan dan memiliki antarmuka yang ramah pengguna. Setelah pengunduhan selesai, ekstrak file JS, CSS, dan ikon darinya dan letakkan di dalam aplikasi Laravel

Kedua, buat folder tema di dalam folder publik dan salin semua data ke direktori tema tersebut

Rute Konfigurasi

Sekarang, saya akan menambahkan dua rute "my-home" dan "my-users" untuk dua halaman. Buka file rute dan tambahkan kode rute berikut

routes/web.php

Route::get('my-home', '[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.php


Set 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]
 

			
Bagaimana cara memasukkan 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 menambahkan 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 menautkan bootstrap CSS di Laravel?
			
cara mengintegrasikan bootstrap dengan Laravel . 
 
salin bootstrap. min. css ke folder publik/css Anda
 
salin bootstrap. min. js ke folder publik/js Anda
 
		
			
Bagaimana cara menambahkan bootstrap 5 ke Laravel 8?
			
3 cara install bootstrap 5 di laravel 8 . 
 
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