MODUL 8 – Insert , Update, & delete

Pemograman Web
Teknik Informatika
Universitas Pasundan Bandung 2016/2017
 3 Mei 2017 Modul 8 – Insert , Update, & delete

Konten
Mengubah Data dari Array menjadi Database .................................. Error! Bookmark not defined.
Mengkoneksikan database dan menampilkan data ........................... Error! Bookmark not defined.

Teknik Informatika – Universitas Pasundan Bandung 1|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

Latihan kali ini untuk membuat halaman back-­­end (halaman admin)

Pada modul kali ini, ada beberapa hal yang harus kalian siapkan. Hal pertama yang

harus kalian lakukan adalah membuat sebuah folder dengan nama “Modul8”.

Copy-­­kan folder “img” beserta isinya dari modul sebelumnya ke dalam folder

“modul8”. Setelah itu, buatlah folder di dalamnya dengan nama “latihan1”.

modul8

copy-­­kan file “functions.php” dari latihan pada modul minggu lalu ke dalam folder
“latihan1”, karena kita akan menggunakan fungsi koneksi() dan query() juga akan
menambahkan fungsi-­­fungsi lain.

modul8

Pada latihan di modul kali ini kita juga akan menggunakan database yang sudah di buat
minggu lalu dan kita masih menggunakan tabel mahasiswa.

Teknik Informatika – Universitas Pasundan Bandung 2|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

Tetapi tetap yang nantinya kalian kumpulkan ke asisten adalah aplikasi yang sesuai dengan kasus
yang kalian dapatkan (Buku/Film/Tokoh Islam/Pahlawan Indonesia/Perusahaan teknologi)
Jangan lupa juga untuk menyertakan file .sql yang sudah di--‐export pada saat pengumpulan, bukan
hanya mengumpulkan file--‐file web--‐nya saja.

Latihan 1 – membuat halaman index untuk admin

-­­ Halaman ini berfungsi menampilkan seluruh data mahasiswa secara tabular
(menggunakan tabel).
-­­ Pada halaman ini admin dapat menambah, menghapus dan mengubah data
mahasiswa.

-­­ Buat file index.php di dalam folder “latihan1”

-­­ Jangan lupa untuk panggil terlebih dahulu file functions.php
-­­ Lakukan query untuk menampilkan seluruh data mahasiswa lalu simpan ke dalam
variabel
$mahasiswa

-­­ Buatlah sebuah tabel untuk menampilkan seluruh field pada tabel
-­­ Tambahkan 1 kolom di awal tabel untuk menyimpan aksi (hapus dan ubah).

Teknik Informatika – Universitas Pasundan Bandung 3|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

-­­ Tampilkan data ke dalam tabel, dengan melakukan pengulangan terhadap array
$mahasiswa menggunakan foreach

-­­ Jangan lupa untuk memberikan style pada halaman agar terlihat menarik.

-­­ Latihan 2 – Menambahkan fasilitas insert data mahasiswa

-­­ Duplikat folder latihan1, beri nama ‘latihan2’
-­­ Perbaiki halaman index.php agar menambahkan link ke halaman form tambah
data, simpan link tersebut sebelum tabel yang menampilkan seluruh data

Teknik Informatika – Universitas Pasundan Bandung 4|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

-­­ Gunakan tag a untuk membuat link, lalu arahkan ke file tambah.php

-­­ Buatlah file tambah.php, lalu buatlah form tambah data di dalamnya

-­­ Kosongkan action pada form agar data dikirimkan ke halaman tambah sendiri
-­­ Beri method post agar data tidak dapat dilihat di URL
-­­ Beri tipe dan nama yang sesuai pada tiap--­tiap elemen form--­nya

-­­ Modifikasi tambah.php agar dapat menangkap data yang dikirim dari form
ketika tombol tambah ditekan.
-­­ Tambahkan baris untuk memanggil file functions.php
-­­ Cek hasil dari fungsi tambah() yang nanti akan kita buat apakah sudah berhasil

Teknik Informatika – Universitas Pasundan Bandung 5|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

menambahkan data atau tidak

-­­ Jika data berhasil atau gagal ditambahkan, beri feedback ke user
menggunakan alert pada javascript, lalu arahkan (redirect) user kembali ke
halaman index.

-­­ Modifikasi halaman functions.php, tambahkan fungsi baru dengan nama

tambah(), yang menerima data dari form tambah sebagai $data
-­­ Tangkap data dari masing elemen input yang dikirim menggunakan $_POST
-­­ Jangan lupa untuk mengamankan data yg disimpan menggunakan fungsi
htmlspecialchars()
-­­ Dengan menggunakan sintaks SQL, lakukan insert ke tabel mahasiswa
-­­ Fungsi tambah() ini mengembalikan nilai integer berapa jumlah baris pada tabel
yang berhasil

Teknik Informatika – Universitas Pasundan Bandung 6|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

/ gagal ditambahkan, fungsi yang digunakan adalah mysqli_affected_rows()

-­­ Coba untuk menambahkan beberapa data untuk mengetahui fungsinya

berjalan atau tidak, pastikan hasilnya pada phpmyadmin

-­­ Latihan 3 – Menambahkan fasilitas delete data mahasiswa

-­­ Duplikat folder latihan2, beri nama ‘latihan3’
-­­ Modifikasi index.php pada saat tombol hapus ditekan, halaman akan berpindah ke
hapus.php
-­­ Kirimkan data id mahasiswa ke halaman hapus.php tersebut

-­­ Buat halaman hapus.php untuk menjalankan fungsi hapus data nya
-­­ Jangan lupa untuk memanggil halaman functions.php
-­­ Tangkap id yang dikirim lewat URL, lalu panggil fungsi hapus berdasarkan id yang
dikirim tadi
Cek hasil dari fungsi hapus() yang nanti akan kita buat apakah sudah berhasil

Teknik Informatika – Universitas Pasundan Bandung 7|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

menghapus data atau tidak

-­­ Jika data berhasil atau gagal dihapus, beri feedback ke user
menggunakan alert pada javascript, lalu arahkan (redirect) user kembali
ke halaman index.

-­­ Modifikasi halaman functions.php, tambahkan fungsi baru dengan nama

hapus(), yang menerima data id dari mahasiswa yang akan dihapus
datanya
-­­ Jalankan perintah SQL untuk menghapus data mahasiswa berdasarkan id tersebut
-­­ Kembalikan nilai dari fungsi hapus berupa jumlah baris yang berhasil terhapus
menggunakan mysqli_affected_rows()

-­­ Sampai sini sebetulnya seharusnya fungsi hapusnya sudah berfungsi, namun ada
yang kurang yaitu pada saat kita meng--­klik link hapus di halaman index, data
akan langsung terhapus tanpa ada konfirmasi terlebih dahulu
-­­ Kita harus memberikan konfirmasi pada saat penghapusan data karena ada

Teknik Informatika – Universitas Pasundan Bandung 8|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

kemungkinan user tidak sengaja menekan tombol hapus

-­ Tambahkan fungsi javascript onClick pada saat link hapus di--­klik

-­­ Coba untuk menghapus beberapa data untuk memastikan fungsinya berjalan
normal

-­­ Latihan 4 – Menambahkan fungsi login untuk admin

-­­ Duplikat folder latihan3, beri nama ‘latihan4’
-­ Implementasikan fasilitas login pada halaman back--­end ini, agar sebelum
masuk ke halaman index, admin diharuskan untuk login terlebih dahulu
-­­ Gunakan session agar fasilitas login ini berfungsi dengan baik
-­­ Terapkan apa yang sudah kalian pelajari pada latihan di modul 6
-­­ Jangan lupa untuk tambahkan tombol logout pada halaman index

Teknik Informatika – Universitas Pasundan Bandung 9|

 3 Mei 2017 Modul 8 – Insert , Update, & delete

Membuat Form Ubah Data Mahasiswa pada Halaman Back-­‐End

-­­ Fungsi dari form ubah data mahasiswa mirip dengan form tambah, hanya saja
pada saat kita memilih mahasiswa yang akan kita ubah datanya, form yang tampil
sama dengan form tambah dengan data yang sudah terisi.

-­­ Modifikasi halaman index.php pada folder admin, untuk menambahkan id pada
tombol ubah yang sudah kita buat.

-­­ Duplikat file tambah.php pada folder admin, lalu ubah namanya menjadi ubah.php

-­­ Modifikasi kode dari ubah.php, dengan mengganti semua “tambah” menjadi “ubah”

Teknik Informatika – Universitas Pasundan Bandung 10 |

 3 Mei 2017 Modul 8 – Insert , Update, & delete

-­­ Ambil data id yang dikirim lewat URL, lalu simpan di variabel $id, simpan
sebelum pemanggilan fungsi ubah

-­­ Lakukan query terhadap data mahasiswa berdasarkan id yang diambil, lalu
ambil elemen array pada index ke 0, simpan kedalam variabel $mhs

Pengambilan elemen pada array index ke--­0 diatas, hanya akan jalan pada PHP versi
5 (XAMPP terbaru), jika PHP kalian masih versi lama (XAMPP terinstall sejak kuliah
BASDAT), maka gunakan sintaks berikut:

-­­ Menampilkan data ke dalam tiap--­tiap elemen form menggunakan properti

‘value’ dengan isi diambil dari array $mhs yang sudah kita query.

Teknik Informatika – Universitas Pasundan Bandung 11 |

 3 Mei 2017 Modul 8 – Insert , Update, & delete

-­­ Lakukan hal yang sama untuk semua elemen input (email, jurusan, universitas
dan gambar), jangan lupa untuk mengganti key array--­nya sesuai dengan nama
field pada tabel.

-­­ Buat sebuah elemen input baru di awal form, elemen input tersebut bertipe
hidden, memiliki name=”id” dan akan kita gunakan untuk menyimpan id dari
mahasiswa yang dipilih. Sama seperti elemen yang lain, id tersebut akan kita
simpan pada properti value.

-­­ Sekarang coba save, dan jalankan di browser. Seharusnya sekarang, jika kalian
klik ubah pada salah satu mahasiswa di halaman index, maka form ubah akan
terisi data sesuai dengan mahasiswa yang di klik.

Sekarang kita akan membuat fungsi ubah() di halaman functions.php.

Teknik Informatika – Universitas Pasundan Bandung 12 |

 3 Mei 2017 Modul 8 – Insert , Update, & delete

-­­ Selesai!! Cobalah untuk mengubah beberapa data yang ada.

-­­ Kompres (zip / rar) folder ‘modul8’ beri nama dengan modul8--­nrp.zip/rar
lalu kirimkan ke asisten masing--­masing
-­­ Kalian dapat melihat sourcecode--­nya di web pw2.if--­unpas.org
-­­ Dan hasilnya dapat dilihat di pw2.if--­unpas.org/modul8/
& pw2.if--­ unpas.org/modul9/admin

Teknik Informatika – Universitas Pasundan Bandung 13 |

 3 Mei 2017 Modul 8 – Insert , Update, & delete

TUGAS :
Buatlah kolom pencarian pada halaman front-end dari web kalian.

Jika nama ada maka hasil akan ditampilkan pada halaman front-end kalian.
Jika tidak ada maka akan muncul data tidak ditemukan.

Teknik Informatika – Universitas Pasundan Bandung 14 |

 3 Mei 2017 Modul 8 – Insert , Update, & delete

= Selamat Mencoba dan Belajar =

Jangan malu bertanya kepada Asisten bila ada materi yang kurang
dipahami.
sandhikagalih@unpas.ac.id

Teknik Informatika – Universitas Pasundan Bandung 15 |