Difference between revisions of "PHP102"

From mi-linux
Jump to navigationJump to search
m
 
 
(23 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
+
== Exercise 2 - First VALID PHP/HTML page ==
  
−
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.
+
1. Open your preferred editor
 +
 
 +
2. Code the following exactly - DO NOT CUT AND PASTE - you will not learn by just pasting this.
 +
 
 +
<nowiki><!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></nowiki>
 +
 
 +
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.
 +
 
 +
https://mi-linux.wlv.ac.uk/wiki-images/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
 +
 
 +
* <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
 +
 
 +
* <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
 +
 
 +
* <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]
 +
 
 +
* <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
  
−
=== First VALID PHP/HTML page ===
+
* <nowiki></head></nowiki>
 +
** the end of the heading section
  
−
1. Open your preferred editor
+
* <nowiki><body></nowiki>
 +
** the start of the body of the webpage - the visible output shown in a page
 +
 
 +
* <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
 +
 
 +
* <nowiki>$myname = "Alix";</nowiki>
 +
** this creates a variable called "myname" and puts "Alix" into it.
 +
 
 +
* <nowiki>echo "Hello - I am ".$myname;</nowiki>
 +
** this prints out the sentence "Hello - I am " and adds the content of the "myname" variable to the end of the sentence
 +
 
 +
* <nowiki>?></nowiki>
 +
** these symbols indicate the end of the PHP code
 +
 
 +
* <nowiki></body></nowiki>
 +
** this indicates the end of the body section of the webpage
  
−
2. Code the following exactly - DO NOT CUT AND PASTE - you will not learn by just pasting this.
+
* <nowiki></html></nowiki>
 +
** this indicates the end of the html/php page
  
−
<nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+
== Reuse this page as a template ==
−
"http://www.w3.org/TR/html4/loose.dtd">
+
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
  
−
<HTML lang="en">
+
== Do you understand everything you've done on this page? ==
−
  <HEAD>
+
If so, take a look at [[PHP103 - PHP Basics]]
−
    <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
 
−
    <TITLE>My First Valid HTML/PHP page</TITLE>
 
−
  </HEAD>
 
−
  <BODY>
 
−
<?
 
−
  $name="MyName";
 
−
  echo "Hello - I am ".$name;
 
−
?>
 
−
  </BODY>
 
−
</HTML></nowiki>
 

Latest revision as of 11: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"