DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida

Media Software Design DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida

The Objective: • Learn how to build forms, and • how to capture the data from • a form with a PHP program.

What is a form? It’s a special HTML page that Contains one or more fields to capture data. The most common kinds of fields are: Text input boxes Checkboxes Radio Buttons SUBMIT Buttons Continue

How do you make a form? Dreamweaver can do it, but you MUST understand the HTML code. You can program 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 make MORE THAN ONE set of them! </form>

What’s a GET? What’s A POST? There are two ways for data to flow from The 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

How do you catch the data? ex1form.html <form method=“post” action=“ex1capture.php” > <input type=“text” name=firstname" />Name <input type="submit" name=”dowhat" value=”Send the Data" /> </form> 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.

Analyzing the Data Flow Client (Browser) Server (Apache) url:ex1form.html Send back ex1form.html Fill in The form url:ex1capture.php Run the script ex1capture.php send back HTML: ”The dude’s...." Render HTML, See the Results. End of story

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.

The other Examples: What they show Ex3: How to make the program replay

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 in Dreamweaver ‘design view’. Disadvantage: remembering if I’m inside or outside PHP at each point.

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 in Dreamweaver ‘design view’. Disadvantage: remembering if I’m inside or outside PHP at each point. Ex5: No Thanks. (if – else if – else if)

HOMEWORK Task 0: (optional) If you have very little programming Experience, try this first: Modify Example 2 by adding this line, right below The <?php line: Print “<h1>My First Modification!</h1>”; Then save this modified code in your htdocs or www folder as ‘test1.php’. Then in browser: Localhost://test1.php (for mac: localhost:8888)

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!

Example 6: Two Inputs www.realtown.com Ex6.lolly.php How much is that Lollipop? <?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 www.realtown.com Ex6.lolly.php How much is that Lollipop? # 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 />'; }

Homework 2: Numeric Input www.realtown.com Selling lots of pops • Modify the Ex6 program: Replace checkbox by • A 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

Homework 2: Numeric Input www.realtown.com Selling lots of pops Hint: <input type='text' size=2 name='sale1’ />

Challenge: Graphic Output www.realtown.com graphical pops (Optional): Modify your program so that it draws however many pops you bought.

For Thursday: www.realtown.com Get ALL homeworks done! We will be starting On 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!

DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida