Modul 2 DreamWeaver MX Suendri, S.Kom

Transkripsi

1 Modul 2 DreamWeaver MX 2004 Suendri, S.Kom

2 -- Untuk Indonesia Tanah Air Tercinta -- Suendri, S.Kom 2

3 Lisensi Dokumen Seluruh isi dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara luas untuk tujuan pendidikan, pembelajaran dan bukan komersial (nonprofit) dengan syarat tidak menghilangkan, menghapus atribut penulisan dokumen ini dan pernyataan dalam lisensi dokumen yang disertakan dalam setiap dokumen. Dibenarkan melakukan penulisan ulang tanpa harus mendapat izin penulis untuk tujuan pendidikan tapi bukan untuk komersial. Ilmu hanya milik Allah Tabarako wata ala. Suendri, S.Kom 3

4 Kata Pengantar Puji dan syukur kepada Allah Tabaroka wata ala, atas rahmatnya hingga terselesai revisi modul ini. Pada pertengahan 2010, penulis telah mulai menyusun modul Dreamweaver MX 2004 untuk penunjang Matakuliah Pemrograman Web, Namun karena pada tahun tersebut merupakan awal penulis dalam pengajaran Matakuliah tersebut, penulis merasa modul tersebut dibuat dengan bentuk sederhana dan tampilan yang kurang menarik serta banyaknya kesalahan dibeberapa tempat. Oleh karena itu, penulis berusaha untuk memperbaiki kesalahan tersebut dan membuat modul menjadi lebih mudah dimengerti dengan langkah-langkah yang lebih tersusun rapi. Penulis menyadari, dalam modul ini masih terdapat kekurangan dan kesalahan, oleh karena itu mohon kritik dan saran untuk kesempurnaan modul ini. Akhirnya, penulis berharap, mudah-mudahan modul ini bisa bermanfaat bagi para pembaca dan bermanfaat untuk Pendidikan di Indonesia. Penulis Suendri Suendri, S.Kom 4

5 Project : Input dan Tampil data Tujuan : Membuat Input dan Tampil Data menggunakan Dreamweaver. Asumsi! Apache dan MySQL anda telah running. PhpMyadmin anda telah running. Anda menggunakan Phptriad2-2-1, jika menggunakan Software lain silakan lihat modul 1. Silakan ikuti langkah demi langkah pada panduan berikut, jika anda bingung pada pertengahan latihan, jangan takut untuk mengulang kembali dari awal, karena ilmu tidak bisa didapat dengan cara instant, hanya orang yang sering latihan yang akan lancar dan paham. 1 Buatlah Folder di c:/apache/htdocs dengan nama latihan1. Gambar 1. Folder latihan1 TIPS! Dalam latihan, dua Azimat yang perlu anda ingat, 1. Gunakan selalu huruf kecil. 2. Jangan ada Spasi, kecuali pada tempat yang semestinya. Suendri, S.Kom 5

6 2 Bukalah Dreamweaver MX 2004, Atur Site anda, anda bisa membuatnya di menu Site -> Manage Sites.. Kemudian Klik tombol New dan pilih Site, seperti pada gambar berikut. Gambar 2. Menu Manage Site Gambar 3. Form Manage Site Gambar 4. New site TIPS! Nama Site bersifat case sensitif, Tidak bisa dibuat 2 kali dengan nama yang sama, pastikan masing-masing latihan anda bedakan. Suendri, S.Kom 6

7 3 Buatlah nama Site anda, sesuai nama folder latihan kita, latihan1. Berikutnya klik Next. latihan1 4 Gambar 5. Nama site Pada halaman berikutnya anda akan menemui pilihan server yang digunakan, Silakan pilih PHP Mysql seperti pada gambar. Gambar 6. Server yang digunakan Suendri, S.Kom 7

8 5 Langkah berikutnya, File Kerja dan Tempat Penyimpanan. Anda akan dihadapkan 3 pilihan, Pilih Edit and test locally, karena kita hanya berkerja di local computer tanpa remote ke komputer lain, kemudian silakan cari tempat penyimpanan anda, pada latihan kali ini di c://apache/htdocs/latihan1. c:\apache\htdocs\latihan1\ Gambar 7. File Kerja dan Tempat Penyimpanan 6 Testing File, adalah URL tempat dimana web kita akan di Browse, silakan isikan kemudian anda bisa mengklik test URL untuk mencoba apakan koneksi berhasil. Seperti pada gambar berikut. Catatan : Jika Apache anda belum running, maka Test URL tidak akan berhasil anda lakukan, jadi pastikan Apache dan MySQL anda telah Running. Suendri, S.Kom 8

9 Gambar 8. Testing Files 7 Selanjutnya, Pilihan Sharing Files, silakan Pilih No saja. Gambar 9. Sharing File Suendri, S.Kom 9

10 8 Summary, silakan pilih Done, berarti Pengaturan Site anda telah selesai dilakukan. Gambar 10. Summary 9 Pengaturan Site selesai, klik Done untuk mengakhiri sekaligus menggunakan Site ini. Gambar 11. Done Suendri, S.Kom 10

11 File baru Selamat Datang di Dreamweaver. Sekarang saatnya anda membuat 10 Gambar 12. Site Manager Complete Langkah berikutnya buat sebuah File baru, Klik Kanan pada Window bagian kanan, Pilih New File. Beri nama pada File tersebut dengan input_guru.php. TIPS! Pemberian nama file bisa anda gunakan dengan cara, Fungsi File ditambah Nama Table, bisa anda pisah dengan underscore _. Contoh input_guru.php, tampil_guru.php, edit_guru.php serta delete_guru.php dan sebagainya. Suendri, S.Kom 11

12 11 Double click nama file yang diinginkan, yakni input_guru.php Langkah selanjutnya buat recordset untuk file input_guru.php, pengertian recordset dapat anda lihat pada modul sebelumnnya. Ada 2 cara untuk membuat recordset, namun agar lebih mudah anda bisa mengambilnya pada shortcut yang telah ada pada menu utama. TIPS! Gambar 14. Recordset Agar tersusun rapi, pemberian Nama recordset bisa anda lakukan dengan cara rec_fungsi-file_nama-table contoh : rec_input_guru Untuk menghubungkan ke database, silakan pilih koneksi data yang digunakan. Karena kita belum punya koneksi, maka silakan buat koneksi baru. Pilih New Gambar 16. Koneksi database Suendri, S.Kom 12

13 Gambar 17. MySQL Connection Gambar 18. Pilih Database Connection name = koneksi Mysql server = localhost Username = root Password = (kosongkan) Database = dbguru Gambar 19. Koneksi Complete Suendri, S.Kom 13

14 Jika pengaturan koneksi telah siap, silakan pilih connection anda beserta table yang ingin digunakan yaitu table guru. Klik OK untuk selesai. 12 Gambar 20. Recordset Complete Setelah Recordset berhasil dibuat, langkah selanjutnya adalah membuat Form Input guru, ada 2 cara untuk membuat form : a. Record Insertion Form Wizard, yaitu membuat form secara otomatis yang diambil dari field tabel yang ada pada database. b. Insert Record, yaitu membuat form secara manual. Anda dapat melihat tutorial lanjut pada Expert Modul. Gambar 21. Record Insertion Form Wizard Suendri, S.Kom 14

15 Berikutnya anda akan dihadapkan pada pengisian Record insertion Form. Silakan isi sesuai pilihan yang ada. a. Connections = koneksi b. Table = guru c. After inserting, go to = untuk pilihan ini boleh anda isi dan boleh tidak, jika anda ingin mengisi form ini, terlebih dahulu buatlah file baru dengan nama tampil_guru.php. manfaat dari form ini adalah ketika pada saat anda melakukan input guru dan button simpan di klik, maka anda akan di arahkan ke file yang anda inginkan, sebagai contoh tampil_guru.php Gambar 23. Record Insertion Form Wizard Gambar 24. Record Insertion Form TIPS! Untuk Field ID pada contoh kasus ini, karena type filenya auto increment, maka anda bisa menghapus field ini dengan menekan tanda - ( Minus ) pada Form Fields. Suendri, S.Kom 15

16 Form Input telah selesai, silakan tambah beberapa tulisan pendukung serta warna serta desain yang anda inginkan. Simpan latihan anda. Preview file input_guru.php Gambar 24. Form Input complete Gambar 24. Preview Form input_guru.php Sampai pada tahap ini untuk proses input telah selesai, anda bisa menggunakan langkah demi langkah untuk berbagai table yang menggunakan proses input ke dalam tabel tersebut. Catatan : Koneksi hanya dibuat satu kali untuk satu website, jadi langkah pembuatan koneksi tidak lagi dilakukan untuk form input berikutnya, anda tinggal memilih pilihan koneksi, kecuali anda menggunakan lebih dari satu database. Suendri, S.Kom 16

17 13 Selanjutnya kita buat file baru, tampil_guru.php. file ini akan menampilkan tabel hasil input yang kita lakukan. Silakan atur recordset untuk tampil_guru.php Gambar 25. Recordset Berikut silakan isi Name, Connection dan Table yang diinginkan. Klik OK jika anda telah selesai. Gambar 26. recordset tampil_guru.php 13 Langkah terakhir, silakan pilih menu Dynamic table untuk menampilkan data yang ada dalam database. Suendri, S.Kom 17

18 Gambar 27. Menu Dynamic Table Pilih recordset yang anda buat sebelumnya, kemudian pada option Show, isikan jumlah table yang ingin anda tampilkan atau pilih All records jika anda ingin menampilkan semuanya. Klik OK jika anda telah selesai. Gambar 28. Set Dynamic Table Tampil_guru.php telah selesai, agar lebih bagus, silakan tambah beberapa desain tambahan seperti judul, warna background dan sebagainya. Gambar 29. tampil_guru.php Suendri, S.Kom 18

19 Preview akhir tampil_guru.php. Gambar 30. Preview tampil_guru.php input_guru.php dan tampil_guru.php telah selesai anda buat, untuk selanjutnya silakan gunakan modul 3 untuk membuat file edit dan delete. Catatan Penulis : Recordset pada input data, sebenarnya tidak perlu anda buat, karena untuk input tidak membutuhkan recordset, namun agar langkahnya lebih tersusun rapi pada masing-masing file nantinya, maka saya membuatkan recordset, jika anda telah mahir, abaikan tahap tersebut. Suendri, S.Kom 19

20 Biografi Penulis Nama : Suendri Jenjang Pendidikan : S1 Sistem Komputer UPI YPTK Padang S2 Magister Komputer UPI YPTK Padang (Penyelesaian). [email protected], [email protected] Website : Merupakan Dosen Muda Sekolah Tinggi Manajemen Informatika dan Komputer (STMIK) Royal Kisaran. Matakuliah yang pernah dipegang antara lain Pemrograman Berorientasi Objek, Pengantar Internet, Pemrograman Website dan Komunikasi Data. Selain sebagai dosen sekaligus Staff dan Programer SISFO Kampus STMIK Royal juga web developer Tutorial ini dapat anda download di website Suendri, S.Kom 20