PENGANTAR
Oke, sebelumnya kita telah membahas bagaimana membuat controlller di CI4 dengan menggunakan jalur Routes. Nah, kali ini kita akan membahas tentang Views dan memecah homepage menjadi beberapa bagian agar bisa diakses berkali-kali. Kita juga akan membahas bagaimana membuat layout halaman sebuah weebsite sederhana. Jadi untuk melanjutkan materi ini setidaknya anda sudah menguasai CSS. Di halaman View berisikan tag html, css dan JS/JavaScript. Jadi sebelum lanjut ke tahap View anda sebaiknya memahami konsep dari 3 bahasa tersebut.
Views Merupakan bagian dari teknik Model Views Controller (MVC) yang merupakan antarmuka antara sistim dengan user. Jadi view adalah tampilan sistim yang di tampilkan kepada user dalam betnuk UI/UX. Tampilan ini di kontrol oleh Controller sebagaimana telah kita singgung pada pembahasan sebelumnya.
Membuat Halaman Views
Framework Codeigniter 4 yang mengusung konsep OOP tentu juga tidak terlepas dari konsep MVC tersebut. Di Framework ini Views merupakan sebuah folder yang dapat anda buka kapanpun anda mau. Jadi silahkan download atau pasang Codeigniter 4. Pastikan anda memasang di server local seperti xampp. Buka Projek anda tadi dan cari folder dengan nama "App". Di dalam Folder Tersebut terdapat sebuah folder bernama Views. Nah, Buatlah satu file di dalam projek Views tersebut dan beri nama v_home.php
📁Projek_Anda
📁App
📁Views
📑V_home.php
Sekarang kita memiliki satu file home.php. Ketikkan tag html di dalam file tersebut. berikut bentuk sintaknya:
<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="<?= base_url('css/style.css') ?>"></head><body><div class="header"><h1>BARINTEK</h1><div class="nav"><ul><li><a href="">Beranda</a></li><li><a href="">Profil</a></li><li><a href="">Galery</a></li><li><a href="">Kontak</a></li></ul></div></div><div class="konten">Selamat Datang Di Situs kami</div><div class="footer">Copyright © Barintek</div></body></html>
Dalam sintak di atas kita bagi layout kita ke dalam 3 class, yaitu clas header, konten dan footer. Sekaang mari kita percantik tampilan layout tersebut dengan menanbahkan css ke dalamnya. Jika anda perhatikan terdapat link css di antara tag head. Link tersebut bernama "style.css". Nah dimana kita letakkan file css tersebut?
Silahkan buka kembali projek anda dan cari folder "public". Buatlah folder baru di dalam folder public tersebut. Beri nama folter baru tersebut dengan nama css. Buat file baru di dalam folder css dengan nama style.css
📁Projek_Anda📁Public
📁Css
📑style.css
Tambahkan sintak berikut ke dalam file style.css:
/* Mengatur Header */.header{background-color: rgb(251, 255, 0);color: white;text-align: center;}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #731717;}li {float: left;}li a,.dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover,.dropdown:hover .dropbtn {background-color: #c85250;transition: all 0.5s ease;}/* Mengatur Konten */.konten{padding: 10px;}/* Mengatur footer */.footer{background-color: black;color: white;text-align: center;}
Setelah itu jangan lupa untuk di simpan semua file yang telah kita buat tadi.
Mengakses Halaman Views
Buka kembali projek anda dan cari folder App, cari folder Controllers dan buka file "Home.php". Di sini kita akan mengontrol tampilan website kita. Jadi silahkan ganti function index yang ada di dalam file home.php tadi seperti code berikut:
Selanjutnya jalankan projek. Disini saya menggunakan terminal untuk menjalankan. Jadi tinggal akses http://localhost:8080/ di browser. Berikut hasil yang kita dapat:
Penutup
Nah, sekian dulu artikel kita kali ini. Silahkan kreasikan sendiri sehingga menghasilkan desain yang marik.
Terimakasih....
