Modul Webdb v3

MODUL TUTORIAL
SISTEM MAKLUMAT BERASASKAN WEB

SISTEM PENDAFTARAN
KOKURIKULUM
WAN RAFIK BIN WAN ISMAIL

GURU SAINS KOMPUTER
SMK DATO’ HAJI MOHD REDZA, SEREMBAN
NEGERI SEMBILAN DARUL KHUSUS
rafik0105@gmail.com
MODUL : WEB DATABASE
ISI KANDUNGAN
TAJUK SUBMODUL MUKA SURAT

PENDAHULUAN 3
A: MEMULAKAN LOCALHOST 5
B: MEMBINA PANGKALAN DATA 8
C: MENYALIN FOLDER PANGKALAN DATA 9
D: MEMBUAT SITE DEFINITION 12
E: MEMBUAT DATABASE CONNECTION 18
F: MEMBINA LAMAN TEMPLATE 22
G: MEMBINA JADUAL LOGIN 31
H: MEMBINA LAMAN DAFTAR LOGIN (SIGN UP) 34
I: MEMBINA LAMAN BERJAYA DAFTAR LOGIN 41
J: MEMBINA LAMAN LOGIN 45
K: MEMBINA LAMAN UTAMA (INDEX.PHP) 57
L: MEMBINA JADUAL DATA MURID 61
M: MEMBINA LAMAN DAFTAR MURID 62
N: MEMBINA LAMAN BERJAYA DAFTAR MURID 73
O: MEMBINA LAMAN SENARAI MURID 76
P: MENAMBAH FUNGSI KEMASKINI DAN PADAM 86
Q: MEMBINA LAMAN EDIT MURID 90
R: MEMBINA LAMAN DELETE MURID 94
S: MEMBINA JADUAL KOKURIKULUM 99
T: MEMBINA LAMAN DAFTAR KOKU 101
U: MENAMBAH FUNGSI MUAT NAIK (UPLOAD GAMBAR) 107
V: MEMBINA LAMAN LAPORAN (QUERY & CETAK) 116
W: MENGEDIT LAMAN INDEX.PHP 141
WAN RAFIK BIN WAN ISMAIL, SMK DATO’ HAJI MOHD REDZA, SEREMBAN, NEGERI SEMBILAN 2
PENDAHULUAN
Salam dan selamat sejahtera semua. Segala puji dan syukur saya panjatkan
kehadrat Ilahi kerana dengan izinNya modul ini dapat disiapkan akhirnya. Idea untuk
menghasilkan modul ini timbul setelah guru-guru dan pelajar-pelajar Sains Komputer
mempunyai masalah dalam mempelajari dan menghasilkan Sistem Maklumat
Berasaskan Web. Ini mungkin kerana, guru-guru dan pelajar-pelajar tidak mempunyai
pengetahuan dan kemahiran dalam menggunakan mana-mana perisian dan bahasa
pengaturcaraan dalam menghasilkan Sistem Maklumat Berasaskan Web.
Saya juga masih dalam proses mempelajari bagaimana menghasilkan

sebuah Sistem Maklumat Berasaskan Web dengan mengikuti kursus-kursus dan
bengkel-bengkel yang dianjurkan. Ilmu yang saya kongsikan dalam modul ini banyak
saya perolehi melalui sesi perbengkelan bersama-sama En Norhisham bin Hj Omar,
Ketua Unit ICT dan Pengkomputeran SPA Jabatan Pendidikan Negeri Sembilan.
Jutaan terima kasih saya ucapkan kepada beliau atas ilmu yang diberikan.
Sistem yang saya bangunkan sebagai contoh tutorial langkah demi langkah
bagi modul ini ialah Sistem Pendaftaran Kokurikulum di sekolah. Modul ini adalah
sebagai panduan sahaja dan boleh diubahsuai mengikut sistem yang akan
dibangunkan nanti. Perisian yang saya gunakan ialah AppServ 2.5.10 dan
Dreamweaver CS3.
Saya juga ingin memohon maaf sekiranya terdapat sebarang kesalahan dan
kesilapan yang terdapat dalam modul ini termasuklah ejaan, tatabahasa dan
penggunaan istilah yang tidak sesuai.
Saya juga memohon agar guru-guru atau pelajar-pelajar yang ingin

menggunakan modul ini agar dapat mengisi Google Form ini gg.gg/modulwebdb
untuk tujuan perekodan dan pengesanan sebagai dokumentasi penghasilan bahan
inovasi dalam PdPc. Ini bermaksud salinan softcopy modul ini HANYA akan dikongsi
melalui akaun Gmail saya sahaja kepada mereka yang mendaftar sahaja.
Sekiranya guru-guru merasakan modul ini berguna dan bermanfaat untuk

kegunaan sendiri atau pelajar-pelajar anda semua, saya mengalu-alukan sumbangan
sebanyak RM10 sebagai tanda penghargaan atas perkongsian modul ini. Sumbangan
boleh di masukkan ke dalam akaun Maybank: 1100 2315 7335. Sebarang pertanyaan
boleh hubungi saya melalui emel rafik0105@gmail.com atau talian 012-2057303
untuk maklumat lanjut.
Saya juga tidak membenarkan penerbitan, percetakan atau penggunaan

semula isi kandungan modul ini untuk tujuan penerbitan dan lain-lain kegunaan tanpa
kebenaran dan persetujuan saya. Kerjasama anda semua amat saya hargai.
Akhir kata, semoga anda semua beroleh manfaat daripada modul ini dan
selamat belajar.
A : MEMULAKAN LOCALHOST
1. Buka pelayar web, contohnya seperti Google Chrome dalam rajah di bawah.
2. Taipkan localhost pada omnibox dan tekan kekunci Enter.
3. Paparan seperti di bawah akan keluar pada pelayar web.
4. Klik pada pautan seperti dalam rajah di bawah.
5. Masukkan Username dan Password yang telah ditetapkan sewaktu proses

instalasi (biasanya Usename : root dan Password : admin / admin1234) pada kotak
dialog Authentication required. Kemudian klik butang Log in.
6. Paparan phpMyAdmin seperti rajah di bawah akan dipaparkan sekiranya

Username dan Password yang dimasukkan adalah betul.
B : MEMBINA PANGKALAN DATA
1. Taipkan nama pangkalan data yang ingin dibina pada kotak “Create new database”
seperti rajah di bawah. Contoh di bawah saya namakan “sistemdaftar”. Kemudian
klik butang Create.
(Pastikan nama pangkalan data menggunakan huruf kecil semua dan tiada ruang
(space).
2. Mesej di bawah akan terpapar menunjukkan pangkalan data “sistemdaftar” sudah

dibina.
C : MENYALIN FOLDER PANGKALAN DATA KE FOLDER WWW DALAM

APPSERV
1. Buka Explorer dan klik pada direktori di mana program Appserv disimpan dan
dwiklik folder AppServ tersebut.
2. Dwiklik pada subfolder MySQL.
3. Dwiklik subfolder data.
4. Klik kanan pada subfolder pangkalan data yang telah dibina iaitu subfolder
“sistemdaftar” dan klik Copy.
5. Buka kembali folder AppServ, dwiklik subfolder www.
6. Klik kanan, pilih Paste, subfolder “sistemdaftar” yang telah diCopy tadi akan berada
dalam subfolder www seperti rajah di bawah.
D : MEMBUAT SITE DEFINITION
1. Buka program Adobe Dreamweaver CS3, klik pada bahagian Create New, PHP
seperti rajah di bawah.
2. Klik pada menu Site di bahagian atas menu bar, kemudian klik pada New Site.
3. Paparan seperti rajah di bawah akan keluar. Masukkan nama site dan URL site
yang akan dibangunkan nanti.
Nama site : sistemdaftar
URL : http://localhost/sistemdaftar
4. Klik butang Next seperti paparan di bawah.
5. Seterusnya, pilih Yes, I want to use a server technology dan Which server
technology pilih PHP MySQL seperti rajah di bawah. Kemudian klik butang Next.
6. Pilih Edit locally, then upload to remote testing server dan taipkan
C:\AppServ\www\sistemdaftar\ pada ruangan “Where on your computer do you
want to store your files?”. Copy lokasi fail tersebut dan klik Next seperti rajah di
bawah.
7. Pilih Local/Network untuk How do you connect to your testing server dan Paste
lokasi fail yang telah diCopy tadi pada What folder on your server do you want to
store your files in? Klik Next.
8. Seterusnya pada paparan di bawah, tambah “sistemdaftar” pada belakang

localhost dan klik butang Test URL.
9. Mesej berikut akan dipaparkan sekiranya URL tersebut betul. Klik Ok dan butang
Next. Sekiranya ada error, semak kembali langkah sebelum ini.
10. Seterusnya pilih No, do not enable check in and check out dan klik Next.
11. Klik Done untuk menamatkan proses Site Definition ini.
E : MEMBUAT DATABASE CONNECTION

1. Lihat pada sebelah kanan program, klik pada Application dan seterusnya
Databases. Klik pada tanda tambah (+).
2. Pilih MySQL Connection.
3. Masukkan data berikut ke dalam kotak dialog MySQLConnection.Klik Select pada

ruangan Database di bahagian bawah.
4. Paparan berikut akan keluar dan pilih pangkalan data yang telah dibangunkan.
5. Selepas keluar sistemdaftar pada kotak dialog MySQL Connection klik butang OK.
6. Perhatikan pada rajah di bawah, terdapat menu sistemdaftar seperti dalam rajah
di bawah.
7. Berikutnya sistemdaftar akan keluar pada Application menunjukkan database

connection telah berjaya.
F : MEMBINA LAMAN TEMPLATE

1. Buka program Dreamweaver, klik pada menu File dan klik pada submenu New
2. Paparan New Document seperti di bawah akan muncul. Pilih Page from Sample,
Starter Page (Theme), bagi contoh modul ini saya memilih Health & Nutrition –
Text Page sebagai contoh untuk membina template laman sistem yang akan
dibangunkan sepanjang modul ini. Kemudian klik butang Create.
3. Menu Save As berikut akan keluar, pastikan file disimpan dalam folder
‘sistemdaftar’ (folder database) sebelum ini. Taipkan ‘template.php’ pada File
name dan klik butang Save.
4. Paparan berikut adalah untuk menentukan lokasi semua fail grafik akan disimpan.
Taipkan ‘images’ sahaja di belakang ‘C:\AppServ\www\sistemdaftar\” seperti rajah
di bawah. Klik butang Copy.
5. Edit laman tersebut mengikut kesesuaian sistem yang akan dibangunkan.

Contohnya seperti tajuk sistem, logo dan sebagainya seperti rajah dibawah.
6. Paparan di bawah menunjukkan beberapa elemen yang telah diedit.
7. Untuk logo, klik dan delete image asal, klik Insert dan pilih Image.
8. Pilih imej yang diperlukan dari folder berkenaan, klik OK.
9. Oleh kerana imej tersebut terletak di luar dari root folder, maka kita perlu copy file
tersebut ke dalam folder berkenaan. Klik Yes.
10. Paparan berikut akan keluar, dwiklik folder images.
11. Tekan butang Save.
12. Selepas paparan di bawah keluar, klik OK.
13. Imej akan keluar dan edit mengikut kesesuaian dari segi saiz dan kedudukannya.
14. Highlight perkataan ‘LAMAN UTAMA’ dan lihat Link pada Properties di bahagian
bawah. Padam ‘javascript:;’.
15. Taipkan ‘index.php’ pada ruangan tersebut.
16. Untuk melihat paparan sebenar laman template yang telah diedit, tekan Save pada
menu atau kekunci shortcut [Ctrl + S]. Kemudian klik pada icon Preview/Debug in
browser, pilih mana-mana browser yang ada.
17. Laman tersebut akan dipaparkan pada browser yang telah dipilih seperti rajah di
bawah.
Nota: Setiap laman php baru yang akan dibina selepas ini akan menggunakan
template ini melalui menu Open pada Dreamweaver dan PASTIKAN
menggunakan arahan SAVE AS bagi mengelakkan file template dipinda
kandungannya.
G : MEMBINA JADUAL LOGIN

1. Buka phpMyAdmin dengan menaip localhost pada browser. Pilih nama database
yang telah dibina sebelum ini iaitu ’sistemdaftar’.
2. Taipkan nama jadual ‘login’ dan bilangan medan ‘5’ bagi jadual tersebut seperti
rajah di bawah
3. *Pastikan nama jadual menggunakan huruf kecil dan tiada ruang (Space).
Jadual ‘login’ akan menyimpan maklumat pengguna yang sign-up untuk tujuan
login ke dalam sistem.
4. Paparan seperti di bawah akan keluar menunjukkan jadual “login” dan jumlah
medan ‘5’ seperti yang telah ditetapkan pada langkah sebelumnya.
5. Masukkan nama medan, jenis data dan panjang @ nilai medan tersebut. Medan
yang pertama diletakkan sebagai kunci primer dengan menggunakan jenis data
int, Extra : auto_increment dan Klik pada butang kunci Primary. Klik butang Save
setelah selesai.
Tetapan Medan:
Field Type Length/Values Extra Primary
id INT auto_increment Checked
username VARCHAR 100
password VARCHAR 100
nama VARCHAR 100
emel VARCHAR 100
6. Paparan berikut akan keluar setelah jadual “login” telah dibina seperti rajah di
bawah.
H : MEMBINA LAMAN DAFTAR LOGIN (SIGN UP)

1. Buka program Dreamweaver dan klik Open. Pilih file ‘template’ dalam folder
database ‘sistemdaftar’ dan klik Open.
2. Selepas laman ‘template’ dibuka. Klik menu File dan pilih Save As.. atau dengan
menekan kekunci shortcut [Ctrl+Shift+S].
3. Taipkan File name: dengan ‘daftarlogin.php’ dan klik butang Save seperti rajah di
bawah.
4. Pada kotak Title taipkan ‘DAFTAR LOGIN’ dan tukar tajuk laman mengikut
kesesuaian.
5. Pada sebelah kanan panel, Klik pada Application kemudian klik Bindings.
6. Klik pada icon + dan Klik Recordset (Query) seperti rajah di bawah.
7. Kotak dialog Recordset akan terpapar seperti di bawah.
8. Klik anak panah pada Connection pilih nama database iaitu ‘sistemdaftar’. Pada
Table pula, klik anak panah dan pilih ‘login’. Klik OK.
9. Recordset (Recordset1) akan muncul pada tab Bindings di sebelah kanan panel.
10. Letakkan cursor pada baris kedua ‘SELAMAT DATANG KE SISPEK (DAFTAR
LOGIN). Klik pada Insert, Data, Insert Record, Record Insertion From Wizard.
11. Kotak dialog Record Insertion Form akan keluar seperti di bawah.
12. Pilih Connection: sistemdaftar, Table: login, After inserting, go to: berjaya.php,
Label: Id, Display as: Hidden field. Klik OK.
13. Klik pada text box password dan pilih Password pada Properties di sebelah bawah
supaya simbol titik sahaja yang keluar apabila password ditaip oleh pengguna.
14. Klik pada butang Insert record dan ubah Value kepada DAFTAR pada Properties
di bahagian bawah. Klik Save atau [Ctrl+S].
I : MEMBINA LAMAN BERJAYA DAFTAR LOGIN

3. Isikan File name: dengan ‘berjayadaftarlogin.php’ dan klik butang Save seperti
rajah di bawah.
4. Edit laman dengan menaip Title: ‘BERJAYA DAFTAR LOGIN’ seperti rajah di
bawah. Taipkan tajuk laman, gunakan Heading 1 pada Properties untuk perkataan
‘LOGIN’, dan Centerkan perkataan tersebut
.
5. Pada sebelah kanan panel, klik pada Tag Inspector.
6. Klik pada Tag <body>, klik pada tab Behaviours, klik tanda + dan pilih Popup
Message.
7. Kotak dialog Popup Message akan keluar dan isikan Message yang akan
dipaparkan setelah pengguna berjaya mendaftar maklumat login. Contoh seperti
di bawah. Klik OK.
8. Save page berjayadaftarlogin.php.
J : MEMBINA LAMAN LOGIN

3. Isikan File name: dengan ‘login.php’ dan klik butang Save seperti rajah di bawah.
4. Edit laman dengan menaip Title: ‘LOGIN’ seperti rajah di bawah. Taipkan tajuk
laman ‘LOGIN’, dan Centerkan perkataan tersebut
5. Letakkan cursor pada baris kedua di bawah LOGIN. Klik menu Forms dan klik icon
Form.
6. Garisan putus-putus berwarna merah akan muncul. Fungsinya adalah untuk

pengguna mengisi data.
7. Klik menu Common, klik icon Table.
8. Kotak dialog Table akan muncul, masukkan angka 3 bagi Rows dan 2 bagi
Columns. Klik OK.
9. Table seperti berikut akan muncul. Pada Properties klik anak panah hitam pada
Align dan pilih Center untuk meletakkan Table di bahagian tengah.
10. Taipkan perkataan ‘Username’ dan “Password’ pada Table tersebut.
11. Klik pada column sebelah Username, klik menu Forms dan klik icon Text Field.
12. Kotak dialog Input Tag Accessibility Attributes akan keluar. Taipkan ‘username’
pada ID. Klik OK.
13. Ulang langkah yang sama pada column sebelah Password seperti rajah di bawah.
Taipkan ‘password’ pada ID dan Klik OK.
14. Klik pada text field sebelah column Password. Klik Password pada Properties.
15. Highlight kedua-dua column paling bawah
16. Klik kanan, klik Table dan pilih Merge Cells.
17. Setelah column dimergekan, klik Forms dan klik icon Button.
18. Taipkan ‘submit’ dan klik OK.
19. Letakkan cursor di hadapan butang Submit dan klik Center pada Properties.
20. Klik butang Submit, tukar value Submit kepada ‘LOGIN’ pada panel Properties di
bahagian bawah.
21. Letakkan cursor di bawah butang LOGIN. Pilih Heading 2, taipkan ‘SILA DAFTAR
BAGI PENGGUNA BARU.’ dan klik icon Center.
22. Highlight perkataan ‘DAFTAR’ dan pada Link taipkan ‘daftarlogin.php’.
23. Klik menu Data, klik anak panah pada icon User Authentication dan pilih Log In
User.
24. Kotak dialog Log In User akan keluar. Klik dan pilih seperti paparan di bawah.
Taipkan ‘index.php’ pada If login succeeds dan ‘login.php’ pada If login fails. Klik
OK.
25. Klik Save.
K : MEMBINA LAMAN UTAMA (INDEX.PHP)
1. Klik File dan klik New.
2. Klik Page from Sample, Starter Page (Theme), dan pilih Home Page Theme yang
sama dengan laman template sebelum ini. Klik Create.
3. Taipkan File name sebagai ‘index.php’ dan klik Save.
4. Taipkan ‘images’ dan klik Copy untuk menyalin fail imej ke dalam folder database.
5. Edit mengikut kesesuaian sistem yang dibangunkan.
6. Berikut adalah rekabentuk Laman Utama atau index.php sistem ini.
7. Save dan previewkan pada browser dengan menekan kekunci shortcut [F12].
L : MEMBINA JADUAL DATA MURID

1. Buka phpMyAdmin melalui localhost pada browser. Buat jadual baru ‘datamurid’
dengan ‘7’ bilangan medan seperti paparan di bawah. Klik Go.
2. Isikan bahagian Field, Type dan Length/Values dan klik Save.
Tetapan Medan:
Field Type Length/Values Primary
nokp VARCHAR 12 Checked
nama VARCHAR 100
tingkatan VARCHAR 100
kelas VARCHAR 100
jantina VARCHAR 100
kaum VARCHAR 100
agama VARCHAR 100
M : MEMBINA LAMAN DAFTAR MURID

3. Isikan File name: dengan ‘daftarmurid.php’ dan klik butang Save seperti rajah di
bawah.
4. Edit laman mengikut kesesuaian dan taip pada Title: ‘DAFTAR MURID’ seperti
rajah di bawah.
5. Klik pada Bindings, klik tanda + dan pilih Recordset (Query).
6. Isi kotak dialog Recordset dengan tetapan berikut seperti dalam paparan. Klik OK.
7. Letakkan cursor pada baris dibawah Pendaftaran Murid. Klik Insert Record dan
pilih Record Insertion Form Wizard.
8. Isikan tetapan Record Insertion Form seperti paparan di bawah. Klik OK.
9. Klik pada text field Nokp, taipkan angka 12 pada Max chars. (untuk mengelakkan
pengguna memasukkan nombor IC lebih daripada 12 angka).
10. Klik pada text field sebelah Tingkatan, tekan kekunci Delete.
11. Klik pada menu Forms, klik icon List/Menu.
12. Taipkan ‘tingkatan’ pada ID dan klik OK.
13. Dwiklik pulldown menu dan klik List Values pada panel Properties di bawah.
14. Taipkan Item Label (label yang akan keluar pada list) dan Value (nilai yang akan
disimpan dalam database). Klik tanda + untuk menambah list lain. Klik OK bila
selesai.
15. Klik pada pulldown list Tingkatan, klik pada Code.
16. Paparan coding bagi pulldown list tingkatan akan dipaparkan.
17. Copy atau [Ctrl+C] coding ‘<option value="P">P</option>’
18. Klik pada hujung coding ‘<option value="P">P</option>’ , Enter dan Paste [Ctrl+V]
19. Tukarkan coding asal kepada coding berikut

<option value="">SILA PILIH</option>
20. Klik pada Design dan pulldown list akan berubah seperti paparan di bawah.
21. Ulangi langkah-langkah yang sama bagi medan-medan lain yang berkaitan.
22. Dwiklik butang Insert record. Taipkan ‘DAFTAR’ pada Value di Properties.
23. Save laman ‘daftarmurid.php’.
N : MEMBINA LAMAN BERJAYA DAFTAR MURID

3. Isikan File name: dengan ‘berjaya2.php’ dan klik butang Save seperti rajah di
bawah.
4. Edit laman dengan menaip Title: ‘BERJAYA DAFTAR MURID’ seperti rajah di
bawah. Taipkan tajuk laman, gunakan Heading 2 pada Properties untuk perkataan
‘LAMAN UTAMA’, dan Centerkan perkataan tersebut.
5. Highlight ‘LAMAN UTAMA’ dan taipkan ‘index.php pada Link di bawah.
6. Save laman ‘berjaya2.php’.
O : MEMBINA LAMAN SENARAI MURID

3. Isikan File name: dengan ‘senaraimurid.php’ dan klik butang Save seperti rajah di
bawah.
4. Edit laman dengan menaip Title: ‘SENARAI MURID’ seperti rajah di bawah.
Taipkan tajuk laman ‘SENARAI MURID’.
5. Klik pada Bindings, klik tanda+ dan klik Recordset (Query).
6. Isi tetapan berikut pada kotak dialog Recordset dan klik OK.
9. Isikan File name: dengan ‘detailmurid.php’ dan klik butang Save seperti rajah di
bawah.
10. Edit laman dengan menaip Title: ‘DETAIL MURID’ seperti rajah di bawah. Taipkan
tajuk laman ‘DETAIL MURID’. Savekan laman tersebut.
11. Buka kembali laman senaraimurid.php. Letakkan cursor pada baris kedua di
bawah ‘SENARAI MURID’. Klik menu Data, klik icon Master Detail Page Set.
12. Isikan tetapan berikut pada kotak dialog Insert Master-Detail Page Set, Show: All
records dan taipkan ‘detailmurid.php’ pada Detail page name. Klik OK.
13. Klik tab laman detailmurid.php di atas dan Save laman tersebut.
14. Klik kembali tab fail senaraimurid.php. Klik hujung table untuk highlight dan edit
setiap medan pada baris tajuk jadual. Tulisan, alignment dan warna background
boleh ditukar pada Properties di bawah.
15. Edit dan Save. Preview pada browser untuk melihat kesesuaian.
16. Hasil preview pada browser. Laman boleh diedit mengikut kesesuaian.
17. Buka laman detailmurid.php. Klik kanan pada jadual detail murid dan pilih Cut.
18. Klik kanan pada baris kedua selepas tajuk laman dan klik Paste.
19. Klik Save setelah jadual detail murid selesai diPaste.
P : MENAMBAH FUNGSI KEMASKINI DAN PADAM

1. Buka laman senaraimurid.php. Klik kanan pada row terakhir iaitu Agama. Klik
Table dan klik Insert Rows or Columns.
2. Klik Columns dan letakkan 2 pada Number of columns. Klik OK.
3. Taipkan ‘Kemaskini’ dan ‘Padam’ pada 2 column tersebut.
4. Klik pada medan di bawah No KP, copy Link: detailmurid.php?recordID=<?php

echo $row_Recordset1['nokp']; ?>
5. Highlight Kemaskini pada baris kedua, paste link yang telah dicopy pada langkah
di atas tadi iaitu
detailmurid.php?recordID=<?php echo $row_Recordset1['nokp']; ?>
Tukarkan detailmurid.php kepada editmurid.php
editmurid.php?recordID=<?php echo $row_Recordset1['nokp']; ?>
6. Highlight Padam pada baris kedua, paste link yang telah dicopy pada langkah di
atas tadi iaitu
detailmurid.php?recordID=<?php echo $row_Recordset1['nokp']; ?>
Tukarkan detailmurid.php kepada deletemurid.php
deletemurid.php?recordID=<?php echo $row_Recordset1['nokp']; ?>
7. Save dan preview pada browser.
Q : MEMBINA LAMAN EDIT MURID

3. Isikan File name: dengan ‘editmurid.php’ dan klik butang Save seperti rajah di
bawah.
4. Edit laman dengan menaip Title: ‘KEMASKINI MURID’ seperti rajah di bawah.
Taipkan tajuk laman, ‘KEMASKINI MURID’.
5. Isikan tetapan berikut dengan klik pada anak panah berkaitan pada kotak dialog
Recordset. Cuma ‘recordID’ perlu ditaip pada ruangan tersebut. Klik OK.
6. Klik menu Data, klik icon Update Record, pilih record Update Form Wizard.
7. Klik pada pilihan berikut, Cuma ‘senaraimurid.php sahaja perlu ditaip.Klik OK.
8. Klik pada butang Update record, tukar Value kepada ‘KEMASKINI REKOD’.
9. Save laman setelah selesai.
R : MEMBINA LAMAN DELETE MURID

3. Isikan File name: dengan ‘deletemurid.php’ dan klik butang Save seperti rajah di
bawah.
4. Edit laman dengan menaip Title: ‘PADAM MURID’ seperti rajah di bawah. Taipkan
tajuk laman ‘PADAM MURID’.
5. Klik Bindings, klik tanda +, klik Recordset (Query).
6. Klik dan pilih tetapan Recordset berikut. Klik OK.
7. Klik menu Data, klik icon Delete Record.
8. Klik dan pilih tetapan Delete Record berikut dan taipkan ‘senaraimurid.php’ pada
kotak After deleting, go to:. Klik OK.
9. Save laman ‘deletemurid.php’.
S : MEMBINA JADUAL KOKURIKULUM

1. Buka phpMyAdmin dengan menaip localhost pada browser. Pilih nama database
yang telah dibina sebelum ini iaitu ’sistemdaftar’.
2. Taipkan nama jadual ‘kokurikulum’ dan bilangan medan ‘5’ bagi jadual tersebut
Jadual ‘kokurikulum’ akan menyimpan maklumat kokurikulum pelajar yang

mendaftar.
3. Masukkan nama medan, jenis data dan panjang @ nilai medan tersebut. Tetapan
medan adalah seperti di bawah rajah. Klik butang Save setelah selesai.
Tetapan Medan:
Field Type Length/Values Primary
nokp VARCHAR 12 Checked
uniform VARCHAR 100
kelab VARCHAR 100
sukan VARCHAR 100
rumah VARCHAR 100
T : MEMBINA LAMAN DAFTAR KOKURIKULUM

3. Isikan File name: dengan ‘daftarkoku.php’ dan klik butang Save seperti rajah di
bawah.
4. Pada sebelah kanan panel, Klik pada Application kemudian klik Bindings. Klik pada
icon + dan Klik Recordset (Query) seperti rajah di bawah.
5. Klik anak panah pada Connection pilih nama database iaitu ‘sistemdaftar’. Pada
Table pula, klik anak panah dan pilih ‘kokurikulum’. Klik OK.
6. Letakkan cursor pada baris kedua ‘SELAMAT DATANG KE SISPEK DAFTAR

LOGIN’. Klik pada Insert, Data, Insert Record, Record Insertion From Wizard.
7. Pilih Connection: sistemdaftar, Table: kokurikulum, After inserting, go to:

berjaya2.php. Klik OK.
8. Edit label mengikut kesesuaian sekiranya perlu.
9. Klik pada text field Nokp, taipkan angka 12 pada Max chars. (untuk mengelakkan
pengguna memasukkan nombor IC lebih daripada 12 angka).
10. Klik pada text field sebelah Unit Beruniform, tekan kekunci Delete.
(Sila rujuk Modul M Langkah 10 hingga 20 untuk membuat dropdown list pada
medan Unit Berunifom, Kelab & Persatuan, Sukan & Permainan dan Rumah
Sukan)
11. Dropdown list untuk pemilihan Unit Kokurikulum bagi mengurangkan kesilapan
memasukkan data.
12. Klik butang Insert record. Taipkan ‘DAFTAR’ pada Value di Properties.
13. Save laman ‘daftarkoku.php’.
U : MENAMBAH FUNGSI MUATNAIK (UPLOAD) GAMBAR

1. Buka program Dreamweaver dan klik Open. Pilih file ‘senaraimurid.php’ dalam
folder database ‘sistemdaftar’ dan klik Open. Klik kanan pada column Padam.
2. Klik Table, klik Insert Rows or Columns.
3. Tambahkan 2 columns selepas Padam.
4. Taipkan Muat Naik dan Gambar pada column tersebut.
5. Copy coding untuk muat naik gambar di bawah ini:

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>
<input type="file" name="file" id="file" />
<input type="submit" name="btn_uploadpic" id="btn_uploadpic" value="Upload Gambar" />
</label>
<input name="hf_nama" type="hidden" id="hf_nama" value="<?php echo
$row_Recordset1['nama']; ?>" />
</form>
6. Klik kotak di bawah Muat Naik, klik Code.
7. Padam daripada coding <td> </td
8. Padam seperti paparan bawah. Pastikan cursor berada di tengah-tengah

kod <td></td.
9. Paste kod muat naik yang telah dicopy tadi seperti paparan berikut.
10. Klik Design kembali, fungsi muat naik gambar telah muncul pada jadual.
11. Klik butang Upload Gambar dan tukar Value kepada Muat Naik Gambar jika perlu.
12. Klik pada column di bawah Gambar, klik Code.
13. Padam kod dalam kod <td> </td>
14. Copy kod di bawah ini dan paste di antara kod ini <td></td seperti paparan.
<img src="upload/<?php echo $row_Recordset1['nama']; ?>.jpg" width="67" height="81" />
15. Klik Design, dan icon gambar akan keluar di bawah column gambar.
16. Seterusnya copy kod di bawah ini:

<?php
if (isset($_POST['btn_uploadpic']))
{
$id=$_POST['hf_nama'];
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$id.".jpg");
}
?>
17. Klik Code, cari kod body seperti rajah di bawah. Pada hujung baris kod tersebut
tekan Enter.
18. Paste kod yang telah dicopy tadi.
19. Buka Explorer, masuk ke dalam folder AppServ, www, sistemdaftar. Buat satu
folder yang dinamakan ‘upload’ bagi menyimpan gambar yang telah dimuat naik.
V : MEMBINA LAMAN LAPORAN

3. Isikan File name: dengan ‘laporan.php’ dan klik butang Save seperti rajah di
bawah.
14. Pada sebelah kanan panel, Klik pada Application kemudian klik Bindings. Klik pada
icon + dan Klik Recordset (Query) seperti rajah di bawah.
4. Pada kotak dialog Recordset, pilih Connection ‘sistemdaftar’ dan klik pada butang
Advanced di sebelah kanan.
5. Copy atau taipkan kod di bawah ke dalam kotak SQL.

SELECT
datamurid.nokp,datamurid.nama,datamurid.tingkatan,datamurid.kelas,datamurid.jantina,datamuri
d.kaum,datamurid.agama,kokurikulum.nokp,kokurikulum.uniform,kokurikulum.kelab,kokurikulum.s
ukan,kokurikulum.rumah
FROM datamurid,kokurikulum
WHERE datamurid.nokp = kokurikulum.nokp AND datamurid.nama LIKE %colname AND
datamurid.tingkatan LIKE %colname2% AND datamurid.kelas LIKE %colname3%
ORDER BY datamurid.nama ASC
6. Klik tanda + untuk menambah Variables.
7. Isikan tetapan di bawah pada kotak dialog Add Variable. Klik OK.
Name: colname
Type:Text
Defaul value:-1
Runtime value:$_GET[‘nama’]
8. Ulang langkah 7 di atas untuk colname2 dan colname3, tukarkan dengan nilai
tetapan berikut untuk colname2 dan colname3.
9. Klik OK selepas selesai ketiga-tiga variables.
10. Klik pada baris kedua di bawah Laporan Pendaftaran Kokurikulum, klik menu
Forms, klik icon Form. Kotak garisan putus-putus berwarna merah akan keluar.
11. Klik menu Common, klik icon Table.
12. Letakkan Rows: 2 dan Columns: 6, klik OK.
13. Klik Align pada Properties dan klik Center.
14. Klik pada table dan klik Code.
15. Tukar coding method=”post” kepada method=”get”
16. Klik Design. Taipkan Nama, Tingkatan dan Kelas ke dalam column table tersebut.
17. Highlight pada semua kotak di baris bawah.
18. Klik Kanan dan pilih Merge Cells.
19. Klik cursor pada sebelah kotak Nama. Klik pada menu Forms dan klik icon Text
Field.
20. Taipkan ‘nama’ dan klik OK.
21. Klik cursor pada kotak sebelah Tingkatan.
22. Buka laman ‘daftarmurid.php’. Klik kanan pada list Tingkatan dan klik Copy.
23. Buka kembali laman ‘laporan.php’. Klik kanan pada kotak sebelah tingkatan dan
klik Paste.
24. Ulang langkah 21 hingga 23 untuk list Kelas.
25. Klik pada baris kedua. Klik menu Forms, klik icon Button.
26. Taipkan cari pada ID. Klik OK. Letakkan button di bahagian tengah kotak pada
Properties.
27. Dwiklik butang Submit dan tukar Value kepada CARI.
28. Buka fail ‘template.php’. Edit Title dan Tajuk Laman. Save as File name sebagai
‘detailcarian.php’. Klik Save.
29. Buka kembali laman ‘laporan.php’. Klik pada baris di bawah jadual. Klik menu
Data, klik icon Master Detail Page Set.
30. Klik tetapan berikut dalam kotak dialog Insert Master-Detail Page Set.
31. Buka laman ‘detailcarian.php’. Cut table dan pastekan di bawah baris tajuk Detail
Carian.
32. Edit mengikut kesesuaian table tersebut pada Properties. Dwiklik Recordset
(DetailRS1)
33. Edit kod yang ditunjukkan dengan kod di bawah:

WHERE datamurid.nokp AND kokurikulum.nokp=colname
34. Klik Ok setelah selesai menaip kod di atas.

 Langkah ini adalah untuk mengatasi ralat “Column ‘nokp’ in where clause is
ambiguous” dengan arahan SQL asal.
35. Klik di hadapan jadual. Enter.
36. Taipkan Laporan Individu.
37. Enter dan klik tab Code. (Pastikan cursor berada di tempat yang betul)
38. Delete ‘ ’
39. Copy serta paste kod di bawah di tempat yang sama.

<img src="upload/<?php echo $row_Recordset1['nama']; ?>.jpg"
width="67" height="81" />
40. Seterusnya copy kod ‘DetailRS1’ dan paste pada kod ‘Recordset1’ seperti rajah.
41. Enter cursor supaya berada di bawah jadual seperti rajah. Klik Code.
42. Padam kod ‘ ’.
43. Copy kod di bawah dan paste di tempat yang sama seperti rajah.
<form>
<input type="button" value="Print this page"onClick="window.print()">
</form>
44. Klik Design. Dwiklik butang Print this page, tukarkan Value kepada ‘CETAK’.
45. Dwiklik Recordset (DetailRS1), edit SQL di bawah kepada kod arahan SQL berikut:
FROM datamurid LEFT JOIN kokurikulum ON datamurid.nokp=kokurikulum.nokp
46. Klik OK setelah selesai paste kod SQL di atas.
47. Save laman ‘detailcarian.php’.
W : MENGEDIT LAMAN INDEX

1. Buka laman ‘index.php’. Highlight menu Daftar Murid. Taipkan ‘daftarmurid.php’
pada Link di Properties
2. Ulang langkah di atas untuk link kepada laman Daftar Unit Koku, Senarai Daftar,
Carian & Laporan.
3. Klik menu Data, klik icon User Authentication, klik Log Out User.
4. Pilih tetapan berikut dan pada When done, go to: Taipkan ‘login.php’. Klik OK.
5. Save laman index.php.

6. Sekarang sistem anda telah siap sepenuhnya. Sistem ini boleh diuji untuk
sebarang ralat yang mungkin ada akibat kesilapan coding dan sebagainya. Rujuk
kembali kepada sub-sub modul sebelum ini bagi membetulkan sebarang
kesilapan.
7. Setelah anda faham sepenuhnya, bolehlah diubahsuai mengikut kesesuaian
sistem maklumat yang ingin dibangunkan terutama dari segi jadual, borang, query
dan juga laporan.
8. Selamat membangunkan Sistem Maklumat Berasaskan Web.
Terima kasih
WanRafik
V3 : 17.02.2018 | 9.15 PM

Modul Webdb v3

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Modul Webdb v3

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL TUTORIAL

SISTEM MAKLUMAT BERASASKAN WEB

WAN RAFIK BIN WAN ISMAIL

TAJUK SUBMODUL MUKA SURAT

Saya juga masih dalam proses mempelajari bagaimana menghasilkan

Saya juga memohon agar guru-guru atau pelajar-pelajar yang ingin

Sekiranya guru-guru merasakan modul ini berguna dan bermanfaat untuk

Saya juga tidak membenarkan penerbitan, percetakan atau penggunaan

2. Taipkan localhost pada omnibox dan tekan kekunci Enter.

3. Paparan seperti di bawah akan keluar pada pelayar web.

4. Klik pada pautan seperti dalam rajah di bawah.

5. Masukkan Username dan Password yang telah ditetapkan sewaktu proses

6. Paparan phpMyAdmin seperti rajah di bawah akan dipaparkan sekiranya

B : MEMBINA PANGKALAN DATA

2. Mesej di bawah akan terpapar menunjukkan pangkalan data “sistemdaftar” sudah

C : MENYALIN FOLDER PANGKALAN DATA KE FOLDER WWW DALAM

2. Dwiklik pada subfolder MySQL.

3. Dwiklik subfolder data.

5. Buka kembali folder AppServ, dwiklik subfolder www.

D : MEMBUAT SITE DEFINITION

4. Klik butang Next seperti paparan di bawah.

8. Seterusnya pada paparan di bawah, tambah “sistemdaftar” pada belakang

11. Klik Done untuk menamatkan proses Site Definition ini.

E : MEMBUAT DATABASE CONNECTION

2. Pilih MySQL Connection.

3. Masukkan data berikut ke dalam kotak dialog MySQLConnection.Klik Select pada

7. Berikutnya sistemdaftar akan keluar pada Application menunjukkan database

F : MEMBINA LAMAN TEMPLATE

5. Edit laman tersebut mengikut kesesuaian sistem yang akan dibangunkan.

6. Paparan di bawah menunjukkan beberapa elemen yang telah diedit.

8. Pilih imej yang diperlukan dari folder berkenaan, klik OK.

10. Paparan berikut akan keluar, dwiklik folder images.

11. Tekan butang Save.

12. Selepas paparan di bawah keluar, klik OK.

15. Taipkan ‘index.php’ pada ruangan tersebut.

G : MEMBINA JADUAL LOGIN

H : MEMBINA LAMAN DAFTAR LOGIN (SIGN UP)

7. Kotak dialog Recordset akan terpapar seperti di bawah.

I : MEMBINA LAMAN BERJAYA DAFTAR LOGIN

5. Pada sebelah kanan panel, klik pada Tag Inspector.

8. Save page berjayadaftarlogin.php.

J : MEMBINA LAMAN LOGIN

6. Garisan putus-putus berwarna merah akan muncul. Fungsinya adalah untuk

7. Klik menu Common, klik icon Table.

10. Taipkan perkataan ‘Username’ dan “Password’ pada Table tersebut.

15. Highlight kedua-dua column paling bawah

16. Klik kanan, klik Table dan pilih Merge Cells.

18. Taipkan ‘submit’ dan klik OK.

22. Highlight perkataan ‘DAFTAR’ dan pada Link taipkan ‘daftarlogin.php’.

25. Klik Save.

K : MEMBINA LAMAN UTAMA (INDEX.PHP)

1. Klik File dan klik New.

3. Taipkan File name sebagai ‘index.php’ dan klik Save.

5. Edit mengikut kesesuaian sistem yang dibangunkan.

6. Berikut adalah rekabentuk Laman Utama atau index.php sistem ini.

L : MEMBINA JADUAL DATA MURID

2. Isikan bahagian Field, Type dan Length/Values dan klik Save.

M : MEMBINA LAMAN DAFTAR MURID

5. Klik pada Bindings, klik tanda + dan pilih Recordset (Query).

11. Klik pada menu Forms, klik icon List/Menu.

12. Taipkan ‘tingkatan’ pada ID dan klik OK.

15. Klik pada pulldown list Tingkatan, klik pada Code.

16. Paparan coding bagi pulldown list tingkatan akan dipaparkan.

7. Padam daripada coding <td> </td

8. Padam seperti paparan bawah. Pastikan cursor berada di tengah-tengah

13. Padam kod dalam kod <td> </td>

38. Delete ‘ ’

42. Padam kod ‘ ’.