Front-End Components

Komponen utama front-end

A. HTML

Komponen paling dasar dan paling penting dari front end aplikasi web adalah HTML (HyperText Markup Language). HTML adalah dasar dari setiap halaman web di internet. Di dalamnya terdapat elemen-elemen seperti judul halaman, form, gambar, paragraf, dan masih banyak lagi. Browser akan membaca dan menampilkan elemen-elemen ini ke pengguna.

Contoh HTML sederhana:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>A Heading</h1>
        <p>A Paragraph</p>
    </body>
</html>

Hasilnya akan terlihat seperti ini:

Struktur HTML

Struktur HTML berbentuk seperti pohon (tree), mirip seperti XML:

document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p

Artinya:

html adalah akar utama
head berisi metadata seperti judul halaman
body berisi isi utama seperti heading (<h1>) dan paragraf (<p>)

Contoh pembacaan struktur elemen:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>A Heading</h1>
    <p>A Paragraph</p>
  </body>
</html>

Setiap elemen HTML:

Dibuka dengan tag seperti <p> dan ditutup dengan </p>
Bisa punya atribut seperti id atau class untuk keperluan styling atau scripting, misalnya:

<p id="para1">...</p> atau <p class="red-text">...</p>

URL Encoding

Salah satu konsep penting dalam HTML adalah URL Encoding atau percent-encoding.

Browser hanya bisa menggunakan karakter ASCII dalam URL, jadi karakter khusus harus dikodekan. Misalnya:

Spasi jadi %20 atau +
Tanda kutip ' jadi %27

Contoh karakter encoding:

Karakter

Encoding

space

%20

!

%21

"

%22

#

%23

$

%24

%

%25

&

%26

'

%27

(

%28

)

%29

Lihat tabel lengkap di sini.

Untuk latihan encode/decode karakter, kamu bisa gunakan:

Online URL Encoder/Decoder
Burp Suite juga menyediakan fitur ini di tab "Decoder"

Elemen dalam HTML

Berikut beberapa elemen penting dalam HTML:

<head>: berisi elemen yang tidak tampil langsung, seperti <title>, <meta>, <style>, dan <script>
<body>: berisi semua elemen yang ditampilkan di halaman
<style>: menyimpan kode CSS
<script>: menyimpan kode JavaScript

Setiap elemen HTML disebut sebagai bagian dari DOM (Document Object Model).

Menurut W3C:

"DOM adalah antarmuka standar yang memungkinkan program/script untuk mengakses dan mengubah isi, struktur, dan gaya dari dokumen secara dinamis."

Tiga bagian utama DOM:

Core DOM: untuk semua jenis dokumen
XML DOM: khusus dokumen XML
HTML DOM: khusus dokumen HTML

Contoh:

document.head mengacu ke bagian <head>
document.body mengacu ke <body>, dst.

Kenapa DOM Penting?

Dengan memahami struktur DOM:

Kita bisa menelusuri dan menganalisis elemen tertentu dari halaman web
Kita bisa mencari celah keamanan (misalnya untuk serangan XSS)
Kita bisa menambahkan atau memanipulasi elemen dengan JavaScript

DOM sangat berguna untuk:

Bug hunting pada sisi front end
Code review
Eksploitasi client-side

B. Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) adalah bahasa pemrograman gaya (stylesheet) yang digunakan bersama HTML untuk mengatur tampilan elemen-elemen HTML. Seperti HTML, CSS juga memiliki beberapa versi, dan setiap versi baru membawa fitur tambahan yang semakin memperkaya kemampuan styling. Browser juga diperbarui agar bisa memahami fitur-fitur terbaru CSS.

Contoh Dasar

Secara sederhana, CSS digunakan untuk menentukan tampilan elemen HTML berdasarkan tag, class, atau ID tertentu. Misalnya kita bisa mengatur warna latar belakang, warna teks, ukuran font, jenis huruf, dan perataan teks.

Contoh kode CSS:

body {
  background-color: black;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: helvetica;
  font-size: 10px;
}

Inilah sebabnya kita sering memberi elemen HTML class atau id agar bisa kita atur tampilannya melalui CSS atau manipulasi via JavaScript.

Sintaks CSS

CSS menulis aturan gaya dalam format:

selector {
  property: value;
}

Misalnya:

p {
  color: blue;
  font-size: 14px;
}

Kamu bisa mengatur ratusan properti seperti:

height, width
margin, padding
border, background
font-size, font-family, color
position, z-index, display
dan banyak lagi

CSS untuk Animasi

CSS juga bisa digunakan untuk animasi mulai dari yang sederhana (seperti fade in/out) sampai efek 3D kompleks. Beberapa properti animasi:

@keyframes
animation-name
animation-duration
animation-timing-function
transition

Contoh dan demo bisa dilihat di W3Schools: CSS Animations

Integrasi CSS dan JavaScript

CSS sering digunakan bersama JavaScript untuk:

Mengatur gaya elemen secara dinamis
Menanggapi event (seperti klik, hover, atau gerakan mouse)
Membuat animasi interaktif

Contoh menarik: “Parallax Depth Cards” oleh Andy Merskin di CodePen — efek visual interaktif berbasis HTML, CSS, dan JavaScript.

CSS dalam Platform Lain

CSS juga bisa digunakan di luar HTML, misalnya:

Mengatur tampilan file XML
Mengatur style elemen SVG
Digunakan dalam pengembangan UI aplikasi mobile modern

CSS Frameworks

Menulis CSS secara manual bisa jadi rumit dan memakan waktu. Karena itu, banyak framework CSS yang tersedia untuk mempercepat proses styling dan membuat tampilan web yang konsisten dan responsif.

Framework ini biasanya sudah menyediakan:

Sistem grid
Komponen siap pakai (button, navbar, modal, dll)
Responsif untuk semua perangkat
Integrasi dengan JavaScript

Contoh framework CSS populer:

Bootstrap – paling banyak digunakan
SASS – CSS dengan fitur variabel dan nesting
Foundation – mirip Bootstrap, namun lebih ringan
Bulma – clean dan berbasis Flexbox
Pure – sangat ringan dan modular

C. JavaScript

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. Bahasa ini banyak digunakan untuk pengembangan web dan aplikasi mobile. Biasanya dijalankan di sisi front end (dalam browser), tetapi juga bisa digunakan di sisi back end, misalnya dengan menggunakan NodeJS.

Jika HTML dan CSS menentukan tampilan halaman web, maka JavaScript berfungsi untuk menjalankan logika interaktif. Tanpa JavaScript, halaman web hanya menjadi halaman statis tanpa fungsionalitas dinamis.

Contoh Dasar

JavaScript ditulis di dalam tag <script>. Contohnya:

<script type="text/javascript">
  // kode JavaScript di sini
</script>

Atau bisa juga memuat file JavaScript eksternal:

<script src="./script.js"></script>

Contoh kode sederhana JavaScript:

document.getElementById("button1").innerHTML = "Changed Text!";

Kode di atas akan mengubah isi elemen HTML dengan ID button1.

Untuk mencoba JavaScript langsung secara online, kamu bisa pakai:

JSFiddle — bisa digunakan untuk eksperimen HTML, CSS, dan JavaScript.

Perlu dicatat: dibandingkan HTML dan CSS, sintaks JavaScript lebih kompleks dan membutuhkan pemahaman logika pemrograman.

Penggunaan JavaScript

JavaScript digunakan untuk banyak hal dalam aplikasi web, seperti:

Mengubah tampilan halaman secara real-time
Mengisi atau memperbarui konten tanpa perlu reload
Menerima dan memproses input pengguna (form, tombol, dll)
Mengirim & menerima data dari backend menggunakan AJAX

JavaScript juga sering dipakai bersama CSS untuk membuat animasi kompleks dan tampilan dinamis yang tidak mungkin dicapai dengan CSS saja.

Semua browser modern punya mesin JavaScript sendiri yang bisa menjalankan kode langsung di sisi pengguna (client-side) tanpa perlu bantuan server. Ini membuat JavaScript sangat cepat dan efisien untuk tugas-tugas interaktif.

Framework JavaScript

Membuat aplikasi web besar dengan JavaScript murni (pure JS) bisa sangat merepotkan dan tidak efisien. Oleh karena itu, banyak framework JavaScript diciptakan untuk mempercepat pengembangan aplikasi.

Framework ini biasanya menyediakan:

Komponen siap pakai (form, tombol, navigasi)
Routing (perpindahan halaman tanpa reload)
Manajemen data
Pengolahan state dinamis
Integrasi dengan backend/API

Framework JavaScript populer (frontend):

Angular – dikembangkan oleh Google
React – dikembangkan oleh Meta (Facebook)
Vue – ringkas dan mudah digunakan
jQuery – library ringan untuk manipulasi DOM (lebih populer dulu, sekarang mulai jarang dipakai di proyek modern)

Perbandingan berbagai framework bisa kamu lihat di:

Comparison of JavaScript frameworks

PreviousFront-End vs. Back-End NextFront-End Vulnerability Examples

Last updated 1 month ago