Modul Pengantar

Konsep Dasar MVC, Basis Data Relasional, dan Web Server Localhost

Sebelum memulai penulisan kode program di CodeIgniter 3, siswa SMK Ardli Sela wajib memahami pola arsitektur perangkat lunak yang digunakan serta cara kerja server pengujian lokal.

Materi: Teori Fondasi RPL Target: Pemahaman Konsep Arsitektur Alokasi: Modul 00
💡

Petunjuk Pengetikan: Kode Komentar (//, /* */, #, <!-- -->) TIDAK WAJIB Ditulis Semua!

Di dalam contoh kode pada seluruh modul tutorial ini, Anda akan sering melihat baris berwarna abu-abu yang diawali dengan tanda //, /* ... */, atau <!-- ... -->. Itu adalah Kode Komentar (Code Comments).

  • Fungsi Komentar: Komentar sengaja disediakan oleh modul sebagai catatan penjelas bagi Anda agar paham apa tujuan baris fungsi di bawahnya. Komentar sama sekali TIDAK dieksekusi oleh komputer/server.
  • Boleh Dilewati (Tidak Wajib Diketik): Saat mengetik kode di Sublime Text 3, Anda TIDAK PERLU mengetik seluruh kalimat komentar tersebut agar proses pengerjaan Anda jauh lebih cepat.
  • Gunakan Seperlunya: Anda cukup menuliskan 1 baris komentar pendek pada fungsi-fungsi inti saja sebagai catatan pengingat pribadi saat nanti diwawancarai oleh penguji UKK.
★

1. Arsitektur Model - View - Controller (MVC)

Pemisahan kode program menjadi tiga lapisan tanggung jawab independen.

Dalam standar industri dan uji kompetensi keahlian, kode program dilarang ditulis bercampur dalam satu berkas (spaghetti code). CodeIgniter 3 menerapkan pola MVC:

Komponen Direktori File Tugas & Tanggung Jawab Utama
Model (M) application/models/ Pengolahan Data & Basis Data. Menjalankan kueri SQL menggunakan Active Record / Query Builder (Select, Insert, Update, Delete). Contoh: User_model.php, Buku_model.php, Transaksi_model.php.
View (V) application/views/ Presentasi Antarmuka (UI). Menampilkan struktur HTML, CSS Bootstrap, dan data variabel yang dikirimkan oleh Controller kepada pengguna.
Controller (C) application/controllers/ Otak Alur Logika. Menerima request HTTP dari browser, melakukan validasi formulir, memanggil method Model, dan memuat berkas View yang sesuai.
🗄️

2. Konsep Basis Data Relasional (MySQL)

Penyimpanan data terstruktur dengan relasi foreign key.

Aplikasi SIPAS menggunakan basis data relasional db_perpustakaan yang terdiri atas 3 tabel:

  • users: Menyimpan entitas pengguna (admin dan siswa), username, password hash Bcrypt, dan status.
  • buku: Menyimpan entitas koleksi buku, kode buku unik, judul, pengarang, nomor rak, dan kuantitas stok fisik.
  • transaksi: Menyimpan transaksi peminjaman. Memiliki relasi Foreign Key ke users(id) dan buku(id) untuk mencatat siapa peminjamnya dan buku apa yang dipinjam.
🌐

3. Dasar Web Server Localhost & Port Jaringan

Mengubah komputer kerja lokal menjadi server pengujian web.

Localhost mereferensikan komputer lokal tempat Anda bekerja (alamat loopback IP: 127.0.0.1). Web server Apache berfungsi membaca direktori fisik di komputer dan menerjemahkannya menjadi halaman web yang bisa dibuka di browser:

A. Hubungan Folder Fisik Komputer dengan URL Browser

Web root XAMPP berada di C:\xampp\htdocs\. Nama folder yang Anda buat di dalam htdocs akan otomatis menjadi alamat URL setelah kata localhost/:

Folder Fisik di Laptop Anda (htdocs) Alamat URL yang Diketik di Browser Catatan & Sifat Penilaian UKK
C:\xampp\htdocs\perpustakaan\ http://localhost/perpustakaan/ Folder standar bawaan modul tutorial.
C:\xampp\htdocs\perpustakaan_andi\ http://localhost/perpustakaan_andi/ Rekomendasi UKK: Proyek mandiri milik siswa Andi.
C:\xampp\htdocs\perpustakaan_budi\ http://localhost/perpustakaan_budi/ Rekomendasi UKK: Proyek mandiri milik siswa Budi.
C:\xampp\htdocs\xampp\ http://localhost/phpmyadmin/ Aplikasi pengelola database MySQL bawaan XAMPP.
B. Kenapa Setiap Siswa Harus Memiliki Folder & Database Sendiri di Localhost?

Menindaklanjuti peringatan di halaman awal bahwa UKK adalah penilaian individu perorangan:

  • Satu Laptop Bisa Menampung Banyak Proyek: Di folder htdocs laptop sekolah, Anda bisa membuat folder baru dengan nama Anda sendiri (contoh: perpustakaan_namaanda) tanpa menghapus atau mengganggu pekerjaan teman satu meja.
  • Basis Data Terisolasi: Setiap database (misal: db_perpustakaan_namaanda) menyimpan tabelnya masing-masing secara independen. Saat Anda menambah buku, menghapus data, atau menguji transaksi peminjaman, data Anda tidak akan tercampur atau merusak data pengujian siswa lain.
  • Bukti Otentisitas di Depan Penguji: Guru penguji UKK akan langsung memeriksa URL yang aktif di browser Anda (misal: localhost/perpustakaan_andi) dan nama database di phpMyAdmin. Jika semuanya menggunakan identitas Anda sendiri dengan data koleksi buku yang unik, nilai orisinalitas Anda akan maksimal!
C. Port Jaringan Komunikasi Lokal
Port Standar Layanan Server Fungsi & Cara Kerja
Port 80 Apache Web Server Pintu default protokol HTTP. Jika tidak ada bentrok aplikasi lain (seperti Skype/IIS), URL cukup diakses http://localhost/.... Namun jika port Apache diubah ke 8080, URL menjadi http://localhost:8080/....
Port 3306 MySQL Database Server Pintu pertukaran kueri SQL antara script PHP CodeIgniter 3 dengan mesin database MySQL.
Lanjut ke Modul 01: Persiapan Server →