PHP on a Fast Track and other web development techniques a quick introduction to web programming by...

PHP on a Fast Trackand other web development techniques

a quick introduction to web programmingby Jarek Francik

Teaching Objectives

• To ensure everyone of you have at least basic understanding of server-side processing

• To introduce some basic PHP• To demonstrate what makes a

good web project (and what doesn’t)

What is a project?

A project is a temporary endeavour undertaken to create

a unique product or service

A project is...• a defined, unique venture or undertaking, that• requires the effort or activities of people• who have defined roles and responsibilities• within a finite life-span, time-scale or schedule• using specified resources and budgets, and• has specific goals or objectives to achieve• to which measures of quality can be applied• that brings about some change in the status quo• to provide sustainable benefit to some business, organisational or

individual need

Project Snettisham

Project Snettisham

Research:• 50,000 birds swirling like smoke clouds• Oystercatchers, godwits, knots...• Snettisham RSPB Reserve in Norfolk• Best time: autumn, when most birds migrate

LOOK FOR MORE INFORMATION!

Project Snettisham

Research (cont.):• The flocks take to the air as the high tide races in,

covering their feeding grounds. They sit out high tide and return once the tide falls

• Spectaculars happen only in the mornings• The higher the tide

the better chances to see it!

Project Snettisham

• Need a really high tide early in the morning...• UK Tides (Apple Store)

USE PROPER TOOLS!

Project Snettisham

• Need a really high tide early in the morning...• UK Tides (Apple Store)• Timetables ready on the RSPB site!

USE VARIOUS SOURCES OF INFORMATION

Project Snettisham

• Need a really high tide early in the morning...• UK Tides (Apple Store)• Timetables ready on the RSPB site!• Three days trip 17-19 Nov

(to also see the Pink Footed Geese!)

PLANNING IS CRUCIAL

Project Snettisham

• Need a really high tide early in the morning...• UK Tides (Apple Store)• Timetables ready on the RSPB site!• Three days trip 17-19 Nov

(to also see the Pink Footed Geese!)• Accommodation!

PLANNING IS CRUCIAL

Project Snettisham

• Need a really high tide early in the morning...• UK Tides (Apple Store)• Timetables ready on the RSPB site!• Three days trip 17-19 Nov to see the

Pink Footed Geese as well!• Accomodation!• Transport...• Anything else...

PLANNING IS CRUCIAL

What is a project?



• Snettisham Trip is a project• A trip to Winkworth Arboretum last Saturday

wasn’t a project

why?

What is a project?



• A bespoke e-commerce solution for a company who need it is a project

• A novel HCI solution is a project• A routine PC maintenance is not a project

why?

What is a project?



• A typical on-line store for a small company...hardly is a good project

why?

PHP on a Fast Track

Client & Server

Client Server

Client & Server

Client Server

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

CLIENT SIDE PROCESSING

Client Server

REQUEST: GET

RESPONSE: HTML

Files served over the network may contain HTML, CSS, JavaScript,Flash and may be pretty much complex!

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File SystemREQUEST: GETRESPONSE: HTML

Client & Server

Client Server

REQUEST: POST

RESPONSE: HTML

Remote File SystemRESPONSE: HTML

REQUEST: POST

DB

Client & Server

Client Server

REQUEST: POST

RESPONSE: PHP

Remote File SystemREQUEST: POSTRESPONSE: PHP

DB

SERVER SIDE PROCESSING

Great Hiking ShoePerfect Company

Client-Side Processing Server-Side Processing

DB

Client-Side Processing• Executed locally, on client’s

computer• Results visible immediately

• Fast & dynamic• Processing within a single

webpage• Information cannot be shared• No Databases*• Keeping things secret is very

difficult – everything is on the user’s computer* Limited local database functionality is available in HTML5, but without sharing

Server-Side Processing• Executed remotely, on

a web server• Results must be sent over the

network• Network latency• Pages must be re-loaded in

order to view the results*• Information easily shared• Database back-end• Flexible and powerful security

control * AJAX technology allows for remote updates without pages being reloaded but technically it is a combination of server side and client side technologies

PHP

• Scripting language for web development• Created by Rasmus Lerdorf 16 years ago• Currently phasing out• Easy to learn but time-consuming to use

Let’s writea shopping cart application

What do we need?

• Operating System• Web Server• Database• Scripring Language

Windows, Linux, MacOS...Appache, IIS, WEBrick...MySQL, Postgres, SQLite, Oracle...PHP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


Linux, Windows, MacOS...Appache, IIS, WEBrick...MySQL, Postgres, SQLite, Oracle...PHP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


MacOS, Windows, Linux...Appache, IIS, WEBrick...MySQL, Postgres, SQLite, Oracle...PHP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


X - PlatformAppacheMySQL PHP Perl

DB

What do we need?


XAM P P

DB

XAMPP

http://www.apachefriends.org/en/xampp.html

or google for “xampp”

http://www.apachefriends.org/en/xampp.html

XAMPP

1. Download and install – it’s easy2. Run XAMPP Control Panel3. Start Apache & MySql4. Run in your browser:

http://localhost5. Click Explore and go

to htdocs to browseyour web files

6. Use MySql Admin tosetup your databasewith mySqlAdmin

http://localhost/

phpMyAdmin

KU Server

• There is a web server available for you at

http://studentnet.kingston.ac.uk

• Find all details there (or check the end of this presentation)

http://studentnet.kingston.ac.uk/

Database structure (SQL)USE test; CREATE TABLE goods ( id int(6) unsigned NOT NULL auto_increment, item varchar(100) NOT NULL default '', price decimal(6,2) NOT NULL default '0.00', image varchar(100) NOT NULL default '', PRIMARY KEY (id) );

INSERT INTO goods VALUES (1, 'Soap', '4.99'); INSERT INTO goods VALUES (2, 'Strawberry Jam', '1.99'); INSERT INTO goods VALUES (3, 'Toothpaste', '2.49'); INSERT INTO goods VALUES (4, '8GB Memory Stick', '22.99');

The First PHP File<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head>

<title>Your Cart</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head> <body> <h1>Your Cart</h1> <?php

?></body></html>

cart.php0

The First PHP File<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head>

<title>Your Cart</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head> <body> <h1>Your Cart</h1> <?php echo "Hello, world!"; ?></body></html>

cart.php

Another File: Front Page<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head>

<title>Your Shop</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head><body> <h1>Your Shop</h1> <ul> <li><a href="cart.php?action=add&id=1">Add item #1 to the cart</a></li> <li><a href="cart.php?action=add&id=2">Add item #2 to the cart</a></li> <li><a href="cart.php?action=add&id=3">Add item #3 to the cart</a></li> <li><a href="cart.php?action=add&id=4">Add item #4 to the cart</a></li> </ul> <p><a href="cart.php?action=show">Show your cart</a></p></body></html>

index.php1

What the application should do

• http://localhost/cart.php?action=show• http://localhost/cart.php?action=add&id=2

http://localhost/cart.php?action=show


http://localhost/cart.php?action=add&id=2

What the application should do

• http://localhost/cart.php?action=show• http://localhost/cart.php?action=add&id=2

<?php $action = $_GET['action']; $id = $_GET['id']; echo "<p>DEBUG: Action to do is $action, and item id is $id.</p>";?>

cart.php1



http://localhost/cart.php?action=add&id=2

Make information persistent

• HTTP as a stateless protocolprotocol with no memory of who you are

• Cookies• Sessions• Session variables

$_SESSION['cart']

Name of the variable

Collection of session variables

Make information persistent<?php session_start(); ?> must appear in the

first line (before DOCTYPE)

cart.php

Make information persistent<?php session_start(); ?>

......

<?php $cart = $_SESSION['cart']; $action = $_GET['action']; $id = $_GET['id'];

echo "<p>DEBUG: Action to do is $action, and item id is $id.</p>"; if ($action == 'add') { $cart = $cart . ",$id"; $_SESSION['cart'] = $cart; } echo "<p>DEBUG: Cart is: $cart</p>";?>

must appear in the first line (before

DOCTYPE)

cart.php2

Display Your Cart<?php $cart = $_SESSION['cart']; $action = $_GET['action']; $id = $_GET['id'];

if ($action == 'add') { $cart = $cart . ",$id"; $_SESSION['cart'] = $cart; } $myitems = explode(',', $cart); // explode using comma as a separator if (count($myitems) <= 1) echo "<p>Your cart is empty.<p>"; else foreach ($myitems as $i) if ($i != '') { echo "<p>Item id: $i</p>"; }?>

cart.php3

Connect to the Database<?php $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = 'elvis'; // put here your MySQL root password // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("test", $con); // choose the test database ...

cart.php

Connect to the Database<?php $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = 'elvis'; // put here your MySQL root password // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("test", $con); // choose the test database ...

Provide the proper username & password

(the latter maybe ‘’)

cart.php

Display Your Items.... foreach ($myitems as $i) if ($i != '') { $result = mysql_query("SELECT * FROM goods WHERE id = $i"); $row = mysql_fetch_array($result); $item = $row['item']; $price = $row['price']; echo "<p>$item: £$price</p>"; }?>

cart.php4

Final Polishings

cart.php:• Better HTML formatting• Total price of the cart calculated

index.php:• Connected to the database

<?php session_start(); ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head>

<title>Your title here</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head> <body> <h1>Your Cart</h1><?php $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = 'elvis'; // put here your MySQL root password // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if failed mysql_select_db("test", $con); // choose the test database $cart = $_SESSION['cart']; $action = $_GET['action']; $id = $_GET['id']; if ($action == 'add') { $cart = $cart . ",$id"; $_SESSION['cart'] = $cart; }

$myitems = explode(',', $cart); // explode using comma as a separator

if (count($myitems) <= 1) echo "<p>Your cart is empty.<p>"; else { echo "<table>"; $total = 0; foreach ($myitems as $i) if ($i != '') { $result = mysql_query("SELECT * FROM goods WHERE id = $i"); $row = mysql_fetch_array($result); $item = $row['item']; $price = $row['price']; $total += $price; echo "<tr><td>$item</td><td>£$price</td></tr>"; } echo

"<tr><td><strong>Total</strong></td><td><strong>£$total</strong></td>";

echo "</tr></table>"; }?><p>[<a href="index.php">Home Page</a>]</p> </body></html>

cart.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<?php $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = 'elvis'; // put here your MySQL root password // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if failed mysql_select_db("test", $con); // choose the test database ?> <html> <head> <title>Your Shop</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  </head>

<body> <h1>Your Shop</h1> <table> <?php

$result = mysql_query("SELECT * FROM goods");while ($row = mysql_fetch_array($result)){

$id = $row['id']; $item = $row['item']; $price = $row['price']; echo "<tr>";echo "<td>$item</td>";echo "<td>£$price</td>";echo "<td><a href=\"cart.php?

action=add&id=$id\">add to cart</a></td>";echo "</tr>";

};mysql_free_result($result);

?> </table> <p><a href="cart.php?action=show">Show your

cart</a></p> </body></html>

index.php

Other Possible Options

• PHP• ... ???

Other Possible Options

• PHP• ASP.NET• Java• Python• Perl• Ruby on Rails

So, which way to go?

The goal of this lecture isto show that PHP

is rarely a good choice!

Online Store Created with Ruby on Rails

watch at:http://vimeo.com/30927971

http://vimeo.com/30927971

How to do a good web project?How to avoid a bad web project?

• PHP is still popular for some simple tasks• There are some really powerful frameworks

written in PHP – e.g. Magento (Open Source)• PHP is now 17 years old! (1995 - 2012)

consider something newer!


• Writing a web app from scratch is anachronism!

?


• Writing a web app from scratch is anachronism!

• Research – use various sources of information• Use proper, modern tools• Planning is crucial• Wherever possible, build on top of something

other people did


On-Line Store:• a bespoke solution in PHP – from scratch• a bespoke solution in Rails – from scratch,

but with substantial support from the framework• open source solution: Magento (as )• hosted solutions: Shopify, Volusion

build something exciting on top of available systems

So what to choose?

• Your project should be based on what you learned during the course

• It doesn’t mean you must not learn anything new!

• Use your experience, do a research, READ,be brave!

• Try to do something unique

THE END

How to use studentnet


• Your personal website is http://studentnet.kingston.ac.uk/~k01234567(provide your correct k-number)

• To upload files, you will need a FTP client program to send your files to the server.

Here are configuration settings for Filezilla:– Host: studentnet.kingston.ac.uk– Protocol: SFTP– User: k01234567 (your normal k number)– Password: ******** (your normal password)

http://studentnet.kingston.ac.uk/~k01234567

How to use studentnet• To configure your database:

go to Database Management Tool (link available at the main page http://studentnet.kingston.ac.uk, login with your standard KU knumber and password).

• First time, you will be asked to configure the name of your database and the password – remember them!

• You will then be able to Manage Database. Use your KU k-number and the database password (you created it in the previous point).

• You will find yourself in phpMyAdmin. Use it to create faces table and populate it with data, exactly the same as we did it with XAMPP

http://studentnet.kingston.ac.uk/


• Before uploading your application you have to setup the connection for the new server – see the example below (do it for each PHP file that connects to the DB):

$hostname = 'studentnet.kingston.ac.uk'; // URL of the server $username = ‘k01234567'; // replace with your real username$password = ‘elvis'; // your MySQL database password should go here // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("db_k01234567", $con); // replace with your real db name

PHP on a Fast Track and other web development techniques a quick introduction to web programming by...

Documents

Transcript of PHP on a Fast Track and other web development techniques a quick introduction to web programming by...