[ TUTORIAL LARAVEL 8 + BOOTSTRAP v5.0.0 UNTUK PEMULA ] #5 Membuat User Interface Landing Page dengan Blade dan Bootstrap v5.0.0 Laravel

byAde Setiyawan •
15

 

garasi koding laravel 8
User Interface landing Page dengan Blade dan Bootstrap 

Hallo semuanya selamat datang di blog kami, semoga kita semua dalam keadaan sehat dan selalu dalam lindungan Allah dalam masa pandemi seperti ini serta semoga pandemi ini segera berakhir. Bagaimana semuanya masih semangat untuk menambah ilmunya, kami yakin anda masih semangat dan selalu berusaha mendapatkan ilmu yang bermanfaat. 

Kali ini kami akan membahas tentang pembuatan User Interface Landing Page dengan Blade dan Bootstrap v5.0.0. Kami akan menjelaskan bagaimana cara untuk memasukkan bootstrap ke Laravel dan bagaimana cara untuk menggunakannya. Oke langsung saja simak penjelasan dari kami. 

Pertama silahkan anda membuka project yang sebelumnya telah dibuat di artikel sebelumnya [ TUTORIAL LARAVEL 8 UNTUK PEMULA ] Tutorial Migration Laravel 8 Create & Relation Table Silahkan anda simak terlebih dahulu jika belum membuatnya. Kemudian silahkan buka project anda di Text editor kesukaan anda. Seperti dibawah ini:


Berikutnya silahkan buat controller terlebih dahulu untuk menampung semua fasilitas atau fitur atau halaman yang akan dibuat seperti soal yang ada di artikel sebelumnya. Silahkan simak di artikel [ TUTORIAL LARAVEL 8 UNTUK PEMULA ] Membuat halaman Sederhana di laravel 8 dengan dan tanpa controller (PART 02) untuk penjelasan cara membuat controller dan cara pengaksesannya atau cara penggunaannya. Maka hasilnya akan menjadi seperti dibawah ini: 


Nah sekarang anda sudah memiliki 4 controller untuk mengakses 4 halaman yaitu Home, Kategori, Pengirim dan Surat. Dimana setiap controller memiliki banyak function yang bisa kita gunakan untuk membuat kode simpan delete update dan view data.  Kemudian ubahlah kode di "routes/web.php" anda dengan seperti ini: 


Kita akan mengakses function index yang ada di controller HomeController sebagai pembuka untuk halaman utama atau landing page. Berikutnya silahkan buat folder template di dalam folder "resource/views" sebagai penampung template halaman yang akan kita buat untuk menggunakan fasilitas blade template kita, selanjutnya silahkan buat file baru dengan nama "tema.blade.php"didalam folder template. Dan isikan kode html seperti dibawah ini: 



Berikutnya silahkan download file bootstrap di web resminya Bootstrap kemudian silahkan copy paste di folder public, yang di salin adalah folder js dan css nya ya. 

Kemudian masukkan kode berikut di "tema.blade.php" untuk mengkoneksikannya dengan css bootstrap yang ada di folder public : 


Letakkan kode tersebut di antara <head>...</head> ,dimana URL artinya adalah baseurl atau nama domain atau alamat addres utama. Contoh : www.google.com.  Kemudian tambahkan kode untuk mengakses Javascriptnya Bootstrap seperti dibawah ini: 

Letakkan kode tersebut di atas </body> pada kode html anda. Berikutnya ubahlah isi <title>..</title> menjadi seperti dibawah ini untuk menggunakan fasilitas blade yang ada pada laravel : 

@yield adalah salah satu kode yang digunakan untuk bisa diakses oleh file .blade.php di views untuk diisi sesuai dengan isian yang akan ditentukan. Apapun yang ada depannya @yield dia akan bisa diisi dari file lain yang menggunakan ekstensi file .blade.php. Sebelum kita bahas kita tambahkan lagi didalam <body> @yield('isi') </body> seperti dibawah ini: 
kita bisa juga mengisi @yield tersebut menggunakan html atau kode php lainnya jadi bisa diisi dengan apa saja. Nah sekarang kita contohkan bagaimana cara memanggil file tema itu dan bagaimana cara mengisi @yield tersebut. Sekarang buka file "welcome.blade.php" yang ada di folder views. Hapus semua isinya dan ganti dengan yang dibawah ini: 

silahkan kalian run. Jika berhasil maka isian tersebut akan tampil di halaman jika belum silahkan anda lihat di video dibawah ini untuk penjelasan lengkapnya.

Part 1 : Landing Page 





Part 2 : Form Kategori 


Jangan lupa untuk Subscribe, Like dan Comment untuk membuat blog ini dan youtube kami lebih baik lagi 
Tags:
Ade Setiyawan

kami adalah penggemar teknologi, pendidikan dan musik yang suka dengan membagi pengetahuan dan sharing sehingga akan menambah wawasan.

15 Komentar

Silahkan isi komentar jika ada pertanyaan, saran atau kritik. Bantu kami untuk lebih berkembang.

Lebih baru Lebih lama