MODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX 2004

1. Untuk menjalankan dreamweaver klik Start->Program->Macromedia-

>Macromedia Dreamweaver MX2004

2. Tampilan awal biasanya adalah sebagai berikut :

Pilih html

3. Setelah itu akan tampil jendela desainer untuk merancang web yang akan dibuat Pada sesi ini akan dijelaskan beberapa element dari workspace dreamweaver.

The Insert bar berisi tombol-tombol untuk memasukkan beberapa tipe object seperti image, table, dan layer, ke dalam dokumen. Setiap object merupakan kumpulan kode HTML yang bisa diset attributnya. Sebagai contoh , anda bisa memasukkan table dengan meng-klik tombol table pada Insert bar. Atau anda juga bisa memasukkan object yang lain dengan meng-klik tanda panah pada insert bar.

The Document toolbar berisi tombol dan pop-up menu yang berisi tampilan secara desain view atau code view, dan beberapa fungsi yang lain.

The Document window menampilkan dokumen yang sedang dibuat atau diedit.

The Property inspector untuk mengubah beberapa properties dari object yang telah kita masukkan sebelumnya.

Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar.

The Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

4. Kemudian ketikkan sesuai dengan yang ada pada desain berikut

5. Komponen yang sering digunakan :

a. form merupakan komponen non-visual apabila telah dijalankan pada browser. Namun pada document window biasanya tampilannya berupa kotak merah putus-putus Pada insert bar klik panah kebawah kemudian pilih forms

Setelah itu pilih tombol form sehingga tampilannya akan seperti dibawah ini :

Membuat center : 1. blok teks 2. klik 3. klik

properties yang biasa diisi adalah action yang berguna untuk mengirimkan isi dokumen ke lokasi file tertentu.

b. Textfield Merupakan komponen untuk menampung isian yang diisikan oleh user.

Tampilan form

c. List/Menu

Melalui komponen ini user dapat memasukkan isian dengan cara memilih pada drop down combo atau list.

Tampilan text field Isikan nama text field yang nantinya akan dijadikan variable pada file PHP

d. Radio button

Untuk memasukkan pilihan berdasarkan pilihan/choice

Tampilan List/Menu Isikan Nama Menu Klik disini untuk memasukkan item yang akan dijadikan pilihan pada list/menu

e. Button

Merupakan tombol yang apabila dklik maka akan melakukan aktivitas tertentu tergantung tipe dan code event yang diberikan

Tampilan Radio button Isikan radio nama button Isi dari radio button apabila diklik

6. Setelah anda mengenal beberapa jenis komponen sekarang cobalah buat design

form seperti dibawah ini

Tampilan button Isikan nama button Tipe button

Daftar nama komponen dan setting properties : Nama Komponen/Object Pengaturan Properties Text field Name : nama Text field Name : alamat List/menu Name : kode

List Values : - A - B - C

Text field Name : harga Radio button Name : warna

Checked value = merah Radio button Name : warna

Checked value = hitam Radio Button Name : warna

Checked value = silver Button Action : submit form Button Action : reset form Form Action : input.php

7. simpan hasilnya pada document root dengan nama input.htm. 8. buat satu file lagi. Klik File->New->Dynamic page->php kemudian klik create

9. setelah masuk ke design window pilih mode code

10. Kemudian ketikkan kode berikut : <?php echo " HASIL DATA PENJUALAN HANDPHONE<hr> "; echo "Nama Pembeli : $nama<br>"; echo "Alamat : $alamat<br>"; echo "kode : $kode<br>"; echo "harga : $harga<br>"; echo "warna : $warna"; ?>

11. simpan dengan nama input.php. 12. Buka internet explorer pada address bar ketikkan http://localhost/input.htm.

Klik disini