Uploaded byNatureLifearabhi
PPT, PDF15 views

PHP-04-Forms.ppt

The document discusses form processing in PHP. It describes how PHP processes incoming HTTP requests and places data into global variables like $_GET and $_POST. It covers creating basic forms in HTML and how form data is submitted via GET or POST. It also discusses validating form data on the server side to ensure security and integrity. The document provides examples of using different form field types like text, radio buttons, checkboxes, selects and textareas. It introduces patterns for handling form submissions, like model-view-controller (MVC).

Download to read offline
Form Processing in PHP Dr. Charles Severance www.wa4e.com http://www.wa4e.com/code/forms http://www.wa4e.com/code/forms.zip
PHP Global Variables • Part of the goal of PHP is to make interacting with HTTP and HTML as easy as possible. • PHP processes the incoming HTTP request based on the protocol specifications and drops the data into various super global variables (usually arrays).
http://www.wa4e.com/code/arrays/get-01.php (Review from Arrays)
Web Server Database Server Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t ind.ph p $_GET get-01.php?x=2
Forms – User Input / Action <p>Guessing game...</p> <form> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form> http://www.wa4e.com/code/forms/form1.php
Forms Submit Data form1.php <p>Guessing game...</p> <form> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form>
<p>Guessing game...</p> <form> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form> <pre> $_GET: <?php print_r($_GET); ?> </pre> form2.php
GET and POST with Forms
Web Server Database Server Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form1.ph p $_POST
<p>Guessing game...</p> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" size="40" id="guess"/></p> <input type="submit"/> </form> <pre> $_POST: <?php print_r($_POST); ?> $_GET: <?php print_r($_GET); ?> </pre> form3.php
Forms GET vs. POST Two ways the browser can send parameters to the web server • GET - Parameters are placed on the URL which is retrieved. • POST - The URL is retrieved and parameters are appended to the request in the HTTP connection.
Passing Parameters to The Server GET /form1.php?guess=42 Accept: text/html User-Agent: Lynx/2.4 libwww/2.14 POST /form3.php Accept: text/html User-Agent: Lynx/2.4 libwww/2.14 Content-type: application/x-www-form-urlencoded Content-length: 13 guess=42 HTTP Request Browser Web Server <input type="text" name="guess" id="yourid" />
Web Server Database Server Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form3.ph p $_POST
Rules of the POST/GET Choice • POST is used when data is being created or modified. • GET is used when you are reading or searching things. • Web search spiders will follow GET URLs but generally not POST URLs. • GET URLs should be “idempotent” - the same URL should give the “same thing” each time you access it. • GET has an upper limit of the number of bytes of parameters and values (think about 2K).
Form Input Types
Other Input Types • Text • Password • Radio Button • Check Box • Select / Drop-Down • Textarea http://www.wa4e.com/code/forms/more.php
<p>Many field types...</p> <form method="post" action="more.php"> <p><label for="inp01">Account:</label> <input type="text" name="account" id="inp01" size="40" ></p> <p><label for="inp02">Password:</label> <input type="password" name="pw" id="inp02" size="40" ></p> <p><label for="inp03">Nick Name:</label> <input type="text" name="nick" id="inp03" size="40" ></p> $_POST: Array ( [account] => Beth [pw] => 12345 [nick] => BK [when] => pm ... ) more.php
<p>Preferred Time:<br/> <input type="radio" name="when" value="am">AM<br> <input type="radio" name="when" value="pm" checked>PM</p> $_POST: Array( ... [nick] => BK [when] => pm [class] => si502 ... ) more.php
<p>Classes taken:<br/> <input type="checkbox" name="class1" value="si502" checked> SI502 - Networked Tech<br> <input type="checkbox" name="class2" value="si539"> SI539 - App Engine<br> <input type="checkbox" name="class3"> SI543 - Java<br> </p> $_POST: Array( ... [when] => pm [class1] => si502 [soda] => 0 ... ) $_POST: Array( ... [when] => pm [class3] => on [soda] => 0 ... )
<p><label for="inp06">Which soda: <select name="soda" id="inp06"> <option value="0">-- Please Select --</option> <option value="1">Coke</option> <option value="2">Pepsi</option> <option value="3">Mountain Dew</option> <option value="4">Orange Juice</option> <option value="5">Lemonade</option> </select> </p> $_POST: Array( ... [class] => si502 [soda] => 0 [snack] => peanuts ... ) The values can be any string, but numbers are used quite often. more.php
<p><label for="inp07">Which snack: <select name="snack" id="inp07"> <option value="">-- Please Select --</option> <option value="chips">Chips</option> <option value="peanuts" selected>Peanuts</option> <option value="cookie">Cookie</option> </select> </p> $_POST: Array( ... [class] => si502 [soda] => 0 [snack] => peanuts ... ) more.php
<p><label for="inp08">Tell us about yourself:<br/> <textarea rows="10" cols="40" id="inp08" name="about"> I love building web sites in PHP and MySQL. </textarea> </p> $_POST: Array( ... [about] => I love building web sites in PHP and MySQL. [dopost] => Submit ... ) more.php
<p><label for="inp09">Which are awesome?<br/> <select multiple="multiple" name="code[]" id="inp09"> <option value="python">Python</option> <option value="css">CSS</option> <option value="html">HTML</option> <option value="php">PHP</option> </select> $_POST: Array( ... [code] => Array ( [0] => css [1] => html ) [dopost] => Submit ... ) more.php
<p> <input type="submit" name="dopost" value="Submit"/> <input type="button" onclick="location.href='http://www.wa4e.com/'; return false;" value="Escape"> </p> $_POST: Array( ... [dopost] => Submit ... ) On submit input types, the text is both in the UI and in $_POST so we tend to look for the key, not the value. more.php
HTML5 Input Types • HTML5 defines new input types • Not all browsers support all input types • They fall back to type="text" • http://www.w3schools.com/html/html5_form_input_types.a sp
Select your favorite color: <input type="color" name="favcolor" value="#0000ff"><br/> Birthday: <input type="date" name="bday" value="2013-09-02"><br/> E-mail: <input type="email" name="email"><br/> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br/> Add your homepage: <input type="url" name="homepage"><br> Transportation: <input type="flying" name="saucer"><br> http://www.wa4e.com/code/forms/html5.php Validation happens when you press submit.
Data Security / Integrity / Validation
Persisting Form Data • When we submit forms and there is an error, we just expect that the data will remain in the form when the page is redisplayed. • The application needs to make sure to put the previous values back into the form.
<?php $oldguess = isset($_POST['guess']) ? $_POST['guess'] : ''; ?> <p>Guessing game...</p> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= $oldguess ?>"/></p> <input type="submit"/> </form> form4.php Review: Ternary Operation “Persisting” Form Data Across Requests <?= $oldguess ?> <?php echo($oldguess); ?>
Hygiene Alert! What happens when we use an HTML character in a form field value?
<form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess size="40" "value=""><b>DIE DIE</b>" /></p> <input type="submit"/> </form> form4.php
To The Rescue: htmlentities() <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> form5.php
<form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> <input type="text" name="guess" id="guess" value="&quot;&gt;&lt;b&gt;DIE DIE&lt;/b&gt;" /></p>
In-Server Data Validation
Web Server Database Server Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form3.ph p $_POST
Incoming Data Validation Making sure all user data is present and the correct format before proceeding • Non-empty strlen($var) > 0 • A number is_numeric($var) • An email address strpos($var, '@') > 0 • Or filter_var($var, FILTER_VALIDATE_EMAIL) !== false • ....
http://www.wa4e.com/code/forms/guess.php?guess=7
http://www.wa4e.com/code/forms/guess.php?guess=200
Convention: Model View Controller (MVC)
Model-View-Controller • A model that defines the elements of a web application and how they interact • View – Produces output • Model – Handles data • Controller – Orchestration / Routing https://en.wikipedia.org/wiki/Model-view-controller
Pattern: Processing POST Data • Many patterns for handling POST data • No “rules”, just “suggestions” <?php $guess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" <?php echo 'value="' . htmlentities($guess) . '"'; ?> /></p> <input type="submit"/> </form> </body> Completely process incoming data (if any) - produce no output Produce the page output guess_mvc.php What about frameworks?
<?php $oldguess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> </body> Model View Controller Context guess_mvc.php
<?php $oldguess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> </body> No HTML No Database Controller Context guess_mvc.php
<?php $guess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?></p> <input type="submit"/> <input type="submit"/> </form> </body> <?php $oldguess = ''; $message = false; if ( isset($_POST['guess']) ) { // Nifty trick $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> ... guess_mvc.php
<?php $guess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?></p> <input type="submit"/> <input type="submit"/> </form> </body> ... ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"></p> <input type="submit"/> </form> </body>
<?php $oldguess = ''; $message = false; if ( isset($_POST['guess']) ) { // Nifty trick $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> ... Note: This code is a little sloppy in terms of its data validation. guess_mvc.php
<html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"></p> <input type="submit"/> </form> </body> guess_mvc.php
Summary • Forms, $_GET and $_POST • Form fields • New form fields in HTML5 • Sanitizing HTML • Data Validation • Model-View-Controller
Acknowledgements / Contributions These slides are Copyright 2010- Charles R. Severance (www.dr-chuck.com) as part of www.wa4e.com and made available under a Creative Commons Attribution 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates Continue new Contributors and Translators here

More Related Content

PPT
PHP-04-Forms PHP-04-Forms PHP-04-Forms PHP-04-Forms
byZahraWaheed9
 
PPT
PHP-08-POST-Redirect-Authn-Slideshare.ppt
bychelmisillie
 
PDF
Practical PHP by example Jan Leth-Kjaer
byCOMMON Europe
 
PDF
Web Development Course: PHP lecture 2
byGheyath M. Othman
 
PPTX
Web Application Development using PHP Chapter 5
byMohd Harris Ahmad Jaal
 
PPTX
forms.pptx
byasmabagersh
 
PPTX
Web Techniques like Cookies and Sessions
bySonaliAbhang
 
PPTX
Working with data.pptx
bySherinRappai
 
PHP-04-Forms PHP-04-Forms PHP-04-Forms PHP-04-Forms
byZahraWaheed9
 
PHP-08-POST-Redirect-Authn-Slideshare.ppt
bychelmisillie
 
Practical PHP by example Jan Leth-Kjaer
byCOMMON Europe
 
Web Development Course: PHP lecture 2
byGheyath M. Othman
 
Web Application Development using PHP Chapter 5
byMohd Harris Ahmad Jaal
 
forms.pptx
byasmabagersh
 
Web Techniques like Cookies and Sessions
bySonaliAbhang
 
Working with data.pptx
bySherinRappai
 

Similar to PHP-04-Forms.ppt

PDF
Quality Assurance for PHP projects - ZendCon 2012
byMichelangelo van Dam
 
PPT
Class 6 - PHP Web Programming
byAhmed Swilam
 
PPTX
Unit - III.pptxbgffhjxfjdfjfgjnsnsnshdhsjsksjsjsjsjsjsjsjsjsldksk
bycpbloger553
 
PPTX
Unit - III.pptxbgffhjxfjdfjfgjnsnsnshdhsjsksjsjsjsjsjsjsjsjsldksk
bycpbloger553
 
PPTX
DJ-08-Forms-HTML.pptx
byDamien Raczy
 
PPTX
5. Formshcfsjhfajkjsfjsjfjksafjsfjkjfhjsafjsajkgfjskafkjas.pptx
byberihun18
 
PPTX
2-Chapter Edit.pptx debret tabour university
byalemunuruhak9
 
PPTX
Working with Data and built-in functions of PHP
bymohanaps
 
PDF
Php summary
byMichelle Darling
 
PPT
Lecture7 form processing by okello erick
byokelloerick
 
KEY
Workshop quality assurance for php projects tek12
byMichelangelo van Dam
 
DOCX
Php forms and validations by naveen kumar veligeti
byNaveen Kumar Veligeti
 
PDF
How to Create Login and Registration API in PHP.pdf
byAppweb Coders
 
PPT
Cookies and sessions
byUdaAs PaNchi
 
PDF
Lecture2_IntroductionToPHP_Spring2023.pdf
byShaimaaMohamedGalal
 
PDF
User authentication module using php
byRishabh Srivastava
 
PPT
Intro to php
bySp Singh
 
PDF
Tutorial_4_PHP
bytutorialsruby
 
PDF
Tutorial_4_PHP
bytutorialsruby
 
PDF
Tutorial_4_PHP
bytutorialsruby
 
Quality Assurance for PHP projects - ZendCon 2012
byMichelangelo van Dam
 
Class 6 - PHP Web Programming
byAhmed Swilam
 
Unit - III.pptxbgffhjxfjdfjfgjnsnsnshdhsjsksjsjsjsjsjsjsjsjsldksk
bycpbloger553
 
Unit - III.pptxbgffhjxfjdfjfgjnsnsnshdhsjsksjsjsjsjsjsjsjsjsldksk
bycpbloger553
 
DJ-08-Forms-HTML.pptx
byDamien Raczy
 
5. Formshcfsjhfajkjsfjsjfjksafjsfjkjfhjsafjsajkgfjskafkjas.pptx
byberihun18
 
2-Chapter Edit.pptx debret tabour university
byalemunuruhak9
 
Working with Data and built-in functions of PHP
bymohanaps
 
Php summary
byMichelle Darling
 
Lecture7 form processing by okello erick
byokelloerick
 
Workshop quality assurance for php projects tek12
byMichelangelo van Dam
 
Php forms and validations by naveen kumar veligeti
byNaveen Kumar Veligeti
 
How to Create Login and Registration API in PHP.pdf
byAppweb Coders
 
Cookies and sessions
byUdaAs PaNchi
 
Lecture2_IntroductionToPHP_Spring2023.pdf
byShaimaaMohamedGalal
 
User authentication module using php
byRishabh Srivastava
 
Intro to php
bySp Singh
 
Tutorial_4_PHP
bytutorialsruby
 
Tutorial_4_PHP
bytutorialsruby
 
Tutorial_4_PHP
bytutorialsruby
 

Recently uploaded

PDF
Web Mapping 101: Creating Dynamic Web Maps with Geospatial Data
bySafe Software
 
PDF
Session 1 - Specialized AI Associate Series: Essential Studio Automation Fea...
byDianaGray10
 
PDF
GDG Cloud Southlake #46: Ozan Unlu: AI at Scale in Observability and Security
byJames Anderson
 
PDF
Starting a Customer Education Program: Taking Your Training to Them
byRustici Software
 
PDF
Session 2 - Specialized AI Associate Series: Orchestrator Deep-Dive and UiPa...
byDianaGray10
 
PDF
Session 1 - Agentic Automation Building the Enterprise Agent of Tomorrow
byDianaGray10
 
PDF
A PROJECT ON EVOLUTION OF DNA FINGERPRINTING AND ITS TECHNOLOGY
bychandrakalasahu568
 
PDF
Supercharge your JVM performance with Project Leyden and Spring Boot
byAmmbra
 
PDF
Unleash the Power of Salesforce Winter ’26 Release.pdf
byyoyoloftis
 
PDF
Comprehensive Analysis of OpenAI's Strategic Transformation at DevDay 2025.pdf
byAlex Doan
 
PPTX
Google Cloud Quest : An introductory training session on how to solve Google ...
byrajashreeborah705
 
PPTX
Introduction-to-Machine-Learning-Part-1-3.pptx
byAliBilal39
 
PPTX
DOC-20250918-WA0002.pptx Understanding the World Around Us
byvivekpunde6
 
PDF
Unit 3 DS - Distributed Data Storage and Retrieval - PowerPoint Content.pdf
byayesha butalia
 
PDF
A business case for open source: From lock-in to value.pdf
byMindtrek
 
PPTX
UiPath Platform: Architecture & Context [1/3]
bysuhanisingh58689
 
PDF
Redefining HR Content Creation: Job Description Automation with UiPath's Agen...
byDianaGray10
 
PDF
Certified Kubernetes Security Specialist (CKS): Unit 5
byVICTOR MAESTRE RAMIREZ
 
PDF
Dr. PANKAJ DHUSSA The near side of the Moon By NASA's Lunar Reconnaissance Or...
byDr. PANKAJ DHUSSA
 
PDF
Ultimate B2B Travel API Integration for Skyrocket Bookings
byanishadivaha
 
Web Mapping 101: Creating Dynamic Web Maps with Geospatial Data
bySafe Software
 
Session 1 - Specialized AI Associate Series: Essential Studio Automation Fea...
byDianaGray10
 
GDG Cloud Southlake #46: Ozan Unlu: AI at Scale in Observability and Security
byJames Anderson
 
Starting a Customer Education Program: Taking Your Training to Them
byRustici Software
 
Session 2 - Specialized AI Associate Series: Orchestrator Deep-Dive and UiPa...
byDianaGray10
 
Session 1 - Agentic Automation Building the Enterprise Agent of Tomorrow
byDianaGray10
 
A PROJECT ON EVOLUTION OF DNA FINGERPRINTING AND ITS TECHNOLOGY
bychandrakalasahu568
 
Supercharge your JVM performance with Project Leyden and Spring Boot
byAmmbra
 
Unleash the Power of Salesforce Winter ’26 Release.pdf
byyoyoloftis
 
Comprehensive Analysis of OpenAI's Strategic Transformation at DevDay 2025.pdf
byAlex Doan
 
Google Cloud Quest : An introductory training session on how to solve Google ...
byrajashreeborah705
 
Introduction-to-Machine-Learning-Part-1-3.pptx
byAliBilal39
 
DOC-20250918-WA0002.pptx Understanding the World Around Us
byvivekpunde6
 
Unit 3 DS - Distributed Data Storage and Retrieval - PowerPoint Content.pdf
byayesha butalia
 
A business case for open source: From lock-in to value.pdf
byMindtrek
 
UiPath Platform: Architecture & Context [1/3]
bysuhanisingh58689
 
Redefining HR Content Creation: Job Description Automation with UiPath's Agen...
byDianaGray10
 
Certified Kubernetes Security Specialist (CKS): Unit 5
byVICTOR MAESTRE RAMIREZ
 
Dr. PANKAJ DHUSSA The near side of the Moon By NASA's Lunar Reconnaissance Or...
byDr. PANKAJ DHUSSA
 
Ultimate B2B Travel API Integration for Skyrocket Bookings
byanishadivaha
 

PHP-04-Forms.ppt

  • 1.
    Form Processing inPHP Dr. Charles Severance www.wa4e.com http://www.wa4e.com/code/forms http://www.wa4e.com/code/forms.zip
  • 2.
    PHP Global Variables •Part of the goal of PHP is to make interacting with HTTP and HTML as easy as possible. • PHP processes the incoming HTTP request based on the protocol specifications and drops the data into various super global variables (usually arrays).
  • 3.
  • 4.
    Web Server DatabaseServer Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t ind.ph p $_GET get-01.php?x=2
  • 5.
    Forms – UserInput / Action <p>Guessing game...</p> <form> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form> http://www.wa4e.com/code/forms/form1.php
  • 6.
    Forms Submit Data form1.php <p>Guessinggame...</p> <form> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form>
  • 7.
    <p>Guessing game...</p> <form> <p><label for="guess">InputGuess</label> <input type="text" name="guess" id="guess"/></p> <input type="submit"/> </form> <pre> $_GET: <?php print_r($_GET); ?> </pre> form2.php
  • 8.
    GET and POSTwith Forms
  • 9.
    Web Server DatabaseServer Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form1.ph p $_POST
  • 10.
    <p>Guessing game...</p> <form method="post"> <p><labelfor="guess">Input Guess</label> <input type="text" name="guess" size="40" id="guess"/></p> <input type="submit"/> </form> <pre> $_POST: <?php print_r($_POST); ?> $_GET: <?php print_r($_GET); ?> </pre> form3.php
  • 11.
    Forms GET vs.POST Two ways the browser can send parameters to the web server • GET - Parameters are placed on the URL which is retrieved. • POST - The URL is retrieved and parameters are appended to the request in the HTTP connection.
  • 12.
    Passing Parameters toThe Server GET /form1.php?guess=42 Accept: text/html User-Agent: Lynx/2.4 libwww/2.14 POST /form3.php Accept: text/html User-Agent: Lynx/2.4 libwww/2.14 Content-type: application/x-www-form-urlencoded Content-length: 13 guess=42 HTTP Request Browser Web Server <input type="text" name="guess" id="yourid" />
  • 13.
    Web Server DatabaseServer Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form3.ph p $_POST
  • 14.
    Rules of thePOST/GET Choice • POST is used when data is being created or modified. • GET is used when you are reading or searching things. • Web search spiders will follow GET URLs but generally not POST URLs. • GET URLs should be “idempotent” - the same URL should give the “same thing” each time you access it. • GET has an upper limit of the number of bytes of parameters and values (think about 2K).
  • 15.
  • 16.
    Other Input Types •Text • Password • Radio Button • Check Box • Select / Drop-Down • Textarea http://www.wa4e.com/code/forms/more.php
  • 17.
    <p>Many field types...</p> <formmethod="post" action="more.php"> <p><label for="inp01">Account:</label> <input type="text" name="account" id="inp01" size="40" ></p> <p><label for="inp02">Password:</label> <input type="password" name="pw" id="inp02" size="40" ></p> <p><label for="inp03">Nick Name:</label> <input type="text" name="nick" id="inp03" size="40" ></p> $_POST: Array ( [account] => Beth [pw] => 12345 [nick] => BK [when] => pm ... ) more.php
  • 18.
    <p>Preferred Time:<br/> <input type="radio"name="when" value="am">AM<br> <input type="radio" name="when" value="pm" checked>PM</p> $_POST: Array( ... [nick] => BK [when] => pm [class] => si502 ... ) more.php
  • 19.
    <p>Classes taken:<br/> <input type="checkbox"name="class1" value="si502" checked> SI502 - Networked Tech<br> <input type="checkbox" name="class2" value="si539"> SI539 - App Engine<br> <input type="checkbox" name="class3"> SI543 - Java<br> </p> $_POST: Array( ... [when] => pm [class1] => si502 [soda] => 0 ... ) $_POST: Array( ... [when] => pm [class3] => on [soda] => 0 ... )
  • 20.
    <p><label for="inp06">Which soda: <selectname="soda" id="inp06"> <option value="0">-- Please Select --</option> <option value="1">Coke</option> <option value="2">Pepsi</option> <option value="3">Mountain Dew</option> <option value="4">Orange Juice</option> <option value="5">Lemonade</option> </select> </p> $_POST: Array( ... [class] => si502 [soda] => 0 [snack] => peanuts ... ) The values can be any string, but numbers are used quite often. more.php
  • 21.
    <p><label for="inp07">Which snack: <selectname="snack" id="inp07"> <option value="">-- Please Select --</option> <option value="chips">Chips</option> <option value="peanuts" selected>Peanuts</option> <option value="cookie">Cookie</option> </select> </p> $_POST: Array( ... [class] => si502 [soda] => 0 [snack] => peanuts ... ) more.php
  • 22.
    <p><label for="inp08">Tell usabout yourself:<br/> <textarea rows="10" cols="40" id="inp08" name="about"> I love building web sites in PHP and MySQL. </textarea> </p> $_POST: Array( ... [about] => I love building web sites in PHP and MySQL. [dopost] => Submit ... ) more.php
  • 23.
    <p><label for="inp09">Which areawesome?<br/> <select multiple="multiple" name="code[]" id="inp09"> <option value="python">Python</option> <option value="css">CSS</option> <option value="html">HTML</option> <option value="php">PHP</option> </select> $_POST: Array( ... [code] => Array ( [0] => css [1] => html ) [dopost] => Submit ... ) more.php
  • 24.
    <p> <input type="submit" name="dopost"value="Submit"/> <input type="button" onclick="location.href='http://www.wa4e.com/'; return false;" value="Escape"> </p> $_POST: Array( ... [dopost] => Submit ... ) On submit input types, the text is both in the UI and in $_POST so we tend to look for the key, not the value. more.php
  • 25.
    HTML5 Input Types •HTML5 defines new input types • Not all browsers support all input types • They fall back to type="text" • http://www.w3schools.com/html/html5_form_input_types.a sp
  • 26.
    Select your favoritecolor: <input type="color" name="favcolor" value="#0000ff"><br/> Birthday: <input type="date" name="bday" value="2013-09-02"><br/> E-mail: <input type="email" name="email"><br/> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br/> Add your homepage: <input type="url" name="homepage"><br> Transportation: <input type="flying" name="saucer"><br> http://www.wa4e.com/code/forms/html5.php Validation happens when you press submit.
  • 27.
    Data Security /Integrity / Validation
  • 28.
    Persisting Form Data •When we submit forms and there is an error, we just expect that the data will remain in the form when the page is redisplayed. • The application needs to make sure to put the previous values back into the form.
  • 29.
    <?php $oldguess = isset($_POST['guess'])? $_POST['guess'] : ''; ?> <p>Guessing game...</p> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= $oldguess ?>"/></p> <input type="submit"/> </form> form4.php Review: Ternary Operation “Persisting” Form Data Across Requests <?= $oldguess ?> <?php echo($oldguess); ?>
  • 30.
    Hygiene Alert! What happenswhen we use an HTML character in a form field value?
  • 31.
    <form method="post"> <p><label for="guess">InputGuess</label> <input type="text" name="guess" id="guess size="40" "value=""><b>DIE DIE</b>" /></p> <input type="submit"/> </form> form4.php
  • 32.
    To The Rescue:htmlentities() <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> form5.php
  • 33.
    <form method="post"> <p><label for="guess">InputGuess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> <input type="text" name="guess" id="guess" value="&quot;&gt;&lt;b&gt;DIE DIE&lt;/b&gt;" /></p>
  • 34.
  • 35.
    Web Server DatabaseServer Time Apache PHP MySql Browser JavaScrip t D O M php code static files RRC/HTTP SQL Parse Response Parse Reques t form3.ph p $_POST
  • 36.
    Incoming Data Validation Makingsure all user data is present and the correct format before proceeding • Non-empty strlen($var) > 0 • A number is_numeric($var) • An email address strpos($var, '@') > 0 • Or filter_var($var, FILTER_VALIDATE_EMAIL) !== false • ....
  • 37.
  • 38.
  • 39.
  • 40.
    Model-View-Controller • A modelthat defines the elements of a web application and how they interact • View – Produces output • Model – Handles data • Controller – Orchestration / Routing https://en.wikipedia.org/wiki/Model-view-controller
  • 41.
    Pattern: Processing POSTData • Many patterns for handling POST data • No “rules”, just “suggestions” <?php $guess = ''; $message = false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" <?php echo 'value="' . htmlentities($guess) . '"'; ?> /></p> <input type="submit"/> </form> </body> Completely process incoming data (if any) - produce no output Produce the page output guess_mvc.php What about frameworks?
  • 42.
    <?php $oldguess = ''; $message= false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> </body> Model View Controller Context guess_mvc.php
  • 43.
    <?php $oldguess = ''; $message= false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"/></p> <input type="submit"/> </form> </body> No HTML No Database Controller Context guess_mvc.php
  • 44.
    <?php $guess = ''; $message= false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?></p> <input type="submit"/> <input type="submit"/> </form> </body> <?php $oldguess = ''; $message = false; if ( isset($_POST['guess']) ) { // Nifty trick $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> ... guess_mvc.php
  • 45.
    <?php $guess = ''; $message= false; if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters $guess = $_POST['guess'] + 0; if ( $guess == 42 ) { $message = "Great job!"; } else if ( $guess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?></p> <input type="submit"/> <input type="submit"/> </form> </body> ... ?> <html> <head> <title>A Guessing game</title> </head> <body style="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"></p> <input type="submit"/> </form> </body>
  • 46.
    <?php $oldguess = ''; $message= false; if ( isset($_POST['guess']) ) { // Nifty trick $oldguess = $_POST['guess'] + 0; if ( $oldguess == 42 ) { $message = "Great job!"; } else if ( $oldguess < 42 ) { $message = "Too low"; } else { $message = "Too high..."; } } ?> <html> ... Note: This code is a little sloppy in terms of its data validation. guess_mvc.php
  • 47.
    <html> <head> <title>A Guessing game</title> </head> <bodystyle="font-family: sans-serif;"> <p>Guessing game...</p> <?php if ( $message !== false ) { echo("<p>$message</p>n"); } ?> <form method="post"> <p><label for="guess">Input Guess</label> <input type="text" name="guess" id="guess" size="40" value="<?= htmlentities($oldguess) ?>"></p> <input type="submit"/> </form> </body> guess_mvc.php
  • 48.
    Summary • Forms, $_GETand $_POST • Form fields • New form fields in HTML5 • Sanitizing HTML • Data Validation • Model-View-Controller
  • 49.
    Acknowledgements / Contributions Theseslides are Copyright 2010- Charles R. Severance (www.dr-chuck.com) as part of www.wa4e.com and made available under a Creative Commons Attribution 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates Continue new Contributors and Translators here

Editor's Notes

  • #50 Note from Chuck. Please retain and maintain this page as you remix and republish these materials. Please add any of your own improvements or contributions.