2015‐2016

Phil Smith 

Learning outcome LO21. Be able to design web applications. (Assignment 2)

PreviouslyWe looked at types of users.Site analysisAccessibilityLegislationFunctionalityScripting LanguagesSecurity

Today1. Identification of need2. Design tools3. Database design4. php code

1 and 2 above you have already done in unit 14.

3 above has already been done in unit 33.

Databases We need a database for the implementation (assignment 2)

We decided this would be in MySql running on the college/computing hosting environment.

The database was designed in unit 33 but was written in Microsoft access (a desktop database system).

We need to convert this to MySql and upload this to your hosting site.

Database ‐ ERD

Database ‐ ERD I have produced this schema in MySql and exported it into an sql file.

This file may need a little tweaking but it can by imported into your MWS database using phpmyadmin.

This file is in the HND Share/Unit 35 folder on studshare named “MWS.sql”. There is a pdf with called “MWS.pdf” which contains a data dictionary and ERD.

Database – Task 1 If you do not already have a database setup with tables then use the file on studshare to create one.

Use phpMyadmin with your wiki login credentials.

Security We need to include security into our application for two features –

1. Allow a user to log in to track their order or order a new phone. We do not have time to write this functionality.

2. Allow an admin user to log in so that data on the site can be managed. We will develop pages to manage the products table but you are free to develop other pages if you wish.

Security So we are going to develop a login page to allow users to login.

If a non admin user logs in they will be re‐directed to an order page.

If an admin user logs in they will be directed to a manage products page.

Make sure your web site from unit 14 is available. Choose one of your pages as a template for the login page.

This page should be as basic as possible and have no html form inside it (if possible).

Setup Task 2 Add all of your unit 14 pages to a new project in phpStorm.

You can choose to create a new project from existing pages.

Log in But first ‐

We are going to check the credentials entered by the user against our database.

So we need to connect to our database on your hosting site.

Log in task 3 Add a new directory to your project (left of IDE)

Call this directory “connection” (keep it lower case).

Then add a new php file in this directory and name this “conn.php”.

We will also need to protect pages from being accessed if no user is logged in.

For this we will make use of sessions.

PHP Sessions A session is the time spent by a user browsing a particular website.

When a session is created, a unique Session ID is set up for the user that is subsequently made available to each page the user visits.

The Session ID is stored in a PHP system variable called PHPSESSID.

This allows information to be shared across pages (it can also be stored in cookies)

Uses When a user starts a shopping cart the items added to the cart could be contained in session data.

In our case we will use session data to say if a user is logged in and able to view protected pages.

Session initiation In php before you can use sessions you must

call a function to initialise the state.

<?phpsession_start();

?>

The session_start() function checks for an existing session. If one is not found, it creates a new session and gives it a Session ID.

Session initiation Task 4 Add this statement to your conn.php file after the

header comments.

session_start();

We can then set and check session variables.

Clearing a session Clear the contents of a particular session variable using the unset() function

We will use this with a logout function.

All session data will be destroyed.

Session data are variables we create where the content is remembered on the server between page requests in the same browser session. 

Connecting PHP to MySQL

• Now we need to use our database.

• First we need to establish a connection to the server and database.

• Then we can execute SQL to fetch (Select) and update data.

Connecting PHP to MySQL

• MySQL connection is done with the function• mysql_connect

• Selecting a database is done with the function

• mysql_select_db

• These functions still work fine but they are being deprecated in favour of pdo.

mysql_connect• This needs three parameters:

• The host name• The user name• The password

• Use the following variables and set their values appropriately:$hostname = “locahost";

$username = “YOUR MIS number";

$password = "YOUR_PASSWORD"; (wiki password)

mysql_connect• Mysql_connect is a function

• It takes three parameters and returns a value• Either a valid SQL link identifier which PHP sees as TRUE• Or FALSE if the connection failed

$conn = mysql_connect($hostname, $username, $password);

• The returned value will be assigned to the variable $conn

• If successful we will use it later

• If it fails we will trap the error

mysql_select_db• This needs two parameters:

• The database name• The valid SQL link identifier returned from mysql_connect

• Use the following variable and set its value appropriately:$db= “MISNumber_yourDatabase";

$db = mysql_select_db ($databaseName,$conn);

$db will be TRUE if the database has been selected

Task 5 Add this to conn.php$hostname = “localhost";$username = “MIS number";$password = "YourPassword"; $databaseName = “MISNumber_MWS"; $conn = mysql_connect($hostname, $username, $password);$db = mysql_select_db ($databaseName,$conn);if (! $db) {echo "MySQL connection FAILED<br /><br />";} else {if (!$db) {

echo "DB Connected FAILED<br /><br />";}

}

?>

Change to use your credentials

Error handlingThe preceding code is one example of error handling in php. Checking a return value from any function call is always a good idea and reporting errors on the screen is ok in testing but probably best written to a log file in the production environment.Remote web hosts usually always turn of error messages from built in error handlers and exception handlers as a security measure.

Conn.phpSo why have we put database connectivity into a php file of its own and in a separate directory (folder)?

The simple answer is security,

We will be able to include connection/conn.phpinto all of our php files.

Conn.php Task 6Test conn.php by deploying the directory and file to your hosting site and then run it in your browser.

You should get an empty screen and no error messages.

Design alternativesSo we are going to use the static website from unit 14 and make it into a dynamic website for this unit.

What alternative designs could we have used?

1. An android application, needs specific skills (Java) and specific platforms.

2. An iOS application, needs specific skills (Swift) and specific platform.

3. A static website, we already dismissed this one because of e‐commerce.

4. A non RWD web site, would not run well on devices. Does not scale well. Does not provide the best experience to your users.

Android and iOSNeeds specialist skills.iOS will only run on apple devices.Android will only run on android devices.

Access limited to owners of device.

No global coverage.

Static pagesGreater maintenance burden to continuously update and re-publish pages.No user interactivity.Could not operate an e-commerce site?Outdated in the modern world?

RWD pagesResponsive web design provides better experience for mobile users.

RWD renders better on devices.

Much better interactivity for the users provided.

Shorter development times due to provided functionality?

Technology alternativesASP - support being stopped by Microsoft.ASP.net – reliant on Microsoft technologies.php used in 70% of web applications worldwide,support reliant on community (Open source).Java – popular but has security flaws recently announced, support reliant on community (Open source)Cgi - outdated, support is limited.Coldfusion- popularity is declining.

ValidationAll input from users should be validate to help prevent malicious data being entered or even to prevent incorrect data.

Validation can be done in client side and server side scripts.

Client side scripts are not secure because any user can view the source of the page in the browser or even user the browser developer tools.

ValidationSo client side validation should be minimalistic and be repeated in server side scripting as well.

We will put some simple client side validation into the login page.

Log in Task 7 Open your website pages in phpstorm.

Create a new page and call it “login.php”. The php file extension is needed.

Save your new page (CTRL‐S).

You will need to integrate your web design into this page for assignment 2.

Log in Task 8 Now follow my lead to create a login page.

The page will include –1. HTML2. CSS3. JavaScript    (client side script for simple validation)4. PHP             (server side script)

Only the css will be in a separate file.

Finally Next lesson we will create the login page and use javascript for validation and php to check the login credentials against the database.

What have we learnt today?

Over to you?