TP2543 Web Programming

Assignment 2 (PHP + CSS + Bootstrap)

You are given the Biodata Form from the Week5Lab tutorial. You also had completed the saving (insert
SQL statement) function for the form in Week6Lab tutorial.
Your task is to:
1. Modify the form to be responsive to desktop and mobile. When users open the page from a
desktop, the form layout will be divided into 2 columns like :

1 col

Form first column

Form second column

1 col

where there are one blank column each on right and left side of the form. On the other hand,
when users open the page from a mobile device, the form will spread to take full length with
one blank column each on the right and left like:

1 col

Form

1 col
[10 marks]

2. Complete the saving function of the form. You dont need to develop the validation page. From
the form you can directly save the data into the database. To do that, you need to have the
biodata table as what you had completed in Week6Lab. Please refer to the tutorial.
[5 marks]
3. Add Bootstraps Dismissible alerts in the form. When users submit the form, the processing
page will redirect back users to the form page. You need to add dismissible alert on top of the
page to notify users that the saving operation was successful. In the alert, you need to write
Success! Record of <user_name> has been added, for example:
X
Success! Record of Faidzul has been added.

1 col

Form

1 col
[10 marks]

You can view the final output of this assignment based on a video at:
https://youtu.be/OR7FqmHh-yo
Here are the final screenshots:
Desktop

Mobile

Note that:
Please upload the form into your account in the server
Link the form in your MyPage in the IFolio.
Due Date: 22 May 2016 (Sunday)

All the best