{"id":1297,"date":"2024-01-31T06:34:45","date_gmt":"2024-01-31T06:34:45","guid":{"rendered":"https:\/\/blog.uts.ac.id\/jul\/?p=1297"},"modified":"2025-05-21T04:28:24","modified_gmt":"2025-05-21T04:28:24","slug":"laravel-17-menggunakan-bootstrap-di-laravel","status":"publish","type":"post","link":"https:\/\/blog.uts.ac.id\/jul\/2024\/01\/31\/laravel-17-menggunakan-bootstrap-di-laravel\/","title":{"rendered":"Laravel #17 : Menggunakan Bootstrap Di Laravel"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Pada tutorial laravel ini kita akan belajar tentang cara menghubungkan file CSS dan JS dengan project laravel kita.<\/p>\n

Kita akan membuat beberapa contoh cara menghubungkan project laravel dengan file CSS atau JS.<\/p>\n

Sebagai contoh kita akan mencoba menghubungkan bootstrap<\/a> dengan project laravel kita.<\/p>\n

Menghubungkan File CSS dan JS Dengan Laravel<\/h3>\n

File CSS, JS, gambar dan assets lainnya bisa teman-teman letakkan di dalam folder public dalam project laravel. letaknya ada di belajar_laravel\/public.<\/p>\n

Jika kita buka folder public, sudah ada folder css, js dan svg yang menyimpan masing-masing file css, js dan gambar default dari project laravel.<\/p>\n

\n

\"menghubungkan<\/p>\n

menghubungkan css dan js dengan laravel<\/p>\n

\n
\n
\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Teman-teman bisa menghapus folder css dan js tersebut. dan bisa membuat folder assets, kemudian memasukkan file css dan js teman-teman ke dalam folder assets. tergantung gaya teman-teman.<\/p>\n

Yang penting nanti intinya semua file css dan js kita letakkan di dalam folder public ini.<\/p>\n

dan kemudian yang paling penting nanti link penghubungannya harus benar saat kita hubungkan dengan file view laravel nya.<\/p>\n

Contohnya,<\/p>\n

Misalnya di sini teman-teman mempunyai file style.css dalam folder css, dan mempunyai file app.js dalam folder js, maka cara menghubungkannya mudah sekali.<\/p>\n

Cara menghubungkannya, buka file view yang ingin teman-teman hubungkan dengan css dan js ini. hubungkan dengan syntax berikut.<\/p>\n

\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
<<\/span>link <\/span>rel<\/span>=“stylesheet”<\/span> type<\/span>=“text\/css”<\/span> href<\/span>=“\/css\/style.css”<\/span>><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

atau<\/p>\n

\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
<<\/span>link <\/span>rel<\/span>=“stylesheet”<\/span> type<\/span>=“text\/css”<\/span> href<\/span>=“{{ asset(‘\/css\/app.css’) }}”<\/span>><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

atau untuk menghubungkan file JS nya,<\/p>\n

\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
<script <\/span>type<\/span>=“text\/javascript”<\/span> src<\/span>=“\/js\/app.js”<\/span>><\/span><\/script><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

atau<\/p>\n

\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
<script <\/span>type<\/span>=“text\/javascript”<\/span> src<\/span>=“{{ asset(‘\/js\/app.js’) }}”<\/span>><\/span><\/script><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Intinya saat kita menghubungkan laravel dengan file css dan js, secara default linknya dimulai dari folder public. Seperti yang teman-teman pada contoh penghubungan css dan js di atas.<\/p>\n

<\/p>\n

Menghubungkan Bootstrap Dengan Laravel<\/h3>\n

Sebenarnya pada project laravel, sudah ada file css bootstrap secara default pada pertama kali kita menginstall laravel.<\/p>\n

Letaknya ada pada file app.css dalam folder css.<\/p>\n

Tidak percaya ?<\/p>\n

Coba sekarang kita hubungkan file app.css tersebut dengan salah satu view yang sudah pernah kita buat pada tutorial sebelumnya.<\/p>\n

Disini saya akan mencoba menghubungkan app.css dengan view index.blade.php. dimana pada view index.blade ini sebelumnya kita buat untuk halaman yang menampilkan data pegawai.<\/p>\n

Silahkan teman-teman baca tutorial CRUD Laravel<\/a> sebelumnya jika belum.<\/p>\n

belajar_laravel\/resources\/views\/index.blade.php<\/strong><\/p>

\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n
26<\/div>\n
27<\/div>\n
28<\/div>\n
29<\/div>\n
30<\/div>\n
31<\/div>\n
32<\/div>\n
33<\/div>\n
34<\/div>\n
35<\/div>\n
36<\/div>\n
37<\/div>\n
38<\/div>\n
39<\/div>\n
40<\/div>\n
41<\/div>\n
42<\/div>\n
43<\/div>\n
44<\/div>\n
45<\/div>\n
46<\/div>\n
47<\/div>\n
48<\/div>\n
49<\/div>\n
50<\/div>\n
51<\/div>\n
52<\/div>\n
53<\/div>\n
54<\/div>\n
55<\/div>\n
56<\/div>\n
57<\/div>\n
58<\/div>\n
59<\/div>\n
60<\/div>\n
61<\/div>\n
62<\/div>\n
63<\/div>\n
64<\/div>\n
65<\/div>\n<\/div>\n<\/td>\n
\n
\n
<<\/span>!DOCTYPE <\/span>html<\/span>><\/span><\/div>\n
<<\/span>html<\/span>><\/span><\/div>\n
<<\/span>head<\/span>><\/span><\/div>\n
<<\/span>title<\/span>><\/span>Tutorial <\/span>Membuat <\/span>Pencarian <\/span>Pada <\/span>Laravel<\/span> – www<\/span>.<\/span>malasngoding<\/span>.<\/span>com<\/span><<\/span>\/title<\/span>><\/span><\/div>\n
<<\/span>link <\/span>rel<\/span>=“stylesheet”<\/span> type<\/span>=“text\/css”<\/span> href<\/span>=“{{ asset(‘\/css\/app.css’) }}”<\/span>><\/span><\/div>\n
<<\/span>\/head<\/span>><\/span><\/div>\n
<<\/span>body<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>div <\/span>class<\/span>=“container”<\/span>><\/span><\/div>\n
<<\/span>div <\/span>class<\/span>=“card”<\/span>><\/span><\/div>\n
<<\/span>div <\/span>class<\/span>=“card-body”<\/span>><\/span><\/div>\n
 <\/div>\n
 <\/div>\n
<<\/span>h2 <\/span>class<\/span>=“text-center”<\/span>><\/span><<\/span>a<\/span> href<\/span>=“https:\/\/www.malasngoding.com”<\/span>><\/span>www<\/span>.<\/span>malasngoding<\/span>.<\/span>com<\/span><<\/span>\/a<\/span>><\/span><<\/span>\/h2<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>h3<\/span>><\/span>Data <\/span>Pegawai<\/span><<\/span>\/h3<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>p<\/span>><\/span>Cari <\/span>Data <\/span>Pegawai<\/span> :<<\/span>\/p<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>div <\/span>class<\/span>=“form-group”<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>\/div<\/span>><\/span><\/div>\n
<<\/span>form <\/span>action<\/span>=“\/pegawai\/cari”<\/span> method<\/span>=“GET”<\/span> class<\/span>=“form-inline”<\/span>><\/span><\/div>\n
<<\/span>input <\/span>class<\/span>=“form-control”<\/span> type<\/span>=“text”<\/span> name<\/span>=“cari”<\/span> placeholder<\/span>=“Cari Pegawai ..”<\/span> value<\/span>=“{{ old(‘cari’) }}”<\/span>><\/span><\/div>\n
<<\/span>input <\/span>class<\/span>=“btn btn-primary ml-3”<\/span> type<\/span>=“submit”<\/span> value<\/span>=“CARI”<\/span>><\/span><\/div>\n
<<\/span>\/form<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>br<\/span>\/><\/span><\/div>\n
 <\/div>\n
<<\/span>table <\/span>class<\/span>=“table table-bordered”<\/span>><\/span><\/div>\n
<<\/span>tr<\/span>><\/span><\/div>\n
<<\/span>th<\/span>><\/span>Nama<\/span><<\/span>\/th<\/span>><\/span><\/div>\n
<<\/span>th<\/span>><\/span>Jabatan<\/span><<\/span>\/th<\/span>><\/span><\/div>\n
<<\/span>th<\/span>><\/span>Umur<\/span><<\/span>\/th<\/span>><\/span><\/div>\n
<<\/span>th<\/span>><\/span>Alamat<\/span><<\/span>\/th<\/span>><\/span><\/div>\n
<<\/span>th<\/span>><\/span>Opsi<\/span><<\/span>\/th<\/span>><\/span><\/div>\n
<<\/span>\/tr<\/span>><\/span><\/div>\n
@foreach<\/span>($pegawai <\/span>as<\/span> $p<\/span>)<\/div>\n
<<\/span>tr<\/span>><\/span><\/div>\n
<<\/span>td<\/span>><\/span>{{ $p<\/span>–><\/span>pegawai_nama<\/span> }}<<\/span>\/td<\/span>><\/span><\/div>\n
<<\/span>td<\/span>><\/span>{{ $p<\/span>–><\/span>pegawai_jabatan<\/span> }}<<\/span>\/td<\/span>><\/span><\/div>\n
<<\/span>td<\/span>><\/span>{{ $p<\/span>–><\/span>pegawai_umur<\/span> }}<<\/span>\/td<\/span>><\/span><\/div>\n
<<\/span>td<\/span>><\/span>{{ $p<\/span>–><\/span>pegawai_alamat<\/span> }}<<\/span>\/td<\/span>><\/span><\/div>\n
<<\/span>td<\/span>><\/span><\/div>\n
<<\/span>a<\/span> class<\/span>=“btn btn-warning btn-sm”<\/span> href<\/span>=“\/pegawai\/edit\/{{ $p->pegawai_id }}”<\/span>><\/span>Edit<\/span><<\/span>\/a<\/span>><\/span><\/div>\n
<<\/span>a<\/span> class<\/span>=“btn btn-danger btn-sm”<\/span> href<\/span>=“\/pegawai\/hapus\/{{ $p->pegawai_id }}”<\/span>><\/span>Hapus<\/span><<\/span>\/a<\/span>><\/span><\/div>\n
<<\/span>\/td<\/span>><\/span><\/div>\n
<<\/span>\/tr<\/span>><\/span><\/div>\n
@endforeach<\/span><\/div>\n
<<\/span>\/table<\/span>><\/span><\/div>\n
 <\/div>\n
<<\/span>br<\/span>\/><\/span><\/div>\n
Halaman<\/span> : {{ $pegawai<\/span>–><\/span>currentPage<\/span>() }} <<\/span>br<\/span>\/><\/span><\/div>\n
Jumlah <\/span>Data<\/span> : {{ $pegawai<\/span>–><\/span>total<\/span>() }} <<\/span>br<\/span>\/><\/span><\/div>\n
Data <\/span>Per <\/span>Halaman<\/span> : {{ $pegawai<\/span>–><\/span>perPage<\/span>() }} <<\/span>br<\/span>\/><\/span><\/div>\n
<<\/span>br<\/span>\/><\/span><\/div>\n
 <\/div>\n
{{$pegawai<\/span>–><\/span>links<\/span>() }}<\/div>\n
<<\/span>\/div<\/span>><\/span><\/div>\n
<<\/span>\/div<\/span>><\/span><\/div>\n
<<\/span>\/div<\/span>><\/span><\/div>\n
 <\/div>\n
 <\/div>\n
<<\/span>\/body<\/span>><\/span><\/div>\n
<<\/span>\/html<\/span>><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Di sini kita hanya menghubungkan dengan file app.css <\/span><\/p>

\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
<<\/span>link <\/span>rel<\/span>=“stylesheet”<\/span> type<\/span>=“text\/css”<\/span> href<\/span>=“{{ asset(‘\/css\/app.css’) }}”<\/span>><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

jika teman-teman tidak ingin menggunakan fungsi asset() seperti pada contoh di atas, teman-teman juga bisa langsung menuliskan href=\u201d\/css\/app.css\u201d.<\/p>\n

Dan kemudian pada bagian selanjutnya saya hanya menambahkan class-class bootstrap.<\/p>\n

Untuk teman-teman yang mau membaca tutorial bootstrap di malasngoding.com, silahkan kunjungi link di bawah ini.<\/p>\n

Tutorial Bootstrap Lengkap Dari Dasar Sampai Mahir<\/strong><\/a><\/p>\n

Oke sekarang kita lihat bagaimana hasilnya.<\/p>\n

localhost:8000\/pegawai<\/p>\n

\n

\"Menggunakan<\/p>\n

Menggunakan Bootstrap Di Laravel<\/p>\n<\/div>\n

Seperti hasil yang teman-teman lihat pada gambar di atas. kita telah berhasil menggunakan bootstrap pada laravel.<\/p>\n

Silahkan teman-teman explore lagi dengan mencoba langsung menerapkan template atau file css yang teman-teman custom sendiri.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Pada tutorial laravel ini kita akan belajar tentang cara menghubungkan file CSS dan JS dengan project laravel kita. Kita akan membuat beberapa contoh cara menghubungkan project laravel dengan file CSS atau JS. Sebagai contoh kita akan mencoba menghubungkan bootstrap dengan project laravel kita. Menghubungkan File CSS dan JS Dengan Laravel File CSS, JS, gambar dan assets lainnya […]<\/p>\n","protected":false},"author":21,"featured_media":1312,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,9],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/posts\/1297"}],"collection":[{"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/comments?post=1297"}],"version-history":[{"count":5,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/posts\/1297\/revisions"}],"predecessor-version":[{"id":2256,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/posts\/1297\/revisions\/2256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/media\/1312"}],"wp:attachment":[{"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/media?parent=1297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/categories?post=1297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uts.ac.id\/jul\/wp-json\/wp\/v2\/tags?post=1297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}