Modul Praktikum

Desain Web ©Sofyan Thayf, 2021

Praktikum 5

WEB FRAMEWORK DAN WEB TEMPLATE

Kompetensi Dasar: Mampu menerapkan web framework dan web template dalam pengembangan
halaman website

1. Web Framework
Pokok Bahasan:
2. Web Template

Indikator: 1. Dapat menjelaskan manfaat dari penggunaan web framework dan web
template
2. Dapat menerapkan web framework dan web template dalam desain
website
3. Dapat membangun website dengan cepat menggunakan web framework
dan web template

Waktu: 2 x 50 menit (1 pertemuan)

A. RINGKASAN MATERI

Ketika membangun sebuah website dengan tekanan deadline (batas waktu), misalnya website pesanan atau proyek
web dari proses tender atau perjanjian kerja dengan client, maka membuat website yang layak mulai dari nol dengan
menulis sendiri kode HTML dan CSS bukanlah ide yang baik, karena kemungkinan besar pekerjaan tidak akan
terpenuhi sampai batas waktu, dan jika berdasarkan pesanan cient, biasanya akan lebih berfokus pada content atau
isi website.

Web Framework adalah struktur website yang sudah didesain lengkap dengan segala aspek kebutuhan dasarnya,
dimana pembuat web tinggal melakukan penataan halaman web dengan menggunakan elemen-elemen dan style
yang siap untuk digunakan, dan lebih banyak berfokus pada materi isi website, sehingga pekerjaan menjadi lebih
cepat. Framework juga telah didesain sedemikian rupa sehingga akan menghasilkan website yang efektif dan efisien
secara teknis (terkait kecepatan akses, optimasi navigasi, dan sebagainya).

Dengan menggunakan framework, juga akan memudahkan pengembangan website secara kolaboratif atau tim,
karena setiap anggota tim yang memahami struktur framework yang sama, akan mudah mengetahui bagian yang
dikerjakan oleh masing-masing, dan mudah melakukan penelusuran jika terjadi kesalahan atau memerlukan
perbaikan.

Web Template adalah desain style dari website, dimana sebagian besar tampilan halaman web sudah selesai dan
siap untuk digunakan. Pengguna tinggal melakukan penyesuaian di beberapa bagian bilamana diperlukan. Web
template umumnya merujuk pada web framework tertentu.

STMIK KHARISMA Makassar 1

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

MaterializeCSS

MaterializeCSS adalah web framework yang sangat simple dan ringan untuk digunakan karena ukuran file yang relatif
kecil (ukuran file penting menjadi pertimbangan karena menentukan kecepatan download halaman web).
MaterializeCSS juga sangat mudah untuk digunakan karena desain selector yang sangat terstruktur sehingga dalam
penerapannya di dalam file HTML menjadi terasa lebih logis.

MaterializeCSS juga merujuk pada Material Design (http://material.io) yang dikembangkan oleh Google, yang
merupakan koleksi desain warna, typography, dan sejumlah elemen visual lainnya yang dirancang berdasarkan studi
yang mendalam untuk memberikan kenyamanan dan readibility (kemudahan dan kejelasan untuk dibaca) yang tinggi
kepada user.

Panduan penggunaan dari MaterializeCSS (tersedia di website http://materializecss.com) juga sangat ringkas, jelas
dan mudah untuk ditelusuri, sehingga sangat cocok untuk digunakan oleh pemula dalam pengembangan web, namun
bukan berarti MaterializeCSS tidak cocok digunakan oleh desainer web profesional.

Gambar 1

Developer Tools

Developer Tools atau biasa juga disingkat menjadi DevTools adalah sarana yang disediakan pada web browser
Google Chrome untuk membantu para desainer dan developer web untuk me-review, menguji, menelusuri kesalahan
(debugging), hingga mengukur dan mengevaluasi kinerja dari web yang sedang dikembangkan/dibangun. Developer
Tools dapat membantu untuk melakukan simulasi bagi desainer web untuk melihat perilaku dan respons dari web
yang sedang dikembangkan

Untuk membuka Developer Tools dapat dilakukan dengan beberapa cara:

- Cara pertama yang paling umum adalah melalui menu tiga titik di sudut kanan atas window browser Chrome, pilih
menu More Tools lalu pilih Developer Tools dari sub menu yang muncul

STMIK KHARISMA Makassar 2

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

- Cara yang paling cepat adalah dengan menekan kombinasi tombol CTRL + SHIFT + I , maka Developer Tools
akan terbuka.

- Cara ketiga adalah dengan klik kanan mouse pada elemen web tertentu yang tampil di layar browser, lalu pilih
menu Inspect pada context-menu yang muncul. Keuntungan cara ini adalah Developer Tools akan terbuka
dengan elemen yang di-klik-kanan otomatis menjadi fokus review

Gambar 2

Pada web browser selain Google Chrome, juga tersedia sarana yang serupa dengan Developer Tools, namun dengan
istilah dan teknik penggunaan yang mungkin berbeda.

STMIK KHARISMA Makassar 3

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

B. PERSIAPAN PRAKTIKUM

1. Perangkat Keras
a. Perangkat komputer
2. Perangkat Lunak (ter-install di komputer, dan siap digunakan)
a. Text/code editor, dianjurkan menggunakan Atom
b. Web Browser (Google Chrome, Mozila Firefox)

C. KEGIATAN PRAKTIKUM

1. Buat folder baru dan beri nama praktikum5

Buka website https://materializecss.com/getting-started.html dan download Starter Template dari Materialize

CSS (lihat Gambar 3)

Ekstrak folder js dan css dari starter-template.zip dan letakkan dalam folder praktikum5 (lihat Gambar 4,
maaf dalam gambar folder bernama latihan2)

Gambar 3

STMIK KHARISMA Makassar 4

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 4

2. Buka folder praktikum5 dari program text editor (Atom)

3. Buat file baru bernama index.html, tuliskan struktur dasar HTML

Gambar 5

MENERAPKAN TEMPLATE

4. Tambahkan elemen <link> untuk memasukkan style template materialize.min.css,

Tambahkan tag <meta>, untuk pengaturan viewport, dan

Tambahkan elemen <script> di bagian akhir (sebelum tag penutup </body>).

Lihat contoh dalam Listing 1 dan Gambar 5

Listing 1

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">

STMIK KHARISMA Makassar 5

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Master Chef Nusanatara</title>

</head>
<body>

<script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

5. Selanjutnya sisipkan elemen navigasi <nav> ... </nav> dan sebuah blok <div> ... </div> dengan
class style container seperti dalam contoh pada Listing 2

Lihat hasilnya melalui web browser (Gambar 6)

Listing 2

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Master Chef Nusanatara</title>

</head>
<body>

<nav class="blue" role="navigation">

<div class="nav-wrapper container">
<a href="#" class="brand-logo">Master Chef Nusantara</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Tentang Website</a></li>
<li><a href="#">Tentang STMIK KHARISMA</a></li>
</ul>

</div>
</nav>

<div class="container">
<h4 class="blue-text">Koleksi Resep Khas Nusanatara</h4>

</div>

<script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

STMIK KHARISMA Makassar 6

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 6

Gambar 7

Perkecil ukuran window browser seperti pada Gambar 7, dan perhatikan apa yang hilang

STMIK KHARISMA Makassar 7

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

6. Tambahkan beberapa baris kode lagi, seperti contoh dalam Listing 3, tambahan adalah yang diberi warna
berbeda
Listing 3

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Master Chef Nusantara</title>

</head>
<body>

<nav class="red" role="navigation">

<div class="nav-wrapper container">
<a href="#" class="brand-logo">Master Chef Nusantara</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Tentang Website</a></li>
<li><a href="#">Tentang STMIK KHARISMA</a></li>
</ul>

<ul id="nav-mobile" class="sidenav">

<li><a href="#">Tentang Website</a></li>
<li><a href="#">Tentang STMIK KHARISMA</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i
class="material-icons">menu</i></a>
</div>
</nav>

<div class="container">
<h4 class="red-text">Koleksi Resep Khas Nusanatara</h4>

</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-

2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>

Lihat hasilnya pada web browser, perkecil ukuran window browser, dan perhatikan perbedaannya (lihat Gambar
8)

STMIK KHARISMA Makassar 8

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 8

Pertanyaan
Apa efek yang dihasilkan dari baris ini:
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-
icons">menu</i></a>

7. Buat beberapa blok <div> seperti dalam contoh pada Listing 4

Salin (copy-paste) semua daftar link resep dari halaman index.html pada Latihan 1, hilangkan <ul> dan <li> -
nya, lalu tambahkan class=”collection-item” pada setiap link (lihat Listing 4)

Copy folder img berikut semua isinya dari Latihan 4

Listing 4

...

<div class="container">
<h4 class="blue-text">Koleksi Resep Khas Nusantara</h4>

<div class="row">

<div class="col m5 s12">

<div class="card z-depth-3">
<div class="card-image">
<img class="responsive-img" src="img/indonesia.jpg" alt="">
</div>
</div>

STMIK KHARISMA Makassar 9

Modul Praktikum
Desain Web
</div>
<div class="col m7 s12">
<div class="collection">
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
<a class="collection-item"
</div>
</div>
</div>
...
Lihat tampilannya melalui web browser, dan coba dengan mengubah ukuran window
STMIK KHARISMA Makassar
©Sofyan Thayf, 2021
href="barobo.html">Barobo</a>
href="kadominyak.html">Kado Minyak</a>
href="kapurung.html">Kapurung</a>
href="nasucemba.html">Nasu Cemba</a>
href="nasupalekko.html">Nasu Palekko</a>
href="pallubasa.html">Pallu Basa</a>
href="pallumara.html">Pallu Mara</a>
href="parape.html">Parape</a>
href="sopkonro.html">Sop Konro</a>
href="sopsaudara.html">Sop Saudara</a>
href="toppalada.html">Toppa Lada</a>
Gambar 9
10
Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

KUSTOMISASI TEMPLATE

Untuk meng-kustomisasi template, tidak dengan mengedit file CSS bawaan template, tetapi dengan membuat file CSS
baru dan mendefinisikan ulang selector tertentu yang akan dikustomisasi sesuai dengan prinsip-prinsip hirarki dalam
CSS, file CSS baru dimuat ke file HTML setelah CSS bawaan template, dengan demikian bila terdapat selector dengan
nama yang sama, property dari selector yang berlaku adalah property yang paling akhir didefinisikan

8. Buka file style.css yang sudah ada dalam folder css (bawaan template, sudah terisi beberapa selector),
tambahkan dua selector baru seperti dalam Listing 5.

Listing 5

.bluechef {
background-color: #0000bf;
}

.bluechef-text {
color: #0000bf;
}

9. Tambahkan elemen <link> untuk memasukkan style.css ke dalam HTML seperti dalam Listing 6

Listing 6

<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/style.css" media="screen,projection">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Master Chef Nusanatara</title>

</head>

10. Ganti class style dari elemen <nav> dan elemen <h4>.(judul) dengan menggunakan selector bluechef dan
bluechef-text yang baru dibuat. Lihat contoh dalam Listing 7

Listing 7

...

<nav class="bluechef" role="navigation">

...
...

STMIK KHARISMA Makassar 11

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

</nav>

<div class="container">
<h4 class="bluechef-text">Koleksi Resep Khas Nusantara</h4>

...
...

Refresh tampilan pada web browser dan lihat perbedaannya (lihat Gambar 10).

Dengan demikian kita telah membuat definisi warna sendiri yang tidak tersedia di dalam template

Gambar 10

11. Berdasarkan tema bluechef yang kita terapkan, link koleksi resep yang berwarna biru yang merupakan warna
link bawaan template terlihat tidak serasi, karena itu kita akan mendefinisikan ulang style untuk warna link.

Klik kanan pada salah satu link yang berwarna biru, lalu pilih menu Inspect untuk membuka Developer Tools
pada browser (lihat Gambar 11 dan Gambar 12)

STMIK KHARISMA Makassar 12

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 11

Gambar 12

12. Perhatikan selector apa yang menyebabkan link berwarna biru, lihat bagian yang dilingkari pada Gambar 12. Pilih
seluruh blok selector, lakukan copy-paste ke dalam file style.css sebagai selector baru. Karena kita hanya akan
mengubah warna maka property selain color boleh dihapus, lalu berikan warna baru yang diinginkan, dalam
hal ini gunakan warna biru #0000bf (lihat Listing 8)
Listing 8

.collection a.collection-item {
color: #0000bf;
}

STMIK KHARISMA Makassar 13

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Lihat hasilnya dengan me-refresh browser, perhatikan bahwa warna biru bawaan template telah di-override
(ditimpa) dengan warna baru yang didefinisikan oleh selector yang sama dalam style.css (lihat Gambar 13)

di-override

Gambar 13

13. Ulangi cara yang sama dengan langkah nomor 11 dan nomor 12 di atas, untuk mengubah tampilan keseluruhan
link resep menjadi seperti pada Gambar 14 (dikelilingi kotak berwarna ungu, dan background ungu untuk item
yang diseleksi)

STMIK KHARISMA Makassar 14

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 14

D. TUGAS SELANJUTNYA

1. Baca kembali panduan penggunaan (manual) dari MaterializeCSS di website http://materializecss.com dan buat
kembali semua file resep (isi boleh di-copy-paste dari latihan sebelumnya) dengan menerapkan template
MaterializeCSS, dan modifikasi style.css (tambahkan baru atau override selector yang ada bila diperlukan)

2. Hal yang sama juga dilakukan pada halaman tentang bahan utama/khas, halaman Tentang Website, dan halaman
Biodata.

STMIK KHARISMA Makassar 15