Dreamweaver Tutorial - Cara Membuat Update Page Berbasis PHP Dengan Dreamweaver

Apa kabar semua..?? Dreamweaver Tutorial Kali ini akan menshare tutorial tentang Cara Membuat Update Page Berbasis PHP Dengan Dreamweaver .. oke langsung aja ya..

Buatlah 3 buah file yaitu data.php , update.php dan update-sukses.php  dan disimpan di folder dalam webserver , disini kita simpan pada folder c:/xampp/htdocs/belajar. Seperti  gambar di bawah.

Selanjutnya buka data.php, buatlah recordset beri nama “Data” pilih koneksi yang telah kita buat sebelumnya dan pilih table “USR” sebagai table yang datanya yang ingin ditampilkan.

 
Selanjutnya klik menu Data --> Dynamic Data --> Dynamic Table untuk menampilkan data pada halaman web

Selanjutnya akan muncul tampilan seperti gambar berikut, pilih recordset yang ingin ditampilkan kemudian ada 2 opsi yaitu “Show” dan “All Records” disini fungsi “All Records” yaitu menampilkan semua record dalam suatu table. Jika jumlah record ratusan atau bahkan ribuan lebih baik kita memilih opsi “Show” kemudian isi dengan jumlah record yang ingin kita tampilkan dalam satu tampilan halaman. Klik OK

Hasilnya akan muncul tampilan seperti gambar di bawah. Tambahi 2 kolom sebelah kanan yang nantinya berfungsi untuk melakukan update. Disini saya tambahi kolom “DATA” yang berisi menu untuk “Update” dan “Delete”

Blok menu “Update” dan pada Properties Link nya browse file Update.php yang akan dijadikan link halaman untuk update. Setelah memilih file Update.php, klik “Parameters”

Isi “Name” dengan nama parameter yang diinginkan, disini saya beri nama “ID” , selanjutnya pada klik pada “Value” dan pilih Field ID sebagai value nya. Selanjutnya klik OK dan sekali lagi pilih OK sampai Link Properties nya menutup, sehingga tampilan seperti gambar dibawah.

Coba priview di browser dengan menekan F12 sehingga tampilan seperti gambar dibawah

Selanjutnya buka file update.php , buat recordset dengan memilih Table “USR” sebagai table yang akan di edit. Beri nama recordsetnya dengan nama bebas, pilih koneksi dan table yang akan dipakai. Selanjutnya pada “Filter” pilih Field yang digunakan sebagai parameter yang telah kita buat sebelumnya. Disini kita pilih “ID” dan “URL Parameter” juga diisi dengan “ID” kemudian klik OK.

Setelah kita membuat recordset, selanjutnya pilih menu Data --> Update Record -->dan Record Update Form Wizard

Selanjutnya akan muncul tampilan seperti gambar berikut di bawah. Isi “Connection” dengan pilihan koneksi yang telah kita buat, selanjutnya “Table To Update” isi dengan opsi Tabel yang akan kita update. “Select Record From” isi dengan recordset yang telah kita buat. “Unique Key Column” isi dengan Parameter yang kita buat sebelumnya yaitu ID. Setelah itu “After Updating Go To” browse file untuk memilih halaman yang akan kita tuju ketika berhasil melakukan update record. Selanjutnya klik “OK”

Setelah melakukan langkah seperti gambar diatas maka akan muncul hasil seperti gambar di bawah.

Selanjutnya langkah terakhir yaitu membuka file update-sukses.php. Klik menu Insert --> HTML --> Head Tags --> Refresh seperti contoh dibawah

Isi “Delay” dengan waktu yang diinginkan selanjutnya klik “OK” , langkah ini berfungsi merefresh halaman dan men redirect ke halaman yang akan kita tuju yaitu data.php

Ok sekarang saatnya mengetest halaman yang telah kita buat. Buka alamat http://localhost/belajar/data.php sehingga muncul seperti gambar dibawah. Klik menu “UPDATE” yang akan me redirect ke halaman update.php

Silahkan update sesuai dengan data yang diinginkan, kemudian klik “Update Record” yang akan menuju halaman update-sukses.php dan me redirect kembali ke halaman data.php

OK Dreamweaver Tutorial - Cara Membuat Update Page Berbasis PHP Dengan Dreamweaver telah selesai . SELAMAT MENCOBA DAN SEMOGA BERHASIL..

Tutorial Dreamweaver - Cara Define Site Adobe Dreamweaver CS5

Tutorial Dreamweaver kali ini akan share tentang Cara Define Site Adobe Dreamweaver CS5. Setelah Adobe Dreamweaver CS5 dan webserver (Penulis memakai webserver XAMPP) terinstall, hal selanjutnya yang kita persiapkan adalah buat folder baru di C:/xampp/htdocs/ beri nama folder tersebut Latihan, sehingga menghasilkan C:/xampp/htdocs/latihan. Folder ini berfungsi untuk menyimpan file web yang akan kita buat. Penulis menggunakan folder tersebut agar file web yang akan kita buat lebih tertata rapi, walaupun sesungguhnya folder root defaultnya adalah C:/xampp/htdocs/. Selanjutnya buka Dreamweaver CS5, klik Define Site,

 

 

 

 Selanjutnya pilin New

 Isi Site Name dengan nama Latihan, kemudian browse Local Site Folder dengan folder C:/xampp/htdocs/latihan

Selanjutnya pilih menu Server, pilih Tab Advanced kemudian centang opsi Maintain Synchronization Information dan pilih  Server Model dengan PHP MySQL dan klik SAVE

Centang  opsi Remote dan Testing dan Save

Selanjutnya klik DONE

OK kita sudah berhasil melakukan Define Site dengan Adobe Dreamweaver CS5, selanjutnya buat file baru dan simpan dengan nama latihan1.php, kemudian buka browser anda dan ketik alamat localhost/latihan/latihan1.php

Semoga berhasil

Dreamweaver Tutorial - Cara Install Dreamweaver CS5

Salah satu software terbaik untuk Webdesign adalah Dreamweaver, kali ini Dreamweaver Tutorial akan sharing tentang  Cara Install Dreamweaver CS5, Ok langsung saja..

Buka file image Adobe CS5 yang telah terdownload dengan aplikasi Daemon Tools, 

Setelah dibuka maka akan muncul jendela konfirmasi untuk meng install Adobe CS5, silahkan klik INSTALL CS5

 Selanjutnya pilih ACCEPT

Masukkan Serial Number Adobe CS5

Pilih aplikasi apa saja yang ingin anda install, kemudian klik INSTALL

pada waktu instalasi, karena file imagenya terbagi menjadi 3 bagian maka akan muncul permintaan untuk memasukkan file ke 2 dan ke 3, silahkan load melalui Daemon Tools

Setelah selesai silahkan klik DONE

Ok sampai disini  kita sudah berhasil meng install Adobe Dreamweaver CS5

Dreamweaver Tutorial - Cara Membuat Chart Dengan FusionCharts For Dreamweaver

Jika ingin menampilkan data dalam sebuah chart pada web anda tidak perlu repot untuk belajar coding dan scripting. Dengan Dreamweaver dan addon FusionCharts for Dreamweaver anda sudah bisa membuat Chart yang menarik. Dreamweaver Tutorial kali ini akan share cara Membuat Chart Dengan FusionCharts For Dreamweaver .Berikut tutorialnya.

Buka Dreamweaver dan buat halaman baru simpan dengan nama chart.asp (ASP Vbscript) , jangan lupa sebelumnya harus melakukan langkah Define Site dan membuat Koneksi Database terlebih dahulu.

Buat Recordset baru, pilih mode Advanced selanjutnya ketik query nya dan jangan lupa di Test

Jika recordset tersebut sudah dibuat, masuk ke menu Insert -- FusionCharts For DW -- Insert Dynamic Simple Chart

Pada Tab Data- Step 1- Select Data Source pilih opsi Use Data From Already Defined Recordset, pada Step 2 Configure Data Source, pada bagian Define Category pilih Recordset dengan nama recordset yang telah kita buat, Isi Column dengan Field Data hasil query yang ingin dijadikan sebagai sumbu X nya, disini saya isi dengan Field THTUNGG, selanjutnya pada Define Series pilih Recordset dengan nama recordset yang telah kita buat, Isi Column dengan Field Data hasil query, disini saya isi dengan Field BAYAR sebagai sumbu Y nya

Selanjutnya Pilih Tab Chart Selection, pilih Chart Colum 3D, selanjutnya pada bagian Chart Preset pilih True Values untuk menampilkan data secara utuh, pada bagian Style Presets dan Color Schemes bisa dipilih sesuai selera.

Selnjutnya Pilih Tab General Options, isi Chart Name dengan nama bebas, Isi Caption dan Subcaption sesuai Judul Chart, selanjutnya klik Ok sampai Finish sehingga hasilnya seperti gambar berikut

Ketika dipreview hasilnya seperti gambar di bawah.. Selamat Mencoba

Dreamweaver Tutorial - Cara Menampilkan Data Dari Database Dengan Dreamweaver - Part2

Setelah selesai membuat ODBC dan Koneksi dengan dengan Database, langkah selanjutnya kita akan membuat recordset, yang berfungsi untuk menampilkan data dari hasil query database. Buka file latih.asp kemudian pada menu Application silahkan klik Tab Bindings , klik tanda + dan pilih Recordset (Query)

Untuk membuat recordset ini ada dua metode yaitu Simple dan Advanced, jika memilih opsi simple kita tinggal memilih tabel dan kolom yang akan ditampilkan dengan dibatasi filter yang sederhana, sebaliknya jika memilih mode Advanced kita bisa membuat script query yang lebih rumit dan komplek.

setelah membuat query, untuk melihat hasil dari query yang sudah kita buat silahkan klik Test, sehingga muncul hasil seperti gambar di bawah ini

Setelah muncul hasil Querynya selanjutnya klik OK, sehingga muncul recordset yang telah kita buat.

Setelah itu masuk ke menu Application kemudian klik Dynamic Table

setelah itu akan muncul menu seperti gambar dibawah ini, pilih recordset yang akan kita munculkan hasilnya dengan klik dropdown menu recordset,  kemudian pilih opsi All Record untuk menampilkan semua record, kemudian klik OK.

Setelah itu akan muncul hasilnya seperti gambar dibawah

Selanjutnya jika ingin melihat hasilnya di browser bisa tekan F12

Ok sampai disini kita sudah berhasil membuat sebuah halaman web dinamis... Selamat mencoba.!!