Platform belajar interaktif yang dirancang khusus untuk calon Web Developer Laravel. Pahami tag, atribut, dan form HTML dengan konteks bagaimana mereka bekerja sama dengan PHP dan Laravel.
Kata kunci atau label yang dibungkus dengan tanda kurung sudut untuk memberi tahu browser bagaimana memformat halaman. Contohnya <p> atau <div>. Ada tag pembuka dan ada penutup.
Keseluruhan komponen dari awal tag pembuka hingga tag penutup, beserta konten atau teks apa pun yang ada di antaranya. Contoh: <h1>Judul</h1> adalah satu buah elemen heading.
Informasi atau properti tambahan yang disisipkan di dalam tag pembuka untuk mengatur sifat atau visual khusus (contoh: class="merah" atau href="link").
<a>Klik di sini</a>Secara sintaks HTML ini sah sebagai sebuah elemen. Namun tanpa atribut href, link ini tidak akan bisa diklik dan tidak mengarah ke manapun.
<a href="/home">Klik di sini</a>Di sini kita menambahkan atribut khusus href agar link berfungsi, dan atribut global class untuk memberinya style Tailwind/CSS.
<html>Elemen akar (root) dari dokumen HTML. Semua elemen HTML lainnya berada di dalam tag ini.
Di Laravel Blade, tag ini biasanya diletakkan pada layout induk (master layout) misal `resources/views/layouts/app.blade.php`. Mengatur `lang="{{ str_replace('_', '-', app()->getLocale()) }}"` sangat disarankan.
<meta>Menyediakan metadata tentang dokumen HTML, seperti pengaturan charset dan viewport.
Sering digunakan di layout Blade untuk CSRF token: `<meta name="csrf-token" content="{{ csrf_token() }}">` yang berguna untuk AJAX request di Laravel.
<body>Menampung seluruh konten yang akan ditampilkan di web browser.
Di dalam tag ini pada layout master Blade, kita menggunakan `@yield('content')` untuk menyuntikkan (inject) konten dari view lain.
<header>Mendefinisikan header untuk sebuah dokumen atau section. Biasanya berisi navbar atau logo.
Bisa dipisahkan menjadi komponen Blade tersendiri (misal: `<x-header />` atau `@include('partials.header')`) untuk membuat kode lebih rapi.
<footer>Mendefinisikan footer atau bagian paling bawah dari dokumen/section.
Sama seperti header, footer di Laravel biasanya dipisah ke dalam file komponen Blade tersendiri agar mudah diubah di satu tempat.
<nav>Mendefinisikan blok navigasi (kumpulan link).
Digunakan di dalam master layout untuk menu. Di Laravel, href di dalam nav sering menggunakan fungsi `route('nama.route')`.
<div>Elemen kontainer generik tanpa makna semantis khusus. Sangat sering digunakan untuk layouting.
Dalam styling Tailwind untuk Blade, `<div>` adalah elemen yang paling banyak kita berikan class seperti `flex`, `grid`, `container`, dll.
<span>Elemen kontainer generik inline. Digunakan untuk memberi styling teks dalam baris yang sama.
Sering dipadukan dengan Alpine.js di dalam proyek Laravel untuk badge status atau memanipulasi sebagian kecil teks/ikon.
<a>Anchor tag, digunakan untuk membuat tautan hiper (hyperlink) ke halaman lain, file, email, dll.
Di Laravel, JANGAN pernah menebak-nebak URL manual. Selalu gunakan helper route: `<a href="{{ route('user.profile', $id) }}">`. Ini mencegah link rusak jika URL dirubah di file web.php.
<img>Menampilkan gambar pada halaman web.
Di Blade, panggil gambar dari folder public menggunakan asset(): `<img src="{{ asset('images/logo.png') }}">` atau menggunakan URL fitur storage Laravel dari hasil upload.
<h1>-<h6>Mendefinisikan judul atau heading. <h1> untuk judul terpenting, <h6> untuk yang paling tidak penting.
Sangat penting untuk layout artikel blog atau judul halaman CMS yang dibangun pakai Laravel. Biasanya dicetak dinamis misal `<h1>{{ $post->title }}</h1>`.
<p>Mendefinisikan sebuah paragraf teks.
Untuk mencetak deskripsi dari database, misal `<p>{{ $user->bio }}</p>`. Hati-hati jangan mencetak HTML unescaped kecuali pakai `{!! $content !!}`.
<b> / <strong>Membuat teks tebal. <strong> memberikan penekanan semantis (lebih penting) daripada sekadar <b>.
Membantu menyorot hasil pencarian dinamis atau data krusial di tabel view Laravel.
<i> / <em>Membuat teks miring. <em> memberikan penekanan intonasi semantis.
Bisa digunakan untuk sub-judul, kutipan, atau text sekunder pada tampilan aplikasi Laravel.
<br>Menambahkan baris baru (line break) tanpa membuat paragraf baru.
Gunakan fungsi `nl2br(e($text))` di Blade untuk mengubah jeda baris dari textarea database menjadi `<br>` yang aman.
<hr>Horizontal rule, membuat garis pemisah horizon.
Membantu memisahkan list iterasi `@foreach` di Blade jika tidak pakai CSS border.
<ul>Unordered List (daftar tidak berurut). Item ditampilkan menggunakan titik (bullet point).
Sangat sering dikombinasikan dengan iterasi data Laravel. Contoh: `<ul> @foreach($users as $user) ... @endforeach </ul>`.
<ol>Ordered List (daftar berurut). Item ditampilkan dengan angka atau huruf.
Penting saat membuat sistem tutorial/langkah-langkah dinamis dari database Laravel. `start` bisa dikombinasikan dengan data pagination `$loop->iteration` atau index offest.
<li>List Item (elemen daftar). Harus selalu berada di dalam <ul> atau <ol>.
Pencetakan item dari database `<li>{{ $item->name }}</li>`. Dapat menggunakan `$loop->odd` untuk styling ganjil-genap di Tailwind.
<table>Membungkus struktur data tabular.
Tulang punggung dari halaman Index (Read pada CRUD) di controller resource Laravel (menampilkan list User, Produk, dll).
<thead> & <tbody>Membagi tabel menjadi bagian kepala (judul kolom) dan badan (isi data).
Di Blade, `<tbody>` adalah tempat di mana kita menaruh `@foreach` atau `@forelse` untuk melooping data dari model Eloquent.
<tr>Table Row (baris pada tabel).
Setiap satu model (satu baris database) pada loop `@foreach` direpresentasikan menjadi sebuah elemen `<tr>`.
<th> & <td><th> untuk sel heading vertikal/horizontal (tebal & di tengah). <td> untuk sel data biasa.
Di dalam `<td>` kita sering juga menaruh tombol Action form (misal Edit/Delete) menggunakan komponen Blade atau tag form untuk request ke Laravel.
<form>Merupakan blok dasar untuk mengirim data ke server. Wajib mengerti sebelum membuat sistem Create atau Update.
Sangat, Sangat Krusial! `<form action="{{ route('user.store') }}" method="POST">`. Selain itu, JANGAN lupa menambahkan token `@csrf` di dalam form agar tidak error 419 Page Expired.
<input>Elemen dinamis untuk memasukkan berbagai jenis data (teks, file, pilihan). Tanpa tag penutup.
Atribut `name` WAJIB ada agar data terbaca oleh backend, misanya `$request->name`. Atribut `value` wajib diisi state Laravel: `value="{{ old('name', $user->name ?? '') }}"` agar input error form tidak hilang.
<select> & <option>Membuat dropdown (pilihan menu tarik-turun).
Sering digunakan untuk input relasi (misal milih Kategori artikel), dilooping dengan `@foreach($categories as $cat) <option value="{{$cat->id}}" {{ old('id') == $cat->id ? 'selected' : '' }}>{{$cat->name}}</option> @endforeach`
<textarea>Kotak input multi-baris panjang (untuk deskripsi/alamat).
Sama fungsinya seperti text input, tapi `value` untuk textarea berbeda: `<textarea name="body">{{ old('body') }}</textarea>`.
<button>Tombol klik. Dapat digunakan dalam maupun luar form.
Jika punya multiple form di satu halaman (seperti Delete List Button Action), pastikan tipe tombolnya `type="submit"` jika berada di dalam form terpisah.
class & idAtribut yang bisa disematkan di SEMUA tag HTML.
Tailwind CSS sangat bergantung pada `class` (misal `<div class="text-red-500 font-bold max-w-lg mx-auto">`). Sementara `id` digunakan Alpine.js atau plain javascript (misal `document.getElementById()`).
styleMenambahkan inline CSS pada elemen langsung.
Di Laravel & Tailwind hal ini sebaiknya DIHINDARI dan kita lebih direkomendasikan pakai framework utility CSS Tailwind. Kecuali jika nilai width / warnanya dinamis dari backend misal: `style="width: {{ $progress }}%;"`
Konsep ini menjembatani HTML dengan PHP — fondasi yang akan kamu gunakan setiap hari di Laravel Blade.
<?php ?>Tag pembuka dan penutup PHP. Semua kode PHP harus ditulis di antara tag ini agar dieksekusi oleh server sebelum dikirim ke browser.
<!-- file: profil.php -->
<html>
<body>
<?php
$nama = "Budi";
$umur = 25;
?>
<h1>Profil Pengguna</h1>
<p>Nama: <?= $nama ?></p>
<p>Umur: <?= $umur ?> tahun</p>
</body>
</html>Di Laravel Blade, kamu TIDAK perlu menulis `<?php ?>` secara manual. Blade sudah menyediakan sintaks yang lebih rapi: `{{ }}` untuk echo dan `@directive` untuk kontrol. Namun memahami dasar ini penting agar tahu apa yang terjadi di balik layar.
<?= $var ?>Shorthand (singkatan) dari `<?php echo $var; ?>`. Digunakan untuk langsung mencetak nilai variabel ke dalam HTML. Ini adalah cara paling dasar menampilkan data dinamis.
<!-- PHP biasa -->
<h1><?= $judul ?></h1>
<p><?= $deskripsi ?></p>
<!-- Blade (Laravel) — lebih aman & rapi -->
<h1>{{ $judul }}</h1>
<p>{{ $deskripsi }}</p>Di Blade, padanan dari `<?= $var ?>` adalah `{{ $var }}`. Bedanya, `{{ }}` otomatis menjalankan `htmlspecialchars()` untuk mencegah serangan XSS — jadi lebih aman! Gunakan `{!! $var !!}` jika memang ingin mencetak HTML mentah.
echo dalam HTMLPerintah `echo` bisa digunakan di dalam blok PHP untuk menghasilkan (generate) tag HTML secara dinamis. Server memproses PHP terlebih dahulu, lalu hasilnya (berupa HTML murni) dikirim ke browser.
<?php $warna = "blue"; ?>
<div style="color: <?= $warna ?>">
<?php echo "<strong>Teks ini dibuat oleh PHP!</strong>"; ?>
</div>Konsep ini persis yang terjadi di Blade. Ketika kamu menulis `<h1>{{ $title }}</h1>`, Blade mengkompilasinya menjadi `<h1><?php echo e($title); ?></h1>`. Jadi Blade hanyalah 'gula sintaks' di atas PHP biasa.
include & requirePerintah PHP untuk menyisipkan file PHP lain ke dalam file saat ini. `include` memberikan warning jika file tidak ditemukan, sedangkan `require` akan menghentikan eksekusi (fatal error).
<!-- header.php -->
<nav>Menu Navigasi</nav>
<!-- index.php -->
<?php include 'header.php'; ?>
<main>
<h1>Halaman Utama</h1>
</main>Konsep ini adalah dasar dari `@include('partials.header')` dan `@extends('layouts.app')` di Blade. Laravel mengabstraksi `include/require` PHP menjadi directive Blade yang lebih elegan dan terorganisir.
Konsep ini menjembatani HTML dengan PHP — fondasi yang akan kamu gunakan setiap hari di Laravel Blade.
for → <li>Menggunakan `for` loop PHP untuk menghasilkan elemen <li> secara otomatis. Daripada menulis 10 tag <li> secara manual, cukup tulis satu loop yang mengulangnya. Ini adalah penerapan prinsip DRY (Don't Repeat Yourself).
<ul>
<?php for ($i = 1; $i <= 5; $i++) { ?>
<li>Item ke-<?= $i ?></li>
<?php } ?>
</ul>Di Blade: `@for($i = 1; $i <= 10; $i++) <li>Item ke-{{ $i }}</li> @endfor`. Meskipun `@for` tersedia, dalam praktik Laravel lebih sering menggunakan `@foreach` karena data biasanya berasal dari database (array/collection).
foreach → <tr>Menggunakan `foreach` untuk menampilkan setiap item dari array sebagai baris tabel (<tr>). Ini adalah pola yang PALING SERING digunakan di aplikasi web nyata — menampilkan daftar data dari database ke tabel HTML.
<?php
$users = [
['nama' => 'Andi', 'email' => 'andi@mail.com'],
['nama' => 'Siti', 'email' => 'siti@mail.com'],
];
?>
<table>
<tr><th>Nama</th><th>Email</th></tr>
<?php foreach ($users as $user) { ?>
<tr>
<td><?= $user['nama'] ?></td>
<td><?= $user['email'] ?></td>
</tr>
<?php } ?>
</table>Ini adalah pola UTAMA di Laravel untuk halaman Index/Read pada CRUD: `@foreach($users as $user) <tr><td>{{ $user->name }}</td><td>{{ $user->email }}</td></tr> @endforeach`. Data `$users` biasanya dikirim dari Controller via `User::all()` atau `User::paginate(10)`.
foreach → Card UIMenggunakan loop untuk menghasilkan komponen kartu (card) HTML yang berulang. Sangat umum untuk halaman katalog produk, daftar artikel blog, atau galeri portofolio. Setiap iterasi menghasilkan satu card lengkap dengan gambar, judul, dan deskripsi.
<?php
$products = [
['nama' => 'Kaos Laravel', 'harga' => 'Rp 150.000'],
['nama' => 'Stiker PHP', 'harga' => 'Rp 25.000'],
];
?>
<?php foreach ($products as $p) { ?>
<div class="card">
<h3><?= $p['nama'] ?></h3>
<p><?= $p['harga'] ?></p>
</div>
<?php } ?>Di Laravel + Tailwind, pola ini jadi sangat elegan: `@foreach($products as $product) <div class="bg-white rounded-lg shadow p-4"><h3>{{ $product->name }}</h3><p>{{ $product->formatted_price }}</p></div> @endforeach`. Bisa juga dipisahkan ke komponen Blade: `<x-product-card :product="$product" />`.
foreach → <option>Menggunakan loop untuk mengisi dropdown <select> secara dinamis dari array atau data database. Setiap elemen array menjadi satu <option>. Pola ini wajib dikuasai untuk form yang punya relasi (misal: pilih Kategori, pilih Kota).
Di Blade dengan old() binding: `@foreach($categories as $cat) <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option> @endforeach`. Ini memastikan jika form gagal validasi, pilihan user tidak hilang.
$loop variableVariabel khusus di Blade yang memberikan informasi tentang iterasi saat ini di dalam loop: apakah ini iterasi pertama, terakhir, genap, ganjil, atau berapa indeksnya. Sangat berguna untuk styling kondisional.
Contoh zebra-striping tabel: `<tr class="{{ $loop->even ? 'bg-gray-50' : 'bg-white' }}">`. Atau menghilangkan border pada item terakhir: `<div class="{{ !$loop->last ? 'border-b' : '' }}">`. Variable ini HANYA tersedia di Blade `@foreach`.
Konsep ini menjembatani HTML dengan PHP — fondasi yang akan kamu gunakan setiap hari di Laravel Blade.
action dinamisAtribut `action` pada form bisa diisi secara dinamis menggunakan PHP, sehingga form bisa mengirim data ke URL yang berbeda tergantung konteks (misal: form create vs form edit mengirim ke route yang berbeda).
<!-- Form Create (tambah baru) -->
<form action="/users" method="POST">
<input name="nama" placeholder="Nama">
<button type="submit">Simpan</button>
</form>
<!-- Form Edit (ubah data) -->
<form action="/users/<?= $user['id'] ?>" method="POST">
<input name="nama" value="<?= $user['nama'] ?>">
<button type="submit">Update</button>
</form>Di Blade, gunakan helper `route()`: `<form action="{{ route('users.store') }}">` untuk create, dan `<form action="{{ route('users.update', $user) }}">` untuk update. Jangan pernah hardcode URL!
value dinamisMengisi nilai default input form dari variabel PHP. Penting untuk halaman Edit, di mana form harus menampilkan data yang sudah ada di database agar user bisa mengubahnya.
<!-- Halaman Edit: input terisi dari database -->
<input name="nama" value="<?= $user['nama'] ?>">
<input name="email" value="<?= $user['email'] ?>">
<textarea name="bio"><?= $user['bio'] ?></textarea>Di Blade, gabungkan dengan `old()` untuk error handling: `value="{{ old('nama', $user->nama) }}"`. Fungsi `old()` akan mengembalikan input sebelumnya jika validasi gagal, atau fallback ke `$user->nama` jika tidak ada old input.
Validasi VisualMenggunakan kondisi PHP (`if`) untuk menampilkan pesan error validasi di bawah input yang bermasalah. Ini memberikan feedback yang jelas kepada user tentang apa yang perlu diperbaiki.
<input name="email" value="<?= $old['email'] ?? '' ?>">
<?php if (isset($errors['email'])) { ?>
<span style="color: red;"><?= $errors['email'] ?></span>
<?php } ?>Blade menyediakan directive khusus: `@error('email') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror`. Validasinya sendiri dilakukan di Controller atau Form Request Laravel, bukan di view.
Conditional RenderingMenampilkan atau menyembunyikan elemen HTML berdasarkan kondisi PHP. Misalnya: tombol Delete hanya muncul untuk admin, badge 'Baru' hanya muncul untuk produk yang dibuat < 7 hari lalu.
<?php if ($user['role'] === 'admin') { ?>
<button class="btn-danger">Hapus User</button>
<?php } ?>
<span>
<?= $product['stok'] > 0
? '<span style="color:green">Tersedia</span>'
: '<span style="color:red">Habis</span>' ?>
</span>Di Blade: `@if(auth()->user()->isAdmin()) <button>Hapus</button> @endif`. Atau lebih advanced dengan `@can('delete', $post) ... @endcan` menggunakan sistem authorization Laravel (Policies/Gates).
Lihat perbandingan langsung antara dua tag HTML yang mirip untuk memahami perbedaan fungsi dan visualnya.
<ul> <li>Buka browser</li> <li>Ketik kode program</li> <li>Tekan tombol simpan</li> </ul>
<ol> <li>Buka browser</li> <li>Ketik kode program</li> <li>Tekan tombol simpan</li> </ol>
<ul> (Unordered List) digunakan untuk daftar tanpa urutan spesifik, biasanya ditampilkan dengan simbol 'bullet'. <ol> (Ordered List) digunakan untuk urutan atau langkah-langkah yang memiliki arti berurutan, ditampilkan dengan angka/huruf.
Tulis kode HTML sungguhan dan lihat hasilnya secara real-time. Biasakan diri dengan struktur tag sebelum masuk ke framework.