Membuat Tampilan View

MEMBUAT TAMPILAN VIEW YANG DENGAN BOOTSTRAP
1. Menambahkan Bootstrap di Codeigniter 4

Bootstrap adalah CSS Framework yang banyak digunakan saat ini. Bootstrap memberikan
kita kemudahan dalam membuat tampilan web yang menarik.
a. Silakan download Bootstrap dari link berikut :

https://github.com/twbs/bootstrap/releases/download/v4.5.2/bootstrap-4.5.2-
dist.zip
b. Setelah itu, ekstrak folder css dan js ke dalam folder public di project kita.
Sehingga isi folder public akan menjadi seperti ini:
c. tambahkan JQuery, karena bootstrap versi 4.5.2 ini juga membutuhkan JQuery untuk
bisa mengaktifkan beberapa fitur. Download JQuery melalui link berikut:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
d. Setelah itu, pindahkan ke dalam folder public/js, sehingga sekarang kita punya file
jquery.min.js di sana.
2. Apa itu view di Codeigniter
View adalah bagian dari Codeigniter yang bertugas untuk membuat tampilan. View berisi
kode HTML, PHP, CSS, dan Javascript yang membentuk sebuah tampilan. Masih ingat
dengan konsep MVC di materi sebelumnya?
Ketiga komponen ini saling bekerja sama dalam aplikasi Codeigniter.
• Model bertugas untuk mengolah data;

• View bertugas untuk membuat tampilan;
• Controller bertugas untuk membuat logika dan merespon request.
Saat Controller merespon sebuah request, kadang ia harus mengirimkan view ke client.
3. Cara load view di Controller

Pada materi sebelumnya ( Routing dan Controller), kita merespon request dengan
perintah echo.
public function about()
echo "Halaman About";
}
Seharusnya di sini kita merespon dengan mengirimkan view. Bagaimana caranya?
Caranya, kita harus gunakan fungsi view().
Contoh:

{
echo view('about');
}
Saat fungsi view() dieksekusi, ia akan mencari file view pada folder app/Views
berdasarkan nama file view yang diberikan.
4. Membuat View
Kita akan membuat 4 buah view untuk halaman Home, About, Contact, dan Faqs.
Silahkan buka Controller Page, kemudian ubah kodenya menjadi seperti ini:
<?php namespace App\Controllers;
class Page extends BaseController
echo view("about");
public function contact()
echo view("contact");
public function faqs()
{
echo view("faqs");
Berikutnya, kita akan membuat file view-nya.
4.1 View untuk halaman home

Secara default, view halaman home adalah welcome_message.php, kita bisa juga
menggantinya dengan yang lain. Namun, biar cepat.. Kita modifikasi saja view ini.
Silahkan ubah isi kode apps/Views/welcome_message.php menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>


<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
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" href="<?=
base_url('about') ?>">About</a>
</li>
base_url('contact') ?>">Contact</a>
</li>
base_url('faqs') ?>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron jumbotron-fluid">

<div class="row">
<div class="col-md-12">
<h1 class="h1">Portal Berita Codeigniter</h1>
</div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Codeigniter 4 Sudah Rilis!</h5>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quibusdam perferendis commodi
tenetur quos ducimus repellat nulla, nam magni.
Commodi iusto ad harum voluptas exercitationem
facere eos earum laboriosam excepturi quas?</p>
</div>
</div>
<h5 class="h5">Pengembangan Codeiginter 4
Tertunda</h5>
</div>
</div>
<h5 class="h5">Wow, Ini 5 Startup yang Menggunakan
Codeigniter</h5>
</div>
</div>
<h5 class="h5">Codeigniter Ternyata Framework
Terpopuler di Inodnesia</h5>
</div>
</div>
</div>
</div>
<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?= Date('Y') ?> CI News</div>
</footer>


<script src="<?= base_url('js/jquery.min.js') ?>"></script>
<script src="<?= base_url('js/bootstrap.min.js') ?>"></script>
</body>
</html>
Jika sekarang kita membuka localhost:8080, maka tampilannya akan berubah menjadi
seperti ini.
4.2 View untuk halaman about

Buatlah file baru di dalam folder app/Views dengan nama about.php dan isilah dengan kode
berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>

</head>
<body>

<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
</button>
<a class="nav-link" href="<?= base_url('about')
?>">About</a>
</li>
<a class="nav-link" href="<?= base_url('contact')
?>">Contact</a>
</li>
<a class="nav-link" href="<?= base_url('faqs') ?>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="row">
<h1 class="h1">About us</h1>
</div>
</div>
</div>
</header>
<div class="row">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates
aliquam tempore. Porro, asperiores.</p>
</div>
</div>
</div>
<div class="container text-center">Copyright &copy <?= Date('Y') ?> CI
News</div>
</footer>

</body>
</html>
Hasilnya: localhost:8080/about
4.3 View untuk halaman contact

Buatlah file baru dengan nama contact.php di dalam folder app/Views dengan isi
sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact us</title>

</head>
<body>

</button>
?>">About</a>
</li>
?>">Contact</a>
</li>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<h1 class="h1">Contact us</h1>
</div>
</div>
</div>
</header>
<div class="row">
<form action="" class="form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<label for="email">Message</label>
<textarea name="message" class="form-control" id="" cols="30"
rows="10"></textarea>
</div>
<input type="submit" value="Kirim" class="btn btn-primary w-100">
</div>
</form>
</div>
</div>
</div>

News</div>
</footer>

</body>
</html>
Hasilnya: localhost:8080/contact
4.4 View untuk halaman FAQs

buatlah file baru dengan nama faqs.php di dalam folder app/Views dengan isi
sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FAQs</title>

</head>
<body>

</button>
?>">About</a>
</li>
?>">Contact</a>
</li>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<h1 class="h1">FAQs</h1>
</div>
</div>
</div>
</header>
<div class="row">
<h2 class="h2">Apa itu CI Neews?</h2>
modi unde cumque! Cum repellendus eveniet, illum id doloribus, quibusdam tenetur
debitis est libero quasi assumenda voluptates aliquam tempore. Porro,
asperiores.</p>
<h2 class="h2">Bagaimana Cara Membuat Akun CI News?</h2>
asperiores.</p>
<h2 class="h2">Bagaimana Cara Menulis Artikel di CI News?</h2>
asperiores.</p>
<h2 class="h2">Apakah CI News Official?</h2>
asperiores.</p>
</div>
</div>
</div>

News</div>
</footer>

</body>
</html>
Hasilnya: localhost:8080/faqs
5. Mengirim Data Ke View

Sejauh ini, kita sudah berhasil menampilkan view. Namun, kadang kita juga nantinya akan
menggunakan data dari database dan menampilkannya di dalam view. Karena itu, kita
harus mengirim data ke View. Caranya bagaimana? Caranya dengan menambahkan
variabel array sebagai parameter kedua pada fungsi view().
Data yang akan dikirim ke view harus dalam bentuk array asosiatif. Array asosiatif adalah
array yang memiliki key dan value. Key akan menjadi nama variabel di dalam view, dan
value akan menjadi nilainya. Value ini bebas kita isi dengan apa saja.. boleh diisi dengan
string, array, object, integer, dll. Sekarang mari kita coba mengirim data ke view.
Silahkan buka Controller Page, kemudian ubahlah kode pada method contact() menjadi
seperti ini:
public function contact()

{
$data['name'] = "Hello World";
echo view("contact", $data);
}
Variabel $data adalah variabel asosiatif array, dengan name sebagai key dan ‘Hello World’
sebagai value untuk name. Key name nantinya akan menjadi sebuah variabel di dalam view.
Sekarang, buka kode app/Views/contact.php dan tambahkan kode di bawah ini tepat di
atas pembuatan form.
<h3 class="h3">Hello <?= $name ?>!</h3>

<p>Silahkan hubungi kami melalui form berikut</p>
Sehingga akan menjadi seperti ini:

Sekarang coba buka halaman contact melalui alamat localhost:8080/contact, maka
hasilnya:
6. Mengirim Data Array ke View
Jika tadi kita hanya mengirim data berupa string, kini kita coba yang lebih kompleks
dengan mengirim data array. Biasanya ini nanti akan sering kita pakai untuk menampilkan
data yang berasal dari database.
Silahkan buka Controller Page, kemudian ubah kode pada method faqs menjadi seperti ini.
Variabel $data adalah variabel yang berisi asosiatif array. Pada kode di atas, kita membuat
data_faqs sebagai key dan mengisinya dengan array dari kumpulan pertanyaan dan
jawaban.
Berikutnya, silahkan ubah kode view app/Views/faqs.php menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>FAQs</title>

<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css')
?>" />
</head>
<body>

<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
</button>
?>">About</a>
</li>
?>">Contact</a>
</li>
<a class="nav-link" href="<?= base_url('faqs')
?>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<h1 class="h1">FAQs</h1>
</div>
</div>
</div>
</header>
<div class="row">
<?php foreach ($data_faqs as $faq) : ?>
<h2 class="h2"><?= $faq['question'] ?></h2>
<p><?= $faq['answer'] ?></p>
<?php endforeach; ?>
</div>
</div>
</div>

<div class="container text-center">Copyright &copy <?= Date('Y')
?> CI News</div>
</footer>

</body>
</html>
Pada kode tersebut, kita menggunakan perulangan foreach untuk meng-iterasi semua data
pada variabel $data_faqs
Maka hasilnya:

Membuat Tampilan View

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Tampilan View

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT TAMPILAN VIEW YANG DENGAN BOOTSTRAP

1. Menambahkan Bootstrap di Codeigniter 4

a. Silakan download Bootstrap dari link berikut :

Ketiga komponen ini saling bekerja sama dalam aplikasi Codeigniter.

• Model bertugas untuk mengolah data;

3. Cara load view di Controller

public function about()

echo "Halaman About";

public function about()

<?php namespace App\Controllers;

class Page extends BaseController

public function about()

public function contact()

public function faqs()

Berikutnya, kita akan membuat file view-nya.

4.1 View untuk halaman home

Silahkan ubah isi kode apps/Views/welcome_message.php menjadi seperti ini:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<header class="jumbotron jumbotron-fluid">

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

4.2 View untuk halaman about

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

4.3 View untuk halaman contact

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<form action="" class="form">

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

4.4 View untuk halaman FAQs

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

5. Mengirim Data Ke View

public function contact()

<h3 class="h3">Hello <?= $name ?>!</h3>

Sehingga akan menjadi seperti ini:

6. Mengirim Data Array ke View

Berikutnya, silahkan ubah kode view app/Views/faqs.php menjadi seperti ini:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

Anda mungkin juga menyukai