BAB V

VIEW CSS PADA CODEIGNITER 4

5.1 Tujuan Praktikum

Adapun tujuan dari praktikum ini :
1. Untuk mengenal CSS3
2. Dapat menghubungkan CSS3 dalam project CI4
3. Dapat membuat styling sederhana menggunakan CSS3

5.2 Alat dan Bahan

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

5.3 Dasar Teori

5.3.1 Pengenalan CSS (Cassading Style Sheet)
Cascading Style Sheet atau biasa disingkat CSS merupakan W3C
standar yang digunakan untuk mengatur visualisasi berkas yang ditulis pada
HTML. CSS bukanlah bahasa pemrograman karena didalamnya tidak
terdapat logika, tidak terdapat sintaks pengkondisian, tidak adanya proses
iterasi. CSS hanya sebuah declarative language yang digunakan untuk
mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur
seperti apa sebuah elemen HTML ditampilkan pada browser.
5.3.2 Aturan Penulisan Styling
Dalam menuliskan sebuah style sheet yang terdiri dari satu atau lebih
aturan styling yang mendeskripsikan bagaimana sebuah elemen atau
sebuah kelompok elemen ditampilkan dalam jendela browser.
Memahami sebuah bagian rules sangat penting sebagai langkah awal
untuk belajar CSS. Dalam penggunakan CSS, terdapat dua bagian dalam
sebuah rule. Yang pertama adalah identitas elemen atau elemen yang akan
menerapkan rule biasanya disebut dengan selector dan yang kedua adalah
 deklarasi atau intruksi yang akan diterapkan pada sebuah selector.

Gambar 5. 1 struktur css

Gambar 5. 2 struktur css

5.3.3 CSS Selector
1. Type Selector
Type Selector menggunakan nama elemen sebagai target untuk
diterapkannya rule. Dengan kata lain, ketika menggunakan selector ini
tentu rule akan diterapkan pada seluruh tag target yang ada pada
dokumen HTML. Contohnya sebagai berikut:

Gambar 5. 3 Penggunaan Selector pada CSS

2. Class Selector
Class selector menetapkan target elemen berdasarkan nilai dari
atribut class yang diterapkan pada elemennya. Untuk penulisan selector,
awali dengan tanda titik (.) kemudian lanjutkan dengan nama class-nya.
Contoh:

Gambar 5. 4 Penjelasan Class Selector Pada CSS

Satu nama class dapat diterapkan dibeberapa tag HTML. Contoh
class warna pada gambar diatas akan diterapkan pada dua lebih tag
HTML.
 Gambar 5. 5 Keterhubungan Pada Selector Class
Dalam sebuah tag HTML juga dapat menerima lebih dari satu
nama class didalamnya. Sehingga dalam satu lingkup tag HTML dapat
diberikan dua atau lebih rules. Untuk menggunakannya pada atribute
class tinggal tuliskan nama kelasnya dan pisahkan tiap kelasnya dengan
spasi.
3. Id Selector
Id selector menetapkan target elemen berdasarkan nilai dari
atribut id yang diterapkan pada tag HTML. Sama seperti class,
atribut id dapat diterapkan pada seluruh tag HTML, dan kebanyakan
atribut ini digunakan untuk memberikan sebuah arti pada generic
element seperti <div> dan <span>. Namun atribut id ini tidak
bersifat shareable, yang artinya nilai id ini harus unik dan digunakan
pada satu elemen saja.
Untuk menetapkan selector dengan menggunakan id, kita
gunakan tanda octothorpe (#) atau lebih familiar disebut dengan hash.
Berikut contohnya:

Gambar 5. 6 Penggunaan Id Selector Pada CSS

Yang harus diperhatikan kembali adalah id ini bersifat unik. Jika
ingin menerapkan sebuah rule pada banyak tag, sebaiknya gunakan
atribut class, bukan dengan id. Berikut merupakan penerapan id yang
salah.

Gambar 5. 7 Penggunaan Id Selector Yang Benar

4. Atribut Selector
Attribute selector merupakan cara menetapkan target tag HTML
berdasarkan sebuah atribute yang terkandung dalam tag HTML sebuah
atribute yang digunakan bisa lebih spesifik sesuai dengan value yang
terkandung didalam atribute yang ditargerkan.

Gambar 5. 8 Contoh Penggunaan Atribut Selector

Dari source code diatas terdapat banyak kondisi yang dapat
diterapkan dalam sebuat atribut selector. Berikut tabel penjelasan
menganai beberapa pengkondisian yang diterapkan dalam sebuat atribut
selector.
 Tabel 5. 1 Penjelasan Atribut Selector pada CSS
Syntax Description
[attr] Menargetkan elemen yang menerapkan
atribut attr.
[attr=value] Menargetkan elemen yang menerapkan
atribut attr dengan nilai value.
[attr~=value] Menargetkan elemen yang menerapkan
atribut attr dengan salah satu nilainya
adalah value.
[attr^=value] Menargetkan elemen yang menerapkan
atribut attr yang nilainya diawali dengan
nilai value.
[attr$=value] Menargetkan elemen yang menerapkan atribut
attr yang nilainya diakhiri dengan value.
[attr*=value] Menargetkan elemen yang menerapkan atribut
attr yang nilainya mengandung value.
5. Universal Selector
Universal selector digunakan untuk diterapkan pada seluruh
elemen. Tetapi selector ini juga bisa secara spesifik menargetkan
sebuah elemen dengan menggabungkan bersama selector yang lainnya.
Berikut ini contohnya:
 Gambar 5. 9 Contoh Penggunaan Universal Selector
6. Pseudo Selector
Pseudo selector berbeda dengan selector yang sudah dibahas
sebelumnya, tipe selector ini menargetkan elemen pada bagian yang
“tidak terlihat” seperti sifat pada element, sehingga untuk menerapkan
pesudo selector tidak bisa menggunakan selector biasa.
Dalam penyeleksian target tag HTML dalam bidang pseudo
selector, pseudo selector memiliki dua kategori. Untuk kategorinya ada
pseudo-class dan pseudo-element.
a. Pseudo-Class
Pseudo-class merupakan sebuah class “semu” yang
sebenarnya ada pada setiap elemen HTML, dengan menggunakan
selector ini dapat memilih tag HTML berdasarkan class yang tidak
tampak pada dokumen. Untuk menggunakan pseudo-class gunakan
tanda titik dua (:) pada basic selector kemudian diikuti dengan
pseudo-classnya. Berikut beberapa pseudo-class yang sering
digunakan.
 Tabel 5. 2 Jenis Pseudo Class pada CSS
Syntax Deskripsi
:link Rule akan diterapkan pada sebuah tautan
yang belum pernah dikunjungi
:visited Rule akan diterapkan pada sebuah tautan
yang sudah pernah dikunjungi
:hover Rule akan diterapkan pada sebuah tautan
ketika diarahkan dengan kursor
:active Rule akan diterapkan pada sebuah tautan
ketika ditekan

Gambar 5. 10 Contoh Penggunaan Pseudo Class

b. Pseudo-Element
Pseudo-element sama dengan pseudo-class dia merupakan
sebuah element “semu” yang sebenarnya ada tetapi tidak tampak
secara tertulis pada berkas HTML. Selector ini biasa digunakan
 ketika ingin menambahkan sebuah konten tepat sebelum dan
setelah sebuah elemen paragraf cukup memanfaatkan pseudo-
elemen ::before dan ::after kemudian tuliskan konten tersebut
cukup pada CSS. Berikut contoh penambahan tanda kutip sebelum
dan sesudah tag HTML blockquote.

Gambar 5. 11 Contoh Penggunaan Pseudo Element

5.3.4 Styling Dokumen HTML
Agar halaman HTML dapat membaca css yang dibuat halaman
HTML harus dihubungkan dengan source code css. Untuk menghubungkan
file css dengan halaman HTML ada tiga cara antara lain:
1. External Style Sheet
External Style Sheet merupakan berkas terpisah yang di dalamnya
hanya terdapat sebuah rules. Berkas ini harus berekstensi .css, dan
berkas ini nantinya dihubungkan pada dokumen HTML. Cara ini
merupakan yang paling powerful dalam menerapkan styling. Karena
dengan cara ini, satu berkas styling (.css) dapat digunakan oleh banyak
berkas HTML. Untuk menyambungkan berkas .css dengan dokumen
HTML, dapat menggunakan elemen <link> pada <head> berkas
HTML.
 Gambar 5. 12 Pemanggilan CSS dengan External Stylesheet
Pada elemen <link> tersebut, tetapkan berkas CSS yang
digunakan dengan menggunakan atribut href dan beri nilai “stylesheet”
pada atribut rel sebagai relationship (hubungan) antara berkas style.css
dengan dokumen HTML. Atribut href menerima value berupa path
dimana posisi file css yang dipakai ini berada. Nilai atribut href juga
dapat berupa berkas .css yang tersedia melalui sebuah URL. Banyak
pengembang menggunakan bootstraps.min.css untukmembantu
penyusunan layout website-nya. Agar bisa menggunakannya pada
berkas HTML bisa langsung menuliskan URL untuk berkas tersebut.
Berikut contoh penggunaan href css dari local dan href css dari URL.

Gambar 5. 13 Href CSS Lokal

Gambar 5. 14 Href CSS URL

2. Embedded Style Sheet
Embedded Style Sheet merupakan kumpulan rules yang
dituliskan dalam berkas HTML dengan menggunakan elemen <style>.
Dengan begitu rules yang dituliskan hanya dapat dicakup oleh satu
berkas HTML. Penulisan rules harus dituliskan dalam
elemen <style> dan ditempatkan di dalam <head> dari berkas HTML.

Gambar 5. 15 Contoh Penggunaan Embedded Stylesheet

3. Inline Style Sheet
Inline Style merupakan styling yang diterapkan pada elemen
HTML dengan menggunakan atribut style. Contohnya seperti berikut:

Gambar 5. 16 Contoh Penggunaan Inline Stylesheet

Untuk menambahkan styling properties lainnya (multiple
properties), kita tuliskan dengan menggunakan semicolon (;) sebagai
pemisah antar styling properties-nya.

Gambar 5. 17 Penggunaan Inline Stylesheet Dengan Banyak Atribut

Inline styles hanya diterapkan pada elemen di mana
atribut style diterapkan. Teknik ini seharusnya dihindari terkecuali
benar-benar diperlukan untuk menggantikan sebuah styling yang
ditetapkan pada Embedded Style Sheet atau External Style Sheet.
5.3.5 CSS Conception
1. Inheritance
Styling HTML bersifat inheritance yang artinya dapat mewarisi
properti style “tertentu” pada elemen yang ada di dalamnya. Contohnya
pada rules yang kita tuliskan untuk elemen <body> akan diterapkan
pada seluruh elemen yang ada di dalam elemennya (body). Contoh
lainnya, pada rules yang diterapkan pada elemen <footer> dengan
properti color yang bernilai white, akan diterapkan pada seluruh elemen
yang ada di dalam <footer>. Hal ini menjadi alasan mengapa
memahami struktur dokumen itu penting.

Gambar 5. 18 Konsep Pewarisan Style Pada CSS

2. Group Selector
Jika menerapkan rule yang sama pada beberapa selector yang
berbeda, di CSS dapat menggabungkan selector tersebut sehingga dapat
meminimalisir penulisan kode yang berulang. Contohnya akan
dilakukan styling pada p dan h1 dengan property yang sama yaitu
margin 5px.

Gambar 5. 19 Penggunaan Selektor Tanpa Group Selector

Jika terdapat kasus seperti ini, dapat dituliskan dua selector
sekaligus dalam satu struktur rule. Gunakan tanda koma (,) untuk
 memisahkan tiap selector-nya.

Gambar 5. 20 Penggunaan Selektor Dengan Group Selector

3. Rule Order
Css memiliki alur kerja dalam membaca kode yang mengalir dari
atas ke bawah. Karena itu harus diperhatikan urutan dalam penulisan
rules, terutama saat terjadi sebuah konflik.
Konflik dapat terjadi karena menerapkan beberapa styling pada
satu dokumen HTML. Contohnya, apa yang seharusnya ditampilkan
pada browser ketika eksternal css mengharuskan elemen <p>
menampilkan warna merah, tetapi pada embedded css <p> harus
menampilkan warna biru? Kembali pada alur kerja CSS yang membaca
dari atas ke bawah, sehingga warna yang akan diterapkan adalah warna
yang paling akhir didefinisikan. Untuk lebih jelasnya, bisa lihat contoh
berikut:

Gambar 5. 21 Pembuktian Rule Pada CSS

Namun property styling agar dianggap penting untuk diterapkan
oleh browser dan tidak memperhatikan urutannya. Dengan
menambahkan keyword !important diakhir nilai propertinya.

Gambar 5. 22 Penambahan Keyword !important

Pada gambar 5.22 menampilkan kode jika ada sebuah selektor
yang sama akan tetapi salah satu dari selektor diberi dengan keyword !
important maka yang ada keyword akan dipilih sebagai style pada CSS.
5.4 Percobaan Praktikum
1. Styling Proyek CI 4
a. Buka folder public kemudian buat folder baru dengan nama assets

Gambar 5. 23 folder assets

Pada gambar 5.23 menampilkan folder assets.
b. Buka folder assets kemudian buat folder dengan nama css

Gambar 5. 24 buat folder

Pada gambar 5.24 menampilkan tampilan dari pembuatan
folder css pada folder asset.
c. Dalam folder css buat file css didalamnya dengan nama style.css
Dalam proyek codeigniter semua assets atau bahan yang
dibutuhkan seperti gambar, file css, dan file javascript dimasukan
ke dalam folder public karena folder inilah yang pertama kali
dilewati ketika server codeigniter dijalankan.
 Gambar 5. 25 folder css
Pada gambar 5.25 menampilkan tampilan dari folder css pada
folder asset
d. Buka kembali projek latihan modul 3 kemudian jalankan seperti
biasa. Pada percobaan praktikum kali ini akan dilakukan styling
sederhana untuk halaman tersebut.

Gambar 5. 26 projek latihan

Pada gambar 5.26 menampilkan tampilan dari projek projek
latihan bab 3.
e. Hubungkan file css kedalam halaman HTML tersebut dengan
mengetikan link:css pada header.
 Gambar 5. 27 menghubungkan file
Pada gambar 5.27 menampilkan tampilan dari
mengHubungkan file css kedalam halaman HTML tersebut
f. Selanjutnya ada dicoba untuk menggunakan css dari luar dimana
berbentuk sebuah URL. URL yang dipanggil merupakan cdn dari
sebuah styling untuk membentuk sebuah icon. Cdn yang dipanggil
merupakan cdn dari fontawesome.

Gambar 5. 28 memanggil css external

Pada gambar 5.28 menampilkan tampilan dari menggunakan
css dari luar dimana berbentuk sebuah URL
g. Lakukan perubahan pada div dengan class navbar menjadi seperti
ini :

Gambar 5. 29 perubahan pada div

 Pada source code diatas terdapat sebuah class yang diawali
dengan “fa”, class tersebut merupakan pengimplementasian dari
styling cdn atau URL yang dilampirkan. Untuk lebih jelasnya dapat
mengakses dasboard dari fontawesome (https://fontawesome.com/)
untuk mendapatkan beberapa kreasi icon yang disediakan oleh
fontawesome.
h. Selanjutnya buka file style.css yang sebelumnya sudah dibuat.
Dalam percobaan praktikum kali ini akan dilakukan import font
yang disediakan oleh google font, font yang akan dipakai berjenis
“poppins”. Untuk mendapatkan font tersebut pertama cari font
dengan membuka website google font pada browser anda
(https://fonts.google.com/).

Gambar 5. 30 import font

Pada gambar 5.30 menampilkan tampilan dari import font
untuk styling css.
i. Masukan keyword dari font yang ingin digunakan. Kemudian pilih
font tersebut.

Gambar 5. 31 Masukan keyword

 Pada gambar 5.31 menampilkan tampilan dari font yang akan
di gunakan untuk styling css.
j. Scroll down sampai menebuka tampilan seperti ini kemudian klik
semua icon tambah.

Gambar 5. 32 import font

Pada gambar 4.32 menampilkan tampilan dari font yang akan
di gunakan untuk styling css.
k. Lanjut klik icon berikut kemudian pilih import kemudian copy.

Gambar 5. 33 import font

Gambar 5. 34 import font

Pada gambar 5.34 menampilkan tampilan dari import font
untuk styling css.
l. Kemudian paste hasil copy tadi ke file style.css kemudian hapus
tag <style>. Font yang diambil sudah siap digunakan.

Gambar 5. 35 paste hasil copy

Pada gambar 4.35 menampilkan tampilan dari mempastekan
hasil copy tadi ke file css.
m. Sebelum melakukan styling css baiknya dilakukan reset CSS agar
tidak ada styling yang dikandung oleh halaman website yang
terbawa dari struktur HTML nya bersamaan dengan mendeklarasi
font yang dipakai. Karena styling untuk semua maka akan
digunakan universal selector.

Gambar 5. 36 universal selector

Pada gambar 5.36 menampilkan tampilan dari universal
selector.
n. Selanjutnya akan dilakukan styling untuk class navbar dan banner.
Untuk property backgourd image pada class banner bisa
ditambahkan gambar backgroud yang ingin dijadikan backgroud,
sebelumnya buat folder baru dengan nama image pada
public>assets, kemudian buka folder image dan masukan aset
gambar untuk background pada folder image yang sudah dibuat.
Lanjut panggil path untuk gambarnya.

Gambar 5. 37 styling untuk class navbar

Gambar 5. 38 styling untuk class navbar

 Pada gambar 5.38 menampilkan tampilan dari styling pada
navbar dan banner pada latihan sebelumnya.
o. Next akan dilakukan styling untuk class name, description, dan
about.

Gambar 5. 39 styling untuk class name, description, dan about.

Pada gambar 5.39 menampilkan tampilan dari styling untuk
class name, description, dan about.
p. Sekarang tampilan HTML akan menjadi seperti berikut

Gambar 5. 40 tampilan HTML

Pada gambar 5.40 menampilkan tampilan dari HTML.
5.5 Tugas
1. Dari tugas modul bab 3 percantiklah dengan styling css dengan
memperhatikan tata letak dan komposisi warna sehingga layak untuk
dipresentasikan. Dan buatlah halaman tersebut responsive untuk device
handphone, table, dan dektop. Serta jelaskan komponen styling yang
anda gunakan.
Jawab:
a. Pembuatan file css

Gambar 5. 41 File index.css

Gambar 5.41 merupakan pembuatan index.css didalam folder
public >> assets >> css. file ini akan digunakan untuk memberi
style pada file index di folder layouts supaya tampilannya semakin
lebih bagus dan lebih menarik.
b. Penambahan kode pada file css

Gambar 5. 42 Penambahan Sintak Kode Pada File index.css

 Gambar 5.42 merupakan sintak kode yang ditambahkan pada
file index.css, kode berguna untuk memberi style sesuai kemauan
yang membuat.
c. Pemanggilan file index.css

Gambar 5. 43 Sintak Kode Pemanggilan File CSS

Gambar 5.43 merupakan sintak kode untuk memanggil file
index.css pada folder public >> assets >> css. Kode tersebut ditaruh
didalam element head pada layout.php di folder layouts.
d. Tampilan sebelum diberikan style

Gambar 5. 44 Tampilan Sebelum Pemberian Style

Gambar 5.44 merupakan tampilan sebelum diberikan style
oleh CSS.
e. Tampilan setelah diberikan style
1) Tampilan Pada Desktop

Gambar 5. 45 Tampilan Projek Versi Desktop

Gambar 5.45 merupakan tampilan projek ketika dibuka
pada device laptop atau desktop.
2) Tampilan Pada Tablet

Gambar 5. 46 Tampilan Projek Versi Tablet

Gambar 5.46 merupakan tampilan projek ketika dibuka
pada device Tablet.
3) Tampilan Pada Mobile

Gambar 5. 47 Tampilan Projek Versi Mobile

Gambar 5.47 merupakan tampilan projek ketika dibuka
pada device mobile atau smartphone.
5.6 Kesimpulan
Cascading Style Sheet atau biasa disingkat CSS merupakan W3C
standar yang digunakan untuk mengatur visualisasi berkas yang ditulis pada
HTML. CSS bukanlah bahasa pemrograman karena didalamnya tidak
terdapat logika, tidak terdapat sintaks pengkondisian, tidak adanya proses
iterasi. CSS hanya sebuah declarative language yang digunakan untuk
mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur
seperti apa sebuah elemen HTML ditampilkan pada browser.
Memahami sebuah bagian rules sangat penting sebagai langkah awal
untuk belajar CSS. Dalam penggunakan CSS, terdapat dua bagian dalam
sebuah rule. Yang pertama adalah identitas elemen atau elemen yang akan
menerapkan rule biasanya disebut dengan selector dan yang kedua adalah
deklarasi atau intruksi yang akan diterapkan pada sebuah selector.
Selektor pada CSS terbagi menjadi 6 sebagai berikut:
1. Type Selector
2. Class Selector
3. Id Selector
4. Atribut Selector
5. Universal Selector
6. Pseudo Selector