In this tutorial I will show you how to create a simple virtual postcard sender script with your own images.
Create a postcard sender script
To create your own virtual postcard sender script is not so complicated task as you may think at first time. We will create a postcard sender script without using any database. All we need is some nice images and a bit coding :)
Step 1.
First let's design the application, how it will work, what is the concept.
If you visit any online postcard sender page then you will see that you need to select an image, then write your message, fill out some important fields like email and at the end you send it. On the other side the recipient gets an email with an URL. If he or she visits this URL, then a page will be displayed with the selected image and your message.
What we need:
Display images in small format to allow selection for the visitor.
Create a form where the message and email can be set.
Store the data into a file with a unique name.
Send an email to the recipient with an URL.
Create a page which process the URL and loads the relevant message file and image.
Step 2.
Before any coding selects some nice images and resize them to a usable format. You need normal size images 640x480 or 800x600 and smaller thumbnails as well eg.:96x128. Create 2 directories images and thumbs.
Copy the relevant images to the correct location and use the same filename for the normal and for thumbnail. Something like this:
images/pic1.jpg
thumps/pic1.jpg
Now we can create a PHP function to display the thumbnails for the visitor. As the visitor will select from these images we need to display them as form elements, using one radiobox for each image.
To do this we will open the thumbnail directory and read it with readdir function. As readdir returns all elements from the directory, but we need only the image files we make a small condition to filter out directories. If everything is ok then we create a new table cell with an image and a radiobox. We set the value for each radiobox the name of the image so later we now which one was selected.
The code is the following:
<?php function displayPhotos(){ global $columns;
$act = 0; // Open the actual directory if ($handle = opendir("thumbs")) { // Read all file from the actual directory while ($file = readdir($handle)) { if (!is_dir($file)) { if ($act == 0) echo "<tr>"; echo "<td align='center'> <img src='thumbs/$file' alt='postcard' /><br/> <input type='radio' name='selimg' value='$file' /> </td>"; $act++; if ($act == $columns){ $act = 0; echo "</tr>"; } } } echo "</tr>"; } } ?>
However to make it complete you need to surround it with a HTML form. On this form we will also display the message field and email address. So the complete HTML part is the following:
