Chapter 5 Web Application Development Slide 1
CHAPTER 5:
Web Application Development
Topics covered:-
Hidden Form Fields
Passing Values
Query Strings
File Uploads
HTTP Headers
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 2
Learning Outcomes
At the end of this chapter, you should be able to
• Pass values to a PHP script using hidden form fields
• Pass values to a PHP script using query strings
• Write PHP scripts to upload and download files
• Use HTTP Headers for redirecting a browser to a new URL
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 3
Sending Values to a Script
• Two methods of passing values to a PHP script
a.) Use of HTML’s hidden input type
b.) Append the value to the URL
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 4
Hidden Form Fields (1)
• To pass form values from one PHP script to another PHP script,
store the values in hidden form fields via the <input> element
<input type="hidden“ name= “..” value=“..”>
• Hidden form fields temporarily store data that needs to be sent to
a server that a user does not need to see
• Access the values submitted from the form with the $_GET[] and
$_POST[] superglobal variables
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 5
Hidden Form Fields (2)
phphidden.html
<h3>Who are the happiest people ? <br>
Click the button to find out. <br></h3>
<form method="post" action="phphidden.php">
<input type="hidden" name="people" value="Babies">
<input type="submit" value="Send">
</form>
phphidden.php
<body>
<?php
echo "<h3>I am sure you guess correctly! <br/>
$_REQUEST['people']</h3>";
?>
</body>
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 6
Query Strings (1)
• A query string is a set of name=value pairs appended to a target URL
• Add a question mark (?) immediately after the URL followed by the
query string
• Separate individual name=value pairs within the query string using
ampersands (&)
• Read value using the GET method
• Syntax:
page.php?name1=value1
&name2=value2&name3=value3
• Any space in the string would be problematic.
Solution - use the urlencode() function
Eg:
$url = 'page.php?name=' . urlencode(‘John Smith');
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 7
register.php
<?php
if(isset($_POST['submitted'])) {
if ((isset($_REQUEST['name'])) && (isset($_REQUEST['email'])) ) {
$name=$_POST['name'];
echo "<h3> You have successfully registered! $name</h3></br>\n ";
echo "<a href='welcome.php?name=$name'>Click here to proceed</a><br/>";
} else {
echo "<h1>Error</h1>";
}
}
?>
welcome.php
<?php
print "Welcome to TAR College </br>".$_GET['name']."!<br/>\n";
print '<a href="register.php">Click here to return to home page</a><br/>';
?>
AMIT 2043 Web Systems and Technologies example 2
Chapter 5 Web Application Development Slide 8
Handling File Uploads (1)
• Syntax to handle a file upload must has three parts:
<form enctype="multipart/form-data"
action="script.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE"
value="30000" />
File <input type="file" name="upload" />
• Files are uploaded using the “post” method
• An enctype attribute must have a value of “multipart/form-data,” which
instructs the browser to post multiple sections – one for regular form data
and one for the file contents
• MAX_FILE_SIZE must come before the file input.
• The file input field creates a Browse button for the user to navigate to
the appropriate file to upload
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 9
Handling File Uploads (2)
• The move_uploaded_file() function moves the uploaded file from
its temporary location to a permanent destination. Syntax:
move_uploaded_file (temporary_filename,
/path/to/destination/filename);
• The function returns TRUE if the move succeeds, and FALSE if the move
fails.
• Data about the uploaded file can be obtained from the $_FILES array.
Index Meaning
name The original name of the file on the user’s computer
type The MIME type of the file, as provided by the browser.
size The size of the uploaded file in bytes.
tmp_name The temporary filename of the uploaded file on the server
error The error code associated with any problem
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 10
if (isset($_POST['submitted'])) {
// Check for an uploaded file:
if (isset($_FILES['upload'])) {
if (move_uploaded_file ($_FILES['upload']['tmp_name'],
“../uploads/{$_FILES['upload']['name']}")) {
echo '<p><em>The file has been uploaded!</em></p>';
} else { echo '<p class="error">Upload fails</p>';
}
} // End of isset($_FILES['upload']) IF.
// Delete the file if it still exists:
if (file_exists ($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name']) ) {
unlink ($_FILES['upload']['tmp_name']);
} } // End of the submitted conditional.
?>
<form enctype="multipart/form-data" action="upload_image.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288">
<fieldset><legend>Select a JPEG or PNG image of 512KB or smaller to be uploaded:</legend>
<p><b>File:</b> <input type="file" name="upload" /></p></fieldset>
<div align="center"><input type="submit" name="submit" value="Submit" /></div>
<input type="hidden" name="submitted" value="TRUE" />
</form>
example 4\upload_image.php
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 11
HTTP Headers (1)
• PHP’s built-in header() function can be used for
Redirecting the Web browser from the current page to
another.
Sending files to the Web browser
etc
• Syntax:
header(header string);
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 12
HTTP Headers (2)
redirect.html
<h1>Using HTTP headers to redirect the Browser</h1>
Which page would you like to see?
<form name="form1" action="redirect.php" method="post">
<input type="submit" name="button" value="Homepage">
</form>
<form name="form2" action="redirect.php" method="post">
<input type="submit" name="button" value="Catalog">
</form>
redirect.php
<?php
$redirect = "Location: " . $_REQUEST['button'] . ".html";
echo header($redirect);
?>
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 13
HTTP Headers (3)
• To send a file to the Web browser, three header calls are used.
Content-Type : tells the Web browser the kind of data is to be sent.
Content-Type value matches the data’s MIME type.
Content-Disposition: tells the browser how to treat the data
attachment – to download
Inline – display
Content-Length : the amount of data to be sent.
• Each of the multiple header() calls should be terminated by a newline (\n)
• A header() function must be called before anything (including HTML or
blank spaces) is sent to the Web browser.
Example :
header("Content-Type:application/pdf\n");
header("Content-Disposition:attachment; filename=\"ff.pdf\"\n");
header ("Content-Length: 4096\n");
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 14
HTTP Headers (4)
Index.html
<body>
Welcome to the world of "Beautiful Scenery"<br>
<img src=show_image.php?imname=Sunset.jpg><br>
</body>
<?php // show_image.php
$im= stripslashes($_REQUEST[imname]);
$image = "../uploads/$im";
$info = getimagesize($image);
$fs = filesize($image);
// Send the content information:
header ("Content-Type: {$info['mime']}\n");
header ("Content-Disposition: inline; filename=\"$im\"\n");
header ("Content-Length: $fs\n");
// Send the file:
readfile ($image);
example 4
AMIT
?> 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 15
HTTP Headers (5)
• getimagesize() function returns an array containing the
following data:
Element Value
0 image’s width in pixels
1 image’s height in pixels
2 image’s type (2 representing JPG)
3 appropriate HTML img tag data
mime image’s MIME type
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 16
Example: Stock Maintenance (1)
Chapter5\add_print.php
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 17
Example: Stock Maintenance (2)
Chapter5\view_print.php
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 18
Example: Stock Maintenance (3)
Chapter5\view_stock.php
Chapter5\edit_stock.php Chapter5\delete_stock.php
AMIT 2043 Web Systems and Technologies
Chapter 5 Web Application Development Slide 19
References
• PHP and MySQL by Ullman, L. Peachpit Press
• PHP Programming with MySQL Second Edition
by Gosselin, D., Kokoska, D. & Easterbrooks, R.
Course Technology
AMIT 2043 Web Systems and Technologies
