MEMBUAT FORM INPUT DATA MENGGUNAKAN DREAMWEAVER CS5

Oleh peistar

Friday, 13 May 2016

Bagikan :

Tweet

Melanjutkan posting sebelumnya masih menggunakan Dreamweaver, kali ini saya akan memberikan tutorial cara bagaimana membuat Form input data dengan menggunakan Dreamweaver CS5.

Pada posting sebelumnya saya telah memberikan tutorial mengenai cara mengkoneksikan database ke Dreamweaver dan cara membuat Database dengan Aplikasi Xampp berbasiskan sql.

Tidak memperpanjang kata – kata lagi langsung saja pada materi kali ini mengenai cara membuat Form Input menggunakan Dreamweaver CS5.

Adapun cara pengerjaanya dapat saudara saksikan atau ikuti langkah – langkah dibawah ini dengan benar.

- Langkah Pertama : Pastikan database dan koneksi ke Dreamweaver sudah kita buat.

- Langkah Kedua : Buka halaman baru yang Formanya php => Pilih Menu Insert => Data Objects => Insert Record => Record Insertion Form Wizard.

- Langkah Ketiga : Pada halaman Record Insertion Form kita sesuaikan Nama Connection dan Tabel yang akan kita gunakan seperti gambar dibawah ini.

Keterangan : Pada After Inserting Go To bertujuan untuk menuju halaman berikutnya sedangkan pada Form Fields Display As bisa kita ganti sesuai dengan Componen input yang kita inginkan.

Tampilan Form Input Data

- Langkah Ketiga : Pada langkah ketiga ini kita dapat menambah satu Componen Reset atau batal pada area input data, kemudian pada Form ini kita rapikan sesuai dengan selera dan seni masing – masing.

Tampilan Cara Menambah Button Reset/Batal

Tampilan Button Riset

Keterangan : 

• Untuk menambahkan satu Componen atau tombol Riset pilih menu Insert => Form => Button.
• Sedangkan untuk mengganti nama Tombol => klik Tombol yang akan diganti namanya lihat pada bar properties dibawah => pada Value namenya dapat saudara ubah sesuai dengan keinginan.
• Sedangkan pada Tombol Batal pada posisi Actionya dapat saudara ubah menjadi Reset Form, kemudian simpan kedalam folder kita yang diberi nama input_data.php.

Tampilan Cara Rubah Nama Button

Tampilan Cara Simpan Dokumen

Untuk melihat hasil akhirnya saudara bisa melihatnya dengan cara membuka salah satau browser yang kita miliki dikomputer masing – masing.

Tampilan Akhir

Terimaksih  banyak atas kunjungan saudara pada kesempatan berikutnya saya akan lanjutkan lagi dengan tutorial yang lebih menarik lagi tentunya. Wasallammmmm...!!!

Tag : Dreamweaver