1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design.
19
1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design
Transcript of 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design.
1
DIG 3134 – Lecture 3
Forms
Michael MoshellUniversity of Central Florida
Media Software Design
2
The Objective:• Learn how to build forms, and
how to capture the data from a form with a PHP program.
3
What is a form?
It’s a special HTML page thatContains one or more fields to capture data.
The most common kinds of fields are:Text input boxesCheckboxesRadio ButtonsSUBMIT ButtonsContinue
4
How do you make a form?
Dreamweaver can do it, but you MUSTunderstand the HTML code. You canprogram input fields (“controls”) directly.
<form method=“post” action=“http://me.com/capture.php” >
The ‘form’ tags are simple, and necessary.Be careful: don’t let Dreamweaver makeMORE THAN ONE set of them!
</form>
5
What’s a GET? What’s A POST? There are two ways for data to flow fromThe form to the script: “get” and “post”.We will talk about “get” later.
<!– ex1form.html -- ><form method=“post” action=“ex1capture.php” > <input type=“text” name=firstname" />Name
<input type="submit" name=”dowhat" value=”Send the Data" />
</form>
Name
Continue
6
How do you catch the data?ex1form.html
ex1capture.php
<?php$firstname=$_POST['firstname'];print "The dude's first name is $firstname. <br />";$button=$_POST['dowhat'];print "The button clicked= '$button'.";
?>$_POST is a built-in global array.
<form method=“post” action=“ex1capture.php” > <input type=“text” name=firstname" />Name
<input type="submit" name=”dowhat" value=”Send the Data" />
</form>
7
Analyzing the Data FlowClient (Browser) Server (Apache)
url:ex1form.htmlSend backex1form.html
Fill inThe form Run the script
ex1capture.phpsend back HTML:”The dude’s...."
RenderHTML,See theResults.End of story
url:ex1capture.php
8
Example 2: Combine Form & Capture
Ex2formcapture.php
From here on down, please examine the Text file “example1.formprocessing.txt”To see the code.
It’s too messy to paste it into Powerpoint.
9
The other Examples: What they show
Ex3: How to make the program replay
10
The other Examples: What they show
Ex3: How to make the program replay
Ex4: Another way to mix HTML and PHP
Advantage: you can SEE the HTML inDreamweaver ‘design view’.
Disadvantage: remembering if I’m insideor outside PHP at each point.
11
The other Examples: What they show
Ex3: How to make the program replay
Ex4: Another way to mix HTML and PHP
Advantage: you can SEE the HTML inDreamweaver ‘design view’.
Disadvantage: remembering if I’m insideor outside PHP at each point.
Ex5: No Thanks. (if – else if – else if)
12
HOMEWORK Task 0:
(optional) If you have very little programmingExperience, try this first:
Modify Example 2 by adding this line, right belowThe <?php line:
Print “<h1>My First Modification!</h1>”;
Then save this modified code in your htdocs orwww folder as ‘test1.php’. Then in browser:
Localhost://test1.php (for mac: localhost:8888)
13
HOMEWORK Task 1:
Modify Example 5 so that it asks for The user’s FIRST and LAST names, in 2 boxes.
First Name Last Name
Send the data
When you enter “Jane Doe” and click on “Send the Data”, the program will display like this:
Congratulations Jane Doe, you have won!
14
<?php
# Part 1: Producing the Form:
print " <form method='POST’>”; // no action? Act on yourself (this program)
Print " <input type='checkbox' name='sale1' value=1 />
Luscious Lollipop = 10 cents (5 cents for Senior Citizens.) <br />
<input type='checkbox' name='seniorcitizen' value=1 />
Check here if you are a Senior Citizen <br />
<input type='submit' name='controlnextstep' value='Continue' />
”;
Example 6: Two Inputs
Ex6.lolly.php How much is that Lollipop?
www.realtown.com
15
Example 6: Two Inputs
Ex6.lolly.php
# PART 2: Input Processor$sale1=$_POST['sale1'];$seniorcitizen=$_POST['seniorcitizen'];
if ($sale1){ if ($seniorcitizen)
{ print 'Your lollipop will cost 5 cents.<br />'; }else{ print 'Your lollipop will cost 10 cents. <br />';}
} else{ print 'You did not buy any lollipops. <br />'; }
How much is that Lollipop?
www.realtown.com
16
Homework 2: Numeric InputSelling lots of pops
www.realtown.com
Modify the Ex6 program: Replace checkbox byA textbox.
How many lollipops do you want? 10 cents each (5 cents for senior citizens.)
Check here if you are over 60 years old.
If you enter 10 and check the senior box,program prints "Your lollipops will cost 50 cents."
Continue
17
Homework 2: Numeric InputSelling lots of pops
www.realtown.com
Hint:<input type='text' size=2 name='sale1’ />
18
Challenge: Graphic Output
graphical pops
www.realtown.com
(Optional): Modify your program so that itdraws however many pops you bought.
19
For Thursday:www.realtown.com
Get ALL homeworks done! We will be startingOn Project 1, on Thursday, and you need to Be Up to Speed.
Come see me for help if needed!
Office hours or appointments – be proactive!
