Nota Sifu Azmi Page 1

Nota Membina Aplikasi Web Untuk Projek Sains Komputer

(A) Keperluan Aplikasi:

#Aplikasi Tersedia Dengan Kombinasi Webserver, Database dan Bahasa

Aturcara PHP.

#Aplikasi Berjenis ‘stacks’ mengandungi Apache, MySQL,PHP.

## Memasang & Memulakan Aplikasi stack pilihan = XAMPP

1) Klik ‘start’ butang Apache

2) Klik ‘start’ butang MySQL

3) Mengenal ROOT dan foldernya

4) Uji lari Apache dan MySQL

Nota Sifu Azmi Page 2

ROOT ialah folder c:\xampp\htdocs

Fungsi ROOT: Menyimpan fail

html/php Menyimpan fail

sokongan css & imej Membina subfolder

fail html/php/css/imej

Menguji lari Apache menggunakan pelayar web dengan URL: localhost

atau IP Number: 127.0.0.1

Jika Apache beroperasi maka localhost akan berjaya dicapai/dipapar.

Nota Sifu Azmi Page 3

Menguji lari PHPMyAdmin menggunakan pelayar web dengan URL:

localhost/phpmyadmin atau IP Number: 127.0.0.1/phpmyadmin

Atau lancarkan aplikasi MySQL dari ‘shell’ pada Panel XAMPP:

Syntax login ke MySQL:

#mysql –u root –p [enter]

#masukkan katalaluan anda jika ada dan [enter].

Nota Sifu Azmi Page 4

(B) BAHASA SQL dengan menggunakan MySQL/MariaDB:

#MySQL adalah aplikasi DBMS untuk mengurus pangkalan data

#Pastikan anda telah memperolehi jadual-jadual ternormal

melalui proses penormalan dan ERD dalam fasa sebelumnya.

#Cipta SATU pangkalan data dan semua jadual/table dalam DBMS

anda berdasarkan projek/reka bentuk/kajian awal anda.

#Contoh Jadual Ternormal:

#Berikut syntax SQL dalam MySQL menggunakan kaedah arahan

pada ‘shell’ untuk membina pangkalan data, table dan

memanipulasi data-data.

#Kenal, fahami dan kenalpasti penggunaannya.

Papar semua pangkalan data sedia ada

Nota Sifu Azmi Page 5

Mencipta pangkalan data baharu

Semak dan papar pangkalan data yang wujud

Pilih pangkalan data untuk bina jadualnya

Membina jadual baharu dengan nama pengguna

Memanipulasi data masuk ke jadual

Nota Sifu Azmi Page 6

Memanipulasi data lagi masuk ke jadual

Semak senarai jadual yang ada dalam pangkalan

data

Melihat properties/deskripsi sebuah jadual

Nota Sifu Azmi Page 7

Arahan papar semua lajur dari sebuah jadual

Arahan papar dua lajur tertentu dari sebuah

jadual

Arahan papar lajur tertentu dari sebuah jadual

berdasarkan id terpilih

Arahan papar lajur id sahaja dari sebuah jadual

berdasarkan username dan katalaluan seorang

pengguna sahaja

Nota Sifu Azmi Page 8

Membilang semua pengguna

Membilang pengguna berdasarkan satu kriteria

Mengemaskini data pada lajur nama berdasarkan id

pengguna tertentu.

Nota: Anda akan gunakan syntax SQL ini dalam membina

arahan query dalam PHP nanti untuk mengguruskan data bagi

aplikasi web anda. Selain dari ‘shell’ syntax SQL juga boleh anda

jalankan dengan phpMyadmin dengan menggunakan fungsi SQL

Query.

Nota Sifu Azmi Page 9

(C) BAHASA PHP & CSS– Mereka Bentuk Antara Muka Web

#Antara muka laman web atau ‘layout’ boleh direka bentuk

dengan bermacam pecahan paparan, antaranya:

1 lajur layout 2 lajur layout 3 lajur layout

#Anda boleh tetapkan pecahan layout secara dalam CSS

atau berbentuk jadual dalam HTML.

#Contoh paparan dengan layout 2 lajur menggunakan CSS dan

PHP:

#Dua lajur dengan Tiga pecahan secara iaitu header,

content(navigasi dan article) serta footer.

Nota Sifu Azmi Page 10

#fail index.php & style.css

Nota Sifu Azmi Page 11

#Cara kedua – menggunakan table.

#Dua lajur dengan Tiga pecahan yang sama tetapi menggunakan

reaka bentuk secara bagi membahagikan antara header,

content(navigasi dan article) serta footer.

Contoh koding PHP menggunakan kaedah table membuat

pecahan bagi mereka bentuk antara muka yang dikehendaki:

#Index.php dengan cara di atas juga menghasilkan paparan

dengan rekabentuk layout yang sama.

Nota Sifu Azmi Page 12

(D) BAHASA PHP – Membina Halaman Tambahan

#Menggunakan fail asal (index.php) anda boleh tambah lagi

beberapa halaman baharu. Anda hanya ubah maklumat pada

ruangan ‘content’ dengan maklumat lain/borang/laporan/…

#Baiki juga pautan dengan URL yang tepat pada NAV, contoh:

Nota Sifu Azmi Page 13

#Gunakan cara sama untuk bina halaman lain yang perlu, contoh:

contact.php

members.php

daftar.php

login.php

cariahli.php

….. (dan lain-lain fail php sehingga lengkap aplikasi anda)

(E) BAHASA PHP – Membina halaman terkawal.

#Halaman terkawal merupakan halaman yang tidak boleh diakses

terus.

#untuk akses ke halaman terkawal memerlukan pengesahan

pengguna dan persekitaran SESSION.

#Pada bahagian atas koding halaman terkawal masukkan arahan

‘session_start’, contoh (Baris 1 hingga Baris 7):

#Untuk mengesahkan pengguna, sediakan kemudahan login dan

tetapkan pengguna yang sah ke dalam persekitaran SESSION.

Nota Sifu Azmi Page 14

#Untuk mengesahkan pengguna, sediakan halaman login.

#Halaman login akan menyemak username dan katalaluan yang

dimasukkan sama seperti dalam pangkalan data.

#Contoh :

#Masukkan Username dan Katalaluan yang telah didaftarkan dalam

pangkalan data. (Rujuk halaman 5 dan 7)

Nota Sifu Azmi Page 15

(F) BAHASA PHP & SQL - Membina Borang & Table/Jadual.

#Sebelum bina borang, pastikan anda sudah sediakan table/jadual

untuk menyimpan data dari borang pada perisian pangkalan data

anda di web server.

#Contoh, cipta table baharu dengan nama pelajar:

#Terdapat 6 lajur yang perlu diisi. (Lajur ID – auto)

#Hasilkan borang yang akan memanipulasi 6 butiran data seperti di

atas, contoh borang PHP:

Nota Sifu Azmi Page 16

#Seterusnya buat sambungan ke DBMS, buat Query insert dan

kemudian laksanakan query tersebut, contoh:

Nota Sifu Azmi Page 17

(G) BAHASA PHP & SQL – Mencari & Papar Data Dari Table/Jadual.

#Dari masa ke semasa, anda boleh semak data dalam simpanan

dengan menggunakan Query carian/paparan.

#Gunakan kekunci unik atau data yang sesuai sebagai kekunci

carian, contoh:

#Masukkan no kad pengenalan dan klik butang cari

Nota Sifu Azmi Page 18

#Jika no kad pengenalan telah didaftarkan, akan dipaparkan maklumat

pelajar yang dicari. Contoh:

#Boleh juga paparkan sebahagian atau seluruh maklumat yang dari

sebuah table/jadual, contoh:

#Halaman akan paparkan maklumat dalam bentuk jadual.

Nota Sifu Azmi Page 19

#contoh jadual yang dipaparkan:

#Untuk memastikan capaian selamat, pengguna perlu Logout untuk

menamatkan SESSION.

#Bina laman logout seperti di bawah:

#Syntax session_destroy( ); akan melaksanakan penamatan sessi yang

membenarkan pengguna akses ke halaman terkawal. Selepas destroy

pengguna tidak lagi disahkan atau dikenali oleh aplikasi.

#Ingatan sementara tentang pengguna telah terpadam, pengguna perlu

Login semula untuk akses ke halaman terkawal.

Nota Sifu Azmi Page 20

#Baris ke 16 dan seterusnya adalah maklumat yang sama dengan laman

lain. Atau anda boleh ubahsuai mengikut keperluan anda.

PENUTUP:

#Anda hanya ditunjukkan bagaimana membuat borang, capaian ke

DBMS, membina query dengan Bahasa SQL, menulis Bahasa PHP,

HTML, CSS untuk membina antara muka yang sesuai dengan ringkas.

#Untuk melengkapkan aplikasi web anda, mungkin memerlukan

beberapa borang, laman carian dan paparan.

#Dengan panduan yang anda lalui tadi, kini anda boleh membina

sendiri halaman-halaman aplikasi web anda secukupnya.

#Semoga panduan ringkas dan bengkel ini dapat membantu anda

memahami apakah itu pangkalan data DBMS secara dalam talian dan

mengenali bagaimana pembangunan sebuah aplikasi web yang dinamik

menggunakan MySQL dan PHP. Selamat maju jaya!!!!.