Seri dreamweaver ui
0 likes317 views
Tutorial ini menjelaskan cara membuat aplikasi CRUD (create, read, update, delete) untuk data mahasiswa menggunakan PHP, MySQL, dan Macromedia Dreamweaver dengan langkah-langkah seperti membuat koneksi database, membentuk tabel, membuat form input, menampilkan data, dan mengedit atau menghapus data. Tutorial ini mendemonstrasikan kemampuan Dreamweaver dalam membangun aplikasi berbasis database secara mudah.
![Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa
Achmad Solichin (Univ. Budi Luhur) Page 3
Membuat Koneksi ke MySQL di Dreamweaver
elanjutnya 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.
Gambar 2. Panel Application Tab Database untuk Membuat Koneksi
S](https://image.slidesharecdn.com/seridreamweaver-tampilentrieditdeletedatamahasiswa-141216002407-conversion-gate01/85/Seri-dreamweaver-ui-3-320.jpg)
Seri dreamweaver ui
- 1. Tutorial Macromedia Dreamweaver – PHP – MySQL Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Oleh Achmad Solichin, http://achmatim.net, [email protected]
- 2. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 2 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 angkah 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 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 | | | | +----------+-------------+------+-----+---------+-------+ Setelah tabelnya dibuat, kurang lebih tampilannya sebagai berikut: Gambar 1 Struktur Tabel mhs di PHPMyAdmin L
- 3. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 3 Membuat Koneksi ke MySQL di Dreamweaver elanjutnya 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. Gambar 2. Panel Application Tab Database untuk Membuat Koneksi S
- 4. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 4 Gambar 3. Window MySQL Connection Gambar 4. Tampilan jika Koneksi Database Berhasil Membuat Halaman untuk Input Data Mahasiswa etelah 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. 4. Di halaman akan ditampilkan form inputan untuk data mahasiswa. Tekan F12 (Preview in Browser) untuk mencoba halaman input data mahasiswa. S
- 5. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 5 Gambar 5. Record Insertion Form Wizard Gambar 6. Menu Insert Record Form Wizard
- 6. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 6 Gambar 7. Record Insertion Form Gambar 8. Hasil Input Data Mahasiswa Gambar 9. Tampilan Halaman Input Data di Browser
- 7. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 7 Membuat Halaman untuk Menampilkan Data Mahasiswa ntuk 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. 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. 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. 7. Di halaman akan ditampilkan sebuah tabel, baris pertama adalah header, baris kedua adalah data (record) dari database. Tekan F12 (Preview in Browser) untuk mencoba halaman tampil data mahasiswa. Gambar 10. Recordset U
- 8. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 8 Gambar 11. Menu Recordset Gambar 12. Atur Recordset Gambar 13. Dynamic Table untuk menampilkan data
- 9. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 9 Gambar 14. Dynamic Table Gambar 15. Window Dynamic Table Gambar 16. Tampilan Data Mahasiswa di DW
- 10. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 10 Gambar 17. Tampilan Data Mahasiswa di Browser Membuat Halaman untuk Mengedit Data Mahasiswa alaman 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. 1. Pertama kita buat dulu halaman “edit_mhs.php”. 2. Pertama 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. 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). 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... 4. Pada window Parameters.. isi nama parameter yang akan dikirimkan (nim) di bagian name dan selanjutnya di bagian value (2) klik tombol Dynamic Data (gambar petir). 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 H
- 11. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 11 Gambar 18. Menambahkan Kolom Tabel Gambar 19. Menambahkan Kolom Gambar 20. Menambahkan Hyperlinks
- 12. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 12 Gambar 21. Insert Hyperlinks with Dynamic Data Setelah link untuk ke halaman edit dibuat, sekarang kita buat halaman edit mahasiswa: 8. Buka halaman edit_mhs.php yang sudah dibuat di langkah 1. 9. 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. 10. 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). 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) kita mengatur nama parameternya adalah nim. Klik OK untuk menyimpan pengaturan dan Recordset akan terbentuk. 11. Kemudian dari menu Application, pilih Record Update Form Wizard. Atau dengan cara mengakses menu Insert > Application Objects > Update Record > Record Update Form Wizard. 12. Akan ditampilkan Record Update Form. Atur koneksi, tabel yang digunakan, nama recordset untuk data yang akan diedit (langkah 10), 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. 13. Akan ditampilkan form edit data di Dreamweaver. Untuk mencoba proses edit, buka halaman tampil_mhs.php di browser (F12) dan klik tombol edit.
- 13. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 13 Gambar 22. Membuat Recordset Gambar 23. Menu Record Update Form Wizard Gambar 24. Record Update Form
- 14. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 14 Gambar 25. Tampilan Edit Data Mahasiswa di DW Gambar 26. Tampilan Edit Data Mahasiswa di Browser Membuat Halaman untuk Menghapus Data Mahasiswa eperti 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 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. S
- 15. Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa Achmad Solichin (Univ. Budi Luhur) Page 15 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. Gambar 27. Delete Record Wizard Kesimpulan acromedia 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. Tentang Penulis Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005). Saat ini sedang menempuh pendidikan S2 di Magister Teknologi Informasi Universitas Indonesia (2008). Kegiatan sehari-hari adalah sebagai Dosen di Universitas Budi Luhur (http://www.bl.ac.id), sekaligus sebagai Kepala Laboratorium Komputer Universitas Budi Luhur (http://labkom.bl.ac.id). Kegiatan lain aktif sebagai programmer, web developer, system analyst dan memberikan pelatihan di berbagai bidang komputer serta membuat tutorial-tutorial praktis di bidang komputer. Penulis juga terlibat dalam pengembangan E-Learning di Universitas Budi Luhur. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial praktis. Penulis dapat dihubungi melalui email di [email protected] atau YM achmatim. M