BITM3730 10-25.pptx

Forms/PHP
BITM 3730
Developing Web Applications
10/25

Basic HTML Form
• Boring
• Limited
• Hard to Store info

Reminder from HTML Lesson
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

Inputs - HTML
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button

HTML Example
• <html>
• <body>
• <h2>HTML Form</h2>
• <form action="/action_page.php">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname" value="John"><br>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• <input type="submit" value="Submit">
• </form>
• </body>
• </html>

Visual
Only two inputs
Both inputs are text

<form action="/action_page.php">
• This does all the work of sending the information

HTML with no PHP
• <html>
• <body>
• <h2>HTML Form</h2>
• <form>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• </form>
• </body>
• </html>
Does not send the input
anywhere

Why Won’t This Work?
• <form action="/action_page.php">
• <input type="text" id="fname" value="John"><br><br>
• </form>
Missing name="fname"

Radio Buttons
• <form>
• <input type="radio" id="html" name="fav_language" value="HTML">
• <label for="html">HTML</label><br>
• <input type="radio" id="css" name="fav_language" value="CSS">
• <label for="css">CSS</label><br>
• <input type="radio" id="javascript" name="fav_language" value="JavaScript">
• <label for="javascript">JavaScript</label>
• </form>

Check Boxes
• <form>
• <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
• <label for="vehicle1"> I have a bike</label><br>
• <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
• <label for="vehicle2"> I have a car</label><br>
• <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
• <label for="vehicle3"> I have a boat</label>
• </form>

All Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Understanding PHP
• A PHP script can be placed anywhere in the document.
• A PHP script starts with <?php and ends with ?>:
• <?php
• // PHP code goes here
• ?>
• The default file extension for PHP files is ".php".
• A PHP file normally contains HTML tags, and some PHP scripting code.

Using PHP – HTML Code
• <html>
• <body>
• <form action="welcome_get.php" method="get">
• Name: <input type="text" name="name"><br>
• E-mail: <input type="text" name="email"><br>
• </form>
• </body>
• </html>

welcome_get.php Code
• <html>
• <body>
• Welcome <?php echo $_GET["name"]; ?><br>
• Your email address is: <?php echo $_GET["email"]; ?>
• </body>
• </html>

Visual
Once submitted, displays

Using PHP to Upload Files - HTML
• <html>
• <body>
• <form action="upload.php" method="post" enctype="multipart/form-data">
• Select image to upload:
• <input type="file" name="fileToUpload" id="fileToUpload">
• <input type="submit" value="Upload Image" name="submit">
• </form>
• </body>
• </html>

upload.php
• <?php
• $target_dir = "uploads/";
• $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
• $uploadOk = 1;
• $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
• // Check if image file is a actual image or fake image
• if(isset($_POST["submit"])) {
• $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
• if($check !== false) {
• echo "File is an image - " . $check["mime"] . ".";
• $uploadOk = 1;
• } else {
• echo "File is not an image.";
• $uploadOk = 0;
• }
• }

upload.php
• // Check if file already exists
• if (file_exists($target_file)) {
• echo "Sorry, file already exists.";
• $uploadOk = 0;
• }
• // Check file size
• if ($_FILES["fileToUpload"]["size"] > 500000) {
• echo "Sorry, your file is too large.";
• $uploadOk = 0;
• }
• // Allow certain file formats
• if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
• && $imageFileType != "gif" ) {
• echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
• $uploadOk = 0;
• }

upload.php
• // Check if $uploadOk is set to 0 by an error
• if ($uploadOk == 0) {
• echo "Sorry, your file was not uploaded.";
• // if everything is ok, try to upload file
• } else {
• if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
• echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
• } else {
• echo "Sorry, there was an error uploading your file.";
• }
• }
• ?>

What is the PHP Code Doing?
• PHP script explained:
• $target_dir = "uploads/" - specifies the directory where the file is going to be
placed
• $target_file specifies the path of the file to be uploaded
• $uploadOk=1 is not used yet (will be used later)
• $imageFileType holds the file extension of the file (in lower case)
• Next, check if the image file is an actual image or a fake image

PHP Open and Read
• <?php
• $myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
• echo fread($myfile,filesize("webdictionary.txt"));
• fclose($myfile);
• ?>

PHP Create and Write
• <?php
• $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
• $txt = "John Doen";
• fwrite($myfile, $txt);
• $txt = "Jane Doen";
• fwrite($myfile, $txt);
• fclose($myfile);
• ?>

Homework
Assignment 7:
Using PHP, JavaScript and/or HTML create a Contact form which will accept Name, Email, and
Comment as inputs. The Submit button can either return the input or provide an external webpage noting
your input has been emailed.

HTML
• <html>
• <body>
• <form action="welcome.php" method="post">
• Comment: <input type="text" name="comment"><br>
• </form>
• </body>
• </html>

Have to edit welcome.php
• <html>
• <body>
• Welcome <?php echo $_POST["name"]; ?><br>
• Your email address is: <?php echo $_POST["email"]; ?>
• Your comment was: <?php echo $_POST[“comment”]; ?>
• </body>
• </html>

To Send via Email
• <?php
• $from = "matt.marino@shu.edu";
• $to = "dspace-community@googlegroups.com";
• $message = "Unsubscribe";
• $info = "Unsubscribe";
• $check = mail($to, "Unsubscribe",
• $message, "From:matt.marino@shu.edu");
• if ($check != true) { echo "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";}
• else { echo "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You Shortly...";}
Create a file mailtest.php
and upload to your courses
web space
Change the to
To your email address, so you
get the inputs

HTML for Email
• <html>
• <body>
• <form action=“mailtest.php" method="post">
• Comment: <input type="text" name="comment"><br>
• </form>
• </body>
• </html>
PHP files must be live on a web server to
work properly

BITM3730 10-25.pptx

Recommended

Recommended

More Related Content

Similar to BITM3730 10-25.pptx

Similar to BITM3730 10-25.pptx (20)

More from MattMarino13

More from MattMarino13 (20)

Recently uploaded

Recently uploaded (20)

BITM3730 10-25.pptx