Scribd
Unggah
22 tayangan

Modul 5 - Laravel Templating Engine

Diunggah oleh

yenwi.yenwi1203
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
22 tayangan

Modul 5 - Laravel Templating Engine

Diunggah oleh

yenwi.yenwi1203
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Modul 5

Blade Templating Engine

1
REQUIREMENT
1. Web Browser (Google Chrome/Chromium (Ms Edge, Opera) atau Firefox)
2. Source Code Editor (disarankan Visual Studio Code)
3. Web Server Apache (XAMPP)
4. Composer
5. PHP Versi 8.0 ke atas

PENJELASAN
Blade Templating Engine
Blade ini merupakan sebuah tools dari Laravel yang digunakan untuk mengelola tampilan
halaman web. Salah satu fitur dari blade adalah kita bisa mendisplay data tanpa harus menggunakan
php echo(dinamakan dengan blade echo statement). Kita bisa mengganti php echo dengan {{ }}.
Misal, pada halaman about, ganti bagian email dengan
<body>
<h1><?php echo $matkul; ?></h1>
<h3><?= $nama; ?></h3>
<p>{{ $email }}</p>

Ketika disimpan dan dijalankan, maka data akan tertampil. Kelebihan dari blade echo statement adalah
data yang dikirim secara otomatis akan melalui htmlspecialchar untuk menghindari serangan xss(cross
site scripting). Fitur templating engine ini hanya berjalan jika nama file ada tulisan .blade.
Sekarang kita akan mencoba membuat sebuah layout sederhana dengan bantuan blade templating
engine. Kita akan menggunakan boostrap template untuk membantu melayout halaman web kita.
Selain bootstrap, kalian juga bisa menggunakan template yang lainnya.

1
Copy paste kode tersebut ke halaman home. (Tidak wajib dicoba)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">PW Site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/post">Post</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container mt-4">


<h1>Hello, world!</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-


HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

Kita bisa mengubah ubah layout halaman web, namun jika ingin mengubah semuanya, maka kita
harus berkali-kali mengcopy dan paste template tersebut. Dengan menggunakan blade, kita bisa

2
membuat sebuah template yang bisa digunakan semua halaman web dengan fungsi @extends.
Fungsi @extends digunakan supaya kita tidak perlu merubah semua layout halaman secara manual.

Pada folder view, buat folder layouts lalu buat sebuah file bernama main.blade.php(nama file bebas
namun tetap harus ada .blade.php), lalu isi dengan file yang kita buat di halaman home. Namun pada
bagian div class yang container mt-4 diganti dengan

untuk Namanya bebas tidak harus container, namun Ketika dipanggil di halaman yang akan
digunakan, harus menggunakan nama yang sama dengan yang kita buat.

Pada halaman home, kita hapus semuanya lalu ganti dengan

Maka di setiap halaman kita tidak perlu mengetikkan semua file html.

3
Kita juga bisa memecah template yang kita buat menjadi beberapa bagian. Misalnya kita mau
memisahkan bagian navbar degan main templatenya. Buat file baru dengan nama navbar.blade.php

lalu isi navbar tersebut dengan potongan kode navbar yang terdapat di main.blade.php

Lalu pada bagian main.blade.php, tambahkan kode

Simpan dan jalankan. Jika berhasil maka halaman yang kita buka akan sama hasilnya.

Jika dilihat, title dari halaman yang kita buat akan sama, karena kita tidak membuat title halaman
menjadi dinamis, supaya menjadi dinamis, kita bisa menggunakan routes. Pada routes, tambahkan
array title di setiap halamannya

4
Untuk mengganti navbar yang aktif, ubah bagian navbar di class nav-link dengan

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {{ ($title === "Home") ? 'active' : ''}}"
href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link {{ ($title === "About") ? 'active' : ''}}"
href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link {{ ($title === "Post") ? 'active' : ''}}"
href="/post">Post</a>
</li>
</ul>
Sekarang navbar aktif akan sesuai dengan halaman yang kita tuju

Dalam Blade Templating Engine juga terdapat jenis Loop, yaitu

1. For Loop
For loop ini mirip dengan loop yang kita pelajari saat kita di dasar pemrograman dulu. Kalian
dapat menggunakan for loop dalam Blade untuk mengulangi sejumlah iterasi tertentu dengan
memberikan range atau rentang nilai. Contoh penggunaan for loop dengan range sebagai
berikut:

5
@for ($i = 0; $i < 10; $i++)

<p>Iterasi ke-{{ $i }}</p>

@endfor

2. Foreach Loop
Kalian juga dapat menggunakan foreach untuk mengulangi elemen-elemen dalam sebuah array
atau koleksi data lainnya. Ini berguna ketika Anda ingin menampilkan data dari database atau
data lainnya dalam tampilan. Contoh:
@foreach ($users as $user)

<p>Nama Pengguna: {{ $user->name }}</p>

@endforeach

3. Forelse Loop
pernyataan yang digunakan untuk mengulangi elemen-elemen dalam larik atau kumpulan data
dan memberikan pengendalian tambahan jika data kosong. Ini mirip dengan @foreach, tetapi
dengan kemampuan untuk menangani kasus ketika data yang diulangi tidak ada atau kosong.
Contoh penggunaan:
@forelse ($users as $user)

<li>{{ $user->name }}</li>

@empty

<p>No users</p>

@endforelse

4. While Loop
pernyataan yang digunakan untuk mengulangi kode selama kondisi tertentu terpenuhi. Ini
mirip dengan loop while dalam bahasa pemrograman, di mana kode akan diulangi selama
kondisi yang diberikan benar.
Contoh penggunaan:
@while (true)

<p>I'm looping forever.</p>

@endwhile

Selain Perulangan juga terdapat pengkondisian pada blade Laravel ya gampangnya if else yang biasa
kita temui.

6
@if (count($records) === 1)

I have one record!

@elseif (count($records) > 1)

I have multiple records!

@else

I don't have any records!

@endif

Dan juga disini juga terdapat switch case yang contohnya sebagai berikut.

@switch($i)

@case(1)

First case...

@break

@case(2)

Second case...

@break

@default

Default case...

@endswitch

7
GUIDED

1. Yang pertama Check Pada bagian php.ini kalian biasanya ada di folder xampp/php. Jika
kalian tidak ada file bernama php.ini, coba cari file php.ini-development

buka dengan notepad lalu copas semua isinya, buat file baru di notepad dengan penamaan
php.ini lalu paste ke situ. Setelah berhasil jangan lupa save terlebih dahulu file php.ini ke
folder yang sama dengan php.ini-development tadi.
Jika sudah, buka file php.ini cari extension Bernama extension=pdo_mysql dan hapus
petik koma (;) yang ada

Lalu jangan lupa di save

2. Jalankan xampp kalian dan buat database dengan penamaan pw5

3. Buka Command Prompt dimana kalian ingin mengerjakan GD ini bebas lokasinya mau
dimana. Lalu dalam cmd ketik composer create-project laravel/laravel PW5_X_YYYYY
Dimana X = Kelas, Y = 5 digit NPM

8
4. Karena default database untuk Laravel 11 adalah sqlite dan kita menggunakan mysql,
maka dari itu buka .env terlebih dahulu ubah pada bagian berikut

Menjadi

5. Setelah membuat project laravel silahkan download terlebih dahulu assets yang ada di
github saya https://github.com/NicodemusAnggitKrisnuaji/asset-Modul5.git. Langsung
download saja semua lalu masukin ketiga folder ini kedalam public

Maka saat nanti buka project gd di vscode maka akan tertampil seperti ini

9
6. Setelah itu masuk ke Route/web.php lalu ubahlah code yang ada menjadi sebagai berikut

10
7. Setelah itu buatlah file bernama Login.blade.php dan Dashboard.blade.php lalu sebuah
folder baru bernama gyms yang berisik file bernama index.blade.php seperti berikut

8. Selanjutnya isi Login.blade.php sebagai berikut

11
12
Berikut adalah untuk bagian Dashboard.blade.php, bisa diperhatikan jika aga X dan
YYYYY diisi sesuai dengan kelas dan npm kalian. Disini terdapat Nama Praktikan dan
NPM Praktikan yang nanti diganti dengna nama dan npm kalian.

13
14
15
Berikut adalah Index.blade.php

16
Jika semua sudah, maka sebelum menjalankan perintah php artisan serve, jalankan lebih
dahulu php artisan migrate agar terdapat default tabel dan bisa melakukan php artisan serve
nantinya.

17
Hasilnya:
Login.blade.php

Index.blade.php

Format pengumpulan GD:


Project diupload ke GitHub dengan nama repository => PW5_X_YYYYY dan visibility
private.
X = kelas
Y = 5 digit NPM
Setelah diupload, invite collaborator NicodemusAnggitKrisnuaji

18
Sebelum melakukan push digithub WAJIB ikutin Langkah di bawah ini!!
Masuk ke vscode lalu cari file bernama .git iqnore

Lalu Cari tulisan yang bernama .env

Tampilan ketika
sudah dihapus

Dan Hapus .envnya

Kemudian kumpulkan link repository GitHub ke situs kuliah maks 1 jam setelah
penjelasan UGD selesai.

TIDAK ADA TOLERANSI JIKA TERLAMBAT!!!

19

Anda mungkin juga menyukai