Pertemuan 1

Penjelasan Kontrak Kuliah, Penegasan Tugas

 Penjelasan Kontrak Kuliah dan Penegasan Tugas
Tugas Projek (Kelompok)
1. Tugas project diadakan untuk memperoleh nilai dan pengganti UTS dan UAS. Tugas ini dikerjakan secara kelompok dengan 1
kelompok sebanyak 5 mahasiswa atau disesuaikan dengan jumlah mahasiswa dalam satu kelas.
2. Tugas dan Kelompok harus sesuai dan disinkronkan dengan tugas mata kuliah SIM, PSBO, dan WP2.
3. Bentuk tugas projek adalah membuat projek baru Aplikasi Web dengan Framework CodeIgninter atau mencari aplikasi web
Php Native (tidak menggunakan framework) yang sudah jadi kemudian ditransformasikan menjadi Aplikasi Web dengan
Framework CodeIgniter, dan membuat analisa kebutuhan user dan sistem dari web tersebut.
4. Aplikasi web Php Native harus ditunjukan ke dosen pengampu matakuliah, sebagai bukti bahwa aplikasi web native memang
ada dan jalan.
5. Aplikasi web Php Native diperbolehkan didapat dari berbagai sumber.
6. Setiap kelompok membuat repository proyek public di Github dan disampaikan ke dosen pengampu untuk dipantau. Setiap anggota
wajib bekerja di repository yang dapat dilihat/dibuktikan dari log repository.
 Pengenalan Git
Git diciptakan oleh Linus Torvalds yang merupakan salah satu sistem pengontrol versi (Version Control System) pada
proyek software. VCS bertugas mencatat setiap perubahan yang terjadi pada file proyek yang dikerjakan mandiri maupun
teamwork sehingga tiap orang yang terlibat dalam pengkodean proyek dapat berkolaborasi dengan memanfaatkan database
Git. Git dikenal juga sebagai Distributed Revision Control (VCS terdistribusi) yang merupakan penyimpanan database Git
tidak hanya berada dalam satu tempat saja.

Sumber : petanikode.com (2021)

 Pengenalan Git

Untuk materi Git selanjutnya dapat dipelajari di Modul Web Programming II

halaman 2 s.d 20
 Tugas

Tugas 1
a. Mahasiswa menginstal Git dan membuat akun di Githhub beserta
repository dengan format nama WP2_NamaMahasiswa.
b. Mahasiswa mengerjakan dan materi yang ada di pertemuan 2 yaitu
installasi Codeigniter dan mengerjakan latihan CI hingga controller
contoh 1.
c. Upload (push) file-file project latihan anda ke repository Github.
d. Demonstrasikan dan kumpulkan hasilnya di pertemuan selanjutnya.
 PERTEMUAN 2
DEMONTRASI TUGAS 1

1. Installagi CodeIgniter
2. Mengerjakan contoh1 menampilkan biodata
 PERTEMUAN 2
PENGENALAN CODE IGNITER

Pada bab ini diharapkan mahasiswa dapat memahami materi-materi fundamental yang diperlukan
sebelum mempelajari framework codeigniter, yaitu bagaimana cara melakukan installing perangkat-
perangkat lunak yang diperlukan untuk dapat bekerja dengan codeigniter seperti PHP, web server,
database server, dan framework codeigniter itu sendiri. Mahasiswa juga diharapkan dapat memahami
pola desain atau arsitektur dari Model-View-Controller (MVC), yang merupakan syaratk mutlak
dalam proses pengembangan aplikasi menggunakan codeigniter. Sebelum memulai materi ada
baiknya untuk mempersiapkan tools yang dibutuhkan untuk mendukung pembelajan materi web
programming 2. tools yang dibutuhkan bisa di download di link berikut:

https://drive.google.com/open?id=1RrGuGgMBiGRc_Qa8N905yA7w0LotrkNc
 PERTEMUAN 2
PENGENALAN CODE IGNITER Lanjutan...

1.Framework Web
Web Application Framework (WAF), atau sering disingkat
web framework, adalah Suatu kumpulan kode berupa
pustaka (library) dan alat (tool) yang dipadukan
sedemikian rupa menjadi kerangka kerja (framework)
guna memudahkan dan mempercepat proses
pengembangan aplikasi.
 PENGENALAN CODE IGNITER Lanjutan...

Framework web untuk PHP:

 Codeigniter
 Yii
 Slim framework
 Zend framework
 Laravel
 Symfony
 CakePHP
 Phalcon
 Kohana
 FuelPHP, dll

Sebagian besar dari framework di atas mengimplementasikan pola desain Model-View-

Controller (MVC), yang memisahkan bagian kode untuk penanganan proses bisnis dengan
bagian kode untuk keperluan presentasi (tampilan).
 PENGENALAN CODE IGNITER Lanjutan...

2. Codeigniter
Codeigniter adalah framework web utnuk bahasa pemrograman PHP, yang dibuat oleh Rick
Ellis pada tahun 2006, penemu dan pendiri EllisLab (www.ellislab.com). EllisLab merupakan
suatu tim kerja yang berdiri pada tahun 2002 yang bergerak di bidang pembuatan software dan
tool untuk para pengembang web. Sejak tahun 2014 sampai sekarang , EllisLab telah
menyerahkan hak kepemilikan codeigniter ke British columbia Institue of Technology (BCIT)
saat ini situs resmi codeigniter adalah www.codeigniter.com.
3. Instalasi Software
Software yang dibutuhkan pada pembelajaran kali ini yaitu:
a. Web server (Apache2Triad, WAMPP server, Xampp Server, dll)
Untuk Xampp server bisa didownload di https://www.apachefriends.org/
b. Text Editor (notepad, notepad++, sublime text, atom, dll)
Pembelajaran kali ini akan menggunakan text editor Atom, karena bersifat Opensource.
Bisa didownload di https://atom.io/
c. Codeigniter https://codeigniter.com/
d. Web Browser (Mozila Firefox, google chrome, IE, Safari, UCBrowser, Opera, dll).
 PENGENALAN CODE IGNITER Lanjutan...

4. Instalasi Codeigniter
a. Download Package codeigniter pada situ resminya yang sudah disebutkan di atas.
b. Saat ini versi stabil dari codeigniter adalah 3.1.6
c. Setelah di download ektrak file codeigniter pada direktori C:\xampp\htdocs gambar bisa
dilihat pada modul halaman 3
d. lalu ubah folder Codeigniter menjadi sesuai keinginan kita. disini saya akan ubah folder
codeigniter tersebut menjadi pustaka-booking. Lihat gambar pada modul halaman 4
e. Setelah itu, sekarang coba akses folder tersebut melalui browser.
f. Jangan lupa untuk menyalakan XAMPP terlebih dahulu.
g. lalu akses dengan url http://localhost/nama_folder_project pada tutorial kali ini saya
beri nama dengan pustaka-booking. Lihat gambar pada modul halaman 4
h. Jika sudah tampil halaman Welcome Codeigniter, itu artinya anda telah berhasil
melakukan instalasi codeigniter
 PENGENALAN CODE IGNITER Lanjutan...

5. Struktur Folder Codeigniter

 Di dalam folder codeigniter terdapat 3 folder utama yaitu Application, System, User Guide. Folder
application berguna sebagai tempat untuk mendevelop aplikasi nanti, Folder system berisi library atau
kumpulan fungsi-fungsi dasar Codeigniter (CI), sedangkan User Guide berisi sebagai buku panduan atau
dokumentasi dari codeigniter.

 Lalu kita fokus pada folder application/config dan semua berawal dari file routes.php Apabila kita buka
file tersebut, maka kita akan menemukan default_controller yang telah terisi dengan nama
“welcome”, yang mana default_controller ini berfungsi ketika user tidak melakukan atau memasukkan
apapun pada URL browser, maka secara otomatis mencari controller dengan nama “welcome”.

Lihat gambar pada modul halaman 5

 PENGENALAN CODE IGNITER Lanjutan...

 Controller Welcome itu sendiri bisa anda temukan pada folder application/controllers. Pada file

welcome_controller tersebut terdapat fungsi index yang gunanya meload bagian view atau memanggil

halaman views dengan nama welcome_messages sebagai berikut.

 Sekarang lihat pada bagian views yang terletak pada application/views. Pada folder view tersebut terdapat

file dengan nama welcome_message. Pada bagian inilah semua html dan css akan diletakkan yang nantinya

akan ditampilkan ke pengunjung. Lihat gambar pada modul halaman 6

 Contoh 1 Menampilkan Biodata Menggunakan CodeIgniter

• Contoh codeigniter dalam menampilkan biodata bisa dilihat gambar

pada modul halaman 7

Tugas 2
a. Mahasiswa mengerjakan dan mengimplementasikan materi yang ada di pertemuan 3 yaitu
mengerjakan contoh1,contoh2,contoh3, dan menghilangkan index.php
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan kumpulkan hasilnya di pertemuan selanjutnya
 PERTEMUAN 3
DEMONSTRASI TUGAS 2

Hasil Pengerjaan contoh1,contoh2,contoh3, dan

menghilangkan index.php
 PERTEMUAN 3
MODEL, VIEW, CONTROLLER

Pada bab ini diharapkan mahasiswa dapat memahami secara detail tentang pembuatan dan
penggunaan komponen model, view, controller yang merupakan kunci utama dalam menggunakan
framework codeigniter.

1. Pengertian MVC
Pada pengertian codeigniter di atas tadi di jelaskan bahwa codeigniter menggunakan metode
MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih jauh dalam
belajar codeigniter.
MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga komponen yaitu
model, view dan controller.
 MODEL, VIEW, CONTROLLER Lanjutan...

a. Model
Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang akan digunakan
oleh aplikasi.
Sebagai catatan, Semua model harus disimpan di dalam folder application\models
b. View
View merupakan bagian yang menangani halaman user interface atau halaman yang muncul
pada user(pada browser). tampilan dari user interface di kumpulkan pada folde
Application/views
c. Controller
Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view
Untuk bentuk umum dan contoh-contoh penggunaan model, view, controller serta hasilnya bisa
dilihat pada modul halaman 9.
 MODEL, VIEW, CONTROLLER Lanjutan...

2. Menetukan controller standar (Default)

Controller standar (default) adalah controller yang akan dipanggil secara otomatis ketika
user tidak menyertakan nama controller di dalam URI.
Contoh penulisan URI:
http://localhost/rental_mobil/index.php

pada contoh permintaan di atas, kita tidak menyertakan nama controller yang akan dipanggil
(segmen pertama). Permintaan tersebut akan memanggil controller standar yang sudah
didefinisikan oleh codeigniter hasilnya bisa dilihat di modul halaman 13
 MODEL, VIEW, CONTROLLER Lanjutan...

Controller standar dapat ditentukan sendiri sesaui dengan keinginan, yaitu dengan cara melakukan

konfigurasi pada file application\config\routes.php. cari baris code berikut:

$route[‘default_controller’] = ‘welcome’;

Ubah kata welcome dengan nama controller yang diinginkan untuk dijadikan controller standar
 MODEL, VIEW, CONTROLLER Lanjutan...
3. Aturan merancang Model, View, dan Controller
a. Model
Secara umum perancangan model dapat dibuat menggunakan aturan berikut:
1) Model harus memiliki atribut yang dapat mewakili element tertentu.
2) Model seharusnya berisi kode kode yang menangani proses bisnis untuk data bersangkutan,
misalnya untuk melakukan proses validasi data.
3) Model boleh berisi kode kode yang dugunakan untuk memanipulasi data, misalnya untuk
menambah baris data baru, mengubah baris data, dan menghapus baris data pada sebuah tabel
yang terdapat dalam database.
Model seharusnya tidak berisi kode kode yang berkaitan langsung dengan permintaan yang
dilakukan oleh user melalu URL (tidak berisi $_GET maupun $_POST). Pekerjaan seperti ini
seharusnya dilakukan oleh controller.
 MODEL, VIEW, CONTROLLER Lanjutan...

Model seharusnya tidak berisi kode kode yang berkaitan dengan presentasi (tampilan) halaman
web yang akan disajikan ke hadapan user. Pekerjaan semacam ini seharusnya dilakukan oleh view.
b. View
Berikut ini aturan yang dapat digunakan untuk merancang view.
1) View harus berisi kode kode yang bersifat presentasional, biasanya berupa kode HTML. View
juga dapat berisi perintah perintah PHP sederhana yang masih berkaitan dengan proses
pembuatan tampilna, misalnya untuk menampilkan data yang dihasilkan oleh model tertentu.
2) View seharusnya tidak berisi kode PHP yang melakukan akses data secara langsung ke
database. Pekerjaan semacam ini sebaiknya dilakukan oleh model.
3) View seharunsnya menghindari kode PHP yang mengakses secara langsung permintaan dari
user (tidak berisi $_GET maupun $_POST). Tugas ini sebaiknya didelegasikan ke controller
 MODEL, VIEW, CONTROLLER Lanjutan...

c. Controller
Berikut ini aturan yang dapat digunakan untuk merancang controller.
1) Controller boleh mengakses $_GET, $_POST, dan variabel variabel PHP lainnya yang
berkaitan dengan permintaan user.
2) Controller boleh membuat objek (instance) dari kelas kelas model dan mengarahkan ke view
(jika model bersangkutan menghasilkan data yang perlu ditampilkan ke user)
3) Controller seharusnya tidak berisi kode kode yang mengakses data secara langsung dari
database. Tugas seperti ini sebaiknya dilakukan oleh model. Dan controller tinggal
menggunakannya saja.
4) Controller seharusnya tidak berisi kode kode HTML yang diperlukan untuk tujuan presentasi.
Tugas ini sebaiknya dilakukan oleh view.
 MODEL, VIEW, CONTROLLER Lanjutan...

4. Parsing Data Ke View

Untuk memparsing data dari controller ke view, anda dapat memparsingnya dengan
menggunakan bantuan array. Jadi data yang akan diparsing kita masukkan ke array.
Perhatikan contoh cara memparsing data ke view codeigniter berikut ini. Buka controller
belajar.
Contoh5 parsing data dari controller ke view
Lihat di modul halaman 16 s/d 20

Tugas 3
a. Mahasiswa mengerjakan dan mengimplementasikan materi yang ada di pertemuan 4 yaitu membuat template
sederhana dan dinamis dan setting base_url()
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan kumpulkan hasilnya di pertemuan selanjutnya
 PERTEMUAN 4
MEMBUAT TEMPLATE (TEMPLATING) WEB SEDERHANA
Pada pertemuan ini, mahasiswa diharapkan mampu membuat template sederhana. Mahasiswa juga
diharapkan mampu membuat template web dinamis.
Pada codeigniter, halaman yang dipecah-pecah dapat dengan mudah untuk me-load halaman-
halaman tersebut sesuai dengan keinginan.

1. Membuat Template Sederhana

Untuk membuat dan menampilkan template sederhana yang akan dibuat, dibutuhkan pembuatan
controller dan view agar hasilnya bisa dilihat.
Untuk tahapan Pembuatannya bisa dilihat pada modul halaman 21 s/d 25
 MEMBUAT TEMPLATE (TEMPLATING) WEB SEDERHANA Lanjutan...

Selain view dan controller, agar tampilan web menjadi lebih rapih dan bagus, maka

dibutuhkan css. Script css bisa dilihat pada modul halaman 24-25.
 MEMBUAT TEMPLATE (TEMPLATING) WEB SEDERHANA Lanjutan...

Seteleah membuat 3 file di atas. sebelum di jalankan melalui browser, terlebih dahulu perlu dilakukan
seting base_url( ) untuk memudahkan dalam menghubungkan file view dengan file css nya.

2. Seting base_url () pada codeigniter

Untuk melakukan seting base_url( ), dapat dilakukan melalui file config.php yang ada di dalam
application/config/config.php. Langkah-langkahnya bisa dilihat pada modul halaman 26
Langkah selanjutnya membuat controller untuk mengontrol atau mengeksekusi. Lihat di modul
halaman 27 s/d 29
 TUGAS
a. Mahasiswa mengerjakan dan mengimplementasikan materi yang ada di
pertemuan 5 yaitu menambahkan validasi data dengan form validasi pada
controller matakuliah
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan kumpulkan di pertemuan selanjutnya
 PERTEMUAN 5
DEMONSTRASI TUGAS 4

menambahkan validasi data dengan

form validasi pada controller
matakuliah..
 PERTEMUAN 5
MEMBUAT FORM VALIDASI PADA CODEIGNITER

1. Form Validasi

Pada pertemuan ini mahasiswa diharapkan dapat memahami tentang validasi data dan
bagaimana membuat form validasi data pada codeigniter dalam penginputan data. Seperti
misalnya dalam menentukan form, apa saja yang wajib untuk diisi, form dengan format input
tertentu, membuat konfirmasi password dan lainnya.
Pembuatan form validasi pada codeigniter diperlukan adanya pemanggilan library
form_validation pada codeigniter.
Pada saat membuat dan menangani form, proses validasi data merupakan bagian yang sangat
penting untuk diperhatikan. Validasi data diperlukan untuk menjaga keabsahan dari data yang
dikirim oleh user ke dalam aplikasi
 MEMBUAT FORM VALIDASI PADA CODEIGNITER Lanjutan...

2. Mekanisme Validasi Data di dalam Form

a. Form ditampilkan ke halaman web
b. User mengisi data ke dalam form tersebut
c. Jika terdapat satu atau beberapa data yang salah, maka form akan ditampilkan ulang, biasanya
disertai dengan pesan kesalahan.
d. Proses ini akan diulang sampai semua data yang diminta di dalam form diisi dengan benar.
Proses pemeriksaan data yang dikirim oleh user di dalam form dilakukan di dalam kontroler,
demikian juga dengan pendefinisian aturan (rule) dari datanya.
 MEMBUAT FORM VALIDASI PADA CODEIGNITER Lanjutan...

3. Memuat Library Form_validation

Untuk mengimplementasikan proses validasi data, yang diperlukan adalah memuat librari
dari form_validation terlebih dahulu. Proses pemuatan librari tersebut dapat dilakukan di bagian
konstruktor controller.

$this->load->library(‘form_validation’);
Atau bisa juga dilakukan melalui file autoload yang ada dalam folder
application/config/autoload.php
Untuk langkah pemuatan library melalui autoload dan contoh pemakaian form_validasi bisa
dilihat pada modul halaman 31-32
 MEMBUAT FORM VALIDASI PADA CODEIGNITER Lanjutan...

untuk selengkapnya tentang membuat form validation pada codeigniter anda dapat membacanya pada
user_guide yang sudah di sediakan oleh codeigniter pada project CI anda.
http://localhost/malasngoding/user_guide/libraries/form_validation.html#the-form

Tugas 5.1
a. Mahasiswa menginstal Git dan membuat akun di Githhub beserta repository dengan format nama
WP2_Perpus_NamaMahasiswa.
b. Mahasiswa mengerjakan materi yang ada di pertemuan 6 yaitu persiapan dalam membuat aplikasi pustaka booking
yang berisi setting base_url, membuat database, mengatur koneksi database, membuat model user dan model
buku.
c. Upload (push) file-file project latihan anda ke repository Github
d. Demonstrasikan dan kumpulkan di pertemuan selanjutnya
 Tugas 5.2
1. Sistem Informasi Nasi Goreng Delivery mempunyai
kebutuhan yaitu User dan Kebutuhan Sistem.
Kebutuah sistem yaitu form master atau CRUD yang
terdiri dari sistem dapat menampilkan data
pemesanan (Alfarizi et al., 2020). Buatlah Form
Create, Read, Update dan Delete Data Menu pada
table/entitas menu Nasi Goreng Delivery dengan
menggunakan Framework CodeIgniter dan
menggunakan konsep MVC.

2. Demonstrasikan dan kumpulkan di pertemuan

selanjutnya.

Sumber : Alfarizi, S., Mulyawan, A. R., Gunawan, D., & Aryanti,

R. (2020). Implementasi Unified Modelling Language Pada
Sistem Informasi Nasgor Delivery Berbasis Web. Jurnal
Interkom, 15(2). https://doi.org/10.35969/interkom.v15i2.86
 PERTEMUAN 6
DEMONSTRASI TUGAS 5

setting base_url, membuat database, membuat

model user dan model buku
 PERTEMUAN 6
STUDI KASUS PUSTAKA BOOKING

Pustaka-booking merupakan aplikasi reservassi atau booking peminjaman buku pada sebuah

perpustakaan yang dilakukan secara online dengan melibatkan anggota, admin dan aplikasi pustaka-

booking. Aplikasi pustaka-booking ini dibagi menjadi 2 jenis tampilan yaitu tampilan bagian backend

dan tampilan frontend. Untuk pembahasan Web Programming 2 ini hanya membahas tampilan

backend saja, sedangkan untuk frontend nya akan di bahas di mata kuliah web programming 3 di

semester mendatang..
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Aplikasi pustaka booking adalah aplikasi berbasis web yang dibuat

untuk booking sebuah buku untuk dipinjam. Tujuan dibuatkannya
aplikasi ini agar memudahkan para pengguna dalam mencari buku dan
ingin meminjam buku tersebut. Jadi sebelum di datang ke perpustakaan
dan meminjam sebuah buku. Pengguna bisa mencari terlebih dahulu
buku yang akan dipinjam, untuk memastikan bahwa di perpustakaan
yang akan dia kunjungi benar bahwa buku tersebut tersedia.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Alur logika sistem booking pustaka ini yaitu seseorang yang ingin
melakukan booking diharuskan mendaftar menjadi anggota terlebih
dahulu, selanjutnya ketika sudah menjadi anggota, baru dapat
melakukan booking terhadap buku yang akan dipinjam. Setelah
melakukan booking, anggota diharuskan mengambil buku yang telah
dibooking dengan cara datang langsung ke perpustakaan dalam waktu
1x24 jam. Kemudian konfirmasi ke petugas atau admin untuk
diambilkan buku yang telah dibooking berdasarkan bukti booking
melalui aplikasi..
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Pustaka-booking secara utuh memiliki kebutuhan sebagai berikut:

Kebutuhan user:
1. Admin
• Seorang admin dapat login ke dalam aplikasi pustaka-booking
• Seorang admin dapat menambah, melihat, mengubah, dan
menghapus, data buku pada aplikasi pustaka-booking.
• Seorang admin dapat melihat data booking dan melanjutkan proses
booking sampai buku dipinjam.
• Seorang admin dapat memproses pengembalian buku yang sudah
selesai dipinjam.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

2. Pengunjung
• Pengunjung dapat melihat-lihat data buku yang ada pada palikasi pustaka-
booking
• Pengunjung dapat melakukan registrasi untuk menjadi anggota pustaka-
booking
• Pengunjung dapat memberikan komentar melalui buu tamu
 STUDI KASUS PERPUSATAKAAN Lanjutan...

3. Anggota
• Anggota dapat login ke dalam sistem aplikasi pustaka-booking.
• Anggota dapat melakukan booking terhadap buku yang ada pada aplikasi
pustaka-booking
• Anggota dapat mencetak bukti booking buku untuk dibawa ketika akan
mengambil buku yang dibooking.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Kebutuhan sistem:
• Sistem akan melakukan validasi username dan password ketika ada
seorang user yang melakukan login
• Sistem juga melakukan validasi data buku dan anggota yang akan diinput
ke dalam database
• Sistem akan memblokir dan memberikan notif apabila ada seorang
pengunjung yang meng-klik tombol booking tanpa melakukan login
terlebih dahulu.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

• Sistem akan menghapus secara otomatis data booking yang sudah lewat
dari 1 x 24 jam
• Sistem dapat mengkalkulasi denda yang harus dibayarkan ketika ada
anggota yang terlambat mengembalikan buku.
• Sistem dapat menampilkan buku yang dicari oleh user berdasarkan kriteria
pencarian.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

1. Persiapan Membuat Aplikasi Perpustakaan

Pada tahap persiapan ini terdiri dari instalasi codeigniter, pemilihan tool pendukung, setting
base_url, load librari, helper, dan segala yang dibutuhkan. Tetapi disini tidak akan membahas
instalasi codeigniter karena sudah sangat mudah dijelaskan di pertemuan awal. Disini hanya
kan membahas mulai dari seting base_url dan seterusnya.
Diperlukan beberapa penyesuaian atau pengaturan pada codeigniter sebelum mulai digunakan
untuk membuat aplikasi perpustakaan. Semua pengaturan atau penyesuaian yang dilakukan di
sini sesuai dengan kebutuhan untuk membuat aplikasi perpustakaan dengan codeigniter.
diantaranya adalah:
 STUDI KASUS PERPUSATAKAAN Lanjutan...

2. Setting Base URL

Pengaturan base url adalah pengaturan URL dasar dalam sebuah project aplikasi yang dibuat
dengan menggunakan codeigniter. Pengaturan base url di codeigniter terdapat di dalam file
config.php di dalam folder project codeigniter.

Pustaka-booking/application/config/config.php

Helper dan Library bisa dibilang seperti perpusatakaan coding dengan fungsi-fungsi yang berbeda
dan memiliki kegunaan masing-masing. Tinggal memanggil dan menggunakannya saja. Kita juga
bisa membuat helper atau library kita sendiri di codeigniter untuk memudahkan pekerjaan kita.
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Di tahap ini kita akan men-load atau membuka beberapa library dan helper codeigniter yang kita
butuhkan dalam pembuatan aplikasi rental mobil ini. Untuk menjalankan atau membuka library
dan helper secara otomatis di codeiginter, kita bisa mengaturnya dalam file autoload.php dalam
folder application/config/autoload.php.

Pustaka-booking/application/config/autoload.php

Library yang akan kita load secara otomatis adalah database, session dan form_validation.
Cari sintak. Untuk lebih lengkapnya langkah-langkah bisa dilihat pada modul halaman 36-37
 STUDI KASUS PERPUSATAKAAN Lanjutan...

3. Merancang & Membuat Database Aplikasi Perpustakaan dan Konfigurasi database di

Codeigniter

Pembuatan database dilakukan menggunakan fitur dari bawaan web server xampp yaitu

phpmyadmin. Nama database dan tabel apa saja yang dibuat dapat dilihat pada modul halaman

37-38 sedangkan untuk cara mengkoneksikan database dengan projek pustaka-booking bisa

dilihat pada modul halaman 39-40.

 STUDI KASUS PERPUSATAKAAN Lanjutan...

5. Membuat Model Yang Terstruktur dan Efisien untuk CRUD

Pada tahap ini akan dibuat fungsi-fungsi yang bisa gunakan berulang kali, tanpa harus repot banyak-
banyak membuat fungsi pada model. contohnya untuk insert data ke database, hanya buat satu fungsi
untuk insert data ke database. Dan bisa kita gunakan secara berulang-ulang kali. Begitu juga dengan
fungsi edit, hapus dan update data pada database.
Buat 2 buah file model dengan nama ModelUser.php dan ModelBuku.php. perlu diperhatikan untuk
Penamaan Controller dan Model harus diawali dengan huruf besar di codeigniter 3. Memang tidak
masalah jika dibuat dengan nama kecil, tetapi akan menyalahi aturan penggunaan codeigniter yang benar
dan akan terjadi trouble saat diupload dihosting. Listing modelnya bisa dilihat pada modul halaman 40-
42
 STUDI KASUS PERPUSATAKAAN Lanjutan...

Dengan model seperti di atas, Untuk menginput data ke database kita bisa menggunakan
function simpan(), untuk menampilkan data atau mengambil data dari database kita bisa
menggunakan function tampil(), untuk menghapus data dari database kita bisa menggunakan
function hapus(), dan untuk mengupdate data pada database kita bisa menggunakan function
ubah()

Kemudian kita harus mengatur autoload model di application/config/autoload.php. agar

model-model yang sudah dibuat bisa digunakan dan di load secara otomatis. Jadi tidak perlu
lagi kita load dari controller. Tahapannya bisa dilihat pada modul halaman 42
 TUGAS

Tugas 6
a. Kerjakan Soal yang ada di materi pertemuan 7
b. Upload (push) file-file project latihan anda ke repository Github
c. Kumpulkan hasil pengerjaan pada pertemuan 7
 PERTEMUAN 7
DEMONSTRASI TUGAS 6

Aplikasi Sederhana Digital

Learning Management System
(Di-Lemas)
 PERTEMUAN 7
Studi Kasus Digital Learning Management System (Di-Lemas)
Pada penelitian Implementasi Model Prototipe Pada Digital Learning Management System (Di-Lemas).
Metode digital learning memberikan kemudahan dan kelancaran proses belajar-mengajar bagi siswa
dan guru. Dengan metode digital learning, guru dapat meningkatkan intensitas komunikasi interaktif
dengan siswa di luar jam kelas resmi. Metode digital learning memberikan fleksibilitas kepada pengajar
untuk memberikan akses kepada siswa untuk mendapatkan referensi ilmiah yang berkaitan dengan
pelajaran yang mungkin tidak diperoleh selama jam sekolah dan kegiatan praktikum. Referensi ini bisa
berupa makalah ilmiah, artikel populer, atau buku elektronik. Hal ini akan sangat berguna bagi siswa,
karena selain meningkatkan pemahaman siswa pada setiap mata pelajaran, referensi metode
pembelajaran melalui media elektronik dapat menjadi salah satu cara menarik perhatian siswa sehingga
pembelajaran menjadi flexibel, dinamis, kompeten dan antisipatif sesuai dengan misi SMK Pancakarya
Tangerang. Harapannya adalah lulusan SMK Pancakarya Tangerang, akan memiliki kualitas dan daya
saing yang tinggi dalam persaingan global terutama dalam bidang Ilmu Pengetahuan dan Teknologi
(IPTEK).
 PERTEMUAN 7
REVIEW MATERI

Sesuai tahapan dalam mengembangkan Digital Learning Management

System(Di-LeMas) secara detail diuraikan berdasarkan analisa sistem,
berbagai fungsional yang dibutuhkan oleh sistem sebagai berikut:
Kebutuhan Security System, Kebutuhan User, Desain dan Implementasi
user Interface.
Sumber:
Judul : Implementasi Model Prototipe Pada Digital Learning Management System (Di-Lemas)
Penulis : Sriyadi, Qisthina Izazi Shaleha,Narti, Meiva Eka Sri Sulistyawati
Jurnal : Jurnal Teknik Komputer AMIK BSI
ISSN : P-ISSN 2442-2436, E-ISSN: 2550-0120
Sriyadi, Shaleha, Q. I., Narti, & Sulistyawati, M. E. S. (2020). Implementasi Model Prototipe Pada Digital
Learning Management System (Di-Lemas). V(1), 135–138. https://doi.org/10.31294/jtk.v4i2
 PERTEMUAN 7
REVIEW MATERI

Untuk mengetahui sejauh mana pemahaman yang sudah anda dapat tentang materi

dasar MVC dari pertemuan 1 sampai pertemuan 6, maka di pertemuan 7 ini dibuatlah

program berdasarkan studi kasus D-Lemas dengan konsep MVC yang sudah

dijelaskan di pertemuan 1 s/d 6. Dari membuat tampilan input sampai menampilkan

hasil submit dari tampilan input tersebut. Berikut studi kasis yang harus anda

selesaikan:
 TUGAS

1. Pada Program D-Lemas seorang Admin dapat menginput Data Siswa.

2. Buatlah tampilan form input data siswa di point 1 meliputi input

nama siswa, NIS, kelas, tanggal lahir, tempat lahir, alamat, jenis
kelamin menggunakan radio button, agama berupa pilihan
combo/select Islam, Kristen, Katolik, Budha, Hindu, Protestan,
Khonghucu.
 TUGAS

3. Buatlah sebuah controller dan model untuk memproses inputan

form sehingga hasilnya di tampilkan ke file view yang berisi hasil
dari proses submit dari form input.

4. Pada tampilan hasil, buatlah link untuk kembali menuju file input
form pada point 2
Tugas 7

a. Mahasiswa mengerjakan dan mengimplementasikan materi yang

ada di pertemuan 9 yaitu membuat halaman login dan membuat
halaman beranda admin
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan Kumpulkan pada pertemuan selanjutnya
 PERTEMUAN 8
UTS

Ujian Tengah Semester

 PERTEMUAN 9
DEMONSTRASI TUGAS 7

Membuat halaman login, halaman

utama admin(backend), dan controler
admin
 PERTEMUAN 9
MEMBUAT FORM LOGIN DAN PESAN NOTIFIKASI

Pada pertemuan ini mahasiswa diharapkan mampu membuat form Login dan memahami pembuatan
notifikasi kesalahan dalam inputan form.
1. Membuat Halaman Login
Halaman login akan kita buat di halaman utama pada saat aplikasi pustaka-booking bagian admin
diakses.
Form login akan kita buat pada controller Autentifikasi. Controller ini akan kita jadikan controller
default. Cara untuk mengaturnya sudah dijelaskan di pertemuan-pertemuan awal.
 MEMBUAT FORM LOGIN DAN PESAN NOTIFIKASI
Lanjutan....

Untuk membuat tampilan-tampilan dari aplikasi pustaka booking akan menggunakan

template dari bootstrap yaitu sb admin 2 kenapa mnggunakan template sb admin 2

ini, karena template sb admin 2 ini sudah menggunakan botstrap terbaru yaitu versi

4. Untuk itu kita harus mempersiapkan terlebih dahulu template sb admin 2 tersebut.

Sb admin 2 sudah kami sediakan di folder tools.

 MEMBUAT FORM LOGIN DAN PESAN NOTIFIKASI
Lanjutan....

Langsung saja extract file rar startbootstrap-sb-admin-2-gh-pages.rar kemudian cari

folder css, img js, vendor kemudian copy paste ke dalam folder project kalian.

Dalam hal ini adalah folder pustaka-booking. Langkahnya dapat dilihat pada modul

halaman 46-54
 MEMBUAT FORM LOGIN DAN PESAN NOTIFIKASI
Lanjutan....
Setelah membuat form login, selanjutnya adalah membuat halaman utama admin digunakan
untuk mengelola data-data master atau konten yang akan ditampilkan pada halaman utama
anggota.

Dalam pembuatan halaman admin, template yang digunakan tetep template dari sb admin 2.
Untuk itu coba kita buka index.html dari sb admin 2 menggunakan editor yang kamu
miliki. Selanjutnya copy isi script dari index.html, kemudian buat view baru dalam folder
Application/views/admin/ beri nama index.php lalu paste scriptnya. Selanjutnya file
index ini akan dipecah menjadi 5 file view yaitu: header.php, index.php, footer.php,
sidebar.php, dan topbar.php
 MEMBUAT FORM LOGIN DAN PESAN NOTIFIKASI
Lanjutan....

Scriptnya dapat dilihat pada modul halaman 52-74

Tugas 8
a. Mahasiswa mengerjakan dan mengimplementasikan latihan yang ada di materi
pertemuan 10 yaitu membuat helper dan membuat halaman registrasi member,
membuat halaman my profile dan ubah profile.
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan Kumpulkan hasil pengerjaan pada pertemuan selanjutnya
 PERTEMUAN 10
DEMONSTRASI TUGAS 8

Membuat helper, view blok, view

gagal, dan membuat halaman
registrasi member, my profile, dan
ubah profile
 PERTEMUAN 10
MEMBUAT FORM REGISTER USER

Pada pertemuan ini mahasiswa diharapkan dapat memahami konsep registrasi dan
membuat form input registrasi
Dalam kasus ini, sementara form registrasi bisa diakses melalui halaman login dengan link
registrasi user. Dikarenakan pada materi web programming 2 ini pembahasannya belum
sampai membuat halaman frontend. Yaitu halaman member dan pengunjung.
Pembahasannya akan ada pada meteri web programming 3 di semester selanjutnya. Jika
sudah sampai halaman frontend, barulah link unutk mengakses form registrasi akan
diletakkan pada bagian frontend.
 MEMBUAT FORM REGISTER USER Lanjutan...

1. Membuat Helper
Untuk mengamankan conten web, maka harus dibuatkan security
pada web tersebut salah satunya pengecekan status login dari
seseorang user yang ingin mengakses konten dalam web. Agar
sebuah security dibuat dan bisa digunakan disemua halaman web,
maka perlu dibuatkan helper. Caranya dapat dilihat pada modul
halaman 68
 MEMBUAT FORM REGISTER USER Lanjutan...

Dan sebagai pesan error atau penolakan terhadapa suatu

aksesnya, kita juga akan membuat tampilan pesan untuk
pemberitahuan akses ditolak atau di blok. Scriptnya lihat
modul halaman 69-74
 MEMBUAT FORM REGISTER USER Lanjutan...

Agar tidak diblok atau di tolak aksesnya, maka seoarng harus

melakukan registrasi menjadi anggota terlebih dahulu. Untuk itu
perlu dibuatkan halaman form registrasi. Langkahnya lihat pada
modul halaman 74-79

Setelah user bisa login. Maka di halaman admin perlu ditampilkan

my profile dan terdapat fitur untuk mengubah profile
 MEMBUAT FORM REGISTER USER Lanjutan...

Buatlah controller baru beri nama User.php kemudian simpan dalam folder
Application/controlles/ unutk scriptnya bisa dilihat pada modul halaman 80-85

Tugas 10
a. Mahasiswa mengerjakan dan mengimplementasikan latihan yang ada di materi
pertemuan 11 yaitu membuat CRUD kategori buku
b. Upload (push) file-file project latihan anda ke repository Github
c. Demonstrasikan dan Kumpulkan hasil pengerjaan pada pertemuan selanjutnya
 PERTEMUAN 11
MEMBUAT CRUD KATEGORI BUKU

membuat CRUD Data Kategori

Buku
 PERTEMUAN 11
MEMBUAT CRUD KATEGORI BUKU

1. Menampilkan dan menambah Kategori baru

Dikarenakan buku terdiri dari berbagai jenis, maka buku buku harus dikelompokkan
agar mudah dalam pencarian. pada tahapan ini kita akan membuat script untuk
menampilkan data kategori yang sudah diinput dan menambahkan kategori buku yang
baru. Scriptnya bisa dilihat pada modul halaman 80-83
 MEMBUAT CRUD KATEGORI BUKU Lanjutan..

2. Menghapus data kategori buku

Selain data kategori buku bisa ditampilkan dan ditambahkan, kategori buku juga
harus bisa dihapus. Maka perlu dibuatkan scriptnya untuk menghapus data kategori
tersebu. Untuk scriptnya bisa dilihat pada modul halaman 83-84
 TUGAS
Tugas 11
a. Mahasiswa mengerjakan dan mengimplementasikan latihan yang ada di materi
pertemuan 12 yaitu membuat form tambah buku dan tampilan data buku,
membuat modelbuku.php, mengubah dan update data buku, dan menghapus data
buku.

b. Upload (push) file-file project latihan anda ke repository Github

c. Demonstrasikan dan Kumpulkan hasil pengerjaan pada pertemuan selanjutnya

 PERTEMUAN 12
DEMOSTRASI TUGAS 10

Membuat CRUD data Buku

 PERTEMUAN 12
MEMBUAT CRUD DATA BUKU
Pada pertemuan ini mahasiswa diharapkan dapat memahami dan membuat
aplikasi CRUD untuk data-data master.

Dalam kasus ini akan membuat CRUD untuk data-data buku, sesuai
dengan gambaran perancangan database di pertemuan sebelumnya. Data-
data buku yang akan disimpan adalah data id buku, judul buku, pengarang,
penerbit, tahun terbit, isbn, jumlah buku, lokasi, gambar dan tanggal input.
 MEMBUAT CRUD DATA BUKU Lanjutan...

Langkah pertama akan dibuatkan file untuk menampilkan data buku.

Yaitu controller buku.php dengan beberapa method untuk tampil data,
simpan data, ubah data, dan hapus data

Buatlah controller baru beri nama Buku.php lalu simpan dalam folder
Application/controllers/.
 MEMBUAT CRUD DATA BUKU Lanjutan...

Setelah membuat controller, selanjutnya tambahkan beberapa methode

dalam controller tersebut:

1. Index()

Pada method ini script yang dibuat adalah script untuk menampilkan
dan menyimpan data buku
 MEMBUAT CRUD DATA BUKU Lanjutan...
2. ubahBuku()

Pada method ini script yang dibuat adalah script untuk mencari dan
menampilkan data buku tertentu pada sebuah form ubah data,
selanjutnya di update.

3. hapusBuku()

Pada method ini yang dibuat adalah script untuk mencari dan
menghapus data buku tertentu
 PERTEMUAN 13-15
PRESENTASI PROJEK

DEMO PROJEK
 PERTEMUAN 16
UAS

Ujian Akhir Semester