Technology and Web Programming: Chapter 1. Get Started Fast With PHP & Mysql

TECHNOLOGY AND WEB PROGRAMMING
Chapter 1. Get started fast with PHP & MySQL

Chapter 1. Get started fast with PHP
& MySQL
Content
1.1. Introduction to web development with PHP
1.1.1. Introduction to web development with PHP
1.1.2. How to code a PHP application
1.2. How to use PHP with a Mysql database

1.2.1. Introduction to relational databases and MySQL
1.2.2. How to use PHP with a Mysql database
1.3. How to use the MVC patern to organize your code
C1, Slide 2
Objectives
Applied
1. Use the XAMPP control panel to start or stop Apache or MySQL
when it is running on your own computer.
2. Deploy a PHP application on your own computer.
3. Run a web application that’s on your own computer (1) by
entering its URL into the address bar of a browser or (2) by
getting and using an index of the applications that are on the web
server.
4. View the source code for a web page in a web browser.
C1, Slide 3
Objectives (continued)
Knowledge
1. Describe the components of a client-server architecture.
2. Describe HTTP requests and responses.
3. Distinguish between the way a web server processes static web
pages and dynamic web pages.
4. Explain what these software components do as a web application
runs: Apache, PHP, Chrome, and MySQL.
5. Describe the difference between MySQL and MariaDB.
6. Describe the way a PHP application is deployed on your own
computer or on an Internet server.
7. Describe the components of an HTTP URL.
8. Describe what happens if you omit one or more parts of a URL
when you try to run an application or if you code a URL that
specifies a directory that doesn’t contain a default page.
C1, Slide 4
Objectives (continued)
Knowledge
9. Describe the benefits of using an IDE like NetBeans for
application development.
C1, Slide 5
The architecture of a web application
C1, Slide 6
The architecture of the Internet
LAN LAN LAN LAN
LAN LAN
WAN WAN
IXP
IXP IXP
WAN WAN
LAN LAN
LAN LAN LAN LAN
C1, Slide 7
Key terms
 server
 client
 network
 router
 Local Area Network (LAN)
 Wide Area Network (WAN)
 Internet
 Internet Exchange Point (IXP)
 Internet Service Provider (ISP)
C1, Slide 8
How static web pages are processed
C1, Slide 9
A simple HTTP request
GET / HTTP/1.1
Host: www.example.com
A simple HTTP response

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 136
Server: Apache/2.2.3
<html>
<head>
<title>Example Web Page</title>
</head>
<body>
<p>This is a sample web page</p>
</body>
</html>
C1, Slide 10
Two protocols that web applications depend
upon
 HyperText Transfer Protocol (HTTP)
 Transmission Control Protocol/Internet Protocol (TCP/IP)
C1, Slide 11
How dynamic web pages are processed with
PHP
HTTP request
HTTP response
Web Browser Web Server Database Server
PHP
Script
C1, Slide 12
Key terms
 HyperText Markup Language (HTML)
 static web page
 HTTP request
 HTTP response.
 dynamic web page
 PHP interpreter
 database server
 render
 round trip
C1, Slide 13
Web browsers
 Chrome
 Firefox
 Internet Explorer
 Edge
 Safari
 Opera
Web servers
 Apache
 IIS
C1, Slide 14
Server-side languages
 PHP
 JSP
 ASP.NET
 Perl
 Python
Database servers
 MySQL
 Oracle
 DB2
 MS SQL Server
C1, Slide 15
Highlights in the history of PHP
Version Year Description

2 1995 Personal Home Page
3 1998 PHP: Hypertext Processor
4 2000 Introduced the Zend Engine
5 2004 Introduced the Zend Engine 2
Improved support for OOP
Added the PHP Data Objects
extension
6 N/A Abandoned and never released
7 2015 Introduced the Zend Engine 3
Improved performance
C1, Slide 16
Highlights in the history of MySQL
Version Year Description
3.23 1995 The original version of MySQL
4.0 2003 Introduced support for unions.
4.1 2004 Introduced support for subqueries
and prepared statements.
5.0 2005 Introduced support for stored
procedures, triggers, views, and
transactions.
5.1 2008 Introduced support for row-based
replication and server log tables.
5.5 2010 Default storage engine now
supports referential integrity.
5.6 2011 Introduced support for big data.
5.7 2017 Included security improvements
and other enhancements.
C1, Slide 17
MySQL notes
 MySQL is owned and sponsored by MySQL AB, a for-profit
firm.
 In 2008, Sun Microsystems acquired MySQL AB.
 In 2009, Oracle Corporation acquired Sun Microsystems.
 In 2009, many of the original developers of MySQL left MySQL
AB and begin working on different forks of the open-source code.
One of the most popular of these forks is MariaDB.
 In 2012, several Linux distributions, as well as Wikipedia and
Google, began to replace MySQL with MariaDB.
 MariaDB intends to maintain high compatibility with MySQL so
it can work as a drop-in replacement for MySQL.
 XAMPP 5.6 and later include MariaDB, not MySQL.
C1, Slide 18
The first page of an application
C1, Slide 19
The second page (display_discount.php)
C1, Slide 20
The HTML file (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<main>
<h1>Product Discount Calculator</h1>
<form action="display_discount.php" method="post">
<div id="data">
<label>Product Description:</label>
<input type="text" name="product_description"><br>
<label>List Price:</label>
<input type="text" name="list_price"><br>
C1, Slide 21
The HTML file (index.html) (continued)
<label>Discount Percent:</label>
<input type="text" name="discount_percent">
<span>%</span><br>
</div>
<div id="buttons">
<label> </label>
<input type="submit" value="Calculate Discount"><br>
</div>
</form>
</main>
</body>
</html>
C1, Slide 22
The CSS file (main.css)
body {
font-family: Arial, Helvetica, sans-serif;
margin: 1em;
padding: 0;
}
main {
display: block;
width: 450px;
margin: 0 auto;
padding: 1.5em;
background: white;
border: 2px solid navy;
}
h1 {
color: navy;
}
label {
width: 10em;
padding-right: 1em;
float: left;
}
C1, Slide 23
The CSS file (main.css) (continued)
#data input {
float: left;
width: 15em;
margin-bottom: .5em;
}
#data span {
padding-left: .25em;
}
#buttons input {
float: left;
margin-bottom: .5em;
}
br {
clear: left;
}
C1, Slide 24
The PHP file (display_discount.php)
<?php
// get the data from the form
$product_description = $_POST['product_description'];
$list_price = $_POST['list_price'];
$discount_percent = $_POST['discount_percent'];
// calculate the discount

$discount = $list_price * $discount_percent * .01;
$discount_price = $list_price - $discount;
// apply currency formatting to the dollar and percent amounts

$list_price_formatted = "$".number_format($list_price, 2);
$discount_percent_formatted = number_format
($discount_percent, 1)."%";
$discount_formatted = "$".number_format($discount, 2);
$discount_price_formatted = "$".number_format($discount_price,2);
// escape the unformatted input

$product_description_escaped =
htmlspecialchars($product_description);
?>
C1, Slide 25
(continued)
<!DOCTYPE html>
<html>
<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<main>
<h1>Product Discount Calculator</h1>
<label>Product Description:</label>
<span><?php echo $product_description_escaped; ?></span><br>
<label>List Price:</label>
<span><?php echo $list_price_formatted; ?></span><br>
C1, Slide 26
(continued)
<label>Standard Discount:</label>
<span><?php echo $discount_percent_formatted; ?></span><br>
<label>Discount Amount:</label>
<span><?php echo $discount_formatted; ?></span><br>
<label>Discount Price:</label>
<span><?php echo $discount_price_formatted; ?></span><br>
</main>
</body>
</html>
C1, Slide 27
Notepad++ with three tabs open
C1, Slide 28
How to open files in Notepad++
 Use the Open button in the toolbar.
 Right-click on the file in Windows Explorer and select Edit with
Notepad++.
How to save the current file

 Use the Save button in the toolbar.
 Press Ctrl+S.
How to save all open files

 Use the Save All button.
C1, Slide 29
How to close the current file in Notepad++
 Use the Close button in the toolbar.
How to close all open files

 Use the Close All button.
How to open a new file in a new tab

 Use the New button in the toolbar.
C1, Slide 30
How to change the Notepad++ style for
comments
 Start the SettingsStyler Configurator command.
 Select PHP in the language list and COMMENT in the style list.
 Change the font name and font size in the drop-down lists to the
blank entries at the top of the lists.
 Repeat this for COMMENTLINE for the PHP language, for
COMMENT for the HTML language, and for COMMENT for the
CSS language.
C1, Slide 31
The XAMPP control panel
C1, Slide 32
How to start the XAMPP control panel
 Select the XAMPP Control Panel item from the Windows Start
menu or double-click on the XAMPP icon on your desktop.
How to start and stop Apache or MySQL

 Click on its Start or Stop button.
 To start Apache or MySQL automatically when your computer
starts, click the Services button in the XAMPP control panel.
C1, Slide 33
About XAMPP
 XAMPP is a free, open-source web server package.
 The package consists of Apache, MySQL, and interpreters for
PHP.
 XAMPP can be easily installed.
 XAMPP is available for Windows, Linux, Solaris, and Mac OS X
systems (the X in XAMPP stands for cross-platform).
C1, Slide 34
The directories for a PHP app on a local server
xampp
htdocs (the document root directory)
guitar_store (the application root directory)
admin
catalog
styles
images
index.php
C1, Slide 35
The structure for book_apps and ex_starts
xampp
htdocs
book_apps
ch01_product_discount
ch02_product_discount
ch02_future_value
ch04_product_list
ch04_product_manager
...
ex_starts
ch02_ex1
ch02_ex2
ch04_ex1
...
C1, Slide 36
How to deploy a PHP application on a local
server
 Copy all of the directories and files for an application to the
\xampp\htdocs directory on the server.
How to deploy the downloadable applications

on a local server
 Copy the book_apps and ex_starts directories and all their
contents to the \xampp\htdocs directory on the server.
How to deploy an application

on an Internet server
 Use an FTP (File Transfer Protocol) program to upload the tested
directories and files to the htdocs directory of the Apache web
server.
C1, Slide 37
The components of an HTTP URL
What happens if you omit parts of a URL

 If you omit the protocol, the default of http:// will be used.
 If you omit the filename, one of the default filenames for the
Apache web server will be used: index.htm, index.html, or
index.php.
 If you omit the filename and there is no default file, Apache will
display an index of the files and directories in the path.
C1, Slide 38
Requesting pages from an Internet web server
A request for a specific page
http://www.murach.com/shop-books/all/index.php
A request for the default (home) page of a website
http://www.murach.com/
Requesting applications from a local web server

A request for the default page in an application directory
http://localhost/book_apps/ch01_product_discount/
A request for a directory with no default page
http://localhost/book_apps/
C1, Slide 39
An index of the apps in the book_apps
directory
C1, Slide 40
The Product Discount application in Chrome
C1, Slide 41
An error displayed in Chrome
C1, Slide 42
How to test a PHP page for the first time
1. Make sure the Apache and MySQL servers are running.
2. Start a web browser and enter the URL for the application as shown
in the last figure.
3. Test the page by entering both valid and invalid data, clicking on all
links, and so on.
How to retest a PHP page after changes

 Click the Reload or Refresh button in the browser.
C1, Slide 43
The source code for a PHP page
C1, Slide 44
How to view the source code for a page
in Chrome and Firefox
 Right-click the page, then select the ViewPage Source command.
How to view the source code for a page

in IE and Edge
 Right-click on the page, then select the View Source command.
Note about Microsoft Edge

 The View Source command isn’t available by default for this
browser. To enable it, you can press F12 to display the Developer
Tools. Then, when you select the View Source command, the
source code will be displayed in the Debugger tab within the
Developer Tools window.
C1, Slide 45
NetBeans with three files in a project open
C1, Slide 46
How to work with NetBeans projects
 To open a project, use the Open Project button in the toolbar.
 To start a new project, use the New Project button in the toolbar.
 To close a project, right-click on the project in the Projects tab
and select the Close command from the resulting menu.
How to work with files

 To open a file, use the Projects tab to navigate to the file and
double-click the file.
 To start a new file, select the project and click the New File button
in the toolbar.
C1, Slide 47
About NetBeans
 NetBeans is an Integrated Development Environment (IDE) for
developing PHP applications.
 NetBeans can make it easier to create, edit, and test the HTML,
CSS, and PHP files that you need for a web application.
About NetBeans projects

 A NetBeans project consists of a top-level directory that contains
the subdirectories and files for an application.
 Netbeans adds an nbproject subdirectory that contains the extra
files that NetBeans needs for managing the project.
Mac OS X note
 To enable right-clicking with Mac OS X, you can edit the system
preferences for the mouse.
C1, Slide 48
Auto-completion and error marking in
NetBeans
C1, Slide 49
How to edit a PHP file with NetBeans
 Use normal editing techniques as you enter PHP code.
 When you see an auto-completion list, you can highlight an entry
and press the Enter key to enter it into your code or you can
double-click on it.
 If you see a red error icon at the start of a line that you have
entered, you should fix whatever errors the line contains before
you test the application.
How to test a PHP application with NetBeans

 To run the current project, click on the Run Project button in the
toolbar or press F6.
 To run other projects, right-click on the project and select the Run
command.
 To run a file, right-click on the file and select the Run command.
C1, Slide 50
The dialog box for starting a new project
C1, Slide 51
The dialog box for configuring a project
C1, Slide 52
How to check the run configuration for a
project
 Right-click on a project in the Projects tab and select the
Properties command.
 Then, click on Run Configuration in the Categories list and check
the Project URL.
How to import a project

 Use the New Project command, but select PHP Application with
Existing Sources in the Projects list.
 This will step you through the import procedure.
 In the third step, you are asked to check the run configuration.
Here, you need to make sure the URL for running the project is
correct.
C1, Slide 53

Technology and Web Programming: Chapter 1. Get Started Fast With PHP & Mysql

Uploaded by

Copyright:

Available Formats

Technology and Web Programming: Chapter 1. Get Started Fast With PHP & Mysql

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Technology and Web Programming: Chapter 1. Get Started Fast With PHP & Mysql

Uploaded by

Copyright:

Available Formats

TECHNOLOGY AND WEB PROGRAMMING

Chapter 1. Get started fast with PHP & MySQL

1.2. How to use PHP with a Mysql database

1.3. How to use the MVC patern to organize your code

LAN LAN LAN LAN

LAN LAN LAN LAN

A simple HTTP response

Web Browser Web Server Database Server

Version Year Description

// calculate the discount

// apply currency formatting to the dollar and percent amounts

// escape the unformatted input

How to save the current file

How to save all open files

How to close all open files

How to open a new file in a new tab

How to start and stop Apache or MySQL

How to deploy the downloadable applications

How to deploy an application

What happens if you omit parts of a URL

Requesting applications from a local web server

How to retest a PHP page after changes

How to view the source code for a page

Note about Microsoft Edge

How to work with files

About NetBeans projects

How to test a PHP application with NetBeans

How to import a project

You might also like