Dreamweaver, PHP dan MySQL untuk Aplikasi Data Mahasiswa (Bag 2)

Bagian ini merupakan kelanjutan dari artikel sebelumnya yang membahas mengenai bagaimana membuat aplikasi berbasis PHP-MySQL dengan memanfaatkan Dreamweaver. Dalam artikel ini akan dibahas mengenai halaman untuk Edit dan Delete data mahasiswa. Semoga tutorial ini berguna untuk kita semua.

Langsung aja kita mulai!

Membuat Halaman untuk Mengedit Data Mahasiswa

Halaman edit data pada dasarnya sama seperti halaman input data, hanya saja pada halaman edit data, data yang akan diedit (diubah) sudah ditampilkan terlebih dahulu di form. Sebelum membuat form untuk edit data, pertama kali yang harus dilakukan adalah menentukan mahasiswa mana yang akan diedit. Dalam aplikasi berbasis web, untuk menentukan mahasiswa mana yang akan diedit beragam caranya. Dalam tutorial ini akan dicoba cara yang paling sederhana (dan banyak dilakukan juga), yaitu dengan menambahkan link edit di tabel data mahasiswa sedemikian hingga saat diklik akan mengirimkan parameter berupa nim mahasiswa ke halaman edit mahasiswa.

OK. Langsung aja kita coba.

Bagian 1

  1. Pertama kita buat dulu halaman “edit_mhs.php”.
  2. Lalu buka halaman tampil_mhs.php yang sudah dibuat pada tutorial sebelumnya. Lalu kita tambahkan kolom baru di tabel data mahasiswa dan buat link edit. Untuk membuat kolom baru di tabel, dapat dengan menge-blok kolom terakhir tabel dan pilih menu Modify > Table > Insert Rows or Columns… Lalu pada window yang ditampilkan pilih Column, jumlah kolom yang akan ditampilkan dan posisi kolom yang baru (Lihat gambar). Pilih (select) text edit” pada kolom yang baru saja dibuat dan buat hyperlink dengan menu Insert > Hyperlink. Selanjutnya akan muncul window Hyperlink. Pilih tombol Browse (4) (Lihat Gambar)
  3. Pada window Select File yang ditampilkan, pilih halaman edit_mhs.php (1) yang sebelumnya telah dibuat sebagai halaman edit data mahasiswa. Selanjutnya klik tombol Parameters.. (2) dan akan ditampilkan window Parameters… (Lihat gambar di bawah)
  4. Pada window Parameters.. isi nama parameter yang akan dikirimkan (yaitu nim) di bagian name dan selanjutnya di bagian value (2) klik tombol Dynamic Data (gambar petir). Lihat gambar di bawah
  5. Akan ditampilkan window Dynamic Data. Pilih field yang akan menjadi value parameter (dalam hal ini kita akan gunakan nim). Klik OK untuk melanjutkan.
  6. Klik OK, OK dan OK.
  7. Simpan Halaman
Setting Parameter URL

Setting Parameter URL

Bagian 2

Setelah link untuk ke halaman edit dibuat, sekarang kita buat halaman edit mahasiswa:

  1. Buka halaman edit_mhs.php yang sudah dibuat di langkah 1 bagian 1 di atas.
  2. Karena dalam form edit data, kita akan menampilkan terlebih dahulu data yang lama yang akan diedit, maka kita harus membuat Recordset. Pilih menu Insert > Application Objects > Recordset.
  3. Pada window Recordset, atur nama recordset, koneksi, tabel dan field yang akan diambil. Kita akan mengambil data mahasiswa berdasarkan nilai parameter nim yang dikirimkan dari halaman tampil_mhs.php (lihat langkah 2-5 Bagian 1 di atas). Atur Filter pada window Recordset (2) dimana kolom pertama adalah nama field yang akan difilter, kolom kedua adalah operator pembanding yang digunakan, kolom ketiga adalah jenis (metode) pengambilan value, kita pilih URL Parameter, dan pada kolom keempat dituliskan nama parameter atau form. Ketikkan nim pada bagian ini karena pada langkah sebelumnya (lihat langkah 5 bagian 1) kita mengatur nama parameternya adalah nim. Klik OK untuk menyimpan pengaturan dan Recordset akan terbentuk. Lihat gambar di bawah ini.
  4. Kemudian dari menu Application, pilih Record Update Form Wizard. Atau dengan cara mengakses menu Insert > Application Objects > Update Record > Record Update Form Wizard.  Lihat gambar
  5. Akan ditampilkan Record Update Form. Atur koneksi, tabel yang digunakan, nama recordset untuk data yang akan diedit (langkah 10 bagian 2), pilih halaman yang akan ditampilkan setelah proses update berhasil (2), atur jenis inputan dan label (3). Jika sudah diatur dengan benar, klik OK untuk melanjutkan. Lihat gambar di bawah ini
  6. Akan ditampilkan form edit data di Dreamweaver. Untuk mencoba proses edit, buka halaman tampil_mhs.php di browser (F12) dan klik link edit. Lihat gambar
Membuat Recordset

Membuat Recordset

Record Update Form Wizard

Record Update Form Wizard

Membuat Halaman untuk Menghapus Data Mahasiswa

Seperti halnya halaman untuk edit data, halaman untuk menghapus data juga umumnya diawali dari halaman tampil. Di halaman tampil disediakan link delete dimana jika diklik maka akan menuju ke halaman delete mahasiswa dengan mengirimkan suatu parameter (nim).

Mari kita ikuti langkah-langkah untuk membuat halaman delete data.

  1. Buatlah halaman baru dengan nama hapus_mhs.php.
  2. Ikuti langkah 2 – 7 pada bagian-1 edit data diatas, hanya saja disesuaikan alamat link-nya ke halaman hapus_mhs.php.
  3. Jika link delete di halaman tampil_mhs.php sudah dibuat, maka selanjutnya kita buka halaman hapus_mhs.php.
  4. Selanjutnya dari menu Application, pilih Delete Record. Atau dengan cara mengakses menu Insert > Application Objects > Delete Record.
  5. Akan ditampilkan window Delete Record (lihat gambar). Pada window tersebut, aturlah (1) jenis variabel yang akan dijadikan penentu proses hapus dieksekusi atau tidak, (2) koneksi dan nama tabel yang digunakan, (3) kolom yang dijadikan primary key di database beserta nilainya, (4) halaman yang ditampilkan jika proses hapus mahasiswa berhasil.
  6. Klik tombol OK (5) untuk menutup window dan menyimpan pengaturan.
  7. Untuk mencoba proses hapus, buka halaman tampil_mhs.php di browser (F12) dan klik tombol delete.
  8. OK.
Delete Record

Delete Record

Kesimpulan

Macromedia Dreamweaver ternyata memiliki kemampuan lebih untuk membuat aplikasi berbasis database, terutama PHP-MySQL dengan mudah. Aplikasi seperti entri, edit, delete dan tampil dapat dibuat dengan cepat. Dalam tutorial ini hanya disampaikan langkah-langkah dasarnya, untuk tampilan yang lebih bagus, kita bisa mengembangkannya sendiri.

Download Materi Lengkap

Comments
  1. 1589 days ago
  2. 1583 days ago
  3. 1542 days ago
  4. 1497 days ago
  5. 1429 days ago
  6. 1423 days ago
  7. 1393 days ago
  8. 1357 days ago
  9. 1349 days ago
  10. 1310 days ago
  11. 1251 days ago
  12. 1251 days ago
  13. 1126 days ago
    • 1126 days ago
  14. 1095 days ago
  15. 1070 days ago
  16. 1062 days ago
    • 1053 days ago
  17. 1034 days ago
  18. 1020 days ago
  19. 913 days ago
  20. 888 days ago
  21. 826 days ago
  22. 825 days ago
  23. 810 days ago
  24. 785 days ago
  25. 784 days ago
  26. 739 days ago
  27. 707 days ago
  28. 706 days ago
  29. 704 days ago
  30. 695 days ago
  31. 682 days ago
  32. 667 days ago
  33. 646 days ago
  34. 595 days ago
  35. 586 days ago
  36. 552 days ago
  37. 552 days ago
  38. 518 days ago
  39. 503 days ago
    • 503 days ago
  40. 460 days ago
  41. 437 days ago
  42. 425 days ago
  43. 393 days ago
  44. 389 days ago
  45. 326 days ago
  46. 300 days ago
  47. 268 days ago
    • 266 days ago
  48. 245 days ago
    • 237 days ago
  49. 221 days ago
  50. 205 days ago
  51. 26 days ago

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>