Www.talbotsystems.com



Readme

I wrote this document with the assumption that you don’t know anything about PHP, javascript, or programming concepts in general. I went overboard writing this document, as you can see it’s like 40 pages long. I wrote it pretty fast, so I might gloss over some things, or you might already know some of this stuff. If you don’t understand something ask me about it (stevetalbot100@). Also, you can just skip stuff you already know about and continue on. Basically, I figured that in order for you to use these scripts, you should get up to speed on programming PHP and javascript. This document should give you a boost in that direction.

If you don’t care or you don’t have the time, you can skip reading the last 3 sections at the end titled “PHP”, “Javascript” and “Mercury/32”. I would suggest reading the sections titled “Setup”, “General Comments” and “HTML” though, if you intend on using these scripts, just to get an idea of what you can change without breaking the scripts. You could probably get away with just reading the section titled “Setup” if you just want to try these scripts out.

Setup

Files:

“peter.php”: contains example HTML form, also function calls to PHP, javascript files.

“email.php”: contains all PHP functions / code for sending the emails.

“referAFriendValidation.js”: contains all javascript code to “validate” the form fields.

“debug.js”: contains javascript code I wrote for “debugging” a page. The javascript

function “alert()” ends up working better than this script most of the time,

but you might give it a try.

The file “email.php” is using the PHP function “mail()” to send the referral emails. This function usually requires that you have an Email Server running on your machine if you call this function on your machine. However, since you probably don’t have that, but your ISP definitely does, it should work when you load it on your ISP (but not your own machine/laptop/desktop). So if you run these scripts on your machine and you see an error (“Emails not sent. An error occurred”), that’s probably why.

“debug.js” is not needed to run this project. But for future projects, you might want to check it out. Just place calls to the function “captureDebugValue( name, value )”, passing it “name” and “value” pairs, making sure that the function “debug()” is called at the end of your code, and this script will open a pop-up window showing a table of the name/value pairs. If it doesn’t work, try clicking on the bottom of the IE window where it says “loaded but with errors” or something (a yellow error sign) and check the line number of the error. Do a “Page->View Source”, CTRL-G, enter the line number, to see the offending line of code.

I am running an application on my machine called “Xampp” to test out these scripts on my machine before uploading them to my ISP. This acronym stands for “Windows/Linux, Apache, MySQL, PHP/Perl”. What does that mean? Well, Xampp is a package which allows you to get “Apache Web Server”, “MySQL database”, and “PHP/Perl environments” running on your machine without having to install each of these applications separately. Basically, it’s a big hassle to have to set the configuration files to get all of these applications running together on the same machine at the same time, so a German company made the application Xampp to install and configure them for you.

You are probably using the services of an ISP who already have all of these applications setup on their server. That’s good, that’s what my ISP has, too. When I uploaded these files to my ISP, the “mail()” function just automatically worked on its own without having to configure the files it uses. That’s one less thing you have to worry about.

I sent these script files to you in a ZIP file. Unload these files first before you upload them to you ISP (i.e.: don’t just upload the ZIP file to the ISP). Upload the project script files to your ISP, test out the page, and let me know what you think.

If you want to learn more about Xampp, its located here:







FYI: the main configuration file for Apache Web Server is “httpd.conf”. Its located here:

C:\Program Files\xampp\apache\conf\httpd.conf

Xampp actually also comes with an Email Server called “Mercury/32”, but I couldn’t get it to work. If you get into doing that, you might want to know some things I found out about this along the way. Scroll down to the end of this document to see the data I compiled about Mercury/32. Otherwise, just continue on to the next section.

General Comments

The “Refer-A-Friend” page is a “.php” page. I named it “peter.php”. There is PHP code embedded within this page, as well as a set of simple HTML tables and controls.

In the PHP section of “peter.php”, you will see some variables that have the important strings you will probably want to change. In the comments above these variables, I wrote the word “[CHANGE]”. Make your changes, but test it out to make sure that your changes don’t break the code.

I pulled the HTML and the basic PHP and javascript off of the internet here:



I included the ZIP file you download from this site in the ZIP file I sent you. Its called “free_viral_tool.zip”

I didn’t change the HTML much, but I significantly added to the PHP and the javascript.

I’m sure that you will want to change the HTML a lot, but in order for the PHP and javascript to work, you should keep the basic layout of the “input” tags the same.

In other words, you need to have at least 1 “friend” row, exactly 1 “referrer” row, the “name” column and the “email address” column.

I didn’t try changing it, but you should be able to move the “referrer” row to the bottom if that looks better. Also, you should be able to add as many columns as you want, even adding them in between the existing columns. However, if you add columns, you will probably have to learn how the code works first.

I changed the form from having a “first name” and a “last name” to just having a “name” field to keep it simple. You should be able to change that if you want to, but like I said it would mean learning how the code works.

You might also be interested in taking a look here for an example of a form with a different style layout:



In addition to PHP, the page uses javascript to “validate” each of the fields to make sure that they aren’t empty and that email addresses are correct. The “name” and “email address” columns MUST be filled in for the “referrer”, and at least 1 row of “name” and “email address” MUST be filled in for a “friend” row in order for the page to send an email.

If there is an error, the page outputs a message saying the email didn’t go through. If there is no error and the email is successful, the page outputs this as well. You will need to take a look at the PHP code to figure out how to change this output. HINT: look at the end of the method “sendReferralEmails()” in the file “email.php” for the source of this output.

The javascript code is in a separate file called “referAFriendValidation.js”. I made another javascript file called “debug.js” that I used for debugging purposes, but it isn’t required to run the code. Like I said before, you can check it out if you want to, but you can leave it out of the final deployment, since its not needed to run the page. There is also a separate PHP file that contains most of the PHP functionality called “email.php”. Make sure that if you are using these files, that they reside in the same directory as the main “.php” Refer-A-Friend page. I called this page “peter.php”. You can change the name of this file to “referAFriend.php” or to whatever else works.

Some comments on how the code itself works.

The main PHP script that gets run each time that the page is loaded and re-loaded should appear in the very top of your “.php” page. The top of the page should have all of your “require_once()” function calls, so that the remaining code has access to the code pointed to by this function (this will make more sense once you read through this document). All “$_POST”, “$_SESSION”, and similar array assignments and their uses should be performed in this top section. In fact, the only PHP code that should show up in the HTML section should be short “inline” statements that are used to get values from “input” tags”, or (the code in “peter.php” doesn’t really do this) to conditionally select whether or not one set of HTML tags or another set of HTML tags should be displayed.

PHP scripts are always found within the tag “”. There should never be any whitespace following the “?>” portion of the tag. This is a well-known bug in PHP. Just make sure to hit return right after you type “?>”, and it should be OK.

You can include javascript code in your HTML document using the “script” tags. The code can simply appear “as-is” right in your document between the tags, or you can use the “src” attribute to point to a separate javascript (“.js”) file which has all the javascript code. We are using the second method.

If you look in the file “referAFriendValidation.js”, you will notice that there are no HTML tags in a “.js” file, and this includes the “script” tag – that’s done on purpose.

Using this second method allows you to hide your javascript from anyone who views your page once it’s been deployed, and you don’t have to scroll down really far past the javascript code to find your HTML code during development.

Actually, if you do a “Page->View Source” on IE or a “View->Page Source” on Firefox,

You will see that the PHP scripts aren’t shown to the browser by default. PHP is a “server-side” script, so it doesn’t get sent to the browser. Thus, PHP has the same benefits as using an external javascript that I mentioned above.

So, above the “script” tag, but still in the tags, are the “meta” tags we need.

You probably know more about this than me, but just to be thorough, I included these in the “peter.php” file to indicate that the file includes HTML and javascript.

There are online sources for information on PHP and javascript. If you are interested, check out these links:



js/default.asp

HTML

I got kind of inventive when I worked on this project, so please bear with me.

The form tag in this page wraps around 2 tables: the input fields in the top table and the greeting textarea and the buttons in the second area. That’s not too inventive, but that’s not what I mean yet. Here’s the form tag:

The most important part here in the form tag is the “onSubmit” attribute. The main javascript function that I used was the one I called “verifyForm()”. By placing it in the “onSubmit” attribute, every time the page loads and reloads (if you hit the “Submit” button or if you hit the browser “reload” button), the page will call this javascript function, or code. If you are foggy on what that means, I’ve included detailed descriptions of both PHP and javascript below. Anyway, long story short, by calling this javascript code, you are running a script that I wrote which checks the form fields and creates a pop-up window with a message if the user did something wrong. I debugged it pretty well, but you might want to spend some time trying out the page yourself to double-check it.

So, the next thing to point out is that the “action” attribute is set to the page “peter.php”. This just means that every time the page is loaded or re-loaded, it always returns to the same page, “peter.php”. If you want the page to be redirected to another page, you will have to figure out a way to change this value. Actually, PHP has a function called

“header( URLstring )” which redirects the page to the URL you pass into it. I didn’t get that far, but if you get into PHP that far after reading this document, you should be able to pull that off no problem.

The next attribute to note is “method = post”. This just means that the HTTP “headers” are being passed back and forth between the browser and the server without having to appear in the URL, basically. It means that it’s a HTTP “POST” operation. The opposite operation would be a HTTP “GET” operation, where you would see the “http:// .. /?isDone=yes&number=5” junk in the URL. Anyway, this is important to note because in the PHP code, you will see something called “$_POST”. I describe what that is in this document in the section called “PHP”, don’t worry, but the reason that the PHP code uses the thing called “$_POST” is because the form attribute “method = post”.

Finally, the attribute “name = referAFriend” is important because in javascript, you refer to a tag either by the “name” attribute or by the “id” attribute. The javascript uses this “name” value to locate the “input” tags that are found within the form.

The next thing to look at is the “input” tags. This is where what I was calling “inventiveness” is maybe just a bit over-complicated. But its what I had to do to get it working.

 

Name

Email Address

Referrer 

" id="referrer.F0Email" >

embedding the “inline” script “” in the value attribute will link PHP to the HTML tag. The input control will display the current value of the PHP variable. Also, say the user opens the page for the first time, and the value of the PHP variable is null. When the user hits the submit button and the page is reloaded, PHP will store the value of the input tag into the associative array “$_POST[‘F0Email’]” as we saw previously. If we write a PHP script to assign the array value to the variable $F0Email, it will now show up on the page, even though the page has been re-loaded:

…

Basically (skip ahead to *** if you don’t really care right now), I put this at the top of every page. “session_start()” is ignored if another page already invoked it. If I haven’t put any variables in the “$_SESSION” array yet, then the function “empty()” should return true. In that case, I set the variable “$loggedIn” to false and call the function “session_destroy()” to clear the current session (a previous login page added all the login data to the $_SESSION array – but only if the user logged in successfully). This keeps users from accessing this page if they are not logged in. The other branch is used if the $_SESSION array has values in it, with the variable $loggedIn set to true, and so on.

I define the value “$_SESSION['currentPage'] = "email_details.php";” so that my code always knows what the current page is (in case I need to differentiate it from the previous page).

***Anyway, the truth is, that however great the “$_SESSION” array is, I’m not using it here!

The reason is that because I am using “javascript” (see javascript section) to validate the “input” tags (make sure that the input tags aren’t empty and that the text written into the input tag fields used for the email addresses is in the format “me1@”), I need PHP to somehow communicate with javascript. PHP and javascript can both manipulate HTML, but they can’t talk directly to each other. That’s where “Hidden” tags come into play:

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download