SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

SMK : SMK Nahdlatul Ulama Information Sheet No:

Kompetensi Keahlian
Rekayasa Perangkat Lunak
Mata Pelajaran :
Pemrograman Web dan Perangkat
Bergerak
A. TUJUAN PEMBELAJARAN
B. INDIKATOR
C. PETUNJUK PEMBELAJARAN
JUDUL
03
Menerapkan aplikasi web
dengan Model View
Nama : ___________________
Controler (MVC)
Tanggal : ___________________
Membuat aplikasi web
Kelas XII / Semester 2
menggunakan Model View
Controler (MVC)
Setalah Mempelajari Modul ini, anda akan bisa menerapkan Aplikasi
dengan model view controller, serta anda akan dapat membuat aplikasi
menggunakan model view dan Controller dengan menggunakan sebuah
framework CI
1. Mengenal Model Pada CodeIgniter
2. Membuat Tabel Pada Mysql menggunakan phpmyadmin
3. Menampilkan data pada table mysql di halaman web
Anak-anak yang hebat bacalah petunjuk ini agar anda lebih mudah
menguasai materi-materi kompetensi yang ada pada lembaran belajar
ini.
a. Coba baca lebih dahulu apa tujuan mu dalam belajar materi ini.
b. Baca dengan pelan-pelan pendaluan agar kamu lebih mudah
mengerti materi selanjutnya.
c. Kerjakan student activity mu pada setiap kegiatan belajar ya,
sebelum kamu lanjutkan ke kegiatan belajar berikutnya.
d. Kamu pasti hebat dan bapak/ibu guru tau kamu orang baik dan
hebat akan belajar dengan mengikuti pedoman ini.

D. PENGEMBANGAN MATERI
PENDAHULUAN
Pada Modul ke 3 ini, kita akan mempelajari Konsep MVC yang terakhir, yaitu Model, yang menurut
Wikipedia pengertian model adalah

Model, Model mewakili struktur data. Model merupakan bagian yang bertugas untuk mengatur,
menyiapkan, memanipulasi, dan mengorganisir data (biasanya dari basis data). Tugas yang ia lakukan
meliputi memasukkan data ke basis data, pembaruan data, menghapus data, dan lain-lain. Model
menjalankan tugasnya berdasarkan instruksi dari controller.

“jadi semua hal yang berhubungan dengan database dan pengolahan data, dilakukan pada model”

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 E. KEGIATAN BELAJAR

1. Kegiatan Belajar 1 – Mengenal Model lebih dalam

Seperti yang sudah kita pahami sebelumnya, Model adalah salah satu konsep dari metode MVC,
yang mana dengan menggunakan MVC, kita dapat memisahkan antara tampilan (view), data
(model) dan controller

Jadi penyimpanan kode menjadi lebih terstruktur dan tidak akan terjadi penumpukan kode,
yang membuat program menjadi berat, jadi dengan menggunakan MVC aplikasi menjadi lebih
ringan

Lebih jauh lagi tentang Model, jika kita mengingat Langkah-langkah pembuatan Aplikasi dengan
menggunakan metode native, semua kode ditumpul menjadi 1, baik itu kode HTML, kode Mysql,
serta kode-kode lain yang diperlukan, nah pada MVC tidak akan lagi terjadi itu, karena semua
nya sudah dipisahkan, kita lebih focus ke model, jadi didalam model nantinya terdapat function
function yang dibutuhkan saja, yang isinya adalah query query sql yang diperlukan pada function
tersebut saja, jadi beban aplikasi akan lebih ringan, karena aplikasi hanya akan memproses
query yang di panggil saja.

Mudah-mudahan cukup membuat kalian mengerti ya, sebelum kita benar2 mempraktikan
pembuatan model tersebut

2. Kegiatan Belajar 2 – Bagaimana Membuat Model

Seperti halnya controller, pembuatan model juga memiliki syarat yaitu
1. Simpan pada folder models
2. Diawali dengan huruf besar
3. Tidak menggunakan spasi
4. Tidak diawali dengan angka

Sama seperti pada controller, pada model pun didalamnya terdapat class utama dengan nama class
sesuai dengan nama model nya

Perhatikan kode diatas, Kode diatas adalah kode utama pada model, jadi hampir sama dengan kode pada
controller

3. Kegiatan Belajar 3 – Konfigurasi Konektor Database pada CodeIgniter

Seperti yang diketahui sebelumnya, bahwa model adalah interpretasi dari data, atau semua yang
berhunguan dengan data ada pada kode model, maka dari itu harus ada penghubung antara Codeigniter
dengan databasenya atau kita kenal dengan istilah konektor
Kode konektor pada codeigniter tidak perlu dibuat secara manual, karena sudah disediakan oleh
framework, jadi kita hanya melakukan konfigurasi sesuai dengan database dan server kita.

Langkah-langkah Konfigurasi konektor pada codeigniter :

1. Cari File database.php pada folder, application/config/database.php

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 2. Buka file database.php

3. Yang perlu dikonfigurasi adalah pada baris 79 – 81 , yaitu pada array ‘username’, ‘password’, dan
‘database’
4. username diisi dengan username database kita, jika pada server local diisi dengan root
password diisi dengan password database kita, jika pada database belum diberikan password
kosongkan saja
database diisi dengan nama database kita pada mysql
5. Jadi seperti dibawah ini

6. Setelah selesai simpan konfigurasi dengan menekan tombol save atau ctrl+s
7. Langkah selanjutnya masuk ke file autoload.php pada folder application/config/autoload
8. Cari varibalel libraries (biasanya pada baris ke 61)

Lalu ubah dan tambahkan menjadi seperti dibawah ini

9. Terakhir simpan, dan proses konfigurasi konektor sudah selesai

Setelah selesai mari kita sama-sama cek hasilnya, dengan cara reload website kita

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 Nah jika terjadi error seperti diatas, berarti di server kita tidak ada database dengan nama db_portopolio
Jadi tetep tenang, jangan panik jika mendapatkan error J

Nah untuk memperbaiki error tersebut kita akan masuk ke Kegiatan Pembelajaran 4, yaitu tentang
pembuatan database pada mariadb.

4. Kegiatan Pembelajaran 4 – Membuat Database dengan menggunakan interface phpMyAdmin

Sebenernya materi ini sudah disampaikan pada kelas-kelas sebelumnya, jadi pada pembelajaran ini tidak
akan terlalu detail lagi prosesnya…… tapi hanya untuk mereview dan mengingatkan kembali, mari kita
simak sama-sama bagaimana cara membuat database dengan menggunakan interface phpMyAdmin

1. Langkah pertama, kita masuk ke browser dan tuliskan pada alamat browser alamat :
localhost/phpMyAdmin

Jika prosesnya berhasil maka akan muncul halaman diatas, pada halaman sebelah kiri, terdapat
nama-nama database yang ada di dalam server kita.
2. Untuk membuat database baru kita klik menu Databases
3. Maka akan muncul halaman seperti dibawah ini

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 Untuk membuat database baru tulis di
Nama database yang akan dibuat

4. Misalkan kita akan membuat database dengan nama db_portopolio

lalu klik tombol Create

5. Dan database yang kita buat sudah ada

6. Mudah sekali bukan cara membuat database ??? sekrang lihat halaman website yang kita buat
apakah masih error seperti sebelum membuat database ???

Seharusnya sudah tidak error lagi jika anda mengikuti dengan sekesama proses nya

Setelah berhasil membuat database, pada Pembelajaran selanjutnya kita akan mempelajari cara
membuat table dalam database

5. Pembelajaran 5 – Membuat Tabel

Database adalah kumpulan table – table yang saling berhubungan dan menghasilkan sebuah informasi,
jadi pada intinya database adalah kumpulan table, berarti didalam database terdapat banyak table.

Sedangkan Table adalah sebuah tempat menyimpan data sesuai dengan klasifikasinya, misalkan jika kita
memiliki table dengan nama table_siswa : berarti table ini berisi data-data tentang siswa, atau semua
hal yang berhubungan dengan siswa.

Mungkin cukup untuk mereview tentang table dan database nya,, mari kita langsung praktikkan untuk
membuat table pada database yang sudah dibuat tadi
Perhatikan Langkah-langkah nya yaaaa…. Jangan sampai terlewat

1. Kita masuk ke interface phpMyAdmin terlebih dahulu

2. Pilih database yang akan kita isikan table
3. Sampai muncul tampilan seperti dibawah ini

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 Disana tertulis No tables found in database , in berarti tidak ada table didalam database tersebut
4. Untuk membuat table kita cukup isi form dibawah ini

Disana terdapat nama, itu adalah nama table yang ingin kita buat, dan ada number of columns , itu
adalah jumlah kolom(field) yang dibutuhkan dalam table tersebut.

Kita akan membuat table profile dengan 7 kolom

lalu klik Create pada samping kanan

5. Setelah proses create table, maka akan muncul tampilan untuk struktur table nya, seperti dibawah
ini

6. Untuk struktur yang akan kita buat, kita akan Analisa terlebih dahulu kebutuhan type data dan length
pada setiap field nya dengan membuat bagan seperti dibawah ini

Nama Field Type Data Length Keterangan

id Int 11 Primary key, auto increment
nama_depan Varchar 100
nama_belakang Varchar 100
tempat_lahir Varchar 100
tanggal_lahir date
jenis_kelamin Varchar 5
alamat Text
jenjang_pendidikan Varchar 50
Ingat, setiap akan membuat table, anda harus memiliki bagan tersebut dulu sebelum ujug-ujug
membuatnya di interface phpMyAdmin

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 7. Langkah selanjutnya adalah, bagan tersebut pindahkan ke phpMyAdmin nya

Lalu klik save

8. Setelah disimpan, maka akan menghasilkan table seperti dibawah

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 SMK : SMK Nahdlatul Ulama Assesment Sheet No: 03
JUDUL
Menerapkan aplikasi web
Kompetensi Keahlian Nama : __________________
dengan Model View
Rekayasa Perangkat Lunak Tanggal : __________________
Controler (MVC)
Mata Pelajaran : Kelas XII / Semester 2
Membuat Model dan konfigurasi
Pemrograman Web dan Perangkat
database
Bergerak
SOAL !

TUGAS MANDIRI

1. Perbedaan mendasar dalam penggunaan Framework adalah memisahkan antar kode yang digunakan,
dalam artian tidak menumpuk kode pada satu file secara bersamaan, metode tersebut disebut dengan
MVC, model view controller.
Seorang administrator basis data akan membuat kode untuk menampilkan data , maka dia harus
membuaka file dari folder ??
a. Controller
b. Model
c. View
d. Config
e. Helper

2. Perhatikan kode dibawah ini

Untuk mengisi nama database yang akan kita gunakan disimpan pada baris ke
a. 79
b. 80
c. 81
d. 83
e. 90

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

 3. Perhatikan Kode dibawah ini

untuk memanggil database kode yang paling benar untuk di konfigurasu adalah …
a. $autoload[‘libraries’] = array(‘data’);
b. $autoload[‘libraries’] = array(‘database’);
c. $autoload[‘libraries’] = array(‘table’);
d. $autoload[‘libraries’] = array(‘url’);
e. $autoload[‘libraries’] = array(‘model’);

4. Database adalah ….
a. Kumpulan data yang saling berintegrasi
b. Kumpulan informasi yang saling berhubungan
c. Data yang disimpan didalam server computer
d. Kumpulan table yang saling berintegrasi sehingga mampu menghasilkan informasi
e. Kumpulan database

5. Perhatikan bagan dibawah ini

Nama Field Type Data Length Keterangan

id Int 11 Primary key, auto increment
nama_depan Varchar 100
nama_belakang Varchar 100
tempat_lahir Varchar 100
tanggal_lahir date
jenis_kelamin Varchar 5
alamat Text
jenjang_pendidikan Varchar 50

Dari bagan diatas, Type data yang dipergunakan untuk menyimpan data yang tidak dapat diisi dengan
huruf dan karakter adalah
a. Int dan date
b. Int saja
c. Text
d. Varchar
e. Date saja

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022

Persiapan Rencana Assesment

Setalah Mempelajari Modul ini, anda akan bisa menerapkan Aplikasi dengan model view
Tujuan Pembelajaran : controller, serta anda akan dapat membuat aplikasi menggunakan model view dan
Controller dengan menggunakan sebuah framework CI
Elemen : Mengimplementasikan Pemrograman Berorientasi Objet

Metode dan Perangkat Asesmen

CL (Daftar Periksa), DIT (Daftar Instruksi Terstruktur), DPL (Daftar Pertanyaan
Jenis
Lisan), DPT (Daftar Pertanyaan Tertulis), PW (Pertanyaan Wawancara), VP
bukti
(Verifikasi Portofolio), CUP (Ceklis Ulasan Produk), PMO Pertanyaan mendukung
observasi

Verifikasi Portfolio (sampel pekerjaaan yang

pencapaian sebelumnya, wawancara dengan

(latihan simulasi dan bermain peran, proyek,
(kerja nyata/aktivitas waktu nyata di tempat

jurnal atau buku catatan, informasi tentang

(pertanyaan tertulis, wawancara, asesmen
diri, tanya jawab lisan, angket, ujian lisan

dokumentasi pendukung, bukti sejarah,

(testimoni dan laporan dari atasan dan

disusun oleh kandidat, produk dengan
kerja dilingkungan tempat kerja yang
Bukti-Bukti

atasan, bukti pelatihan, otentikasi

atasan, atasan, atau rekan kerja)

presentasi, lembar kegiatan)

Lainnya : Observasi Produk

Sub (Praktik,

pengalaman hidup)
Obsevasi langsung

Kegiatan Struktur
Materi Produk,

Review produk
disimulasikan)

Tanya Jawab

atau tertulis)
Portofolio, dan /
atau hafalan) L TL T

Materi 1
Mengenal Model

Materi 2
Praktik Membuat
Model
Materi 3
Praktik
Mengkonfigurasi
Konektor
Materi 4
Membuat Database

Materi 5
Membuat Tabel

Tasikmalaya, _________, ______________ 2022

Peserta Didik Guru Mata Pelajaran

____________________________ Nizar Suryadi, ST

SMKS NU KOTA TASIKMALAYA – NIZAR SURYADI, ST - 2022