Download - 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design
![Page 1: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/1.jpg)
1
DIG 3134 – Lecture 3
Forms
Michael MoshellUniversity of Central Florida
Media Software Design
![Page 2: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/2.jpg)
2
The Objective:• Learn how to build forms, and
how to capture the data from a form with a PHP program.
![Page 3: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/3.jpg)
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
![Page 4: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/4.jpg)
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>
![Page 5: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/5.jpg)
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
![Page 6: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/6.jpg)
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>
![Page 7: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/7.jpg)
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
![Page 8: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/8.jpg)
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.
![Page 9: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/9.jpg)
9
The other Examples: What they show
Ex3: How to make the program replay
![Page 10: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/10.jpg)
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.
![Page 11: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/11.jpg)
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)
![Page 12: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/12.jpg)
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)
![Page 13: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/13.jpg)
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!
![Page 14: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/14.jpg)
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
![Page 15: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/15.jpg)
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
![Page 16: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/16.jpg)
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
![Page 17: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/17.jpg)
17
Homework 2: Numeric InputSelling lots of pops
www.realtown.com
Hint:<input type='text' size=2 name='sale1’ />
![Page 18: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/18.jpg)
18
Challenge: Graphic Output
graphical pops
www.realtown.com
(Optional): Modify your program so that itdraws however many pops you bought.
![Page 19: 1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design](https://reader033.vdocuments.mx/reader033/viewer/2022051516/56649de45503460f94adbb7f/html5/thumbnails/19.jpg)
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!