Online Photo Album Development using PHP and GD: Part 2

In this part Frank will explain how to code the photo album using PHP and MySQL. This is the second part of his series and focuses on building the user interface.

Before we can upload our images, we need to create our albums. Our album creation form is very simple. We will have 2 fields and 1 button: album name, album description, and submit. We’ll call our script create_album.php:

[code]

include("../include/config.php");
?>






 






Add
New Album





















Please indicate the number of images you wish
to upload to your album(s). If you would like to create a new album,
click the Create New Album link below.
   
Album Name:



Edit Existing Album(s)
Album Description:

 







Main Menu | Create
New Album
| View Gallery


[/code]

>{mospagebreak title=Code: Explained}

The HTML code is straight-forward; however, I’ll explain the PHP code from above:

include(“../include/config.php”);
?>

We’ll be including config.php in all of our files. The config.php file allows us to make use of global variables throughout our application. Our config.php file looks like this:

[code]

// Include file for database connectivity
$db_server = "localhost";
$db_user = "admin";
$db_pass = "admin";
$db_name = "album";
// Number of images to display per row in gallery view
DEFINE("IMAGE_DISPLAY", 3);
/*****
* Connects to database system
*/
function db_connect(){
global $db_server;
global $db_user;
global $db_pass;
global $db_name;
$dbcnx = mysql_connect($db_server, $db_user, $db_pass) or die("Error connecting to database: " . mysql_error());
$dbsel = mysql_select_db($db_name, $dbcnx) or die("Error reading from database table: " . mysql_error());
}
/*****
* Displays HTML output page. The message argument, if passed,
* will be displayed to the user. The title element, is passed,
* replaces the page title, and the cell Boolean places the page
* $msg between
*/
function displayPage($msg = "", $title="", $cell = true){
?>














// Display opening ");
?>

tag
if ($cell)
echo("
");
echo($msg);

// Display closing
tag
if ($cell)
echo("



}
?>

[/code] >{mospagebreak title=Configurating}

Our config file initializes our connection variables: $db_server, $db_user, $db_pass, and $db_name. These variables are used in the db_connect() function which simply connects to our database system (in this case MySQL) and selects the album database we’ll be using in our application.

Our create_album.php file is simply a form that accepts user-input, and submits the data to our processing script. Once the data is entered by the user, our processor script checks to see if all the fields have been completed; if not, an error message is displayed. If all fields are complete, the album data is added to the database. We’ll call our processor script add_album.php:

[code]

include_once("../include/config.php");
// Verify that all form elements are completed
if (empty($_POST['album_name']) || empty($_POST['album_desc'])){
displayPage("Please complete all required fields!
Go Back", "Error Adding Album!");
die();
}
// Connect to database
db_connect();
$sql = "INSERT INTO albums VALUES(0, '" . addslashes($_POST['album_name']) . "', '" . addslashes($_POST['album_desc']) . "', 0, '', '')";
$result = @mysql_query($sql) or die("Error inserting record: " . mysql_error());
if ($result){
// Notify use that album was successfully created.
$msg .= "Album " . $_POST['album_name'] . " successfully created!";
$msg .= "
Click here to administrate the " . $_POST['album_name'] . " album";
$msg .= "

Click here to return to the administrative area

";
displayPage($msg, "Album " . $_POST['album_name'] . "Added!");
}
?>

 

"; displayPage($msg, "Album " . $_POST['album_name'] . "Added!"); } ?>";displayPage($msg, "Album " . $_POST['album_name'] . "Added!");}?>

Here's a breakdown of the code:

include_once("../include/config.php");
// Verify that all form elements are completed
if (empty($_POST['album_name']) || empty($_POST['album_desc'])){
displayPage("Please complete all required fields!
Go Back", "Error Adding Album!");
die();
}

[/code]

The include line, again, is to make use of the global variables and function that allow us to connect to the database.

>{mospagebreak title=Connecting to the Database}

The first thing we do is check to see if the album name and description is incomplete (empty). If they are empty, we call the displayPage() function and pass to it our error message. The displayPage() function simply accepts a string argument, and displays the message to the user. Once the displayPage() function has been called, we call the die() function, which simply terminates the script’s execution.

If the album name and description has been completed, we connect to our database by calling the db_connect() function, located in our config.php script.

// Connect to database [code]
db_connect();
$sql = "INSERT INTO albums VALUES(0, '" . addslashes($_POST['album_name']) . "', '" . addslashes($_POST['album_desc']) . "', '')";
$result = @mysql_query($sql) or die("Error inserting record: " . mysql_error());[/code]

Once connected, we create and execute our SQL statement, which simply inserts the values passed from the form into our album table. We deliberately leave the value of the thumbnail location empty; this value will be populated when uploading our album images.

[code]

if ($result){
// Notify use that album was successfully created.
$msg .= "Album " . $_POST['album_name'] . " successfully created!";
$msg .= "
Click here to administrate the " . $_POST['album_name'] . " album";
$msg .= "

Click here to return to the administrative area

";
displayPage($msg);

 

"; displayPage($msg);";displayPage($msg);

If our insert query is successfully executed, we call the displayPage() function, and pass it our string argument; in this case, a notice to the user that the album has been added. We also indicate options for administrating the album (ie: adding pictures, etc.).

Now that our add_album.php script is complete, we can add functionality to edit our existing albums. We'll create a script called edit_albums.php:

include_once("../include/config.php");
// Has album been updated?
if ( $_POST['edit'] ){
if ( empty($_POST['album_name']) || empty($_POST['album_desc'])){
$msg = "Please complete all required fields!
Go Back";
displayPage( $msg, "Error Updating Album!");
die();
}
db_connect();
// Insert updated record into DB
$sql = "UPDATE albums SET album_name = '" . addslashes($_POST['album_name']) . "', album_desc = '" . addslashes($_POST['album_desc']) . "' WHERE album_id = " . addslashes($_POST['album_id']);
$result = @mysql_query( $sql ) or die("Error inserting record: " . mysql_error());
if ($result){
$msg = "Album updated successfully!
Return to Admin Menu";
displayPage($msg, "Album Updated Successfully!");
die();
}
} else if ( !$_POST['edit'] && !empty($_GET['album_id'])){
db_connect();
// Retrieve album information
$sql = "SELECT album_id, album_name, album_desc FROM albums WHERE album_id = " . addslahes($_GET['album_id']);
$result = @mysql_query( $sql ) or die("Error retrieving record: " . mysql_error());
while($row = mysql_fetch_array( $result )){
// Display edit page
$msg .= "

";
$msg .= " ";
$msg .= " ";
$msg .= " ";
$msg .= " ";
$msg .= "
Album Name:
Album Description:
";
$msg .= "Delete";
$msg .= "
";
$album_name = $row['album_name'];
}
displayPage($msg, "Editing Album " . $album_name . ":");
// Display album summaries
} elseif ( !$_GET['album_id'] ){
db_connect();
// Retrieve all album information
$sql = "SELECT album_id, album_name FROM albums";
$result = @mysql_query( $sql ) or die( "Error retrieving records: " . mysql_error() );
$i = 0;
while($row = mysql_fetch_array($result)){
if (( $i % 2 ) == 0 && ( $i != 0 )){
$msg .= (" ");
}
$msg .= (" " . ($i + 1) . ". " . $row['album_name'] . " ");
$i++;
}
displayPage( $msg, "Edit Albums", false );
}
?>

Here's a breakdown of the code:

include_once("../include/config.php");
// Has album been updated?
if ( $_POST['edit'] ){
if ( empty($_POST['album_name']) || empty($_POST['album_desc'])){
$msg = "Please complete all required fields!
Go Back";
displayPage( $msg, "Error Updating Album!");
die();
}
db_connect();
// Insert updated record into DB
$sql = "UPDATE albums SET album_name = '" . addslashes($_POST['album_name']) . "', album_desc = '" . addslashes($_POST['album_desc']) . "' WHERE album_id = " . addslashes($_POST['album_id']);
$result = @mysql_query( $sql ) or die("Error inserting record: " . mysql_error());
if ($result){
$msg = "Album updated successfully!
Return to Admin Menu";
displayPage($msg, "Album Updated Successfully!");
die();
}

"; displayPage( $msg, "Error Updating Album!"); die(); } db_connect(); // Insert updated record into DB $sql = "UPDATE albums SET album_name = '" . addslashes($_POST['album_name']) . "', album_desc = '" . addslashes($_POST['album_desc']) . "' WHERE album_id = " . addslashes($_POST['album_id']); $result = @mysql_query( $sql ) or die("Error inserting record: " . mysql_error()); if ($result){ $msg = "Album updated successfully! "; displayPage($msg, "Album Updated Successfully!"); die(); } [/code] >{mospagebreak title=1,2,3, Testing}

First we test to see if the hidden variable “edit” has been set. This variable is set ONLY after an album has been edited. It may seem like we’re working backwards, and that’s what we’re doing. We’re checking to see if the album has been edited, then we check whether a specific album ID has been chosen. If neither of the two conditions is true, we display all albums in the database with a link to edit each.

If the edit value has been set – in other words, we’ve edited our album details – we test to ensure that each field has been completed. If not, we display an error message to the user, with an option to return back to the edit screen. If the fields have been completed, we connect to the database, and update the specific album. We then display a result page notifying that the album has been successfully updated:

[code]

} else if ( !$_POST['edit'] && !empty($_GET['album_id'])){
db_connect();
// Retrieve album information
$sql = "SELECT album_id, album_name, album_desc FROM albums WHERE album_id = " . addslahes($_GET['album_id']);
$result = @mysql_query( $sql ) or die("Error retrieving record: " . mysql_error());
while($row = mysql_fetch_array( $result )){
// Display edit page
$msg .= "

";
$msg .= " ";
$msg .= " ";
$msg .= " ";
$msg .= " ";
$msg .= "
Album Name:
Album Description:
";
$msg .= "Delete";
$msg .= "
";
$album_name = $row['album_name'];
}
displayPage($msg, "Editing Album " . $album_name . ":");

Here we test to see if edit has NOT been set and whether an album ID HAS been passed (set) through the URL query string (ie: edit_albums.php?album_id=1). If the condition is met (true), we display our edit album form, which is simply a table containing pre-filled fields. The value of each field is retrieved from our database, via our SQL SELECT query:

This is where our hidden fields reside. The first field is our edit variable that has been tested above. The second holds the ID value of the current album we are editing. These hidden fields are passed to the processing page as POST variables once the form is submitted.

The last link we provide is a delete link, which allows us to delete the current album we are editing. Here, we call the del_album.php script, and pass to it our album's ID.

// Display album summaries
} elseif ( !$_GET['album_id'] ){
db_connect();
// Retrieve all album information
$sql = "SELECT album_id, album_name FROM albums";
$result = @mysql_query( $sql ) or die( "Error retrieving records: " . mysql_error() );
$i = 0;
while($row = mysql_fetch_array($result)){
if (( $i % 2 ) == 0 && ( $i != 0 )){
$msg .= (" ");
}
$msg .= (" " . ($i + 1) . ". " . $row['album_name'] . " ");
$i++;
}
displayPage( $msg, "Edit Albums", false );
}

This last test checks to see whether or not an album ID has been set. If not, we display each album name, in the database, in an HTML table and give the option of editing the album via a hyperlink:

Now that we've completed the option of adding and editing our albums, its time to go ahead to add some pictures!

Our del_albums.php script is quite simple:

include_once("../include/config.php");
// No album id has been selected
if( !$_GET['album_id'] ){
// Display error message to user
$msg .= "Album not selected. Please choose an album you wish to delete!";
$msg .= "
Edit albums";
displayPage($msg, "Error Selecting Album");
} else {
db_connect();
// Delete specified album
$sql = "DELETE FROM albums WHERE album_id = " . addslashes($_GET['album_id']);
$result = @mysql_query($sql) or die("Error deleting record: " . mysql_error());
// Display success to user
$msg .= "Album has been successfully deleted!
Return to Admin Menu";
displayPage($msg, "Album Deleted!");
}
?>

"; displayPage($msg, "Error Selecting Album"); } else { db_connect(); // Delete specified album $sql = "DELETE FROM albums WHERE album_id = " . addslashes($_GET['album_id']); $result = @mysql_query($sql) or die("Error deleting record: " . mysql_error()); // Display success to user $msg .= "Album has been successfully deleted! "; displayPage($msg, "Album Deleted!"); } ?> "; displayPage($msg, "Error Selecting Album"); } else { db_connect(); // Delete specified album $sql = "DELETE FROM albums WHERE album_id = " . addslashes($_GET['album_id']); $result = @mysql_query($sql) or die("Error deleting record: " . mysql_error()); // Display success to user $msg .= "Album has been successfully deleted! "; displayPage($msg, "Album Deleted!"); } ?>

[/code]

The del_albums.php script is simply checks to see that an album ID was passed to it. If not, an error message is displayed to the user. If an album ID has been passed, we create an SQL DELETE statement that removes the specified album from the database.

Google+ Comments

Google+ Comments