Install Web App

Yii

Belajar Framework Yii #08 | View Yii : Membuat Tampilan Yii

profil-penulis

Achmad Yoga Bactiar Teguh Suseno

09 Juni 2023

Tampilan (View) dalam Yii Framework adalah komponen yang digunakan untuk menghasilkan tampilan HTML yang akan ditampilkan kepada pengguna. Yii memungkinkan Anda untuk membuat tampilan dengan menggunakan template dan layout, yang memungkinkan Anda untuk memisahkan logika tampilan dari logika bisnis. Dalam artikel ini, kita akan membahas cara membuat tampilan menggunakan template dan layout Yii.

Template Yii

Template Yii adalah potongan kode HTML yang dapat digunakan kembali yang menggambarkan bagian-bagian umum dari tampilan Anda. Mereka memungkinkan Anda untuk mendefinisikan struktur dan elemen-elemen dasar dari tampilan Anda tanpa perlu menuliskan kode yang sama berulang-ulang. Dengan menggunakan template, Anda dapat menghemat waktu dan menjaga konsistensi dalam desain tampilan.

Berikut adalah cara membuat dan menggunakan template Yii:

Langkah 1: Membuat Template
  • Buat file template baru dalam direktori views/layouts. Sebagai contoh, beri nama file template ini sebagai main.php.

<!-- views/layouts/main.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $this->title ?></title>
</head>
<body>
    <header>
        <h1><?= $this->title ?></h1>
    </header>
    <div class="content">
        <?= $content ?>
    </div>
    <footer>
        &copy; <?= date('Y') ?> Your Company
    </footer>
</body>
</html>
  • Di dalam template ini, kita menggunakan variabel $this->title untuk menampilkan judul halaman yang akan ditentukan saat menggunakan template.

Langkah 2: Menggunakan Template

Untuk menggunakan template dalam tampilan Anda, Anda perlu menentukan layout dalam aksi Controller atau dalam tampilan itu sendiri. Anda dapat melakukannya dengan mengatur properti layout dalam Controller atau dengan menggunakan tag <?php $this->beginContent('@app/views/layouts/main.php') ?> dalam tampilan.

Contoh penggunaan dalam Controller:

public function actionIndex()
{
    $this->layout = 'main'; // Menggunakan template 'main'
    return $this->render('index');
}

Contoh penggunaan dalam tampilan:

<?php $this->beginContent('@app/views/layouts/main.php') ?>

<!-- Konten spesifik untuk halaman ini -->

<?php $this->endContent() ?>

Layout Yii

Layout Yii adalah struktur umum dari tampilan yang digunakan dalam seluruh aplikasi Anda. Layout biasanya berisi elemen-elemen yang muncul pada setiap halaman, seperti header, menu navigasi, dan footer. Mereka memungkinkan Anda untuk konsisten dalam desain tampilan di seluruh aplikasi Anda.

Berikut adalah cara membuat dan menggunakan layout Yii:

Langkah 1: Membuat Layout
  • Buat file layout baru dalam direktori views/layouts. Sebagai contoh, beri nama file layout ini sebagai main.php.

<!-- views/layouts/main.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $this->title ?></title>
</head>
<body>
    <header>
        <h1><?= $this->title ?></h1>
        <nav>
            <ul>
                <li><a href="/">Beranda</a></li>
                <li><a href="/tentang">Tentang</a></li>
                <li><a href="/kontak">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <?= $content ?>
    </div>
    <footer>
        &copy; <?= date('Y') ?> Your Company
    </footer>
</body>
</html>
  • Di dalam layout ini, kita menentukan elemen-elemen umum seperti header, menu navigasi, dan footer.

Langkah 2: Menggunakan Layout

Untuk menggunakan layout dalam tampilan Anda, Anda perlu menentukan layout dalam aksi Controller atau dalam tampilan itu sendiri. Anda dapat melakukannya dengan mengatur properti layout dalam Controller atau dengan menggunakan tag <?php $this->beginLayout('@app/views/layouts/main.php') ?> dalam tampilan.

Contoh penggunaan dalam Controller:

public function actionIndex()
{
    $this->layout = 'main'; // Menggunakan layout 'main'
    return $this->render('index');
}

Contoh penggunaan dalam tampilan:

<?php $this->beginLayout('@app/views/layouts/main.php') ?>

<!-- Konten spesifik untuk halaman ini -->

<?php $this->endLayout() ?>

Kesimpulan

Menggunakan template dan layout dalam Yii Framework adalah cara yang efisien untuk mengorganisir dan merancang tampilan dalam aplikasi Anda. Dengan template, Anda dapat mendefinisikan struktur umum untuk tampilan Anda, sementara layout memungkinkan Anda untuk memelihara konsistensi dalam desain tampilan di seluruh aplikasi Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat tampilan yang terstruktur dengan baik dan profesional dalam Yii Framework.

Artikel Lainnya Dengan Kategori Terkait :


1. Belajar Framework Yii #01 | Pengertian Framework Yii dan Kelebihannya

2. Belajar Framework Yii #02 | Alur Kerja Umum Yii dan MVC

3. Belajar Framework Yii #03 | Instalasi Yii Framework

4. Belajar Framework Yii #04 | Pemahaman tentang Model-View-Controller (MVC) pada Framework Yii

5. Belajar Framework Yii #05 | Model Yii : Membuat Model

6. Belajar Framework Yii #06 | Model Yii : Validasi Data

7. Belajar Framework Yii #07 | Model Yii : Menghubungkan Database

8. Belajar Framework Yii #08 | View Yii : Membuat Tampilan Yii

9. Belajar Framework Yii #09 | View Yii: Widget Bawaan Yii

10. Belajar Framework Yii #10 | View Yii: Membuat Tampilan Dinamis

11. Belajar Framework Yii #11 | Controller Yii: Membuat Action dalam Controller

12. Belajar Framework Yii #12 | Controller Yii: Menggunakan Filter

13. Belajar Framework Yii #13 | Controller Yii: Memahami Request

14. Belajar Framework Yii #14 | Routing Yii : Memahami Konfigurasi

15. Belajar Framework Yii #15 | Routing Yii : Membuat rute khusus

16. Belajar Framework Yii #16 | Routing Yii : Memahami Konsep pretty's URL

17. Belajar Framework Yii #18 | Menggunakan ActiveRecord untuk manipulasi data

18. Belajar Framework Yii #19 | Membuat kueri kompleks dengan Active Record

19. Belajar Framework Yii #20 | Membuat dan Mengelola Formulir dengan Yii

20. Belajar Framework Yii #21 | Menggunakan validasi pada formulir Yii

21. Belajar Framework Yii #22 | Menangani input dan output form dengan Yii

22. Belajar Framework Yii #23 | Security : Pengelolaan autentikasi dan otorisasi dengan Yii

23. Belajar Framework Yii #24 | Security : Implementasi Fitur Keamanan Yii

24. Belajar Framework Yii #25 | Memahami penggunaan tema (themes) dalam Yii

25. Belajar Framework Yii #26 | Menggunakan ekstensi Yii dan membangun ekstensi kustom

26. Belajar Framework Yii #27 | Membuat API menggunakan Yii

27. Belajar Framework Yii #28 | Melakukan pengujian unit dengan PHPUnit

28. Belajar Framework Yii #29 | Menggunakan alat bantu debugging dalam Yii

29. Belajar Framework Yii #30 | Menangani error dan log dalam Yii

30. Belajar Framework Yii #31 | Memahami caching dalam Yii untuk meningkatkan performa

31. Belajar Framework Yii #32 | Menyesuaikan konfigurasi aplikasi Yii untuk kebutuhan khusus

32. Belajar Framework Yii #33 | Menerapkan praktik pengembangan yang efisien dalam Yii

33. Belajar Framework Yii #34 | Mengoptimalkan query database dengan Active Record di Yii

34. Belajar Framework Yii #35 | Mempercepat waktu muat halaman dengan menggunakan asset caching di Yii

35. Belajar Framework Yii #36 | Menyesuaikan URL routing untuk meningkatkan SEO pada Yii

36. Belajar Framework Yii #37 | Mengoptimalkan penggunaan memori dalam aplikasi Yii

37. Belajar Framework Yii #38 | Meningkatkan performa dengan penggunaan Gii dalam pembangunan kode di Yii

38. Belajar Framework Yii #39 | Menggunakan teknik lazy loading untuk meningkatkan kecepatan aplikasi Yii

39. Belajar Framework Yii #40 | Menerapkan teknik penggunaan indeks dan optimasi tabel database pada Yii.

40. Mempelajari Framework Yii #17 Menghubungkan Yii dengan database

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya