Scribd
Upload
88 views

Chapter 01

The document provides an introduction to web development and PHP. It discusses: 1) The objectives of learning to use XAMPP to run a local web server, deploy PHP applications locally, and view source code in a browser. 2) The client-server architecture of web applications and how static and dynamic pages are processed differently. 3) An example web application that calculates product discounts, with index and form pages, and a PHP page that processes the form.

Uploaded by

Thanh Van Dao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
88 views

Chapter 01

The document provides an introduction to web development and PHP. It discusses: 1) The objectives of learning to use XAMPP to run a local web server, deploy PHP applications locally, and view source code in a browser. 2) The client-server architecture of web applications and how static and dynamic pages are processed differently. 3) An example web application that calculates product discounts, with index and form pages, and a PHP page that processes the form.

Uploaded by

Thanh Van Dao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Chapter 1

Introduction
to web development
and PHP

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 1
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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 2
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, Firefox, and MySQL.
5. Describe the way a PHP application is deployed on your own computer or
on an Internet server.
6. Describe the components of an HTTP URL.
7. 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.
8. Describe the benefits of using an IDE like NetBeans for application
development.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 3
The architecture of a web application

Client Web Server Database Server


The Internet

Client E-mail Server

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 4
The architecture of the Internet

` ` ` ` ` ` ` `

` LAN LAN LAN LAN `

LAN LAN
` WAN WAN `
IXP
` ` ` `
IXP IXP
` ` `
WAN WAN
` LAN LAN `
LAN LAN LAN LAN
` `
` ` ` ` ` `

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 5
Key terms
 server
 client
 network
 router
 Local Area Network (LAN)
 Wide Area Network (WAN)
 Internet
 Internet Exchange Point (IXP)
 Internet Service Provider (ISP)

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 6
How static web pages are processed

HTTP request
HTML
` HTTP response file

Web Browser Web Server

A simple HTTP request A simple HTTP response


GET / HTTP/1.1 HTTP/1.1 200 OK

Host: www.example.com 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>
Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 7
</html>
How dynamic web pages are processed with PHP

HTTP request

` HTTP response

Web Browser Web Server Database Server

PHP
Script

• For a php page, the web server forwards the request to the php
interpreter which is running on the web server.

• The php interpreter executes the script along with any form data and
generates a web page which is returned to the browser.
Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 8
The first page of an application (index.html)

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 9
The second page (display_discount.php)

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 10
The HTML file (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" ...>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="content">
<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 />

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 11
The HTML file (index.html) (continued)
<label>List Price:</label>
<input type="text" name="list_price"/><br />
<label>Discount Percent:</label>
<input type="text" name="discount_percent"/>%<br />
</div>

<div id="buttons">
<label>&nbsp;</label>
<input type="submit" value="Calculate Discount" />
<br />
</div>

</form>
</div>
</body>
</html>

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 12
The CSS file (main.css)
body {
font-family: Arial, Helvetica, sans-serif;
}

#content {
width: 450px;
margin: 0 auto;
padding: 0px 20px 20px;
background: white;
border: 2px solid navy;
}

h1 {
color: navy;
}

label {
width: 10em;
padding-right: 1em;
float: left;
}

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 13
The CSS file (main.css) (continued)
#data input {
float: left;
width: 15em;
margin-bottom: .5em;
}

#buttons input {
float: left;
margin-bottom: .5em;
}

br {
clear: left;
}

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 14
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 formatting to the dollar and percent amounts


$list_price_formatted =
"$".number_format($list_price, 2);
$discount_percent_formatted = $discount_percent."%";
$discount_formatted = "$".number_format($discount, 2);
$discount_price_formatted =
"$".number_format($discount_price, 2);
?>

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 15
The PHP file (display_discount.php) (continued)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
...>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>

<body>
<div id="content">
<h1>Product Discount Calculator</h1>

<label>Product Description:</label>
<span><?php echo $product_description; ?>
</span><br />

<label>List Price:</label>
<span><?php echo $list_price_formatted; ?>
</span><br />

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 16
The PHP file (display_discount.php) (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 />
</div>
</body>
</html>

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 17
How to deploy an application on an Internet server
 Use an FTP (File Transfer Protocol) program (such as Filezilla,
Secure Shell SSH, or WinSCP ) to upload the tested directories
and files to the Apache web server.
 Our web server is webdev.cislabs.uncw.edu
 Files should be uploaded to your public_html file
 Permissions on this directory, subdirectories, and subfiles should
be set at 755.
 The URL is http://webdev.cislabs.uncw.edu/~abc1234

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 18
The components of an HTTP URL

http://www.murach.com/books/lists.htm

protocol domain name path filename

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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 19
URLs for pages on an Internet web server
A request for a specific page
http://www.murach.com/books/xhcss.htm

A request for the default (home) page of a web site


http://www.murach.com/

URLs for applications on 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/

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 20
The source code for a PHP page

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 21
How to view the source code for a page in Firefox
 Use the ViewPage Source command.
How to view the source code for a page in IE
 Use the ViewSource command.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 22
NetBeans with three files in the main project open

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 23
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.
 To set the main project, right-click on the project in the Projects
tab and select the Set As Main Project command from the
resulting menu.
How to work with NetBeans 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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 24
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.
 When you create a NetBeans project, 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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 25
Auto-completion and error marking in NetBeans

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 26
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 main 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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 27
The dialog box for starting a new project

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 28
The dialog box for configuring a project

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 29
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.

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 30
Key terms
 HyperText Markup Language (HTML)
 static web page
 HTTP request
 HTTP response.
 dynamic web page
 PHP interpreter
 database server
 render
 round trip

Murach's PHP and MySQL, C1 © 2010, Mike Murach & Associates, Inc. Slide 31

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy