23 October 2016

Fixes Bug Error : Aplikasi PDO CRUD OOP

Salam Kodingers...

Setelah kemarin saya melaksanakan Kerja Praktek (KP) pada sebuah perusahaan ICT, kali ini saya mendapat tugas kuliah mencari error dan memperbaiki koding pada aplikasi PDO CRUD OOP. Alhamdulillah, apa yang saya pelajari di tempat KP dapat berguna di tempat kuliah. Ya, cara mengerjakan tugas ini sama seperti di tempat KP saya. Sekarang waktunya saya untuk menuangkannya ke dalam blog ini sebagai pembelajaran. Mari kita pelajari bersama.

Pertama, download koding asli terlebih dahulu di sini. Setelah itu, ekstak file rar dalam folder C:\xampp\htdocs agar langsung dapat dipanggil lewat browser. Di dalam folder terdapat beberapa file. Hal yang perlu diingat setelah mengekstrak file rar, kita harus membuat database di MySQL terlebih dahulu dengan nama database "crud_oop" (agar sama dengan file crud_oop.sql yang tersedia)

files crud oop
files crud oop


Setelah itu, impor file crud_oop.sql tadi agar ke dalam database "crud oop". file crud_oop.sql berisikan table serta isinya sehingga kita tidak perlu membuatnya sendiri. Tunggu hingga proses impor selesai.
  
Import file crud_oop.sql
Import file crud_oop.sql


Buka tab browser baru, kita  akan memanggil file index.php yang telah kita download tadi lewat localhost, contoh "http://localhost/pemrograman_web/el_tugas/pdo/index.php". Tulisan berwarna merah merupakan folder tempat index.php disimpan, sesuaikan dengan folder tempat Anda menyimpan file index.php. Maka akan Tampil halaman input data Tambah Mahasiswa Baru.  Isikan data-datanya. Ingat, untuk pengisian Tanggal Lahir menggunakan format YYYY-MM-DD, Contoh lihat gambar !

form tambah mahasiswa baru
form tambah mahasiswa baru

Klik tombol tombol tambah maka data yang diinputkan akan tampil di halaman Daftar Nama Mahasiswa (jika data berhasil diinputkan :D ).

daftar nama mahasiswa
daftar nama mahasiswa

Oke sejauh ini tidak ada masalah. Sekarang kita akan coba fungsi edit data. kliktombol edit di sebelah kanan nama mahasiswa (jangan salah memilih tombol Delete yah.. )

Setelah kita klik tombol edit, akan muncul tampilan kosong / blank. Kok bisa?! Apa yang terjadi ?! Tenang, sekarang kita menghadapi cobaannya. Persiapkan diri untuk menghadapi cobaan tersebut ! Sekarang waktunya untuk mengotak-atik kodingnya.

Oke, lihat pada address bar, terlihat nama file phpnya yang perlu di otak-atik, yaitu edit.php. Sekarang kita buka file edit.php nya.

Setelah itu perhatikan kodingnya. Bikin pusing kan?... Coba cari koding yang menurut Anda salah. Pahami juga di aplikasi PDO CRUD OOP ini menggunakan file library.php untuk fungsi-fungsi CRUD nya. Jadi file edit.php berhubungan dengan file library.php karena fungsi edit / update data berapa di library.php.

Kembali ke file edit.php tadi. Mainkan logika Anda. Kenapa tombol tombol edit tidak berfungsi sedangkan tombol tombol tambahtadi berfungsi? Merujuk pada hal tersebut, sebaiknya kita lihat koding tombol tombol tambah di file index.txt. Pada koding tersebut terukir koding :

koding tombol tambah
koding tombol tambah

Koding name="tambahMhs" tersebut sesuai dengan method tambah data di library.php.

koding method tambahMhs
koding method tambahMhs

Kita lihat koding tombol Edit pada file edit.php, terdapat perbedaan yang mencolok ! Perbedaan ini yang membuat tombol Edit tidak berfungsi.

koding tombol edit
koding tombol edit

Maka dari itu, dalam koding name="updates" kita ganti dengan name=" updateMhs". Lihat Gambar!

koding tombol edit fix
koding tombol edit fix


Sekarang kita refresh halaman Daftar Nama Mahasiswa, lalu klik tombol Edit lagi. Apa yang terjadi. Ternyata masih menampilkan halaman kosong! Kenapa yah..? Oke sekarang kita tempatkan kursor / pointer pada address bar. Lihat alamat link yang ada. Kenapa menampilkan nim namun tidak sesuai dengan nim yang pertama kali kita inputkan.

address bar
address bar

Jelas ini suatu kesalahan. Untuk mencari penyebabnya, kita menuju ke koding list.php karena koding tombol Edit berada pada file list.php. Cari kodingnya dan perhatikan dengan seksama. Kenapa nim=$data->id, seharusnya jika merujuk pada $data->id, maka parameter yang dipakai haruslah id juga. Sehingga menjadi id=$data->id. Lihat Gambar.

nim=$data->id
nim=$data->id

id=$data->id
id=$data->id

Setelah itu refresh kembali halaman Daftar Nama Mahasiswa, lalu klik Edit dijamin berhasil dan muncul halaman form edit.

Jika ada kesalahan data yang ditampilkan (misal yang di klik edit data A namun yang tampil data B), maka carilah koding method editMhs disana harus ditulis jelas query SQL nya. Pada query SQL di method editMhs harus ditambahkan WHERE id='id'. Hal ini agar data yang akan ditampilkan sesuai dengan nomer id yang dipilih. Lihat gambar!

method editMhs
method editMhs

Yeeeaah. Coba lagi tombol editnya. Data yang ditampilkan sudah benar sekarang. Lihat juga address bar nya, sudah benar kan. Karena nomer itu adalah nomer id yang auto_increment pada database.

form edit
form edit

Tapi kenapa ada yang janggal di tampilan form editnya. Kenapa data nama dan tempat lahir menampilkan data yang sama? Tentu ini harus segera di luruskan. Langsung saja buka file edit.php. Ternyata ada kesalahan penulisan koding pada value atau nilai yang ditampilkan pada halaman form edit.  Seharusnya penulisan value tidak boleh sama, karena data yang ditampilkan harusnya berbeda.

koding edit.php
koding edit.php

Maka dari itu, ganti value=”’. $edit->nama.’” pada input text tempat lahir menjadi value=”’.$edit->tempat_lahir’”. Sehingga menjadi seperti pada gambar.

koding edit.php fix
koding edit.php fix

Refresh kembali halaman form edit. Maka akan tertampil data yang benar. Sekarang edit data tersebut sesuai kebutuhan. Jika sudah klik tombol tombol update .

form edit fix
form edit fix

Setelah kita ubah datanya, akan langsung di tampilkan halaman List Data Nama Mahasiswa. Tapi kenapa datanya masih sama. Hal ini bisa terjadi karena ada kesalahan dalam koding yang mengirimkan data yang telah diedit ke database. Untuk memperbaiki dapat kita telusuri melalui file edit.php pada bagian memanggil method update data dan membandingkannya dengan method yang telah ada di library.php. Cek it Out!

method update edit.php
method update edit.php

library.php mothod update
library.php mothod update

Perhatikan kedua gambar tersebut. Terlihat sedikit perbedaan pada parameter di gambar 1 dengan parameter pada gambar 2. Hal ini yang menyebabkan data yang telah diedit  tidak dapat masuk dan disimpan di database. Coba ubah parameter updateMhs pada file edit.php agar sesuai dengan parameter updateMhs pada file library.php. Jangan sebaliknya. Pokoknya jangan !



Coba kembali, Edit data nya lalu tekan tombol tombol update. Lalu lihat pada Daftar Nama Mahasiswa dan data yang tadi diedit telah muncul di halaman tersebut.

Nah selesai sudah. Untuk menambahkan data lagi, klik tombol. Selamat mencoba dan tetap berusaha yaaah.


EmoticonEmoticon