WEB SERVER sebelum mempelajari web development lebih

lanjut.
Apa itu Web Server? Web Server adalah
perangkat lunak (dan kadang perangkat keras) Arsitektur web server adalah struktur yang
yang berfungsi menerima permintaan dari menjelaskan bagaimana komponen dalam
pengguna melalui browser, lalu mengirimkan sistem web saling berinteraksi untuk
kembali jawaban berupa halaman web memproses permintaan dari pengguna hingga
menghasilkan respons yang diinginkan.
Komponen Utama Arsitektur Web Server
Komponen Utama Arsitektur Web Server:
1. Client (Browser)
1) Client (Browser) Mengirim permintaan
2. Internet / Jaringan
HTTP ke server.
3. Web Server (Apache, Nginx) 2) Web Server Menerima permintaan
dan mengarahkan ke sumber daya yang
4. Application Server (PHP, Python, [Link]) sesuai.
5. Database Server (MySQL, PostgreSQL) 3) Application Server Memproses logika
aplikasi dan interaksi data
6. Response (HTML, CSS, Gambar, Video) 4) Database Server Menyimpan dan
Alur Kerja Sederhana mengelola data yang dibutuhkan aplikasi

User mengetik alamat web di browser. 2.

Permintaan dikirim melalui internet ke Web
Server. 3. Web Server memproses (langsung
atau lewat Application Server & Database). 4.
Hasil (halaman web) dikirim kembali ke
browser. 5. Browser menampilkan halaman
web ke user.

Ilustrasi Arsitektur Web Server

Arsitektur Web Server memungkinkan

pengguna mengakses website melalui browser
dengan bantuan jaringan, server aplikasi, dan
database. Pemahaman ini menjadi dasar Kesimpulan Arsitektur web server terdiri dari
beberapa lapisan yang bekerja bersama untuk
memastikan permintaan pengguna dapat bertugas menciptakan antarmuka pengguna
diproses secara efisien dan aman. Pemahaman (User Interface) yang menarik, mudah
arsitektur ini penting untuk pengembangan dan digunakan, dan mudah diakses. Tugas utamanya
pengelolaan sistem web modern. adalah merancang dan mengembangkan
tampilan visual aplikasi atau website,
memastikan elemen seperti tombol, menu,
form, dan ikon berfungsi dengan baik serta
memberikan pengalaman pengguna yang
intuitif. Front End Developer menggunakan
teknologi seperti HTML, CSS, dan JavaScript
untuk membuat antarmuka yang dinamis dan
responsif. Secara keseluruhan, Front End
Developer bertanggung jawab menciptakan
pengalaman pengguna yang optimal lewat
tampilan yang menarik, fungsional, dan mudah
digunakan.

Komponen Utama Desain Front End

HTML (HyperText Markup Language)

adalah bahasa markup standar yang
mendefinisikan struktur semantik dan konten
dari sebuah halaman web. Ia menggunakan tag
untuk menganotasi elemen-elemen seperti
judul, paragraf, dan tautan. Secara analogi,
HTML adalah fondasi dan kerangka rumah yang
menentukan di mana letak kamar, pintu, dan
jendela.

CSS (Cascading Style Sheets) adalah

bahasa stylesheet yang digunakan untuk
(Contoh arsitektur web server) mengatur presentasi visual dari dokumen
Front End Development adalah proses HTML. CSS mengontrol layout, warna, dan
pengembangan web yang berfokus pada tipografi, memisahkan tampilan dari struktur.
tampilan dan interaksi pengguna di aplikasi atau Ini adalah cat, wallpaper, dan furnitur di dalam
website. Bagian ini meliputi desain halaman, rumah. CSS tidak mengubah struktur, tetapi
navigasi, tombol, serta konten yang bisa dilihat menentukan estetika dan suasananya.
dan diakses melalui browser. Pengembang JavaScript (JS) adalah bahasa scripting
front-end bertugas memastikan pengalaman high-level yang memungkinkan perilaku dinamis
visual dan fungsi yang langsung dirasakan oleh dan interaktivitas di sisi klien (browser). Ia
pengguna berjalan dengan baik. Front End = memanipulasi Document Object Model (DOM)
tampilan yang dilihat pertama kali oleh dan menangani event dari pengguna. Ini adalah
pengguna. sistem listrik, pipa air, dan bel pintu. JS
Front End Developer memegang peran membuat rumah "hidup" dan fungsional,
penting dalam tim pengembangan web, yaitu
seperti saat akan menyalakan lampu atau Database Layer adalah sistem perpipaan dan
membuka pintu garasi. fondasi utilitas (seperti listrik dan air) yang
tersembunyi di dalam dinding dan di bawah
Konsep Desain UI dan UX
lantai. Penghuni memang tidak melihat cara
UI Design adalah titik interaksi dan kerjanya secara langsung, tetapi sistem inilah
presentasi visual antara pengguna dan sistem yang secara efisien menyimpan (air di tangki)
digital. Ini adalah aset grafis aktual yang dilihat dan menyalurkan (air ke keran) sumber daya
dan disentuh pengguna, mencakup layout, palet yang dibutuhkan oleh ruangan lain saat diminta.
warna, tipografi, dan elemen interaktif seperti
tombol dan slider. Fokus utamanya adalah pada
estetika (tampilan dan nuansa) dan konsistensi
visual antarmuka. Dalam analogi rumah, UI
adalah gaya furnitur, warna cat dinding, dan
model gagang pintu yang akan dipilih.

User Experience UX Research adalah

persepsi dan respons holistik pengguna yang
dihasilkan dari penggunaan suatu produk atau
layanan. Ini mencakup seluruh perjalanan
pengguna, termasuk usability (kegunaan),
accessibility (aksesibilitas), arsitektur informasi,
dan efisiensi alur kerja untuk mencapai tujuan.
UX berfokus pada rasa (feel) dan efektivitas dari
keseluruhan interaksi. UX adalah pengalaman
tinggal di dalam rumah itu: seberapa logis tata
letak ruangannya dan apakah mudah
menemukan saklar lampu dalam gelap.
1. Fitur alat bantu untuk desain yang
Arsitektur Database Layer adalah komponen
konsisten namun berkembang
dalam multi-tier architecture (arsitektur
Berdasarkan perbandingan desain 1999 dan
berlapis) yang secara spesifik meng-enkapsulasi
2024, alat bantu (tools) modern harus
logika akses data dan
memiliki fitur-fitur berikut untuk menjaga
interaksi langsung dengan sistem manajemen konsistensi sekaligus kemudahan evolusi:
database (DBMS). Layer ini bertanggung jawab  Sistem Komponen (Component-
untuk mengeksekusi query (seperti SQL), Based System): Kemampuan untuk
mengambil (fetch), dan menyimpan (persist) membuat elemen UI yang dapat
data, berfungsi sebagai jembatan antara digunakan kembali (seperti tombol,
application layer (logika bisnis) dan physical product card, navbar). Saat satu
data storage. komponen diperbarui, semua
instansinya di seluruh situs akan
Tujuan utamanya adalah untuk mengabstraksi ikut berubah. Ini menjaga
operasi data dari logika bisnis, sehingga konsistensi.
meningkatkan modularitas dan memudahkan  Global Styling / Design Tokens: Fitur
pemeliharaan sistem. Secara analogi, jika untuk mendefinisikan variabel
keseluruhan aplikasi adalah rumah, maka global untuk properti desain,
 seperti warna primer, jenis font,  Pemrograman Back-End:
dan spasi. Ini memungkinkan Mengelola server, database,
perubahan tema atau branding dan logika aplikasi yang
secara cepat di seluruh situs hanya berjalan "di balik layar"
dengan mengubah satu nilai. (misalnya, memproses
 Template dan Layout: Menyediakan pembayaran, otentikasi
kerangka halaman (template) yang pengguna, mengambil data
konsisten untuk berbagai jenis produk).
konten (misalnya, halaman produk, Singkatnya: Desain Front-End adalah
halaman kategori). tentang merancang tampilan,
 Version Control (Kontrol Versi): sedangkan Pemrograman Web (Front-
Integrasi dengan sistem seperti Git End) adalah tentang membangun
untuk melacak setiap perubahan tampilan tersebut dengan kode.
desain, memungkinkan tim untuk 3. Komponen utama desain web awal
bereksperimen dengan fitur baru (gambar 1999)
(berkembang) tanpa merusak Berdasarkan gambar situs Amazon tahun
desain utama yang sudah stabil. 1999, komponen utama desainnya adalah:
2. Perbedaan Desain Front-End dan 1) Header (Kepala Situs): Berisi elemen
Pemrograman Web identitas utama seperti logo
Ini adalah dua hal yang berbeda namun ("[Link]") dan Search Bar (bilah
saling terkait erat: pencarian) yang fungsional.
1) Desain Front-End (UI/UX Design): Ini 2) Navigasi Utama (Primary Navigation):
adalah proses merancang tampilan Ini adalah komponen dominan di sisi
visual dan pengalaman pengguna (User kiri halaman (sidebar). Ini adalah daftar
Experience/UX). Fokusnya adalah pada tautan (links) berbasis teks yang sangat
bagaimana situs web terlihat (estetika, padat, diorganisir secara hierarkis
layout, warna, tipografi) dan berdasarkan kategori produk (misalnya
bagaimana rasanya saat digunakan "Books," "Music," "Video"). Ini adalah
(alur navigasi, kemudahan cara utama pengguna menjelajahi
penggunaan). Hasilnya biasanya situs.
berupa mockup atau prototipe statis. 3) Area Konten Utama (Main Content
2) Pemrograman Web: Ini adalah proses Area): Bagian tengah halaman yang
teknis untuk membangun situs web digunakan untuk promosi (misalnya
agar fungsional. Ini mengubah desain "Amazon Appstore," "Kindle") dan
statis menjadi situs web yang hidup menampilkan produk yang sedang tren
dan interaktif. Pemrograman web itu atau direkomendasikan ("What Other
sendiri umumnya dibagi menjadi dua: Customers Are Looking At").
 Pemrograman Front-End: 4. Perkembangan aspek navigasi (1999 vs
Menggunakan HTML (struktur), 2024)
CSS (tampilan), dan JavaScript Navigasi di situs Amazon telah berevolusi
(interaktivitas) untuk secara drastis menjadi lebih ramah
membangun sisi yang dilihat pengguna:
dan diinteraksikan oleh  Dari Teks-Padat ke Visual: Desain 1999
pengguna di browser mereka. sangat bergantung pada navigasi
 sidebar kiri yang padat teks. Pengguna 1) Dominasi Perangkat Mobile: Sebagian
harus membaca daftar kategori yang besar pengguna internet saat ini
panjang. Desain 2024 menggunakan mengakses web melalui smartphone.
navigasi visual berbasis gambar dan Tanpa desain responsif, situs web akan
ikon (misalnya "Gaming store," "Home sulit digunakan di HP (harus zoom,
decor"). Ini lebih cepat dipindai dan scroll ke samping, dll), memberikan
lebih intuitif. pengalaman pengguna (UX) yang
 Struktur yang Terkurasi: Desain 1999 buruk.
menampilkan hierarki kategori yang 2) Meningkatkan SEO: Mesin pencari
dalam dan rumit. Desain 2024 seperti Google memprioritaskan situs
mengelompokkan navigasi secara logis yang mobile-friendly dalam hasil
ke dalam card yang lebih besar dan pencarian mereka. Jika situs Anda tidak
terkurasi (misalnya "Gaming responsif, peringkat SEO Anda bisa
accessories," "Top categories in turun.
Kitchen"), yang jauh lebih mudah 3) Efisiensi Pengembangan: Daripada
dicerna. membuat dan memelihara dua situs
 Penggunaan Ruang Kosong web terpisah (satu untuk desktop, satu
(Whitespace): Desain 2024 untuk mobile), Anda hanya perlu
menggunakan lebih banyak ruang mengelola satu basis kode (codebase)
kosong, membuat antarmuka (UI) yang sama untuk semua perangkat.
"bernafas," tidak terlalu penuh sesak, 6. Mengapa HTML merupakan Hypertext
dan mengurangi beban kognitif HTML adalah singkatan dari HyperText
pengguna. Desain 1999 sangat padat Markup Language. Disebut "Hypertext"
informasi. karena alasan utamanya:
 Fokus pada Pencarian (Search-First):  Hypertext adalah teks yang berisi
Meskipun search bar ada di kedua tautan (links) ke dokumen atau teks
versi, desain modern lain. Ini berbeda dari "teks biasa"
menempatkannya secara lebih (seperti di buku) yang dibaca secara
menonjol, menyadari bahwa banyak linear dari awal sampai akhir.
pengguna lebih suka mencari langsung  Fitur inti dari HTML adalah
daripada menjelajahi kategori. kemampuannya untuk membuat
5. Responsive Design (Desain Responsif) hyperlinks menggunakan tag <a>
Apa itu? Responsive Design adalah sebuah (anchor). Tautan inilah yang
pendekatan dalam pengembangan front- memungkinkan pengguna untuk
end di mana desain dan layout sebuah situs "melompat" secara non-linear dari satu
web dapat secara otomatis beradaptasi halaman web ke halaman web lainnya,
agar terlihat bagus dan berfungsi dengan atau ke bagian lain di halaman yang
baik di berbagai ukuran layar—mulai dari sama.
smartphone kecil, tablet, hingga monitor Kemampuan untuk saling menghubungkan
desktop yang besar. Hal ini biasanya dicapai dokumen-dokumen inilah yang membentuk
dengan menggunakan flexible grids (kisi-kisi "jaringan" (Web) dari World Wide Web, dan
fleksibel), gambar yang fleksibel, dan CSS itu semua dimungkinkan oleh konsep
media queries. hypertext yang diimplementasikan dalam
Mengapa penting? HTML.