spacer
Edward Parrish © 2002     
spacer

Introduction to PHP Scripting With MySQL

What We Will Cover

Introduction to HTML

Objectives

  • Understand how the Web works
  • Create an HTML document
  • Use tags to change text formatting
  • HTML is a hypertext document format used on the World-Wide Web

back to top

How the Web Works

  • Web has four major components:
    • Client browser: requester of documents and services
    • Web server: provider of documents and services
    • Internet: very large network to move the data
    • Files: text, images, sound, video, etc.
  • Communication between client and server uses Hypertext Transmission Protocol (HTTP)
  • Protocol is set of rules that client and server follow to communicate
  • Browser uses Hypertext Markup Language (HTML) to format page

Client/server Interaction

  • User enters query into client (browser)
  • Client connects to server and sends query
  • Server analyzes query, computes results and respond with results
  • Client receives results and displays them to user

back to top

Creating an HTML Page

  • HTML document is just an ASCII text file
  • Tags are embedded in the text to control page layout
  • Tags consist of:
    1. "<": opening character of a tag
    2. Entity: an instruction that tells the browser to do something, such as html, body or font
    3. Attribute: optional extra instruction refining the directive
    4. ">": closing character of a tag
  • Entities and attributes are case insensitive
  • Note that World Wide Web Consortium (W3C) recommends lowercase tags
  • Attribute values should always be enclosed in quotes
  • ASCII text viewable in most editors including Notepad
  • How can you view the source HTML of a web page?

    • Starting an HTML Document

  • Basic HTML page usually includes the following elements
    • <html>
<head>
<title>Enter page title here</title>
</head>

<body>
<h1>Heading size 1</h1>
<p>
<font face="times" size=3>Some different text</font>
</p>

</body>
</html>

    Try it here.

  • <html> starts a page and </html> ends a page
  • head section contains directives about the whole page: e.g. title
  • body section contains text, images and other information to present
  • Note that all tags should come in pairs: opening tag and closing tag
  • How can you see if a particular tag is an opening or closing tag?
  • Can nest tags, but should close inner tags before closing outer tags

back to top

Using Whitespace

  • HTML ignores extra whitespace
  • Any sequence of whitespace is treated as a single space
  • Paragraph directives (i.e. <P>) starts a new paragraph with a blank line surrounding the paragraph
  • Break directives (i.e. <BR>) continue the text at the start of the next line
  • Note that break directives do not have a closing tag

    • For Example:

  • How is the following HTML code displayed?
    • <html>
<head>
<title>Sample HTML Tags1</title>
</head>
<body>
    this is a test<br>
    this        is
            a           test
    <p>
    this is a test<br>
    <p>this     is
            a           test</p>
</body>
</html>

    Try it here.

  • Make sure to look at the page source

back to top

Creating Headings and Alignments

  • Headings are defined with the <h1> to <h6> tags
  • <h1> defines the largest heading and <h6> defines the smallest heading
  • HTML automatically adds an extra blank line before and after a heading
  • Can align the location of text to left, center or right

    • For Example:

  • How is the following HTML code displayed?
    • <html>
<head>
<title>HTML Headings and Alignments</title>
</head>

<body>
<h1>This is Heading One</h1>
<h2>This is Heading Two</h2>
<h3>This is Heading Three</h3>
<h4>This is Heading Four</h4>
<h5>This is Heading Five</h5>
<h6>This is Heading Six</h6>
This is simple text under the sixth heading.
<center><h2>This is a centered level two heading</h2>
</center>
<h2 align="center">This level two heading is centered
with the align attribute</h2>
<h2 align="right">This level two heading uses
align="right"</h2>
</body>
</html>

    Try it here.

  • Make sure to look at the page source

back to top

Using Formatting Tags

  • HTML defines many elements for formatting output

    • For Example:

  • How is the following HTML code displayed?
    • <html>
<head>
<title>Sample HTML Tags3</title>
</head>

<body>
HTML allows you to specify <b>bold text,</b>
<u>underlined text,</u> <i>italicized text</i>
and <font color="blue">colored text</font>.

You can also achieve the same effect with
<strong>the strong tag</strong> and the
<em>emphasis tag</em>.

<b>HTML <i>allows you to <u>nest</u> tags</i>
as long as</b> you close the most recently
open ones first.<br>
<pre>This     text       was entered    using
   the &lt;pre&gt; tag.</pre><br>
<!--
note the use of &lt; and &gt; to display < and >.
these are two characers in the ISO-Latin-1 character set
used by HTML.  Another very important character in this
set is &nbsp;, the non-breaking space which can be used
when you need a space in the output. HTML does not
treat &nbsp; as white space /-->

<code>These lines use       the
         &lt;code&gt;tag</code><br>
<cite>This is an example     of
          the &lt;cite&gt; tag</cite><br>
<kbd>and this is an     example
         of the &lt;kbd&gt; tag</kbd><p>
Notice that only &lt;pre&gt; preserves white space.<p>

This is an <font size=+1>example <font size=+2>of
<font size=+3> using </font>the </font>font </font>
tag to change the size of text.
Notice that there is one &lt;/font&gt;
for each &lt;font&gt;.

</body>
</html>

    Try it here.

  • Make sure to look at the page source

back to top

Exercise 8A: Create an HTML Page

Use the next 15 minutes to complete the following exercise.

Instructions:

  1. Create an HTML document named exercise8a.html
  2. Save it in C:\My Documents\cis154 folder.
  3. Prepare the exercise header as described in the HowTo on submitting exercises
  4. Label this exercise: Exercise 8A: Create an HTML Page
  5. Add a title to the document
  6. Add at least three HTML-formatted sections to the document

If you have difficulty completing the exercise in the allotted time, you may complete it during the lab at the end of today's class.

back to top

Quiz

The quiz is open book, open notes and screen on. It is NOT open neighbor's books, notes, computer or quiz.

You may use your computer to work out the problems

You have 15 minutes to complete the test.

The link to WebCT is here.

Quiz Tips

  • Study before the quiz: review lesson notes and the textbook
  • If you get stuck on question, make your best guess and return later
  • Save after every answer. You can always return and change your mind.
  • Try Site Search to find facts
  • If you are equally uncertain between two choices, go with first impression
  • Use the full time available
  • Remember that the time remaining is from the last time you saved an answer. If you have not saved an answer recently, the time remaining is wrong! You can press refresh/reload (or F5 in IE) to update the time remaining.

back to top

Introduction to Using PHP With MySQL

Objectives

  • Embed PHP in HTML
  • Display PHP program data in a browser
  • Understand the use of comments and whitespace
  • Call PHP functions
  • Connect to MySQL using PHP
  • Make a query to a MySQL database using PHP
  • Disconnect PHP from a database
  • In this section, we will introduce using PHP with MySQL

back to top

How Web-Database Architectures Work

  1. The visitor's Web browser requests a Web page using a standard URL
    2. http://www.somedomain.com/somepage.php
  2. Web server receives request for PHP page and interprets the page using the PHP engine
  3. When the PHP script requests a database connection, PHP makes the connection
  4. Another PHP command sends a SQL query sent to database
  5. Database returns the results of the query
  6. PHP engine receives data and creates HTML
  7. When PHP engine completes page, returns results to Web server
  8. Web server returns result to client using HTTP
  9. Visitor's browser displays the HTML it receives

back to top

Embedding PHP in HTML

  • PHP is embedded in HTML files inside special tags: <? ... ?>
  • PHP programs consist of a series of statements that perform actions like:
    • Arithmetic operations
    • Storing and retrieving data
    • Making decisions
    • Iterating loops
    • ...
  • Statements end with a semi-colon (;)
  • Statements can be intermixed with HTML code to dynamically create HTML documents

    • Other PHP Tag Styles

  • PHP has four different styles
  • Style we are using is known as the short style
    • <? ... ?>
  • Another style is known as XML style
    • <?php ... ?>
  • Still another style is known as script style
  • Script style may look familiar to Javascript programmers
    • <script language='php'> ... </script>
  • Last style is known as ASP style
  • Same script tags as used in Active Server Pages (ASP)
  • Must enable use of this style in php.ini file
    • <% ... %>

back to top

Displaying Data in a Browser

  • To create our web page for display, start with usual tags: html, head and body
  • Add a title, if desired
  • Add PHP tags where needed: <? ... ?>
  • Enter PHP statements between the tags
  • Use <? echo ... ?> method to display data
  • Alternatively, use <? print ... ?> to display data

Try this:

  1. Copy the following code into a text editor such as Notepad
  2. Save to C:\My Documents\cis154\ as "hello.php"
  3. Start your browser and open the web page at: http://localhost/cis154/hello.php
<html>
<head>
<title>Displaying Information in a Browser</title>
</head>

<body>
<? echo "Hello PHP World!" ?>
</body>
</html>
  • View the source of the page (View->Source)
  • Compare what you entered with the page source
  • What are the differences?
  • How do you explain the differences?

back to top

Comments and Whitespace

  • Comments are ... comments -- notes to people reading the code
  • Comments are ignored by the interpreter
  • PHP supports three styles of comments
  • C-style comments include everything between /* ... */ 
    /* This
is a
    comment */
  • C++-style comments ignore everything from // to the end of the line
    • // This is a comment
  • Shell-script-style comments ignore everything from # to the end of the line
    • # This is a comment

    Whitespace

  • PHP handles whitespace (spaces, tabs, carriage returns, line feeds) similar to HTML: extra whitespace ignored
  • Tip: use whitespace to improve code readability

back to top

Using Literals and Variables

  • Literals are small pieces of raw data used in programs
  • Literal numbers are any sequence of digits
    • 1234
  • Numbers may contain decimal points to represent decimal fractions
    • 12.34
  • Number may be preceded by minus sign ( - ) to indicate a negative value
    • -1.235
  • Literal string are any sequence of characters enclosed in single quotes (') or double quotes (")
    • "This is a string"
  • Strings can be combined using the concatenation operator (.)
    • echo "Hello"."PHP"."World";

    Variables

  • Variables are a symbol for the data they contain
  • Can assign a literal value to a variable using an "=" sign
    • $myAge = 29;
  • What gets displayed in a browser by the following?
    • $myAge = 29;
echo $myAge;
  • Variables can store any number or "text" value
  • We can also assign one variable to another
    • $myAge = 29;
$yourAge = $myAge;
echo $yourAge;
  • Variable names can be of any length and contain any of the following:
    • Letters: a-zA-Z
    • Numbers: 0-9
    • Underscores: _
    • Dollar signs: $
  • In PHP, identifiers are cAsE sEnSiTiVe
  • Are the following variable names equivalent?
    • $MyAge
$myage

back to top

Calling Functions

  • PHP functions take zero or more arguments and return a value
  • General syntax of a function is:
    • functionName([arg1,arg2,...,argN])
  • We can save the results returned by a function in a variable
    • $myVar = someFunction()
  • PHP has many built-in functions you can use in developing Web applications

    • Examples

  • Math function round ... rounds off a number to specified number of decimal places
    • $mynum = round(1.95583, 2);
echo $mynum;

    => 1.96

  • String function strtoupper converts a string to upper case
    • echo strtoupper("hello PHP world");

    => HELLO PHP WORLD

  • PHP function reference available here
  • PHP functions for accessing MySQL database servers available here

back to top

Connecting to and Disconnecting from MySQL

  • To get content from MySQL database, must establish a connection
  • Two steps to opening a connection to a database:
    1. Creating a connection
    2. Selecting a database

    Creating a Connection

  • To make a connection, use mysql_connect function
    • $dbCnx = mysql_connect(address, username, password);
  • Address is the IP address or hostname of the computer on which the MySQL server software is running
  • Username and password are ... username and password
  • If you do not remember them, look in C:\WINDOWS\ for the my.ini file
  • mysql_connect function returns a number identifying the connection
  • We save this number in a variable because we will need to use it later
  • Example: connection to MySQL for our classroom:
    • $dbCnx = mysql_connect("localhost", "admin", "guest");

    Selecting a Database

  • To select database, use mysql_select_db function
    • mysql_select_db("databaseName", connectionID);
  • Example: selecting the Artzy2 database:
    • mysql_select_db("artzy2", $dbCnx);
  • Note how we used the $dbCnx variable from the connection

    • Disconnecting

  • Similar to opening a connection to MySQL, we can also close a connection
    • mysql_close(connectionID);
  • Not strictly necessary: connection will close when page is completed

back to top

Making a Query

  • To make a query in PHP, use mysql_query function
    • result = mysql_query(query, connectionID);
  • query is a string that contains the SQL command we want to execute
  • Note that connectionID parameter is optional
  • Can access any field of the results using mysql_result function
    • mysql_result(result, rownum, fieldname);

    For Example

    Open a connection to Artzy2 and create a query that returns the product name of the product whose number is 2.

  • To create a connection, we use the examples from above:
    • $dbCnx = mysql_connect("localhost", "admin", "guest");
mysql_select_db("artzy2", $dbCnx);
  • What SQL query could we use to retrieve the desired data?
  • Putting it all together:

    Try this:

  1. Copy the following code into Notepad
  2. Save to C:\My Documents\cis154\ as artzy.php
  3. Start your browser and open the web page at: http://localhost/cis154/artzy.php
    4. <?
$dbCnx = mysql_connect("localhost", "admin", "guest");
mysql_select_db("artzy2", $dbCnx);

$query = "
    SELECT ProductName
    FROM Products
    WHERE ID=2;
    ";
$result = mysql_query($query);
echo "<p>data: ";
echo mysql_result($result,0,"ProductName");
echo "</p>";
?>

back to top

Exercise 8B: Read Data From Artzy

Instructions:

Use the next 15 minutes to complete the following exercises and to answer the questions.

  1. Label this exercise: Exercise 8B: Read Data From Artzy
  2. Submit answers to the questions in your exercise8.txt file.
  3. Implement the above query on your computer. Does it work?
  4. View the HTML source of the page. What are the differences? How do you explain the differences?
  5. Modify the example to display the name of the product whose number is 3. What is the result displayed?

If you have difficulty completing the exercise in the allotted time, you may complete the it during the lab at the end of today's class.

back to top

Wrap Up

When class is over, please shut down your computer

Due Next Class: Nothing

You may complete unfinished exercises during the remaining lab time or at any time before the next class. Be sure to submit the file to the instructor before the begriming of the next class to receive credit. Instructions on submitting exercises are available from the HowTo's page.

back to top

Home | WebCT | Announcements | Schedule | Syllabus
Expectations | Help | FAQ's | HowTo's | Samples | Links

Last Updated: 7/16/2003 5:37:30 PM