Tutorial Dreamweaver 8Tutorial kali ini menggunakan Dreamweaver 8 dan teknologi server PHP&MySQL Kepada sesiapa yang berminat bolehlah mengemukakan soalan, info tambahan dsbnya Mari kita jayakan bersama. Walaupun menggunakan Dreamweaver 8, tutorial ini juga boleh digunakan bersama bagi versi CS3,CS4 dan CS5.

=============================================

Peringkat2 Yang Terlibat: 1. Install localhost (web server) 2. Install Dreamweaver 8 3. Buat 2 Folder dalam public_folder (www atau htdocs) 4. Define Site Dalam Dreamweaver 5. Buat Database (guna phpMyAdmin) 6. Buat fail .php untuk connect ke Database. 7. Membuat fail2 laman web > Fail index.php >Tambah Rekod (add record) > Lihat Rekod (view record) > Padam Rekod (delete record) > Pinda Rekod (update record) > Login Page

=============================================

Dreamweaver 8.Reduced: 98% of original size [ 650 x 490 ] - Click to view full image

KEPERLUAN: Windows XP SP2 1. Install pakej XAMPP 1.6.4 http://www.apachefriends.org/en/xampp-windows.html 2. Install Dreamweaver 8 http://www.soft32.com/download_1952.html LOCALHOST - Xampp Mula2 jalankan dulu Xampp dan pastikan apache dan mysql on service.

Kemudian minimize Xampp. Cara Menguji Server: 1. Buka web browser dan taip alamat http://localhost 2. Klik English (atau bahasa yang anda faham) 3. Muka hadapan Xampp akan terpapar di skrin.

************** DREAMWEAVER Buatkan 1 folder untuk simpan fail2 dreamweaver iaitu fail laman web. Katalah nama folder: dw8 Caranya - klik butang Explore (buka Xampp) > htdocs > dw8 Manage Site > New > Site > Site Name : dw8 > http://localhost/dw8 > Server Technology : PHP&MySQL > Edit and test locally C:\xampp\htdocs\dw8\ > http://localhost/dw8 > Test URL : OK > No. (remote server) > Done CARA UJI SITE http://localhost/dw8

==================================== MEMBINA & MEREKABENTUK LAMAN WEB PHP&MYSQL (KONSEP) LANGKAH PERMULAAN 1. Buat Database 2. Masukkan Table dan Data 3. Buat Hubungan antara PHP dan MySQL MEMBUAT DATABASE

Contoh database: 1. Dengan menggunakan phpmyadmin, buatkan satu database (storedb) database : storedb

2. Buatkan Table seperti dalam rajah dibawah.

Table : tblstore

dan isikan fields seperti dalam rajah:

Klik butang Save

Setakat ini anda telah selesai membuat Database dan Table untuk Store

Seterusnya cipta username dan password

username : dwadmin password : 123456

> Klik ikon Home (disebelah kiri skrin) > Klik Privileges (kanan skrin) > Klik Add a new User

Isikan di bawah Login Information; username : dwadmin Host : localhost password : 123456

Global privileges; > Klik Check All > Klik Go

CODE You have added a new user. SQL-query: GRANT ALL PRIVILEGES ON * . * TO 'dwadmin'@'localhost' IDENTIFIED BY '******' WITH GRANT OPTION MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0;

Selesai memcipta Database dan Usernama. Tutup phpmyadmin

DREAMWEAVER-SAMBUNGAN KE DATABASE 1. Buka Dreamweaver. Buatkan 1 fail php (index.php) dan buka fail ini (klik 2 kali)

Klik 2 kali fail index.php 2. Klik Application > Database > Klik + > MySQL Connection

Jika tiada masalah dengan database;

LATIHAN DATABASE Sebelum memulakan latihan ini terlebih dahulu; 1. buka Xampp dan run apache-mySQL 2. buka Dreamweaver > cipta 1 fail index.php 3. buka index.php dan masukkan maklumat seperti dalam rajah di bawah.

Rajah 1: index.php Buatkan 5 fail php seperti dalam rajah 2 di bawah. Kemudian buat LINK yang berkaitan seperti dalam rajah 2 dan 3

Rajah 2:

Rajah 3:

ADD RECORD Cara buat form untuk tambah data (wizard) 1. Klik Common > Application 2. Pilih Wizard

Rajah 4: Insert Record Wizard Masukkan maklumat database dan form seperti dalam rajah 5. > klik OK

Rajah 5: Tekan kekunci F12 untuk preview dalam web browser dan cuba tambah beberapa rekod ke dalam database. Jika tiada masalah selepas tambah rekod, browser akan kembali ke fail index.php (menu utama) Bersambung ke View Data. post ke-20 di bawah

LATIHAN DATABASE ... sambungan dari atas.

VIEW DATA

Guna fail viewdata.php (buka fail viewdata.php untuk edit) > Klik Application > Binding > + > Recordset Lihat rajah 1

Rajah 1: Create Recordset Masukkan maklumat seperti dalam rajah 2

Rajah 2: > Tukar kepada Common > Table > Masukkan maklumat Table

Rajah 3: Create Table > Masukkan label dalam ROW 1 (ID, Product ... Price) > Klik, tarik dan letak recordset dalam jadual (drag & drop) > penuhkan jadual dengan recordset yang sesuai.

Rajah 4: Binding Recordset

> Highlight ROW2 > Server Behaviour > + > Repeat Region > Show 10 rekod atau berapa bilangan yang ingin ditunjukkan terpulang kepada anda.

Rajah 5: Repeat Region PREVIEW dalam web browser > Simpan fail viewdata.php > Tekan kekunci F12 OK.

LATIHAN DATABASE ... sambungan dari atas.

DELETE DATA> Buatkan 1 fail deldata.php > Edit fail deldata.php (klik 2 kali fail) > Binding > Recordset dan masukkan maklumat seperti rajah 1.

Rajah 1: Recordset

> buatkan Table dan isi maklumat seperti dalam rajah 2Reduced: 87% of original size [ 733 x 147 ] - Click to view full image

Rajah 2: Table dan Repeat Region

Rajah 3:

> Pinda Code > Klik pada perkataan Delete > Klik Code > Tambah code seperti dalam rajah 4Reduced: 83% of original size [ 771 x 400 ] - Click to view full image

Rajah 4: Tambah Code Dan akhir sekali preview fail deldata (tekan kekunci F12) Apabila anda klik Delete, rekod dalam row yang berkaitan akan dihantar ke satu fail lain yang dinamakan confirmdel.php Cipta fail confirmdel.php bersambung di muka 2

LATIHAN DATABASE ... sambungan dari atas.

DELETE DATA-2Fail confirmdel.php

=================================

Inilah bentuk fail confirmdel.php yang perlu dibuat.

Rajah 1: Fail Confirm Delete (confirmdel.php)

1. Insert Form Insert > Form > Form

2. Tambah hidden field ke dalam form Klik dalam form kemudian Insert > Form > Hidden Field

Klik ikon hidden field > Properties > tukar nama kepada hidden1

3. Buat Table dan masukkan maklumat seperti dalam Rajah 1.

4. Binding Recordset. Application > Binding > + > Recordset

Rajah 2:

5. Binding Recordset ke hidden field Ikut step seperti dalam rajah 3.

1. klik ikon hidden 2. klik ikon 'lightning bolt' 3. dalam dynamic data > klik id 4, klik OK.

Rajah 3: Binding hidden field Akhir sekali tambah logic untuk delete rekod. >Application > Server Behaviour > Recordset atau Window > Server Behaviors > klik + > Delete Record > simpan fail.

Rajah 4: Delete rekod Cara nak uji: 1. preview fail deldata.php 2. klik Delete (kolum terakhir) 3. masuk ke fail confirmdel.php 4. klik butang Delete Record ok.

============== akan bersambung ke Edit Data / Edit Record

PINDA REKOD (Update Record) Fail yang terlibat > editdata.php Klik 2 kali fail editdata.php untuk membuat langkah seterusnya. Dalam fail editdata.php; 1. Buat 1 Table (2 row, 5 colum) Masukkan label dalam row 1 (ID, CategoryID ----- Price) 2. Buat Recordset. Bind Recordset ke dalam Table dalam row 2 3. Buat Repeat Region (highlight row 2) 4. Buat link ke fail confirmupdate.php Save fail editdata.php

Rajah 1: Fail editdata.php

===================== Fail confirmupdate.php Recordset 1. Buatkan fail confirmupdate.php dan buka untuk edit.

2. Buat recordset (Window > Bindings), klik (+) dan pilih Recordset. 3. Dalam tetingkap Recordset; Name: rsUpdate Connection: connStore Table: tblestore Column: All Filter: id dan = URL Parameter: recordID Sort: None OK Masih lagi dalam fail confirmupdate.php Update Server Behaviors 1. 2. 3. 4. 5. 6. 7. 8. Guna Application bar (sebelah atas) Klik Update form wizard Connection: connStore Table to update: tblestore Select record from: reStore Unique key: id After updating: index.php OK.

PINDA REKOD (Update Record) Cara Uji: 1. Buka fail editdata.php 2. Tekan F12 untuk buka dalam browser. 3. Klik Link ID untuk buka fail confirmupdate.php Cuba tengok adakah rekod yang kita klik tu masuk ke dalam form dengan ID yang betul. Kalau betul, buat pindaan dan klik butang Update Record. Fail index.php akan dipaparkan.

Dalam fail index.php klik View Data. OK. SEARCH DATA (Nak cari data atau rekod dalam database) Macam biasa run Apache & mySQL. Buka Dreamweaver (site DW8) Buat 2 fail; 1. finddata.php 2. searchresult.php Buka fail finddata.php untuk edit. Fail finddata.php 1. Buatkan 1 Form. (Menu Insert > Form > Form) atau (Form Toolbar > Form) 2. Biarkan kursor berada di dalam Form kemudian insert Text Field (Insert > Form > Text Field > OK) Katalah kita nak cari komponen komputer (product) Klik Text Field, tengok bahagian bawah skrin , Properties. Tukar nama textfield --> product. 3. Buat satu button Submit selepas Text Field di dalam Form. (Insert > Form > Button > OK) 4. Apabila kita tekan Submit data kan dihantar ke fail searchresult.php Buat link ke fail searchresult.php Klik butang Submit, lihat bahagian bawah skrin; klik Dalam petak Action taip: searchresult.php Simpan fail. ============================ FAIL SEARCH RESULT Buka fail searchresult.php untuk edit dan buat resordset.

Application > Binding > + > Recordset Masukkan seperti dalam rajah 1.

Rajah 1: Recordset Langkah seterusnya, membuat Table untuk tunjuk result.

Rajah 2:Search Result Page. Petunjuk Rajah 2; 1. Table 2. Recordset 3. Bind recordset ke dalam Table 4. Repeat Region. Simpan fail. =====================

Cara nak uji. Buka fail finddata.php > Tekan F12 > taip namaproduct > Submit. OK. akan bersambung ke Login Page dan Restricted Page (untuk Admin)

LOGIN PAGE Dalam peringkat ini kerja-kerja yang terlibat ialah; 1. Menetapkan page yang hanya boleh dilihat oleh member dan admin sahaja. 2. Menetapkan page yang boleh dilihat umum 3. Menetapkan page yang berkaitan dengan administration Contoh; 1. Fail2 yang melibatkan pindaan, tambahan dan padam hanya boleh dilakukan oleh admin sahaja. Fail-Fail Yang Perlu; 1. Fail untuk daftar sebagai ahli 2. Fail untuk login 3. Fail respon (daftar dan login) Database: Tambah 1 Table yang mengandungi rekod ahli dan password.

Restricted Page (Fail yang hanya admin/ahli sahaja boleh lihat) Untuk Admin sahaja 1. Fail Add Data 2. Fail Update Data 3. Fail Delete Data Untuk Ahli: Fail senarai ahli berdaftar boleh dilihat oleh ahli/admin tetapi tidak dapat dilihat oleh umum (public)