class02 introduction to web development with php mis 3501, fall 2015 brad n greenwood department of...
TRANSCRIPT
Class02Introduction to web development with PHP
MIS 3501, Fall 2015Brad N GreenwoodDepartment of MIS
Fox School of BusinessTemple University
8/27/2015
Some Housekeeping Notes• Today we are going to write a webpage after some lecture• As a habit we will be doing the non-book exercises and reviewing
the challenges in class• We will leave the book challenges for you offline
• Challenge 1: Make sure to upload your work to the class server for next class
• I strongly suggest you work at the same workstation every time (profiles take time to be setup)
• Quiz one is in one week. • Emailing me: [email protected]• DRS – get any requirements to me ASAP
Administrivia
By their very nature, Web Applications require multiple technologies to work together. Some collections of technologies are common, that they are collectively referred to as a stack. For example: the "LAMP Stack“ is Linux, Apache, MySQL, and PHP.
In this class, you will use XAMPP – which is short for Cross (X) Platform, Apache, MySQL, PHP, and Perl.
Web Applications
Similarly, Web Development requires that multiple programming languages work together. Each language has its special purpose.
A web application never uses just one programming language. In this class we will use:
• HTML and CSS (for presentation) – aesthetics – how does the site look?
• PHP (for scripting of all sorts) – functionality – what can the site do?
• MySQL (for database queries) – content – what are the data that the site can display?
Web Development
Database Server
TheInternet
Client
Client Web Server
Email Server
The architecture of a web application
How static web pages are processed
HTTP request
HTTP response
Web Browser Web Server
HTML file
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>
A simple HTTP request
Your Computer Sends This Out
The Web Server Sends this back
OH SNAP!
Someone give me an example of a dynamic website
These pages can also be dynamic!
How dynamic web pages are processed with PHP
HTTP request
HTTP response
Web Browser Web Server Database Server
PHPScript
The Script makes the website dynamic
The first page of an application (index.html)
The second page (display_discount.php)
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
<!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>
HTML
<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>
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
body { font-family: Arial, Helvetica, sans-serif; margin: 1em; padding: 0; } main { 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; }
The CSS file (main.css)
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
<?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); ?>
The PHP file (display_discount.php)
How Did We Get From A B
The second page (display_discount.php)
