Uploading Pictures in a CMS using
PHP, Smarty, Pear and MySql
CMS stand for Content Management System and it is normally used for storing and manipulating data on a server. For E-commerce and real estate websites, CMSs usually need to upload pictures of the products or items that are displayed to the potential customer. Here, I am going to show a script that does exactly that. Pictures are generally stored in files rather than databases, because of their sizes, and their descriptions and names are stored in a database.
Let's start with a picture of a CMS screen that is used to upload pictures to a server. The “Choose File” button allows you to upload to the server the pictures you may have on your computer. The text “No file chosen” will be replaced by the name of the file once you hit the “open” button on your computer. The button “send” will complete the upload of the file, once clicked.
Fig. 1 CMS screen for uploading pictures.
So, let's look at the scripts in the different files we need to have under a 3-tier architecture and I'll describe how they are interrelated.
We link to the properties'photos admin_photos.tpl screen from the properties form screen which is displayed by properties_admin.tpl and the corresponding plugin – properties_admin.php - below.
properties_admin.php
<?php
// Reference config files and business tier
require_once 'include/app_top.php';
require_once SITE_ROOT . '/business_objects/bo_properties.php';
.
.
.
//Photos
if ($admin_page == "Photos")
$pageContent = "admin_photos.tpl";
$page->assign("pageContent", $pageContent);
$page->display('properties_admin.tpl');
// Load app_bottom which closes the database connection
require_once 'include/app_bottom.php';
?>
The admin_photos.tpl below, displays the screen on Fig.1 above, if there are photos stored for that property. The first thing we do is to assign a name to plugin load-admin_photos.php, here admin_photos, so we can access all the variables and functions from the object $admin_photos created in load_admin_photos.php below.
Let's go over the admin_photos.tpl quickly:
If the are no photos for the property, mPhotosCount = 0, we display a message: “No picture for this property”.
Otherwise, we display the pictures of the property using the Smarty {section} instruction.
All the accesses to files and the database is performed by the plugin load_admin_photos.php, and the data is displayed on admin_photos.tpl,so business action and data access are completely separated from templates or the presentation layer.
admin_photos.tpl
{load_admin_photos assign="admin_photos"}
<span class="AdminPageText"> Modifying pictures for property: {$admin_photos->mPropCode}
(<a class="AdminLink" href="properties_admin.php?Page=Properties">return to property form...</a>)</span>
<span class="AdminErrorText">{$admin_photos->mErrorMessage}</span>
<br/><br/>
{if $admin_photos->mPhotosCount eq 0}
<b>No pictures for this property!</b>
{else}
{if isset($admin_photos->mPropId)}
<form action="properties_admin.php?Page=Photos&PropId={$admin_photos->mPropId}&
PropCode={$admin_photos->mPropCode}" method="post">
<input type="hidden" name="PropID" value="{$admin_photos->mPropId}"/>
{/if}
<table align="center" cellpadding="3" cellspacing="1" border="0" width="500">
<tr class="TableHeader">
<td align="center" colspan="5">Property Pictures</td>
</tr>
<tr class="TableHeader">
<td align = "center">Picture </td>
<td align = "center">Name</td>
<td align = "center" >Description</td>
<td colspan="2"></td>
</tr>
{section name=cPhotos loop=$admin_photos->mPhotos}
{if $admin_photos->mEditItem == $admin_photos->mPhotos[cPhotos].property_photo_codigo}
<tr class="TableRow">
<td align = "center">
<img border="0" src="./properties/{$admin_photos->mPhotos[cPhotos].property_photo_file_name}"
width="150" height="130">
</td>
<td>
<input type="text" name="photo_name" size="20"
value="{$admin_photos->mPhotos[cPhotos].property_photo_name}" />
</td>
<td>
<input type="text" name="photo_description" size="30"
value ="{$admin_photos->mPhotos[cPhotos].property_photo_description}"/>
</td>
<td width="30">
<input type="submit" name="submit_update_photo_{$admin_photos->mPhotos[cPhotos]. property_photo_code}" value="Modify"/><br />
<input type="submit" name="submit_cancel_photo_{$admin_photos->mPhotos[cPhotos]. property_photo_code}" value="Cancel" />
</td>
<td width="50"><input type="submit"
name="submit_delete_photo_{$admin_photos->mPhotos[cPhotos]. property_photo_code}" value="Delete"/>
</td>
</tr>
{else}
<tr class="TableRow">
<td align = "center">
<img border="0" src="./casas/{$admin_photos->mPhotos[cPhotos].property_photo_file_name}"
width="150" height="130">
</td>
<td>{$admin_photos->mPhotos[cPhotos].property_photo_name}</td>
<td>{$admin_photos->mPhotos[cPhotos].property_photo_description} </td>
<td width="50"><input type="submit"
name="submit_edit_photo_{$admin_photos->mPhotos[cPhotos]. property_photo_code}"
value="Modify"/></td>
<td width="50"><input type="submit"
name="submit_delete_photo_{$admin_photos->mPhotos[cPhotos]. property_photo_code}"
value="Delete"/></td>
</tr>
{/if}
{/section}
</table>
</form>
{/if}
{if isset($admin_photos->mPropId)}
<form name = "addForm" enctype="multipart/form-data" action="properties_admin.php?Page=Photos
&PropId={$admin_photos->mPropId}
&PropCode={$admin_photos->mPropCode}" method="post">
{/if}
<table align="center" cellpadding="0" cellspacing="0" border="0" width="450">
<tr>
<td align="center"><span class="AdminPageText">Add a new Picture:</span>
<span class="AdminErrorText">{$admin_photos->mErrorMessage}</span>
</td>
</tr>
<tr>
<td></td>
<td height="20">
</td>
</tr>
<tr>
<td align = "center">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input type="file" name="UploadImage" value="Send"/>
<input type="submit" name="Upload" value="Send"/><br/>
</td>
</tr>
</table>
</form>
load_admin_photos.php
<?php
/* smarty plugin function that gets called when the
load_admin_photos function plugin is loaded from the admin_photos template */
function smarty_function_load_admin_photos($params, $smarty)
{
$admin_photos = new AdminPhotos();
$admin_photos->init();
// assign template variable
$smarty->assign($params['assign'], $admin_photos);
}
// class that deals with departments admin
class AdminPhotos
{
// public variables available in smarty template
public $mPhotosCount;
public $mPhotos;
public $mEditItem = - 1;
public $mErrorMessage = "";
public $mPropId;
public $mPropCode;
public $mActionedPhotosId;
/* private members */
private $mListOCP;
private $mAction="";
// class constructor
function __construct()
{
//create the business tier object
$this->mListPhotos = new BoProperties();
if (isset($_GET['PropId']))
$this->mPropId = (int)$_GET['PropId'];
else
trigger_error("PropId not defined");
if (isset($_GET['PropCode']))
$this->mPropCode = $_GET['PropCode'];
else
trigger_error("PropCode not defined");
foreach ($_POST as $key => $value)
//if a submit button was clicked..
if (substr($key,0,6) == "submit")
{
/* get the position of the last '_' underscore from submit button name
e.g strtpos("submit_edit_dep_1","_") is 16
*/
$last_underscore = strrpos($key,"_");
//get the scope of submit button (e.g 'edit_dep' from 'submit_edit_dep_1')
$this->mAction = substr($key,strlen("submit_"),$last_underscore - strlen("submit_"));
/* get the property id targeted by submit button
(the number at the end of submit button name )
e.g '1' from 'submit_edit_dep_1'
*/
$this->mActionedPhotosId = (int)substr($key,$last_underscore+1);
break;
}
}//fin construct
function init()
{
// if editing an existing photo ...
if ($this->mAction == 'edit_photo')
$this->mEditItem = $this->mActionedPhotosId;
// if updating a photo ...
if ($this->mAction == 'update_photo')
{
$photo_name = $_POST['photo_name'];
$photo_desc = $_POST['photo_description'];
if ($photo_name == null || $photo_desc == null)
{
$this->mErrorMessage = "No blank fields";
$this->mEditItem = $this->mActionedPhotosId;
}
if ($this->mErrorMessage == null)
$this->mListPhotos->UpdatePhoto( $this->mActionedPhotosId,
$photo_name,$photo_desc);
}
//if we upload a picture to the server...
if (isset($_POST['Upload']))
{
//we verify access type to directory “houses”
if (!is_writeable(SITE_ROOT . '/houses/'))
{
echo "We can't write to directory “houses”;
exit;
}
//if directory is writeable, error code is 0, picture is uploaded.
if ($_FILES['SubirImagen']['error']== 0)
{
//picture in directory houses
move_uploaded_file($_FILES['UploadImage'] ['tmp_name'],
SITE_ROOT . '/houses/' . $_FILES['UploadImage']['name']);
//poner al dia information en la bd
$this->mListPhotos->AddImage("Photo","Property",
$_FILES['UploadImage']['name'],
$this->mPropId);
}
else
if ($_FILES['UploadImage']['error'] == 2)
print_r("Error:File > 30K!");
}
<//deleting a photo
if ($this->mAction == "delete_photo")
{
$this->mPhotos = $this->mListPhotos->GetPhotos($this->mPropId);
$status = $this->mListPhotos->DeletePhoto( $this->mActionedPhotosId);
//delete the photo from directory
for ($i=0; $i < count($this->mPhotos); $i++)
{
if ($this->mPhotos[$i]['property_photo_code'] == $this->mActionedPhotosId)
unlink(SITE_ROOT . '/houses/' . $this->mPhotos[$i]['property_photo_file_name']);
}
}
//if we access this page through property,
//we have the property key to access
//the other features of the property.
if (isset ($this->mPropId))
{
$this->mPhotos = $this->mListaPhotos->GetPhotos($this->mPropId);
$this->mPhotosCount = count($this->mPhotos);
}
}//end init()
}
?>
