MODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX 2004

Transkripsi

1 MODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX Untuk menjalankan dreamweaver klik Start->Program->Macromedia- >Macromedia Dreamweaver MX Tampilan awal biasanya adalah sebagai berikut : Pilih html

2 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).

3 4. Kemudian ketikkan sesuai dengan yang ada pada desain berikut Membuat center : 1. blok teks 2. klik 3. klik 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 :

4 Tampilan form 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.

5 Tampilan text field Isikan nama text field yang nantinya akan dijadikan variable pada file PHP c. List/Menu Melalui komponen ini user dapat memasukkan isian dengan cara memilih pada drop down combo atau list.

6 Tampilan List/Menu Isikan Nama Menu Klik disini untuk memasukkan item yang akan dijadikan pilihan pada list/menu d. Radio button Untuk memasukkan pilihan berdasarkan pilihan/choice

7 Tampilan Radio button Isikan radio nama button Isi dari radio button apabila diklik e. Button Merupakan tombol yang apabila dklik maka akan melakukan aktivitas tertentu tergantung tipe dan code event yang diberikan

8 Tampilan button Isikan nama button Tipe button 6. Setelah anda mengenal beberapa jenis komponen sekarang cobalah buat design form seperti dibawah ini

9 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

10 9. setelah masuk ke design window pilih mode code Klik disini 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