dreamweaver database tutorial di (1)
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.
~ email: [email protected]
©Copyright Reserved [email protected]
1
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 aplikasiaplikasi tersebut. Adakah cara ataupun 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 menginstall 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
©Copyright Reserved [email protected]
2
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
Bahagian keempat adalah bahagian kiri bawah, bahagian Files (Rajah 5) dimana bahagian ini
berguna untuk membuat dan menyunting (edit) site pada Dreamweaver MX anda.
©Copyright Reserved [email protected]
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)
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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. Jika
anda menyimpan semua fail-fail anda di pc anda, anda boleh menggunakan URL :
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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. Jadual saya terdiri dari 2
baris (rows) dan 5 lajur (columns). Seperti Rajah 19.
Rajah 18: Membina Jadual dengan Dreamweaver MX
©Copyright Reserved [email protected]
11
Rajah 19: Jadual Pada Laman Web.
Coding pada Dreamweaver
Untitled Document
Login Name Page
Date
Login
Details
Edit
Delete
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)
©Copyright Reserved [email protected]
12
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):
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:
Untitled Document
Login Name Page
Date
Login
©Copyright Reserved [email protected]
14
Details
Edit
Delete
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.
©Copyright Reserved [email protected]
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:
Untitled Document
Login Name Page
Date
Login
Details
Edit
Delete
©Copyright Reserved [email protected]
16
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
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
20
Coding Dreamweaver MX:
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: [email protected]
©Copyright Reserved [email protected]
1
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 aplikasiaplikasi tersebut. Adakah cara ataupun 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 menginstall 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
©Copyright Reserved [email protected]
2
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
Bahagian keempat adalah bahagian kiri bawah, bahagian Files (Rajah 5) dimana bahagian ini
berguna untuk membuat dan menyunting (edit) site pada Dreamweaver MX anda.
©Copyright Reserved [email protected]
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)
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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. Jika
anda menyimpan semua fail-fail anda di pc anda, anda boleh menggunakan URL :
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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. Jadual saya terdiri dari 2
baris (rows) dan 5 lajur (columns). Seperti Rajah 19.
Rajah 18: Membina Jadual dengan Dreamweaver MX
©Copyright Reserved [email protected]
11
Rajah 19: Jadual Pada Laman Web.
Coding pada Dreamweaver
Untitled Document
Login Name Page
Date
Login
Details
Edit
Delete
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)
©Copyright Reserved [email protected]
12
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):
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:
Untitled Document
Login Name Page
Date
Login
©Copyright Reserved [email protected]
14
Details
Edit
Delete
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.
©Copyright Reserved [email protected]
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:
Untitled Document
Login Name Page
Date
Login
Details
Edit
Delete
©Copyright Reserved [email protected]
16
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
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
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.
©Copyright Reserved [email protected]
20
Coding Dreamweaver MX: