Friday, June 13, 2014

5th : Dynamic Web using XAMMP

Langkah-langkah Membina Class Registration.
1.Untuk memulakan satu projek laman web, ADCS3 menyediakan fungsi untuk mencipta tapak web yang akan menempatkan kesemua fail-fail web seperti HTML, imej, multimedia, skrip seperti JavaScript, templat dan lain-lain. Ini memudahkan fail diurus/dipindahkan.


1.       Pergi pada Site > New Site
2.       Isikan nama site anda itu, contoh : projekfatinn
3.       Untuk URL site isikan http://localhost/exercise1/
4.       Then klik next
5.       Pilih “Yes, I want to use a server technology.
6.       Pilih server yang anda gunakan. Contoh PHP MySQL. Selepas itu klik next





7.        Kemudian, anda perlu test URL yang anda masukkan tadi.
8.       Kalau keluar box seperti di bawah, maknanya site anda Berjaya dibina.


9.       Finish 


.......................................................................................................................................................................
 
"Setup Database file in Access". Aplikasi yang digunakan adalah Microsoft Access. 

1. Pilih "new database" dengan mengklik "Blank Database"



2. Jangan lupa untuk menukar tapak menyimpan fail ini di dalam 

C:/xammp/myql/data/exercise1.mdb




3. Then klik butang create. Simpan fail database dalam MS 2002-2003 dengan format .mdb (exercise1.mdb)
4. Buat database anda dalam jadual seperti berikut :



5. Selepas itu masukkan apa yang anda mahu isi dalam database tersebut. Kita boleh pilih format untuk data yang mahu diisi, contohnya, textnumber atau lain lain. 



5. Untuk bahagian address dan remarks, anda perlu pilih data jenis "Memo" sebab ia boleh isi lebih banyak character berbanding Text. Bagi phone pula pilih numeric sebab jenis data adalah nombor.  






6. Seterusnya, simpan fail anda seperti di bawah :

a. Pergi File > Save&Publish > Save Database As > Access 2002-2003 Database > Save As





.......................................................................................................................................................................
 
 
Setup the Connection 

1.       Pergi File > New > PHP > create
2.       Pergi pada window di toolbar then klik panel databases.
3.       Klik tanda ‘+’ pada panel databases dan pilih “MySQL Connection”
4.       Apabila dah klik ia akan popup window seperti di bawah


5.       Isikan maklumat yang dikehendaki seperti di atas.
6.       Bagi username dan password ia adalah security yang telah kita buat dalam localhost xammp.
7.       Sekiranya tiada database untuk diconnectkan, bermakna anda tidak create database PHP menggunakan MySQL.
8.       Jadi anta hanya perlu pergi ke enjin pencarian internet anda, contohnya, GOOGLE dan type ‘localhost’. Sekiranya xammp anda telah dihidupkan, maka ia akan memaparkan seperti di bawah :


Sekiranya, ia memaparkan IIS maka anda perlu menghentikan server IIS dan menghidupkan server XAMPP dalam Xampp Control Panel. Sekiranya juga anda tiada XAMPP dalam computer anda, anda boleh mendownload ia melalui internet.

9.       Seterusnya, pergi pada security untuk menetapkan username dan password. Pastikan anda menghafal username dan password yang anda masukkan.

10.   Selepas selesai menetapkan username dan password, anda perlu mengklik pada bahagian tools iaitu phpMyAdmin untuk memasukkan database.


11.   Create table dalam MySQL. Then klik save.
12.   Apabila database anda dalam MySQL telah dibina, maka anda boleh membuat connection pada database tersebut.



13.   Apabila anda mengklik button test, window seperti di bawah akan keluar. Connection anda telah siap.


.......................................................................................................................................................................
   
Setup the Contact Form
1.       File > New > Blank Page > PHP > Create


2.       Insert > Form


3.       Selepas itu masukkan butiran yang dikehendaki then masukkan Textarea seperti gambar di bawah.

4.       Apabila anda memasukkan Textarea, window seperti di bawah akan keluar, anda hanya perlu klik ‘OK’. 

5.       Anda boleh mengedit Textarea anda melalui Properties.



6.       Jangan lupa untuk memasukkan button Submit di bahagian bawah form.


7.       Simpan fail anda di dalam site yang anda bina tadi 
C:/xammp/htdocs/projekfatinn


  
Writing a data into database using the Insert Record.

1.       Klik ‘+’ pada panel Server Behaviors dan pilih Insert Record



2.       Pilih connection yang anda telah buat sebelum ini dan masukkan table yang anda buat. Pastikan elemen yang diisi adalah sama dengan field yang anda buat dalam MS Access. When done, klik ‘OK’.



3.       Apabila anda telah membuat Insert Record, automatic tulisan dalam bahagian form akan bertukar berwarna cyan . Hal ini menunjukkan anda telah Berjaya Insert Record.
4.       Simpan fail anda. File > Save
 
Reading/Viewing a Data from a database using RecordSet
1.       RecordSet berfungsi untuk membaca semula data daripada fail database.
2.       File > New > PHP > Create > Insert > Form > Table
3.       Activate the Server Behaviors tab, klik ‘+’ dan pilih Recordset ( Query )


4.       Drag sahaja elemen-elemen tersebut masuk dalam table yang anda buat dalam view.php



 5.       Seterusnya, highlight semua bahagian dalam view.php, then klik ‘+’ button pada panel dan pilih Repeat Region.
6.       Pilih RecordSet1 dan pilih All Record kemudian klik ‘OK’.




.......................................................................................................................................................................
 
                                                                                                                                          
Execute the file
1.       Buka semula file register.php
2.       Masukkan view.php di bahagian ‘After inserting go to’ . klik OK.
3.       Simpan fail anda.
4.       Preview di browser.
5.       Isikan data anda dan klik Save.

Finish !
.......................................................................................................................................................................
 





No comments:

Post a Comment