Creating A Simple , ASP Driven E-Card System

After searching for a simple e-card system on the web; I took a minute to actually stop and think about it as a concept instead of code. I don’t really know asp; I just use it. I’ve created mail to forms using asp; I have a $6.50 a month web host that supports asp, and i had the need for some new content on my site. I thought – hey, I can figure it out, it’s gotta be pretty simple.

Ultimately – you’ll need just 3 files and a directory with images (your e-cards).
Create a brand new directory on your site called “cards”, with a sub-directory named “images”, or whatever suits your fancy. Name your first file “index.htm”. In this file include image source tags to display all of your ecards. To keep things easy, I suggest naming your cards in consecutive number order. 1.jpg, 2.jpg. 3.jpg , so on and so forth. Make each of your cards a link to your not yet created, second file – card.asp. and add a question mark (?) the word “id”, the equals sign (=) and the number of your image. Your html will look like this:

<a href=”card.asp?id=1″><img src=”images/1.jpg”></a>
This link will send the filename of your ecard in the URL to card.asp

Now you’re ready to create your first ASP file. Name it “card.asp”. Most importantly, This file will collect the file name of the card the user selected.
You’ll get the file name from the URL and place it in a temporary variable called “stID” (the “st” stands for the word “string”, and “ID” is the cards file name. Start your file off with some basic ASP, it will look like this:

<%
stID = Request.QueryString(“ID”)
%>

The rest of the file consists of a form that displays your card, and provides the user with 3 fields, the first being their email address, the second being the card recipients email address, and the last being a comments field where your users can enter in their personal, witty captions. name the form “cards” with an action of “send.asp”, and a method of “post”. Your html will look like this: <form name=”cards” action=”send.asp” method=”post”>

Follow your form tag with an image tag displaying the image they selected. The previously defined variable “stID” comes into play. your image source tag should look like this: <img src=”images/<%= stID %>.jpg>” This will display the image they selected from index.htm. Next, create 2 text fields & 1 textarea, name them fremail (from email), toemail (to email), and message accordingly. Your html will look like this:

<input type=”text” name=”fremail”>
<input type=”text” name=”toemail”>
<textarea name=”message”></textarea>

You’ll need to pass along the image name to your final file, to do this create an input tag with a name of “cardID”, the type equal to “hidden” and value equal to “stID”… your code should look like this:

<input type=”hidden” name=”cardID” value=”<%= stID %>”>

close your form tag and you’re SO close.

The file that actually sends your eCard will be called “send.asp” My web server uses an email component called JMail. Consult your web hosts dopcumentation to send emails from your site. First off, you’ll need to write some asp that grabs all the info from the form on card.asp. Your code will look like this:

<%
fremail = Request.Form(“fremail”)
toemail = Request.Form(“toemail”)
toemail = Request.Form(“toemail”)
formatMessage = Trim(Request.Form(“message”)
cardID = Request.Form(“cardID”)
%>

that third line formats the users message and drops it into a newly created variable titled “formatMessage”… Stripping it of quotations and apostrophes, shit that can fuck up your html output.

This tutorial is getting too long and the remainder should be self explanatory – so heres the rest of the code:

SET JMail = Server.CreateObject(“JMail.smtpmail”)
JMail.ServerAddress = “mail.yourhost.com:25”
JMail.Sender = fremail
JMail.Subject = “A card from ghettocooler.com”
JMail.AddRecipient toemail
JMail.AddRecipientBCC “bill@ghettocooler.com”
‘My host requires that a mailt-to form contain 1 email address w/your host name, so I blind carbon copy myself on everything…
JMail.ContentType = “text/html”

htmlBody = “<font face=””verdana”” style=””font-size:10px””>”
htmlBody = htmlBody & “<img src=””http://www.yourhost.com/images/”
htmlBody = htmlBody & cardid
htmlBody = htmlBody & “.jpg””>”
htmlBody = htmlBody & “<br><br>”
htmlBody = htmlBody & stunFormattedmessage
htmlBody = htmlBody & “<br><br>”
htmlBody = htmlBody & “:::::::<br>”
htmlBody = htmlBody & “Send your own card @ <a href=””http://www.yourhost.com””>ghettocooler.com</a>”
htmlBody = htmlBody & “</font>”

JMail.Body = htmlBody
JMail.Execute
SET JMail = Nothing
%>
<BODY>

Your card has been sent.

</BODY>
</HTML>

It may be nice to add some kind of error detection on this too; The way card.asp is currently setup – Your users will receive the “your card has been sent” message, regardless if it worked or not. Remember – I don’t KNOW ASP, I just use it.

All of the code is available in one tidy downloadable folder called cardsOpen.sit

If you find any mistakes, have ideas, or would like to contribute please contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *