> For the complete documentation index, see [llms.txt](https://learn.devlabss.my.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.5-tantangan-membuat-halaman-about.md).

# 3.5 Tantangan: Membuat Halaman About

## Tantangan membuat halaman About

Sekarang saatnya mencoba tanpa terlalu banyak dituntun.

Di tantangan ini, Anda membuat halaman **About** dengan layout Blade yang sudah dipelajari.

Fokusnya bukan membuat tampilan rumit.

Fokusnya adalah membuktikan bahwa Anda sudah paham:

* membuat file view baru
* memakai `@extends`
* mengisi `@section`
* menambahkan route
* memakai komponen navbar yang sama

### Target tantangan

Di akhir latihan ini, Anda harus punya halaman baru:

* file view `about.blade.php`
* route `/about`
* tampilan yang tetap memakai layout utama

Jika navbar sudah benar, halaman ini juga bisa dibuka dari menu atas.

### Aturan tantangan

Ikuti aturan ini:

1. Buat file bernama `about.blade.php`.
2. Simpan file itu di `resources/views`.
3. Pakai `@extends('layouts.app')`.
4. Isi area `@section('konten')`.
5. Daftarkan route `GET` untuk `/about`.

Jangan menulis ulang tag `<html>`, `<head>`, dan `<body>` dari nol.

### Langkah penyelesaian

Gunakan urutan ini agar lebih mudah.

{% stepper %}
{% step %}

### Buat file `about.blade.php`

Buat file baru di:

```
resources/views/about.blade.php
```

{% endstep %}

{% step %}

### Isi halaman About

Masukkan kode berikut:

```php
@extends('layouts.app')

@section('konten')
    <h1>Tentang E-Library SMK</h1>
    <p>Aplikasi ini dibuat sebagai media belajar Laravel dasar.</p>

    <h3>Visi</h3>
    <ul>
        <li>Membantu siswa belajar pengembangan web secara terstruktur.</li>
        <li>Mengenalkan pengelolaan perpustakaan dalam bentuk digital.</li>
    </ul>

    <h3>Developer</h3>
    <p>Halaman ini dikembangkan oleh: <strong>[Tulis nama Anda di sini]</strong></p>
@endsection
```

Lalu simpan file dengan `Ctrl + S`.
{% endstep %}

{% step %}

### Daftarkan route `/about`

Buka file `routes/web.php`.

Tambahkan route berikut:

```php
Route::get('/about', function () {
    return view('about');
});
```

Lalu simpan file.
{% endstep %}
{% endstepper %}

### Tantangan tambahan

Jika halaman About sudah bisa dibuka, lanjutkan dengan tantangan tambahan ini.

Buka file:

```
resources/views/layouts/navbar.blade.php
```

Pastikan navbar memiliki link ke halaman About:

```html
<a href="/about">Tentang Kami</a>
```

Jika link itu belum ada, tambahkan.

Dengan begitu, Anda bisa berpindah antara halaman `/beranda` dan `/about` lewat navbar yang sama.

### Nyalakan server sebelum menguji hasil

Sebelum membuka browser, pastikan server Laravel sedang berjalan.

Gunakan salah satu cara berikut:

* buka **Laragon** lalu klik **Start All**
* atau jalankan `php artisan serve` dari folder proyek

### Cara menguji hasil

Sekarang buka salah satu alamat berikut:

* `http://e-library.test/about`
* `http://127.0.0.1:8000/about`

Jika berhasil, halaman About tampil dengan:

* navbar yang sama
* header dan footer dari layout utama
* isi khusus halaman About

Lalu coba klik menu **Beranda** dan **Tentang Kami** dari navbar.

Jika keduanya berpindah tanpa error, berarti tantangan selesai dengan baik.

### Output yang harus terlihat

Setelah tantangan ini selesai, hasil minimal yang seharusnya sudah ada:

* file `about.blade.php` tersimpan di folder view
* route `/about` berhasil dibuka
* navbar menampilkan link ke halaman About
* halaman About memakai layout yang sama dengan halaman lain

### Kenapa tantangan ini penting

Tantangan ini merangkum semua dasar Blade pada BAB 3.

Jika Anda berhasil, berarti Anda sudah bisa:

* membuat halaman baru dengan layout yang konsisten
* memakai komponen yang dipakai ulang
* menambah route baru tanpa menulis ulang seluruh HTML

Ini adalah pola yang akan terus dipakai saat halaman aplikasi mulai bertambah.

### Troubleshooting yang paling sering

Masalah yang paling sering muncul:

* **`View [about] not found.`** — file `about.blade.php` belum ada atau salah lokasi
* **halaman kosong di tengah** — `@section('konten')` tidak cocok dengan `@yield('konten')`
* **`404 Not Found` saat membuka `/about`** — route belum ditulis atau belum disimpan
* **menu About tidak bisa diklik** — link di `navbar.blade.php` belum ditambahkan

{% hint style="warning" %}
Jika halaman About bisa dibuka dari URL tetapi tidak bisa dari navbar, masalahnya ada di file `navbar.blade.php`, bukan di route.
{% endhint %}

### Poin evaluasi bab 3.5

Pastikan Anda sudah menyelesaikan poin berikut:

* Saya berhasil membuat file `about.blade.php`.
* Saya berhasil memakai `@extends('layouts.app')`.
* Saya berhasil menulis `@section('konten')` dengan benar.
* Saya berhasil menambahkan route `/about` di `routes/web.php`.
* Saya berhasil membuka halaman `/about` di browser.
* Saya berhasil menambahkan link About ke navbar.
* Saya berhasil berpindah antara halaman Beranda dan About lewat navbar.

Jika semua sudah jelas, lanjut ke [3.6 Checkpoint: Uji Pemahamanmu Sebelum Lanjut!](/laravel/bab-3-blade-templating/3.6-checkpoint-uji-pemahamanmu-sebelum-lanjut.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.5-tantangan-membuat-halaman-about.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
