Praktikum 12 Macromedia DREAMWEAVER A. PENGENALAN WORKSPACE DREAMWEAVER MX. Dreamaweaver MX memiliki dua wajah(workspace) yaitu Macromedia Dreamweaver 4 dan Dreamweaver MX. Menu Utama Insert Bar Panel x Jendela Dokumen Property Inspector Workspace Dreamweaver MX Workspace Dreamweaver 4 Politeknik Pos Indonesia 1
Memilih Workspace: 1. Klik Edit>Preferences. 2. Pada Category General Klik Change Workspace. 3. Pilih Workspace yang anda sukai. Klik Ok untuk kembali ke jendela references. 4. Klik OK untuk menutup jendela references. Workspace akan berubah ketika Dreamweaver dibuka kembali. B. MEMASUKAN TABEL Membuat Tabel Baru : 1. Posisi kursor dalam jendela dokumen. Klik menu Insert, pilih Table. 2. Untuk membuat table dengan jumlah kolom 3 dan jumlah baris tiga masukan nilai seperti pada gambar. 3. Klik OK. Membuat Kolom Baru : 1. Letakan cursor di kolom terakhir. 2. Klik kanan mouse, pilih Table>Insert Rows or Colomns Politeknik Pos Indonesia 2
3. Masukan nilai seperti pada gambar. 4. Klik OK. Menyatukan Sel : 1. Blok pada baris pertama kolom ke dua sampai ke tiga. 2. Klik tombol Merges yang terdapat pada Property Inspector. Memecah Sel : 1. Letakan kursor dikolom yang akan dipecah, pada contoh sebelumnya letakan kursor di kolom ke dua baris pertama. 2. Klik tombol Split yang terdapat disebelah tombol merges. 3. Masukan nilai seperti pada gambar dibawah. 4. Klik OK. Menghapus Sel/Kolom : 1. Blok kolom terakhir. 2. Klikkanan mouse, pilih Table>Delete Row /Column. Politeknik Pos Indonesia 3
C. MEMBUAT FORMULIR Form merupakan fasilitas yang sangat berguna dalam interaktivitas dalam dunia web. Form tidak bekerja sendiri alias dibantu oleh rekan-rekannya seperti text field dan ceck box. Merekatkan Form Ke Dalam Halaman 1. Klik menu Insert. 2. Kemudian, pilih Form. Meletakan Text-Field : 1. Sebelumnya buatlah table didalam form dengan jumlah kolom 2, jumlah baris 7 dengan border 0. 2. Dalam kolom pertama baris pertama tuliskan teks Nama. 3. Dalam kolom kedua baris pertama masukan teks field dengan cara klik menu Insert>Form Objects> Text Field. Kemudian isikan nilai seperti pada gambar. 4. Dalam kolom pertama baris kedua tuliskan teks Umur. 5. Dalam kolom kedua baris kedua masukan teks field dengan ketentuan seperti gambar dibawah. Membuat Radio Button : 1. Dalam kolom pertama baris ketiga tuliskan teks Jenis Kelamin. 2. Dalam kolom kedua baris ketiga masukan Radio Button dengan cara klik menu Insert>Form Objects> Radio Button, isikan nilai seperti pada gambar. 3. Disamping radio button ketik teks L. 4. Dengan cara yang sama masukan radio button dengan nama radio button jen_kel, value wanita dan inisial state unchecked. Masukan teks P disampingnya. Meletakan List/Menu : 1. Dalam kolom pertama baris keempat tuliskan teks Status. 2. Dalam kolom kedua baris keempat masukan List/Menu dengan cara klik menu Insert>Form Objects> List/Menu, isi kan nilai seperti pada gambar. 3. Klik tombol List Values pada Property untuk memasukan nilai-nilai seperti pada gambar. 4. Klik Ok. Politeknik Pos Indonesia 4
Membuat Check Box : 1. Dalam kolom pertama baris kelima tuliskan teks Hoby. 2. Dalam kolom kedua baris kelima masukan Check Box dengan cara klik menu Insert>Form Objects> Check Box, isi kan nilai seperti pada gambar. 3. disamping check bok masukan teks Baca, dengan cara yang sama masukan check box name hoby dengan value Olah Raga, masukan teks Olah Raga disampingnya, dan check box name hoby dan value dll, masukan teks Dll disampingnya. Membuat Text Area : 1. Dalam kolom pertama baris keenam tuliskan teks Komentar. 2. Dalam kolom kedua baris keenam masukan teks area dengan cara klik menu Insert>Form Objects> Text Area. Memasukan Tombol Submit : 1. Dalam kolom kedua baris terakhir masukan tombol Button submit dengan cara klik menu Insert>Form Objects> Button. 2. Masukan nilai berikut dalam propertinya. 3. Disamping tombol submit masukan juga tombol reset dengan memilih Action Reset form. Membuat Validasi Form : 1. Aktifkan panel Behaviors dengan cara Klik menu Window>Behaviors. 2. Klik tombol plus (+). Pilih Validate Form. 3. Masukan nilai dalam jendela validate form seperti gambar disamping. 4. Klik Ok. Politeknik Pos Indonesia 5
D. DREAMWEAVER, PHP DAN MYSQL Aktifkan web server apache dan MySQL. Sebelumnya buatlah database MySQL dbkaryawan yang berisi table tkaryawan dengan field-field sebagai no Char(10) Primarykey, nama Varchar(30), gaji Integer, status Char(1), jml_anak Integer. Mendefinisikan Situs : 1. Buatlah folder baru misal karyawan pada direktori c:\apache\htdocs\karyawan. 2. Buka aplikasi Dreamweraver. Klik menu site>new site. 3. Setelah jendela wizard muncul, pastikan tab basic dalam keadaan terpilih. 4. Dalam halaman pertama, muncul pertanyaan nama situs web yang akan dibuat. Masukan karyawan untuk nama situs baru yang akan dibuat ke dalam input teks. Klik Next. 5. Dalam halaman yang kedua, terdapat pertanyaan apakah akan menggunakan server technology atau tidak. Karena akan menggunakan script server-side PHP maka pilihlah pilihan yes I want to use server technology. Setelah anda memilihnya maka akan muncul pertanyaan server technology apa yang akan dipergunakan. Diantara pilihan yang disediakan pilih PHP MySQL. Klik Next. 6. Dalam halaman yang ketiga, muncul pertanyaan bagaimana cara kerja dengan file-file yang akan dibuat. Karena pengeditan dan pegetesan akan dilakukan dari komputer lokal, maka dari pilihan yang tersedia pilih Edit end test locally (my testing server is on this computer). Kemudian tentukan direktori tempat penyimpanan file-file C:\apache\htdocs\karyawan\. Klik Next. 7. Pada halaman yang keempat, terdapat pertanyaan URL mana yang akan digunakan untuk pengujian secara lokal setiap halaman web (misal http://localhost/karyawan/). Klik test URL untuk menguji keberhasilan URL (Pastikan server web dalam keadaan running). Politeknik Pos Indonesia 6
8. Dalam halaman yang ke lima akan muncul pertanyaan apakah situs dikerjakan secara bersama-sama dalam suatu jaringan komputer maka pilih No. Klik Next. 9. Dan halaman yang terakhir akan menampilkan kesimpulan dari apa-apa yang kita kerjakan pada halamanhalaman sebelumnya. Klik Done untuk mengakhiri pedefinisian situs baru. 10. Jika proses pembuatan situs baru selesai, maka pada panel site akan terpampang situs baru. Koneksi ke Database : 1. Klik menu Window>Database untuk menampikan panel Database. 2. Dari panel tersebut, klik tanda + untuk menampilkan menu pilihan. Klik menu MySQL Connection. 3. Setelah jendela MySQL connection muncul, masukan data yang diperlukan untuk melakukan koneksi dengan Database pada text box yang tersedia. Seperti pada gambar. (Kosongkan password jika password root kosong) 4. Klik test untuk menguji koneksi Database. Jika berhasil Klik OK untuk untuk mengakhiri dialog. Pada panel database akan muncul koneksi yang sudah dibuat sebelumnya. Politeknik Pos Indonesia 7
Membuat Form Pemasukan Data : 1. Klik menu View>Design agar berada pada mode Design Dreamweaver. 2. Klik Insert>Form untuk menyimpan komponen form dalam dokumen. 3. Buatlah table dalam form dengan mengklik Insert>Table, lalu masukan nilai dengan ketentuan sebagai berikut: 4. Pada kolom pertama table dari baris pertama sampai baris kelima masukan nama field-field table No, Nama, Gaji, Status, Jumlah Anak. 5. Setelah itu pada kolom kedua table pada baris pertama sampai baris kelima masukan text field dengan cara klik Insert>Form Objects>Text Field. Sesuaikan property name text field dengan teks kolom pertama misal field no propety name=no, field nama propety name=nama dst. 6. Masukan tombol submit di kolom kedua baris ke enam dengan klik Insert>Form Objects>Button dan berikan property label dengan isi Save. Setelah itu, Masukan juga tombol reset melalui cara yang sama dengan property label Clear dan pada Action pilih Reset Form. 7. Simpan dengan nama file form_input.php. Behavior Untuk Input Data : 1. Selanjutnya, klik tombol + pada panel server behavior. Pilih Insert Record. 2. Muncul jendela dialog insert record. Masukan data pada input box sebagai berikut: 3. Klik Ok untuk mengakhiri Dialog. 4. Save perubahan file. Politeknik Pos Indonesia 8
Membuat Form after_input.html : 1. Klik Menu File>New. Setelah muncul kotak Dialog New Document pilih category Basic Page HTML. 2. Klik Create untuk membuatnya. 3. Klik View> Design lalu Masukan text Input Data Berhasil!. 4. Simpan dengan nama file after_input.html TUGAS Buatlah aplikasi untuk input data nilai mahasiswa dengan nama database dbnilai dengan nama table tnilai yang memiliki field dalam table dibawah: Field Tipe Data Primary Key npm Char(10) Yes nama Varchar(30) matkul Varchar(30) nilai_matkul Integer Buatlah validasi Input dari data nilai mahasiswa diatas, dimana setiap field harus diisi sebelum bisa di submit, untuk pengisian nilai matkul hanya dapat diisi oleh angka dari 1-100. Politeknik Pos Indonesia 9