Over the past nine chapters we have discussed the details involved in creating your own ultimate online adult toy store. After setting up your credit card transactions and designing the site, the dynamic product database looms as the last major undertaking.Over the past nine chapters we have discussed the details involved in creating your own ultimate online adult toy store. After setting up your credit card transactions and designing the site, the dynamic product database looms as the last major undertaking.
[Part 1] [Part 2] [Part 3] [Part 4] [Part 5] [Part 6] [Part 7] [Part 8] [Part 9]
THE DYNAMIC RESULTS PAGE
As mentioned in the previous two articles, there are three main components to a database-driven site – the database file, the search program, and the dynamic results page. We have already discussed the database and the search program. Now it’s time to investigate how a search program places data dynamically onto a page. This chapter may be a little more technical than the previous chapters, but this chapter is also what separates the amateur toy stores from the professional ones.
A dynamically generated webpage should be indistinguishable from a static HTML page, so your first course of action is creating your results page within HTML. If you use a program like Go Live or Dreamweaver, you have most likely created a Template or Cascading Style Sheet in order to ensure that all your pages share the same basic characteristics and navigation. Utilize your Template or CSS when creating the mold for your dynamic page.
Designing a results page is similar to designing a normal page. It takes some foresight and consideration about the purpose of the page – in this case, exhibiting products that come up in a search. What information will the user care about? An image of the product is probably the most important feature, along with the name of the product, and the cost. You may also want to indicate the product ID number, along with a description of the item. If there are options involved (product colors and sizes, etc.), that information will also need to be present, along with a way for the user to select a specific preference. Here is where you typically see drop-down boxes. Finally, a button needs to allow the user to actually BUY the product (that’s the whole idea, right?).
It’s a lot of information and it needs to look crisp. Design a table that accentuates the image, title, and price. Within that table, add the extraneous bits of data like the description, ID, and options. Then be sure to add the graphic for the button. When designing the mold for the dynamic page, I recommend using an actual sample from your product database. Place the image in the table so you can situate it correctly. Add the product description to ensure that the font and size are accurate. You want to verify that all the HTML code (including the table and cell alignment) is exactly the way you want it to appear within your program, because isolating a specific cell within multiple-imbedded tables in a CGI program is a nightmare!
TRANSLATING HTML TO CGI
Okay, so now you have a complex layer of tables exhibiting one of your products. Your picture is exactly where you want it positioned, along with all the other pieces of information and the BUY button. Now what you want to do is take out each piece of data and exchange it with a capitalized word that represents that data. So, for example, you might delete the product image and in its exact place, type the words PRODUCT IMAGE. Take out the description of the product and type DESCRIPTION instead. Soon, you’ll have a table filled with code words that indicate where you will be putting the database content once you imbed your HTML file into your CGI program. Not too tough, right? Be sure to only replace information that depends upon your database. For example, your BUY button will most likely look the same for every product. If so, leave that image in your table as is.
If your webpages are anything like the ones at NileXXX.com, your product table will be surrounded by loads of additional content ranging from images to navigation menus, to advertising banners. You want to ensure that the product table is among that additional page content, and not all by itself on a new HTML page. Why? Because that is how you ensure that your dynamic results pages are indistinguishable from your static pages. When all is said and done, your CGI program will be creating identical versions of your HTML pages as it pulls content directly from your database.
Take the HTML page you’ve just created and cut and paste the entire contents into a text editor, like NOTEPAD or WORD PAD. Be sure to capture all the tags, beginning with <HTML> and ending with </HTML>. The next step is relatively easy if you’re careful. You need to “escape” certain characters. No, you’re not breaking them out of jail. You’re marking them so that your CGI program doesn’t accidentally mistake them for CGI.
The characters that need to be “escaped” vary upon their location in your HTML document, but there is no downside to escaping unnecessary characters in HTML (since HTML ignores the escape) and there is a big downside to missing one in CGI (your program will crash), so it’s better to be safe than sorry since resolving CGI crashes is a royal pain. Personally, I just escape every character on the number keys at the top of the keyboard (!@#$%^&*). (Not the period). You will also want to escape quotes (“) and question marks (?). How do you “escape” a character? You put a backslash in front of it.
From within NOTEPAD or WORD PAD or whatever text editor you have, use the FIND & REPLACE command to seek out every exclamation point and replace it with backslash-exclamation point (!). Then, do the same for the at-sign (@), pound-sign (#), dollar-sign ($), percentage-sign (\%), and so forth. Be sure to REPLACE ALL. Once you are finished, you have a CGI-safe HTML page. You may want to save it.
Next, locate the capitalized code words that you placed in your document. The FIND & REPLACE command is helpful for this too, as long as you didn’t use a common code word. Replace PRODUCT IMAGE with the CGI variable you used in your database that represents the product images. Replace DESCRIPTION with the variable representing descriptions in your database. Perform this task for each element of your dynamic table. You will recall from the previous chapter that string variables begin with a dollar sign (see why we needed to escape the dollar signs in our HTML version first?). So, for example, you may be replacing PRODUCT IMAGE with $image. Since you are doing this step AFTER the “escape characters” step, the CGI version of the dollar sign ($image) is NOT escaped.
Below is a small example of a CGI-safe table including variables to pull data from a database. Note that all the quotation marks are escaped, as is the dollar sign representing the price of the product, but the variables are not (that’s why there are two dollar signs right next to each other).
<table width=\”100\%\” border=\”0\” cellspacing=\”3\” cellpadding=\”3\”> <tr> <td width=\”25\%\”>
<div align=\”center\”><font face=\”Arial, Helvetica, sans-serif\”>$productTitle</font> </div> </td>
<td> <div align=\”right\”><font face=\”Arial, Helvetica, sans-serif\”>$$price</font></div></td> </tr>
<tr> <td><div align=\”center\”><img src=\”$image\”></div> </td> <td> <div align=\”right\”>
<a href=\”/shoppingCart.cgi?Price=$price&Title=$productTitle\”>
<img src=\”/images/buyButton.jpg\” border=\”0\”></a></div> </td></tr> </table>
Hopefully this gives you a good starting point. Obviously, your final table will be more complex, but now that you’ve read this article, translating your initial HTML page to CGI in order to make your dynamic results pages exactly match your static pages will be a piece of cake.
Or you can just open a free adult toy store franchise that handles all the details for you and gives you 50% of the profit. Go to http://nilexxx.com/store.htm if you’re interested.
Article written by Richard at NileXXX.com, home to the world’s sexiest selection of adult toys, DVDs, and clothing.
