PBO 1 - Konsep OOP



Apa Itu OOP? Dalam bahasa Indonesia, OOP bisa disebut sebagai pemrograman berorientasi objek. OOP adalah metode pemrograman komputer yang menyusun desain perangkat lunak berdasarkan data atau objek, bukan sekadar urutan perintah. Tujuan utama OOP adalah mempermudah proses pengembangan program agar lebih terstruktur dan efisien. 

Di dalam OOP, terdapat variabel (atribut) dan fungsi (metode) yang dibungkus dalam sebuah kelas. Dari kelas tersebut, programmer bisa membuat objek yang saling berhubungan dan dapat berinteraksi untuk menyelesaikan permasalahan dalam program. Dengan cara ini, program yang rumit bisa dipecah menjadi potongan kode yang lebih kecil, sederhana, dan bisa dipakai kembali. 

Jika pada pemrograman konvensional (prosedural) seorang programmer lebih fokus pada logika langkah demi langkah, maka dalam OOP fokusnya ada pada objek yang memiliki atribut dan perilaku tertentu. Pendekatan ini membuat program lebih mudah diatur, diperbarui, dan dipelihara, terutama pada proyek yang besar dan kompleks.

OOP juga bersifat fleksibel karena dapat digunakan di berbagai bahasa pemrograman modern, seperti C++, Java, Python, hingga JavaScript. Melalui konsep kelas, programmer bisa menentukan atribut yang dimiliki oleh sebuah objek (misalnya warna, ukuran, atau karakteristik lain), sehingga proses pengembangan aplikasi menjadi lebih jelas dan terarah.

Sejarah Singkat OOP 

Konsep OOP pertama kali diperkenalkan pada tahun 1960-an melalui bahasa pemrograman Simula, yang dikembangkan di Norwegia. Simula memaparkan ide class dan object yang menjadi dasar OOP hingga kini. 

Selanjutnya, pada 1970-an, tim di MIT mengembangkan bahasa Smalltalk, yang semakin mempopulerkan paradigma berbasis objek. Dari sana, lahirlah bahasa-bahasa modern seperti C++, Java, Python, dan C#, yang mengadopsi prinsip OOP dan menjadi standar utama dalam pengembangan software hingga saat ini. 

Komponen Dasar dalam OOP 

OOP adalah paradigma pemrograman yang fokus pada objek. Agar lebih mudah dipahami, mari kita lihat komponen utama dalam penggunaan OOP: 

Class 

Class adalah bisa dibilang sebagai sebuah template dari objek. Misalnya, kalau kita membuat class Mobil, maka di dalamnya kita bisa mendefinisikan atribut (warna, merk, tahun) dan metode (fungsi jalan, fungsi berhenti). 

Object 

Object adalah hasil nyata dari class. Jika mobil adalah class, maka mobil Toyota Avanza warna merah tahun 2020 adalah objek. Object ini dibuat dari class dan memiliki data spesifik. 

Atribut 

Atribut adalah data atau variabel yang dimiliki oleh sebuah objek. Contoh pada objek mobil, atributnya bisa berupa warna = merah, merk = Toyota, tahun = 2020. 

Metode (Method) 

Metode adalah fungsi atau perilaku yang bisa dilakukan oleh objek. Contoh, objek mobil memiliki metode jalan() atau berhenti(). Dengan metode, objek bisa melakukan aksi sesuai kebutuhan.

Konsep OOP 

Secara proses teknis, OOP memiliki kaidah khusus berupa empat prinsip dasar seperti enkapsulasi, abstraksi, pewarisan, dan polimorfisme. Berikut kami uraikan empat prinsip dasar untuk membantu Anda memahami dasar-dasar program komputer OOP dan memahami kerangka kerja umum tentang cara kerjanya! 

1. Encapsulation Encapsulation atau pengkapsulan adalah konsep tentang pengikatan data atau metode berbeda yang kemudian disatukan, atau istilah gampangnya “dikapsulkan”, hingga menjadi satu unit data. Ringkasnya, berbagai macam objek yang ada dalam kelas tersebut bisa berdiri sendiri tanpa terpengaruh oleh yang lain.  Programmer tidak harus mengetahui informasi yang disajikan secara rinci karena semua sudah menjadi satu kesatuan. Itulah mengapa proses enkapsulasi justru mempermudah dalam penggunaan sebuah objek dari suatu kelas, atau singkatnya, encapsulation mempermudah pembacaan kode. 

2. Abstraction Abstraction dalam konsep OOP adalah menyembunyikan detail latar belakang dan hanya mewakili informasi yang diperlukan untuk dunia luar saja. Jadi, programmer cukup memerintahkan suatu fungsi, tanpa perlu memiliki pengetahuan soal bagaimana fungsi itu bekerja. Sama seperti ketika memakai gadget, Anda cukup memberi suatu perintah, tanpa harus tahu bagaimana proses terlaksananya perintah itu. Konsep ini merupakan proses penyederhanaan konsep dunia nyata menjadi komponen yang sangat diperlukan.  

3. Inheritance Inheritance merupakan kemampuan membentuk kelas baru yang mempunyai fungsi turunan atau serupa dengan fungsi yang sebelumnya sudah ada. Sistem dalam konsep ini berjenjang, sehingga semakin jauh subclass atau turunannya, semakin sedikit pula kesamaan fungsinya.  

4. Polymorphism Pertanyaan “Apa itu OOP?” sebenarnya dapat dijawab dengan satu kata, yakni polymorphism, karena salah satu ciri utama OOP adalah adanya polymorphism. Suatu pemrograman tidak dapat dikatakan sebagai OOP tanpa adanya polymorphism. Sederhananya, polymorphism dalam OOP adalah konsep di mana suatu objek yang berbeda dapat diakses melalui interface yang sama.  Contoh penggunaan polymorphism dalam kehidupan sehari-hari bisa dilihat ketika Anda mempunyai fungsi untuk menghitung luas suatu benda, padahal benda itu berbentuk segitiga, lingkaran, serta persegi. Fungsi dari polymorphism adalah ketika Anda memasukkan fungsi perhitungan luas ketiga benda tersebut, dimana setiap benda memiliki metode perhitungannya sendiri. Hal ini akan mempermudah perintah yang sama untuk beberapa class dan subclass tertentu, bukan?

Contoh


https://blog.rumahweb.com/oop-adalah/

Absensi



PBO - Materi Pemrograman Berbasis Obyek


 

RENCANA PEMBELAJARAN SEMESTER (RPS) 

PEMROGRAMAN BERBASIS OBYEK

=============================================================

A. Capaian Pembelajaran Lulusan (CPL) Program Studi

  1. CPL Pengetahuan: Menguasai konsep dasar ilmu komputer, algoritma, dan pemrograman.

  2. CPL Keterampilan Umum: Mampu berpikir kritis, memecahkan masalah, dan bekerja dalam tim.

  3. CPL Keterampilan Khusus: Mampu merancang, mengimplementasikan, dan menguji program berbasis objek.


B. Capaian Pembelajaran Mata Kuliah (CPMK)

Setelah mengikuti mata kuliah ini, mahasiswa mampu:

  1. Menjelaskan prinsip dasar Pemrograman Berbasis Objek.

  2. Mengimplementasikan konsep classobjectenkapsulasiinheritancepolymorphism, dan abstraction.

  3. Menggunakan OOP untuk membangun aplikasi sederhana dengan modularisasi, exception handling, collection, dan file I/O.

  4. Mendesain dan mengembangkan mini project aplikasi berbasis OOP.


C. Deskripsi Mata Kuliah

Mata kuliah ini membahas prinsip dan penerapan Pemrograman Berbasis Objek (PBO) dengan menggunakan bahasa pemrograman berorientasi objek (Java/Python/C#). Materi meliputi konsep dasar class dan object, enkapsulasi, inheritance, polymorphism, abstraction, modularisasi program, collection, exception handling, file I/O, hingga implementasi dalam bentuk mini project.


D. Bahan Kajian (Pokok Bahasan)

  1. Konsep dasar OOP: class, object, atribut, method.

  2. Enkapsulasi, constructor, overloading.

  3. Inheritance & hierarki class.

  4. Polymorphism & overriding.

  5. Abstraction: abstract class, interface.

  6. Modularisasi dengan package.

  7. Exception handling.

  8. Collection & Generic.

  9. File I/O & serialisasi objek.

  10. GUI sederhana.

  11. Mini project berbasis OOP.


E. Strategi Pembelajaran

  • Metode: Ceramah interaktif, diskusi, demonstrasi coding, praktikum, project-based learning, presentasi.

  • Media: Laptop, IDE (NetBeans/Eclipse/IntelliJ atau VS Code), projector, LMS.

  • Evaluasi: Quiz, tugas individu, project kelompok, UTS, UAS.


F. Rencana Pembelajaran Semester (RPS Detail)


MingguCPMK/Sub-CPMKMateri/Pokok BahasanBentuk & Metode PembelajaranPenilaian & Bobot
1Memahami perbedaan prosedural & OOPPengantar PBO, class & objectCeramah, diskusi, studi kasusTugas individu (2%)
2Membuat class & objectStruktur class, constructorDemo coding, praktikumQuiz (2%)
3Menerapkan enkapsulasiModifier, getter & setterPraktikumTugas coding (3%)
4Menggunakan overloadingMethod & constructor overloadingPraktikumQuiz (2%)
5Membuat hierarki classInheritanceDiskusi, praktikumTugas coding (3%)
6Menggunakan polymorphismOverriding, up/downcastingPraktikumQuiz (2%)
7Menggunakan abstractionAbstract class & interfacePraktikumTugas coding (3%)
8Integrasi konsep dasar OOPUTS (teori & praktik)UjianUTS (20%)
9Modularisasi programPackage & importPraktikumTugas coding (3%)
10Menangani errorException handlingDemo, praktikumQuiz (2%)
11Menggunakan collectionList, Map, Set, GenericPraktikumTugas coding (3%)
12Membaca/menyimpan dataFile I/O, serialisasi objekDemo, praktikumTugas coding (3%)
13Membuat GUI sederhanaGUI, event handlingPraktikumTugas coding (3%)
14Mendesain aplikasi OOPMini project design, UMLDiskusi, bimbinganDraft project (5%)
15Mempresentasikan projectPresentasi mini projectPresentasi kelompokPresentasi (10%)
16Membangun aplikasi OOP miniUAS (teori & praktik)UjianUAS (30%)


G. Penilaian

  • Tugas & Quiz: 25%

  • UTS: 25%

  • Mini Project : 25%

  • UAS: 35%


H. Referensi

  1. Barnes, D. J., & Kölling, M. (2017). Objects First with Java. Pearson.

  2. Horstmann, C. (2018). Object-Oriented Design & Patterns. Wiley.

  3. Schildt, H. (2021). Java: The Complete Reference. McGraw Hill.

  4. Freeman, E., & Robson, E. (2004). Head First Design Patterns. O’Reilly.

  5. Oracle Java Documentation (https://docs.oracle.com/javase/tutorial/java/concepts/).

  6. https://docs.oracle.com/javase/tutorial/java/concepts/

  7. https://docs.python.org/3/tutorial/classes.html

  8. https://agussuratna.net/2023/01/tutorial-java-pengenalan-bahasa-pemrograman-java/

  9. https://www.petanikode.com/java-oop/

Pemrograman Web 2 - HTML Dasar



Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu:

  1. Menjelaskan struktur dasar dokumen HTML.

  2. Menggunakan elemen-elemen HTML dasar: heading, paragraph, list, link, image, table, dan form.

  3. Membuat halaman profil sederhana menggunakan HTML.

Materi Pembelajaran

1. Struktur Dokumen HTML

Setiap halaman web berbasis HTML memiliki struktur umum:

<!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <!-- Konten halaman ditulis di sini --> </body> </html>
  • <!DOCTYPE html> → deklarasi tipe dokumen HTML5.

  • <html> → pembungkus seluruh dokumen HTML.

  • <head> → bagian untuk metadata, judul, link CSS, dsb.

  • <body> → bagian yang ditampilkan di browser.

2. Elemen Dasar HTML

a. Heading

Untuk judul dan subjudul, mulai dari <h1> (besar) sampai <h6> (kecil).

<h1>Judul Utama</h1> <h2>Sub Judul</h2> <h3>Judul Kecil</h3>

b. Paragraph

Menuliskan teks dalam paragraf:

<p>Ini adalah sebuah paragraf. HTML digunakan untuk membuat struktur dasar halaman web.</p>

c. List

  • Ordered List (bernomor):

<ol> <li>Pertama</li> <li>Kedua</li> </ol>
  • Unordered List (bullet):

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

d. Link (Hyperlink)

Mengarahkan pengguna ke halaman lain.

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
  • href = alamat tujuan

  • target="_blank" = membuka di tab baru

e. Image (Gambar)

Menampilkan gambar pada halaman.

<img src="images/foto.jpg" alt="Foto Profil" width="200">
  • src = lokasi file gambar

  • alt = deskripsi alternatif

  • width/height = ukuran gambar

f. Table (Tabel)

Untuk menampilkan data dalam bentuk baris dan kolom.

<table border="1"> <tr> <th>Nama</th> <th>Jurusan</th> </tr> <tr> <td>Ani</td> <td>Informatika</td> </tr> <tr> <td>Budi</td> <td>Sistem Informasi</td> </tr> </table>

g. Form (Formulir)

Untuk input data pengguna.

<form> <label>Nama:</label><br> <input type="text" name="nama"><br><br> <label>Email:</label><br> <input type="email" name="email"><br><br> <label>Jenis Kelamin:</label><br> <input type="radio" name="gender" value="Laki-laki"> Laki-laki <input type="radio" name="gender" value="Perempuan"> Perempuan<br><br> <label>Hobi:</label><br> <input type="checkbox" name="hobi" value="Membaca"> Membaca <input type="checkbox" name="hobi" value="Olahraga"> Olahraga<br><br> <input type="submit" value="Kirim"> </form>

Latihan : Membuat Halaman Profil Sederhana

Instruksi:

  1. Buat folder bernama profil di dalam htdocs (XAMPP) atau www (Laragon).

  2. Buat file index.html di dalam folder tersebut.

  3. Ketik kode berikut:

<!DOCTYPE html> <html> <head> <title>Profil Saya</title> </head> <body> <!-- Heading --> <h1>Profil Mahasiswa</h1> <!-- Paragraf --> <p>Halo! Nama saya <b>Andi Setiawan</b>. Saya seorang mahasiswa jurusan Teknik Informatika yang tertarik pada pengembangan web dan pemrograman.</p> <!-- Gambar --> <img src="images/foto.jpg" alt="Foto Profil" width="200"> <!-- List --> <h2>Hobi Saya:</h2> <ul> <li>Membaca</li> <li>Olahraga</li> <li>Koding</li> </ul> <!-- Tabel --> <h2>Pendidikan</h2> <table border="1" cellpadding="5"> <tr> <th>Tahun</th> <th>Sekolah</th> </tr> <tr> <td>2018 - 2021</td> <td>SMA Negeri 1 Surabaya</td> </tr> <tr> <td>2021 - Sekarang</td> <td>Universitas XYZ</td> </tr> </table> <!-- Form --> <h2>Kontak Saya</h2> <form> <label>Nama:</label><br> <input type="text" name="nama"><br><br> <label>Email:</label><br> <input type="email" name="email"><br><br> <label>Pesan:</label><br> <textarea name="pesan" rows="4" cols="30"></textarea><br><br> <input type="submit" value="Kirim"> </form> <!-- Link --> <p>Kunjungi <a href="https://github.com">GitHub</a> saya untuk melihat project.</p> </body> </html>
  1. Buka browser, lalu akses http://localhost/profil/index.html.

Tugas Individu

  1. Modifikasi halaman profil dengan menambahkan:

    • Foto diri (gunakan gambar apapun sementara).

    • Tabel pengalaman organisasi (minimal 2 baris).

    • Form pendaftaran teman dengan input nama, email, dan hobi.

  2. Kumpulkan file index.html dan buatlah dokumentasinya kemudian kirim ke google form tugas

Proyek

1. Halaman Biodata Sederhana

  • Buat halaman biodata.html.

  • Tampilkan: nama, tempat & tanggal lahir, alamat, jurusan, hobi.

  • Gunakan heading untuk judul dan paragraf untuk deskripsi.

2. Daftar Hobi dengan List

  • Buat halaman hobi.html.

  • Tampilkan daftar hobi menggunakan unordered list dan ordered list.

  • Contoh:

    • Unordered → Hobi harian (Membaca, Olahraga, Bermain Musik).

    • Ordered → Hobi favorit (1. Koding, 2. Traveling, 3. Menulis).

3. Navigasi Antar Halaman

  • Buat 3 halaman: home.html, about.html, contact.html.

  • Tambahkan link di bagian atas halaman agar bisa berpindah antar halaman.

  • Contoh: [Home] [About] [Contact].

4. Galeri Foto

  • Buat halaman galeri.html.

  • Tampilkan minimal 4 gambar menggunakan tag <img>.

  • Tambahkan atribut alt dan atur ukuran gambar agar seragam.

5. Tabel Jadwal Kuliah

  • Buat halaman jadwal.html.

  • Tampilkan tabel berisi jadwal kuliah (Hari, Mata Kuliah, Jam, Dosen).

  • Gunakan <table>, <tr>, <th>, <td>.

6. Form Kontak

  • Buat halaman kontak.html.

  • Buat form dengan input: nama, email, pesan.

  • Tambahkan tombol submit.

7. Curriculum Vitae (CV)

  • Buat halaman cv.html.

  • Tampilkan: data diri, pendidikan, pengalaman organisasi, skill.

  • Gunakan heading, paragraf, list, tabel, dan link (misalnya ke LinkedIn/GitHub).

8. Artikel Sederhana

  • Buat halaman artikel.html.

  • Buat artikel pendek tentang topik bebas (misalnya teknologi, pendidikan, hobi).

  • Gunakan heading untuk judul, paragraf untuk isi, dan link ke sumber referensi.

9. Daftar Menu Restoran

  • Buat halaman menu.html.

  • Tampilkan daftar makanan & minuman dengan harga.

  • Gunakan tabel dengan kolom: Nama Menu, Kategori (Makanan/Minuman), Harga.

10. Profil dengan Semua Elemen

  • Buat halaman profil.html.

  • Isi harus memuat:

    • Judul profil (heading)

    • Paragraf deskripsi diri

    • Foto profil (image)

    • Daftar hobi (list)

    • Tabel riwayat pendidikan

    • Form kontak sederhana

    • Link ke media sosial

Pengumpulan Tugas

Link Absen









Pemrograman Web 1 - Tools Pengembangan Web

Tujuan

Setelah mengikuti pertemuan ini, mahasiswa diharapkan mampu:

  1. Menjelaskan konsep client-server dalam pemrograman web.

  2. Mengidentifikasi perbedaan antara front-end dan back-end.

  3. Mengenal dan menginstal tools pengembangan web (VS Code, XAMPP/Laragon, Browser DevTools).

  4. Memahami struktur dasar aplikasi web.

Materi Pembelajaran

1. Konsep Client-Server

  • Client: perangkat atau aplikasi yang meminta layanan (browser: Chrome, Firefox, Edge).

  • Server: komputer atau aplikasi yang memberikan layanan (web server: Apache, Nginx).

  • Alur komunikasi:

    • Client mengirim request (misalnya membuka URL).

    • Server memproses dan mengirim response (halaman HTML, data JSON, dsb).

  • Contoh sederhana:

    • Mahasiswa membuka http://localhost/index.php di browser → client.

    • XAMPP/Laragon menjalankan Apache + PHP + MySQL → server.

2. Front-End vs Back-End

  • Front-End (Client-Side):

    • Bahasa: HTML, CSS, JavaScript.

    • Bertugas menampilkan tampilan antarmuka (UI).

    • Contoh: layout halaman, warna, font, tombol, navigasi.

  • Back-End (Server-Side):

    • Bahasa: PHP, Python, Node.js, dsb.

    • Bertugas memproses logika, mengakses database, autentikasi.

    • Contoh: memproses login, menyimpan data pendaftaran, menampilkan data produk dari database.

3. Tools untuk Pengembangan Web

  • Code Editor – Visual Studio Code

    • Fitur: syntax highlighting, extensions (PHP, Bootstrap, Prettier), Git integration.

    • Praktikum: membuka VS Code, membuat file index.html.

  • Web Server – XAMPP/Laragon

    • XAMPP: Apache (server), MySQL (database), PHP.

    • Laragon: ringan, auto virtual host, mendukung PHP/MySQL.

    • Praktikum: install XAMPP/Laragon, menjalankan Apache & MySQL.

  • Browser DevTools

    • Tersedia di Chrome/Firefox (klik kanan > Inspect).

    • Fitur: melihat struktur HTML, CSS, network request, debugging error.

    • Praktikum: inspect sebuah website sederhana (misalnya google.com).

4. Struktur Dasar Aplikasi Web

  • Folder utama (htdocs di XAMPP / www di Laragon).

    • index.html → halaman utama.

    • style.css → file styling.

    • script.js → file JavaScript.

    • config.php → konfigurasi database (jika ada).

  • Contoh struktur project sederhana:

    myproject/ ├── index.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── script.js ├── images/ │ └── logo.png └── php/ └── process.php
  • Alur kerja sederhana:

    • User membuka index.html.

    • File HTML memanggil CSS/JS.

    • Jika ada interaksi (form), data dikirim ke process.php.

    • process.php memproses data ke database MySQL.

    • Hasil dikirim kembali ke user dalam bentuk halaman.

Latihan 

  1. Buat folder project di htdocs (misalnya: web1).

  2. Buat file index.html dengan konten sederhana:

    <!DOCTYPE html> <html> <head> <title>Pertemuan 1</title> </head> <body> <h1>Halo, ini halaman pertama saya!</h1> <p>Belajar Web Programming - Pertemuan 1</p> </body> </html>
  3. Jalankan di browser dengan http://localhost/web1/index.html.

Pemrograman Web - Materi Ajar

Pemrograman web, atau pengembangan web, mengacu pada proses pembuatan situs web dan aplikasi web yang dapat diakses melalui internet. Ini melibatkan kombinasi bahasa, kerangka kerja, dan alat untuk membangun struktur, desain, dan fungsionalitas interaktif platform berbasis web.  



Komponen Utama Pemrograman Web:  

Pengembangan Front-End:

Ini berfokus pada sisi klien suatu situs web, atau apa yang berinteraksi langsung dengan pengguna di peramban web mereka.

  • HTML (Bahasa Markup HiperTeks): Digunakan untuk menentukan struktur dan konten halaman web.
  • CSS (Cascading Style Sheets): Digunakan untuk menata tampilan visual elemen HTML, termasuk warna, font, tata letak, dan responsivitas.
  • JavaScript: Menambahkan interaktivitas dan perilaku dinamis ke halaman web, menangani masukan pengguna, animasi, dan logika sisi klien. Kerangka kerja seperti React, Angular, dan Vue.js dibangun di atas JavaScript.

Pengembangan Back-End:

Ini berfokus pada logika sisi server, basis data, dan manajemen server yang mendukung fungsionalitas situs web.

  • Bahasa Sisi Server: Contohnya termasuk Python (dengan kerangka kerja seperti Django dan Flask), PHP (dengan kerangka kerja seperti Laravel), Node.js (JavaScript runtime), Ruby (dengan Ruby on Rails), Java (dengan Spring), dan Go.
  • Basis data: Digunakan untuk menyimpan dan mengelola data, seperti informasi pengguna, konten, dan data aplikasi. Basis data umum meliputi MySQL, PostgreSQL, MongoDB, dan SQLite.
  • Server : Perangkat lunak atau perangkat keras yang memberikan konten web kepada pengguna berdasarkan permintaan (misalnya, Apache, Nginx).


Pengembangan Full Stack :

Ini melibatkan kemahiran dalam pengembangan front-end dan back-end, yang memungkinkan pengembang untuk menangani semua aspek pembuatan aplikasi web.  

Tujuan Pemrograman Web:  

Pemrograman web sangat penting untuk membuat berbagai aplikasi online, termasuk:  

  • Situs Web Statis: Situs web sederhana dengan konten tetap.
  • Situs Web Dinamis: Situs web dengan elemen interaktif dan konten yang diperbarui secara berkala, sering kali didukung oleh basis data.
  • Aplikasi Web: Aplikasi perangkat lunak kompleks yang diakses melalui peramban web (misalnya, perbankan daring, platform e-dagang, media sosial).
  • API (Antarmuka Pemrograman Aplikasi): Memungkinkan sistem perangkat lunak yang berbeda untuk berkomunikasi satu sama lain.

Outline Materi Ajar Web Programming (16 Pertemuan)

Pendahuluan (Front-End Basics)

Pertemuan 1 – Pengenalan Web Programming

  • Konsep client-server, front-end & back-end

  • Tools untuk pengembangan (VS Code, XAMPP/Laragon, Browser DevTools)

  • Struktur dasar aplikasi web

Pertemuan 2 – HTML Dasar

  • Struktur dokumen HTML

  • Elemen dasar: heading, paragraph, list, link, image, table, form

  • Praktikum: membuat halaman profil sederhana

Pertemuan 3 – CSS Dasar

  • Inline, internal, dan external CSS

  • Selektor, warna, font, margin, padding, border

  • Praktikum: styling halaman profil

Pertemuan 4 – CSS Layout & Positioning

  • Box model, display, position, float, flexbox, grid

  • Praktikum: layout halaman sederhana dengan 2–3 kolom

Penguatan Front-End (Bootstrap)

Pertemuan 5 – Bootstrap Framework

  • Instalasi & struktur Bootstrap

  • Grid system & responsive design

  • Praktikum: membuat layout responsive

Pertemuan 6 – Bootstrap Components

  • Navbar, card, button, form, modal

  • Praktikum: membuat landing page dengan Bootstrap

Pertemuan 7 – Mini Project Front-End

  • Merancang halaman depan (landing page + form pendaftaran)

  • Integrasi HTML, CSS, dan Bootstrap

Back-End (PHP & MySQL Basics)

Pertemuan 8 – Pengenalan PHP

  • Syntax dasar PHP

  • Variabel, tipe data, operator

  • Praktikum: kalkulasi sederhana dengan PHP

Pertemuan 9 – PHP Control Structure

  • Kondisi (if, switch)

  • Looping (for, while, foreach)

  • Praktikum: form input & output dengan kondisi

Pertemuan 10 – PHP Function & Form Handling

  • Function, include, require

  • Form handling (GET & POST)

  • Praktikum: form login sederhana (tanpa database)

Pertemuan 11 – Database MySQL

  • Pengenalan RDBMS & MySQL

  • Membuat database & tabel dengan phpMyAdmin

  • Query dasar: SELECT, INSERT, UPDATE, DELETE

Pertemuan 12 – PHP & MySQL Connection

  • Koneksi PHP–MySQL (mysqli / PDO)

  • Insert, display data dari database

  • Praktikum: aplikasi CRUD sederhana (Create & Read)

Integrasi Front-End & Back-End

Pertemuan 13 – CRUD Lanjutan

  • Update & Delete data dengan PHP–MySQL

  • Praktikum: CRUD lengkap data siswa

Pertemuan 14 – Session & Authentication

  • Session & cookies

  • Sistem login & logout sederhana

  • Praktikum: proteksi halaman dengan session

Pertemuan 15 – Mini Project Full Stack

  • Merancang aplikasi mini (misalnya: sistem pendaftaran siswa / katalog produk)

  • Menggabungkan front-end (Bootstrap) & back-end (PHP–MySQL)

Penutup

Pertemuan 16 – Presentasi & Evaluasi Project

  • Presentasi mini project tiap kelompok

  • Review konsep front-end & back-end

  • Evaluasi akhir & diskusi pengembangan lebih lanjut (Laravel, API, dsb.)