KATA PENGANTAR

Era Digitalisasi pada Industri 4.0 di Indonesia saat ini dihadapkan pada tantangan perkembangan
ekosistem industri teknologi. Sehingga diperlukannya tenaga ahli yang salah satunya melalui pembelajaran
atau pendidikan di ruang lingkup Perguruan Tinggi. Program Studi Teknik Informatika Universitas Islam
Nusantara hingga saat ini, telah menyiapkan dan mengembangkan itu semua salah satunya melalui
pembelajaran mata kuliah Pemrograman Berbasis Web.

Pada Mata Kuliah Pemrograman Berbasis Web, mahasiswa akan dibimbing dan praktikum sekaligus
berkaitan dengan berbagai bahasa web yang penting dalam mengembangkan situs web, termasuk
diantaranya HTML, CSS, Javascript, dan PHP MySQL. Selain itu, penerapan berbagai konsep yang sangat
penting pula untuk dipahami baik itu CRUD, Framework, dan Git.

Dengan banyaknya materi yang perlu dipelajari, maka modul ini disusun sedemikian rupa untuk
memudahkan mahasiswa akan mengetahui berbagai teknologi yang mendasari web programming saat
ini. Selain itu, modul ini disusun selengkap mungkin dengan harapan mahasiswa dapat mengikuti kegiatan
praktikum dengan mudah tetapi memperoleh banyak pengetahuan.

Demikian modul ini disusun, mudah-mudahan dapat bermanfaat untuk mahasiswa-mahasiswa khususnya
Program Studi Teknik Informatika Universitas Islam Nusantara. Selamat mengikuti Pembelajaran
Pemrograman Berbasis Web, mari persiapkan diri menjadi angkatan kerja muda digital Indonesia.

Bandung, 2022

Penyusun,

Soecipto, ST., MH
NIDN : 0425127401
Pendahuluan

Modul ini berhubungan dengan pengetahuan dan keterampilan yang dibutuhkan untuk menjadi web
developer.

A. Tujuan Umum
Setelah mempelajari modul ini mahasiswa diharapkan mampu memahami terkait pemrograman berbasis
web hingga dapat membuat web.

B. Tujuan Khusus
Adapun tujuan khusus dari pembelajaran pemrograman berbasis web ini adalah dapat memahami dan
menangkap maksud dari UI/UX, mengimplementasikan desain tersebut kedalam website, mengetahui
struktur dasar dari HTML, dapat memilih bagaimana cara menata gaya website sesuai kebutuhan dari
desain tersebut, pengelolaan database, serta dapat menjalankan semua feature-feature yang dibuat dalam
website.

Deskripsi Pembelajaran

Dalam pembuatan sebuah website tidak terlepas dari tiga bagian utama, yaitu desain untuk website
tersebut, lalu HTML sebagai bahasa yang dapat dibaca oleh browser, serta CSS yang berperan untuk
mengatur tampilan website agar dapat sesuai dengan desain yang telah dibuat. Terdapat banyak sekali cara
untuk penataan gaya website, oleh karena itu kita selaku developer harus mengetahui kebutuhan dari
website yang akan kita buat, salah satu CSS Framework yang sangat terkenal yaitu Bootstrap. Bootstrap
menjadi salah satu CSS Framework terkenal karena menyediakan banyak sekali komponen serta tools yang
dapat membantu dan mempercepat pembuatan website.
Selain tiga bagian utama diatas dalam pembuatan website juga diperlukan database, dimana database
tersebut sebagai koneksi untuk menjalankan feature-feature website yang sudah dibuat.

Kompetensi Dasar

Mampu membaca serta memahami flow dari UI/UX

Mampu memahami struktur dasar serta penggunaan dari HTML
Mampu memahami bagaimana cara menggunakan CSS
Mampu membuat layout yang dinamis dan responsive
Mampu menggunakan CSS Framework untuk mempercepat dan memudahkan dalam pembuatan website
Mampu memahami Javascript
Mampu memahami My SQL dan Koneksi PHP dengan My SQL
Mampu menggunakan GIT sebagai repository setiap project web yang dibuat dan sebagai pengembang
web by team.
 INFORMASI PEMBELAJARAN

Mata Kuliah PEMROGRAMAN BERBASIS WEB

Kode Mata Kuliah TIF443

Dosen Pengampu Soecipto, S.T, M.H

SKS 3 SKS

Sarana /spesifikasi device Laptop dengan spesifikasi:

Tools/media ajar yang akan 1. RAM minimal 4 GB (disarankan 8 GB)
digunakan
2. Laptop dengan 64-bit processor
3. Laptop dengan Operating System
Windows 10 /MacOS / Linux
4. Laptop dengan konektivitas WiFi dan
memiliki Webcam
5. Akses Internet Dedicated minimal 126
kbps per perangkat
Aplikasi yang akan di gunakan selamat 1. Zoom
pembelajaran 2. Code editor
3. Terminal
4. MySQL
5. DBeaver
Materi Pokok 1. UI/UX
2. GIT
3. HTML
4. CSS
5. CSS Framework : Bootstrap
6. Javascript
7. Koneksi PHP dengan My SQL
Penyusun Soecipto, S.T, M.H
 MATERI PEMBELAJARAN

1. UI/UX
UI atau User Interface adalah proses dimana menampilkan sebuah hasil dalam bentuk
tampilan yang dapat dilihat oleh pengguna (user). Lebih tepatnya adalah bagian visual
dari website, software, maupun hardware untuk user dapat berinteraksi. Tujuan dari
User Interface sendiri adalah untuk meningkatkan fungsionalitas serta user experience
dari pengguna.

UX atau User Experience adalah proses dimana pengguna dapat berinteraksi dengan
interface secara baik dan nyaman. Yang terpenting disini, tujuan dari UX adalah untuk
meningkatkan kepuasan pengguna saat mengakses sebuah tampilan, baik dari sisi
website, mobile, maupun desktop. UX sendiri menjadi sebuah penghubung antara
pengguna dengan produk.

UI dan UX adalah hal yang selalu berkaitan satu sama lain, karenanya menghasilkan UI
yang baik harus didukung dengan UX yang konkret. Kombinasi UI dan UX membentuk
seluruh pengalaman user terhadap suatu produk.

1.1 Proses UX
a. Research and Strategy
Pada proses ini seorang UX akan menggali lebih banyak informasi mengenai data
pengguna yang akan menjadi user dari produk yang akan kita buat, dapat berupa
permasalahan yang dihadapi oleh user dalam kehidupannya secara nyata dan
kita berusaha menciptakan solusi untuk permasalahan tersebut dengan sebuah
produk. Terdapat beberapa tahapan dalam proses ini, yaitu:

- Plan: Membuat rencana untuk memastikan setiap stakeholder mempunyai

tujuan yang sama.

- User research: Meskipun kita sering menganggap desain sebagai sesuatu yang
visual, pekerjaan desainer UX sebagian besar adalah pemecahan masalah
konseptual berdasarkan penelitian dan data.

- Information Architecture: Arsitektur informasi (IA) berfokus pada

pengorganisasian dan pelabelan konten situs web, aplikasi, atau produk.
Tujuannya adalah untuk membantu pengguna menemukan informasi dan
 mencapai tujuan mereka.

Data yang dihasilkan dari proses user research dapat berbentuk Persona Profile,
yaitu data lengkap user seperti nama, pekerjaan, pendapatan, domisili, jenjang
endidikan, hobi, karakter, dan kebiasan-kebiasaan dari individu tersebut.

b. Wireframing and Prototyping

Pada Proses ini juga ada beberapa tahap yang harus dilakukan, seperti

- Creating the user flow: merancang alur pengguna terbaik untuk membuat user
nyaman menggunakan aplikasi yang kita buat.

- Wireframing: Wireframing adalah proses pembuatan struktur atau sketsa yang

akan digunakan untuk pertimbangan dalam pengembangan fitur desain produk.
Wireframing juga dapat menunjukkan arus informasi bagi pengguna untuk dapat
mengoperasikan suatu sistem produk sesuai dengan kebutuhan dan keinginan
pengguna. Ada dua jenis wireframing, yaitu High Fidelity Wireframe dan Low
Fidelity Wireframe.

- Testing: pengujian dengan pengguna nyata dengan prototype kasar atau bahkan
hanya mockup kertas untuk mengumpulkan data dari pengguna agar
memvalidasi ide dan asumsi mereka.

- Analysis: dianalisis bersama product manager dan researcher untuk

menentukan langkah selanjutnya.

1.2 Proses UI
a. The look and feel of the product
Pada proses ini merupakan tahap lebih lanjut setelah proses wireframing sudah
matang. Disini produk yang semula hanya berupa wireframe/ sketsa mulai
diperjelas melalui tampilan yang lebih detail sesuai fungsinya. Terdapat beberapa
tahapan pada proses ini.

- Design research: penelitian terhadap pengguna dan kompetitor agar

memberikan wawasan baru tentang tren design. Ini cukup penting untuk
menemukan inspirasi dan membuat interface yang diharapkan oleh pengguna.
 - Visual Design: menentukan tata letak dari produk tersebut dan semua elemen
visual dari pengguna seperti warna, font, ikun, tombol dll.

- Branding & graphic development: mencapai keseimbangan yang tepat antara

kegunaan dan konsisten menampilkan identitas brand dari tim marketing dan
kreatif.

- Design System: memastikan konsistensi produk dengan membuat style guides,

pattern library dan komponen.

Bentuk visual dari produk pada tahap ini harus mewakili segala hal yang ada pada
rancangan tahap wireframe namun di modifikasi lebih lanjut agar mendapatkan
tampilan yang menarik dan memiliki nilai estetika.

b. Responsiveness and interactivity

Tahapan terakhir adalah menghidupkan fungsi dari interface yang sudah kita
rancang agar dapat berfungsi dengan semestinya. Beberapa tahapannya sebagai
berikut.

- Responsive Design: memastikan interface dapat menyesuaikan untuk semua

ukuran devices.

- Interactivity and animation: membuat interface lebih menarik dengan

menambahkan animasi, transisi atau elemen interaktif.

- Prototyping: membuat prototipe UI yang menampilkan semua elemen dari UI

dan interaksi design secara real time.
1.3 Perbedaan antara UI dan UX
Terdapat beberapa perbedaan mendasar antara UI dan UX.

Perbedaan User Interface User Experience

Fokus fokus pada tampilan dari fokus menciptakan kesan

produk itu sendiri. yang menyenangkan ketika
Tampilan inilah yang akan user menggunakan
mempengaruhi kesan produk. UX mengurus
pertama dari suatuproduk. mulai dari fitur-fitur
Karena itu, UI produk, navigasi, struktur
memperhatikan konten, copywriting
elemen-elemen seperti sampai dengan branding.
color palette, font, animasi,
dll. Sederhananya, desain
UI akan mempengaruhi
kesan pertama pengguna
melihat produk Anda.

Prinsip desain UI menggunakan prinsip UX memiliki prinsip yang

yang disebut disebut human-centered.
user-centered. Sebetulnya, Prinsip ini menekankan
prinsip ini pun mirip pada penggunaan
dengan yang dipakai di UX. teori-teori psikologi dan
Hanya saja, user-centered ilmu humaniora lainnya
sifatnya lebih spesifik. Ilmu untuk menciptakan
psikologi dan humaniora produk. Ilmu yang
yang digunakan dimaksud bisa
benar-benar menyasar memprediksi respons
target audiens yang sudah manusia atas suatu hal.
ditentukan. Jadi, Dengan memanfaatkannya,
kemungkinan orang itu produk yang dibikin benar-
menyukai produk yang benar sesuai dengan
dibuat jadi semakin besar. kebiasaan pengguna.

Proses desain riset yang dilakukan olehUI
merupakan riset desain
untuk membuat desain
yang menarik dan sesuai
dengan konsep. Di sini,
desainer UI juga perlu
merancang model desain
Karena berfokus pada user
experience, proses desain
UX berlandaskan riset
pengguna sehingga
mendesain yang
dibutuhkan oleh target
pengguna. Prosesnya pun
 yaitu dengan membuat melalui banyak tahap dan
mockup terlebih dahulu. membutuhkan peran
banyak pihak, salah satu
nya yaitu UX researcher.
Setelah melakukan riset,
desainer merancang sketsa
desain dengan wireframe
dan prototype.

1.4 Design System

Design system merupakan salah satu tahapan proses dalam pembuatan UI, kenapa
desain sistem sangat penting untuk seorang front end? karena desain sistem inilah yang
akan menjadi guideline dalam pembuatan website/aplikasi. Mengambil kutipan dari
Audrey Hacq yang merupakan seorang Design Systems advocate mengatakan "A Design
system is the single of truth which group all the elements that will allow the teams to design,
realize and develop product" dapat di definisikan desain sistem sebagai kumpulan pola
yang saling berhubungan. Desain sistem bersifat bisa digunakan berulang-ulang, serta
bisa digunakan oleh berbagai anggota tim produk digital. Terdapatbeberapa komponen
di dalam desain sistem.

- Style guide

Style guide berisi panduan implementasi khusus, referensi visual, dan prinsip desain
untuk membuat interface atau hasil desain lainnya. Style guide yang paling umum
cenderung berfokus pada branding (warna, tipografi, trademark, logo, dan media cetak),
tetapi style guide juga menawarkan panduan tentang konten (seperti nada suara dan
rekomendasi bahasa) serta desain visual dan interaksi. standar (juga dikenal sebagai
panduan gaya front-end).

- Component Library

Component library atau juga dikenal sebagai design libraries adalah apa yang
dihubungkan banyak orang dengan design systems. Libraries menyeluruh ini menampung
elemen UI yang telah ditentukan sebelumnya dan dapat digunakan kembali serta berfungsi
sebagai one-stop shop bagi desainer dan pengembang untuk mempelajari dan
mengimplementasikan elemen UI tertentu. Membuat libraries ini membutuhkan waktu dan
sumber daya yang signifikan. Di dalam component library biasanya terdapat:
 ● Component name: nama komponen harus spesifik dan unik, untuk menghindari
miskomunikasi antara desainer dan pengembang.
● Description: penjelasan yang jelas tentang apa elemen ini dan bagaimana biasanya
digunakan, kadang-kadang disertai dengan yang harus dan yang tidak boleh
dilakukan untuk konteks dan klarifikasi (negative case).
● Attributes: variabel yang dibuat untuk menyesuaikan atau mengadaptasi
komponen untuk kebutuhan khusus (yaitu, warna, ukuran, bentuk, salinan)
● State: default untuk perubahan tampilan selanjutnya.
● Code Snippet
● Frontend & backend framework: untuk membantu mengimplementasikan sebuah
komponen.

- Pattern Library

Terkadang, istilah 'component library' dan 'pattern library' diartikan secara sama. namun,
ada perbedaan antara kedua jenis libraries ini. Component library menentukan elemen UI
individual, sedangkan pattern library menampilkan kumpulan pengelompokan atau tata
letak elemen UI. Mereka biasanya menampilkan struktur konten, tata letak, dan/atau
template. Sama seperti komponen, pola dimaksudkan untuk digunakan kembali dan
diadaptasi.

2. GIT
Git adalah sistem kontrol versi terdistribusi yang pada dasarnya adalah sistem yang
mencatat perubahan-perubahan pada file kita dari waktu ke waktu (ref). Setiap
perubahan kode program dan siapa saja yang mengubah code (setiap baris code) akan
terdokumentasi dengan baik. Sehingga bila terjadi kesalahan kita bisa membalikan
kode tersebut seperti kodingan kita sebelumnya. Git ini menyimpan log perubahan
kode secara local di satu laptop. Agar bisa berkolaborasi kita membutuhkan repository
untuk menyimpan program tersebut. Adapun layanan repository untuk menyimpan
kode tersebut adalah github. Untuk alternatif lainnya bisa menggunakan bitbucket, dan
gitlab.

Untuk pembahasan kali ini saya akan menggunakan github. Sebelum memulai ada
beberapa yang harus disiapkan yaitu :
1. Git (download dan install)
2. Sudah memiliki akun github/gitlab.

GitLab adalah sebuah perangkat lunak (software) bersifat open-source, yang berarti
source code dari software ini tersedia secara bebas dan dapat dimodifikasi sekaligus
di redistribusi. GitLab ini adalah perangkat lunak yang berfungsi sebagai pengelola
repositori yang memungkinkan para penggunanya berkolaborasi dalam mengerjakan
task atau kode. Dengan software ini, bisa melakukan pelacakan (tracking) dan
mengelola proyek.

Fungsi Gitlab
GitLab sendiri memiliki beberapa fungsi yang berguna untuk meringankan task dari
para developer
• Manage – mengelola proyek dan melihat bagaimana performa bisnis perusahaan
Anda.
• Plan – GitLab menyediakan tool planner agar tim Anda dapat tersinkronisasi.
• Create – Branching tool memungkinkan Anda membuat, melihat dan mengelola
kode.
• Verify – Build-in CI/CD untuk tes terotomasi dan juga reporting.
• Package – membuat supply chain perangkat lunak yang dapat diandalkan dan
terkontrol.
• Secure – GitLab menyediakan fitur yang membuat aplikasi Anda aman dengan
software license compliance.
• Release – CD yang terintegrasi memungkinkan Anda untuk mengantarkan kode
secara otomatis.
• Configure – GitLab memungkinkan Anda untuk mengkonfigurasi aplikasi dan
infrastruktur.
• Monitor – Mengurangi kemungkinan error dan insiden yang terjadi dengan fitur
monitoring.
• Protect – Aplikasi dan infrastruktur Anda akan dijamin keamanannya dengan fitur
keamanan GitLab.
3. HTML
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen
yang dirancang untuk ditampilkan di peramban internet. HTML ditemukan pada tahun
1980 oleh Tim Berners-Lee, dia adalah seorang anggota CERN (Organisasi eropa untuk
riset Nuklir). Tim merilis versi pertama HTML pada tahun 1991, dan di dalamnya
terdiri atas 18 HTML tag. Berkat popularitasnya yang terus meningkat, HTML kini
dianggap sebagai web standard yang resmi. Spesifikasi HTML di-maintain dan
dikembangkan oleh World Wide Web Consortium (W3C).

HTML dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa
scripting seperti JavaScript dan VBScript. Peramban internet menerima dokumen
HTML dari server web atau dari penyimpanan lokal dan membuat dokumen menjadi
halaman web multimedia. HTML menggambarkan struktur halaman web secara
semantik dan isyarat awal yang disertakan untuk penampilan dokumen.

Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung sudut. Tag
seperti <img /> dan <input /> langsung perkenalkan konten ke dalam halaman. Tag
lainseperti <p> mengelilingi dan memberikan informasi tentang teks dokumen dan
mungkin menyertakan tag lain sebagai sub-elemen. Peramban tidak menampilkan tag
HTML, tetapi menggunakannya untuk menafsirkan konten halaman.

3.1 Tag
Karena HTML merupakan bahasa markup, HTML memerlukan cara untuk memberitahu
web browser untuk apa fungsi sebuah text. Apakah teks itu ditulis sebagai sebuah
paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag.

Berikut Struktur HTML yang terdiri dari tiga tag yaitu <html>, <head> dan <body>.

Gambar 1. Struktur HTML

3.2 Elemen

Elemen merupakan sebuah komponen yang menyusun dokumen dalam HTML. Sebuah
dokumen definisikan sebuah elemen jika memiliki tag pembuka, isi lalu penutup tag.
Tetapi tidak semua elemen memiliki tag penutup dan isi. Elemen kadang disebut sebagai
node, karena merupakan salah satu jenis node yang menyusun dokumen HTML dalam
diagram HTML tree.

Gambar 2. Pohon HTML

3.3 Atribut

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa
instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki
pasangan nama dan nilai (value) yang ditulis dengan name=”value”. Value diapit tanda
kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

Gambar 3. Contoh dari atribut di dalam tag img

Dapat dilihat pada gambar 3 tag <img> memiliki atribut src atau source yang berisikan
value sebuah path dari gambar yang akan di render serta atribut alt atau alternatif yang
digunakan untuk memberitahu pengguna jika image tidak dapat di load.
4. CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemrograman.

CSS adalah salah satu bahasa inti dari web terbuka dan distandarisasi di seluruh
browser Web sesuai dengan spesifikasi W3C. Sebelumnya, pengembangan berbagai
bagian spesifikasi CSS dilakukan secara serempak, yang memungkinkan pembuatan
versi dari rekomendasi terbaru.Sama halnya styles dalam aplikasi pengolahan kata
seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,
body text, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan
halaman web yang dibuat dengan bahasa HTML dan XHTML

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

4.1 Implementasi CSS

Terdapat tiga cara utama dalam pengaplikasian CSS, yaitu:
- Inline CSS
Inline CSS digunakan untuk memberikan style pada sebuah tag atau elemen HTML
tertentu dengan cara menambahkan atribut style di dalam tag tersebut. Inline CSS
akan menjadi utama prioritas utama walaupun tag atau elemen tersebut
diberikan style di tempat lain (internal/external).

Gambar 4. inline css

- Internal CSS

Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag

<style> di dalam tag <head>. Cara ini biasanya digunakan bila pemberian style
dimaksudkan hanya untuk satu laman web saja.

Gambar 5. internal css

- External CSS

External CSS ditandai dengan file berekstensi .css dimana file tersebut hanya
berisikan kode-kode style saja. Lalu file tersebut diimpor ke dalam setiap
dokumen HTML dengan cara menambahkan tag <link>. Cara ini paling umum
digunakan oleh para pengembang, karena dengan cara ini memungkinkan untuk
membuat hanya satu style CSS lalu kemudian dapat diterapkan ke semua halaman
website (reusable style).

Gambar 6. external css

4.2 Selector

Lalu pertanyaan selanjutnya bagaimana cara memilih atau mengidentifikasikan elemen

yang ingin diberi gaya (selector). Ada 5 cara utama yang biasa digunakan untuk memilih
elemen yang akan diberi gaya.
- Tag Selector
Selektor tag atau yang biasa di sebut type selector ini akan memilih elemen
berdasarkan nama tag.

Gambar 7. Tag Selector

Dari Gambar 7 ini menandakan bahwa semua tag <p> akan berwarna merah tidak
terkecuali.
- Universal Selector
Universal selector adalah selector yang digunakan untuk memilih semua
elemen yang terdapat pada dokumen HTML. Selector universal biasanya
digunakan untuk mereset default CSS dari browser.

Gambar 8. Universal

Selector Universal selector ditandai dengan

gambar bintang (*).

- Attribute Selector

Selector ini memilih elemen berdasarkan atribut yang dimiliki. Selector ini
hampir sama dengan tag selector.

Gambar 9. Attribute Selector

Dari Gambar 9 di atas menandakan bahwa, setiap elemen input yang memiliki
atribut [type=text] akan diaplikasikan style tersebut.

- Class Selector
Selector ini memilih elemen berdasarkan nama class yang diberikan. Pada elemen
yang ingin dipilih, kita menambahkan atribut class.

Gambar 10. Class Selector

Untuk mengimplementasikan class selector kita hanya perlu menambahkan titik

(.) sebelum nama class.

- ID Selector

Cara pemilihan elemen ID selector tidak jauh berbeda dengan class selector,
 hanya saja ID bersifat unik. Hanya bisa boleh digunakan oleh satu elemen saja.

Gambar 11. ID Selector

Selector ID ditandai dengan tanda pagar (#) di depan value dari atribut ID.

4.3 CSS Flexbox

Flexbox adalah metode tata letak satu dimensi untuk meletakkan item dalam baris atau
kolom. Flexbox sendiri merupakan konsep pengaturan layout yang mengatur ukuran
elemen Anak (child) dari suatu Pembungkus (container/parent) untuk beradaptasi
dengan Pembungkus-nya.

Gambar 12. Komponen flexbox

Flexbox ini akan mengatur ukuran dari elemen anaknya secara otomatis, dan mampu
beradaptasi dengan ukuran container-nya.

4.3.1 Konsep Dasar

Flexbox terdiri dari dua penyusun utama yaitu parent (container) dan child (items).
Container berfungsi sebagai wadah yang menentukan bagaimana item-item di dalamnya
dirender.
 Gambar 13. Konsep dasar flexbox

Flexbox mempunyai sistem koordinat sendiri, yaitu.

- Main Axis : garis utama dari sebuah container yang menentukan urutan dari
penempatan items secara horizontal.
- Cross Axis : garis utama dari sebuah container yang menentukan urutan dari
penempatan items secara vertikal.
- Main Start / Main End : mulai dan berakhirnya items yang di simpan dalam

container.

Flex item berdiri pada suatu garis yang disebut flex line. Flex line dapat horizontal maupun
vertikal tergantung penentuan di properti flex direction. Pada dasarnya item yang dibuat
akan berada sepanjang garis flex line dari main-start ke main-finish atau daricross-start ke
cross-finish.

4.3.2 Properti
Flexbox memiliki beberapa properti utama untuk mengatur item yang berada dalam

container agar sesuai dengan layout yang kita inginkan.

- Display
Untuk membuat komponen tersebut menjadi flexbox kita hanya perlu menambahkan

display: flex; atau inline-flex dan inline-flexbox.

 Gambar 14. Untuk membuat sebuah komponen menjadi
flexbox

- Flex Direction
Properti ini digunakan untuk menentukan arah yang akan diberlakukan untuk item-item
yang ada pada kontainer flexbox. Arah yang dimaksud adalah apakah ingin mengubah
arah default yaitu horizontal (dari kiri ke kanan) menjadi vertikal (dari atas ke bawa).

Gambar 15. flex-direction

- Flex-wrap
Properti ini membuat membuat item yang keluar dari batas kontainernya berpindah ke
bawah atau baris selanjutnya. Flex-wrap hanya berfungsi jika item item di dalam
kontainer sudah melebihi batas atau diatas satu baris.

Gambar 16. flex-Wrap

- Justify Content
Properti ini digunakan untuk mensejajarkan antara item yang satu dengan yang lain di
dalam kontainer agar dapat terdistribusi secara merata disetiap ruang kosong yang
tersedia.
 Gambar 17. justify content

- Align Items
Sama halnya dengan justify content, align items mendefinisikan posisi antar item-item
pada kontainer hanya saja sepanjang garis tegak lurus (vertikal).

Gambar 18. align items

- Align Content
Properti ini digunakan untuk mensejajarkan item-item diantara flexbox agar container
dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex
dalam satu kolom atau secara vertikal dengan syarat items lebih dari 1 baris.

Ggambar 19. align content

5. CSS Framework: Bootstrap
Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus untuk
mengembangkan serta mempermudah pembuatan sebuah Website. Bootstrap
merupakan salah satu framework CSS, HTML, Javascript yang cukup terkenal. open-source
khusus front end yang dibuat oleh Mark Otto dan Jacob Thornton.

Gambar 20. button

Perbedaan paling mendasar antara CSS yang tidak menggunakan framework dengan
bootstrap ialah cara membuat sebuah komponen.
Untuk membuat tombol seperti yang terdapat pada Gambar dibawah ini, bootstrap
hanya perlu menambahkan atribut class pada elemen tombol tersebut dengan value btn
dan btn-primary.

Gambar 21. implementasi bootstrap

Sedangkan jika kita menggunakan CSS yang tidak menggunakan framework, kita harus
membuat gaya untuk tombol tersebut secara manual.

Gambar 23. implementasi pada css

Terlihat jelas perbedaan antara bootstrap dengan CSS yang tidak menggunakan
 framework. dengan menggunakan CSS yang tidak menggunakan framework kita perlu
menuliskan beberapa line kode sedangkan jika menggunakan bootstrap kita hanya perlu
menambahkan atribut class dan value yang sesuai dengan dokumentasi tersedia untuk
membuat komponen yang sama.

Dengan menggunakan bantuan CSS Framework akan mempermudah dan mempercepat

pekerjaan kita. Bootstrap menyediakan banyak sekali bantuan seperti pembuatan layout,
komponen seperti button, accordion, card, dropdown dll. Namun seperti tools atau
framework lain bootstrap juga memiliki kelebihan dan kekurangannya.

Kelebihan Kekurangan

Dapat mempercepat pembuatan website Akan ada overrides atau rewrite jika
desain tidak sama dengan komponen
yang ada di bootstrap.

Tampilan website menjadi lebih menarik Setiap website yang menggunakan

Bootstrap akan terlihat serupa.

Open source (gratis) Javascript menggunakan jquery yang

mana sudah tidak banyak digunakan.
Ringan dan dapat disesuaikan

Mempunyai grid system

Ada beberapa CSS Framework lain yang cukup terkenal juga seperti foundation, bulma,
semantic UI, UIkit, pure dll. Semua kembali lagi sesuai dengan kebutuhan development
dan developer.

6. Javascript

JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar
lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS, nah
sekarang kamu jadi tahu bahwa JavaScript dapat meningkatkan fungsionalitas pada halaman
web. Bahkan dengan JavaScript ini kamu bisa membuat aplikasi, tools, atau bahkan game
pada web.
 Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis
interpreter, sehingga kamu tidak memerlukan compiler untuk menjalankannya. JavaScript
memiliki fitur-fitur seperti berorientasi objek, client-side, high-level programming, dan
loosely typed.

JavaScript menjadi salah satu bahasa pemrograman yang sangat populer. Mengapa? Di tahun
2016 saja sudah ada sekitar 92% pembuatan web menggunakan JS, apalagi di tahun-tahun
sekarang. Tentunya web yang dibuat dengan JS akan lebih dinamis dan interaktif. Banyak
perusahaan top global yang sudah mengimplementasikan JS sebagai bahasa pemrograman
andalannya. Kita bisa buktikan juga bahwa JS itu populer dan menjadi bahasa yang paling
banyak digunakan di Github.

6.1 Fungsi dan Keunggulan JavaScript

Selain membuat web jadi lebih dinamis dan interaktif, JS digunakan juga untuk proses logika
data. Fungsi JS tidak hanya soal urusan front end, tapi juga sekaligus dipakai untuk urusan
back end. Adapun keunggulan dari JavaScript diantaranya :
• General Purpose
Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu
kamu bisa mengembangkan back-end (server), console, program desktop, mobile, IoT,
game, dan lainnya menggunakan JavaScript.
• Mudah untuk Dipelajari
Setiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan
bisa dilihat dari beberapa faktor. Syntax atau penulisan jadi salah satu factor pula.
Contohnya dibawah ini perbedaan syntax antara Bahasa C++ dan JavaScript

Gambar 24. Penulisan Bahasa C++

Gambar 25. Penulisan Bahasa JavaScript

 • Sangat Powerfull
Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-
handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua oleh
JavaScript.
• Dukungan Komunitas
JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal
penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika sedang
mengembangkan sebuah aplikasi, serta menemukan bug. Dengan dukungan komunitas
yang baik, maka akan lebih mudah untuk menemukan solusi dari bug tersebut.

6.2 Dasar Pemrograman Javascript

6.2.1 Statement
Statement adalah sebuah sintaks dan perintah yang akan menjalankan aksi. Statement dapat
digunakan sebanyak apapun di dalam code sesuai dengan kebutuhan kita. Statement satu
dengan yang lainnya akan dipisahkan dengan simbol titik koma ; . Contoh statement adalah
sebagai berikut:
console.log("Hello"); console.log(“World");

Biasanya, setiap statement akan ditulis dalam baris yang berbeda untuk mempermudah
pengguna untuk membaca code tersebut:

console.log(“Hello"); console.log(“World");

6.2.2 Comment
Seiring berjalannya waktu, program yang dibuat akan menjadi lebih kompleks. Menambahkan
comment menjadi diperlukan untuk menjelaskan apa yang dikerjakan oleh code yang telah
ditulis sebelumnya. Apapun dapat ditulis di dalam comment karena komputer akan dengan
otomatis tidak memperdulikan apa yang ditulis di dalam comment.
Comment dalam satu baris dimulai dengan dua simbol garis miring // . Contoh comment
adalah sebagai berikut:
// Semua yang ada di baris ini adalah comment

console.log(“Hello"); console.log("World"); // Comment ini dimulai setelah

statement
 Comment yang ditulis dalam beberapa baris dimulai dengan simbol berikut /* dan diakhiri
dengan simbol berikut */ . Sebagai contoh:
/* Semua yang berada di antara ini
merupakan comment yang tidak akan
dieksekusi oleh komputer */
console.log(“Hello World”);
6.2.3 Variable
Dalam sebuah program Javascript, program tersebut harus bekerja dengan informasi.
Contohnya:
• Toko Online - Informasi yang mungkin dibutuhkan adalah barang yang dijual dan harganya.
• Aplikasi chat - Informasi yang mungkin dibutuhkan adalah data pengguna, pesan yang
dikirimkan, dll.
Variable digunakan untuk menyimpan informasi-informasi ini. Variable adalah “tempat
penyimpanan dengan nama” untuk menyimpan data. Variable dapat digunakan untuk
menyimpan data barang, pengunjung, dan data-data lainnya.
Untuk membuat variable di dalam Javascript, gunakan kata kunci let :
let message;

Setelah itu, variable tersebut dapat diisi dengan data dengan menggunakan operator =
let message; message = "Hello"; //

menyimpan kata Hello

Kata tersebut telah disimpan ke dalam memory yang terhubung dengan variable tersebut. Kita
dapat mengakses kembali kata tersebut dengan menggunakan nama variable yang telah
dibuat sebelumya:
let message;

message = "Hello"; console.log(message); //

menunjukkan isi dari variable

Agar lebih ringkas, kita dapat menggabungkan kedua statement awal untuk membuat variable
dengan lebih cepat:
 let message = "Hello"; // membuat variable dan langsung menyimpan data ke dalam
variable tersebut console.log(message);

6.2.4 Tipe Data

Sebuah data dalam Javascript pasti memiliki sebuah tipe, seperti string atau number. Terdapat
6 tipe data dasar yang ada di Javascript. Disini, kita akan membahas setiap tipe data tersebut.
6.2.4.1 Number
let num = 123;

num = 12.345;

Tipe data Number merepresentasikan angka, termasuk bilangan bulat dan bilangan
desimal. Tipe data ini mendukung operasi-operasi yang berhubungan dengan angka,
seperti penjumlahan +, pengurangan -, perkalian *, pembagian /, dll.
let num = 10 + 14;

console.log(num): // 24

6.2.4.2 String

let str = "Hello"; let str2 = 'Single

quote string’;

Tipe data String merepresentasikan tulisan atau rangkaian karakter. Untuk membuat
variable dengan tipe string, kita harus menggunakan tanda kutip sebelum dan sesudah kata
atau kalimat yang ingin kita gunakan.

6.2.4.3 Boolean
Tipe data Boolean hanya merepresentasikan 2 nilai, yaitu true atau false. Contohnya:
let nameFieldChecked = true;

let ageFieldChecked = false;

Tipe data boolean juga sering digunakan sebagai hasil perbandingan nilai:
let isGreater = 4 > 1;

console.log(isGreater); // true
 6.2.4.4 Null
Tipe data Null merupakan salah satu tipe data yang spesial. Tipe data ini hanya
merepresentasikan 1 jenis nilai saja, yaitu null yang berarti “tidak ada”, “kosong” atau
“tidak diketahui”.
let age = null;

Code diatas menyatakan bahwa isi dari variable age tidak diketahui.

6.2.4.5 Undefined
Tipe data Undefined merupakan tipe data yang spesial juga. Arti dari tipe data ini adalah
“data belum dimasukkan”. Semua variable yang belum diberikan nilai akan memiliki tipe
data ini.
let age; console.log(age); // undefined

6.2.4.6 Object
Tipe data Object adalah sebuah tipe yang spesial. Tipe-tipe data yang lain disebut dengan
tipe data primitive dikarenakan hanya mampu menampung satu tipe data tertentu.
Sedangkan tipe data Object mampu menyimpan banyak nilai dan data yang lebih kompleks.
Penjelasan lebih detail tentang tipe data Object ini akan dibahas lebih dalam di dalam topik
selanjutnya.

6.2.5 Conditional Statement

Pada saat-saat tertentu, kita harus melakukan aksi yang berbeda tergantung dengan
kondisi yang berbeda-beda. Untuk melakukan hal ini kita bisa menggunakan statement if
6.2.5.1 If Statement
*Statement* if(…) melihat hasil perbandingan yang berada di dalam tanda kurung, dan
ketika hasilnya adalah true maka melanjutkan dengan mengeksekusi sebuah block code.
Contoh:
let year = 2015; if (year == 2015)

console.log("You are right!”);

 Dari contoh code diatas, kondisi yang di cek adalah sebuah perbandingan yang sederhana
yaitu (year == 2015). Tapi ini tidak menutup kemungkinan untuk menggunakan
perbandingan yang lebih kompleks.

Ketika kita ingin mengeksekusi lebih dari 1 statement, kita harus membungkus code di
dalam kurung kurawal.
if (year == 2015) { console.log("You
are right!"); console.log("It is the
year 2015");
}

Kita juga bisa menggunakan variable boolean untuk digunakan di dalam if statement.
let cond = (year === 2015);
if (cond) {
...

6.2.5.2 Else Statement

Statement if boleh mempunyai blok else. Kode yang ada di dalam blok else akan dieksekusi
ketika kondisi yang ada di dalam if bernilai false.

let year = 2015; if (year ==

2015) { console.log("You are
right!");
} else {

console.log("You are so wrong"); // akan dieksekusi ketika variable year

!= 2015

}
 6.2.5.3 Else If Statement
Pada saat tertentu, kita ingin meng-cover beberapa kondisi. Kita bisa menggunakan
statement else if.

let year = 2015; if (year < 2015) { console.log("Too early"); // akan

dieksekusi ketika year < 2015
} else if (year > 2015) { console.log("Too late"); // akan dieksekusi
ketika year > 2015
} else {

console.log("Exactly!"); // akan dieksekusi ketika year tidak memenuhi 2

kondisi diatas

7. Koneksi PHP dengan My SQL

Untuk koneksi PHP dengan MySQL dapat diakses melalui laman

https://www.youtube.com/watch?v=Uq7LrSKbpGk
Link Referensi Modul

1. https://en.wikipedia.org/wiki/HTML
2. https://bitlabs.id/blog/perbedaan-ui-dan-ux/
3. https://developer.mozilla.org/en-US/docs/Web/HTML
4. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
5. https://id.wikipedia.org/wiki/Cascading_Style_Sheets
6. Intro to JS (javascript.info)