Sistem Pengurusan Kategori Rumah Sukan Hijau

MODUL

PEMBANGUNAN SISTEM
BERASASKAN WEB

MENGGUNAKAN

DREAMWEAVER
DAN XAMPP

- Tablet View
- Desktop View
- Mobile View

PROTOTYPE

Modul
Pembangunan Sistem

Berasaskan Web

menggunakan

DREAMWEAVER

Dan xampp

Sistem Pengurusan Kategori
Rumah Sukan Hijau

Modul Pembangunan Sistem berasaskan web ini disediakan untuk membantu dan
membimbing para guru dan pelajar dalam menyiapkan kerja kursus Sains Komputer.

Dalam modul ini, perisian yang digunakan ialah Dreamweaver CS6 dan juga Xampp versi
5.6.36. Contoh sistem yang dibangunkan ialah Sistem Pengurusan Kategori Rumah Sukan
Hijau.

© Sharen Memalyn Menson, 2018

Hak cipta terpelihara. Tiada bahagian daripada terbitan ini boleh diterbitkan semula, disimpan untuk
pengeluaran atau ditukarkan dalam apa-apa bentuk dengan alat apa jua pun, sama ada dengan cara
elektronik, gambar, rakaman atau sebagainya tanpa kebenaran daripada Sharen Memalyn Menson.

SHAREN MEMALYN MENSON Edisi Pertama
Guru Sains Komputer Cetakan Kedua
SMK Kinarut, Papar, Sabah
Emel : [email protected]
Telefon / SMS/ Whatsapp / Telegram : 0168388935

Isi Kandungan

01 xampp..................................................................................................... 01
02 membuat pangkalan data..................................................................... 02
03 membuat site definition........................................................................... 06
04 menghasilkan layout ............................................................................... 15
05 header .................................................................................................... 20
06 css ........................................................................................................... 26
07 fail php bagi header, footer dan menu ................................................... 36
08 menu navigation ...................................................................................... 43
09 sambungan ke pangkalan data .............................................................. 43
10 log masuk (index.php) ............................................................................. 45
11 borang daftar masuk ............................................................................... 58
12 restrict access to page ............................................................................ 73
13 log keluar ................................................................................................. 74
14 borang daftar kategori ............................................................................. 76
15 borang daftar pelajar ............................................................................... 80
16 papar senarai pelajar ............................................................................... 93
17 kemaskini (update) dan hapus (delete) .................................................... 101
18 carian, laporan dan fungsi cetak ............................................................. 121
19 import fail ................................................................................................. 140
20 mengubah saiz tulisan .............................................................................. 144
21 capaian sistem ......................................................................................... 146

01 XAMPP

1. Pastikan perisian XAMPP telah dipasang pada komputer. Untuk modul ini,
versi xampp yang digunakan ialah xampp 5.6.36.

2. Start apache dan juga mysql pada xampp control panel.

3. Sebelum mula membangunkan sistem maklumat, pastikan folder untuk
menyimpan semua jenis fail dibuat pada folder HTDOCS.

4. Oleh itu, masuk ke folder xampp yang terletak di C: (secara default jika tidak
di ubah), dan masuk ke folder htdocs.

5. Buat satu folder baru dalam htdocs dan namakan folder anda. Contoh folder
bagi modul ini ialah sistempengurusan.

[Date]

02 MEMBUAT PANGKALAN DATA

1. Untuk modul ini, kita akan mengimport fail sql ke phpmyadmin untuk
mencipta pengkalan data.

2. Kita akan mencipta satu pangkalan data diberi nama sistempengurusan.
3. Oleh kerana sistem yang akan dibangunkan adalah mengenai pengurusan

rumah sukan hijau, maka kita akan mencipta 3 jadual (table) iaitu jadual
pelajar, kategori, dan admin.
4. Medan (field) yang akan dicipta seperti berikut:

pelajar

Medan (field) Kunci Jenis Null Lain-lain

nokadpengenalan Kunci Primer varchar (12) No -

nama - varchar (50) No -

jantina - varchar (1) No -

tingkatan - varchar (30) No -

idkategori Kunci Asing int (11) No -

kategori Kunci Jenis Null Lain-lain
Medan (field)
idkategori Kunci Primer int (11) No -
kategori
- varchar (30) No -

admin Kunci Jenis Null Lain-lain
Medan (field) Kunci Primer int (11) No
idadmin varchar (30) No AUTO_INCREMENT
nama - varchar (12) No
nokpadmin - varchar (15) No -
katalaluan - -
-

5. Buka perisian notepad untuk membuat penyataan SQL mencipta pangkalan
data dan jadual.

6. Penyataan SQL untuk mencipta pangkalan data dan juga jadual seperti
berikut:

[Date]

7. Save as sebagai sistempengurusan.sql dan simpan pada folder
sistempengurusan di htdocs.

[Date]

8. Seterusnya, kita akan import file sql ini ke phpmyadmin. Oleh itu, buka
browser pada komputer anda (contoh : google chrome @ firefox).

9. Taipkan url localhost/phpmyadmin untuk masuk ke phpmyadmin.

10. Klik tab import.

11. Klik choose file dan pilih fail sistempengurusan.sql yang disimpan di folder
sistempengurusan.

12. Apabila fail sistempengurusan.sql sudah dipilih, nama fail akan terpapar di
sebelah butang choose file.

[Date]

13. Skroll ke bawah dan klik butang go.

14. Berjaya diimport.
15. Nama pangkalan data sistempengurusan akan terpapar pada sebelah kiri

menu.

[Date]

03 MEMBUAT SITE DEFINITION

1. Kita akan mula membina sistem menggunakan perisian Dreamweaver. Untuk
modul ini dreamweaver yang digunakan ialah versi Adobe Dreamweaver CS6.

2. Buka perisian dreamweaver.

3. Sebelum mula membina site, kita perlu melakukan site definition terlebih
dahulu.

4. Pada bahagian menu, pilih site dan klik new site.

[Date]

5. Paparan untuk Site Setup for Unnamed Site akan terlihat.

6. Masukkan nama site pada Site Name, kita namakan sebagai
sistempengurusan.

7. Kemudian pilih folder sistempengurusan yang sudah kita buat di htdocs
sebagai Local Site Folder.

[Date]

8. Local Site Folder sudah dipilih.

[Date]

9. Klik pada tab Servers dan klik pada ikon +.
10. Paparan seperti di bawah akan kelihatan.

[Date]

11. Namakan Server Name sebagai localhost. Kemudian pilih Local/Network pada
Connect using.

12. Klik ikon folder pada bahagian Server Folder dan pilih folder
sistempengurusan.

[Date]

13. Selesai pemilihan Server Folder, namakan Web URL sebagai
http://localhost/sistempengurusan, dan klik Save.

14. Tick pada bahagian Testing.

[Date]

15. Pada bahagian Advanced Settings, pilih Local Info. Kita akan membuat setting
pada Default Images folder, folder ini akan menyimpan semua fail imej yang
akan digunakan ketika membina sistem kelak.
Klik ikon folder pada bahagian Default Images folder untuk memilih/membuat
folder imej.

16. Kita akan membuat folder untuk menyimpan fail imej di dalam folder
sistempengurusan.

[Date]

Namakan folder sebagai img.
Klik Open dan Select.

[Date]

17. Klik pada butang Save.

18. Setelah selesai membuat Site Definition, folder site kita boleh dilihat di bawah
sebelah bahagian kanan pada tab Files.

[Date]

04 MENGHASILKAN LAYOUT

1. Kita akan menghasilkan layout untuk sistem, layout ini akan digunakan
sepanjang kita membangunkan sistem.

2. Pada menu, klik File dan klik New.

3. Pilih Blank Page. Pada Page Type pilih PHP. Pada Layout pilih 2 column fixed,
left sidebar, header and footer. Pada Layout CSS pilih Create New File, dan
klik Create.

[Date]

4. Namakan fail css sebagai style.css. Klik Save.

5. Layout seperti gambar di bawah akan kelihatan. Pastikan tab Design dipilih
untuk melihat seperti paparan di bawah.

[Date]

6. Save as layout sebagai home.php.

7. Namakan sistem kita pada bahagian Title.
Sistem Pengurusan Maklumat Rumah Sukan

8. Kita akan mengubahsuai isi kandungan pada layout sedia ada. Bermula
dengan tajuk besar. Select perkataan Instructions dan gantikan dengan
Rumah Sukan Hijau (apa-apa yang sesuai).

[Date]

9. Kemudian, select pula perkataan bermula dengan ‘Be aware...’ sehingga ke
bawah, perkataan berakhir dengan ‘...from the column’.

[Date]

10. Gantikan dengan ‘Sistem Pengurusan Maklumat Rumah Sukan’ atau apa-apa
yang bersesuaian.

11. Sekarang kita akan ubahsuai pada bahagian sidebar. Select keseluruhan
perkataan pada sidebar dan gantikan dengan ‘Selamat Datang!’.

12. Selesai bahagian sidebar, kita ubahsuai pula pada bahagian footer. Select
keseluruhan perkataan pada footer dan gantikan dengan nama sekolah atau
nama sistem (mana-mana yang sesuai).

[Date]

13. Jangan lupa untuk Save fail setiap kali diubahsuai.

05 HEADER

1. Pada bahagian ini kita akan mengubahsuai bahagian header dan membuat
banner untuk diletakkan pada header.

2. Klik pada kotak Insert_logo, gantikan saiz logo (boleh dilihat pada Properties
bahagian bawah).

3. Gantikan W : 960px dan H : 130px. Saiz Insert_logo sudah berubah.

[Date]

4. Sekarang, kita akan membuat banner untuk dimasukkan ke header. Buka
Microsoft Powerpoint.

5. Pilih themes yang bersesuaian. Klik Create.

6. Klik pada tab Design, kemudian pada Slide Size pilih Custom Slide Size.

[Date]

7. Pilih Custom pada Slides sized for.

8. Masukkan nilai Width dan juga Height, kemudian pada bahagian Orientation
pilih Landscape pada Slides. Klik OK.

[Date]

9. Pilih Ensure Fit.

10. Edit banner mengikut kreativiti dan kesesuaian anda.
11. Save kan banner header yang sudah siap. Klik File dan pilih Save As.

[Date]

12. Save sebagai header pada folder img di sistempengurusan. Pastikan format
file dipilih sebagai JPEG. Klik Save.

13. Pilih Just This One.

14. Kembali ke perisian dreamweaver.
15. Klik kotak Insert_logo.
16. Lihat pada bahagian Properties. Klik ikon folder pada bahagian Src.

[Date]

17. Pilih folder img, klik OK. Kemudian pilih header dan klik OK.
18. Gambar untuk header berjaya dimasukkan.

[Date]

06 CSS

1. Sekarang kita akan mengubahsuai style atau warna pada layout kita mengikut
kesesuaian sistem dengan mengubah CSS.

2. Fail css boleh dilihat pada style.css.
3. Properties CSS boleh dilihat di sebelah kanan pada tab CSS Styles.

4. Kita akan mengubahsuai bahagian body terlebih dahulu. Pada tab CSS Styles,
klik All dan double-click (klik dua kali) pada body.

5. Tukarkan Background-color pada Background.

[Date]

6. Pilih Type dan ubah Font-family, Font-size, Line-height dan Color mengikut
kesesuaian anda.

7. Seterusnya pilih Box dan ubah bahagian Margin -> Top: 10. Klik OK.

[Date]

8. Perbezaan pada bahagian Box sebelum dan selepas diubahsuai.

9. Pergi ke tab CSS Styles semula, kemudian skroll untuk .container. Double-click
.container.

[Date]

10. Pilih Background dan tukarkan Background-color kepada warna Putih. Klik
OK.

11. Pergi semula ke CSS Styles dan skroll untuk .content. Double-click .content.
12. Pilih Background dan ubah Background-color ke warna Putih. Klik OK.

[Date]

13. Untuk mengubah warna bahagian sidebar, klik sidebar (yang mempunyai
Selamat Datang!). Perhatikan di bahagian bawah sekali tertulis <div.sidebar1>.

14. Pada bahagian CSS Styles, skroll untuk .sidebar1. Double-click .sidebar1.

15. Pilih Background dan pada bahagian Background-color, pilih warna yang
bersesuaian.

[Date]

16. Pilih Type, disini kita boleh mengubah jenis font dan warna font mengikut
kesesuaian. Klik OK.

17. Sekarang kita akan mengubahsuai bahagian footer. Klik pada footer yang
mengandungi nama sekolah atau nama sistem. Lihat di bahagian bawah
tertulis <div.footer>.

[Date]

18. Pergi ke tab CSS Styles, dan skroll untuk .footer. Double-click .footer.

19. Pilih Type dan ubah Font-family, Font-size dan Color mengikut kesesuaian
sistem.

[Date]

20.Pilih Background dan ubah warna Background mengikut kesesuaian sistem.
21. Pilih Block dan ubah Text-align kepada center. Klik OK.

[Date]

22. Sekarang kita akan mengubahsuai bahagian menu navigation.
23. Pergi ke tab CSS Styles dan skroll untuk ul.nav a. Double-click ul.nav a.
24. Pilih Background dan ubah Background-color mengikut kesesuaian.

[Date]

25. Pilih Type dan ubah Font-family, Font-size, dan Color ikut kesesuaian. Klik OK.
26. Jangan lupa untuk Save. Jika fail CSS diubahsuai, kita perlu memilih Save All.

[Date]

07 FAIL PHP BAGI HEADER, FOOTER DAN MENU

1. Kita akan memisahkan fail header, footer dan menu menjadi satu fail php yang
berasingan.

2. Pertama sekali, klik pada header.

3. Kemudian, klik pada tab Code.

4. Kod seperti di bawah akan kelihatan.

5. Pergi File dan pilih New...

6. Pilih Blank Page, PHP, <none>, dan klik Create.

[Date]

7. Pastikan berada pada tab Code. Select semua dan delete.

8. Pergi semula ke fail home.php dan pilih tab Code.
9. Select kod pada baris 12 dan 13. Kod untuk header.
10. Copy and Cut (Ctrl+X).
11. Paste (Ctrl+V) di fail baru tadi.

[Date]

12. Pergi ke File pilih Save As...
13. Save sebagai header.php. Klik Save.

14. Pergi ke fail home.php semula, kemudian pada tab Insert, klik Forms.

[Date]

15. Pilih PHP.

16. Skroll dan pilih Include.

17. Pada bahagian kod akan kelihatan php include.

18. Taipkan nama fail header iaitu header.php di dalam kurungan ( ). Cara untuk
menulis kod memanggil fail header ialah ‘header.php’.

19. Kita akan teruskan dengan memisahkan dan membuat fail php baru bagi
sidebar.

20.Select tab Design terlebih dahulu.

[Date]

21. Pada bahagian menu navigation, gantikan Link one dan seterusnya ke
halaman-halaman yang berkaitan. Kita juga boleh mengubahsuai kemudian
jika terdapat penambahan atau kesalahan.

22. Pilih tab Code.

23. Select baris 13 hingga 21, baris untuk sidebar1. Copy and Cut (Ctrl+X).

24. Buat fail php baru, boleh rujuk langkah 5 hingga 7. Paste (Ctrl+V) kod
sidebar1.

[Date]

25. File → Save As... Save fail sebagai menu.php.

26. Kembali semula ke fail home.php.
27. Kita akan memanggil semula fail menu.php. lakukan seperti langkah 14 hingga

16. Kemudian masukkan nama fail ‘menu.php’ di dalam kurungan ( ). Pastikan
kedudukan dibawah header.php.

28. Akhir sekali, kita akan membuat fail php baru bagi footer. Select baris 18
hingga 20 untuk kod footer. Copy and Cut (Ctrl+X).

[Date]

29. Buat fail php baru, boleh rujuk langkah 5 hingga 7. Paste (Ctrl+V) kod footer. [Date]

30. File → Save As... Save fail sebagai footer.php.

31. Kembali semula ke fail home.php (rujuk langkah 26) dan kita akan memanggil
semula fail footer.php. Lakukan seperti langkah 14 hingga 16 dan masukkan
nama fail di dalam kurungan ( ), ‘footer.php’.

32. Memisahkan header, sidebar dan footer ke fail php baru adalah untuk
memudahkan kita jika berlakunya perubahan terhadap fail-fail berikut. Jangan
lupa Save fail home.php.

08 MENU NAVIGATION

1. Buka fail menu.php. Pilih tab Code.

2. Masukkan nama fail mengikut tajuk pada <a href=”#”>. Jangan lupa untuk
masukkan nama fail sekali dengan format fail iaitu php. Boleh buat
penambahan dengan hanya Copy dan Paste.

3. Save fail menu.php.

09 SAMBUNGAN KE PANGKALAN DATA

1. Kita akan membuat sambungan ke pangkalan data sistempengurusan yang
telah kita bina di awal modul.

2. Untuk membuat penyambungan ke pangkalan data, pergi ke tab Databases
yang boleh didapati di sebelah kanan, klik pada simbol + dan pilih MySQL
Connection.

3. Masukkan...
Connection name: connect
MySQL server: localhost
User name: root
Password: -biarkan kosong-
Dan pada bahagian Database, klik pada Select...

[Date]

4. Pilih pangkalan data sistempengurusan dan klik OK.
5. Klik OK.

[Date]

6. Pangkalan data sudah berjaya disambung.

10 LOG MASUK (INDEX.PHP)

1. Kita akan membuat borang log masuk. Buka fail home.php, Save as sebagai
index.php.

[Date]

2. Pastikan tab Design dipilih.
3. Klik pada menu navigation dan tekan Delete.

4. Select semua perkataan dan tekan Delete. Ruang content akan menjadi
kosong. Klik pada container di sebelah header iaitu kotak di luar yang
berwarna kelabu.

[Date]