modul 2 dreamweaver mx 2004 revisi · lain silakan lihat modul 1. ... hanya orang yang sering...
TRANSCRIPT
Modul 2 DreamWeaver MX 2004
Suendri, S.Kom
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 2
-- Untuk Indonesia Tanah Air Tercinta --
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 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.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 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
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 5
Dalam latihan, dua Azimat yang perlu anda ingat, 1. Gunakan selalu huruf kecil. 2. Jangan ada Spasi, kecuali pada tempat yang semestinya.
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.
Buatlah Folder di c:/apache/htdocs dengan nama latihan1.
Gambar 1. Folder latihan1
TIPS!
Project : Input dan Tampil data
Tujuan : Membuat Input dan Tampil Data menggunakan Dreamweaver.
1
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 6
Nama Site bersifat case sensitif, Tidak bisa dibuat 2 kali dengan nama yang sama, pastikan masing-masing latihan anda bedakan.
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!
2
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 7
Buatlah nama Site anda, sesuai nama folder latihan kita, latihan1.
Berikutnya klik Next.
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
3
latihan1
4
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 8
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.
Gambar 7. File Kerja dan Tempat Penyimpanan
Testing File, adalah URL tempat dimana web kita akan di Browse,
silakan isikan http://localhost/latihan1, kemudian anda bisa mengklik test
URL untuk mencoba apakan koneksi berhasil. Seperti pada gambar berikut.
5
6
c:\apache\htdocs\latihan1\
Catatan : Jika Apache anda belum running, maka Test URL tidak akan
berhasil anda lakukan, jadi pastikan Apache dan MySQL anda telah Running.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 9
Gambar 8. Testing Files
Selanjutnya, Pilihan Sharing Files, silakan Pilih No saja.
Gambar 9. Sharing File
http://localhost/latihan1
7
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 10
Summary, silakan pilih Done, berarti Pengaturan Site anda telah
selesai dilakukan.
Gambar 10. Summary
Pengaturan Site selesai, klik Done untuk mengakhiri sekaligus
menggunakan Site ini.
Gambar 11. Done
8
9
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 11
Selamat Datang di Dreamweaver. Sekarang saatnya anda membuat
File baru
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 !
10
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.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 12
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.
Gambar 14. Recordset
TIPS!
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
11
Agar tersusun rapi, pemberian Nama recordset bisa anda lakukan dengan cara rec_fungsi-file_nama-table contoh : rec_input_guru
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 13
Gambar 17. MySQL Connection
Gambar 18. Pilih Database
Gambar 19. Koneksi Complete
Connection name = koneksi Mysql server = localhost Username = root Password = (kosongkan) Database = dbguru
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 14
Jika pengaturan koneksi telah siap, silakan pilih connection anda
beserta table yang ingin digunakan yaitu table guru. Klik OK untuk selesai.
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
12
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 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.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 16
Form Input telah selesai, silakan tambah beberapa tulisan pendukung
serta warna serta desain yang anda inginkan. Simpan latihan anda.
Gambar 24. Form Input complete
Preview file input_guru.php
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.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 17
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 Langkah terakhir, silakan pilih menu Dynamic table untuk
menampilkan data yang ada dalam database.
13
13
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 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
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 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.
Modul 2, Dreamweaver MX 2004
Suendri, S.Kom 20
Biografi Penulis
Nama : Suendri
Jenjang Pendidikan : S1 Sistem Komputer UPI YPTK Padang
S2 Magister Komputer UPI YPTK Padang
(Penyelesaian).
Email : [email protected], [email protected]
Website : http://openwebmurah.com
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 https://amikroyal.ac.id juga
web developer http://royal.ac.id. Tutorial ini dapat anda download di website
http://openwebmurah.com