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:
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:
Step 3.
The next task is to process the form and store the message in a file. Besides this we need to send an email to the recipient with the URL.
First the form processing task. In this step we need to check the inputs and create a unique filename using actual date and time information.
In this file we will store the selected image name, the email address and the message. If the file content is ready then we write it to a folder let's say messages. We can do this with the following code:
Step 4.
As last step in this thread we need to send an email to the recipient.
To do this we compose a short message template and put the unique URL in it. Later on we will process the URL GET data to know what to do. How to send an email is not part of this tutorial so I just show you the simple code to send the message:
If everything works fine then we will display a short message to the visitor that the postcard was send successfully and display it to check.
Step 5.
The final task to do is processing URLs to find out what task the script should do. As you saw we put a unique URL inside the mail where we used the show parameter inside the URL. If this parameter is set then the script knows that the postcard needs to be displayed. Without this parameter the normal postcard sending form will be displayed.
In case of showing postcard we get the requested information from the URL. It is stored in the $_GET array and find the relevant message file in the messages directory. Next we will read the file and process its content. Finally we display a quite simple HTML page with the image and the message.
The code looks like this:
here are complete code
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:
Code:
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>"; } } ?>
Code:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <table align="center"> <?php displayPhotos(); ?> </table> <h2>Fill the form</h2> <table width="100%"> <tr> <td>Send to (email address):</td> <td><input type="text" name="email" size="30"/></td> </tr> <tr> <td>Message:</td> <td><textarea name="message" rows="10" cols="40"></textarea></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Send card!" name="submit"/></td> </tr> </table> </form>
The next task is to process the form and store the message in a file. Besides this we need to send an email to the recipient with the URL.
First the form processing task. In this step we need to check the inputs and create a unique filename using actual date and time information.
In this file we will store the selected image name, the email address and the message. If the file content is ready then we write it to a folder let's say messages. We can do this with the following code:
Code:
<?php $filename = date('YmdGis'); $f = fopen('messages/'.$filename.".txt","w+"); fwrite($f,$pic."\n"); fwrite($f,$_POST['email']."\n"); fwrite($f,htmlspecialchars($_POST['message'])."\n"); fclose($f); ?>
As last step in this thread we need to send an email to the recipient.
To do this we compose a short message template and put the unique URL in it. Later on we will process the URL GET data to know what to do. How to send an email is not part of this tutorial so I just show you the simple code to send the message:
Code:
<?php $postcardURL = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME']; $from = "From: $senderName <$senderEmail>\r\n"; $replay = "Reply-To: $senderEmail\r\n"; $params = "MIME-Version: 1.0\r\n"; $params .= "Content-type: text/plain; charset=iso-8859-1\r\n"; $mailtext = "You have just received a virtual postcard!\r\n\r\n" . "You can pick up your postcard at the following web address:\r\n" . "$postcardURL"."?show=$filename\r\n\r\n" . "We hope you enjoy your postcard, and if you do, " . "please take a moment to send a few yourself!\r\n\r\n" . "Regards,\r\n" . "Postcard Tutorial\r\n" . $postcardURL; // Send email @mail($_POST['email'],"You've received a postcard",$mailtext,$from.$replay.$params); ?>
Step 5.
The final task to do is processing URLs to find out what task the script should do. As you saw we put a unique URL inside the mail where we used the show parameter inside the URL. If this parameter is set then the script knows that the postcard needs to be displayed. Without this parameter the normal postcard sending form will be displayed.
In case of showing postcard we get the requested information from the URL. It is stored in the $_GET array and find the relevant message file in the messages directory. Next we will read the file and process its content. Finally we display a quite simple HTML page with the image and the message.
The code looks like this:
Code:
<?php $file = isset($_GET['show']) ? $_GET['show'] : '' ; $content = file('messages/'.$file.".txt"); $pic = $content['0']; unset ($content['0']); unset ($content['1']); $main = ""; foreach ($content as $value) { $main .= $value; } ?> <center>Your postcard!<br/><br/> <img src='images/<?php echo $pic; ?>' alt="postcard" /> <br/><br/><br/> <?php echo nl2br(htmlspecialchars($main)); ?> </center>
Code:
<?php // CHANGE PARAMETERS HERE BEGIN $columns = 5; $senderName = 'Sender Name Here'; // Eg.: John's Postcards $senderEmail = 'Sender EMAIL here'; // Eg.: john@postcard.com // Change only if you have problems with urls $postcardURL = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME']; // CHANGE PARAMETERS HERE END // This function displays the available images 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>"; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <body> <?php if ( (!isset($_POST['submit'])) && (!isset($_GET['show'])) ) { ?> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <table align="center"> <?php displayPhotos(); ?> </table> <h2>Fill the form</h2> <table width="100%"> <tr> <td>Send to (email address):</td> <td><input type="text" name="email" size="30"/></td> </tr> <tr> <td>Message:</td> <td><textarea name="message" rows="10" cols="40"></textarea></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Send card!" name="submit"/></td> </tr> </table> </form> <?php } else if ( (isset($_POST['submit'])) && (!isset($_GET['show'])) ) { $pic = isset ($_POST['selimg']) ? $_POST['selimg'] : ''; $filename = date('YmdGis'); $f = fopen('messages/'.$filename.".txt","w+"); fwrite($f,$pic."\n"); fwrite($f,$_POST['email']."\n"); fwrite($f,htmlspecialchars($_POST['message'])."\n"); fclose($f); // Compose the mail $postcardURL = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME']; $from = "From: $senderName <$senderEmail>\r\n"; $replay = "Reply-To: $senderEmail\r\n"; $params = "MIME-Version: 1.0\r\n"; $params .= "Content-type: text/plain; charset=iso-8859-1\r\n"; $mailtext = "You have just received a virtual postcard!\r\n\r\n" . "You can pick up your postcard at the following web address:\r\n" . "$postcardURL"."?show=$filename\r\n\r\n" . "We hope you enjoy your postcard, and if you do, " . "please take a moment to send a few yourself!\r\n\r\n" . "Regards,\r\n" . "Postcard Tutorial\r\n" . $postcardURL; // Send email @mail($_POST['email'],"You've received a postcard",$mailtext,$from.$replay.$params); ?> <center> Your postcard was sended succesfuly!<br/><br/> <img src='images/<?php echo $pic; ?>' alt="postcard" /><br/><br/><br/> <?php echo nl2br(htmlspecialchars($_POST['message'])); ?></center> <?php } else if ( (!isset($_POST['submit'])) && (isset($_GET['show'])) ) { $file = isset($_GET['show']) ? $_GET['show'] : '' ; $content = file('messages/'.$file.".txt"); $pic = $content['0']; unset ($content['0']); unset ($content['1']); $main = ""; foreach ($content as $value) { $main .= $value; } ?> <center>Your postcard!<br/><br/> <img src='images/<?php echo $pic; ?>' alt="postcard" /> <br/><br/><br/> <?php echo nl2br(htmlspecialchars($main)); ?> </center> <?php } ?> </body>