Back to IF3110 Pengembangan Aplikasi Berbasis Web

Topic

Questions/Cues

  • Apa itu Web Stack?

  • Apa saja komponen utama Web Stack?

  • Apa saja contoh Web Stack yang populer?

  • Apa itu Server-Side Scripting?

  • Apa saja 4 aspek utama Server-Side?

  • Bagaimana cara kerja Routing?

  • Apa fungsi dari Templating?

  • Bagaimana alur pemrosesan form?

Reference Points

  • Slides 1-14

Apa itu Web Stack?

Web Stack adalah kumpulan lapisan teknologi software yang dibutuhkan untuk membangun dan menjalankan sebuah aplikasi web. Ini mencakup semua komponen mulai dari sistem operasi di level terendah hingga framework di level tertinggi. Analogi sederhananya adalah seperti fondasi dan kerangka sebuah rumah; Anda memerlukan semua bagian ini agar rumah bisa berdiri dan berfungsi.

Komponen dan Contoh Web Stack

Sebuah Web Stack umumnya terdiri dari:

  1. Sistem Operasi (Operating System): Fondasi tempat semua software lain berjalan. Contoh: Linux, Windows Server.

  2. Web Server: Software yang menerima permintaan HTTP dari klien (browser) dan mengirimkan respons. Contoh: Apache, NGINX, IIS.

  3. Database Server: Sistem untuk menyimpan, mengelola, dan mengambil data secara terstruktur. Contoh: MySQL, MongoDB, PostgreSQL.

  4. Bahasa Pemrograman & Framework: Logika inti dari aplikasi web ditulis di sini. Ini adalah “otak” dari aplikasi. Contoh: PHP (Laravel), Python (Django), JavaScript (Node.js).

Beberapa contoh Web Stack yang populer:

  • LAMP: Linux, Apache, MySQL, PHP. Ini adalah salah satu stack klasik dan sangat populer.

  • MEAN: MongoDB, Express.js, Angular, Node.js. Stack modern yang sepenuhnya berbasis JavaScript.

  • MERN/MEVN: Mirip dengan MEAN, namun menggunakan React atau Vue.js sebagai pengganti Angular.

  • WINS: Windows Server, IIS, .NET, SQL Server. Stack yang umum di lingkungan enterprise berbasis teknologi Microsoft.

Server-Side Scripting

Server-Side Scripting adalah proses di mana kode program dieksekusi di sisi server, bukan di browser klien. Tugas utamanya adalah memproses permintaan, berinteraksi dengan database, dan menghasilkan konten dinamis (biasanya HTML) yang kemudian dikirimkan ke browser untuk ditampilkan.

Perbedaan kuncinya dengan client-side scripting (seperti JavaScript biasa) adalah:

  • Server-Side: Berjalan di server, bisa akses database, hasilnya adalah halaman HTML jadi.

  • Client-Side: Berjalan di browser pengguna, tidak bisa akses database secara langsung, digunakan untuk membuat halaman interaktif.

Aspek Fundamental Server-Side

Ada empat pilar utama dalam pengembangan aplikasi sisi server:

  1. Routing:

    • Apa itu? Routing adalah mekanisme yang memetakan sebuah URL ke fungsi atau controller tertentu di dalam aplikasi. Saat pengguna mengunjungi https://aplikasi.com/profil, sistem routing akan menentukan fungsi mana yang harus dijalankan untuk menangani permintaan tersebut.

    • Analogi: Anggap routing seperti resepsionis di sebuah kantor besar. Resepsionis (router) akan mengarahkan panggilan atau tamu (permintaan URL) ke departemen atau orang yang tepat (fungsi/controller).

  2. Templating:

    • Apa itu? Templating adalah teknik untuk memisahkan logika aplikasi dari presentasi (HTML). Template adalah file HTML yang disisipi dengan placeholder (penanda tempat) untuk data dinamis.

    • Contoh: Sebuah file template hasil.html bisa berisi: <p>Sentimen: {{ sentiment }}</p>. Saat dirender, engine template akan mengganti {{ sentiment }} dengan nilai variabel yang sebenarnya (misalnya, “Positif”).

    • Tujuan: Membuat kode lebih bersih, mudah dikelola, dan memungkinkan desainer bekerja pada tampilan tanpa harus menyentuh logika backend.

  3. Form Processing:

    • Apa itu? Ini adalah proses menangani data yang dikirim oleh pengguna melalui form HTML, biasanya menggunakan metode POST.

    • Alur Kerja:

      1. Pengguna mengisi form di browser dan menekan tombol submit.

      2. Browser mengirimkan data form ke URL yang ditentukan dalam atribut action form.

      3. Di server, fungsi yang terhubung dengan URL tersebut (melalui routing) akan menerima data.

      4. Fungsi tersebut kemudian memproses data (validasi, simpan ke database, dll.) dan mengirimkan respons, misalnya halaman sukses atau kembali ke form dengan pesan error.

  4. Data Access:

    • Apa itu? Ini merujuk pada cara aplikasi berinteraksi dengan sumber data, seperti database atau sistem file. Logika server-side bertanggung jawab untuk mengambil data yang akan ditampilkan atau menyimpan data baru yang dikirim oleh pengguna.

Summary

Server-side scripting adalah teknologi inti yang memungkinkan aplikasi web menjadi dinamis dengan menjalankan kode di server untuk memproses permintaan, mengakses data, dan menghasilkan HTML. Teknologi ini bergantung pada “Web Stack” (kumpulan software seperti OS, web server, dan database) dan diimplementasikan melalui aspek-aspek fundamental seperti Routing (memetakan URL ke fungsi), Templating (memisahkan logika dari tampilan), dan Form Processing (menangani input pengguna).