PHP and HTML PHP: Hypertext Preprocessor Scripting at the server end allows for page customisation. Javascript may be used to make pages more interactive

PHP and HTML

PHP: Hypertext Preprocessor

• Scripting at the server end allows for page customisation.

• Javascript may be used to make pages more interactive on the client side.

PHP (see http://www.php.net/) is a way of combining scripting with HTML for "smart" page output.

PHP and HTML

Example use of PHP

Imagine that you want to know the "latest results in the European Indoor Championships".

A sports information server could deliver a static page, created by a person occasionally updating a HTML page…

Or the results could be pulled directly from a database maintained by the organisers of the games, formatted and output on demand.

PHP and HTML

Examples of simple output

Each of the three examples that follow has identical output.

PHP and HTML

Comparison of Examples: (old) HTML

<body>Text Size 0Text Size 1Text Size 2Text Size 3Text Size 4</body>

PHP and HTML

Comparison of Examples: JS

<body><script language="Javascript"></script></body>

PHP and HTML

Comparison of Examples: PHP

<body><?php for($i=0; $i<5; $i++) { echo "Text Size $i"; }?></body>

PHP and HTML

Entire Example PHP page<html><head> <title>Dynamic Output example</title> <link href="page.css" rel=stylesheet type="text/css"></head>

<body><?php for($i=0; $i<5; $i++) { print "Text Size $i"; }?></body></html>

*Can use echo instead of print

PHP and HTML

How you write PHP

• NAS prefers Eclipse with PHP extensions, a reference book and a reference web site – but a plain text editor will do!

• Others use Dreamweaver or Expression Web, a reference book and a reference web site

• These ways provide an environment for writing PHP with keyword highlighting

• Each has some help-based support• A good editor is useful if you cannot remember html tags or

PHP functions

PHP and HTML

"Superglobal" associative arrays

• PHP maintains lots of sets of useful information, most of which you’ll never need

• However, some of them are very useful in Web development• We will be using some of the following "superglobals". They

will be explained when required• They all contain many pairs of items (name->value) and we

can get the value if we know the name

PHP and HTML

PHP "Superglobals"

• $_GET– normally we don’t use this method– Variables provided to the script via URL query string, makes it easy to

see/change what was sent– Often a limit to the amount of data that can be sent

• $_POST– Variables provided to the script via HTML form “POST” method– Normally has a much higher limit on amount of data sent

• Best to use $_REQUEST to grab GET and POST data

PHP and HTML

Variables

• Integers (simple counting numbers)• Floating point numbers (for fractions)• Strings (text)• Objects (groups of different things)• Arrays (groups of things of the same type)• We suggest you use $nName for numbers and $sName for strings.• Ignore objects and arrays for the moment. • PHP is case sensitive so $nName is not the same as $nname

PHP and HTML

Numeric expressions

Add $nTotal = $nAmt1 + $nAmt2; Subtract -, multiply *, divide /

Comparisons Equal $nAmt1 == $nAmt2, Not Equal !=, Less than <, Greater than > Less than or equal to <=, Greater than or equal to >=

PHP and HTML

Strings

• Double quoted strings: $sFirstName="Mo"; $sLastName="Farah"; Print "Hello, $sFirstName $sLastName";

• This would print: Hello, Mo Farah

• Special characters:– \n newline, \$ dollar sign, \\ backslash, \" double quote

• Joining Strings: $sComplete = $sFirstName.$sLastName;

PHP and HTML

Conditional statements

if (expression) statement;

if (expression){ statement; statement;}// An expression example: $nCount<32

PHP and HTML

Conditional statements

if (expression){ statement;

statement;}else{ statement;

statement;}

if($nCount<31)

{ echo "okay!";

}

else

{ phpinfo();

}

PHP and HTML

More examplesif ($i==$j)

{ print "equal $i $j \n";

$i++;

}

else

{ print "unequal $i $j \n";

$i--;

}

Note puts a new line on your web page, \n puts a new line in the coding (i.e. if you open the source code it will have a new line).

PHP and HTML

For Loops

for (expression1; expression2; expression3){ statement; statement;}•e.g. expression1: $nCount=1 // start value•expression2: $nCount<10 // end value•expression3: $nCount++ // increment)

PHP and HTML

Example For Loop

// iteration with a counting loopfor($i=0; $i<5; $i++){ print "Text Size $i/n";}

// The loop counter “i” is [0..4] in this example

PHP and HTML

While Loops

while (expression){ statement; statement;}

•Continues while the expression is True•Stops when it is False

PHP and HTML

Example While loop

$i=0;while ($i<5){ print "Text Size $i/n";$i++; // could use $i=$i+1;}

PHP and HTML

What is HTML5?

• HTML4 became a W3C Recommendation way back in 1997

• HTML5 adds some new ways of structuring documents• It adds media handling and navigation awareness• It gets rid of some deprecated tags• It’s cleaner, more modern, more semantic, yet broadly

compatible with HTML4

Nic Shulver, FCET, Staffordshire University

PHP and HTML

Why is it important?

• Web page usage has changed a lot since the mid 1990’s• HTML5 provides a standardized platform for desktop and

mobile systems to use• HTML5 builds on the strengths of older HTML but

removes some weaknesses• Many developers will be comfortable with HTML5

immediately• Limited updating required for server-side code


PHP and HTML

How does it fit with PHP?

• PHP runs at the server• HTML5 markup is rendered at the browser• PHP is often used to generate HTML output• If you write valid HTML5 out from the server using

PHP, all is well


PHP and HTML

Pros and Cons

• HTML5 has many helpful features to simplify page and site design

• Additional tags and attributes and new ways of using those tags enhance semantic content

• For example: Kludgy solutions for technologies like audio output are replaced by a simple, clean approach

• But older browsers don’t support these goodies• Newer browsers cover big chunks of the HTML5 spec,

and much of CSS3 as well


PHP and HTML

Traditional HTML

• Traditional HTML pages will work well in HTML5-compliant browsers

• Many years will pass by before server-side output becomes predominantly HTML5-based

• Skills in HTML4 can be enhanced to take into account the stable parts of HTML5

• Note that HTML4 is still the most up-to-date, complete, published standard for web markup

• HTML5 may be fully ratified some time between 2014 and 2022!


PHP and HTML

Code examples<form method="post" action="somescript.php"> <label for="myName"> Your Name: </label> <input type="text" id="myName" name="myName" placeholder="N.E.Bodhi" required autofocus> <label for="myEmail"> Your Email: </label> <input type="email" name="myEmail" required placeholder="[email protected]"> <button type="submit">Send</button> </form>•A simple form which allows for “example text” in the input boxes.•Note that the form requires input in both fields before it can be sent.•Also note that the email input does some structural validation.


PHP and HTML

Critical appraisal of HTML5

• HTML5 has specific browser support, it's built into most modern browsers

• May not be available on older mobile devices• Trends in web app development are towards open

standards and vendor neutrality, key for businesses• It has taken a long time to develop• Support has been inconsistent• It is changing the web


PHP and HTML

Background Reading

• W3C: HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/

• What's New in HTML 5 - Jennifer Kyrninhttp://www.html5in24hours.com/2014/08/new-in-html5/

• 28 HTML5 Features, Tips, and Techniques you Must Know - Jeffrey Wayhttp://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/


PHP and HTML

Summary

• We have discussed:• Some of what PHP can do,• What PHP looks like,• Examples of PHP statements,• Background on HTML5,• Examples of HTML5.

Documents

PHP and HTML PHP: Hypertext Preprocessor Scripting at the server end allows for page customisation. Javascript may be used to make pages more interactive