Dreamweaver, PHP dan MySQL untuk Aplikasi Data Mahasiswa

Macromedia Dreamweaver merupakan salah satu editor sekaligus web development tools yang cukup kesohor saat ini. Mengapa? Terutama karena kemudahan dan berbagai fasilitas yang mempermudah para pengembang aplikasi web dalam pekerjaannya. Konsep WYSIWYG (what you see is what you get) juga memberikan kenyamanan terutama bagi yang baru mencicipi dunia web (situs). Macromedia Dreamweaver sungguh memanjakan penggunakan dengan berbagai kemudahan, termasuk diantaranya dalam hubungannya dengan bahasa pemrograman PHP dan database MySQL.

Dalam tutorial ini akan disampaikan mengenai begitu mudahnya membuat aplikasi berbasis PHP dan MySQL dengan bantuan Macromedia Dreamweaver. Boleh dibilang tanpa menyentuh coding (program) sama sekali! Cukup ceklak sana ceklik sini, jadi deh. Kita akan membuat aplikasi yang menampilkan, mengentri, edit dan delete data mahasiswa. Sederhana memang, tapi bukankah sesuatu yang rumit juga berasal dari hal sederhana?

Daripada penasaran, yuk kita mulai saja.

Dalam Tutorial Ini Diasumsikan…

Bahwa:

  1. Di komputer yang Anda gunakan sudah terinstall dengan baik PHP, Apache, MySQL dan Macromedia Dreamweaver karena dalam tutorial ini kita akan menggunakan keempat software tersebut.
  2. Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password yang dapat digunakan.
  3. Anda sudah membuat Site Definition pada Dreamweaver, berikut bagaimana mengkolaborasikan Dreamweaver dengan PHP-MySQL.
  4. Anda sudah cukup mengerti bagaimana membuat database, membuat dan memanipulasi tabel di MySQL baik melalui console maupun dengan front-end seperti PHPMyAdmin dan MySQLFront.
  5. Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL, DML).

Mempersiapkan Database dan Tabel MySQL

Langkah pertama dalam membuat aplikasi web berbasis PHP dan MySQL dengan menggunakan Dreamweaver adalah mempersiapkan database dan tabel yang akan digunakan. Dalam tutorial ini akan digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh sederhana bagaimana membuat proses entri, edit, delete dan tampil ke database MySQL dengan bantuan Macromedia Dreamweaver. Namun demikian, jika Anda sudah memahami tutorial ini dengan baik, untuk aplikasi yang lebih kompleks tidaklah berbeda jauh.

Pertama kali buatlah database di MySQL dengan nama dbmahasiswa. Selanjutnya buatlah tabel di MySQL dengan nama mhs dan dengan spesifikasinya sebagai berikut:

+----------+-------------+------+-----+---------+-------+
| Field    | Type        | Null | Key | Default | Extra |
+----------+-------------+------+-----+---------+-------+
| nim      | varchar(10) | NO   | PRI |         |       |
| nama     | varchar(30) | NO   |     |         |       |
| alamat   | text        | NO   |     |         |       |
| tgllahir | date        | NO   |     |         |       |
+----------+-------------+------+-----+---------+-------+

Membuat Koneksi ke MySQL di Dreamweaver

Selanjutnya kita akan mengkoneksikan PHP dengan MySQL memanfaatkan tools yang sudah tersedia di Macromedia Dreamweaver. Jangan lupa pastikan  bahwa Site Definition di Dreamweaver sudah dibuat dengan benar, karena keberhasilan dari koneksi ke MySQL juga bergantung dari site definition tersebut.

Berikut ini langkah-langkahnya:
  1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru.
  2. Aktifkan (buka) panel Application yang berada di sebelah sisi window utama Dreamweaver (lihat gambar)
  3. Buka tab Databases pada panel Application tersebut.
  4. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu MySQL Connection.
  5. Akan ditampilkan window isian MySQL Connection (lihat gambar). Isi nama koneksi, host mysql, username, dan password MySQL dengan benar (1), lalu klik tombol Select… untuk memilih database yang akan digunakan (2) dan klik tombol OK (3) untuk menyimpan konfigurasi koneksi MySQL.
  6. Jika koneksi berhasil maka pada panel Application tab Databases akan ditampilkan informasi database berikut tabel-tabel yang terdapat dalam database tersebut. (lihat gambar)
MySQL Connection
MySQL Connection

Membuat Halaman untuk Input Data Mahasiswa

Setelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat halaman untuk melakukan input data mahasiswa ke database MySQL. Pada dasarnya untuk membuat aplikasi input data, kita harus membuat form inputan terlebih dahulu. Namun dengan bantuan Macromedia Dreamweaver, kita akan memanfaatkan fasilitas yang sudah tersedia, sehingga tidak perlu membuat form terlebih dahulu.

Berikut ini langkah-langkahnya:

  1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru (jika sudah dibuat, tidak perlu dibuat lagi).
  2. Aktifkan bagian Application di menu atas, lalu pilih menu Record Insertion Form Wizard (lihat gambar). Atau bisa akses menu Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
  3. Akan ditampilkan window Record Insertion Form. Tentukan koneksi yang digunakan, tabel yang digunakan dan atur tampilan form (jenis inputan). Tekan tombol OK.  Lihat gambar
  4. Di halaman akan ditampilkan form inputan untuk data mahasiswa (lihat gambar). Tekan F12 (Preview in Browser) untuk mencoba halaman input data mahasiswa.
Record Insertion Wizard
Record Insertion Wizard

Membuat Halaman untuk Menampilkan Data Mahasiswa

Untuk membuat halaman yang menampilkan data dari database, dalam hal ini data mahasiswa, caranya cukup mudah. Yang pasti sebelum melanjutkan, kita harus memastikan kembali bahwa koneksi ke MySQL sudah dibuat dengan benar (lihat caranya di atas). Untuk menampilkan data dari database, pertama kali yang harus kita lakukan adalah membuat Recordset, lalu setelah recordset dibuat kita tinggal menentukan datanya mau ditampilkan dalam bentuk tabel atau yang lainnya. Dalam tutorial ini, kita akan menampilkan data ke dalam bentuk tabel.

Berikut ini langkah-langkahnya:

  1. Buatlah file dengan nama tampil_mhs.php untuk menampilkan data mahasiswa.
  2. Buka bagian Application, lalu pilih menu Recordset (atau dapat mengaksesnya melalui menu Insert > Aplication Objects > Recordset). Lihat gambar!
  3. Akan ditampilkan window Recordset (lihat gambar dibawah). Tentukan nama Recordsetnya (1), koneksi yang digunakan (2), tabel yang akan ditampilkan (3), field yang akan ditampilkan (4) serta filter dan pengurutan yang diinginkan (5). Tekan tombol OK untuk melanjutkan. Kita juga bisa menekan tombol Test untuk memastikan semua sudah benar.
  4. Selanjutnya akan ditampilkan window informasi jika Recordset berhasil ditambahkan. Klik OK untuk melanjutkan
  5. Dari menubar Application, Pilih icon Dynamic Data dan pilih Dynamic Table (lihat gambar). Atau juga bisa dilakukan dari menu Insert > Application Objects > Dynamic Data > Dynamic Table.
  6. Akan muncul window Dynamic Table. Pilih nama Recordset yang akan ditampilkan, jumlah record yang akan ditampilkan dan beberapa setting tabel. Klik OK untuk melanjutkan. Lihat gambar
  7. Di halaman akan ditampilkan sebuah tabel, baris pertama adalah header, baris kedua adalah data (record) dari database (gambar). Tekan F12 (Preview in Browser) untuk mencoba halaman tampil data mahasiswa.
Recordset
Recordset

Bersambung ke bagian 2 (Edit dan Delete data)

Download Tutorial

  1. Download dari DepositFiles

Lihat Tutorial lainnya

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

87 comments

  1. bikin halaman statis gimana ya ? jadi menunya itu aja tinggal bagian bawahnya yang berubah. jadi gak usah bikin halaman banyak2.

    trims

  2. Pingback: pingback
  3. loh , mas, knapa ya saya ga bisa nampilin isi tabelnya, padahal untuk input bisa (udah dilihat di phpmyadmin), Halaman untuk Menampilkan Data Mahasiswanya masih ngeblank.. knapa y ???

  4. di dalam dreamweaver 8 layanan user authen. ada menu login user..
    mau tanya.. ada pilihan restrict acces based on untuk apa..
    makasih..

  5. hy, aku mau tanya ne tentang php dan mysql….???
    gimana si menggabungkan(relasition) tabel antara satu dengan yang lainnya???
    saya kebingungan membuatnya.. database yang saya gunakan adalah mysql/phpmyadmin…
    tolong saya ya,,,,!!!!!
    saya udah banyak baca buku anda….
    tetapi kode nya merupakan php asli dari notepad…

  6. koq aku dah dicoba tapi gak bisa conect kalau langsung tapi kalau pake script koneksi berhasil???kenapa yah???
    aku pake dreamweaver mx dan local servernya pake wampserver
    help me????

  7. hai..saya dari malaysia..
    saya baru ketahui tentang dreamweaver cara-cara penggunaannya dari nota2 saudara..
    saya buat “edit” data, ngak jadi2..masih belom bisa di run.. kenapa ya?
    disini buku rujukan tentang dreamweaver 8,php, belom saya ketemui..agak rumit/susah untuk saya mempelajari dreamweaver 8,php..
    mohon saudara tunjuk kan cara-cara menggunakan dreamweaver 8,php.
    t.kasih.

  8. untuk koneksi kok ane belum ngerti ya, berulang-ulang konek lewat web site ,database gak pernah berhasil, mohon pencerahannya.

  9. Saya sudah berhasil membuat halaman input mahasiswa berikut recordnya. Tapi ketika di tes di Browser dan input data, pas klik \Insert Record\ malah muncul pesan error:
    Fatal error: Call to undefined function get_magic_quotes_gpc() in C:WebServwwwinput_mhs.php on line 5]
    Ada yang salah kah?

  10. Pingback: Pingback
  11. Om tolong aq donk,, aq ga bisa memasukan gambar ke dalam database pada dreamweaver,,, aq pke XAMPP…
    aq gbsa.. aq pusing,, aq stress,,, om bisa bantu aq ?
    jadi upload gambar dan masuk ke localhost… T^T mohon bantuanya….

  12. Ternyata hari gini masih ada yg berani ‘bergratis ria’….mantab, Pak…semoga terus bertambah ilmunya dan semakin banyak programmer php  karena tutorial yang bapak berikan.
    Trims.

  13. Wah kren nie…???tapi bleh kan sedikit membantu permaslahan saya ini…saya
    mempraktekkan mengkoneksikan nya tapi gak bisa,pas select data base nya error…sya pkek server
    phptriad dan dreamweaver smua versi.bentk error nya…

    1)There is no testing server running on the server
    machine.
    2)The testing server specified for this site does not map to the
    http://localhost_mmServerScrip/MMHTTPDB.php URL Verify that the URL Prefix maps
    to the root of the site
    maksud nya apa yah????

    MOHON BANTU NYA…
    Saya ucapkan trimakasih

      1. Sudah dan saya rasa sudah benar, tapi tetap pesan sama seperti itu. Pkir saya server nya yang kurang complit akibat manipulasi virus setalah saya ganti pkek XAMPP error tetap sama…Bantuan nya,mas karna pentng mau buat laporan PKL.
        Sebelum nya Trimakasih mas?

  14. MAS MAS …. Postingan Mengenai membuat  Log in dan Log Out pada Macromedia dreamweaver 8.2 yang berbasis PHP dan Mysql…. Mohon Tutor nya Mas…

  15. Mas sy lg coba bikin web pake dreamweaver sy ingin menampilkan semua artikel di halaman index tpi yg tampil hanya satu.gmn cr nampilin semua artikel?dr kmrn sy coba ga bs terus.sy tunggu sgr jwbnny.terima kasih…

  16. wah keren abis nih tutornya…tingkatkan terus mas…
    oya saya mau tanya ??saya sudah coba dah alhamdulillah berhasil, tapi saya pengen nambahin foto mahasiswanya? bisa ga pake cara seperti di atas ? tanpa scrip? kalau bisa tolong kirim email ya ? please.
    mkasi sebelumnya

      1. udh mas,malah keluar koneksi sukses,,apa ngaruh dengan dengan versi nya,
        saya makek xampp-win32-1.7.4-VC6-installer
        dengan macromedia mx

  17. mau tanya dreamwaver sy gak bisa dikonekin ke database sy pakai aplikasi xampp untuk databasenya.padahal langkah” sudah sesuai petunjuk.
    Mohon petunjuk 🙂

    1. Pasti ada yang error. Cek kembali, silahkan kirimkan ke email saya screenshoot setiap langkah yang dilakukan jika memang belum ketemu penyebabnya.

  18. Pingback: dns
  19. pa bza ga buat data tapi dgn upload foto jg..
    ntr tampilannya bisa bikin kartu mhs??
    tolong bgt..mksh…

  20. Maaf, mungkin ini adalah pertanyaan yang bodoh, tapi saya benar-benar ingin mengetahuinya..
    1. dimana database itu tersimpan..?? apakah di folder C..?? xampp..?? htdocs..??
    2. Jika suatu saat komputer saya rusak dan terpaksa harus diinstall ulang, bagaimana dengan data saya..?? apakah data saya aman..?? ataukah lenyap tanpa terselamatkan..??
    3. Bagaimana cara memback-up database secara otomatis ke tempat yang aman sekali.. jika memang ada, dimana tempat penyimpanan yang sangat aman tersebut..??
    Mohon penjelasannya, Terimakasih..

    1. 1. database tersimpan di folder /mysql/data
      2. sebelum install ulang kan masih bisa dibackup dulu datanya, penyimpanan data mysql juga tidak harus di partisi utama.
      3. ada pembahasan lengkap mengenai backup di buku gratis mysql5 yang saya share di web ini, silahkan pelajari. tempat paling aman? ada. ada di hatiku…. haha2x… tidak ada tempat backup yg paling aman, tapi backup ke banyak tempat dan media merupakan cara yang paling aman.

  21. mas, kalo bikin buat sistem aktivasi siswa gimana ya?
    misalnya untuk PSB online, setelah siswa daftar baru bisa di aktivasi setelah konfirmasi pembayaran.

  22. bagaimana cara melihat data pendaftar di suatu situs dan apakah nama aplikasi yang bisa membuat url.

  23. Ass Mas . Error sewaktu Select Database di Mysql Connection mas . Error ” PHP server doesn’t have MYSQL module loaded or you can’t use the mysql_(p) ” ada solusi mas ? Terimakasih

  24. mas, misalkan saya mau mengurutkan tampilan data diatas berdasarkan waktu diinput. caranya gimana ya gan?

    mohon bantuannya gan

  25. Nice blog and article, thanks for sharing. However want to statement on few common issues, The
    website taste is great, the articles is in point of fact excellent.

Leave a Reply

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