Cara Membuat Form Tombol Pencarian Data Dengan Dreamweaver CS6.

ProjekWebKu : Selamat datang. Di tutorial Extra kali ini kita akan membahas mengenai cara membuat tombol pencarian data dengan menggunakan Dreamweaver CS6.  Bagi yang ketinggalan, silahkan pelejari dahulu Cara Membuat Form Penghapusan Data. Karena ini adalah kelanjutan dari tutorial lainnya.

Sistem informasi sangat dibutuhkan untuk banyak hal. Penyediaan data yang informatif sangat membantu dalam berbagai pemenuhan aktifitas seorang user. Untuk itu, pencarian data kerap kali dilakukan.

Itulah yang mendasari tutorial ini dibuat. Tombol pencarian yang tersedia pada sebuah program aplikasi atau website sangat membantu pengguna dalam mengakses sebuah data. Tombol ini dibuat untuk mempercepat proses pencarian sehingga bisa efisien dalam pemanfaatan waktu.

Pada tutorial ini akan membahas cara membuat tombol pencarian terhadap data yang telah dibuat pada tutorial sebelumnya. 

Jika sudah tidak sabar lagi. kita langsung ke TKP.

Jangan lupa aktifkan Dreamweaver, XAMPP dan Browser nya terlebih dahulu. 

1). Pada Dreamweaver, Buatlah file cari_mhs.php dan simpan di folder C:\xampp\htdocs\latihan_web

 2). Tambahkan aksesoris seperti gambar berikut. ( semoga gambarnya jelas .)

 3). Sehingga tampilannya seperti ini. Blok From nya dan ganti Method POST > GET  pada panel Properties yang biasanya ada di bawah layar .

 4). Pada menu Insert. pilih Data Object > Dynamic Data > Dynamic Table.

5). Akan muncul form seperti ini, Pada nomor 4 tidak tercentang. Hal ini menandakan bahwa kita belum membuat Recordset nya. Klik pada link nya untuk pengaturan. 

 6). Setting seperti gambar dibawah ini.

 7), Atur juga untuk tabel yang akan digunakan nantinya untuk menampilkan data .

 8). Maka Recordset akan tercentang.

 9). Ini adalah tampilan pada halaman cari_mhs.php.

 10). Sebagai tambahan. kita akan menyembunyikan tampilan tabel data dan akan muncul sesuai dengan data yang hendak dicari. untuk itu kita menggunakan fitur Show If Record Not Empty. Pertama blok tabel data.

 11). Selanjutnya pada menu Insert, pilih Data Object > Show Region > Show If Record Not Empty.

 12). Setelah itu, tentukan Recordset nya.

 13. Jika sudah, silahkan jalankan Browser nya dan buka file cari_mhs.php.  Karena kita hanya mencari data nama, maka ketiklah nama saja. kemudian tekan tombol CARI.

Sampai disini ada pertanyaan? 

Silahkan sampaikan di bagian komentar.

Simak juga tutorial versi videonya berikut ini.

Sekian dan terima kasih  ^_^.

Cara Membuat Form Hapus Data Pada Dreamweaver CS6.

ProjekWebKu :  Sebelum melanjutkan ke tutorial berikutnya, ada baiknya anda mempelajari Cara Membuat Form Update Data terlebih dahulu . Karena ini adalah kelanjutan dari tutorial sebelumnya.

Sistem informasi sangat erat kaitanya dengan manajemen data. Peranan data yang sangat membantu dalam penyampaian informasi menandakan bahwa nilai dari sebuah data sangat diperlukan. 

Untuk itu, data yang dianggap tidak bernilai akan disingkirkan karena sudah tidak bernilai lagi dalam penyampaian informasi. Proses penghapusan pun keran dilakukan terhadap sebuah data yang dianggap mengganggu. Hal ini dilakukan sebagai efisiensi dalam media penyimpanan data.

Sebagai seorang programmer yang biasa membuat sebuah sistem informasi data, sudah selayaknya menyediakan fitur penghapusan pada manajemen data. karena konsep efisiensi itu sendiri sangat diperlukan.

Pada bagian ini, akan dibahas mengenai cara membuat form penghapusan data pada Dreamweaver CS 6. Jika anda sudah siap. kita langsung ke TKP.

Sebelumnya jalankan dahulu Dreamweaver, XAMPP dan Browser nya.

1). Buatlah file hapus_mhs.php dan simpan di folder C:\xampp\htdocs\latihan_web. kemudian pada menu Insert pilih Data Object > Delete Record.

 2). Isi form Delete Record seperti gambar dibawah ini.

 3). Setelah klik OK, Silahkan buka file tampil_mhs.php yang sudah dibuat pada tutorial sebelumnya.. Pada  kolom opsi Hapus, buat link yang menuju ke file hapus_mhs.php.

 4). Pastikan pengaturan Paramater nya benar.

 5). Atur form Parameter seperti ini .

 6). Buka tab baru di browser, dan jalankan file tampil_mhs.php. Maka link Hapus sudah tersedia.  Silahkan dicoba.

 7). Berikut tampilan  setelah data ke 2 dihapus.

Selamat mencoba. Gampang kan?

Simak juga tutorial versi videonya  berikut ini.

Cara Membuat Form Update / Edit Data Di Dreamweaver CS6.

ProjekWebKu : Ini adalah kelanjutan dari tutorial sebelumnya yang membahas mengenai Cara Menampilkan Data.

Terkadang, karena beberapa faktor, sebuah sistem informasi perlu yang namanya pembaharuan. Data-data yang ada harus diperbaharui guna menunjang sistem yang semakin berkembang. Untuk itu, Update Data biasa dilakukan. 

Adapun salah satu alasan Proses pengeditan data perlu dilakukan ialah karena salah dalam penulisan saat penginputan data sebelumnya.

Sebagai seorang programmer, hal yang demikian perlu diperhatikan dalam membangun sistem yang user frendly. Selain memudahkan pengguna sistem. juga harus disertai dengan penanganan terhadap pemecahan masalah.

Jika sudah siap. kita akan mulai tutorialnya.

Sebelumnya jalankan dulu Dreamweaver, XAMPP dan Browser nya.
1). Pada Dreamweaver, buka file tampil_mhs.php ( ada di tutorial sebelumnya ) , kemudian tambahkan kolom Opsi untuk Edit dan Hapus.

 2). Sehingga tampilannya seperti ini.

 3). Buatlah file baru dengan nama edit_mhs.php dan simpan di folder C:\xampp\htdocs\latihan_web. Atur seperti gambar dibawah ini.

 4). Pada menu Insert, Pilih Data Object > Update Record > Record Update From Wizard.

 5). Akan tampil form ini, Perhatikan pada nomor 4, Recordset tidak tercentang karena belum dibuat. Klik link Recordset nya.

 6). Atur seperti gambar dibawah ini. kemudian Test terlebih dahulu.

 7). Jika sudah OK, Maka akan tercentang semua.

 8). Untuk selanjutnya, atur form seperti gambar berikut.

 9). Setelah OK, Akan tampil seperti ini. Setting sesuai kebutuhan anda.

 10). File edit_mhs.php sudah kita siapkan. sekarang tinggal hubungkan dengan opsi Edit yang ada di halaman tampil_mhs.php. Buka file tampil_mhs.php dan ikuti petunjuk gambar dibawah ini.

 11). Pastikan link menuju ke edit_mhs.php. Sebelum klik OK, Tentukan Parameter nya terlebih dahulu.

 12). Ketik "nim" pada kolom Name dan tentukan Value nya. ( nim  ini adalah primary key pada file database )

 13). Jika sudah, Klik OK. buka Browser dan jalankan file tampil_mhs.php. Maka akan tampak seperti ini.

 14). Silahkan dicoba untuk data ke 1.

 15), Jika berhasil, data ke 1 akan berubah. Sekarang coba untuk data ke 2.

 16). Jika pada saat klik link Edit di data ke 2, TETAPI muncul halaman edit data ke 1, maka pengaturan recordset-nya ada yang salah. Untuk itu, buka kembali file edit_mhs.php. kemudian pilih Recordset pada panel Server Behaviors. ( Lihat gambar berikut ).

 17). Nahh.. yang saya maksud adalah form Filter . Ubah nilainya  dari none ke nim ( primary key) . Filter ini berfungsi untuk membedakan penyeleksian data satu dengan data yang lainnya. 

18). Jika sudah, Klik OK dan coba kembali pada Browser.
Jika masih bingung pada saat terjadi error di point 16. Silahkan simak Video berikut ini.
Semoga bisa membantu.

Selamat mencoba. dan
Sampai jumpa.  ^_^

Cara Membuat Form Untuk Menampilkan Data Di Dreamweaver CS6

ProjekWebKu : Setelah sebelumnya dibahas mengenai Cara Membuat Form Input Data. Kita akan melanjutkannya dengan Tampil Data.

Pada bagian tutorial ini. Data yang sudah di input sebelumnya didalam form akan ditampilkan pada sebuah halaman web. Untuk itu, bagi yang belum mengikuti tutorial input data, silahkan dipelajari terebih dahulu.

Jika sudah siap. kita akan melanjutkannya.
Silahkan Jalankan Dreamweaver, XAMPP, dan Browser nya terlebih dahulu.

1). Pada Dreamweaver, Buat sebuat file dengan nama tampil_mhs.php dan simpan di folder C:\xampp\htdocs\latihan_web. kemudian atur halamannya seperti gambar berikut ini :

 2). Pada menu Insert , pilih Data Object > Dynamic Data > Dynamic Table.

 3). Form baru akan muncul, perhatikan tanda centang nya, pada bagian Recordset belum tercentang, ini menandakan bahwa kita belum menentukan Recordset-nya.  Klik Link nya.

 4). Pada form Recordset, isi seperti gambar berikut.

 5). Sebelum klik OK. alangkah baiknya kita Test terebih dahulu, jika tampil seperti gambar dibawah ini, maka koneksinya berhasil.

6). Setelah klik OK, maka bagian Recordset akan tercentang.

 7). Kemudian lanjutkan dengan pengaturan tabel untuk menampilkan datanya.

 8). Maka akan tampil seperti berikut. Simpan dan jalankan di Browser.

 9). Dan Taraaaa . . !!!.  Ini dia hasilnya.

Jika masih bingung. Ini ada panduan versi videonya juga.
Selamat mencoba.