Modul-7 CRUD & SearchingMODUL-7 CRUD & SEARCHING PEMROGRAMAN WEB 8 - Done! Cobalah untuk mengubah beberapa data yang ada. Searching (latihan7e) - Duplikat folder latihan7d, beri nama

Pemrograman Web TEKNIK INFORMATIKA

UNIVERSITAS PASUNDAN BANDUNG

Modul-7 CRUD & Searching

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 1

Kali ini, kita akan 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 “modul7”. Copy-kan folder “img” beserta isinya dari modul sebelumnya ke dalam folder “assets”. Pada latihan di modul kali ini kita juga akan menggunakan database yang sudah di buat minggu lalu dan kita masih menggunakan tabel mahasiswa. Kalian dianjurkan untuk menggunakan database yang sesuai dengan topik yang kalian dapat pada modul-modul sebelumnya. Jangan lupa juga untuk menyertakan file .sql yang sudah di ekspor pada saat pengumpulan, bukan hanya mengumpulkan file-file web-nya saja. Halaman Admin/Back-end (latihan7a) 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 “latihan7a”. - Jangan lupa untuk panggil terlebih dahulu copy-kan file functions.php dari latihan pada

modul sebelumnya karena kita akan menggunakan fungsi koneksi() dan query() juga akan menambahkan fungsi- fungsi lain.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 2

- Lakukan query untuk menampilkan seluruh data mahasiswa lalu simpan ke dalam variabel $mahasiswa.

- Buatlah sebuah tabel untuk menampilkan seluruh field pada tabel. - Tambahkan 2 kolom di awal tabel untuk menyimpan nomor dan opsi (hapus dan ubah).

- Tampilkan data ke dalam tabel, dengan melakukan pengulangan terhadap array

$mahasiswa menggunakan foreach. - Jangan lupa untuk memberikan style(css) pada halaman agar terlihat menarik. Insert Data (latihan7b) - Duplikat folder latihan7a, beri nama ‘latihan7b’ - Perbaiki halaman index.php agar menambahkan link ke halaman form tambah data,

simpan link tersebut sebelum tabel yang menampilkan seluruh data.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 3

- 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

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 indeks.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 4

- 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/gagal ditambahkan, fungsi yang digunakan adalah mysqli_affected_rows().

- Coba untuk menambahkan beberapa data untuk mengetahui fungsinya berjalan atau

tidak, pastikan hasilnya pada phpmyadmin.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 5

Delete Data (latihan7c)

- Duplikat folder latihan7b, beri nama ‘latihan7c’.

- 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 datanya.

- 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

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().

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 6

- 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

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.

Update Data (latihan7d) - Duplikat folder latihan7c, beri nama ‘latihan7d’

- 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”.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 7

- Ambil data id yang dikirim lewat URL, lalu simpan di variabel $id, simpan sebelum

pemanggilan fungsi ubah. Lalu, Lakukan query terhadap data mahasiswa berdasarkan

id yang diambil, lalu ambil elemen array pada index ke 0, simpan kedalam variabel

$mhs.

- Menampilkan data ke dalam tiap- tiap elemen form menggunakan properti ‘value’

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

- 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.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 8

- Done! Cobalah untuk mengubah beberapa data yang ada.

Searching (latihan7e)

- Duplikat folder latihan7d, beri nama ‘latihan7e’

- Pada latihan ini, kita akan membuat form searching pada halaman index untuk mencari

data tertentu.

- Buatlah sebuah form dibawah tombol “Tambah Data Mahasiswa” dengan method GET.

- Kosongkan action pada form agar data dikirimkan ke halaman index sendiri.

- Gunakan $_GET untuk menangkap keyword pencarian.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 9

- Gunakan pengkondisian untuk mengubah query pengisi $mahasiswa.

- Tambahkan kondisi pada saat sebelum menampilkan data untuk memastikan data

yang di cari ada atau tidak.

- Lakukan percobaan mencari data yang ada dan data yang tidak ada.

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 10

Tugas3 - Implementasikan fasilitas login pada halaman back- end ini, agar sebelum masuk ke

halaman index (untuk admin), admin diharuskan untuk login terlebih dahulu.

- Terapkan apa yang sudah kalian pelajari pada latihan di modul-5

- Jangan lupa untuk tambahkan tombol logout pada halaman index (untuk admin).

- Tambahkan 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.

Kompres kedalama zip folder ‘modul8’ beri nama dengan PW_SHIFT_NRP lalu kirimkan

ke classroom.

Jangan lupa kirimkan juga .sql dari database kalian.

Contoh Tugas3 bisa dilihat di : pw.if-unpas.org/tugas/tugas3

MODUL-7 CRUD & SEARCHING

PEMROGRAMAN WEB 11

Referensi

Link :

- Insert & Delete

https://www.youtube.com/watch?v=L-gKceeb61Q&list=PLFIM0718LjIUqXfmEIBE3-

uzERZPh3vp6&index=12

- Update

https://www.youtube.com/watch?v=wlJ-

UvXucpc&index=13&list=PLFIM0718LjIUqXfmEIBE3-uzERZPh3vp6

- Searching

https://www.youtube.com/watch?v=K_ldbZMOvGA&index=14&list=PLFIM0718LjIUq

XfmEIBE3-uzERZPh3vp6

-- Cheerio --