MEMBUAT FORM INPUT DATA MENGGUNAKAN DREAMWEAVER

CS5

By Pei Star 19:36:00 No comments

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...!!!
MEMBUAT FORM LOGIN MENGGUNAKAN ADOBE DREAMWEAVER
CS5

By Pei Star 17:47:00 No comments

Kali ini saya akan memberikan tutorial mengenai cara pembuatan Form Login menggunakan
Aplikasi Adobe Dreamweaver Cs5. Untuk mempersingkat waktu kita langsung saja pada
materi dan dapat saudara ikuti langkah – langkah dibawah ini dengan benar.

- Langkah Pertama : Kita tambahkan 1 (satu) tabel yang diberi nama Login dengan Field
Username dan Password seperti gambar dibawah ini.

- Langkah Kedua : Isi tabel Login tersebut secara manual atau saudara bisa membuat Form
Input Data Login pada Sistem.

- Langkah Ketiga : Pada langkah ketiga ini kita menuju Dreamweaver dan menambahkan
dokumen baru untuk mendesain Form Login dengan cara pilih Menu Insert => Form =>
Form.
Keterangan : Pada area Form dengan kotak berwarna merah kita dapat menambahkan tabel
untuk mendesain Form Login, pastikan posisi kursor dalam area Form.

- Langkah Keempat : Untuk membuat tabel pilih Menu Insert => Table.
Keterangan : Pada halaman table kita dapat menambahkan 4 baris dan 3 kolom dengan lebar
500 pixels.

- Langkah Kelima : Desain Form login seperti gambar dibawah ini => Simpan dengan nama
Index.php

- Langkah Keenam : Setelah Form Login kita Simpan selanjutnya kita dapat membuat proses
Login dengan cara pilih Menu Insert => Data Objects => User Authentication => log in
User.
Katerangan : Pada halaman log In User kita dapat mengatur proses loginya sebagai berikut.

 Get input form form => Mengatur form yang akan kita gunakan.
 Username field => Posisi username yang akan diinputkan.
 Password field => Posisi password yang akan kita inputkan.
 Validate using connection => Name MySQL Connection.
 Tabel => Tabel yang digunakan yang menyimpan Field Username dan Password.
 Username column => Name Field yang ada ditabel.
 Password column => Name Field yang ada ditabel.
 If login succeeds, go to => Digunakan setelah berhasil Login kemudian mengarahkan
tujuan yang akan ditampilkan.
 If login fails, go to => Apabila Username dan Password salah mengarahkan tujuan
yang akan ditampilkan.
 OK => Selesai.
Selamat mencoba...!!! Pastikan saudara mengikuti langkah – langkah ini dengan benar.
Wasallammm...!!!

Tampilan Form Login

TUTORIAL MENAMPILKAN DATA DARI DATABASE
MENGGUNAKAN DREAMWEAVER CS5

By Pei Star 18:30:00 No comments

Mungkin kita sering kali menemukan kesulitan dalam pembelajaran pemrograman PHP dan HTML,
selain bahasa pemrogramannya sulit kita pahami dan Scrip yang digunakan untuk pemrosesan cukup
panjang dan memakan waktu yang lumayan cukup lama, apalagi pada saat kita membutuhkan
pemrosesan untuk menampilkan data dari databse. Oleh karena itu pada kesempatan kali ini saya
akan memberikan tutorial mengenai cara menampilkan data dari database.

Pada posting sebulmnya saya sudah memberikan tutorial mengenai cara membuat input data dan
mengkoneksikan kedatabase menggunakan Dreamweaver Cs5, Untuk mempersingkat waktu kita
langsung saja pada materi yaitu Cara Menampilkan Data Dari Database Menggunakan Dreamweaver
Cs5.

Adapun cara menampilkan data dari database dapat saudara lihat pada langkah – langkah dibawah
ini dengan benar.

- Langkah Pertama : Atur terlebih dahulu Recordset untuk menampilkan data seperti gambar dibawah.
Keterangan : Pada halaman Recordset => Name Recordset dapat kita setting sesuai dengan keinginan
kita => Connection yang kita gunakan sesuai dengan name Connection MySQL => Untuk posisi Table
harus sesuai dengan table yang akan kita tampilkan datanya => Sort digunakan untuk menentukan
data yanga kan ditampilkan nantinya secara Ascending berdasarkan kode_Barang.

Tampilan Setting Recordset

- Langkah Kedua : Insert => Data Object => Dynamic Data => Dynamic Tabel => Maka akan tampil
halaman Dynamic Table seperti gambar dibawah ini.
Keterangan : Pada halaman Dynamic Table name recordset harus sesuai dengan name recordset yang
akan kita tampilkan => Show digunakan untuk menampilkan data sebanyak 5 (Lima) Kali kalau mau
lebih tinggal saudara tambahkan aja sendir => Border, Cell Padding, dan Cell Spacing digunakan untuk
garis tabel, sedangkan untuk menghilagkan garis saudara bisa memberikan angka 0 pada Border, Cell
Padding, dan Cell Spacing => Ok.
Langkah Ketiga : Simpan dengan nama Tampil_Data.php

Catatan : Setelah tabel tampil maka dapat saudara rapikan sesuai dengan keinginan saudara.

Demikianlah tutorial untuk menampilkan data ini semoga bermanfaat bagi kita semua, terimaksih
banyak atas kunjungan saudara. Wasallammm...