Dreamweaver Database Tutorial

Copyright Reserved 2004-
cruzzmz@hotmail.com
1

Hakcipta Terpelihara 2004 - Copyright2004

Amaran: Anda tidak dibenarkan untuk meniru, menyunting atau mengubah
mana-mana bahagian di dalam dokumen ini tanpa izin daripada penulis
asal dokumen ini. Walaubagaimanapun, anda dibenarkan untuk
menyebarkan tutorial ini dengan tujuan bukan komersil (pembelajaran),
dengan syarat tidak menghapus atau mengubah atribut penulis dan
penyataan hakcipta pada dokumen ini.
~ email: cruzzmz@hotmail.com

Tutorial Laman Web Asas Intergrasi antara aplikasi PHP, MySQL
menggunakan Macromedia Dreamweaver MX

Pengenalan
MySQL adalah satu daripada aplikasi untuk membuat pengkalan data. Ia adalah satu
software yang amat berkuasa dan boleh dimuat turun secara percuma. J ika anda pernah
menggunakannya baik dalam Windows ataupun di dalam Linux, ianya tidak mempunyai GUI
yang cantik seperti MS Access.
Akan tetapi, kita boleh menggabungkannya dengan HTML untuk menyampaikan
pengkalan data kita dari MySQL ke pengguna dalam bentuk spreadsheet yang mudah
difahami.Untuk itu, PHP digunakan sebagai orang tengah untuk menginterperasikan MySQL
dengan HTML. Di mana pengkalan data ini boleh di akses oleh semua orang di WWW.
Tetapi tidak semua orang mempunyai masa untuk belajar kesemua coding untuk aplikasi-
aplikasi tersebut. Adakah cara ataupun aplikasi lain untuk menggunakan MySQL, PHP & HTML
ini tanpa perlu menghabiskan banyak masa untuk belajar coding aplikasi-aplikasi tersebut?
J awapannya ada . Dengan menggunakan Macromedia Dreamweaver MX (Ver 6).
Sebelum memulakan penggunaan aplikasi Dreamweaver MX untuk pengkalan data anda,
anda perlulah mempunyai satu pengkalan data di dalam MySQL anda dan anda telahpun meng-
install PHP pada pc anda.

*Nota: MySQL dan PHP adalah open source software dimana ianya boleh dimuat turun secara
percuma.

*Nota2: Untuk menggunakan MySQL & PHP, anda perlulah menginstall web server
(Apache, IIS ataupun PWS) pada pc anda terlebih dahulu.Ini adalah supaya anda boleh
melihat hasil (output) coding anda pada web browser di pc anda.

1. Pengenalan pada antara-muka(interface) Dreamweaver MX

Antaramuka Dreamweaver MX adalah lebih kurang sama dengan aplikasi-aplikasi lain
untuk OS Windows. Pada antaramuka Dreamweaver MX, bahagian yang penting yang akan kita
digunakan adalah pada bahagian kiri dibahagian Application (Rajah 1). Dimana bahagian ini kita
akan menggunakan tab Database, Bindings & Server Behaviors untuk menghubungkan pengkalan
data kita dengan web browser menggunakan pengantara PHP.

Rajah 1: Bahagian Application
cruzzmz@hotmail.com
2

Bahagian kedua adalah bahagian dimana kita membuat coding untuk web browser kita bahagian
kanan atas. J ika kita mahu melihat coding dan hasil output kita pada Dreamweaver MX kita
hanya perlu memilih tab kedua seperti di Rajah 2. Rajah 3 adalah bahagian coding & output pada
Dreamweaver MX.

Rajah 2: Pilihan Tab untuk Coding & Output dalam Dreamweaver MX

Rajah 3: Bahagian Coding & Output pada Dreamweaver MX

Bahagian ketiga yang akan digunakan adalah tab-tab pada bahagian Insert dimana tab-tab ini
berguna untuk membuat layout pada laman web anda. Seperti tab perkakasan (tools) untuk
membuat Forms dan sebagainya. Seperti padaRajah 4.

Rajah 4: Tab-tab pada bahagian Insert

Bahagian keempat adalah bahagian kiri bawah, bahagian Files (Rajah 5) dimana bahagian ini
berguna untuk membuat dan menyunting (edit) site pada Dreamweaver MX anda.

cruzzmz@hotmail.com
3

Rajah 5: Bahagian Files
Bahagian terakhir untuk bahagian antaramuka Dreamweaver MX adalah bahagian Properties,
dimana bahagian ini digunakan untuk menyambung link-link pada laman web anda dan berguna
juga untuk membuat menyambung coding-coding PHP anda.

Rajah 6: Bahagian Properties

2. Definasi Site pada Dreamweaver MX.

Setelah anda mengenali antaramuka Dreamweaver MX, maka bolehlah anda memulakan
coding anda untuk membuat laman web pengkalan data anda.
Sebelum mula membuat coding untuk laman web anda, anda perlulah membuat satu
pengkalan data di sini saya menggunakan MySQL untuk membuat satu pengkalan data bernama
Dreamweaver, dimana pada pengkalan data tersebut mempunyai satu table Data, yang
menyimpan data-data Id, Date, Login dan User.
Untuk menghubungkan Dreamweaver dengan pengkalan data anda anda perlulah
membuat satu Site baru. Pada bahagian Files, klik pada Site dan pilih New Site (Rajah 7)

cruzzmz@hotmail.com
4

Rajah 7: Bahagian Files New Site

Satu pop up iaitu Site Definition, akan keluar (Rajah 8), isikan nama untuk site anda.
(Cth: dreamweaver). Klik Next.

cruzzmz@hotmail.com
5

Rajah 8: Site Definition Pop Up

Kita akan menggunakan teknologi server PHP & MySQL, jadi pilihlah pilihan kedua
iaitu Yes,I want to use server technology dan pada Which Server Technology? pilih PHP &
MySQL. (Rajah 9). Klik Next.

Rajah 9: Teknologi Server
Bahagian 3 Site Definition, anda diminta untuk mendefinasikan bagaimana anda mahu
berkerja dengan fail anda & dimana anda mahu menyimpan fail-fail anda.
cruzzmz@hotmail.com
6
1. Pilihan pertama adalah menggunakan localhost dimana anda telah menginstall PHP,
MySQL dan Web Server anda IIS atau Apache pada pc anda.
2. Pilihan kedua adalah anda menyunting fail anda pada pc anda kemudian anda uploadkan
pada remote testing server (pc) anda.
3. Pilihan ketiga adalah anda terus menggukan remote server anda untuk mengcoding dan
menguji fail anda. (Dimana PHP, MySQL & Web Server anda berada di pc lain cth
production server anda).
4. Menyunting pada remote server menggunakan FTP atau RDS.

Rajah 10: Pilihan untuk berkerja dengan fail-fail anda

Untuk bahagian pengujian fail Testing File, anda perlu mendefinasikan URL untuk
membolehkan anda menggunakan web browser anda untuk menguji output fail-fail anda. J ika
anda menyimpan semua fail-fail anda di pc anda, anda boleh menggunakan URL :
cruzzmz@hotmail.com
7
http://localhost/nama site anda
dimana di sini menggunakan contoh URL :
http://localhost/dreamweaver
(Rajah 11).

Rajah 11: URL untuk laman web anda.

Bahagian seterusnya, adakah anda mahu menyimpan salinan fail-fail anda pada pc-pc lain
(Rajah 12).

Rajah 12: Menyimpan salinan fail-fail anda pada pc-pc lain.

Bahagian terakhir, (Rajah 13) adalah ringkasan kepada semua pilihan-pilihan yang telah
dibuat. Setelah berpuas hati klik butang Done.

cruzzmz@hotmail.com
8

Rajah 13: Ringkasan definasi anda.

Setelah selesai membuat site, anda bolehlah menghubungkan pengkalan data
anda dengan menggunakan aplikasi Dreamweaver MX.

3. Menghubungkan Pengkalan Data anda.

Pada Tab Application, pilih tab Databases. Klik pada +

Rajah 14: Tab Databases

cruzzmz@hotmail.com
9

Rajah 15: Pilihan MySQL Connection

Pilih MySQL Connection.
Masukkan Connection Name, Kedudukan MySQL server anda (jika di pc sendiri,
localhost) User name & Password MySQL server anda. Akhir sekali, pilih pengkalan data anda.

Rajah 16: MySQL Connection

Klik OK.

cruzzmz@hotmail.com
10

Rajah 17: Hubugan Pengkalan data menggunakan definasi connection anda.

Selepas anda telah membuat definasi hubungan mySQL dengan pengkalan data MySQL anda,
anda bolehlah membuat laman web anda.

4. Membina Laman Web & menghubung Pengkalan Data.

Di sini saya akan menggunakan pengkalan data dreamweaver sebagai contoh;
Di mana saya ingin menyenaraikan semua data-data didalam pengkalan data saya pada laman
web saya dalam bentuk senarai jadual (table). Untuk itu , dengan menggunakan tab Table pada
Dreamweaver MX (Rajah 18) saya memilih untuk membuat jadual. J adual saya terdiri dari 2
baris (rows) dan 5 lajur (columns). Seperti Rajah 19.

Rajah 18: Membina J adual dengan Dreamweaver MX

cruzzmz@hotmail.com
11

Rajah 19: J adual Pada Laman Web.

Coding pada Dreamweaver

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>

<body>
<center>
<p><font size="+2">Login Name Page</font> </p>
<table width="75%" border="1">
<tr>
<td><div align="center">Date</div></td>
<td><div align="center">Login</div></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div align="center">Details</div></td>
<td><div align="center">Edit</div></td>
<td><div align="center">Delete</div></td>
</tr>
</table>
<p> </p>
</center>
</body>
</html>

Setelah membuat jadual pada Dreamweaver MX, kita perlu menghubungkan pengkalan data kita
dengan laman web kita. Untuk itu, di bahagian Application, pilih tab Bindings. Klik pada tanda
+ Pilih Recordset (Query) (Rajah 20).

Rajah 20: Recordset (Query)
cruzzmz@hotmail.com
12
Pop Up Recordset (Rajah 21) akan keluar. Masukkan nama Recordset (cth: RsView), Pilih
Connection yang telah kita definasikan tadi (cth: dbConnect). J ika kita mahu menyusun turutan
sesuatu data, kita boleh memilih data tersebut pada bahagian Sort (cth seperti di Rajah 21).
Setelah selesai, klik OK.

Rajah 21: Mendefinasi Recordset

Sekarang di bahagian Application, di tab Bindings akan ada hubungan antara pengkalan data anda
dengan laman web anda (Rajah 22)

Rajah 22: Hubungan antara pengkalan data dengan laman web di tab Bindings

Setelah selesai menghubungkan pengkalan data dengan laman web anda, langkah
seterusnya ialah untuk membuat hubungan fizikal (physical link) antara laman web anda dengan
pengkalan data anda supaya anda boleh melihat semua data anda pada laman web anda.

Coding pada Dreamweaver (Connection):

<?php require_once('Connections/dbConnect.php'); ?>
<?php
mysql_select_db($database_dbConnect, $dbConnect);
cruzzmz@hotmail.com
13
$query_rsView = "SELECT * FROM `data` ORDER BY `Date` DESC";
$rsView = mysql_query($query_rsView, $dbConnect) or die(mysql_error());
$row_rsView = mysql_fetch_assoc($rsView);
$totalRows_rsView = mysql_num_rows($rsView);
?>

5. Membuat hubungan fizikal (physical link) antara Data & Laman Web.

Untuk membuat hubungan tersebut, kita hanya perlu drag & drop data yang diperlukan
pada jadual kita. Drag dari bahagian Bindings data-data yang di perlukan dan kemudian drop ke
dalam ruang di jadual kita (Rajah 23). Sebagai contoh di laman web saya saya telah memilih data
Date & Login

Rajah 23: Data-data yang dipilih

Coding pada Dreamweaver:

<?php
$query_rsView ="SELECT * FROM `data` ORDER BY `Date` DESC";
$rsView =mysql_query($query_rsView, $dbConnect) or die(mysql_error());
$row_rsView =mysql_fetch_assoc($rsView);
$totalRows_rsView =mysql_num_rows($rsView);
?>
<html>
<head>
</head>
<body>
<center>
<tr>
<td width="24%"><div align="center">Date</div></td>
<td width="28%"><div align="center">Login</div></td>
<td width="18%"> </td>
cruzzmz@hotmail.com
14
</tr>
<tr>
<td><?php echo $row_rsView['Date']; ?></td>
<td><?php echo $row_rsView['Login']; ?></td>
</tr>
</table>
<p> </p>
</center>
</body>
</html>
<?php
mysql_free_result($rsView);
?>

Untuk menyenaraikan kesemua data-data di dalam pengkalan data anda, anda boleh membuatnya
dengan senang menggunakan Dreamweaver MX. Anda hanya perlu memilih data-data yang anda
mahu senaraikan pada jadual anda (highlight) kemudian klik bahagian tab Server Behavior pada
bahagian Application. Klik + dan pilih Repeat Region (Rajah 24).

Rajah 24: Repeat Region pada tab Server Behavior.

Pop Up Repeat Region akan keluar. Anda boleh memilih untuk menyenaraikan sepuluh data per
muka surat laman web atau kesemua data-data anda pada satu laman web. Di sini sebagai contoh
saya memilih opsyen kedua (Rajah 25). Klik OK.

cruzzmz@hotmail.com
15

Rajah 25: Opsyen untuk menyenaraikan data-data.

Pada contoh disini saya memilih Date, Login, Details, Edit & Delete untuk membuatkan semua
data-data tersenarai dalam jadual (Rajah 26).

Rajah 26: Data-data dengan Repeat Region.

Coding pada Dreamweaver:

<?php
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<center>
<tr>
</tr>
<?php do { ?>
<tr>
</tr>
<?php }while ($row_rsView =mysql_fetch_assoc($rsView)); ?>
</table>
<p> </p>
cruzzmz@hotmail.com
16
</center>
</body>
</html>
<?php
?>

Pada bahagian Server Behavior akan ada satu baris Repeat Region [Recordset Name] seperti
Rajah 27.

Rajah 27: Baris Repeat Region pada Server Behavior.

6. Membuat Hubungan (link) antara Laman-laman Web.

Di jadual contoh, jadual tersebut mempunyai beberapa link ke beberapa laman-laman
web. Seperti ke laman web Details, Edit & Delete. Untuk membuat hubungan ke laman-laman
tersebut, buat 3 laman baru dengan menggunakan File New (Rajah 28).

Rajah 28: Membuat laman web baru.

Pilih Dynamic Page di bahagian Category dan PHP pada bahagian Dynamic Page (Rajah 29).
Klik Create selepas itu, Save kan laman-laman web tersebut dengan nama-nama :
detail.php, edit.php dan delete.php

cruzzmz@hotmail.com
17

Rajah 29: Pilihan jenis web pada Dreamweaver MX.
Untuk membuat hubungan (link) antara laman pertama yang diberi nama
view.php dengan laman-laman yang lain yang telah kita buat tadi (details.php, edit.php &
delete.php). Pada laman web view.php di ruang details, edit & delete kita perlu membuat
hubungan ke laman-laman web tadi; dengan menggunakan Dreamweaver MX.
Langkah pertama, pilih (highlight) salah satu ruang di jadual di laman view.php (cth:
ruang Details). Pada bahagian kanan paling bawah iaitu bahagian Properties di Dreamweaver
MX, klik pada bahagian Link di ikon fail (Rajah 30).

Rajah 30: Pilihan Link & Bahagian Properties.

Pop up untuk pilihan fail akan keluar (Rajah 31). Pilih fail (laman) details.

cruzzmz@hotmail.com
18

Rajah 31: Pop up Pemilihan Fail.

Klik pada butang Parameters (1) Pop up Rajah 32 akan keluar. Kemudian klik pada
ikon (2). Pilih Field (Dynamic Data) yang sesuai (Rajah 33) dimana data ini akan di gunakan
sebagai rujukan bagi laman-laman lain.

cruzzmz@hotmail.com
19

Rajah 32: Pop up bagi Parameters

Rajah 33: Pop up bagi Dynamic Data Field
Klik butang OK pada pop up Dynamic Data, pop up Parameters & pop up Select File. Kemudian
pada bahagian Coding di Dreamweaver MX. Tambahkan perkataan Login= di coding PHP
pada baris link untuk details.php.

cruzzmz@hotmail.com
20
cruzzmz@hotmail.com
21
Coding Dreamweaver MX:

<td>
<div align="center">
<a href=" details.php?Login=<?php echo $row_rsView['Login']; ?>" >
Details
</a>
</div>
</td>

Lakukan yang sama untuk ruang Edit & Delete pada jadual.


<?php
?>
<html>
<head>
</head>
<body>
<center>
<tr>
</tr>
<?php do {?>
<tr>
<td><div align="center">
<a href="details.php?Login=<?php echo $row_rsView['Login']; ?>">Details</a>
</div></td>
<a href="edit.php?Login=<?php echo $row_rsView['Login']; ?>">Edit</a>
</div></td>
<a href="delete.php?Login=<?php echo $row_rsView['Login'];?>">Delete</a>
</div></td>
</tr>
<?php }while ($row_rsView =mysql_fetch_assoc($rsView)); ?>
</table>
<p> </p>
</center>
</body>
</html>
<?php
?>

Rajah 34: Laman Web & tab Server Behavior setelah selesai menghubung data.

7. Membina Laman Web Details.php

Setelah selesai membuat hubungan (link) antara lamanlaman web, kita bolehlah
membina laman web kita satu persatu. Dimulakan dengan laman Details.php.
Pada laman Details.php kita mahu memaparkan maklumat terperinci pengkalan data kita.
Dalam contoh, kita mahu memaparkan maklumat Date, Login dan User. Dengan itu kita dapat
mengetahui sesuatu Login itu dimiliki oleh siapa dan bila Login itu dicipta.
Di sini saya ingin memaparkan maklumat itu dalam bentuk jadual. Untuk itu, buka laman
Details.php dan gunakan tab tables pada bahagian Insert di Dreamweaver MX. Bina satu jadual
dengan 2 baris 3 lajur. Nilai ruang di lajur pertama ialah Login Name. Ruang kedua, User
Name & ruang ketiga Date Created (Rajah 35).

Rajah 35: J adual pada Laman Details.php

Coding pada Dreamweaver MX:

<html>
<head>
<title>Details</title>
</head>

<body>
<p><font size="+2">Details</font> </p>
<tr>
<td width="33%"><div align="center">Login </div></td>
cruzzmz@hotmail.com
22
<td width="45%"><div align="center">User Name</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>

Setelah selesai membuat jadual, kita bolehlah menghubungkan jadual kita dengan
pengkalan data kita. Pada bahagian Application di tab Server Binding, klik pada + dan pilih
Recordset (Query) .Pop up Recordset akan keluar (Rajah 36).

Rajah 36: Pop up Recordset

Pada pop up Recodset , isikan ruangan Name degan nama recordset kita (cth: rsDetails).
Pada Connections, pilih definasi hubungan kita (cth:dbConnect). Pada bahagian Filter, pilih
Login di drop down list. Ini adalah kerana anda telah memilih Login sebagai data yang akan di
rujuk oleh laman web- laman web anda. Pada bahagian Sort, pilih None.
(Rujuk Rajah 36 untuk maklumat lengkap).

cruzzmz@hotmail.com
23

Rajah 36: Maklumat pada pop up Recordset

Coding pada Dreamweaver Mx:

<?php
$colname_rsDetails ="1";
if (isset($HTTP_GET_VARS['Login'])) {
$colname_rsDetails =(get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] :
addslashes($HTTP_GET_VARS['Login']);
}
$query_rsDetails =sprintf("SELECT * FROM `data` WHERE Login ='%s'", $colname_rsDetails);
$rsDetails =mysql_query($query_rsDetails, $dbConnect) or die(mysql_error());
$row_rsDetails =mysql_fetch_assoc($rsDetails);
$totalRows_rsDetails =mysql_num_rows($rsDetails);
?>
<html>
<head>
</head>
<body>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
cruzzmz@hotmail.com
24
<p> </p>
</body>
</html>
<?php
mysql_free_result($rsDetails);
?>

Rajah 38 menunjukkan output pada tab Bindings:

Rajah 38: Output di tab Bindings

Seterusnya, drag & drop Date, Login & User dari tab Bindings ke ruangan-ruangan di
jadual laman web anda. Output di laman web adalah seperti di Rajah 39.

Rajah 39: Output pada jadual selepas drag & drop.


<?php
$colname_rsDetails ="1";
$colname_rsDetails =(get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] :
}
$query_rsDetails =sprintf("SELECT * FROM `data` WHERE Login ='%s'", $colname_rsDetails);
$rsDetails =mysql_query($query_rsDetails, $dbConnect) or die(mysql_error());
$row_rsDetails =mysql_fetch_assoc($rsDetails);
$totalRows_rsDetails =mysql_num_rows($rsDetails);
?>
<html>
<head>
cruzzmz@hotmail.com
25
</head>
<body>
<tr>
</tr>
<tr>
<td> <?php echo $row_rsDetails['Date']; ?> </td>
<td> <?php echo $row_rsDetails['Login']; ?> </td>
<td> <?php echo $row_rsDetails['User']; ?></td>
</tr>
</table>
<p> </p>
</body>
</html>
<?php
mysql_free_result($rsDetails);
?>

Setelah itu Savekan laman Details.php.

8. Membina Laman Web Add.php

Di halaman web ini, kita akan menggunakan tab Forms di bahagian Insert di
Dreamweaver MX untuk membuat borang (form) pada laman web kita. Untuk itu kita perlu
membuat satu laman baru. Pada bahagian File di Dreamweaver MX, pilih New Pada pop up
New Document pilih Dynamic Page di bahagian Category, pilih PHP di bahagian Dynamic Page.
Klik Create. Namakan laman ini dengan nama Add New Data. Save laman ini dengan nama
Add.php.
Pada laman web Add.php, pada bahagian Insert di tab Forms pilih Form (Rajah 40).

Rajah 40: Pilihan Form untuk laman web.

Output di laman web adalah seperti Rajah 41.

Rajah 41: Output di laman web Add.php


<html>
<head>
<title>Add New Data</title>
cruzzmz@hotmail.com
26
</head>

<body>
<p><font size="+2">Add New Data</font> </p>
<form name="form1" method="post" action="">
</form>
</body>
</html>

Namakan Form kita dengan nama frmAdd seperti di bawah:

<form name="frmAdd" method="post" action="">

Kita hanya perlu membina borang (form) di dalam kotak Form Area. Untuk borang kita,
kita hanya perlukan kotak-kotak data (text field) untuk Date, Login & User Name sahaja. Pada
tab Forms, pilih text field (Rajah 42).

Rajah 42: Kotak Text Field

Setelah selesai membuat kotak-kotak data untuk ketiga-tiga data yang diperlukan, output
terakhir pada web adalah seperti di Rajah 43.

Rajah 43: Borang (form) untuk laman Add.php
Kemudian pada tab Forms klik butang button untuk meletakkan satu butang Submit di
dalam borang (form) kita (Rajah 44).

Rajah 44: Untuk membuat butang.

Namakan butang tersebut dengan nama Submit.
Output terakhir pada laman web adalah seperti Rajah 45.

cruzzmz@hotmail.com
27

Rajah 45: Output laman Add.php dengan butang Submit.

Namakan Textfield di laman web anda dengan nama-nama yang sama pada pengkalan
data (Rajah 46). Seperti di bawah:

Rajah 46: Tab Server Bindings bagi Recordset rsAdd.


<p>Date:
<input name="Date" type="text" id="Date">
</p>
<p>Login Name:
<input name="Login" type="text" id="Login">
</p>
<p>User Name:
<input name="User" type="text" id="User">
</p>

Setelah selesai, hubungkan laman web Add.php ini dengan pengkalan data kita. Pada
Application di tab Bindings, klik +. Pilih Recordset (Query). Pada pop up Recordset, namakan
recordset anda (cth: rsAdd). Pilih definasi hubungan (connection) anda (cth: dbConnect). Pada
Filter & Sort pilih None. Rajah 47 adalah output terakhir (final output) bagi Recordset rsAdd.

cruzzmz@hotmail.com
28

Rajah 47: Output recordset untuk laman Add.php


<?php
$query_rsAdd ="SELECT * FROM `data`";
$rsAdd =mysql_query($query_rsAdd, $dbConnect) or die(mysql_error());
$row_rsAdd =mysql_fetch_assoc($rsAdd);
$totalRows_rsAdd =mysql_num_rows($rsAdd);
?>
<html>
<head>
<title>Add New Data</title>
</head>

<body>
<p><font size="+2">Add New Data</font> </p>
<p>Date:
<input type="text" name="Date" id="Date">
</p>
<p>Login Name:
</p>
<p>User Name:
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
<?php
cruzzmz@hotmail.com
29
mysql_free_result($rsAdd);
?>

9. Laman Web Pengkalan Data yang Baik.

Bagi satu laman web pengkalan data yang baik, kita perlulah mempunyai laman web
dimana kita boleh memadam (delete) dan menyunting (edit) data-data di pengkalan data kita.
Dengan menggunakan Dreamweaver MX, kita boleh membuat laman-laman web ini dengan
mudah dengan menggunakan Server Behaviors - Delete Record & Update Record.
Kita mulakan dengan membuat laman web untuk memadam rekod (delete) dahulu. Untuk
itu kita akan menggunakan laman web Delete.php. Buka laman web Delete.php di Dreamweaver
MX. J ika tiada laman web tersebut buat laman web tersebut dan save dengan nama delete.php.
Pada Application, di tab Server Behaviors klik pada +. Kemudian pilih Delete Recordset
(Rajah 48).

Rajah 48: Delete Record pada Tab Server Behavior.

Pop up Delete Record akan keluar (Rajah 49).

cruzzmz@hotmail.com
30

Rajah 49: Pop up Delete Record.

Pada pilihan First Check If Variable Is Defined, pilih URL Parameter kerana anda menggunakan
data rujukan (Login) dimana data rujukan tersebut di hulurkan (passed) kepada laman-laman web
anda. Definasikan data rujukkan anda di kotak sebelah First Check If Variable Is Defined. Pada
pilihan Connection, pilih definasi hubungan anda (cth: dbConnect). Pada pilihan Primary Key
Column, pilih data rujukan anda (cth: Login). Akhir sekali, pada After Deleting, Go To, pilih
laman web yang anda mahu dipaparkan selepas data dipadam dimana selalunya adalah laman
web pertama anda (cth: view.php). Rajah 50 adalah output terakhir (final output) bagi pop up
Delete Record kita. Save laman web ini.

Rajah 50: Output terakhir untuk pop up Delete Record.

Rajah 51: Output pada tab Server Behavior.


cruzzmz@hotmail.com
31
cruzzmz@hotmail.com
32
<?php
function GetSQLValueString($theValue, $theType, $theDefinedValue ="", $theNotDefinedValue
="")
{
$theValue =(!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;

switch ($theType) {
case "text":
$theValue =($theValue !="") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue =($theValue !="") ? intval($theValue) : "NULL";
break;
case "double":
$theValue =($theValue !="") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
break;
case "defined":
$theValue =($theValue !="") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}

if ((isset($HTTP_GET_VARS['Login'])) && ($HTTP_GET_VARS['Login'] !="")) {
$deleteSQL =sprintf("DELETE FROM data WHERE Login=%s",
GetSQLValueString($HTTP_GET_VARS['Login'], "text"));

$Result1 =mysql_query($deleteSQL, $dbConnect) or die(mysql_error());

$deleteGoTo ="view.php";
if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) {
$deleteGoTo .=(strpos($deleteGoTo, '?')) ? "&" : "?";
$deleteGoTo .=$HTTP_SERVER_VARS['QUERY_STRING'];
}
header(sprintf("Location: %s", $deleteGoTo));
}
?>
<html>
<head>
<title>Delete Page</title>
</head>

<body>
</body>
</html>
Seterusnya kita akan membuat laman web Edit.php. Dimana dengan laman ini, pengguna
boleh menyunting (edit) data-data di pengkalan data. Bina satu laman web dengan menggunakan
nama edit.php. Pada laman web tersebut, kita perlu menggunakan Forms. Laman web ini adalah
hampir sama dengan laman web add.php Cuma beza laman web ini dengan laman web add.php
adalah seperti jadual di bawah:

edit.php add.php
1. Server Behavior: Update Record 1. Server Behavior: Insert Record
2. Menggunakan Data Rujukan (cth: Login) 2. Tidak menggunakan Data Rujukan
3. Menggunakan Hidden Field 3. Tidak menggunakan Hidden Field

Sila rujuk membina laman web add.php, untuk membuat borang (form) di laman
edit.php.
Setelah selesai membuat borang (Form) di laman edit.php, anda perlu menghubungkan
laman tersebut dengan pengkalan data anda. Cara membuat hubungan tersebut juga telah
diterangkan beberapa kali di atas.
Namakan Recordset di halaman edit.php dengan nama rsEdit. Output terakhir Recordset
adalah seperti di Rajah 52.

Rajah 52: Output terakhir pada Recordset.

Kemudian di sebelum butang Submit pada laman edit.php masukkan satu Hidden Field.
Klik pada Hidden Field di tab Forms pada Insert (Rajah 53).

Rajah 53: Hidden Field.

Pada bahagian Properties, namakan Value Hidden Field dengan nama hiddenId dan klik
ikon pilih id pada pop up Dynamic Data. Output akhir adalah seperti Rajah 54.

cruzzmz@hotmail.com
33

Rajah 54: Output akhir Properties.

Di coding Dreamweaver MX, tukarkan nama form name untuk edit.php kepada frmEdit,
seperti di bawah :

<form name="form1" method="post" action=""> kepada
<form name="frmEdit" method="post" action="">

Pada Bahagian Application tab Server Behavior klik + dan pilih Update Record (Rajah 55).

Rajah 55: Pemilihan Update Recordset di tab Server Behavior.

Pada pop up Update Record: Pada Submit Values From, pilih definasi form anda (cth:
frmEdit). Pada Connection, pilih definasi hubungan anda (cth: dbConnect). Pastikan di bahagian
Colums, semua data-data anda sama seperti nama yang telah anda beri di borang (form) anda
(cth: Date FORM.Date). Pada Value, pilih nilai di hidden field anda (cth: FORM.hiddenId).
cruzzmz@hotmail.com
34
Pada After Updating, Go To, pilih laman web yang anda mahu dipaparkan selepas data
dikemaskinikan (update); dimana selalunya adalah laman web pertama anda (cth: view.php).
Output akhir adalah seperti Rajah 56.

Rajah 56: Output akhir Update Record.


<?php
="")
{

switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
break;
}
return $theValue;
cruzzmz@hotmail.com
35
cruzzmz@hotmail.com
36
}

$editFormAction =$HTTP_SERVER_VARS['PHP_SELF'];
$editFormAction .="?" . $HTTP_SERVER_VARS['QUERY_STRING'];
}

if ((isset($HTTP_POST_VARS["MM_update"])) && ($HTTP_POST_VARS["MM_update"] ==
"frmEdit")) {
$updateSQL =sprintf("UPDATE data SET `Date`=%s, Login=%s, `User`=%s WHERE id=%s",
GetSQLValueString($HTTP_POST_VARS['Date'], "date"),
GetSQLValueString($HTTP_POST_VARS['Login'], "text"),
GetSQLValueString($HTTP_POST_VARS['User'], "text"),
GetSQLValueString($HTTP_POST_VARS['hiddenId'], "int"));

$Result1 =mysql_query($updateSQL, $dbConnect) or die(mysql_error());

$updateGoTo ="view.php";
$updateGoTo .=(strpos($updateGoTo, '?')) ? "&" : "?";
$updateGoTo .=$HTTP_SERVER_VARS['QUERY_STRING'];
}
header(sprintf("Location: %s", $updateGoTo));
}

$colname_rsEdit ="1";
$colname_rsEdit =(get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] :
}
$query_rsEdit =sprintf("SELECT * FROM `data` WHERE Login ='%s'", $colname_rsEdit);
$rsEdit =mysql_query($query_rsEdit, $dbConnect) or die(mysql_error());
$row_rsEdit =mysql_fetch_assoc($rsEdit);
$totalRows_rsEdit =mysql_num_rows($rsEdit);
?>
<html>
<head>
<title>Edit Data</title>
</head>

<body>
<p><font size="+2">Edit Data</font>
<br>
<form name="frmEdit" method="POST" action="<?php echo $editFormAction; ?>">

<p>Date:
<input type="text" name="Date" id="Date">
</p>
<p>Login Name:
</p>
<p>User Name:
</p>
<input name="hiddenId" type="hidden" id="hiddenId" value="<?php echo
$row_rsEdit['id']; ?>">
<br>
<p>
</p>
<input type="hidden" name="MM_update" value="frmEdit">
</form>
</body>
</html>
<?php
mysql_free_result($rsEdit);
?>

Selepas itu drag & drop data-data dari Bindings ke kotak-kotak di borang (form) anda, seperti
Rajah 57. Save laman web ini.

Rajah 57: Output pada Dreamweaver MX selepas drag & drop.


<?php
="")
{

switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
cruzzmz@hotmail.com
37
cruzzmz@hotmail.com
38
break;
case "date":
break;
case "defined":
break;
}
return $theValue;
}

$editFormAction =$HTTP_SERVER_VARS['PHP_SELF'];
$editFormAction .="?" . $HTTP_SERVER_VARS['QUERY_STRING'];
}

if ((isset($HTTP_POST_VARS["MM_update"])) && ($HTTP_POST_VARS["MM_update"] ==
"frmEdit")) {
$updateSQL =sprintf("UPDATE data SET `Date`=%s, Login=%s, `User`=%s WHERE id=%s",
GetSQLValueString($HTTP_POST_VARS['Date'], "date"),
GetSQLValueString($HTTP_POST_VARS['Login'], "text"),
GetSQLValueString($HTTP_POST_VARS['User'], "text"),
GetSQLValueString($HTTP_POST_VARS['hiddenId'], "int"));

$Result1 =mysql_query($updateSQL, $dbConnect) or die(mysql_error());

$updateGoTo ="view.php";
$updateGoTo .=(strpos($updateGoTo, '?')) ? "&" : "?";
$updateGoTo .=$HTTP_SERVER_VARS['QUERY_STRING'];
}
header(sprintf("Location: %s", $updateGoTo));
}

$colname_rsEdit ="1";
$colname_rsEdit =(get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] :
}
$query_rsEdit =sprintf("SELECT * FROM `data` WHERE Login ='%s'", $colname_rsEdit);
$rsEdit =mysql_query($query_rsEdit, $dbConnect) or die(mysql_error());
$row_rsEdit =mysql_fetch_assoc($rsEdit);
$totalRows_rsEdit =mysql_num_rows($rsEdit);
?>
<html>
<head>
<title>Edit Data</title>
</head>

<body>
<p><font size="+2">Edit Data</font>
<br>
<form name="frmEdit" method="POST" action="<?php echo $editFormAction; ?>">
cruzzmz@hotmail.com
39

<p>Date:
<input name="Date" type="text" id="Date" value="<?php echo
$row_rsEdit['Date']; ?>">
</p>
<p>Login Name:
<input name="Login" type="text" id="Login" value="<?php echo
$row_rsEdit['Login']; ?>">
</p>
<p>User Name:
<input name="User" type="text" id="User" value="<?php echo
$row_rsEdit['User']; ?>">
</p>
<input name="hiddenId" type="hidden" id="hiddenId" value="<?php echo
$row_rsEdit['id']; ?>">
<br>
<p>
</p>
<input type="hidden" name="MM_update" value="frmEdit">
</form>
</body>
</html>
<?php
mysql_free_result($rsEdit);
?>

10. Penutup

Tahniah! Anda telah berjaya membuat laman web asas, mengintegrasikan php & MySQL
dengan menggunakan Dreamweaver MX. Walaubagaimanapun, tutorial ini hanya difokuskan
kepada teknik asas Dreamweaver MX dengan aplikasi php & MySQL sahaja. Sebenarnya dengan
menggunakan Dreamweaver MX, anda boleh membuat laman-laman web untuk .ASP, .J SP,
.ASPX & .CFM. Untuk selain dari laman web .PHP, anda bolehleh merujuk kepada laman web
yang lain.
Sekian terima kasih kerana mengambil masa untuk membaca & mencuba tutorial ini.
Harapan saya agar tutorial ini sedikit sebanyak dapat membantu anda yang mahu mencuba
aplikasi-aplikasi Dreamweaver MX, PHP & MySQL.

Selamat Mencuba !!!!

Rujukan

1. DMXZone
http:// www.dmxzone.com/ShowDetails.asp?NewsId=4501

2. Maromedia Dreamweaver Support Center
http:// macromedia.com/support/dreamweaver/buildings/user_delete_rcds/
user_delete_rcds_php02.html

3. Building PHP Application with Macromedia Dreamweaver MX
Written by : Harish Kamath

cruzzmz@hotmail.com
40
4. Mastering Dreamweaver MX Databases
Published by : Sybex Inc.
Written by : Susan Sales Harkins, Bryan Chamberlain, Darren McGee

5. Beberapa buku rujukan mengenai PHP dan MySQL.

Dreamweaver Database Tutorial

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dreamweaver Database Tutorial

Diunggah oleh

Hak Cipta:

Format Tersedia

Copyright Reserved 2004-

Anda mungkin juga menyukai