BAB IV

VIEW HTML PADA CODEIGNITER 4

4.1 Tujuan Praktikum

Adapun tujuan praktikum pada bab ini adalah:
1. Untuk mengenal view dalam codeigniter 4
2. Untuk mengenal tag yang ada pada HTML5
3. Untuk memahami kolaborasi controller dan view dalam memberikan
respons
4. Dapat membuat struktur website sederhana menggunakan HTML 5

4.2 Alat dan Bahan

1. Seperangkat komputer atau laptop
2. Code Editor
3. Framework Codeigniter 4

4.3 Dasar Teori

4.3.1 View Pada Codeigniter
Secara simple view adalah sebuah halaman web, atau bagian dari
website, seperti header, footer, sidebar, dan sebagainya. Faktanya, tampilan
dalam sebuah view dapat disematkan secara fleksibel didalam tampilan
lainnya. Dalam codeigniter 4 view tidak pernah dipanggil secara langsung
melainkan harus dimuat atau dirender oleh controller atau routes.
Ingat codeingiter 4 mengusung konsep MCV, dimana controller dapat
diartikan sebagai polisi lalu lintas yang bertanggung jawab untuk mengatur
tampilan yang akan diload dan proses yang akan dijalankan baik dari view
atau models.
4.3.2 Penjelasan View Awal dari CI4
View pada condeigniter 4 terdapat pada folder App > Views

Gambar 4. 1 File View

Gambar 4.1 Secara default pada folder views terdapat satu buah folder
dengan nama errors dan satu file welcome_message.php. File
welcome_message.php merupakan file page pertama yang ditampilkan pada
awal menjalankan project CI4. Dimana file ini digunakan untuk bahan
response oleh class controller Home pada method index yang sudah dibahas
pada bab II.
Dalam method index diatas views welcome_message dideklarasikan
dalam sebuah function view(). Function view() digunakan untuk merender
sebuah halaman web page yang berada pada folder view. Didalam function
view diberikan dekralasi path tempat dimana file web page yang akan
dirender.

Gambar 4. 2 File Controller

Gambar 4.2 Adalah file controller dengan class index dan mereturn
view welcome_message.php.
4.3.3 Implementasi HTML pada View Codeigniter 4
Dalam sebuah HTML ada beberapa sintaks dasar atau dalam HTML
lebih dikenal dengan tag. Dalam tag-tag HTML terdapat beberapa tag yang
sering digunakan dalam pembuatan projek berbasis website. Dalam
praktikum website akan dikenalkan beberapa tag yang sering dipakai dalam
sebuah projek HTML.
a. Tag <p>
Penulisan tag :

Gambar 4. 3 Tag <p>

Gambar 4.3 Dalam html tag <p> digunakan untuk membuat
sebuah paragraf. Umumnya tag <p> digunakan untuk kalimat yang ada
dalam sebuah content.
b. Tag H1-H6
Penulisan tag :

Gambar 4. 4 Tag H1-H6

Gambar 4.4 Dalam html tag h1 sampai h6 digunakan untuk
membuat sebuah heading. Seperti dalam aplikasi pengolah kata h1
digunakan untuk menuliskan sebuah title dan untuk h2 kebawah
digunakan sebagai sub bab atau bisa digunakan sebagai anak dari
sebuah induk pembahasan.
c. Tag List
1. Order List Tag <ol>
Penulisan tag :

Gambar 4. 5 Tag <ol>

Gambar 4.5 Dalam html tag <ol> digunakan untuk membuat
list yang bersifat terurut. Tag <ol> dapat diberikan attribute yaitu
type dimana attribute type bisa menerima value yaitu 1 untuk
urutan angka, a untuk urutan abjad kecil, A untuk urutan abjad
kapital, i untuk urutan angka romawi kecil, dan I untuk urutan
angka romawi kapital.

Gambar 4. 6 Tag <ol> 2

Gambar 4.6 Dalam html tag <ol> digunakan untuk membuat
list yang bersifat terurut. Tag <ol> dapat diberikan attribute yaitu
type dimana attribute type bisa menerima value yaitu 1 untuk
urutan angka, a untuk urutan abjad kecil, A untuk urutan abjad
kapital, i untuk urutan angka romawi kecil, dan I untuk urutan
angka romawi kapital.
 Berikut nilai-nilai yang dapat digunakan pada atribut type
pada elemen <ol>:

Gambar 4. 7 Atribute <ol>

Gambar 4.7 adalah attribute type <ol> berisi 1, a, A, i, I.
2. Unorder List Tag <ul>
Penulisan tag :

Gambar 4. 8 Tag <ul>

Gambar 4.8 dalam html tag <ul> digunakan untuk membuat
list dimana list tersebut tidak berurutan. Setiap pembuatan tag list
dalam mendeklarasikan listnya gunakan tag <li>…</li>. Tag
tersebut ditambahkan sesuai dengan kebutuhan list yang
dibutuhkan.
 3. Nested list
Nested list merupakan pembuatan list yang didalamnya
memiliki tag <ol> dan <ul>. Nested list disebut juga list bersarang.
Penulisan tag :

Gambar 4. 9 Nested List

Gambar 4.9 dalam HTML nested list digunakan ketika ingin
membuat list yang memiliki sub list didalamnya.
d. Tag <img>
Penulisan tag :

Gambar 4. 10 Tag <img>

Gambar 4.10 dalam HTML tag <img> digunakan untuk
merender sebuah gambar ke dalam halaman website. Dalam tag
<img> memiliki beberapa attribute untuk attribute yang sering
digunakan adalah src=”…”. Src menerima value path tempat gambar
yang akan dirender itu berada. Untuk attribute alt=”…” optional
digunakan attribute alt ini digunakan untuk merender tulisan apabila
gambar tidak terender dengan baik.
e. Tag Anchor <a>
Penulisan tag :

Gambar 4. 11 Tag <a>

Gambar 4.11 Tag <a> atau anchor merupakan elemen yang
digunakan untuk membuat sebuah hyperlink ke halaman atau website
lain, file, alamat email, atau URL lainnya. Untuk menggunakan elemen
ini kita gunakan tag <a>...</a> bersama dengan atribut href untuk
menetapkan sebuah target yang akan dituju. Dalam sebuah halaman
website tag achor <a> sering dipakai pada bagian navigasi website.
Selain atribut href, terdapat beberapa atribut khusus yang dapat
digunakan pada tag achor <a> antara lain:

Gambar 4. 12 tag achor<a>

Gambar 4.12 adalah tag achor <a> dengan atribut download,
href, target, media.
f. Tag Table <table>
Penulisan tag :

Gambar 4. 13 Tag <table>

Gambar 4.13 dalam HTML tag <table> digunakan untuk
membuat table dalam HTML. Tabel sendiri disajikan dalam dua dimensi
yang terdiri dari baris dan kolom (cell) yang berisikan sebuah data.
1. Struktur Dasar dalam Sebuah Tabel
Dalam tag <table> terdapat tiga buah element yaitu <table>,
<tr> sebagai “table row”, dan <td> sebagai “table data” atau <th>
sebagai “table head”. Tag <table> sebenarnya digunakan untuk
menandakan dimulainya sebuah tabel. Kemudian tag <tr>
digunakan untuk membuat sebuah baris baru dalam tabel yang
mana didalamnya terdapat tag <td> atau <th> sehingga
menghasilkan sebuah cell.
Tag <td> lebih kearah digunakan untuk menampung data
pada tabel. Selanjutnya untuk tag <th> digunakan untuk
menentukan sebuah header pada kolom datanya. Berikut
merupakan gambaran mengenai tag <table>:
 Gambar 4. 14 Tabel Baris
Gambar 4.14 adalah table berisi baris setiap baris terdapat
header dan data cell.

Gambar 4. 15 Tabel <tr>

Gambar 4.15 adalah table berisi <tr> setiap <tr> terdapat
<th> dan <td>.
2. Spanning Cell
Pada HTML spanning cell digunakan untuk menjangkau atau
merentangakan sebuah ukuran sel lebih dari ukurang yag biasanya.
Dengan spaning cell ukuran sebuah sel lebih dari ukuran yang
biasanya.
a. Columns Spans
Untuk merentangkan sebuah kolom bisa gunakan atribut
colaspan pada elemen <td> atau <th>. Sehingga sebuah header
mencakup dua kolom.
 b. Row Spans
Untuk merentangkan sebuah baris bisa menggunakan
atribut rowspan. Sebenarnya sama dengan colspan tetapi
atribut ini akan merentangkan ke sebuah sel ke bawah. Berikut
contohnya :
4.3.4 Semantic HTML
Sebuah website memiliki hierarki konten yang sama seperti dokumen
sehari-hari yang kita baca, contohnya majalah, dan koran. Sehingga, hierarki
pada sebuah website merupakan hal yang penting. Namun, tentu tag yang
terdapat pada HTML perlu dikelompokan menjadi beberapa bagian.

Gambar 4. 16 Semantic HTML

Gambar 4.16 pada HTML5 terdapat beberapa tag yang dapat
digunakan dalam mengelompokan sebuah tag dengan lebih jelas dan
memiliki arti. Tag ini memiliki nama sesuai dengan fungsi atau peran dari
tag tersebut.

Gambar 4. 17 Semantic 2
 Gambar 4.17 pada HTML5 terdapat beberapa tag yang dapat
digunakan dalam mengelompokan sebuah tag dengan lebih jelas dan
memiliki arti. Tag ini memiliki nama sesuai dengan fungsi atau peran dari
tag tersebut contohnya <header>, <nav>, <main>, <footer>.
1. Header dan Footer
Header sering digunakan untuk menampilkan nama situs dan
navigasi utama sedangkan untuk footer sering digunakan sebagai
informasi hak cipta.
2. Main
Tag <main> digunakan untuk menampung/mewadahi konten
utama (dominan) dalam <body>. Konten main dapat terdiri dari banyak
section, ataupun artikel, atau konten apapun di dalam elemen main,
selama termasuk konten utama yang dimiliki oleh website.
3. Nav
Tag <nav> digunakan untuk menampung sebuah navigasi yang
sifatnya penting (major), contohnya navigasi utama pada sebuah
website.
Tapi tidak menjamin pada sebuah website hanya ada satu
navigasi. Contohnya, sebuah akhir artikel pada blog terdapat tautan
navigasi menuju artikel yang dianggap relevan dengan artikel yang
telah kita baca. Navigasi tersebut tidak dianggap sebagai navigasi yang
penting, sehingga kita tidak perlu menggunakan elemen <nav> untuk
menampilkannya.
4. Div
Tag <div>, tag ini merupakan sebuah wadah (container) yang
bersifat umum untuk menampung beberapa konten. Elemen ini tidak
akan memberikan efek apapun pada konten atau layout sebelum
menerapkan sebuah style menggunakan CSS. Sebagai sebuah wadah
yang murni, elemen <div> tidak merepresentasikan apapun. Elemen ini
lebih sering digunakan untuk mengelompokkan sebuah konten sehingga
dapat memudahkan styling dengan menggunakan atribut class atau id.
 5. Span
Tag <span>, tag ini memberikan manfaat yang sama seperti
<div>, bedanya tag ini digunakan sebagai phrase elements dan tidak
terdapat line breaks ketika menggunakannya. Sederhananya, <span>
merupakan sebuah <div> yang digunakan dalam sebuah baris teks yang
dapat diwadahi oleh paragraf, list, heading atau lainnya.

4.4 Latihan
4.4.1 Konfigurasi Views, Controller dan Routes
1. Buka project CI4 sebelumnya pada code editor dan jalankan servernya

Gambar 4. 18 Menjalankan Server

Gambar 4.18 merupakan membuat server pada codeigniter
dengan cara mengetik php spark serve di terminal.
2. Buka folder views pada App > Views, kemudian buat file baru dengan
nama halloworld.php

Gambar 4. 19 Membuat Views

Gambar 4.19 adalah membuat file views Bernama halloworld.php
3. Buka file halloworld.php dan buat struktur html normal yang
menampilkan tulisan H1 hallo world.
 Gambar 4. 20 Struktur Html Views
Gambar 4.20 merupakan code html dari file views halloworld.php.
4. Selanjutnya buat controller yang memberikan response untuk
menampilkan halaman halloworld.php

Gambar 4. 21 Membuat Controller Halloworld

Gambar 4.21 merupakan membuat response sederhana dengan
mengembalikan Hello World.
5. Kemudian setting router ketika url mengakses ‘/latihanview’ dia akan
diberikan response dari controller HelloWorld method index

Gambar 4. 22 Pengatuan Routes Helloworld

Gambar 4.22 menambahkan routes baru dimana dengan request
get Ketika URL memanggil maka akan direspon class controller.
 6. Akses localhost:8080/latihanview maka hasilnya akan seperti gambar
berikut

Gambar 4. 23 Hasil dari Pembuatan View Helloworld

Gambar 4.23 merupakan hasil dari pembuatan view halloworld
yang menampilkan teks Hallo World.
4.4.2 Layouting Views dalam Codeigniter 4
1. Buka project CI4 sebelumnya pada code editor dan jalankan servernya

Gambar 4. 24 Menjalankan Server

Gambar 4.24 meupakan perintah untuk menjalankan server pada
codeigniter dengan cara mengetik php spark serve di terminal pada
folder yang telah ditentukan.
2. Buka folder views pada App > Views, kemudian buat folder baru untuk
tempat file layout dengan nama layout

Gambar 4. 25 Membuat Folder Layout

Gambar 4.25 adalah membuat folder bernama layout didalam
folder views.
3. Didalam folder layout buat file php sesuai dengan format
nim_nama.php, dalam file tersebut buat source code html seperti
gambar berikut:

Gambar 4. 26 Membuat File PHP

Gambar 4.26 membuat file 32602200077_ibra.php didalam folder
layout.

Gambar 4. 27 Kode pada File 32602200077_ibra.php

Gambar 4.27 merupakan code html dari file pada folder views
yang bernaman 32602200077_ibra.php.
4. Selanjutnya buka folder views pada App > Views, kemudian buat file
baru untuk membuat content yang akan dirender pada layout yang
 sudah dibuat. Beri nama file tersebut dengan format nama_nim.php.
Dalam file tersebut buat source code html seperti berikut dan ubah
bagian experience sesuai dengan pengelaman yang anda miliki.

Gambar 4. 28 Membuat File ibra_32602200077.php di View

Gambar 4.28 membuat file baru untuk membuat content yang
akan dirender pada layout yang sudah dibuat. Beri nama file tersebut
dengan format nama_nim.php. Dalam file tersebut buat source code
html seperti berikut dan ubah bagian experience sesuai dengan
pengelaman yang anda miliki.

Gambar 4. 29 Kode Didalam File ibra_32602200077.php

Gambar 4.29 merupakan kode yang ada didalam file
ibra_32602200077.php.
5. Cek apakah layouting berjalan.
 Gambar 4. 30 Layouting Berhasil Dijalankan
Gambar 4.30 merupakan tampilan ketika proses layouting pada
view telah berhasil dijalankan.

4.5 Tugas
1. Jelaskan kegunaan source code php dibawah ini pada proses
layouting pada codeigniter 4 :
a. RenderSection

Gambar 4. 31 Kode Sintak renderSection

 Gambar 4.31 adalah rendersection, kita dapat menggunakan
perintah renderSection() untuk mengatur bagian dari template yang
isinya akan menyesuaikan apa yang kita set dibagian view, method
renderSection memiliki 1 argument yaitu nama dari section,
semisal dalam contoh ini namanya kita buat content.
b. Extend

Gambar 4. 32 Kode Sintak Extend

Gambar 4.32 adalah extend, Metode ini mengambil nama file
tampilan apa pun yang ingin Anda gunakan. Karena mereka adalah
tampilan standar, mereka akan ditempatkan seperti
tampilan. Secara default, itu akan mencari di direktori Tampilan
aplikasi, tetapi juga akan memindai ruang nama lain yang
ditentukan PSR-4.
c. Section … EndSection

Gambar 4. 33 Kode Sintak Endsection

Gambar 4.33 adalah endsection, merender tampilan dan tata
letaknya dilakukan persis seperti tampilan lainnya.
2. Buatlah dua halaman HTML yang memiliki struktur header, navigasi,
main dan footer dan manfaatkan views layouting pada codeigniter 4,
yang dimana header, navigasi, dan footer berada pada layouting dan
layout tersebut merender 2 buat content main. Untuk main yang
pertama berisi HTML profil singkat anda dan content main yang kedua
berisi pengalaman atau skill yang anda miliki.
Jawab:
a. Membuka Code editor dan jalankan Servernya

Gambar 4. 34 Menyalakan server

Gambar 4.34 merupakan perintah untuk menyalakan server
agar dapat diakses
b. Buat file Halaman.php pada folder Controllers

Gambar 4. 35 Pembuatan File Halaman.php

Gambar 4.35 merupakan tampilan file Halaman.php pada
folder Controllers setelah dibuat
c. Kemudian Setting router ketika url mengakses ‘/profile’ dan
‘/experience’ yang akan memberikan responses

Gambar 4. 36 Menyambungkan URL

Gambar 4.36 merupakan kode yang harus ditambah pada
file Routes.php di folder Config.
d. Masuk pada folder Views, buat folder bernama layouts

Gambar 4. 37 Pembuatan Folder layouts pada Folder Views

 Gambar 4.37 merupakan tampilan ketika folder layouts
sudah dibuat pada folder views.
e. Pada folder Layouts buat file bernama layout.php

Gambar 4. 38 Pembuatan File layout.php pada Folder layouts

Gambar 4.38 merupakan tampilan ketika file layout.php
sudah dibuat pada folder layouts.
f. Kembali lagi pada folder Views buat 2 file bernama profile.php
dan experience.php

Gambar 4. 39 Pembuatan File profile.php dan experience.php

Gambar 4.39 merupakan tampilan folder views ketika file
profile.php dan experience.php sudah dibuat.
g. Isikan kode berikut pada masing – masing file
1) File layout.php

Gambar 4. 40 Kode Sintak Pada File layout.php

Gambar 4.40 Merupakan kode yang harus ditulis pada
file layout.php
2) File profile.php

Gambar 4. 41 Kode Sintak Pada File profile.php

Gambar 4.41 Merupakan kode yang harus ditulis pada
file profile.php
3) File experience.php
 Gambar 4. 42 Kode Sintak Pada File experience.php
Gambar 4.42 Merupakan kode yang harus ditulis pada
file experience.php
4) File Halaman.php

Gambar 4. 43 Kode Sintak Pada File Halaman.php

Gambar 4.43 Merupakan kode yang harus ditulis pada
file Halaman.php
h. jalankan pada brower dengan mengarahkan URL pada
http://localhost:8080/profile.
 Gambar 4. 44 Tampilan profile.php
Gambar 4.44 merupakan tampilan hasil render dari file
profile.php, file ini berisi sekilas profil.
i. Selanjutnya klik tombol about untuk mengarahkan URL pada
http://localhost:8080/experience

Gambar 4. 45 Tampilan about.php

Gambar 4.45 merupakan tampilan hasil render dari file
about.php, file ini berisi sekilas tentang pengalaman dan
kemampuan.
4.5 Kesimpulan
Secara simple view adalah sebuah halaman web, atau bagian dari
website, seperti header, footer, sidebar, dan sebagainya. Faktanya, tampilan
dalam sebuah view dapat disematkan secara fleksibel didalam tampilan
lainnya. Dalam codeigniter 4 view tidak pernah dipanggil secara langsung
melainkan harus dimuat atau dirender oleh controller atau routes.
Ingat codeigniter 4 mengusung konsep MVC, dimana controller dapat
diartikan sebagai polisi lalu lintas yang bertanggung jawab untuk mengatur
tampilan yang akan diload dan proses yang akan dijalankan baik dari view
atau models.