Modul 01

Persiapan Lingkungan Server, Ekstraksi Direktori htdocs & Pembuatan Database Manual

Tahapan teknis awal menyiapkan web server lokal, mengekstrak master CodeIgniter 3 ke htdocs, membuka workspace di Sublime Text 3, serta membuat skema database secara manual di phpMyAdmin.

1

Mengaktifkan Layanan XAMPP Control Panel

Menjalankan layanan Apache HTTP Server dan basis data MySQL Server.

Langkah-Langkah:
  1. Buka aplikasi XAMPP Control Panel di laptop/PC Anda.
  2. Pada baris modul Apache, klik tombol Start hingga status berwarna hijau.
  3. Pada baris modul MySQL, klik tombol Start hingga port 3306 aktif.
XAMPP Control Panel
Gambar 1: Memastikan layanan Apache dan MySQL telah aktif pada XAMPP Control Panel.
2

Mengekstrak Berkas Master CodeIgniter 3 ke Folder htdocs

Menempatkan berkas proyek pada web root dan memberi nama folder kerja yang tepat.

Tahapan Ekstraksi & Penamaan Folder:
  1. Cari berkas master CodeIgniter 3 (format .zip) yang diberikan guru.
  2. Ekstrak arsip ZIP tersebut ke direktori web root XAMPP: C:\xampp\htdocs\
  3. Ganti nama folder hasil ekstraksi menjadi: perpustakaan (huruf kecil semua tanpa spasi).
  4. Buka folder C:\xampp\htdocs\perpustakaan\ dan pastikan langsung terlihat folder application, system, dan berkas index.php.
Langkah 1: Buka Drive C: dan Folder xampp
Langkah 2a: Masuk ke Local Disk Acer (C:) lalu klik ganda folder xampp.
Langkah 2: Menemukan Folder htdocs
Langkah 2b: Di dalam folder xampp, temukan dan buka folder htdocs.
Langkah 3: Membuka Folder htdocs
Langkah 2c: Tampilan isi direktori C:\xampp\htdocs\ tempat meletakkan folder proyek web.
Langkah 4: Memberi Nama Folder perpustakaan
Langkah 2d: Ekstrak master CodeIgniter 3 di htdocs dan beri nama folder kerja menjadi perpustakaan.
3

Membuka Direktori Project pada Sublime Text 3

Membuka workspace agar seluruh file proyek tampil di panel navigasi sidebar.

Langkah-Langkah:
  1. Buka aplikasi Sublime Text 3.
  2. Pilih menu File → Open Folder... pada bilah menu atas.
  3. Pilih folder: C:\xampp\htdocs\perpustakaan, kemudian klik tombol Select Folder.
3B

Instruksi Memasukkan & Menempatkan Folder Assets (CSS, JS, Vendor)

Panduan lengkap penempatan aset visual frontend agar aplikasi 100% offline ready.

A. Instruksi Versi Teks (Langkah-Langkah Terstruktur):

Folder assets berisi seluruh file stylesheet, library Bootstrap 5, icon Bootstrap Icons, serta script JS. Ikuti petunjuk berikut untuk memasukkannya ke dalam proyek Anda:

Unduh Berkas Paket Assets (assets.zip)
Berisi Bootstrap 5, Bootstrap Icons, dan stylesheet app.css lokal siap pakai (Offline).
Download assets.zip (376 KB)
  1. Download atau Ambil Berkas: Klik tombol biru Download assets.zip di atas atau ambil berkas assets.zip dari flashdisk ujian Anda.
  2. Ekstrak / Salin: Ekstrak isi berkas ZIP tersebut (atau salin folder assets hasil ekstraksi).
  3. Paste ke Root Project: Buka direktori proyek web Anda di:
    C:\xampp\htdocs\perpustakaan\ (atau d:\APP\laragon\www\UKK\perpustakaan\)
    Lalu Paste (Tempel) folder assets tepat berdampingan dengan folder application dan system.
  4. Verifikasi Struktur Sub-Folder: Pastikan di dalam folder assets/ memiliki struktur sebagai berikut:
    🎨

    assets/css/

    style.css kustom perpustakaan

    📦

    assets/vendor/bootstrap/

    bootstrap.min.css & bootstrap.bundle.min.js

    ✨

    assets/vendor/bootstrap-icons/

    Font icon SVG & CSS lokal (Offline)

✅ Manfaat Offline Ready: Dengan menempatkan Bootstrap di dalam folder assets/ lokal, tampilan antarmuka aplikasi akan tetap rapi, responsif, dan elegan meskipun laptop di ruang ujian UKK sama sekali tidak terhubung ke jaringan internet.
B. Instruksi Versi Video (Simak Panduan Video Offline):

Jika Anda lebih mudah belajar secara visual, simak tutorial video panduan ekstraksi dan penataan folder aset CodeIgniter 3 di bawah ini:

4

Pembuatan Database & Tabel Manual di phpMyAdmin

Membuat basis data db_perpustakaan dan mendefinisikan skema 3 tabel utama.

Tahap A: Membuat Database Baru di phpMyAdmin

Karena penilaian UKK bersifat perorangan (mandiri), nama database dapat Anda sesuaikan dengan menambahkan nama/inisial Anda sendiri agar terisolasi dan tidak tertukar saat pengujian:

  1. Buka browser, akses: http://localhost/phpmyadmin/
  2. Klik menu New (Baru) di bilah navigasi sebelah kiri atau tab Databases.
  3. Ketikkan nama database:
    Standar modul: db_perpustakaan
    Atau variasi mandiri: db_perpustakaan_andi / db_perpustakaan_budi.
  4. Pilih Collation: utf8mb4_general_ci atau utf8mb4_unicode_ci (atau default), lalu klik tombol Create.
Tampilan Beranda phpMyAdmin
Gambar 4a: Tampilan beranda phpMyAdmin lokal di browser.
Membuat Database Baru di phpMyAdmin
Gambar 4b: Menginput nama database (misal: db_perpustakaan) lalu klik Create.

💡 Catatan Sinkronisasi: Jika Anda menamai database db_perpustakaan_andi, ingatlah bahwa nanti pada Modul 02 (application/config/database.php) baris 'database' => '...' harus diisi dengan nama yang sama persis!

Formulir Create New Table phpMyAdmin
Gambar 4c: Menentukan nama tabel dan jumlah kolom di database terpilih.
Mendefinisikan Struktur Kolom Tabel
Gambar 4d: Mengisi rincian nama kolom, tipe data (INT, VARCHAR, dll), panjang nilai, dan centang Auto Increment (A_I) untuk primary key.
Tahap B: Membuat Tabel 1 - users (11 Kolom)
Nama Kolom Tipe Data Panjang Keterangan
id INT 11 PRIMARY KEY, Auto Increment (A_I)
username VARCHAR 50 UNIQUE
password VARCHAR 255 Hash Bcrypt
nama VARCHAR 100 Nama Lengkap Siswa / Admin
nis VARCHAR 30 Null: Yes, UNIQUE
kelas VARCHAR 50 Null: Yes
foto VARCHAR 255 Null: Yes (Berkas Foto Profil Siswa)
role ENUM 'admin','user' Default: 'user'
status ENUM 'aktif','nonaktif' Default: 'aktif'
created_at DATETIME - Default: CURRENT_TIMESTAMP
updated_at DATETIME - Null: Yes, ON UPDATE CURRENT_TIMESTAMP

Klik tombol Save di pojok kanan bawah.

Tahap C: Membuat Tabel 2 - buku (12 Kolom)
Nama Kolom Tipe Data Panjang Keterangan
id INT 11 PRIMARY KEY, Auto Increment (A_I)
kode_buku VARCHAR 30 UNIQUE (Contoh: BK001)
judul VARCHAR 200 Judul Buku
penulis VARCHAR 150 Nama Penulis
penerbit VARCHAR 150 Nama Penerbit
tahun_terbit INT 4 Tahun Terbit
kategori VARCHAR 100 Kategori Buku
stok INT 11 Default: 0
rak VARCHAR 50 Lokasi Rak (Contoh: RPL-A01)
deskripsi TEXT - Null: Yes
gambar VARCHAR 255 Null: Yes (Berkas/URL Cover Buku)
created_at DATETIME - Default: CURRENT_TIMESTAMP
updated_at DATETIME - Default: CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

Klik tombol Save.

Tahap D: Membuat Tabel 3 - transaksi (8 Kolom)
Nama Kolom Tipe Data Panjang Keterangan
id INT 11 PRIMARY KEY, Auto Increment (A_I)
kode_transaksi VARCHAR 30 UNIQUE
user_id INT 11 INDEX (FK ke users.id)
buku_id INT 11 INDEX (FK ke buku.id)
tanggal_pinjam DATE - Tanggal Peminjaman
batas_kembali DATE - Tenggat Waktu (+7 hari)
tanggal_kembali DATE - Null: Yes
status ENUM 'dipinjam','dikembalikan' Default: 'dipinjam'

Klik tombol Save.

Tahap E: Menambahkan Akun Administrator Default & Data Awal (Seed)

Klik tab SQL di phpMyAdmin saat memilih database db_perpustakaan, salin dan jalankan kueri berikut untuk membuat akun administrator:

Query SQL - Insert Admin Default (admin / admin123)
SQL 
-- Password di bawah adalah hash Bcrypt valid dari 'admin123'
INSERT INTO `users` (`username`, `password`, `nama`, `role`, `status`) 
VALUES ('admin', '$2y$10$B0.hYWpoZvyg4.44q.WhVuygt7vGUg3QWQCq8Psnz/nzbXdBlaX6K', 'Administrator Perpustakaan', 'admin', 'aktif');
💡 Catatan: Kueri di atas menambahkan satu pengguna berstatus Admin agar Anda dapat langsung menguji login setelah Modul 04 selesai.
⚡ Opsi Alternatif: Import Skrip SQL Lengkap Langsung Jadi (1:1 Aplikasi Nyata)

Jika ingin langsung menyiapkan seluruh tabel (users, buku, transaksi) beserta 12 data buku referensi dan akun contoh, berkas SQL lengkap tersedia pada proyek Anda di:
database/db_perpustakaan.sql. Anda dapat mengimpor berkas ini langsung melalui menu Import di phpMyAdmin!

← Kembali ke Modul 00 Lanjut ke Modul 02: Konfigurasi CodeIgniter 3 →