modul 2 dreamweaver mx 2004 revisi · lain silakan lihat modul 1. ... hanya orang yang sering...

Modul 2 DreamWeaver MX 2004

Suendri, S.Kom

Modul 2, Dreamweaver MX 2004

Suendri, S.Kom 2

-- Untuk Indonesia Tanah Air Tercinta --


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.


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


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


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


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


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.


Suendri, S.Kom 9

Gambar 8. Testing Files

Selanjutnya, Pilihan Sharing Files, silakan Pilih No saja.

Gambar 9. Sharing File

http://localhost/latihan1

7


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


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.


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


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


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


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.


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.


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


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


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.


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

modul 2 dreamweaver mx 2004 revisi · lain silakan lihat modul 1. ... hanya orang yang sering...

Documents