Difference between revisions of "PHP102"

From mi-linux
Jump to navigationJump to search
 
(20 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
== I've got my first file working, what's next? ==
+
[[Main Page]] >> [[CP2228|Web Application Development]] >> [[PHP|Workbook]] >> A Basic Page
−
As you know from CP1082 (HTML), writing valid HTML is critical to the success of a website - this is no different when writing PHP.
 
−
 
 
−
* PHP can output HTML
 
−
 
 
−
For the vast majority of what you want to accomplish with PHP, you will likely what to output some information in the form of a webpage.  Webpages need to consist of valid HTML, so PHP needs to output '''VALID HTML'''.  We'll continue to use Transitional HTML 4.01 unless you feel confident enough to attempt the Strict version - either will be valid for assessments on CP1079.
 
  
 
== Exercise 2 - First VALID PHP/HTML page ==
 
== Exercise 2 - First VALID PHP/HTML page ==
Line 12: Line 7:
 
2. Code the following exactly - DO NOT CUT AND PASTE - you will not learn by just pasting this.
 
2. Code the following exactly - DO NOT CUT AND PASTE - you will not learn by just pasting this.
  
−
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+
  <nowiki><!DOCTYPE html>
−
"http://www.w3.org/TR/html4/loose.dtd">
+
  <html lang="en">
−
 
+
   <head>
−
  <HTML lang="en">
+
     <meta charset="UTF-8">
−
   <HEAD>
+
     <title>My First Valid HTML/PHP page</title>
−
     <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
+
   </head>
−
     <TITLE>My First Valid HTML/PHP page</TITLE>
+
   <body>
−
   </HEAD>
+
    <?php
−
   <BODY>
+
      $myname = "Alix";
−
<?
+
      echo "Hello - I am ".$myname;
−
  $myname="Matthew";
+
    ?>
−
  echo "Hello - I am ".$myname;
+
   </body>
−
?>
+
  </html></nowiki>
−
   </BODY>
 
−
  </HTML></nowiki>
 
  
 
3. Save this in your public_html folder as "exercise2.php"
 
3. Save this in your public_html folder as "exercise2.php"
Line 32: Line 25:
 
4. Open your preferred browser and point it to http://mi-linux.wlv.ac.uk/~YOURSTUDENTNUMBER/exercise2.php
 
4. Open your preferred browser and point it to http://mi-linux.wlv.ac.uk/~YOURSTUDENTNUMBER/exercise2.php
  
−
5. The result should look like the following screenshot - if it does not, take a look at [[Troubleshooting PHP]] to help understand common error messages in PHP.
+
5. The result should look like the following screenshot.
  
−
[[Image:second.png]]
+
https://mi-linux.wlv.ac.uk/wiki-images/PHP102-01.png
  
 
== Understanding Exercise 2 ==
 
== Understanding Exercise 2 ==
Line 40: Line 33:
 
As you can see, you can combine HTML and PHP commands in one file, but the file must have a '''.php''' extension for it to be handled correctly by the webserver
 
As you can see, you can combine HTML and PHP commands in one file, but the file must have a '''.php''' extension for it to be handled correctly by the webserver
  
−
* The first line/s contain the DOCTYPE or DTD - see HTML teaching notes for details on this if you're not sure
+
* The first line contains the DOCTYPE or DTD - see HTML teaching notes for details on this if you're not sure
  
−
* <nowiki><HTML lang="en"></nowiki>
+
* <nowiki><html lang="en"></nowiki>
 
** this is the start of the HTML file with the language attribute set to English - this is used by some validators
 
** this is the start of the HTML file with the language attribute set to English - this is used by some validators
  
−
* <nowiki><HEAD></nowiki>
+
* <nowiki><head></nowiki>
 
** this is the start of the heading section of the webpage, where components such as title, meta tags, and style are defined
 
** this is the start of the heading section of the webpage, where components such as title, meta tags, and style are defined
  
−
* <nowiki><META...></nowiki>
+
* <nowiki><meta...></nowiki>
 
** this line is used by some validators to understand the character set the page has been written in - more information can be found on [http://validator.w3.org/docs/help.html#faq-charset W3C Validator-Character encoding FAQ] or more general information on troubleshooting W3 validator responses can be found at [http://validator.w3.org/docs/help.html W3C Validator FAQ]
 
** this line is used by some validators to understand the character set the page has been written in - more information can be found on [http://validator.w3.org/docs/help.html#faq-charset W3C Validator-Character encoding FAQ] or more general information on troubleshooting W3 validator responses can be found at [http://validator.w3.org/docs/help.html W3C Validator FAQ]
  
−
* <nowiki><TITLE...></nowiki>
+
* <nowiki><title...></nowiki>
 
** this sets the title of the browser window that the page appears in - a common mistake is to believe this prints out somewhere in the body of a webpage - it does not - look at your window title bar and taskbar for evidence of where this appears
 
** this sets the title of the browser window that the page appears in - a common mistake is to believe this prints out somewhere in the body of a webpage - it does not - look at your window title bar and taskbar for evidence of where this appears
  
−
* <nowiki></HEAD></nowiki>
+
* <nowiki></head></nowiki>
 
** the end of the heading section
 
** the end of the heading section
  
−
* <nowiki><BODY></nowiki>
+
* <nowiki><body></nowiki>
 
** the start of the body of the webpage - the visible output shown in a page
 
** the start of the body of the webpage - the visible output shown in a page
  
−
* <nowiki><?</nowiki>
+
* <nowiki><?php</nowiki>
 
** these symbol indicates the start of PHP content in your page - everything from this point on is executed by the PHP program
 
** these symbol indicates the start of PHP content in your page - everything from this point on is executed by the PHP program
  
−
* <nowiki>$myname="Matthew";</nowiki>
+
* <nowiki>$myname = "Alix";</nowiki>
−
** this creates a variable called "myname" and puts "Matthew" into it.
+
** this creates a variable called "myname" and puts "Alix" into it.
  
 
* <nowiki>echo "Hello - I am ".$myname;</nowiki>
 
* <nowiki>echo "Hello - I am ".$myname;</nowiki>
Line 72: Line 65:
 
** these symbols indicate the end of the PHP code
 
** these symbols indicate the end of the PHP code
  
−
* <nowiki></BODY></nowiki>
+
* <nowiki></body></nowiki>
 
** this indicates the end of the body section of the webpage
 
** this indicates the end of the body section of the webpage
  
−
* <nowiki></HTML></nowiki>
+
* <nowiki></html></nowiki>
 
** this indicates the end of the html/php page
 
** this indicates the end of the html/php page
 +
 +
== Reuse this page as a template ==
 +
To save retyping, you should consider copying and pasting this page for your exercises and your assessment - this is a ''valid'' framework that you can paste your PHP code into - make sure that any PHP exists between the <nowiki><?php</nowiki> and <nowiki>?></nowiki> symbols
  
 
== Do you understand everything you've done on this page? ==
 
== Do you understand everything you've done on this page? ==
−
 
 
If so, take a look at [[PHP103 - PHP Basics]]
 
If so, take a look at [[PHP103 - PHP Basics]]

Latest revision as of 10:18, 20 September 2023

Main Page >> Web Application Development >> Workbook >> A Basic Page

Exercise 2 - First VALID PHP/HTML page

1. Open your preferred editor

2. Code the following exactly - DO NOT CUT AND PASTE - you will not learn by just pasting this. 

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>My First Valid HTML/PHP page</title>
   </head>
   <body>
     <?php
       $myname = "Alix";
       echo "Hello - I am ".$myname;
     ?>
   </body>
 </html>

3. Save this in your public_html folder as "exercise2.php"

4. Open your preferred browser and point it to http://mi-linux.wlv.ac.uk/~YOURSTUDENTNUMBER/exercise2.php

5. The result should look like the following screenshot.

PHP102-01.png

Understanding Exercise 2

As you can see, you can combine HTML and PHP commands in one file, but the file must have a .php extension for it to be handled correctly by the webserver

  • The first line contains the DOCTYPE or DTD - see HTML teaching notes for details on this if you're not sure
  • <html lang="en">
    • this is the start of the HTML file with the language attribute set to English - this is used by some validators
  • <head>
    • this is the start of the heading section of the webpage, where components such as title, meta tags, and style are defined
  • <meta...>
    • this line is used by some validators to understand the character set the page has been written in - more information can be found on W3C Validator-Character encoding FAQ or more general information on troubleshooting W3 validator responses can be found at W3C Validator FAQ
  • <title...>
    • this sets the title of the browser window that the page appears in - a common mistake is to believe this prints out somewhere in the body of a webpage - it does not - look at your window title bar and taskbar for evidence of where this appears
  • </head>
    • the end of the heading section
  • <body>
    • the start of the body of the webpage - the visible output shown in a page
  • <?php
    • these symbol indicates the start of PHP content in your page - everything from this point on is executed by the PHP program
  • $myname = "Alix";
    • this creates a variable called "myname" and puts "Alix" into it.
  • echo "Hello - I am ".$myname;
    • this prints out the sentence "Hello - I am " and adds the content of the "myname" variable to the end of the sentence
  • ?>
    • these symbols indicate the end of the PHP code
  • </body>
    • this indicates the end of the body section of the webpage
  • </html>
    • this indicates the end of the html/php page

Reuse this page as a template

To save retyping, you should consider copying and pasting this page for your exercises and your assessment - this is a valid framework that you can paste your PHP code into - make sure that any PHP exists between the <?php and ?> symbols

Do you understand everything you've done on this page?

If so, take a look at PHP103 - PHP Basics

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=PHP102&oldid=10308"