Lap Or An
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Lap Or An as PDF for free.
More details
- Words: 4,907
- Pages: 68
BAB 2: RINGKASAN AKTIVITI LATIHAN INDUSTRI
2.1 Pengenalan Berikut merupakan jadual bagi ringkasan daripada aktiviti pelatih sepanjang menjalani latihan industri. MINGGU 1
•
(14 Julai – 18 Julai)
AKTIVITI Pelatih dan 4 orang pelatih lain dari Politeknik yang sama melapor diri kepada En. Thomas selaku pengganti En. Effendy yang kebetulan sedang bercuti.
•
Diberi ‘punch card’ setiap seorang.
•
Diperkenalkan kepada penyelia, En. Ag. Azihar.
•
Tugasan – membuat halaman log masuk menggunakan bahasa PHP.
2
•
Membantu di bahagian ‘helpdesk’ – pemasangan
•
perisian ‘Microsoft Office 2003’ dan SPSS. Pemasangan perisian SPSS dan ‘Microsoft Visual
(21 Julai – 25 Julai)
Studio 2005’. •
Menyediakan kad nama untuk Majlis Konvokesyen UMS.
•
Tugasan - Membuat ‘Favicon’ (.ico) Logo UMS.
3
•
(28 Julai – 1 Ogos)
Tugasan – membuat Sistem Peminjaman Peralatan dari UMTP.
•
Tugasan
digantikan
dengan
Sistem
Semakan
Penggunaan Telefon. •
Pemasangan perisian SPSS.
•
Susun kad ‘Touch n Go’ untuk Majlis Konvokesyen UMS.
•
Membuat pangkalan data MySQL menggunakan perisian ‘Command Prompt’.
4
•
(4 Ogos – 8 Ogos) 5
UMS. • •
(11 Ogos – 15 Ogos)
Susun kad ‘Touch n Go’ untuk Majlis Konvokesyen Mengkaji PHP dan MySQL melalui internet. Pemasangan perisian SPSS dan ‘Microsoft Visual Studio 2005’.
•
Menyediakan kad nama untuk Majlis Konvokesyen UMS.
•
Mengkaji PHP dan MySQL melalui internet.
6
• •
Mengira kad Konvokesyen UMS. Mengkaji PHP dan MySQL melalui internet.
(18 Ogos – 22
•
Memberi kad ‘Touch n Go’ kepada bekas pelajar di
Ogos) 7
•
Majlis Konvokesyen UMS. Kemaskini perisian ‘Avira Antivir’ secara manual.
(25 Ogos – 29
•
Pemasangan perisian ‘Code Blocks’ dan ‘K-Lite
Ogos)
8
Codec Pack’. •
27 Ogos – Cuti sakit.
• •
Penyelia ditukarkan kepada En. Thomas George. 1 September – Cuti Umum (Hari Kebangsaan dan Hari
(1 September – 5 September)
Pertama Puasa / 1 Ramadhan). •
Pemasangan perisian ‘Google Chrome’, ‘IZArc’ dan XAMPP.
9 (8 September – 12
• •
Tutorial PHP. Pemasangan perisian ‘Infra Recorder’, ‘Safari’ dan SPSS.
September)
•
En. Thomas menerangkan tentang projek yang akan diberikan.
•
En. Thomas meminjamkan 2 buah buku tentang
10
•
perisian ‘Dreamweaver’ dan PHP. Memuat turun e-buku.
(15 September – 19
•
16 September – Cuti Umum (Hari Penubuhan
September)
Malaysia dan Hari Jadi Tuan Yang Terutama Negeri Sabah). •
Membuat pangkalan data MySQL menggunakan ‘phpMyAdmin’.
11
• •
Tutorial PHP dan MySQL. 22 September – Cuti Kecemasan.
(22 September – 26
•
Membuat fail PHP dan memaparkannya dengan
September)
12
bantuan perisian XAMPP. •
Pemasangan perisian ‘Flock’.
• •
26 September – Cuti Sakit. 29 September – 3 Oktober - Cuti Hari Raya Aidilfitri.
•
Pemasangan perisian ‘Maxthon Browser’ dan ‘K-
(29 September – 3 Oktober) 13 (6 Oktober – 10
Meleon’.
Oktober)
•
Tutorial CSS.
14
• •
Memuat turun tutorial dan fail ‘fonts’. Mencari maklumat untuk pengisian dalam Buku
(13 Oktober – 17 Oktober)
Laporan Latihan Industri. •
Diberi
tutorial
PHP
menggunakan
perisian
‘Macromedia Dreamweaver’ oleh En. Thomas. •
Kemaskini perisian ‘Antivirus AVG’ secara manual.
15
•
Kemaskini perisian ‘Antivirus Avast’ secara manual.
(20 Oktober – 24
•
Bina ‘site’ PHP dengan perisian ‘Macromedia
Oktober)
Dreamweaver’. •
Mempelajari jenis data (data type) dalam MySQL.
16
• •
Mengambil tutorial tentang PHP dari internet. 27 Oktober – Cuti ( Hari Deepavali).
(27 Oktober – 31
•
Tutorial PHP: Tambah, ubah (edit) dan hapus (delete)
Oktober)
17
data. •
Mengumpul maklumat tentang UMTP untuk laporan
•
latihan industri. Diberi projek: Portal Kelab Kakitangan UMTP
(3 November – 7 November) 18
(menggunakan bahasa pengaturcaraan PHP). • •
(10 November – 14 November) 19
Antara •
(17 November – 21
yang
diubah:
‘index.php’,
bahagian
yang
diubah:
‘ahli.php’,
‘kemaskini.php’, dan ‘carian.php’. •
Menonton
•
‘Dreamweaver’. Memasukkan data pelajar menggunakan ‘Microsoft
(24 November – 28 November)
bahagian
‘login.php’, ‘berita.php’, dan ‘galeri.php’. Mengubah (edit) templat untuk kesesuaian portal. Antara
November)
20
Mencari templat untuk projek portal. Mengubah (edit) templat untuk kesesuaian portal.
video
tutorial
untuk
PHP
&
Excel’. •
Tutorial PHP dan perisian ‘Dreamweaver’.
•
Tutorial
Galeri
Foto
PHP
Dalam
perisian
‘Dreamweaver’. •
Membuat pangkalan data untuk ‘Photo Gallery’ (Portal).
•
Membina pangkalan data untuk maklumat log masuk portal.
21
•
Membina pangkalan data untuk berita portal.
(1 Disember – 5
•
Memasukkan maklumat admin untuk kegunaan login
Disember)
melalui ‘phpMyAdmin’. •
Membuat antaramuka ‘login.php’.
•
Menghadkan capaian ke halaman ‘admin.php’.
•
Membuat pautan ‘Log Out’.
22
•
8 Disember – Cuti (Hari Raya Aidiladha).
(8 Disember – 12
•
Membuat antaramuka untuk admin memasukkan berita
Disember)
(beritabaru.php). •
10 Disember - Cuti kecemasan.
•
Membuat antaramuka ‘berita.php’.
•
Meletakkan tajuk-tajuk berita terkini di halaman utama (index.php).
BAB 3: PEMASANGAN PERISIAN XAMPP
3.1 Pengenalan Sebelum pelatih memulakan projek sistem yang menggunakan bahasa skrip PHP dan MySQL, penyelia memberitahu bahawa untuk menguji sistem tersebut, pelatih memerlukan pelayan web yang boleh dipasang dalam komputer tanpa perlu berada di talian internet. Terdapat dua pilihan pelayan web yang boleh dipasang di komputer yang telah dicadangkan oleh penyelia, iaitu antara ‘WampServer’ atau XAMPP. Pelatih telah memilih XAMPP sebagai perisian pelayan web. Nama XAMPP merupakan akronim bagi: •
X (cross-platform).
•
‘Apache’.
•
MySQL.
•
PHP.
•
‘Perl’.
Perisian XAMPP merupakan sebuah paket installasi untuk PHP, ‘Perl’, ‘Apache’ dan MySQL. Paket installasi tersebut merupakan pakej pelayan web.
Perisian XAMPP dicipta untuk kegunaan pengujian program berasaskan web (web based programs) contohnya untuk kegunaan di syarikat-syarikat kecil dalam rangkaian dalaman (internal network). Perisian XAMPP merupakan perisian percuma
dan
sumber
terbuka
dan
dapat
dimuat
turun
di
alamat
“http://www.apachefriends.org/en/index.html”.
Rajah 3.1.1
Halaman web rasmi untuk perisian XAMPP
3.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1. Komputer – Pelatih menggunakan komputer riba (laptop). 2. Sambungan Internet – Untuk memuat turun perisian XAMPP dari laman web. 3. ‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih bagi laporan ini. 4. ‘Internet Download Manager’ – Perisian pengurusan muat turun.
3.3 Cara Pengendalian Peralatan Semasa Latihan 16
Pastikan sambungan internet adalah bagus sepanjang proses muat turun perisian XAMPP berjalan, supaya proses tersebut tidak terganggu.
3.4 Proses Kerja Yang Dilakukan 1. Pertama sekali, buka perisian ‘Mozilla Firefox’. 2. Kemudian, masukkan “http://www.apachefriends.org/en/xampp.html”, iaitu laman web rasmi untuk XAMPP di ruangan pautan seperti Rajah di bawah (Rajah 3.4.1). Tekan butang “Enter” untuk pergi ke pautan tersebut.
Rajah 3.4.1: Laman web rasmi untuk perisian XAMPP 3. Setelah laman web tersebut terpapar, skrol ke bawah sehingga terdapat pautan bernama “XAMPP for Windows” (rujuk Rajah 3.4.2). Klik pautan tersebut untuk pergi ke halaman untuk memuat turun perisian XAMPP bagi sistem pengoperasian ‘Windows’.
17
Rajah 3.4.2: Pautan untuk perisian XAMPP bagi sistem pengoperasian ‘Windows’ 4. Halaman web seperti di Rajah 3.4.3 akan terpapar. Dalam halaman tersebut, terdapat maklumat-maklumat mengenai perisian XAMPP terkini serta pautan untuk memuat turun perisian XAMPP bagi sistem pengoperasian ‘Windows’.
Rajah 3.4.3: Halaman web perisian XAMPP bagi sistem pengoperasian ‘Windows’
18
5. Skrol ke bawah sehingga ada pautan bernama “Installer” (rujuk Rajah 3.4.4). Untuk laporan ini, pelatih memuat turun perisian XAMPP versi ‘installer’. Selain versi ‘installer’, perisian XAMPP juga terdapat dalam dua versi lain, iaitu versi “ZIP” dan “EXE”. Klik pautan bernama “Installer” tersebut.
Rajah 3.4.4: Pautan bernama “Installer” 6. Halaman web muat turun untuk perisian XAMPP akan terpapar. Seterusnya, perisian pengurusan muat turun, iaitu ‘Internet Download Manager’ juga muncul.
Klik pada butang “Start Download” untuk
memulakan proses muat turun bagi perisian XAMPP (rujuk Rajah 3.4.5).
19
Rajah 3.4.5: Halaman web muat turun perisian XAMPP dan lokasi butang “Start Download” 7. Tunggu sehingga proses muat turun perisian XAMPP itu selesai. Setelah itu, pergi ke ‘folder’ yang menempatkan fail ‘installer’ perisian tersebut (rujuk Rajah 3.4.6). Klik dua kali untuk memulakan proses pemasangan perisian XAMPP.
Rajah 3.4.6: ‘Folder’ yang menempatkan ‘installer’ perisian XAMPP
20
8. Tetingkap bernama “Installer Language” akan terpapar. Pilih bahasa Inggeris (‘English’ seperti dalam senarai pilihan) dan klik butang “OK” (rujuk Rajah 3.4.7).
Rajah 3.4.7: Tetingkap “Installer Language” 9. Tetingkap “XAMPP 1.6.7 win32 (Basic Package)” pula akan muncul. Klik butang “Next >” untuk teruskan proses pemasangan perisian XAMPP (rujuk Rajah 3.4.8).
21
Rajah 3.4.8: Tetingkap “XAMPP 1.6.7 win32 (Basic Package)” 10. Seterusnya, pilih lokasi pemasangan, iaitu lokasi fail-fail untuk perisian XAMPP akan ditempatkan. Lokasi pada tetapan asal ialah “c:\xampp\”. Setelah lokasi pemasangan ditetapkan, klik butang “Next >” (rujuk Rajah 3.4.9).
Rajah 3.4.9: Pilihan lokasi pemasangan bagi perisian XAMPP
22
11. Paparan seperti Rajah 3.4.10 akan muncul.
Paparan tersebut
menunjukkan pilihan pemasangan untuk perisian XAMPP. Tandakan pada pilihan “Create a XAMPP desktop icon” sekiranya ingin meletakkan ikon desktop perisian XAMPP.
Selain itu, untuk
meletakkan ‘folder’ “Apache Friends XAMPP” di menu ‘Start’, tandakan pada pilihan “Create an Apache Friends XAMPP folder in the start menu”. Terdapat juga pilihan lain seperti membuat pemasangan ‘Apache’, MySQL, atau ‘Filezilla’ sebagai servis dalam perisian XAMPP.
Selepas itu, klik butang “Next >” untuk ke langkah
seterusnya.
Rajah 3.4.10: Pilihan pemasangan untuk perisian XAMPP 12. Paparan seperti Rajah 3.4.11 akan muncul.
Paparan tersebut
menunjukkan pemasangan perisian XAMPP sudah bermula. Tunggu sehingga proses pemasangan tersebut selesai.
23
Rajah 3.4.11: Perjalanan pemasangan perisian XAMPP 13. Paparan seperti Rajah 3.4.12 akan terpapar setelah proses pemasangan perisian XAMPP selesai. Klik pada butang “Finish” untuk tamatkan proses tersebut.
Rajah 3.4.12: Pemasangan tamat 14. Satu tetingkap akan muncul (rujuk Rajah 3.4.13). Tetingkap tersebut mengatakan “Congratulations! The installation was successful! Start 24
the XAMPP Control Panel now?”. Untuk membuka panel kawalan XAMPP, klik pada butang “Yes”.
Rajah 3.4.13: Tetingkap yang muncul setelah pemasangan tamat 15. Tetingkap panel kawalan perisian XAMPP akan muncul seperti di Rajah 3.4.14.
Rajah 3.4.14: Tetingkap panel kawalan perisian XAMPP
25
16. Untuk mencuba sama ada server pelayan XAMPP berfungsi atau tidak, klik pada butang “Start” pada pilihan ‘Apache’ (rujuk Rajah 3.4.15).
Rajah 3.4.15: Kedudukan butang “Start” pada pilihan ‘Apache’ 17. Sekiranya butang tersebut menunjukkan perkataan “Stop” seperti di Rajah 3.4.16, itu tandanya modul ‘Apache’ telah diaktifkan.
Rajah 3.4.16: Modul ‘Apache’ telah diaktifkan
26
18. Setelah itu, aktifkan modul MySQL dengan klik butang “Start”. Rajah 3.4.17 menunjukkan kedua-dua modul ‘Apache’ dan MySQL telah aktif.
Rajah 3.4.17: Modul ‘Apache’ dan MySQL telah aktif 19. Buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 3.4.18).
27
Rajah 3.4.18: Buka perisian ‘Mozilla Firefox’ 20. Kemudian, masukkan pautan “http://localhost” pada ruangan pautan seperti Rajah di bawah (Rajah 3.4.19). Tekan butang “Enter” untuk pergi ke pautan tersebut.
Rajah 3.4.19: Masukkan “http://localhost” 21. Sekiranya pemasangan perisian XAMPP itu tadi berjaya dan berfungsi, paparan seperti Rajah 3.4.20 akan muncul. 28
Rajah 3.4.20: Paparan yang muncul sekiranya pemasangan berjaya dan berfungsi 22. Untuk meletakkan kata laluan pada direktori MySQL dan XAMPP, klik pada pilihan “Security” di bar tepi (rujuk Rajah 3.4.21).
Rajah 3.4.21: Kedudukan pilihan “Security” 23. Paparan seperti di Rajah 3.4.22 akan muncul.
Klik pada pautan
“http://localhost/security/xamppsecurity.php” (rujuk Rajah 3.4.22).
29
Rajah 3.4.22: Kedudukan pautan “http://localhost/security/xamppsecurity.php” 24. Masukkan kata laluan pada ruangan teks “New password”. Masukkan sekali lagi kata laluan yang sama pada ruangan teks “Repeat the new password”. Setelah itu, klik butang “Password changing” (rujuk Rajah 3.4.23).
Rajah 3.4.23: Meletakkan kata laluan pada direktori MySQL dan XAMPP
30
25. Untuk membuka sistem ‘phpMyAdmin’, iaitu sistem pangkalan data MySQL, klik pada pilihan “phpMyAdmin” di bar tepi (rujuk Rajah 3.4.24).
Rajah 3.4.24: Kedudukan pilihan “phpMyAdmin” 26. Rajah 3.4.25 menunjukkan antaramuka halaman ‘phpMyAdmin’.
Rajah 3.4.25: Halaman ‘phpMyAdmin’
31
3.5 Komen Dan Cadangan Perisian XAMPP ialah perisian yang cukup besar dan berat, kerana ianya menggunakan ruangan storan sebanyak 595MB. Perisian XAMPP menggunakan lebih besar ruangan storan berbanding perisian WAMP. Sebagai cadangan, selain perisian XAMPP, perisian pakej WAMP (‘Windows’, ‘Apache’, MySQL, PHP/‘Perl’/‘Python’) sering diguna ialah: •
‘WampServer’ (sebelum ini dikenali sebagai WAMP5) yang boleh diperolehi di pautan “http://www.wampserver.com/en/”.
•
EasyPHP yang lebih ringan.
3.6 Kesimpulan Sebagai kesimpulannya, XAMPP merupakan perisian pelayan web local (local web server) menyatukan server ‘Apache’, MySQL, PHP, dan ‘Perl’ dalam satu perisian. Perisian XAMPP membolehkan pengguna untuk mengakses atau menguji fail PHP tanpa perlu berada di talian (online).
32
33
BAB 4: HALAMAN LOG MASUK DENGAN PHP DAN MYSQL
4.1 Pengenalan Semasa berada di bawah seliaan Encik Azihar, pelatih dan Alislora telah diberikan satu tugasan, iaitu membuat halaman log masuk (login page) menggunakan bahasa skrip PHP.
Oleh kerana pelatih dan Alislora tidak mempunyai asas
pengetahuan dalam PHP, En. Azihar menyuruh pelatih dan Alislora untuk mencari cara untuk membuat tugasan tesebut dalam internet dan menggunakan cara yang diperolehi dari internet tersebut untuk membuat projek ini.
4.1.1
PHP PHP ialah bahasa skrip yang direka khas untuk digunakan bersama-
sama dengan penanda HTML untuk membina laman web. Laman web yang mengandungi skrip PHP diproses oleh enjin skrip PHP dan kod-kod tersebut digantikan dengan apa yang dapat dilihat hasil daripada skrip yang ditulis oleh pengaturcara.
16
4.1.2
MySQL MySQL ialah sebuah sistem pengurusan pangkalan data berkeupayaan tinggi yang berkaitan dengan laman web serta pembangunan dan penggunaan aplikasi perniagaan.
MySQL memaksimumkan kelajuan, kestabilan dan
kepenggunaan, di samping mengurangkan kos pangkalan data sehingga 90 peratus. MySQL terdapat dalam kesemua distribusi Linux di samping sistem pengoperasian UNIX, ‘Mac OS X’ dan ‘Microsoft Windows’.
4.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1. Komputer – Pelatih menggunakan komputer riba (laptop). 2. Perisian XAMPP – Untuk mengaktifkan pelayan web ‘Apache’ dan MySQL bagi penggunaan bahasa pengaturcaraan PHP dan MySQL. 3. Perisian ‘Adobe Dreamweaver CS3’ – Untuk mengisi kod-kod PHP. 4. ‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih bagi laporan ini.
4.3 Cara Pengendalian Peralatan Semasa Latihan Pastikan sepanjang fail-fail PHP tersebut dicuba di ‘web browser’, pelayan web ‘Apache’ dan MySQL adalah aktif, kerana fail PHP hanya boleh dipaparkan di ‘web browser’ sekiranya kedua-duanya diaktifkan.
4.4 Proses Kerja Yang Dilakukan
16
1. Pertama sekali, aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP (rujuk Rajah 4.4.1).
Rajah 4.4.1: Aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP 2. Buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 4.4.2).
17
Rajah 4.4.2: Buka perisian ‘Mozilla Firefox’ 3. Apabila perisian ‘Mozilla Firefox’ telah dibuka, masukkan pautan “http://localhost/phpmyadmin” untuk pergi ke program ‘phpMyAdmin’ (rujuk Rajah 4.4.3).
Rajah 4.4.3: Pergi ke program ‘phpMyAdmin’ 4. Rajah 4.4.4 menunjukkan antaramuka ‘phpMyAdmin’.
Buat satu
pangkalan data dan namakannya “loginpage”. Klik butang “Create” (rujuk Rajah 4.4.4).
18
Rajah 4.4.4: Buat satu pangkalan data bernama “loginpage” 5. Klik tab “SQL” seperti di Rajah 4.4.5.
Rajah 4.4.5: Kedudukan tab “SQL” 6. Masukkan kod SQL seperti di Lampiran A ke dalam ruangan teks “Run SQL query/queries on database loginpage” (rujuk Rajah 4.4.6). Kod SQL tersebut akan membuat ‘table’ bernama “members”, membuat 3 ‘field’ bernama “id” yang merupakan kunci utama (primary key), 19
“username”, dan “password”, serta meletakkan data-data ke dalam semua ‘field’ tersebut, iaitu “1” dalam ‘field’ “id”, “john” dalam ‘field’ “username”, dan “1234” dalam ‘field’ “password”.
Rajah 4.4.6: Masukkan kod SQL yang diberikan 7. Paparan seperti di Rajah 4.4.7 akan muncul, menunjukkan kod SQL tersebut berjaya dimasukkan ke dalam pangkalan data “loginpage”.
Rajah 4.4.7: Kod SQL berjaya dimasukkan ke pangkalan data “loginpage”
20
8. Seterusnya, buka perisian ‘Adobe Dreamweaver CS3 dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Developer Tools’ > ‘Adobe Dreamweaver CS3’ (rujuk Rajah 4.4.8).
Rajah 4.4.8: Buka perisian ‘Adobe Dreamweaver CS3’ 9. Apabila perisian ‘Adobe Dreamweaver CS3’ telah dibuka, pada ruangan ‘Create New’, klik pada pilihan “PHP” untuk membuat fail PHP (rujuk Rajah 4.4.9).
21
Rajah 4.4.9: Klik pada pilihan “PHP” 10. Seterusnya, klik pada tab bernama “Code” (rujuk Rajah 4.4.10).
Rajah 4.4.10: Kedudukan tab bernama “Code” 11. Masukkan kod HTML seperti dalam Lampiran B ke dalam ruangan selepas tag seperti yang ditunjukkan di Rajah 4.4.11. Kod HTML tersebut akan menghasilkan 1 jadual yang mengandungi ruangan log masuk dan mempunyai ruangan untuk pengguna memasukkan nama pengguna dan kata laluan. Selain itu, terdapat juga satu butang bernama “Login” untuk pengguna log masuk.
22
Rajah 4.4.11: Kedudukan selepas tag 12. Rajah 4.4.12 menunjukkan kod HTML yang telah dimasukkan ke dalam ruangan selepas tag .
Rajah 4.4.12: Kod HTML telah dimasukkan 13. Klik tab bernama “Design” untuk melihat hasil kod HTML tersebut (rujuk Rajah 4.4.13).
23
Rajah 4.4.13: Kedudukan tab bernama “Design” 14. Rajah 4.4.14 menunjukkan rupa kod HTML tersebut dalam paparan “Design”.
Rajah 4.4.14: Rupa kod HTML tersebut dalam paparan “Design” 15. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.15.
24
Rajah 4.4.15: Simpankan fail tersebut 16. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.16. Pastikan fail tersebut akan disimpan di bahagian “c:\xampp\htdocs\” supaya fail tersebut dapat diakses menggunakan pelayan web local (local web server). Klik butang “Create New Folder” (rujuk Rajah 4.4.16) untuk membuat satu ‘folder’ baru untuk fail yang telah dihasilkan tadi.
Rajah 4.4.16: Kedudukan butang “Create New Folder” 25
17. Namakan ‘folder’ tersebut sebagai “login” dan klik butang “Save” (rujuk Rajah 4.4.17).
Rajah 4.4.17: Namakan ‘folder’ tersebut sebagai “login” 18. Seterusnya merupakan proses simpan fail PHP yang telah dihasilkan tadi. Namakan fail tersebut sebagai “main_login.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.18).
26
Rajah 4.4.18: Proses simpan fail PHP 19. Seterusnya, buat satu fail PHP baru dengan klik pada pilihan menu “File” > “New…” (rujuk Rajah 4.4.19).
Rajah 4.4.19: Buat satu fail PHP baru 20. Tetingkap bernama “New Document” akan terpapar. Klik pada tab “Blank Page”. Pada ruangan “Page Type”, klik pada pilihan bernama “PHP”. Pada ruangan “Layout”, klik pada pilihan bernama “<none>” (rujuk Rajah 4.4.20).
27
Rajah 4.4.20: Proses membuat fail baru 21. Klik pada tab bernama “Code” (rujuk Rajah 4.4.21).
Rajah 4.4.21: Kedudukan tab bernama “Code” 22. Masukkan kod PHP seperti dalam Lampiran C ke dalam ruangan teks seperti di Rajah 4.4.22.
Kod tersebut akan menghubungkan fail
“main_login.php” ke pangkalan data “loginpage”.
Seterusnya,
sekiranya nama pengguna dan kata laluan yang dimasukkan adalah betul, fail bernama “login_success.php” (yang akan dibuat selepas ini) 28
akan terpapar. Sebaliknya, sekiranya nama pengguna dan kata laluan yang dimasukkan adalah salah, ayat “Wrong Username or Password” akan terpapar pada fail “checklogin.php”.
Rajah 4.4.22: Masukkan kod PHP 23. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.23.
Rajah 4.4.23: Simpankan fail tersebut 29
24. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.24. Namakan fail tersebut sebagai “checklogin.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.24).
Rajah 4.4.24: Proses simpan fail PHP 25. Seterusnya, buat satu fail PHP baru dengan klik pada pilihan menu “File” > “New…” (rujuk Rajah 4.4.25).
30
Rajah 4.4.25: Buat satu fail PHP baru 26. Tetingkap bernama “New Document” akan terpapar. Klik pada tab “Blank Page”. Pada ruangan “Page Type”, klik pada pilihan bernama “PHP”. Pada ruangan “Layout”, klik pada pilihan bernama “<none>” (rujuk Rajah 4.4.26).
Rajah 4.4.26: Proses membuat fail baru
31
27. Masukkan kod PHP seperti dalam Lampiran D ke dalam ruangan teks seperti di Rajah 4.4.27.
Fail ini akan dipaparkan sekiranya nama
pengguna dan kata laluan yang dimasukkan di fail “main_login.php” adalah betul.
Rajah 4.4.27: Masukkan kod PHP 28. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.28.
32
Rajah 4.4.28: Simpankan fail tersebut 29. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.29. Namakan fail tersebut sebagai “login_success.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.29).
Rajah 4.4.29: Proses simpan fail PHP 30. Seterusnya, ketiga-tiga fail tersebut akan diuji sama ada berfungsi seperti yang dikehendaki atau tidak.
Pastikan modul ‘Apache’ dan
MySQL pada XAMPP masih aktif. Kemudian, buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 4.4.30).
33
Rajah 4.4.30: Buka perisian ‘Mozilla Firefox’ 31. Apabila perisian ‘Mozilla Firefox’ telah dibuka, masukkan pautan “http://localhost/login/main_login.php”
untuk
mengakses
fail
“main_login.php” (rujuk Rajah 4.4.31).
Rajah 4.4.31: Mengakses fail “main_login.php” 32. Paparan seperti di Rajah 4.4.32 akan terpapar. Untuk menguji sama ada fail tersebut berjaya dihubungkan dengan pangkalan datanya atau tidak, 34
masukkan “john” ke dalam ruangan teks “Username” dan masukkan “1234” ke dalam ruangan teks “Password”. Setelah itu, klik butang “Login”.
Rajah 4.4.32: Masukkan data seperti berikut 33. Sekiranya log masuk tersebut berjaya, fail “login_success.php” akan terpapar dan memaparkan ayat “Login Successful” seperti yang ditunjukkan di Rajah 4.4.33.
35
Rajah 4.4.33: Paparan fail “login_success.php” 34. Seterusnya, uji fail “main_login.php” dengan memasukkan data yang salah. Sebagai contoh, untuk ruangan teks “Username”, masukkan data “john”.
Manakala, untuk ruangan teks “Password”, masukkan data
“1111” (rujuk Rajah 4.4.34). Seterusnya, klik butang “Login”.
Rajah 4.4.34: Masukkan data yang salah
36
35. Paparan seperti pada Rajah 4.4.35 akan terpapar, iaitu fail “checklogin.php” yang memaparkan ayat “Wrong Username or Password”.
Rajah 4.4.35: Paparan fail “checklogin.php” apabila data yang dimasukkan adalah salah
4.5 Komen Dan Cadangan Halaman log masuk yang pelatih hasilkan amat ringkas, walau begitu, ianya tetap berfungsi. Fail “main_login.php” dan fail “login_success.php” boleh diubah dan dicantikkan lagi dengan kod-kod HTML. Untuk laporan ini, pelatih menunjukkan contoh yang ringkas.
37
4.6 Kesimpulan Sebagai kesimpulannya, fail PHP boleh dihubungkan dengan pangkalan data SQL untuk menghasilkan laman web dinamik, sebagai contoh web log masuk, web ‘eCommerce’, dan laman blog
38
BAB 5: LAMAN WEB BIODATA PELAJAR DENGAN PHP DAN MYSQL 5.1 Pengenalan Pada minggu ke 14, penyelia kepada pelatih, iaitu Encik Thomas memberi satu tugasan setelah siap memberi pelatih tutorial tentang penghasilan laman web PHP menggunakan perisian ‘Macromedia/Adobe Dreamweaver’. Tugasan tersebut adalah membuat laman web biodata pelajar dengan menggunakan bahasa skrip PHP dan pangkalan data MySQL. Laman web tersebut mempunyai laman untuk log masuk, laman memasukkan dan mengemaskini data, laman yang memaparkan biodata pelajar, dan laman yang mengandungi senarai pelajar yang telah mendaftar dalam laman web tersebut. Pengguna juga boleh menghapus data yang tidak dikehendaki dari laman web tersebut, dan data yang dihapuskan itu juga akan terhapus di dalam pangkalan data.
5.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1.
Komputer – Pelatih menggunakan komputer riba (laptop).
2.
Perisian XAMPP – Untuk mengaktifkan pelayan web
‘Apache’ dan MySQL bagi penggunaan bahasa pengaturcaraan PHP dan MySQL. 58
3.
Perisian ‘Adobe Dreamweaver CS3’ – Untuk mengisi kod-kod
PHP.
59
4.
‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih.
5.3 Cara Pengendalian Peralatan Semasa Latihan Pastikan sepanjang fail-fail PHP tersebut dicuba di ‘web browser’, pelayan web ‘Apache’ dan MySQL adalah aktif, kerana fail PHP hanya boleh dipaparkan di ‘web browser’ sekiranya kedua-duanya diaktifkan.
5.4 Proses Kerja Yang Dilakukan 36. Pertama sekali, aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP (rujuk Rajah 5.4.1).
Rajah 5.4.1: Aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP 37. Buka perisian ‘Adobe Dreamweaver CS3’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Developer Tools’ > ‘Adobe Dreamweaver CS3’ (rujuk Rajah 5.4.2).
59
Rajah 5.4.2: Buka perisian ‘Adobe Dreamweaver CS3’ 38. Tetingkap perisian ‘Adobe Dreamweaver CS3’ akan terbuka seperti di Rajah 5.4.3. Pada menu “Site”, klik pada pilihan “New Site…” (rujuk Rajah 5.4.3).
Rajah 5.4.3: Kedudukan pilihan “New Site…” 39. Tetingkap bernama “Site Definition for” akan terbuka. Pada ruangan teks “What would you like to name your site?”, masukkan nama projek 60
iaitu “projek Biodata Pelajar”. Pada ruangan teks “What is the HTTP Address (URL) of your site?” pula, masukkan alamat berikut, “http://localhost/bio/” (rujuk Rajah 5.4.4).
Selepas itu, klik butang
“Next >” untuk pergi ke langkah seterusnya.
Rajah 5.4.4: Masukkan data seperti berikut 40. Untuk pertanyaan “Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?”, tandakan pada pilihan “Yes, I want to use server technology.”. Untuk pertanyaan “Which server technology?”, pilih “PHP MySQL” (rujuk Rajah 5.4.5). Selepas itu, klik butang “Next >” untuk ke langkah seterusnya.
61
Rajah 5.4.5: Pilih jawapan seperti berikut 41. Untuk pertanyaan “How do you want to work with your files during development?”, tandakan pada pilihan “Edit and test locally (my testing server is on this computer”. computer
do
you
want
Pada ruangan teks “Where on your to
store
your
files?”,
masukkan
“C:\xampp\htdocs\bio\” (rujuk Rajah 5.4.6). Selepas itu, klik butang “Next >” untuk ke langkah seterusnya.
Rajah 5.4.6: Pilih dan masukkan jawapan seperti berikut 62
42. Pada ruangan teks “What URL would you use to browse to the root of your site?”, masukkan “http://localhost/bio/” (rujuk Rajah 5.4.7). Klik butang “Test URL” untuk menguji pautan tersebut.
Rajah 5.4.7: Masukkan URL berikut dan klik butang “Test URL” 43. Sekiranya URL tersebut dapat diakses, satu tetingkap akan memaparkan “The URL Prefix test was successful.” seperti di Rajah 5.4.8. Klik butang “OK” untuk menutup tetingkap tersebut.
63
Rajah 5.4.8: URL tersebut berjaya diakses 44. Kembali ke tetingkap sebelumnya. Klik butang “Next >” untuk ke langkah seterusnya (rujuk Rajah 5.4.9).
Rajah 5.4.9: Klik butang “Next >” untuk ke langkah seterusnya 45. Untuk pertanyaan “When you are editing a file, do you copy it to another machine? This might be the production web server or a staging server that you share with team members.”, tandakan pada pilihan “No” 64
(rujuk Rajah 5.4.10).
Selepas itu, klik butang “Next >” untuk ke
langkah seterusnya.
Rajah 5.4.10: Pilih “No” 46. Paparan seperti pada Rajah 5.4.11 akan terpapar.
Paparan tersebut
menunjukkan ringkasan daripada apa yang ditetapkan tadi. Klik butang “Done” untuk menamatkan proses ini.
Rajah 5.4.11: Paparan ringkasan tetapan 65
47. Kembali ke perisian ‘Mozilla Firefox’ untuk membuat pangkalan data untuk laman web biodata pelajar.
Pastikan modul ‘Apache’ dan
MySQL di perisian XAMPP telah aktif. Kemudian, di perisian ‘Mozilla Firefox’, pergi ke pautan “http://localhost/phpmyadmin” untuk pergi ke sistem ‘phpMyAdmin’. Selepas itu, pada ruangan teks “Create new database”,
masukkan
“biodata_pelajar”.
nama
pangkalan
data
tersebut
sebagai
Pastikan tiada jarak antara nama pangkalan data
tersebut. Klik butang “Create” untuk meneruskan proses tersebut (rujuk Rajah 5.4.12).
Rajah 5.4.12: Membuat pangkalan data “biodata_pelajar” 48. Buat dua ‘table’ dalam pangkalan data “biodata_pelajar” tersebut. Namakannya sebagai “admin” dan “data” (rujuk Rajah 5.4.13). ‘Table’ “admin” adalah untuk menyimpan maklumat akses admin untuk log masuk ke sistem.
Manakala, ‘table’ “data” pula akan menyimpan
maklumat biodata pelajar yang akan diisi oleh pelajar/pengguna sistem.
66
Rajah 5.4.13: ‘Table’ dalam pangkalan data “biodata_pelajar” 49. Dalam ‘table’ “admin”, buatkan 5 ‘field’ ke dalamnya (rujuk Rajah 5.4.14). Buatkan ‘field’ tersebut mengikut tetapan seperti dalam Jadual 5.4.1 berikut. ‘Field’ ID username password Name AccessLevel
Jenis (Jumlah data) Null Ekstra int (11) Tidak auto_increment varchar (100) Ya varchar (100) Ya varchar (50) Tidak varchar (10) Tidak Jadual 5.4.1: Tetapan ‘field’ untuk ‘table’ “admin
67
Rajah 5.4.14: ‘Field’ dalam ‘table’ “admin” 50. Dalam ‘table’ “data”, buatkan sembilan ‘field’ ke dalamnya (rujuk Rajah 5.4.15). Buatkan ‘field’ tersebut mengikut tetapan seperti dalam Jadual 5.4.2 berikut. ‘Field’ ID Nama NoMatrik NoIC Jantina Bangsa Agama Alamat TimeAdd
Jenis (Jumlah data) Null Ekstra int (11) Tidak auto_increment varchar (200) Ya varchar (15) Ya varchar (12) Ya varchar (9) Ya varchar (20) Ya varchar (20) Ya longtext Ya timestamp Tidak CURRENT_TIMESTAMP Jadual 5.4.2 : Tetapan ‘field’ untuk ‘table’ “data”
68
Rajah 5.4.15: ‘Field’ dalam ‘table’ “data” 51. Kembali ke perisian ‘Adobe Dreamweaver CS3’ untuk membuat fail PHP. Pada tetingkap “Files”, klik kiri pada ruangan putih di tetingkap tersebut.
Kemudian, klik pada pilihan “New File” seperti yang
ditunjukkan pada Rajah 5.4.16.
Rajah 5.4.16: Kedudukan pilihan “New File”
69
52. Namakan fail tersebut sebagai “login.php” seperti yang ditunjukkan di Rajah 5.4.17.
Rajah 5.4.17: Namakan fail tersebut sebagai “login.php” 53. Hasilkan satu antaramuka log masuk yang mempunyai ruangan teks untuk pengguna memasukkan nama pengguna dan kata laluan. Sertakan juga dua butang, iaitu butang untuk log masuk dan satu lagi untuk batal (rujuk Rajah 5.4.18). Rujuk Lampiran E untuk kod aturcara bagi fail tersebut.
70
Rajah 5.4.18: Antaramuka log masuk 54. Sekiranya maklumat log masuk tersebut salah, pengguna akan dipaparkan dengan fail “loginfailed.php” (rujuk Rajah 5.4.19). Rujuk Lampiran F untuk kod aturcara fail “loginfailed.php”.
Rajah 5.4.19: Antaramuka “loginfailed.php” 55. Hasilkan satu antaramuka untuk pengguna memasukkan biodata dan namakannya sebagai “index.php”. 71
Antaramuka tersebut mempunyai
ruang teks untuk pengguna memasukkan nama, nombor matrik, nombor kad pengenalan, jantina, bangsa, agama dan alamat seperti yang ditunjukkan di Rajah 5.4.20. Masukkan dua butang untuk “Hantar” dan “Padam”. Rujuk Lampiran G untuk kod aturcara bagi fail “index.php”.
Rajah 5.4.20: Antaramuka fail “index.php” 56. Setelah pengguna memasukkan biodata dan menekan butang “Hantar”, pengguna akan dibawa ke fail “hantar.php” seperti yang dipaparkan pada Rajah 5.4.11. Rujuk Lampiran H untuk kod aturcara bagi fail “hantar.php”.
72
Rajah 5.4.21: Antaramuka fail “hantar.php” 57. Hasilkan satu antaramuka untuk pengguna melihat senarai pelajar yang telah mendaftar dan namakannya sebagai “senarai.php”. Antaramuka tersebut mempunyai jadual yang mengandungi nama pelajar, nombor matrik dan tarikh daftar seperti yang ditunjukkan di Rajah 5.4.22. Masukkan dua butang untuk “Hantar” dan “Padam”. Rujuk Lampiran I untuk kod aturcara bagi fail “senarai.php”.
Rajah 5.4.22: Antaramuka fail “senarai.php” 73
58. Dalam fail “senarai.php”, pada nama pelajar, apabila diklik, ianya akan membawa
pengguna
ke
pautan
fail
“detailspage.php”
yang
mengandungi butiran lebih lanjut seperti yang dipaparkan di Rajah 5.4.23.
Rujuk
Lampiran
J
untuk
kod
aturcara
bagi
fail
“detailspage.php”.
Rajah 5.4.23: Antaramuka fail “detailspage.php” 59. Untuk mengemaskini data dalam senarai tersebut, pengguna boleh pergi ke fail “update.php” seperti yang dipaparkan pada Rajah 5.4.24. Rujuk Lampiran K untuk kod aturcara bagi fail “update.php”.
74
Rajah 5.4.24: Antaramuka fail “update.php” 60. Di fail “detailspage.php”, terdapat pautan untuk pengguna menghapus biodata tersebut.
Apabila pengguna mengklik pautan tersebut,
pengguna akan dibawa ke fail “deleting_confirm.php” seperti yang dipaparkan pada Rajah 5.4.25. Rujuk Lampiran L untuk kod aturcara bagi fail “deleting_confirm.php”.
Rajah 5.4.25: Antaramuka fail “deleting_confirm.php”
75
5.5 Komen Dan Cadangan Sebagai komen, antaramuka fail-fail PHP yang pelatih hasilkan amat ringkas dan kurang menarik. Sebagai cadangan, fail-fail antaramuka iaitu fail “index.php”, “login.php”, “loginfailed.php”, “detailspage.php”, “hantar.php”, “senarai.php”, “update.php”, dan “deleting_confirm.php” boleh
diubahsuai serta diperkemaskan
lagi supaya
antaramuka fail-fail tersebut akan nampak lebih mesra pengguna.
5.6 Kesimpulan Sebagai kesimpulannya, dengan projek ini, pelatih telah mendalami tentang bahasa skrip PHP dan pangkalan data MySQL dalam menghasilkan laman web dinamik.
76
2.1 Pengenalan Berikut merupakan jadual bagi ringkasan daripada aktiviti pelatih sepanjang menjalani latihan industri. MINGGU 1
•
(14 Julai – 18 Julai)
AKTIVITI Pelatih dan 4 orang pelatih lain dari Politeknik yang sama melapor diri kepada En. Thomas selaku pengganti En. Effendy yang kebetulan sedang bercuti.
•
Diberi ‘punch card’ setiap seorang.
•
Diperkenalkan kepada penyelia, En. Ag. Azihar.
•
Tugasan – membuat halaman log masuk menggunakan bahasa PHP.
2
•
Membantu di bahagian ‘helpdesk’ – pemasangan
•
perisian ‘Microsoft Office 2003’ dan SPSS. Pemasangan perisian SPSS dan ‘Microsoft Visual
(21 Julai – 25 Julai)
Studio 2005’. •
Menyediakan kad nama untuk Majlis Konvokesyen UMS.
•
Tugasan - Membuat ‘Favicon’ (.ico) Logo UMS.
3
•
(28 Julai – 1 Ogos)
Tugasan – membuat Sistem Peminjaman Peralatan dari UMTP.
•
Tugasan
digantikan
dengan
Sistem
Semakan
Penggunaan Telefon. •
Pemasangan perisian SPSS.
•
Susun kad ‘Touch n Go’ untuk Majlis Konvokesyen UMS.
•
Membuat pangkalan data MySQL menggunakan perisian ‘Command Prompt’.
4
•
(4 Ogos – 8 Ogos) 5
UMS. • •
(11 Ogos – 15 Ogos)
Susun kad ‘Touch n Go’ untuk Majlis Konvokesyen Mengkaji PHP dan MySQL melalui internet. Pemasangan perisian SPSS dan ‘Microsoft Visual Studio 2005’.
•
Menyediakan kad nama untuk Majlis Konvokesyen UMS.
•
Mengkaji PHP dan MySQL melalui internet.
6
• •
Mengira kad Konvokesyen UMS. Mengkaji PHP dan MySQL melalui internet.
(18 Ogos – 22
•
Memberi kad ‘Touch n Go’ kepada bekas pelajar di
Ogos) 7
•
Majlis Konvokesyen UMS. Kemaskini perisian ‘Avira Antivir’ secara manual.
(25 Ogos – 29
•
Pemasangan perisian ‘Code Blocks’ dan ‘K-Lite
Ogos)
8
Codec Pack’. •
27 Ogos – Cuti sakit.
• •
Penyelia ditukarkan kepada En. Thomas George. 1 September – Cuti Umum (Hari Kebangsaan dan Hari
(1 September – 5 September)
Pertama Puasa / 1 Ramadhan). •
Pemasangan perisian ‘Google Chrome’, ‘IZArc’ dan XAMPP.
9 (8 September – 12
• •
Tutorial PHP. Pemasangan perisian ‘Infra Recorder’, ‘Safari’ dan SPSS.
September)
•
En. Thomas menerangkan tentang projek yang akan diberikan.
•
En. Thomas meminjamkan 2 buah buku tentang
10
•
perisian ‘Dreamweaver’ dan PHP. Memuat turun e-buku.
(15 September – 19
•
16 September – Cuti Umum (Hari Penubuhan
September)
Malaysia dan Hari Jadi Tuan Yang Terutama Negeri Sabah). •
Membuat pangkalan data MySQL menggunakan ‘phpMyAdmin’.
11
• •
Tutorial PHP dan MySQL. 22 September – Cuti Kecemasan.
(22 September – 26
•
Membuat fail PHP dan memaparkannya dengan
September)
12
bantuan perisian XAMPP. •
Pemasangan perisian ‘Flock’.
• •
26 September – Cuti Sakit. 29 September – 3 Oktober - Cuti Hari Raya Aidilfitri.
•
Pemasangan perisian ‘Maxthon Browser’ dan ‘K-
(29 September – 3 Oktober) 13 (6 Oktober – 10
Meleon’.
Oktober)
•
Tutorial CSS.
14
• •
Memuat turun tutorial dan fail ‘fonts’. Mencari maklumat untuk pengisian dalam Buku
(13 Oktober – 17 Oktober)
Laporan Latihan Industri. •
Diberi
tutorial
PHP
menggunakan
perisian
‘Macromedia Dreamweaver’ oleh En. Thomas. •
Kemaskini perisian ‘Antivirus AVG’ secara manual.
15
•
Kemaskini perisian ‘Antivirus Avast’ secara manual.
(20 Oktober – 24
•
Bina ‘site’ PHP dengan perisian ‘Macromedia
Oktober)
Dreamweaver’. •
Mempelajari jenis data (data type) dalam MySQL.
16
• •
Mengambil tutorial tentang PHP dari internet. 27 Oktober – Cuti ( Hari Deepavali).
(27 Oktober – 31
•
Tutorial PHP: Tambah, ubah (edit) dan hapus (delete)
Oktober)
17
data. •
Mengumpul maklumat tentang UMTP untuk laporan
•
latihan industri. Diberi projek: Portal Kelab Kakitangan UMTP
(3 November – 7 November) 18
(menggunakan bahasa pengaturcaraan PHP). • •
(10 November – 14 November) 19
Antara •
(17 November – 21
yang
diubah:
‘index.php’,
bahagian
yang
diubah:
‘ahli.php’,
‘kemaskini.php’, dan ‘carian.php’. •
Menonton
•
‘Dreamweaver’. Memasukkan data pelajar menggunakan ‘Microsoft
(24 November – 28 November)
bahagian
‘login.php’, ‘berita.php’, dan ‘galeri.php’. Mengubah (edit) templat untuk kesesuaian portal. Antara
November)
20
Mencari templat untuk projek portal. Mengubah (edit) templat untuk kesesuaian portal.
video
tutorial
untuk
PHP
&
Excel’. •
Tutorial PHP dan perisian ‘Dreamweaver’.
•
Tutorial
Galeri
Foto
PHP
Dalam
perisian
‘Dreamweaver’. •
Membuat pangkalan data untuk ‘Photo Gallery’ (Portal).
•
Membina pangkalan data untuk maklumat log masuk portal.
21
•
Membina pangkalan data untuk berita portal.
(1 Disember – 5
•
Memasukkan maklumat admin untuk kegunaan login
Disember)
melalui ‘phpMyAdmin’. •
Membuat antaramuka ‘login.php’.
•
Menghadkan capaian ke halaman ‘admin.php’.
•
Membuat pautan ‘Log Out’.
22
•
8 Disember – Cuti (Hari Raya Aidiladha).
(8 Disember – 12
•
Membuat antaramuka untuk admin memasukkan berita
Disember)
(beritabaru.php). •
10 Disember - Cuti kecemasan.
•
Membuat antaramuka ‘berita.php’.
•
Meletakkan tajuk-tajuk berita terkini di halaman utama (index.php).
BAB 3: PEMASANGAN PERISIAN XAMPP
3.1 Pengenalan Sebelum pelatih memulakan projek sistem yang menggunakan bahasa skrip PHP dan MySQL, penyelia memberitahu bahawa untuk menguji sistem tersebut, pelatih memerlukan pelayan web yang boleh dipasang dalam komputer tanpa perlu berada di talian internet. Terdapat dua pilihan pelayan web yang boleh dipasang di komputer yang telah dicadangkan oleh penyelia, iaitu antara ‘WampServer’ atau XAMPP. Pelatih telah memilih XAMPP sebagai perisian pelayan web. Nama XAMPP merupakan akronim bagi: •
X (cross-platform).
•
‘Apache’.
•
MySQL.
•
PHP.
•
‘Perl’.
Perisian XAMPP merupakan sebuah paket installasi untuk PHP, ‘Perl’, ‘Apache’ dan MySQL. Paket installasi tersebut merupakan pakej pelayan web.
Perisian XAMPP dicipta untuk kegunaan pengujian program berasaskan web (web based programs) contohnya untuk kegunaan di syarikat-syarikat kecil dalam rangkaian dalaman (internal network). Perisian XAMPP merupakan perisian percuma
dan
sumber
terbuka
dan
dapat
dimuat
turun
di
alamat
“http://www.apachefriends.org/en/index.html”.
Rajah 3.1.1
Halaman web rasmi untuk perisian XAMPP
3.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1. Komputer – Pelatih menggunakan komputer riba (laptop). 2. Sambungan Internet – Untuk memuat turun perisian XAMPP dari laman web. 3. ‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih bagi laporan ini. 4. ‘Internet Download Manager’ – Perisian pengurusan muat turun.
3.3 Cara Pengendalian Peralatan Semasa Latihan 16
Pastikan sambungan internet adalah bagus sepanjang proses muat turun perisian XAMPP berjalan, supaya proses tersebut tidak terganggu.
3.4 Proses Kerja Yang Dilakukan 1. Pertama sekali, buka perisian ‘Mozilla Firefox’. 2. Kemudian, masukkan “http://www.apachefriends.org/en/xampp.html”, iaitu laman web rasmi untuk XAMPP di ruangan pautan seperti Rajah di bawah (Rajah 3.4.1). Tekan butang “Enter” untuk pergi ke pautan tersebut.
Rajah 3.4.1: Laman web rasmi untuk perisian XAMPP 3. Setelah laman web tersebut terpapar, skrol ke bawah sehingga terdapat pautan bernama “XAMPP for Windows” (rujuk Rajah 3.4.2). Klik pautan tersebut untuk pergi ke halaman untuk memuat turun perisian XAMPP bagi sistem pengoperasian ‘Windows’.
17
Rajah 3.4.2: Pautan untuk perisian XAMPP bagi sistem pengoperasian ‘Windows’ 4. Halaman web seperti di Rajah 3.4.3 akan terpapar. Dalam halaman tersebut, terdapat maklumat-maklumat mengenai perisian XAMPP terkini serta pautan untuk memuat turun perisian XAMPP bagi sistem pengoperasian ‘Windows’.
Rajah 3.4.3: Halaman web perisian XAMPP bagi sistem pengoperasian ‘Windows’
18
5. Skrol ke bawah sehingga ada pautan bernama “Installer” (rujuk Rajah 3.4.4). Untuk laporan ini, pelatih memuat turun perisian XAMPP versi ‘installer’. Selain versi ‘installer’, perisian XAMPP juga terdapat dalam dua versi lain, iaitu versi “ZIP” dan “EXE”. Klik pautan bernama “Installer” tersebut.
Rajah 3.4.4: Pautan bernama “Installer” 6. Halaman web muat turun untuk perisian XAMPP akan terpapar. Seterusnya, perisian pengurusan muat turun, iaitu ‘Internet Download Manager’ juga muncul.
Klik pada butang “Start Download” untuk
memulakan proses muat turun bagi perisian XAMPP (rujuk Rajah 3.4.5).
19
Rajah 3.4.5: Halaman web muat turun perisian XAMPP dan lokasi butang “Start Download” 7. Tunggu sehingga proses muat turun perisian XAMPP itu selesai. Setelah itu, pergi ke ‘folder’ yang menempatkan fail ‘installer’ perisian tersebut (rujuk Rajah 3.4.6). Klik dua kali untuk memulakan proses pemasangan perisian XAMPP.
Rajah 3.4.6: ‘Folder’ yang menempatkan ‘installer’ perisian XAMPP
20
8. Tetingkap bernama “Installer Language” akan terpapar. Pilih bahasa Inggeris (‘English’ seperti dalam senarai pilihan) dan klik butang “OK” (rujuk Rajah 3.4.7).
Rajah 3.4.7: Tetingkap “Installer Language” 9. Tetingkap “XAMPP 1.6.7 win32 (Basic Package)” pula akan muncul. Klik butang “Next >” untuk teruskan proses pemasangan perisian XAMPP (rujuk Rajah 3.4.8).
21
Rajah 3.4.8: Tetingkap “XAMPP 1.6.7 win32 (Basic Package)” 10. Seterusnya, pilih lokasi pemasangan, iaitu lokasi fail-fail untuk perisian XAMPP akan ditempatkan. Lokasi pada tetapan asal ialah “c:\xampp\”. Setelah lokasi pemasangan ditetapkan, klik butang “Next >” (rujuk Rajah 3.4.9).
Rajah 3.4.9: Pilihan lokasi pemasangan bagi perisian XAMPP
22
11. Paparan seperti Rajah 3.4.10 akan muncul.
Paparan tersebut
menunjukkan pilihan pemasangan untuk perisian XAMPP. Tandakan pada pilihan “Create a XAMPP desktop icon” sekiranya ingin meletakkan ikon desktop perisian XAMPP.
Selain itu, untuk
meletakkan ‘folder’ “Apache Friends XAMPP” di menu ‘Start’, tandakan pada pilihan “Create an Apache Friends XAMPP folder in the start menu”. Terdapat juga pilihan lain seperti membuat pemasangan ‘Apache’, MySQL, atau ‘Filezilla’ sebagai servis dalam perisian XAMPP.
Selepas itu, klik butang “Next >” untuk ke langkah
seterusnya.
Rajah 3.4.10: Pilihan pemasangan untuk perisian XAMPP 12. Paparan seperti Rajah 3.4.11 akan muncul.
Paparan tersebut
menunjukkan pemasangan perisian XAMPP sudah bermula. Tunggu sehingga proses pemasangan tersebut selesai.
23
Rajah 3.4.11: Perjalanan pemasangan perisian XAMPP 13. Paparan seperti Rajah 3.4.12 akan terpapar setelah proses pemasangan perisian XAMPP selesai. Klik pada butang “Finish” untuk tamatkan proses tersebut.
Rajah 3.4.12: Pemasangan tamat 14. Satu tetingkap akan muncul (rujuk Rajah 3.4.13). Tetingkap tersebut mengatakan “Congratulations! The installation was successful! Start 24
the XAMPP Control Panel now?”. Untuk membuka panel kawalan XAMPP, klik pada butang “Yes”.
Rajah 3.4.13: Tetingkap yang muncul setelah pemasangan tamat 15. Tetingkap panel kawalan perisian XAMPP akan muncul seperti di Rajah 3.4.14.
Rajah 3.4.14: Tetingkap panel kawalan perisian XAMPP
25
16. Untuk mencuba sama ada server pelayan XAMPP berfungsi atau tidak, klik pada butang “Start” pada pilihan ‘Apache’ (rujuk Rajah 3.4.15).
Rajah 3.4.15: Kedudukan butang “Start” pada pilihan ‘Apache’ 17. Sekiranya butang tersebut menunjukkan perkataan “Stop” seperti di Rajah 3.4.16, itu tandanya modul ‘Apache’ telah diaktifkan.
Rajah 3.4.16: Modul ‘Apache’ telah diaktifkan
26
18. Setelah itu, aktifkan modul MySQL dengan klik butang “Start”. Rajah 3.4.17 menunjukkan kedua-dua modul ‘Apache’ dan MySQL telah aktif.
Rajah 3.4.17: Modul ‘Apache’ dan MySQL telah aktif 19. Buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 3.4.18).
27
Rajah 3.4.18: Buka perisian ‘Mozilla Firefox’ 20. Kemudian, masukkan pautan “http://localhost” pada ruangan pautan seperti Rajah di bawah (Rajah 3.4.19). Tekan butang “Enter” untuk pergi ke pautan tersebut.
Rajah 3.4.19: Masukkan “http://localhost” 21. Sekiranya pemasangan perisian XAMPP itu tadi berjaya dan berfungsi, paparan seperti Rajah 3.4.20 akan muncul. 28
Rajah 3.4.20: Paparan yang muncul sekiranya pemasangan berjaya dan berfungsi 22. Untuk meletakkan kata laluan pada direktori MySQL dan XAMPP, klik pada pilihan “Security” di bar tepi (rujuk Rajah 3.4.21).
Rajah 3.4.21: Kedudukan pilihan “Security” 23. Paparan seperti di Rajah 3.4.22 akan muncul.
Klik pada pautan
“http://localhost/security/xamppsecurity.php” (rujuk Rajah 3.4.22).
29
Rajah 3.4.22: Kedudukan pautan “http://localhost/security/xamppsecurity.php” 24. Masukkan kata laluan pada ruangan teks “New password”. Masukkan sekali lagi kata laluan yang sama pada ruangan teks “Repeat the new password”. Setelah itu, klik butang “Password changing” (rujuk Rajah 3.4.23).
Rajah 3.4.23: Meletakkan kata laluan pada direktori MySQL dan XAMPP
30
25. Untuk membuka sistem ‘phpMyAdmin’, iaitu sistem pangkalan data MySQL, klik pada pilihan “phpMyAdmin” di bar tepi (rujuk Rajah 3.4.24).
Rajah 3.4.24: Kedudukan pilihan “phpMyAdmin” 26. Rajah 3.4.25 menunjukkan antaramuka halaman ‘phpMyAdmin’.
Rajah 3.4.25: Halaman ‘phpMyAdmin’
31
3.5 Komen Dan Cadangan Perisian XAMPP ialah perisian yang cukup besar dan berat, kerana ianya menggunakan ruangan storan sebanyak 595MB. Perisian XAMPP menggunakan lebih besar ruangan storan berbanding perisian WAMP. Sebagai cadangan, selain perisian XAMPP, perisian pakej WAMP (‘Windows’, ‘Apache’, MySQL, PHP/‘Perl’/‘Python’) sering diguna ialah: •
‘WampServer’ (sebelum ini dikenali sebagai WAMP5) yang boleh diperolehi di pautan “http://www.wampserver.com/en/”.
•
EasyPHP yang lebih ringan.
3.6 Kesimpulan Sebagai kesimpulannya, XAMPP merupakan perisian pelayan web local (local web server) menyatukan server ‘Apache’, MySQL, PHP, dan ‘Perl’ dalam satu perisian. Perisian XAMPP membolehkan pengguna untuk mengakses atau menguji fail PHP tanpa perlu berada di talian (online).
32
33
BAB 4: HALAMAN LOG MASUK DENGAN PHP DAN MYSQL
4.1 Pengenalan Semasa berada di bawah seliaan Encik Azihar, pelatih dan Alislora telah diberikan satu tugasan, iaitu membuat halaman log masuk (login page) menggunakan bahasa skrip PHP.
Oleh kerana pelatih dan Alislora tidak mempunyai asas
pengetahuan dalam PHP, En. Azihar menyuruh pelatih dan Alislora untuk mencari cara untuk membuat tugasan tesebut dalam internet dan menggunakan cara yang diperolehi dari internet tersebut untuk membuat projek ini.
4.1.1
PHP PHP ialah bahasa skrip yang direka khas untuk digunakan bersama-
sama dengan penanda HTML untuk membina laman web. Laman web yang mengandungi skrip PHP diproses oleh enjin skrip PHP dan kod-kod tersebut digantikan dengan apa yang dapat dilihat hasil daripada skrip yang ditulis oleh pengaturcara.
16
4.1.2
MySQL MySQL ialah sebuah sistem pengurusan pangkalan data berkeupayaan tinggi yang berkaitan dengan laman web serta pembangunan dan penggunaan aplikasi perniagaan.
MySQL memaksimumkan kelajuan, kestabilan dan
kepenggunaan, di samping mengurangkan kos pangkalan data sehingga 90 peratus. MySQL terdapat dalam kesemua distribusi Linux di samping sistem pengoperasian UNIX, ‘Mac OS X’ dan ‘Microsoft Windows’.
4.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1. Komputer – Pelatih menggunakan komputer riba (laptop). 2. Perisian XAMPP – Untuk mengaktifkan pelayan web ‘Apache’ dan MySQL bagi penggunaan bahasa pengaturcaraan PHP dan MySQL. 3. Perisian ‘Adobe Dreamweaver CS3’ – Untuk mengisi kod-kod PHP. 4. ‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih bagi laporan ini.
4.3 Cara Pengendalian Peralatan Semasa Latihan Pastikan sepanjang fail-fail PHP tersebut dicuba di ‘web browser’, pelayan web ‘Apache’ dan MySQL adalah aktif, kerana fail PHP hanya boleh dipaparkan di ‘web browser’ sekiranya kedua-duanya diaktifkan.
4.4 Proses Kerja Yang Dilakukan
16
1. Pertama sekali, aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP (rujuk Rajah 4.4.1).
Rajah 4.4.1: Aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP 2. Buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 4.4.2).
17
Rajah 4.4.2: Buka perisian ‘Mozilla Firefox’ 3. Apabila perisian ‘Mozilla Firefox’ telah dibuka, masukkan pautan “http://localhost/phpmyadmin” untuk pergi ke program ‘phpMyAdmin’ (rujuk Rajah 4.4.3).
Rajah 4.4.3: Pergi ke program ‘phpMyAdmin’ 4. Rajah 4.4.4 menunjukkan antaramuka ‘phpMyAdmin’.
Buat satu
pangkalan data dan namakannya “loginpage”. Klik butang “Create” (rujuk Rajah 4.4.4).
18
Rajah 4.4.4: Buat satu pangkalan data bernama “loginpage” 5. Klik tab “SQL” seperti di Rajah 4.4.5.
Rajah 4.4.5: Kedudukan tab “SQL” 6. Masukkan kod SQL seperti di Lampiran A ke dalam ruangan teks “Run SQL query/queries on database loginpage” (rujuk Rajah 4.4.6). Kod SQL tersebut akan membuat ‘table’ bernama “members”, membuat 3 ‘field’ bernama “id” yang merupakan kunci utama (primary key), 19
“username”, dan “password”, serta meletakkan data-data ke dalam semua ‘field’ tersebut, iaitu “1” dalam ‘field’ “id”, “john” dalam ‘field’ “username”, dan “1234” dalam ‘field’ “password”.
Rajah 4.4.6: Masukkan kod SQL yang diberikan 7. Paparan seperti di Rajah 4.4.7 akan muncul, menunjukkan kod SQL tersebut berjaya dimasukkan ke dalam pangkalan data “loginpage”.
Rajah 4.4.7: Kod SQL berjaya dimasukkan ke pangkalan data “loginpage”
20
8. Seterusnya, buka perisian ‘Adobe Dreamweaver CS3 dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Developer Tools’ > ‘Adobe Dreamweaver CS3’ (rujuk Rajah 4.4.8).
Rajah 4.4.8: Buka perisian ‘Adobe Dreamweaver CS3’ 9. Apabila perisian ‘Adobe Dreamweaver CS3’ telah dibuka, pada ruangan ‘Create New’, klik pada pilihan “PHP” untuk membuat fail PHP (rujuk Rajah 4.4.9).
21
Rajah 4.4.9: Klik pada pilihan “PHP” 10. Seterusnya, klik pada tab bernama “Code” (rujuk Rajah 4.4.10).
Rajah 4.4.10: Kedudukan tab bernama “Code” 11. Masukkan kod HTML seperti dalam Lampiran B ke dalam ruangan selepas tag seperti yang ditunjukkan di Rajah 4.4.11. Kod HTML tersebut akan menghasilkan 1 jadual yang mengandungi ruangan log masuk dan mempunyai ruangan untuk pengguna memasukkan nama pengguna dan kata laluan. Selain itu, terdapat juga satu butang bernama “Login” untuk pengguna log masuk.
22
Rajah 4.4.11: Kedudukan selepas tag 12. Rajah 4.4.12 menunjukkan kod HTML yang telah dimasukkan ke dalam ruangan selepas tag .
Rajah 4.4.12: Kod HTML telah dimasukkan 13. Klik tab bernama “Design” untuk melihat hasil kod HTML tersebut (rujuk Rajah 4.4.13).
23
Rajah 4.4.13: Kedudukan tab bernama “Design” 14. Rajah 4.4.14 menunjukkan rupa kod HTML tersebut dalam paparan “Design”.
Rajah 4.4.14: Rupa kod HTML tersebut dalam paparan “Design” 15. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.15.
24
Rajah 4.4.15: Simpankan fail tersebut 16. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.16. Pastikan fail tersebut akan disimpan di bahagian “c:\xampp\htdocs\” supaya fail tersebut dapat diakses menggunakan pelayan web local (local web server). Klik butang “Create New Folder” (rujuk Rajah 4.4.16) untuk membuat satu ‘folder’ baru untuk fail yang telah dihasilkan tadi.
Rajah 4.4.16: Kedudukan butang “Create New Folder” 25
17. Namakan ‘folder’ tersebut sebagai “login” dan klik butang “Save” (rujuk Rajah 4.4.17).
Rajah 4.4.17: Namakan ‘folder’ tersebut sebagai “login” 18. Seterusnya merupakan proses simpan fail PHP yang telah dihasilkan tadi. Namakan fail tersebut sebagai “main_login.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.18).
26
Rajah 4.4.18: Proses simpan fail PHP 19. Seterusnya, buat satu fail PHP baru dengan klik pada pilihan menu “File” > “New…” (rujuk Rajah 4.4.19).
Rajah 4.4.19: Buat satu fail PHP baru 20. Tetingkap bernama “New Document” akan terpapar. Klik pada tab “Blank Page”. Pada ruangan “Page Type”, klik pada pilihan bernama “PHP”. Pada ruangan “Layout”, klik pada pilihan bernama “<none>” (rujuk Rajah 4.4.20).
27
Rajah 4.4.20: Proses membuat fail baru 21. Klik pada tab bernama “Code” (rujuk Rajah 4.4.21).
Rajah 4.4.21: Kedudukan tab bernama “Code” 22. Masukkan kod PHP seperti dalam Lampiran C ke dalam ruangan teks seperti di Rajah 4.4.22.
Kod tersebut akan menghubungkan fail
“main_login.php” ke pangkalan data “loginpage”.
Seterusnya,
sekiranya nama pengguna dan kata laluan yang dimasukkan adalah betul, fail bernama “login_success.php” (yang akan dibuat selepas ini) 28
akan terpapar. Sebaliknya, sekiranya nama pengguna dan kata laluan yang dimasukkan adalah salah, ayat “Wrong Username or Password” akan terpapar pada fail “checklogin.php”.
Rajah 4.4.22: Masukkan kod PHP 23. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.23.
Rajah 4.4.23: Simpankan fail tersebut 29
24. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.24. Namakan fail tersebut sebagai “checklogin.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.24).
Rajah 4.4.24: Proses simpan fail PHP 25. Seterusnya, buat satu fail PHP baru dengan klik pada pilihan menu “File” > “New…” (rujuk Rajah 4.4.25).
30
Rajah 4.4.25: Buat satu fail PHP baru 26. Tetingkap bernama “New Document” akan terpapar. Klik pada tab “Blank Page”. Pada ruangan “Page Type”, klik pada pilihan bernama “PHP”. Pada ruangan “Layout”, klik pada pilihan bernama “<none>” (rujuk Rajah 4.4.26).
Rajah 4.4.26: Proses membuat fail baru
31
27. Masukkan kod PHP seperti dalam Lampiran D ke dalam ruangan teks seperti di Rajah 4.4.27.
Fail ini akan dipaparkan sekiranya nama
pengguna dan kata laluan yang dimasukkan di fail “main_login.php” adalah betul.
Rajah 4.4.27: Masukkan kod PHP 28. Simpankan fail tersebut dengan klik pada pilihan menu “File” > “Save as…” seperti yang ditunjukkan di Rajah 4.4.28.
32
Rajah 4.4.28: Simpankan fail tersebut 29. Tetingkap bernama “Save As” akan muncul seperti di Rajah 4.4.29. Namakan fail tersebut sebagai “login_success.php”. Pada pilihan “Save as type”, pilih “PHP Files (*.php, *.php3, *.php4, *.php5, *.tpl)” dan klik butang “Save” (rujuk Rajah 4.4.29).
Rajah 4.4.29: Proses simpan fail PHP 30. Seterusnya, ketiga-tiga fail tersebut akan diuji sama ada berfungsi seperti yang dikehendaki atau tidak.
Pastikan modul ‘Apache’ dan
MySQL pada XAMPP masih aktif. Kemudian, buka perisian ‘Mozilla Firefox’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Web Browsers’ > ‘Mozilla Firefox’ > ‘Mozilla Firefox’ (rujuk Rajah 4.4.30).
33
Rajah 4.4.30: Buka perisian ‘Mozilla Firefox’ 31. Apabila perisian ‘Mozilla Firefox’ telah dibuka, masukkan pautan “http://localhost/login/main_login.php”
untuk
mengakses
fail
“main_login.php” (rujuk Rajah 4.4.31).
Rajah 4.4.31: Mengakses fail “main_login.php” 32. Paparan seperti di Rajah 4.4.32 akan terpapar. Untuk menguji sama ada fail tersebut berjaya dihubungkan dengan pangkalan datanya atau tidak, 34
masukkan “john” ke dalam ruangan teks “Username” dan masukkan “1234” ke dalam ruangan teks “Password”. Setelah itu, klik butang “Login”.
Rajah 4.4.32: Masukkan data seperti berikut 33. Sekiranya log masuk tersebut berjaya, fail “login_success.php” akan terpapar dan memaparkan ayat “Login Successful” seperti yang ditunjukkan di Rajah 4.4.33.
35
Rajah 4.4.33: Paparan fail “login_success.php” 34. Seterusnya, uji fail “main_login.php” dengan memasukkan data yang salah. Sebagai contoh, untuk ruangan teks “Username”, masukkan data “john”.
Manakala, untuk ruangan teks “Password”, masukkan data
“1111” (rujuk Rajah 4.4.34). Seterusnya, klik butang “Login”.
Rajah 4.4.34: Masukkan data yang salah
36
35. Paparan seperti pada Rajah 4.4.35 akan terpapar, iaitu fail “checklogin.php” yang memaparkan ayat “Wrong Username or Password”.
Rajah 4.4.35: Paparan fail “checklogin.php” apabila data yang dimasukkan adalah salah
4.5 Komen Dan Cadangan Halaman log masuk yang pelatih hasilkan amat ringkas, walau begitu, ianya tetap berfungsi. Fail “main_login.php” dan fail “login_success.php” boleh diubah dan dicantikkan lagi dengan kod-kod HTML. Untuk laporan ini, pelatih menunjukkan contoh yang ringkas.
37
4.6 Kesimpulan Sebagai kesimpulannya, fail PHP boleh dihubungkan dengan pangkalan data SQL untuk menghasilkan laman web dinamik, sebagai contoh web log masuk, web ‘eCommerce’, dan laman blog
38
BAB 5: LAMAN WEB BIODATA PELAJAR DENGAN PHP DAN MYSQL 5.1 Pengenalan Pada minggu ke 14, penyelia kepada pelatih, iaitu Encik Thomas memberi satu tugasan setelah siap memberi pelatih tutorial tentang penghasilan laman web PHP menggunakan perisian ‘Macromedia/Adobe Dreamweaver’. Tugasan tersebut adalah membuat laman web biodata pelajar dengan menggunakan bahasa skrip PHP dan pangkalan data MySQL. Laman web tersebut mempunyai laman untuk log masuk, laman memasukkan dan mengemaskini data, laman yang memaparkan biodata pelajar, dan laman yang mengandungi senarai pelajar yang telah mendaftar dalam laman web tersebut. Pengguna juga boleh menghapus data yang tidak dikehendaki dari laman web tersebut, dan data yang dihapuskan itu juga akan terhapus di dalam pangkalan data.
5.2 Spesifikasi / Jenis Peralatan Dan Perisian Yang Digunakan Semasa Latihan 1.
Komputer – Pelatih menggunakan komputer riba (laptop).
2.
Perisian XAMPP – Untuk mengaktifkan pelayan web
‘Apache’ dan MySQL bagi penggunaan bahasa pengaturcaraan PHP dan MySQL. 58
3.
Perisian ‘Adobe Dreamweaver CS3’ – Untuk mengisi kod-kod
PHP.
59
4.
‘Mozilla Firefox’ – Merupakan ‘web browser’ yang digunakan oleh pelatih.
5.3 Cara Pengendalian Peralatan Semasa Latihan Pastikan sepanjang fail-fail PHP tersebut dicuba di ‘web browser’, pelayan web ‘Apache’ dan MySQL adalah aktif, kerana fail PHP hanya boleh dipaparkan di ‘web browser’ sekiranya kedua-duanya diaktifkan.
5.4 Proses Kerja Yang Dilakukan 36. Pertama sekali, aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP (rujuk Rajah 5.4.1).
Rajah 5.4.1: Aktifkan modul ‘Apache’ dan MySQL di perisian XAMPP 37. Buka perisian ‘Adobe Dreamweaver CS3’ dengan pergi ke menu ‘Start’ > ‘All Programs’ > ‘Developer Tools’ > ‘Adobe Dreamweaver CS3’ (rujuk Rajah 5.4.2).
59
Rajah 5.4.2: Buka perisian ‘Adobe Dreamweaver CS3’ 38. Tetingkap perisian ‘Adobe Dreamweaver CS3’ akan terbuka seperti di Rajah 5.4.3. Pada menu “Site”, klik pada pilihan “New Site…” (rujuk Rajah 5.4.3).
Rajah 5.4.3: Kedudukan pilihan “New Site…” 39. Tetingkap bernama “Site Definition for” akan terbuka. Pada ruangan teks “What would you like to name your site?”, masukkan nama projek 60
iaitu “projek Biodata Pelajar”. Pada ruangan teks “What is the HTTP Address (URL) of your site?” pula, masukkan alamat berikut, “http://localhost/bio/” (rujuk Rajah 5.4.4).
Selepas itu, klik butang
“Next >” untuk pergi ke langkah seterusnya.
Rajah 5.4.4: Masukkan data seperti berikut 40. Untuk pertanyaan “Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?”, tandakan pada pilihan “Yes, I want to use server technology.”. Untuk pertanyaan “Which server technology?”, pilih “PHP MySQL” (rujuk Rajah 5.4.5). Selepas itu, klik butang “Next >” untuk ke langkah seterusnya.
61
Rajah 5.4.5: Pilih jawapan seperti berikut 41. Untuk pertanyaan “How do you want to work with your files during development?”, tandakan pada pilihan “Edit and test locally (my testing server is on this computer”. computer
do
you
want
Pada ruangan teks “Where on your to
store
your
files?”,
masukkan
“C:\xampp\htdocs\bio\” (rujuk Rajah 5.4.6). Selepas itu, klik butang “Next >” untuk ke langkah seterusnya.
Rajah 5.4.6: Pilih dan masukkan jawapan seperti berikut 62
42. Pada ruangan teks “What URL would you use to browse to the root of your site?”, masukkan “http://localhost/bio/” (rujuk Rajah 5.4.7). Klik butang “Test URL” untuk menguji pautan tersebut.
Rajah 5.4.7: Masukkan URL berikut dan klik butang “Test URL” 43. Sekiranya URL tersebut dapat diakses, satu tetingkap akan memaparkan “The URL Prefix test was successful.” seperti di Rajah 5.4.8. Klik butang “OK” untuk menutup tetingkap tersebut.
63
Rajah 5.4.8: URL tersebut berjaya diakses 44. Kembali ke tetingkap sebelumnya. Klik butang “Next >” untuk ke langkah seterusnya (rujuk Rajah 5.4.9).
Rajah 5.4.9: Klik butang “Next >” untuk ke langkah seterusnya 45. Untuk pertanyaan “When you are editing a file, do you copy it to another machine? This might be the production web server or a staging server that you share with team members.”, tandakan pada pilihan “No” 64
(rujuk Rajah 5.4.10).
Selepas itu, klik butang “Next >” untuk ke
langkah seterusnya.
Rajah 5.4.10: Pilih “No” 46. Paparan seperti pada Rajah 5.4.11 akan terpapar.
Paparan tersebut
menunjukkan ringkasan daripada apa yang ditetapkan tadi. Klik butang “Done” untuk menamatkan proses ini.
Rajah 5.4.11: Paparan ringkasan tetapan 65
47. Kembali ke perisian ‘Mozilla Firefox’ untuk membuat pangkalan data untuk laman web biodata pelajar.
Pastikan modul ‘Apache’ dan
MySQL di perisian XAMPP telah aktif. Kemudian, di perisian ‘Mozilla Firefox’, pergi ke pautan “http://localhost/phpmyadmin” untuk pergi ke sistem ‘phpMyAdmin’. Selepas itu, pada ruangan teks “Create new database”,
masukkan
“biodata_pelajar”.
nama
pangkalan
data
tersebut
sebagai
Pastikan tiada jarak antara nama pangkalan data
tersebut. Klik butang “Create” untuk meneruskan proses tersebut (rujuk Rajah 5.4.12).
Rajah 5.4.12: Membuat pangkalan data “biodata_pelajar” 48. Buat dua ‘table’ dalam pangkalan data “biodata_pelajar” tersebut. Namakannya sebagai “admin” dan “data” (rujuk Rajah 5.4.13). ‘Table’ “admin” adalah untuk menyimpan maklumat akses admin untuk log masuk ke sistem.
Manakala, ‘table’ “data” pula akan menyimpan
maklumat biodata pelajar yang akan diisi oleh pelajar/pengguna sistem.
66
Rajah 5.4.13: ‘Table’ dalam pangkalan data “biodata_pelajar” 49. Dalam ‘table’ “admin”, buatkan 5 ‘field’ ke dalamnya (rujuk Rajah 5.4.14). Buatkan ‘field’ tersebut mengikut tetapan seperti dalam Jadual 5.4.1 berikut. ‘Field’ ID username password Name AccessLevel
Jenis (Jumlah data) Null Ekstra int (11) Tidak auto_increment varchar (100) Ya varchar (100) Ya varchar (50) Tidak varchar (10) Tidak Jadual 5.4.1: Tetapan ‘field’ untuk ‘table’ “admin
67
Rajah 5.4.14: ‘Field’ dalam ‘table’ “admin” 50. Dalam ‘table’ “data”, buatkan sembilan ‘field’ ke dalamnya (rujuk Rajah 5.4.15). Buatkan ‘field’ tersebut mengikut tetapan seperti dalam Jadual 5.4.2 berikut. ‘Field’ ID Nama NoMatrik NoIC Jantina Bangsa Agama Alamat TimeAdd
Jenis (Jumlah data) Null Ekstra int (11) Tidak auto_increment varchar (200) Ya varchar (15) Ya varchar (12) Ya varchar (9) Ya varchar (20) Ya varchar (20) Ya longtext Ya timestamp Tidak CURRENT_TIMESTAMP Jadual 5.4.2 : Tetapan ‘field’ untuk ‘table’ “data”
68
Rajah 5.4.15: ‘Field’ dalam ‘table’ “data” 51. Kembali ke perisian ‘Adobe Dreamweaver CS3’ untuk membuat fail PHP. Pada tetingkap “Files”, klik kiri pada ruangan putih di tetingkap tersebut.
Kemudian, klik pada pilihan “New File” seperti yang
ditunjukkan pada Rajah 5.4.16.
Rajah 5.4.16: Kedudukan pilihan “New File”
69
52. Namakan fail tersebut sebagai “login.php” seperti yang ditunjukkan di Rajah 5.4.17.
Rajah 5.4.17: Namakan fail tersebut sebagai “login.php” 53. Hasilkan satu antaramuka log masuk yang mempunyai ruangan teks untuk pengguna memasukkan nama pengguna dan kata laluan. Sertakan juga dua butang, iaitu butang untuk log masuk dan satu lagi untuk batal (rujuk Rajah 5.4.18). Rujuk Lampiran E untuk kod aturcara bagi fail tersebut.
70
Rajah 5.4.18: Antaramuka log masuk 54. Sekiranya maklumat log masuk tersebut salah, pengguna akan dipaparkan dengan fail “loginfailed.php” (rujuk Rajah 5.4.19). Rujuk Lampiran F untuk kod aturcara fail “loginfailed.php”.
Rajah 5.4.19: Antaramuka “loginfailed.php” 55. Hasilkan satu antaramuka untuk pengguna memasukkan biodata dan namakannya sebagai “index.php”. 71
Antaramuka tersebut mempunyai
ruang teks untuk pengguna memasukkan nama, nombor matrik, nombor kad pengenalan, jantina, bangsa, agama dan alamat seperti yang ditunjukkan di Rajah 5.4.20. Masukkan dua butang untuk “Hantar” dan “Padam”. Rujuk Lampiran G untuk kod aturcara bagi fail “index.php”.
Rajah 5.4.20: Antaramuka fail “index.php” 56. Setelah pengguna memasukkan biodata dan menekan butang “Hantar”, pengguna akan dibawa ke fail “hantar.php” seperti yang dipaparkan pada Rajah 5.4.11. Rujuk Lampiran H untuk kod aturcara bagi fail “hantar.php”.
72
Rajah 5.4.21: Antaramuka fail “hantar.php” 57. Hasilkan satu antaramuka untuk pengguna melihat senarai pelajar yang telah mendaftar dan namakannya sebagai “senarai.php”. Antaramuka tersebut mempunyai jadual yang mengandungi nama pelajar, nombor matrik dan tarikh daftar seperti yang ditunjukkan di Rajah 5.4.22. Masukkan dua butang untuk “Hantar” dan “Padam”. Rujuk Lampiran I untuk kod aturcara bagi fail “senarai.php”.
Rajah 5.4.22: Antaramuka fail “senarai.php” 73
58. Dalam fail “senarai.php”, pada nama pelajar, apabila diklik, ianya akan membawa
pengguna
ke
pautan
fail
“detailspage.php”
yang
mengandungi butiran lebih lanjut seperti yang dipaparkan di Rajah 5.4.23.
Rujuk
Lampiran
J
untuk
kod
aturcara
bagi
fail
“detailspage.php”.
Rajah 5.4.23: Antaramuka fail “detailspage.php” 59. Untuk mengemaskini data dalam senarai tersebut, pengguna boleh pergi ke fail “update.php” seperti yang dipaparkan pada Rajah 5.4.24. Rujuk Lampiran K untuk kod aturcara bagi fail “update.php”.
74
Rajah 5.4.24: Antaramuka fail “update.php” 60. Di fail “detailspage.php”, terdapat pautan untuk pengguna menghapus biodata tersebut.
Apabila pengguna mengklik pautan tersebut,
pengguna akan dibawa ke fail “deleting_confirm.php” seperti yang dipaparkan pada Rajah 5.4.25. Rujuk Lampiran L untuk kod aturcara bagi fail “deleting_confirm.php”.
Rajah 5.4.25: Antaramuka fail “deleting_confirm.php”
75
5.5 Komen Dan Cadangan Sebagai komen, antaramuka fail-fail PHP yang pelatih hasilkan amat ringkas dan kurang menarik. Sebagai cadangan, fail-fail antaramuka iaitu fail “index.php”, “login.php”, “loginfailed.php”, “detailspage.php”, “hantar.php”, “senarai.php”, “update.php”, dan “deleting_confirm.php” boleh
diubahsuai serta diperkemaskan
lagi supaya
antaramuka fail-fail tersebut akan nampak lebih mesra pengguna.
5.6 Kesimpulan Sebagai kesimpulannya, dengan projek ini, pelatih telah mendalami tentang bahasa skrip PHP dan pangkalan data MySQL dalam menghasilkan laman web dinamik.
76
