Web programming TipsBy Sergey Skudaev
In this tutorial you will get the completed PHP script for Online Quiz, a PHP and MySQL application that you can use for any purpose for free. Link to download it you will find below. This application use fusebox technology and before you download it, I want to explain you its architeture.
The Fuse Box technology- was developed for ColdFusion Web programming. Later it was adopted by PHP programmers. In this free tutorial in web you will learn how to develop fuse box php application. The complete web application "Online Test" will show you how to implement security in PHP application. How to insert, and retrive data from MySQL database and more... The entire source code can be downloaded from this page.
The main idea behind Fuse Box is that your web application is made of modules. Each module has index page. Index page includes switch statement. Each template inside the module sends action to the index page and depending on action value, action is redirected to a third template. It is easy to understand by reviewing simple php code example.
Create index.php template with the following script:
<?php
import_request_variables("pgc","");
if($boxaction=="")
$boxaction="default";
switch ($boxaction)
{
case "confirm":
include('confirm_data_form.php');
break;
case "display":
include('dsp_data_form.php');
break;
case "default":
include('entry_data_form.html');
}
?>
Create entry_data_form.html page
<html> <head> <title>Fuse box test</title> </head> <body > <h3 align="center">Enter you name</h3> <br> <form method="post" action="index.php?boxaction=confirm"> <table cellpadding=10 cellspacing=0 align="center" bgcolor="#cccccc" border="3"> <tr> <td>First Name:</td> <td> <input type="text" name="firstname" size=10> </td> <tr> <td> Last name:</td> <td> <input type="text" name="lastname" size=10> </td> </tr> <tr> <td colspan=2 align="center"> <input type="submit" name="submit" value="Submit"> </td> </tr> </table> </form> </body> </html>
Create confirm_data_form.php template
<?php
print('<html>');
print('<head>');
print('<title>Fuse box test</title>');
print('</head>');
print('<body>');
print('<h3 align="center">Please confirm</h3>');
print('<form method="post" action="index.php ? boxaction=display">');
print('<table cellpadding=10 cellspacing=0 align="center" bgcolor="#cccccc" border="3">');
print('<tr>');
print('<td>');
print('First name:</td> <td> <input type="text" name="firstname" size=10 value="'.$firstname.'">');
print('</td>');
print('</tr>');
print('<tr>');
print('<td>');
print('Last name:</td> <td> <input type="text" name="lastname" size=10 value="'.$lastname.'">');
print('</td>');
print('</tr>');
print('<tr>');
print('<td colspan=2 align="center">');
print('<input type="submit" name="submit" value="Submit">');
print('</td>');
print('</tr>');
print('</table>');
print('</form>');
print('</body>');
print('</html>');
?>
Create dsp_data_form.php template
<?php
print('<html>');
print('<head>');
print('<title>Fuse box test</title>');
print('</head>');
print('<body>');
print('<h3 align="center"> Display Name </h3>');
print('<table cellpadding=10 cellspacing=0 align="center" bgcolor="#cccccc" border="3">');
print('<tr>');
print('<td>');
print('First name:</td> <td>'.$firstname.'</td>');
print('<tr>');
print('<td>');
print('Last name:</td> <td>'.$lastname.'</td>');
print('</tr>');
print('</table>');
print('</body>');
print('</html>');
?>
Save all templates in fusebox folder in htdocs directory.
Open Internet explorer and type in URL http://localhost/fusebox
The data entry form displays. Enter your first and last name and click Submit button. Confirm name form displays. Click Submit button. Display Name form displays.
The advantage of fuse box approach is better seen if your web application has many (hundreds) templates. Looking at index.php script it is easy to understand which template calls which template.
There is a naming convention for templates. For example you have templates that add user data to a database. Then the entry form template would have name add_user_form.php. The template that inserts user data in the database would have name act_add_user.php The template with form to edit user data would have name edit_user_form.php The template that updates database would have name act_update_user.php The template that displays user data would have name dsp_user_form.php
You can download more sofisticated example of fuse box application. The free Web Application is an online Exam. Exam.zip includes many templates. It required MySQL database. This Zip file includes all documentation.
Download exam.zip file with php code and extract it in the exam directory inside the htdocs directory. Place all php code files in exam directory. Create images directory and docs directory inside the exam directory. Place image files inside the images directory and tables.sql file inside docs directory. Place readme.txt document inside the docs directory for future reference.
Create all tables in MySQL database using tables.sql file. The fastest way to do that Is that: copy tables.sql file in MySQL\bin directory. Start MySql. In command prompt. Go to mysql\bin directory and type: mysqld.Press Enter. Then to start user interface, type: mysql -u root Press Enter
Create exam database. Type create database exam; Press enter.
Type: use exam; Press enter to select exam database.
To create tables and insert data in the students and questions tables type
source tables.sql
Tables will be created and data inserted.
Start Apache and Internet Explorer. Type URL address
http://localhost/exam
Login page displays. Login as sergeys with password password.
Take quiz and grade it. If some one else took quiz already you have to reset it. Click Users, View users and click reset exam. To add you as a new user, click Users option from main menu and add a user with user role.
Log out and login as a new user. Take the quiz. Click users option. Login page displays. New user role is not admin. Only admin can manage users. Login as admin. Click View all scores option. Scores Report displays. Go back and click user option. Click display users. I disabled edit or delete a user functionality in demo. Play with exam application and have fun
