Hakcipta Terpelihara 2004 - Copyright©2004
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.
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. Jika 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-aplikasi lain untuk menggunakan MySQL, PHP & HTML ini tanpa perlu menghabiskan banyak masa untuk belajar coding aplikasi-aplikasi tersebut? Jawapannya 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.
Bahagian kedua adalah bahagian dimana kita membuat coding untuk web browser kita bahagian kanan atas. Jika 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
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.
Rajah 7: Bahagian Files Æ New Site …
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
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
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.
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 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
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. Jadual saya terdiri dari 2 baris (rows) dan 5 lajur (columns). Seperti Rajah 19.
Rajah 19: Jadual 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><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).
Pop Up Recordset (Rajah 21) akan keluar. Masukkan nama Recordset (cth: RsView), Pilih Connection yang telah kita definasikan tadi (cth: dbConnect). Jika 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
$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 require_once('Connections/dbConnect.php'); ?> <?php
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<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 width="24%"><div align="center">Date</div></td> <td width="28%"><div align="center">Login</div></td> <td width="18%"> </td>
</tr> <tr>
<td><?php echo $row_rsView['Date']; ?></td> <td><?php echo $row_rsView['Login']; ?></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>
<?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.
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 require_once('Connections/dbConnect.php'); ?> <?php
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<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 width="24%"><div align="center">Date</div></td> <td width="28%"><div align="center">Login</div></td> <td width="18%"> </td>
<td width="12%"> </td> <td width="18%"> </td> </tr>
<?php do { ?> <tr>
<td><?php echo $row_rsView['Date']; ?></td> <td><?php echo $row_rsView['Login']; ?></td>
<td><div align="center">Details</div></td> <td><div align="center">Edit</div></td> <td><div align="center">Delete</div></td> </tr>
<?php } while ($row_rsView = mysql_fetch_assoc($rsView)); ?>
</center> </body> </html>
<?php
mysql_free_result($rsView); ?>
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 :
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.
Rajah 31: Pop up Pemilihan Fail.
Klik pada butang Parameters… (1) Pop up Rajah 32 akan keluar. Kemudian klik pada
Rajah 32: Pop up bagi Parameters
Rajah 33: Pop up bagi Dynamic Data Field
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.
Coding Dreamweaver MX:
<?php require_once('Connections/dbConnect.php'); ?> <?php
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<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 width="24%"><div align="center">Date</div></td> <td width="28%"><div align="center">Login</div></td> <td width="18%"> </td>
<td width="12%"> </td> <td width="18%"> </td> </tr>
<?php do { ?>
<tr>
<td><?php echo $row_rsView['Date']; ?></td> <td><?php echo $row_rsView['Login']; ?></td> <td><div align="center">
<a href="details.php?Login=<?php echo $row_rsView['Login']; ?>">Details</a> </div></td>
<td><div align="center">
<a href="edit.php?Login=<?php echo $row_rsView['Login']; ?>">Edit</a> </div></td>
<td><div align="center">
<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>
<?php
mysql_free_result($rsView); ?>
Rajah 34: Laman Web & tab Server Behavior setelah selesai menghubung data.
7. Membina Laman Web Details.php
Setelah selesai membuat hubungan (link) antara laman–laman 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: Jadual pada Laman Details.php
Coding pada Dreamweaver MX:
<html> <head>
<title>Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<body>
<p><font size="+2">Details</font> </p> <table width="40%" border="1">
<tr>
<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.
Rajah 36: Maklumat pada pop up Recordset
Coding pada Dreamweaver Mx:
<?php require_once('Connections/dbConnect.php'); ?> <?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']);
}
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<title>Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> <body>
<p><font size="+2">Details</font> </p> <table width="40%" border="1">
<tr>
<td width="22%"><div align="center">Date</div></td> <td width="33%"><div align="center">Login </div></td> <td width="45%"><div align="center">User Name</div></td> </tr>
<tr>
<td> </td> <td> </td> <td> </td> </tr>
<p> </p>
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.
Coding pada Dreamweaver MX:
<?php require_once('Connections/dbConnect.php'); ?> <?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']);
}
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<title>Details</title>
</head> <body>
<p><font size="+2">Details</font> </p> <table width="40%" border="1">
<tr>
<td width="22%"><div align="center">Date</div></td> <td width="33%"><div align="center">Login </div></td> <td width="45%"><div align="center">User Name</div></td> </tr>
<tr>
<td> <?php echo $row_rsDetails['Date']; ?> </td> <td> <?php echo $row_rsDetails['Login']; ?> </td> <td> <?php echo $row_rsDetails['User']; ?> </td> </tr>
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
Coding pada Dreamweaver MX:
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</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”.
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.
Coding pada Dreamweaver MX:
<form name="frmAdd" method="post" action=""> <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>
Rajah 47: Output recordset untuk laman Add.php
Coding Dreamweaver MX:
<?php require_once('Connections/dbConnect.php'); ?> <?php
mysql_select_db($database_dbConnect, $dbConnect); $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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><font size="+2">Add New Data</font> </p> <form name="frmAdd" method="post" action=""> <p>Date:
<input type="text" name="Date" 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>
<p>
<input type="submit" name="Submit" value="Submit"> </p>
</form> </body> </html>
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. Jika 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.
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.
<?php require_once('Connections/dbConnect.php'); ?> <?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
switch ($theType) {
$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"));
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<body> </body> </html>
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
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 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.
Coding pada Dreamweaver MX:
<?php require_once('Connections/dbConnect.php'); ?> <?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
switch ($theType) {
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break;
}
}
$editFormAction = $HTTP_SERVER_VARS['PHP_SELF']; if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) {
$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"));
mysql_select_db($database_dbConnect, $dbConnect);
$Result1 = mysql_query($updateSQL, $dbConnect) or die(mysql_error());
$updateGoTo = "view.php";
if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) { $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";
$updateGoTo .= $HTTP_SERVER_VARS['QUERY_STRING']; }
header(sprintf("Location: %s", $updateGoTo)); }
$colname_rsEdit = "1";
if (isset($HTTP_GET_VARS['Login'])) {
$colname_rsEdit = (get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] : addslashes($HTTP_GET_VARS['Login']);
}
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</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:
<input name="Login" type="text" id="Login"> </p>
<p>User Name:
<input name="hiddenId" type="hidden" id="hiddenId" value="<?php echo $row_rsEdit['id']; ?>">
<br> <p>
<input type="submit" name="Submit" value="Submit"> </p>
<input type="hidden" name="MM_update" value="frmEdit"> </form>
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.
Coding pada Dreamweaver MX:
<?php require_once('Connections/dbConnect.php'); ?> <?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
break; case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break;
}
return $theValue; }
$editFormAction = $HTTP_SERVER_VARS['PHP_SELF']; if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) {
$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"));
mysql_select_db($database_dbConnect, $dbConnect);
$Result1 = mysql_query($updateSQL, $dbConnect) or die(mysql_error());
$updateGoTo = "view.php";
if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) { $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";
$updateGoTo .= $HTTP_SERVER_VARS['QUERY_STRING']; }
header(sprintf("Location: %s", $updateGoTo)); }
$colname_rsEdit = "1";
if (isset($HTTP_GET_VARS['Login'])) {
$colname_rsEdit = (get_magic_quotes_gpc()) ? $HTTP_GET_VARS['Login'] : addslashes($HTTP_GET_VARS['Login']);
}
mysql_select_db($database_dbConnect, $dbConnect);
$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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><font size="+2">Edit Data</font> <br>
<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>
<input type="submit" name="Submit" value="Submit"> </p>
<input type="hidden" name="MM_update" value="frmEdit"> </form>
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, .JSP, .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.
