Jump to content
Larry Ullman's Book Forums

Recommended Posts

Been using this book for my college course and ran into an issue I can't seem to solve. The image popup window is not popping up from chapter 11.

 

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $pagetitle; ?></title>
<link rel="stylesheet" href="includes/styles.css" type="text/css" /> <!-- The style sheet path was incorrect. -->
<script type=”text/javascript” charset=”utf-8” src=”includes/function.js”></script>
</head>

<body>
<div id="header">
<h1>Website</h1>
<h2>I soo cool man!</h2>
</div>
<div id="navigation">
<ul>
	<?php if (isset($_SESSION['guestid'])) { ?>
		<li><a href="logout.php">Logout</a></li>
        <li><a href="upload.php">Upload Photo</a></li>
    <?php } else {	?>
    	<li><a href="login.php">Login</a></li>
        <li><a href="guestbook.php">Guest Book</a></li>
	<?php }	?>
	<li><a href="showguests.php">Show Guests</a></li>
	<li><a href="images.php">Show Photos</a></li>
</ul>

</div>
<div id="content">

upload.php

<?php
session_start();
if (!isset($_SESSION['guestid'])) {
 require ('includes/login_functions.php');
 redirect_user('login.php');
}
//Set variable for page title prior to loading header which needs the page title variable.
$pagetitle = 'IT250 Photo Upload';
//Add in header.
include ('includes/header.php');
//Requires the database connection script.
require ('includes/connect.php');
?>


<?php
// Check if the form has been submitted:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	// Check for an uploaded file:
	if (isset($_FILES['upload'])) {
	// Validate the type. Should be JPEG or PNG.
	$allowed = array ('image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png');
		if (in_array($_FILES['upload']['type'], $allowed)) {
			// Rename the file
			// Get extension
			$filename = $_FILES['upload']['name'];
			$ext = substr($filename,strpos($filename, '.'));
			$filecount = count(glob('photos/*.*'));
			$newname = 'photos/Guest' . $_SESSION['guestid'] . '_Photo' . ($filecount + 1) . $ext;
			
			// Move the file over.
			if (move_uploaded_file($_FILES['upload']['tmp_name'], $newname)) {
				echo '<p><em>The file has been uploaded!</em></p>';
				echo '<img src="' . $newname . '">';
				} // End of move... IF.
				} else { // Invalid type.
					echo '<p class="error">Please upload a JPEG or PNG image.</p>';
			}
	} // End of isset($_FILES['upload']) IF.

// Check for an error:
if ($_FILES['upload']['error'] > 0) {
	echo '<p class="error">The file could not be uploaded because: <strong>';
	// Print a message based upon the error.
		switch ($_FILES['upload']['error']) {
		case 1:
		print 'The file exceeds the upload_max_filesize setting in php.ini.';
		break;
		case 2:
		print 'The file exceeds the MAX_FILE_SIZE setting in the HTML form.';
		break;
		case 3:
		print 'The file was only partially uploaded.';
		break;
		case 4:
		print 'No file was uploaded.';
		break;
		case 5:
		print 'No temporary folder was available.';
		break;
		case 6:
		print 'Unable to write to the disk.';
		break;
		case 7:
		print 'File upload stopped.';
		break;
		default:
		print 'A system error occurred.';
		break;
		} // End of switch.
	print '</strong></p>';
} // End of error 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.php" method="post">

<input type="hidden" name="MAX_FILE_SIZE" value="524288" />

<fieldset>
<legend>Select a JPEG or PNG image of 512KB or smaller:</legend>
<p><b>File:</b> <input type="file" name="upload" /></p>
<div align="center"><input type="submit" name="submit" value="Begin Upload" /></div>
</fieldset>
</form>


<?php

//Add in footer.
include ('includes/footer.php');
?>

function.js

// Script 11.3 - function.js

// Make a pop-up window function:
function create_window (image, width, height) {

// Add some pixels to the width and height:
width = width + 10;
height = height + 10;


// If the window is already open,
// resize it to the new dimensions:
if (window.popup && !window.popup.closed) {
	window.popup.resizeTo(width, height);
}

// Set the window properties:
var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height;

// Set the URL:
var url = "show_image.php?image=" + image;

// Create the pop-up window:
popup = window.open(url, "ImageWindow", specs);
popup.focus( );

} // End of function.

images.php

<?php
session_start();
if (!isset($_SESSION['guestid'])) {
 require ('includes/login_functions.php');
 redirect_user('login.php');
}
//Set variable for page title prior to loading header which needs the page title variable.
$pagetitle = 'IT250 Unit 9';
//Add in header.
include ('includes/header.php');
?>
<?php # Script 11.4 - images.php
// This script lists the images in the uploads directory.
echo '<p>Click on an image to view it in a separate window.</p>';
echo '<ul>';
// Define the directory to view.
$dir = 'photos/';

// Read all the images into an array.
$files = scandir($dir);

// Display each image caption as a link to the JavaScript function:
foreach ($files as $image) {
	//Ignore anything starting with a period.
	if (substr($image, 0, 1) != '.') {
		// Get the image's size in pixels:
		$image_size = getimagesize("$dir/$image");
		// Make the image's name URL-safe:
		$image_name = urlencode($image);
		// Print the information:
		echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">$image</a></li>\n";
	} // End of the IF.
} // End of the foreach loop.
echo '</ul>';

//Add in footer.
include ('includes/footer.php');
?>

show_image.php

<?php # Script 11.5 - show_image.php
// This page displays an image.

$name = FALSE; // Flag variable:

// Check for an image name in the URL:
if (isset($_GET['image'])) {
// Make sure it has an image's extension:
$ext = strtolower ( substr ($_GET['image'], -4));
	if (($ext == '.jpg') OR ($ext =='jpeg') OR ($ext == '.png')) {
	// Full image path:
	$image = "../photos/{$_GET['image']}";
		// Check that the image exists and is a file:
		if (file_exists ($image) && (is_file($image))) {
		// Set the name as this image:
		$name = $_GET['image'];
		} // End of file_exists( ) IF.
	} // End of $ext IF.
} // End of isset($_GET['image']) IF.

// If there was a problem, use the default image:
if (!$name) {
$image = 'photos/unavailable.png';
$name = 'unavailable.png';
}

// Get the image information:
$info = getimagesize($image);
$fs = filesize($image);

// Send the content information:
header ("Content-Type: {$info['mime']}\n");
header ("Content-Disposition: inline; filename=\"$name\"\n");
header ("Content-Length: $fs\n");

// Send the file:
readfile ($image);

I am still learning and with what I know I have scanned this code and can not find the problem. Any assistance is appreciated. Most of this is pretty much straight out of the book.

 

Regards,

Nightasy

Link to comment
Share on other sites

I got this error.

 

Mozilla Firefox

[20:04:28.402] GET http://localhost/unit09/%E2%80%9Dincludes/function.js%E2%80%9D [HTTP/1.1 404 Not Found 1ms]

Google Chrome:

Uncaught ReferenceError: create_window is not defined

(anonymous function)

Link to comment
Share on other sites

Both the header and the function.js are in the includes folder. I copy and pasted the function.js to the root directory, and even to another folder in the includes folder named includes. Still no luck. It just doesn't create a popup window.

 

What does confuse me is why Mozilla brings back this error upon initially opening the images page.

[20:26:38.699] GET http://localhost/unit09/%E2%80%9Dincludes/function.js%E2%80%9D [HTTP/1.1 404 Not Found 0ms]

Basically it's telling me that the address is adding on %E2%80%9D before the includes folder and %E2%80%9D which is UTF-8, is it supposed to be adding that onto the url?

Link to comment
Share on other sites

The easiest way to check is viewing your sites source code. Find the link to your JS file and click it. See where the path is leading and change accordingly.

 

The source code is stating includes/function.js is what it is attempting to load. This should be correct because the images.php is in the root directory.

Link to comment
Share on other sites

I figured it out. In my header.php file the line:

<script type=”text/javascript” charset=”utf-8” src=”includes/function.js”></script>

Was using the wrong quotation (") marks. They looked like the right marks but they were not. I don't have a clue how that happened but I happened to notice that when checking this with Dreamweaver it wasn't able to find the function.js file on the local disk.

 

That prompted me to go back and retype the entire line out. It's working great now.

 

Regardless though, thanks for looking this over.

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...