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
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 :
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.
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.
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
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
Tampilan button
Isikan nama button
Tipe button
6. Setelah anda mengenal beberapa jenis komponen sekarang cobalah buat design
form seperti dibawah ini
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
Radio button Name : warna
Radio Button Name : warna
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
Checked value = merah
Checked value = hitam
Checked value = silver
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 http://localhost/input.htm.
Tidak ada komentar:
Posting Komentar