Upload
claud-carpenter
View
233
Download
1
Tags:
Embed Size (px)
Citation preview
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
Comparison of Examples: (old) HTML
<body><p><font size="+0">Text Size 0</font></p><p><font size="+1">Text Size 1</font></p><p><font size="+2">Text Size 2</font></p><p><font size="+3">Text Size 3</font></p><p><font size="+4">Text Size 4</font></p></body>
PHP and HTML
Comparison of Examples: JS
<body><script language="Javascript"><!-- if viewed by an old browser or JS is turned off...for(i=0; i<5; i++){ document.write("<p><font size=+" + i + ">Text Size " + i + "</font></p>");}// --></script></body>
PHP and HTML
Comparison of Examples: PHP
<body><?php for($i=0; $i<5; $i++) { echo "<p><font size=+$i>Text Size $i</font></p>"; }?></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 "<p><font size=+$i>Text Size $i</font></p>"; }?></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 <br>\n";
$i++;
}
else
{ print "unequal $i $j <br>\n";
$i--;
}
Note <br> 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 "<p><font size=+$i>Text Size $i</font></p>/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 "<p><font size=+$i>Text Size $i</font></p>/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
Nic Shulver, FCET, Staffordshire University
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
Nic Shulver, FCET, Staffordshire University
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
Nic Shulver, FCET, Staffordshire University
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!
Nic Shulver, FCET, Staffordshire University
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><br> <label for="myEmail"> Your Email: </label> <input type="email" name="myEmail" required placeholder="[email protected]"><br> <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.
Nic Shulver, FCET, Staffordshire University
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
Nic Shulver, FCET, Staffordshire University
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/
Nic Shulver, FCET, Staffordshire University