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

Preview:

Citation preview

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!

Recommended