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

Berbagi itu indah...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

79 comments

  1. thanks banget mas……
    bantu buat nambah ilmu nih
    kebetulan ane pengen belajar ni “bahasa”
    dan bingung harus memulainya dari mana..

    kalau Dreamweaver bs digabungin ma PHP dan MYSQL
    beban diotak jd agak ringan nih kayaknya!!!!

  2. Saya biasa make frame untuk bikin web dengan dreamweaver, karena mudah bikin menunya, tapi ketika digunakan untuk database gak bisa. Ada gak tutorial untuk membuat web (yang make tabel) dengan dreamweaver dengan menggunakan menu. Trims.

    cip’s last blog post..Teman IKIP Malang

  3. saya ucap kan terimakasih saa dah coba buat aplikasi kayak gini cm beberapa kali jg gagal bisa input data bisa tampil bisa tambah cm wak tu edit ma hapus ngak pernah berhasi coba dngn cara bung achmad semoga berhasil trims bro…

  4. terima kasih pak atas tutornya… tapi ini saya modif kok jd bingung y ^.^ mohon pencerahannya…
    gini ptama memang sama ada button edit setelah klik button edit kan buka halaman baru yaitu untuk update… nah waktu update selesai kan seharusnya saya mau nampilkan yang sudah di update tapi kenapa kok ndak bisa ya >.<

    mohon di jawab y… atau email aja… THX

  5. Pingback: Pingback
  6. mas, untuk yang bagian hapus nya apakah perlu dibuat recordset dulu atau tidak, saya udah coba tapi gak jalan tuh. waktu diklik delete gak ada tampilan apa2.

  7. aslkm mas achmatim,
    tutorial boson7 koq gak ada ?
    klo ada, share ya, klo gak lgsung kirim via email…
    o iya, sama phpmyadmin juga klo ada..
     
    thks be4
    wassalam..

  8. kalau untuk buat link dari judul berita.. supaya keluar isi berita selengkapnya di halaman “view berita”, bagaimana cara wizardnya Pak?
     
    ma’af ne anti coding..,
    kalau ada cara yg mudah seperti bapak kenapa gak pakai cara ini saja ..yakan pak
     
     

    1. #zaki. Bisa, coba pelajari ebook “Foundation Dreamweaver for PHP”, disana ada contohnya juga. Maaf saya belum sempet bikin tutorialnya

  9. terima kasih mas……atas tutor2nya….
    berkat mas untuk membuat aplikasi pengolahan data berbasis web ga’ usah repot2 ngetik scrip….hehehe…jadi pemalas…
    tapi kalo membuat report datanya menggunakan m dreamweaver gimana mas?pliss mas q da tugas ne………..

  10. Koq di macromedia dreamweaver 6.0 q gak ad fasilitas aplication delete recordnya, gimana dong.
    Balas ke e-mail ya mas, penting banget nich lagi ngerjain tugas

  11. Salam sejahtera mas, aku mau tanya ttg tutorial ini mas, kok aku ngga bisa edit ya…pas diklik menu editnya malah muncul form edit dengan halaman kosong, kan harusnya ada isis dari data sebelumnya.terimakasih mas

  12. KK mau nanya? ada klo toturialnya upload foto/file ke file trus sampai nampilin ke tabel seri DW ada ga kaka buat nambah referensi ngerjain tugas

  13. Mas, klau buat database peminjaman buku pakai PHP dan mysql, gmn yha,
    formnya bisa di input,edit,hapus dan tampil, tolong dibantu buat nambah ilmu,
    kirimkan filenya ke email saya dong Email jyuli.friendly@gmail.com. thanks alot

  14. ass..
    mohon maaf sebelumnya..
    saya mahasiswa dari aceh.
    saya lagi mengerjakan tugas akhir manajemen informatika D3 di banda aceh.
    dengan judul sistem informasi penggajian karyawan berbasis web.
    tapi saya tidak tahu car membuat login dan logout serta koneksi absen dengan gaji karyawan..
    saya mohon bantuannya.. saya sangat membutuhkankannya..
    tolong berikan penjelesannya di email saya..
    terimakasih pak…

  15. Pak, saya mau nanya,, saya punya 3 tabel

    /* Style Definitions */
    table.MsoNormalTable
    {mso-style-name:”Table Normal”;
    mso-tstyle-rowband-size:0;
    mso-tstyle-colband-size:0;
    mso-style-noshow:yes;
    mso-style-priority:99;
    mso-style-qformat:yes;
    mso-style-parent:””;
    mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
    mso-para-margin:0cm;
    mso-para-margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:10.0pt;
    font-family:”Calibri”,”sans-serif”;}

    Pasien = @NomorPasien + NamaPasien + JenisKelamin + TempatLahir + TanggalLahir + NoTelp + Alamat
    Menu = @KodeMenu + JenisMenu + MenuPagi + MenuSiang + MenuSore + Kalori + Protein + Lemak + HidratArang
    Seleksi = @NomorSeleksi + @NomorPasien + @KodeMenu + AnalisaPenyakit + Perawatan + Dokter + Ruangan

    untuk tabel pasien dan tabel menu nya gak ada masalah.. tapi ditabel seleksi disaat saya buat form inputnya.. terus semua sudah saya input tapi waktu disimpan.. keluar pesan Column ‘NamaPasien’ cannot be null.. mohon bantuannya ya pak.. gimana buat form input seleksinya yang benar sesuai dengan relasinya… makasihh…

  16. Mas Achmatim trims tutornya…tapi gimana mas caranya jika membuat aplikasi entri data dan semacamnya jika databasenya berelasi one to many.. misalkan satu kepala keluarga mempunyai banyak anggota rumah tangga (ex: Suami mempunyai istri n 3 anak)apakah bisa menggunakan seperti turtorialnya yang diatas?mohon pencerahannya mas…trims

  17. maaf mas saya mau nnya,tp sblmnya saya udh praktekkn tutorial yg di atas dan sudah berhasil..yg mau saya tnya kn,gmn caranya kalau saya mau buat 1 buah button dgn nama (tambah)pada tampil_mhs.php yang gunanya utuk menambahkn data yang baru pada localhost-nya..mohon penjelasannya mas..thanks

  18. maaf sebelumnya…
    mau nanya gmana cara menampilkan tabel pencarian…maksudnya  data yang di cari berdasarkan nama atau yg lain tombol search, tampil di dalam tabel…..
    maksih sebelumnya…..

    1. Kalo untuk proses hapus, nyobanya jangan langsung akses file hapus tersebut, tapi ngelink dari halaman tampil. Diklik link hapus/delete baru bisa terhapus datanya. Baca tutorialnya dengan lengkap, jangan hanya sepotong saja… 🙂 

  19. mas/mbak/bu/pak, mau tanya, kalo seumpama di dalam phpmyadmin kan ada relasi antar tabel. terus yang mau saya tanyakan, untuk memanggilnya agar di dalam websites langsung memilih prymary key tabel lain dari foreign key dengan menggunakan list menu gimana ya?

  20. Mau nanya,
    1. Bagaimana ya kalau bikin aplikasi pencarian data lebih dari satu tabel (misal ada lagi tambahan tabel data orang tua)? soalnya di tutorial pencarian data mahasiswa itu tabelnya hanya satu!
    2. Bagaimana di dreamweaver untuk membuat format tanggal dalam format tampilan indonesia yaitu D-M-Y, karena format tampilan MySQL itu Y-M-D, saya bingung karena banyak tutorial PHP-MySQL murni (tanpa dreamweaver), kodingnya agak beda dengan koding PHP-MySQL yang ada di dreamweaver
    3. Bagaimana cara membuat aplikasi input, dan menampilkan berita di dreamweaver cuma didalamya dilengkapi gambar
    4. Apakah anda punya script javascript yang digunakan untuk membuat gambar/tulisan bergerak dari kanan kekiri , kemudian muncul lagi dari kiri tanpa putus (karena kalau pakai marquee akan terputus)
    Trims, maaf nanyanya kebanyakan soalnya pemula :>

  21. cara bikin admin gmana ya pak??
    gmana cara koneksiin ke database phpmyadmin supaya admin bisa ngedit data di web.
    kalo bisa minta tutorialnya dong,lengkap dengan source codenya
    tnks. 😉

  22. ass…..
    gemana cara membuat website sekolah dan mengguanakn database mysql phpadmin…mohon bimbingannya mas…

  23. trims bang, sangat membantu tutornya, semoga bisa kasih tutor-tutor berikutnya.
    “salam kenal aja” ahmad

  24. mas…..
    makasih banyak bwt tutorialnya…
    ini akan sangat membantu saya…
    semoga mas bisa menposting artikel lebih banyal langi mengenai macromedia dreamweaver dan vb.net

    thank mas
    achmatin

  25. ass. langkah anda sudah saya coba tetapi kenapa yang bisa diedit hanya kolom yang atas aja/kolom (data) pertama… sedangkan data/kolom selanjutnya (2,3,4,….. dst) tidak bisa diedit… tiap di klik data selanjutnya (2,3,4…… dst) slalu muncul data yg pertama… minta tolong bantuannya pak…..

    1. kemungkinan besar, ada langkah yang terlewat saat membuat parameter di halaman tampil data. coba cek alamat url di halaman edit, pastikan disana ada ID yang berganti2 setiap klik baris data yg berbeda.

  26. Bisa diberikan contoh berupa langkah2 dalam membuat parameter di halaman tampil data yang mas solichin maksud…(halaman edit) mohon bantuannya…
    thanks mas

  27. assalamualaikum mas,
    thanks atas tutorial dw untuk membuat db mahasiswa..
    sy cb dan jalan dgn lancar di localhost. tapi pas sy upload ke free hosting kok g jalan ya.
    1. sy sdh import db-nya
    2. sy sdh set parameter koneksi-nya
    pas di jalankan, masih terbuka yg halaman depannya saja
    apakah ada parameter lain yg harus sy koreksi lagi.
    mhn bimbingannya..
    tq, ridwan

  28. thanks smw tutorialnya,
    saya belum mengrti smwnya, pi saya mau coba smw,,,
    saya mau bngt bljar php,
    mohon bimbingannya,, dri penginstallan software ap saja yg di butuhkan,,,

    Thanks,,,

  29. trims bang, sangat membantu tutornya, semoga bisa kasih tutor-tutor berikutnya.
    “salam kenal aja” Fikri

  30. pak saya mau tanya,pak saya sedang membuat web di dreamweaver,harus di koneksikan ke database,tetapi ada tulisan proses input data gagal,kira”dari mna ya salah nya soalnya udah saya ubek” ga ketemu pak,mksh,mohon bantuanya,,

    1. waah… saya sulit ya untuk memperkirakan salahnya dimana kalo cerita masalahnya cuman segitu. coba lebih detil lagi ya, kalo perlu ada screenshot atau code yang disertakan. silahkan kirim email aja biar lebih nyaman.

  31. PAK MOHON PETUNJUKNYA…
    PAK INI DINAMIK TABEL YA, KALO NAMBAHIN LINK DARI DINAMIK TABEL GIMANA YA PAK,,,
    MISAL KALO DISBELAH KANANNYA “EDIT ” DAN “DELETE” DI TAMBAHKAN LINK “DETAIL”, GIMANA PAK NGELINKANYA, SEHINGGA MASING-MASING BARIS /MAHASISWA MEMILIKI LINK DETAIL YANG BERBEDA-BEDA, INI SEBELUMNYA SUDAH KITA BUAT DATA DETAILNYA MASING-MASING MAHASISWA PER HALAMAN, TERUS GIMANA YA PAK NGELINKKAN DARI MASING-MASING BARIS KE TIAP HALAMAN DETAILNYA,,,
    TERIMAKASIH PAK, MOHOHN BERKENAN MEMBERIKAN ARAHAN,,,

      1. hehehehe.. mohon maaf pak kalo tersinggung, saya gak ada niatan marah-marah ya pak,.. memang kebetulan saja ngetiknya kemrin capslocknya aktif,, hehehhe…

  32. sbelumnya terima kasih banyak untuk berbagi ilmunya mas, tapi yang untuk update data. waktu data dalam field yg akan dieksekusi untuk di edit kok ga keluar ya isi datanya di tampilan edit/update?
    padahal saya udah ngikutin instruksinya mas dengan benar
    kalo untuk insert sih ga ada masalah 100% work
    tolong dibantu mas
    e-mail: punce.bootsector@gmail.com

  33. mkasih gan tp bingung untuk parmeternya tuh maksudnya gmn ??? coba share gambar untuk parameternya

Leave a Reply

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