Kegiatan Belajar 6

-VALIDASI FORM-
A. KOMPETENSI DASAR
3. 24 Menerapkan teknologi framework pada aplikasi web
4. 24 Membuat aplikasi web menggunakan teknologi framework

B. TUJUAN PEMBELAJARAN
Setelah proses belajar, berdiskusi, dan menggali informasi, peserta didik diharapkan
mampu :
1. Memahami CRUD khususnya insert data dalam CodeIgniter
2. Menerapkan validasi pada form insert data
3. Membuat form validasi untuk insert data

C. TUJUAN PEMBELAJARAN
13 x 45 menit

D. DASAR TEORI
1. CRUD (CREATE, READ, UPDATE, dan DELETE)
CRUD adalah akronim untuk Create, Read, Update, dan Delete. Operasi CRUD
adalah manipulasi data dasar untuk database. Pembuatan CRUD sangat diperlukan dan
menjadi dasar dari setiap proses pembuatan website. Fungsinya kurang lebih seperti form
membuat posting Edmodo lalu membacanya kemudian membuat perubahan bila ada yang
salah. Selain itu bila tidak ingin posting tersebut ada di website, maka langkah yang diambil
cukup dengan menghapusnya.
Dengan berpegangan pada pedoman CRUD maka konten website akan selalu sehat
karena ketika diperiksa ulang maka dapat direvisi kesalahan maupun perihal informasi aktual.
Apabila ada konten yang tidak sesuai, kesalahan penulisan atau adanya makna yang tidak
nyaman dibaca. Maka update dan perubahan adalah suatu hal yang lazim dilakukan untuk
menjaga kualitas konten website yang berkualitas.
a. C (Create)
Ketika kita membuat konten baik berupa tulisan, foto atau audio maka kita sedang
membuat sebuah data baru, langkah tersebut dinamakan Create dan create merupakan salah

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
2
satu bagian dari CRUD. Semakin variatif konten yang dibuat, maka membuat data yang kita
buat menjadi semakin menarik.
Contohnya ketika seseorang melakukan registrasi di sebuah website maka hal tersebut
juga termasuk dalam kategori Create. Kita membuat akun kemudian menyimpan data
registrasi tersebut ke dalam database website.

b. R (Read)
Teknologi website seperti HTML dan CSS adalah kemampuan seseorang mebaca
konten website melalui bahasa programnya. Untuk aplikasi CRUD sendiri kita dapat
membaca atau menampilkan data yang tadinya berada di database MySQL yang kemudian
ditampilkan pada situs kita dengan MVC CodeIgniter 4. Kegiatan untuk merubah data
tersebut sehingga menjadi terbaca pada situs adalah proses Read yang termasuk pada proses
CRUD.

c. U (Update)
Untuk fungsi lain dari CRUD adalah update atau melakukan revisi. Proses ini adalah
langkah mengedit sebuah data bila dianggap perlu. Hal tersebut tentu merupakan hal biasa,
bila ada isi konten yang perlu diubah setelah melalui proses review. Hal ini tentu sangat
bermanfaat untukmenjaga kualitas ini website. Data diambil dari database yang lalu
kemudian di edit dengan memakai MVC CodeIgniter 4 yang nantinya ditampilkan di web.
Contoh untuk tidakan update adalah melakukan pengeditan profil facebook,
menambah keterangan atau foto pada database.

d. D (Delete)
Dari katanya sendiri sudah dapat ditebak fungsi dari detelte sendiri. Walau delete
memiliki kesamaan dengan Update, proses ini lebih untuk mengambil langkah penghapusan
data pada database yang dilakukan dengan MVC CodeIgniter 4. Ada berbagai alasan untuk
menghapus data, bisa karena ada hal yang mengandung SARA atau konten negatif yang tidak
disarankan ada pada website kita.
Contoh langkah delete yang wajar dilakukan pada sebuah blog adalah kala terdapat
komentar komentar yang tidak sopan dan berbau SAR, kemudian pemilik web dapat
menghapus komentar tersebut. itulah contoh kecil dari melakukan proses delete dalam
CRUD.

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
3
2. VALIDASI FORM
Validasi form adalah suatu informasi atau pemberitahuan yang digunakan oleh form.
Dimana informasi yang keluar dari form berupa pesan error atau pesan sukses. Validasi yang
sering kita jumpai saat melakukan input data atau registrasi data biasanya
adalah validasi bahwa input tidak boleh kosong. Adapun langkah-langkah yang harus
dilakukan untuk memasukkan data kedalam database pada CodeIgniter 4 sebagai berikut:
a. Membuat Controler
Membuka kembali folder controllers kemudian membuka file Buku.php. Selanjutnya
menambahkan script fungsi create dan save (cek line ke 30 s.d 54) seperti di bawah ini:

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
4
Catatan:
Kotak merah  yang menggunakan huruf capital di awal (Judul, Slug, Penulis, Penerbit dan
Gambar) merupakan nama field yang dari tabel yang telah dibuat.
Kotak kuning  flash data untuk memberikan pesan ketika telah sukses menambahkan data.
Karena flash merupakan data di dalam session yang akan muncul 1 kali. Jika di refresh atau
pindah halaman, maka pesan akan hilang.

b. Membuat View
1) Menambahkan Tombol Tambah Data
Membuka folder views kemudian membuka folder buku  file index.php dan
tambahkan tombol “Tambah Data” serta script untuk menampilkan session properti
“Flashdata”. (Note: Script kode setelah line 13 tetap sama seperti sebelumnya.)

Href
diarahkan
ke file
create.php
di folder
buku

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
5
 Alert untuk menambahkan session Flashdata dapat diambil dari situs bootstrap,
https://getbootstrap.com/docs/4.5/components/alerts/  kemudian memilih salah satu alert
yang diinginkan (di modul ini menggunakan alert info)

2) Membuat Fungsi Create

Membuka folder buku pada folder views, kemudian klik kanan pada folder buku dan
tambahkan file baru dengan nama “create.php” kemudian mengisikan script berikut ini:

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
6
 Script coding form bisa mengambil dari web bootsrap kemudian scroll cari
‘horizontal form (https://getbootstrap.com/docs/4.5/components/forms/) dan copy paste scrip
ke file create.php. Selanjutnya hapus fieldset dan serta checkbox.

Fitur csrf_field digunakan untuk menjaga agar formnya hanya bisa diakses pada
halaman ini saja. Sehingga ketika ada yang membajak web kita, form ini tidak akan berjalan
di halaman lain alias form hanya bisa diinput hanya di halaman create.
Action=”buku/save” menandakan bahwa penyimpanan data dari form ini akan
dialihkan ke function “save” yang telah dibuat pada controller.

c. Membuat Model
Membuka kembali folder models kemudian membuka file bukuModel.php dan
nambahkan script berikut:

Pada allowedFields yang dimasukkan adalah nama field dari tabel yang akan diisi secara
manual dari web.

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
7
3. DELETE TABLE
Insert data merupakan proses create karena kita akan menambahkan data baru ke
dalam tabel di suatu database. Selain itu insert data juga merupakan proses read juga karena
data yang ditambahkan ke dalam tabel database akan ditampilkan ke dalam tabel di database
serta dalam web kita. Adapun langkah-langkah yang harus dilakukan untuk memasukkan data
kedalam database pada CodeIgniter 4 sebagai berikut:
a. Membuat Controler
Membuka kembali folder controllers kemudian membuka file Buku.php. Selanjutnya
menambahkan script fungsi create dan save (cek line ke 30 s.d 54) seperti di bawah ini:

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
8
Catatan:
Kotak merah  yang menggunakan huruf capital di awal (Judul, Slug, Penulis, Penerbit dan
Gambar) merupakan nama field yang dari tabel yang telah dibuat.
Kotak kuning  flash data untuk memberikan pesan ketika telah sukses menambahkan data.
Karena flash merupakan data di dalam session yang akan muncul 1 kali. Jika di refresh atau
pindah halaman, maka pesan akan hilang.

b. Membuat View
3) Menambahkan Tombol Tambah Data
Membuka folder views kemudian membuka folder buku  file index.php dan
tambahkan tombol “Tambah Data” serta script untuk menampilkan session properti
“Flashdata”. (Note: Script kode setelah line 13 tetap sama seperti sebelumnya.)

Href
diarahkan
ke file
create.php
di folder
buku

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
9
 Alert untuk menambahkan session Flashdata dapat diambil dari situs bootstrap,
https://getbootstrap.com/docs/4.5/components/alerts/  kemudian memilih salah satu alert
yang diinginkan (di modul ini menggunakan alert info)

4) Membuat Fungsi Create

Membuka folder buku pada folder views, kemudian klik kanan pada folder buku dan
tambahkan file baru dengan nama “create.php” kemudian mengisikan script berikut ini:

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
10
 Script coding form bisa mengambil dari web bootsrap kemudian scroll cari
‘horizontal form (https://getbootstrap.com/docs/4.5/components/forms/) dan copy paste scrip
ke file create.php. Selanjutnya hapus fieldset dan serta checkbox.

Fitur csrf_field digunakan untuk menjaga agar formnya hanya bisa diakses pada
halaman ini saja. Sehingga ketika ada yang membajak web kita, form ini tidak akan berjalan
di halaman lain alias form hanya bisa diinput hanya di halaman create.
Action=”buku/save” menandakan bahwa penyimpanan data dari form ini akan
dialihkan ke function “save” yang telah dibuat pada controller.

c. Membuat Model
Membuka kembali folder models kemudian membuka file bukuModel.php dan
nambahkan script berikut:

Pada allowedFields yang dimasukkan adalah nama field dari tabel yang akan diisi secara
manual dari web.

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
11
4. HASIL
a. Halaman Buku
Menjalankan hasil coding kita ke dalam browser, http://localhost:8080  kemudian
pilih menu buku.

b. Halaman Form Validasai

c. Halaman Delete Data Buku

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
12
d. Hasil Delete Data

Note:
jika saat di klik tombol “Tambah” ada pemberitahuan error  Unknown column
'updated_at' in 'field list'maka cek lagi nama field yang telah dibuat pada tabel sudah benar
nama field nya updated_at atau belum. Jika belum nama field bisa di edit.

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
13
 Tampilan data pada tabel ketika telah berhasil menambahkan data. Pada field
created_at dan updated_at otomatis akan terisi tanggal dan waktunya ketika dibuat ataupun
diupdate.
Note:
Jika terjadi error Ketika pemanggilan page inster maka tambahkan script berikut pada
routesnya “ $routes->get('/Buku/create', 'Buku::create'); ”

E. TUGAS
1. Bukalah Page buku/index yang telah kalian buat
2. Tambahkan form tambah data beserta dengan fungsinya.
3. Format pengumpulan tugas
File name = no_nama
Type file = pdf
Isi dari tugas yaitu script program dan screenshot hasil.

 Good Luck 

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

XII RPL
14