MODUL AJAR MATA KULIAH

PEMROGRAMAN WEB
MODUL 1
PENDAHULUAN PEMROGRAMAN WEB
DAN PENGENALAN TOOLS

Disusun Oleh:
Muhamad Afif Effindi, S.Kom., M.T.
Faradina Anggraeni Ma’roef

PROGRAM STUDI PENDIDIKAN INFORMATIKA

JURUSAN ILMU PENDIDIKAN
FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS TRUNOJOYO MADURA
2025

Modul Pembelajaran Mata Kuliah 1

Pemrograman Web
 INFORMASI TENTANG MODUL

Judul Modul Ajar Mata Kuliah Pemrograman Web

Nama Penyusun Muhamad Afif Effindi, S.Kom., M.T.
Faradina Anggraeni Ma’roef
Institusi Program Studi Pendidikan Informatika
Jurusan Ilmu Pendidikan
Fakultas Keguruan dan Ilmu Pendidikan
Universitas Trunojoyo Madura
Tanggal Penyusunan Semester Genap
Tahun Akademik 2024-2025

Modul Pembelajaran Mata Kuliah 2

Pemrograman Web
 BAB I
PENDAHULUAN PEMROGRAMAN WEB
DAN PENGENALAN TOOLS

1.1 Pengantar Pemrograman Web dan Sejarah Web

1. Pengantar Pemrograman Web
Pemrograman web adalah proses pembuatan aplikasi berbasis web yang dapat diakses melalui
browser internet. Dalam pengembangan web, terdapat dua komponen utama:
A. Front-End (Client-Side): Bagian dari aplikasi web yang berinteraksi langsung dengan
pengguna. Ini mencakup:
a) HTML (HyperText Markup Language) → Untuk struktur halaman web
b) CSS (Cascading Style Sheets) → Untuk desain dan tata letak
c) JavaScript → Untuk interaktivitas dan responsivitas
B. Back-End (Server-Side): Bagian dari aplikasi yang menangani logika, penyimpanan data,
dan komunikasi dengan database. Contohnya:
• PHP, Python, Node.js → Untuk pemrosesan data di server
• MySQL, PostgreSQL, MongoDB → Untuk menyimpan dan mengelola data
• API (Application Programming Interface) → Untuk komunikasi antar sistem
C. Full-Stack Development: Pengembang yang menguasai front-end dan back-end disebut
Full-Stack Developer. Mereka dapat membangun sistem web secara keseluruhan.

2. Sejarah Web
Perkembangan web dimulai dari konsep dasar dokumen yang saling terhubung hingga menjadi
platform interaktif yang kompleks. Berikut adalah beberapa tahap evolusi web:
A. 1989 – Awal Mula Web (World Wide Web)
• Tim Berners-Lee, ilmuwan di CERN, mengusulkan sistem berbasis hypertext untuk
berbagi informasi di internet.
• Konsep ini melahirkan HTML dan protokol HTTP (HyperText Transfer Protocol).
B. 1991 – Situs Web Pertama
• Berners-Lee membuat situs web pertama (info.cern.ch), berisi dokumen teks dengan
link ke halaman lain.
C. 1994 – Lahirnya Browser dan HTML Standar
• Netscape Navigator menjadi browser pertama yang populer.

Modul Pembelajaran Mata Kuliah 3

Pemrograman Web
 • Konsorsium W3C (World Wide Web Consortium) didirikan untuk mengembangkan
standar web.
D. 1995 – Era JavaScript dan Interaktivitas Web
• JavaScript dikembangkan oleh Netscape untuk membuat halaman web lebih dinamis.
• PHP mulai dikembangkan untuk pemrograman sisi server.
E. 2000-an – Web 2.0 (Interaktif dan Sosial Media)
• Web tidak hanya menampilkan informasi, tetapi juga memungkinkan pengguna
berkontribusi (forum, blog, media sosial).
• AJAX diperkenalkan, memungkinkan pembaruan halaman web tanpa perlu refresh.
• Lahirnya platform seperti Facebook, YouTube, dan Twitter.
F. 2010-an – Mobile Web dan Aplikasi Web Modern
• Responsif Web Design (RWD) mulai digunakan agar website bisa berjalan di berbagai
perangkat.
• Framework seperti React.js, Angular, dan Vue.js membuat pengembangan web lebih
efisien.
• API dan teknologi RESTful, GraphQL memudahkan integrasi antar sistem.
G. 2020-an – Web 3.0 dan Masa Depan Web
• Blockchain dan Desentralisasi mulai mempengaruhi cara pengembangan web.
• AI & Chatbots menjadi bagian dari pengalaman web.
• WebAssembly (WASM) memungkinkan performa aplikasi lebih cepat di browser.

1.2 Pengenalan Tools

Dalam pengembangan web, pemilihan tools yang tepat sangat penting untuk meningkatkan
produktivitas dan efisiensi kerja. Dua alat utama yang digunakan dalam pemrograman web
adalah Code Editor untuk menulis kode dan Git untuk pengelolaan versi kode.
1. Code Editor: Alat untuk Menulis Kode Pemrograman Web
Code editor adalah perangkat lunak yang digunakan untuk menulis dan mengedit kode sumber
(source code) dalam berbagai bahasa pemrograman. Berikut adalah beberapa code editor
terbaik yang sering digunakan dalam pemrograman web:
A. Visual Studio Code (VS Code)
• Dikembangkan oleh: Microsoft
• Fitur Utama:
o Lightweight dan cepat digunakan.

Modul Pembelajaran Mata Kuliah 4

Pemrograman Web
 o Mendukung berbagai bahasa pemrograman seperti HTML, CSS, JavaScript,
PHP, Python, dll.
o Extension Marketplace: Memungkinkan pengguna menambahkan fitur seperti
Emmet (auto-completion HTML & CSS), Live Server, dan Git integration.
o IntelliSense: Auto-complete cerdas untuk mempercepat penulisan kode.
o Built-in Terminal: Bisa menjalankan perintah Git langsung di dalam editor.
• Visual Code Studio bisa diunduh pada: https://code.visualstudio.com/download

B. Sublime Text
• Dikembangkan oleh: Sublime HQ
• Fitur Utama:
o Ringan dan cepat digunakan, cocok untuk proyek kecil.
o Mendukung banyak bahasa pemrograman.
o Package Control: Memungkinkan pemasangan plugin tambahan.
o Multi-Selection Editing: Mempermudah pengeditan banyak baris kode
sekaligus.
• Sublime Text dapat diunduh pada: https://www.sublimetext.com/download

C. Atom (Discontinued)
• Dikembangkan oleh: GitHub (sekarang sudah tidak didukung lagi).
• Alternatif: Bisa menggunakan VS Code atau Brackets.

D. Brackets (Untuk Desainer Web)

• Dikembangkan oleh: Adobe
• Fitur Utama:
o Didesain khusus untuk pengembangan web front-end.
o Live Preview: Bisa melihat perubahan HTML & CSS langsung di browser.
o Mendukung integrasi dengan Preprocessor CSS (LESS & SASS).

Modul Pembelajaran Mata Kuliah 5

Pemrograman Web
Pilihan Code Editor Terbaik

Code Editor Kelebihan Kekurangan

VS Code Kaya fitur, banyak ekstensi, gratis Agak berat untuk spesifikasi rendah

Sublime Text Ringan, cepat, dan fleksibel Berbayar untuk fitur penuh

Brackets Cocok untuk front-end development Kurang fitur untuk back-end

Atom Open-source, mendukung banyak bahasa Sudah tidak didukung lagi

2. Git: Alat Pengelolaan Kode dan Version Control

Git adalah Version Control System (VCS) yang digunakan untuk melacak perubahan dalam
kode sumber dan memungkinkan pengembang bekerja secara kolaboratif.
Apa Itu Git?
• Dikembangkan oleh: Linus Torvalds (2005)
• Fungsi Utama:
o Menyimpan versi dari setiap perubahan kode.
o Memungkinkan tim bekerja bersama tanpa konflik kode.
o Digunakan dalam hampir semua proyek software modern.

Apa Itu GitHub?

• GitHub adalah platform penyimpanan kode berbasis cloud yang menggunakan Git
sebagai backend-nya.
• Fungsi GitHub:
o Memungkinkan berbagi dan mengelola kode dengan tim.
o Menyediakan GitHub Classroom untuk pendidikan.
o Mendukung Continuous Integration (CI/CD) untuk deployment otomatis.
o

🖥 Alternatif GitHub:
• GitLab → Digunakan untuk proyek yang lebih private.
• Bitbucket → Banyak digunakan di perusahaan dengan integrasi ke Atlassian (Jira,
Trello).

Modul Pembelajaran Mata Kuliah 6

Pemrograman Web
2.3. Dasar-dasar Penggunaan Git
Berikut adalah perintah dasar dalam Git yang sering digunakan dalam pemrograman web:

Perintah Fungsi

git init Menginisialisasi repository Git dalam folder proyek

git clone <repo-url> Mengunduh repository dari GitHub ke komputer lokal

Menambahkan semua perubahan dalam kode ke staging

git add .
area

git commit -m "Pesan

Menyimpan perubahan ke dalam repository lokal
perubahan"

git push origin main Mengunggah perubahan dari repository lokal ke GitHub

git pull origin main Mengambil update terbaru dari GitHub ke komputer lokal

git branch nama_branch Membuat branch baru untuk fitur atau perubahan tertentu

git checkout nama_branch Berpindah ke branch lain

git merge nama_branch Menggabungkan branch ke dalam branch utama

Kesimpulan
1) Pemrograman web telah berkembang dari sekadar dokumen statis menjadi aplikasi
interaktif yang kompleks.
2) Memahami dasar HTML, CSS, JavaScript, serta backend seperti PHP/MySQL sangat
penting bagi pengembang web.
3) Dengan teknologi modern seperti Framework JavaScript (React, Vue), API, dan Cloud
Computing, pengembangan web kini semakin luas dan dinamis.
4) Code Editor seperti VS Code sangat membantu dalam menulis dan mengelola kode
pemrograman web dengan fitur yang kaya.
5) Git dan GitHub adalah alat penting untuk mengelola kode, melakukan version control,
serta memungkinkan kolaborasi dalam proyek pemrograman web.
6) Dengan memahami workflow Git, mahasiswa dapat bekerja secara efisien dalam
proyek tim dan terbiasa dengan standar industri.

Modul Pembelajaran Mata Kuliah 7

Pemrograman Web
 DAFTAR PUSTAKA
1. Pemrograman Web oleh Dicoding. 2019.
https://www.dicoding.com/blog/kenal-pemrograman-web/

Modul Pembelajaran Mata Kuliah 8

Pemrograman Web