Web Application

B.
SC (HONS) BUSINESS INFORMATION SYSTEMS
IWD3113:WEB APPLICATION PROGRAMMING
SEMESTER C 2009/2010
GROUP REPORT:ONLINE REGISTRATION
Start Date:26/06/2010
End Date: Monday, July 26th,2010
Student UEL ID:u0856313
IC.No:155947
Module Name: Web Application Programming
Faculty: Madam Sajitha Smiley
Title of the coursework: Online Registration
Type of the coursework: Assignment/IWD3113
Group Member:
UEL ID: u0957786
IC.No: ZN006021
Date of Submission: Friday, July 30th,2010

CONTENTS
1. Acknowledgements
2.0 Introduction
3.0 System Design
3.1Overview of the website
3.2Design Components
3.3 UML Diagram
3.3.1 Use case diagram
3.3.2 Sequence diagram
3.4 Web Application Structure
3.4.1Table Structure
3.4.2 Data Flow Diagram
4.0 Storyboards
4.1 Login
4.2 Register
4.3 Camp Reservation
4.4 Update
4.5 Delete
5.0 Interface Design
6.0 Sources and Executables Codes
7.0 Individual Report

1.0 ACKNOWLEDGEMENTS
We are thankful to Madam Sajitha for all her support and valuable guidance during the duration
of study for this module. We, Celestin Landry and Loren Moore are very pleased for having
worked together and having made this project a success.
U0856313
U0957786
Thank you!
2.0 Introduction
Boot camp is dynamic web portal that is used to make reservations for a camp, register and login
a user, and update and delete registered users data. In the following web application we came up
with a semi functional system to satisfy the above mentioned functions.
Therefore throughout our system users can register, login and update their data if any. The
application to be designed is made up of web pages, a database and a link between the two (PHP
codes).
Hence users will be glad to register and enjoy the functionality of our system by keeping in mind
the desired outcomes.
3.0 System Design
3.1 Overview of the website
The website is one that is semi functional in nature. Its main functionality is to make successful
reservations to the database, provide registration facilities, provide login for registered users,
update functionalities as well as delete functions. The site also acts as a source for advertising as
it showcases the services offered by the company. The website is made up of a number of pages
all linked via hyperlinks and is supported by a database to which all information is deposited
depending on a function. PHP is the code used to tie the website to the database.
3.2 Design components
The following project has been constructed using front-end software namely, Macromedia
Dreamweaver and back-end software namely PHP script.
Our system comprises of web pages such as:
Useradmin page: the page entered once a registered user access upon logging in. This
page provides the functions to update and delete entries made to the database.
Home page: first page introducing the website
Register page: page used to register users in order for them to access their information in
the database.
Update page: update an entry already made to the database
Delete page: deletes reservation already made to the database.
The linked pages are shown in white as well as the visited links.
The website is also supported by a database that is used as a central repository of all stored user
data. It comprises of three tables namely:
Campreservation: used to store data relating to reservations that have been made for the
camp
Campregistration: used to store data relating to registration information that has been
made.
Login: Registered users username and password stored to this table or verification.
3.3 UML diagram
3.3.1 Use Case diagram
Bootcamp Database
<<extend>>
view update entry Submit Criteria
<<extend>>
Login
Actor view delete entry
Register
Bootcamp
Make a Booking Use case
The following use case diagram shows the interaction within the system with different actors.
3.3.2 Sequence diagram
The sequence diagrams below are used to illustrate the order of actions for a particular function.
: customer Bootcamp PHP Camp
enter name ( )
enter password ( )
click "submit"
verify user ( )
check usernames and password
return
E1: Invalid
username and
password
display useradmin page ( )
The illustration above illustrates the sequence diagram used to login
click "register" link
enter name ( )
E1: user name not

enter password ( ) entered
Password not entered

click "submit"
Useraname and
password already in
codes manipulate data
use
data submitted to database
useradmin displayed ( )
The illustration above is used to illustrate registering

click "book now" link
enter name ( )
enter age ( )
enter nationality ( )
enter email ( )
enter physical address ( )
E1: data not entered

enter contact ( ) in particular field
click "submit"
verify data
data submitted to database
homepage displayed ( )
The illustration above illustrates the sequence diagram used to make a reservation for the camp.
click "update entry"
E1: No entry
enter name ( ) in db so table
will not be
displayed
display form
manipulate data ( )
data updated in database
record updated
The illustration above illustrates the sequence diagram used to update a camp entry made to the
database.
click "delete entry"
enter name ( )
click "submit"
click "delete" button
data deleted from database
record deleted
The illustration above illustrates the sequence diagram used to delete the camp entry made in the
database.
3.4 Web application structure
3.4.1 Table structure
The table structure is to depict the tables within the database used to store data.
Camp reservation table
Figure 1.0 above illustrates the camp reservation table in the database.
Registration table
Figure 2.0 illustrates the registration table

Login table
Figure 3.0 illustrates the login table in the database
3.4.2 Data flow diagram for the website
The following diagram shows how users should navigate through the content of the website.
Homepage
Login Register Activities Book Now
Update Profile Delete Profile
The following data flow diagram depicts the main function of the application upon registration, a
user can login to the system in order to update or cancel his or her profile and reservation
concerning the camp. The user can directly book from the site through Book Now hyperlinks or
function for particular events.
4.0 Storyboards
4.1 login
U0957786 & u0856313 23rd July 2010
Boot camp
Description of screen:
The following interface acts as the home page as well as the login in for registered users. He/she is
capable of accessing the client admin functions via the website upon submission of valid username
and password.
Audio: Nil Video: Nil
Animation: Nil Background: grey_background.gif
Graphics: Nil Script: Dreamweaver, PHP
Pictures: bootcamp. jpg Others: Nil
Comments: Nil
4.2 Register
U0957786 & u0856313 23rd July 2010
Boot camp
The following interface is used to register; the user enters a username and password and submits it to
the database.
Comments: Nil
4.3 Camp reservation
U0957786 & u0856313 23rd July 2010
Boot camp
The following interface acts as the home page as well as the login in for registered users. He/she is
capable of accessing the client admin functions via the website upon submission of valid username
and password.
Comments: if any of the fields is left empty and error will be displayed to ensure all data is entered
before submission to the database.
4.4 Update
U0957786 & u0856313 23rd July 2010
Boot camp
The following interface is used for updating data that has already been submitted to the database.
Update
data in
table
Comments: Upon re-entering data the new entry overwrites the previous entry
4.5 Delete
U0957786 & u0856313 23rd July 2010
Boot camp
The following interface is used for deleting data stored to the database already
Presses
delete to
remove
Comments: Once the delete button is pressed the entry in the database is removed
5.0 Interface design
Below is an illustration of the main interface design
Figure 1.0
6.0 Source and executable codes
6.1 Welcome page code
The following code was used for the welcome page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>camp home</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">

</style>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<tr>
<td width="17%" height="197"></td>
<td width="66%">
<div align="center"><img src="camp images/boot-camp-clik-logo.jpg" alt="bootcamp" width="600"

height="172"></div></td>
<td width="17%"></td>
</tr>
<tr>
<td height="277"></td>
<td>
<tr>
<td width="10%"><div align="center"><a href="bootcamphome.php" class="style4">Home</a></div></td>
<td width="10%"><div align="center"><u><strong><a href="#">Services</a></strong></u></div></td>
<td width="10%"><div align="center"><strong><u><a href="#">Activities</a></u> </strong></div></td>
<td width="10%"><div align="center"><a href="bootcampindex.html" class="style4">Book Now! </a></div></td>
<td width="10%"><div align="center"><u><strong><a href="#">Contact Us</a></strong></u></div></td>
<td width="10%"><div align="center"><u><strong><a href="#">Pictures</a></strong></u></div></td>
</tr>
</table>
<hr>
<p>Boot camp a freindly and healthy environment used to toughen up<img src="camp images/imagebvs.jpeg"
alt="canoe" align="right" width="277" height="163"> </p>
<p>and let those shy kids excel! No one is ever to big or to small to come and have the experience of a life time!
games, wilderness camps, and so much more to bring out the confidence in YOU! </p>
<p>If your a kid and your looking for a new adventure wonder look no further boot camp is just the place for you! with
plenty of room to run around and play and make life lonf friends!</p>
<p>So when schools out, make sure your in the sweetest place to be!!! </p></td>
<td></td>
</tr>
<tr>
<td><form name="form1" method="post" action="logincon.php">
<span class="style1"> Login </span>
<table align="left" width="38%">
<caption style="font-size:12px">
</caption>
<tr>
<td><span class="style2">Username:</span></td>
<td><input type="text" name="username" id="username" size="30"></td>
</tr>
<tr>
<td><span class="style2">Password</span>:</td>
<td><input type="password" name="password" id="password" size="30"></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="Clear" name="clear">
|
<input type="submit" value="Send" name="send"> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p class="style2">Or click on the link to <span class="style3"><a href="registration.html"

class="style1">register</a></span> </p>
</form></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
6.2. Registration code
The following code was used for registration
<html><title>register</title>
<?php
$username=$_REQUEST['username'];
if(empty($username))
echo"<p>You forgot to enter your username!</p>";
//validate Password.
$password=$_REQUEST['password'];
if(empty($password))
echo"<p>You forgot to enter your password!</P>";
if($username && $password){
//Connecting to the database.
$con=mysql_connect("localhost","root","root");
mysql_select_db("camp",$con);
$sql="SELECT * FROM users WHERE Username='$username' AND Password='$password'";

$res=mysql_query($sql);
//execute the query
if (mysql_numrows($res) != 0) {
echo"<p><font color=red>Username and Password exist already! Enter new username & pass</font></p>";
echo"<a href=index.php>Register again</a>";
else{
$insert_query="INSERT INTO campregistration (Username,Password) VALUES ('$username','$password')";
mysql_query($insert_query);
$insert_query="INSERT INTO login (Username,Password) VALUES ('$username','$password')";
mysql_query($insert_query);
header("Location:useradmin.html");
mysql_close($con);
else{
echo"<p><font color=red>Please go back and fill out the form again.</font></p>";
echo"<p><a href=register.html>Register</a></p>";
?>
</html>
INDIVIDUAL REPORT:ONLINE REGISTRATION
A) How to create a database?

To create a database we need to connect to localhost, any web server in your computer, it
could be Wamp server or Easywamp or Xampp whichever you chose, and you can use any of
this server to create your database. While logging to Easywamp in order to get connected you
need to enter your username and password by default the username and password is: root.
Fig1: Localhost/Easywamp web server welcome page.
.
Fig2: Username and Password are requested in order to get connected and create your database.
Fig 3: Upon successful connection you have to click on the create new database
button following by the name of your database.
B) How to connect a database?
In order to connect to the database we need to write within the notepad or PHP in
Dreamweaver code view the following syntax:
• Mysql_connect(servername,username,password)
Parameter Description
Servername Optional. Specifies the server to connect to. Default value is "Localhost”
Username Optional. Specifies the username to log in with. Default value is the name of the user that
owns the server process
Password Optional. Specifies the password to log in with. Default is "", in our case the default is root.
In the following example we store the connection in a variable ($con) to use in the script. The
die part will be executed if the connection fails:
<? php
$con=mysql_connect (“localhost”,”root”,”root”);
If(!$con)
{
Die (‘Couldnot connect:’.mysql_error ());
}
//some code here…
?>
C) How to insert data?

In order to insert we can type the following code in our text editor such as notepad or through
PHP in dreamweaver code view. We can also insert data in a table using phpadmin in Easywamp
interface. This will be the code in the example below:
<? php
$con=mysql_connect (“localhost”,”root”,”root”);
mysql_query (“INSERT INTO Campreservation (Name, Age, Nationality) VALUES
(‘landry’,’14’,’gabonese’);
mysql_close ($con);
?>
D) How to delete data?
In order to delete data we can type the following code in our text editor such as notepad or
through PHP in dreamweaver code view. We can also insert data in a table using phpadmin in
Easywamp interface. This will be the code in the example below:
<?php
$name=$_REQUEST['name'];
$sql="DELETE FROM campreservation WHERE name='$name'";
mysql_query($sql,$con);
mysql_close($con);
?>
E) How to select data?

In order to select data we can type the following code in our text editor such as notepad or
<?php
$con=mysql_connect(“localhost”,”root”,”root”);
Mysql_select_db(“camp”,$con);
$sql=”SELECT * FROM Campreservation WHERE name=’loren’”;
Mysql_query($sql,$con);
Mysql_close($con);
?>
F) How to update data?

In order to update data we can type the following code in our text editor such as notepad or
<?php
$age=$_REQUEST['age'];
$nationality=$_REQUEST['nationality'];
$email=$_REQUEST['email'];
$address=$_REQUEST['address'];
$contact=$_REQUEST['contact'];
$query="UPDATE campreservation SET
name='$name',age='$age',address='$address',nationality='$nationality',email='$email',contact='$contact'
WHERE name='$name'";
if(!mysql_query($query,$con))
{
die('Error:'.mysql_error());
}
else
echo "Record Updated";
?>
G) Part Undertook: Codes

In the following project I was in charge of writing codes as well as drawing use case diagram
and data flow diagram (DFD).The codes written was update code, delete code as well as
register code.
H) Time Frames/Problems
Doing this project, our main problem was the time allocated for the project, nevertheless we
submitted our project in due time. Moreover writing codes was not so easy we face some
challenging while writing the update and delete codes. All records should have been shown
in tables according to the assignment paper, where users will update and delete their
information if any. We were not able to see the tables only the php codes scripts errors. After
several tries we came out with the said tables and functions so that users can view their data
and update it or delete it.
APPENDICES
Appendix A: References
James A. O’Brien, 2003, Introduction to Information Systems, Essentials for the e-
Business Enterprise, 4th edition.
Julie Meloni, Matt Telles, 2008, PHP6, Fast & Easy Web Development.
Appendix B: Codes
1. Update.php code
<html>
<head>
<title>Update</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">

</style>
</head>
<body>
<tr>
<td width="17%" height="197"></td>
<td width="66%">
<div align="center"><img src="camp

images/boot-camp-clik-logo.jpg" alt="bootcamp" width="600" height="172"></div></td>
<td width="17%"></td>
</tr>
<tr>
<td>
<table width="100%" border="0"

cellspacing="2" cellpadding="1">
<tr>
<td width="10%"><div align="center"><a href="bootcamphome.php"

class="style1">Home</a></div></td>
<td width="10%"><div align="center"></div></td>
<td width="10%"><div
align="center"></div></td>

</tr>
</table>
<hr>
</head>
<body>
<?php
$age=$_REQUEST['age'];
$nationality=$_REQUEST['nationality'];
$email=$_REQUEST['email'];
$address=$_REQUEST['address'];
$contact=$_REQUEST['contact'];
$query="UPDATE campreservation SET

name='$name',age='$age',address='$address',nationality='$nationality',email='$email',contact='$conta
ct' WHERE name='$name'";
if(!mysql_query($query,$con))
die('Error:'.mysql_error());
else
echo "Record Updated";
?>
</body>
</html>
2. Login.php code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<?php
//connect to the database server
$con=mysql_connect("Localhost","root","root");
$username=$_REQUEST['username'];
$password=$_REQUEST['password'];
//select the database
//query
$sql="SELECT * FROM login WHERE Username='$username' AND Password='$password'";
//execute the query
$result=mysql_query($sql,$con);
if(mysql_numrows($result)==0)
echo"<p><font color=red>Invalid Username and Password!</font></p>";
else
header("Location:useradmin.html");
mysql_close($con);
?>

Web Application

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Application

Uploaded by

Copyright:

Available Formats

B.

SC (HONS) BUSINESS INFORMATION SYSTEMS

IWD3113:WEB APPLICATION PROGRAMMING

End Date: Monday, July 26th,2010

Student UEL ID:u0856313

Module Name: Web Application Programming

Faculty: Madam Sajitha Smiley

Title of the coursework: Online Registration

Type of the coursework: Assignment/IWD3113

UEL ID: u0957786

Date of Submission: Friday, July 30th,2010

3.0 System Design

3.1Overview of the website

3.3 UML Diagram

3.3.1 Use case diagram

3.3.2 Sequence diagram

3.4 Web Application Structure

3.4.2 Data Flow Diagram

4.3 Camp Reservation

5.0 Interface Design

6.0 Sources and Executables Codes

7.0 Individual Report

3.1 Overview of the website

3.2 Design components

Our system comprises of web pages such as:

Home page: first page introducing the website

Update page: update an entry already made to the database

Delete page: deletes reservation already made to the database.

3.3.1 Use Case diagram

Actor view delete entry

: customer Bootcamp PHP Camp

check usernames and password

display useradmin page ( )

The illustration above illustrates the sequence diagram used to login

: customer Bootcamp PHP Camp

click "register" link

E1: user name not

Password not entered

data submitted to database

The illustration above is used to illustrate registering

click "book now" link

enter physical address ( )

E1: data not entered

data submitted to database

click "update entry"

codes manipulate data

data updated in database

: customer Bootcamp PHP Camp

click "delete entry"

click "delete" button

codes manipulate data

data deleted from database

3.4.1 Table structure

Camp reservation table

Figure 2.0 illustrates the registration table

Figure 3.0 illustrates the login table in the database

3.4.2 Data flow diagram for the website

Login Register Activities Book Now

Update Profile Delete Profile

U0957786 & u0856313 23rd July 2010

Audio: Nil Video: Nil

Animation: Nil Background: grey_background.gif

Graphics: Nil Script: Dreamweaver, PHP