Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of...
-
Upload
georgina-bradford -
Category
Documents
-
view
214 -
download
0
Transcript of Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of...
![Page 1: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/1.jpg)
Class02Introduction to web development with PHP
MIS 3501, Fall 2015Brad N GreenwoodDepartment of MIS
Fox School of BusinessTemple University
8/27/2015
![Page 2: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/2.jpg)
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
![Page 3: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/3.jpg)
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
![Page 4: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/4.jpg)
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
![Page 5: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/5.jpg)
Database Server
TheInternet
Client
Client Web Server
Email Server
The architecture of a web application
![Page 6: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/6.jpg)
How static web pages are processed
HTTP request
HTTP response
Web Browser Web Server
HTML file
![Page 7: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/7.jpg)
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
![Page 8: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/8.jpg)
OH SNAP!
Someone give me an example of a dynamic website
These pages can also be dynamic!
![Page 9: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/9.jpg)
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
![Page 10: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/10.jpg)
The first page of an application (index.html)
![Page 11: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/11.jpg)
The second page (display_discount.php)
![Page 12: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/12.jpg)
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
![Page 13: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/13.jpg)
<!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>
![Page 14: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/14.jpg)
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
![Page 15: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/15.jpg)
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)
![Page 16: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/16.jpg)
Three Components• HTML (The Body)• CSS (The Style)• PHP (The actions)
How Did We Get From A B
![Page 17: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/17.jpg)
<?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)
![Page 18: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/18.jpg)
How Did We Get From A B
![Page 19: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/19.jpg)
The second page (display_discount.php)
![Page 20: Class02 Introduction to web development with PHP MIS 3501, Fall 2015 Brad N Greenwood Department of MIS Fox School of Business Temple University 8/27/2015.](https://reader035.fdocuments.in/reader035/viewer/2022062718/56649e8e5503460f94b921dd/html5/thumbnails/20.jpg)