
Wow, so Geocities is closing. For those of you that didn't grow up with the Internet and spending every minute on it - Geocities was the bomb back in the day. Before domains and hosting became dirt cheap, it was hard to have your own web site. I remeber in 1995 a friend gave me some web space on his server and I had my own domain. It was amazing. However before I had that I really had to use whatever space I could get my hands on.
Internet Service Providers
My ISP gave me some space however it was their domain and an alias to my home directory. So my web site would look something like this http://www.erols.com/~mortalkombatrulz - Don't click the link, it's gone :(
Enter geocities
So geocities hits and gives you free space with a slightly cooler domain name. They also had interesting sub directories that would categorize your content like a neighborhood. For example http://www.geocities.com/SiliconValley/yourpagehere/ Silicon Valley of course indicating that it was a tech related site. This neighborhood setup was really cool. With all of these sites popping up entered a ton of annoying sites that still haunt me today.
Browser shout outs
Remember those small browser buttons that told the world 'I like Internet Explorer' or Netscape? They were everywhere. Not sure the point but I know I had them on my site.
Telling the user what resolution the site was made in
Remember 'This site is best viewed in 1024x768 resolution'? Ok so should I re-adjust my screen?
Countless others
Where should I stop? Horrible backgrounds, tables everywhere, all text aligned center? It was a different world back then. It's sad to know of the sites that I spent so much time on as a kid is now going away forever. Yahoo purchased Geocities a wile ago, things changed. Now with hosting and domains so cheap people are just getting their own domain. Yahoo also provides hosting and domains so I guess they figure close Geocities. Yahoo isn't evil, I'm sure the site wasn't doing much of anything anymore. Geocities thanks for the free hosting!
This is a really neat tutorial that I enjoy using because it uses AJAX. Basically I want to call data into a web site, but I hate having to reload a new page every time for that. What we are going to do is store some data in a separate text file then call that data from our HTML page using AJAX (really just JavaScript in this case).
Line by Line
Let's first dive right into and view the code of test.html. I'll put comments below to explain as we go along.
Ok this part is easy enough just some standard HTML code to get the page going, so far so good.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
</head>
<body>
<title>CCE's AJAX Simple Tutorial
</title>
Ok so here we have our JavaScript code. This starts creates a function called createRequestObject. This will be the object that will go get our data for us, very simple. There is some quick version detection to satisfy both Internet Explorer and other web browsers.
<script type="text/javascript"
language="javascript">
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet
Explorer"){
ro = new
ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http =
createRequestObject();
Ok so now we have the object http with our request function built in. Now we have to tell it to do something, this happens next.
function sendRequest() {
http.open('get', 'tom.txt');
http.onreadystatechange =
handleResponse;
http.send(null);
}
We made a new function called sendRequest. You can see it uses our previous object http. The first line in the function uses the get command to get a file, in this case it is statically assigned the text file tom.txt.
NOTE: Dynamic data can be used as well very easily, see our other tutorials for both PHP and Coldfusion on this subject.
Ok so now the object is told to watch for the response ( to find out the status ) and then told to actually get the file.
function handleResponse() {
if(http.readyState == 4){
var response =
http.responseText;
var update = new Array();
Ok now this function handles the response of our last function. So let's see; it checks our http object for the readyState variable (the status) and checks to see if it is a 4 ( 4 means it worked). If it is a 4 then we assume the variable http.responseText holds the contents of the file, storing it to our new variable response.
Putting it all together - AJAX text into specfic tags
So now we have the contents of the file. We could stop here but I wanted just a little more than reading one file and then outputting it to the screen. I wanted this tutorial to grow with you. So what I did is made it so the text file can contain multiple lines of text and we access a specific line easily to put our site where we want it. To explain further let's look at the text file itself.
title|hi this is a message from tom
You will notice I have the word title followed by a | (shift + \ ) then the text I want to display. Title refers to the <div> where I want the text. I could have several of these if I chose, for example I could have.
header|this text goes into a div named header
footer|this text goes into a div named footer
So I can define several different places using <div> and access them. Now let's explain that a little bit more by looking at the next few lines of code. First I check to make sure the | symbol is there so I can tell what <div> I want it in and what is the text I want to display.
I then use the split function to split the variable at the | symbol, then storing it into a variable. I know have the div name in update[0] and the text itself in update[1].
if(response.indexOf('|' != -1))
{
update = response.split('|');
document.getElementById(update[0]).innerHTML
= update[1];
}
}
}
</script>
Ok now this should all come together. I have a <div id="title"></div> which is empty. You'll remember the title from above in our text file. Now look at the function called in our JavaScript link, sendRequest(title). That means to put the data from the text file we defined but ONLY the line that starts with title| and then put it between the <DIV> tags labeled title. See how cool that is? Now we can use that text file to put as much text as we want. And then call that text and put it exactly where we want it.
<a
href="javascript:sendRequest(title)"
mce_href="javascript:sendRequest(title)">Load
data into Title DIV below </a>
<div id="title">
</div>
</body>
</html>
Best uses for AJAX
Some cool things you can do with AJAX include, perhaps pulling a Coldfusion Blog Feed from a HTML page? That's something I'll work on in an upcoming tutorial.
One great thing about PHP is it is great for people that are new to web programming, it's very easy to start with and also can get really technical for the veterans. PHP started as Personal Home Page tools, it was started to assist new users with programming. The syntax is very easy to use and is very inituitive. PHP is a good language to start on and learn the basics of programming. With the tutorials on this site you should be able to get started using PHP to create dynamic web sites.
How does PHP work?
PHP is a server side scripting language. So PHP does the work on the 'back-end', preprocessing web sites and inserting dynamic data before they are displayed. Unlike JavaScript which is a programming language that works while the page is being viewed by the browser on the users computer. PHP is very similar to Macromedia's Coldfusion and Microsoft's ASP.NET.
All you do is just embed the code into an HTML page and give it a .php file name extension and you are good to go.
What do I need to get started?
Two things; a web server running PHP on it and a HTML editor. Most web hosting companies (including ours 'shamless self advertisement') offer PHP for no additional cost. This is a major advantage over Macromedia's Coldfusion which is an extra charge for most hosting companies (except ours, we offer free Coldfusion hosting - 'sorry I couldn't resisit).
What are some uses for PHP?
PHP can handle the output from HTML forms, collect the data, then email it to someone or enter it into a database. You can even write your own online store, message forums, pretty much anything you can think of that uses data and writes to a database. In short to give the basics you can :
- Access databases
- Access files on your server
- Access system commands
- This is especially interesting - many system administrators could use this to run common applications on their server. For example I had an old Perl script that ran and cleaned up a lot of un-needed files on our server. That Perl script can still be used and call upon from PHP, very powerful stuff.
How much does PHP cost?
As state above PHP is free. How is that? Three words; open source software. Open source software is very different from non-open source software companies. The term means that the source code is available for all to see, anyone has the ability to view the code to see how PHP operates, the same can not be said about Microsoft's Windows code which is guarded heavily away. PHP and open source software as whole operates on a very large (and very wonderful) community, there is no giant corporate office that runs it. There are many resources out there to learn this stuff as you can see by reading this site :)
Taking our first lesson; Hello World Example, we are going to spice it up a bit and use variables with our PHP file. Let's start right away by looking at an example then explaining what we did.
<html>
<head>
<title>CCE's PHP
Tutorial</title>
</head>
<body>
<?php
$var = "PHP is cool";
echo "<p>$var</p>";
?>
</body>
</html>
As you can see the line we really care about is
$var = "PHP is cool";
echo "<p>$var</p>";
This says define a variable called $var and give it the data of "PHP is cool"; , then we simply display the data using the echo command.
Using Constants
You saw above how to create variables and display the data, now we are going to take a look at creating 'constant ' variables. Constant variables typically do not change. They work well at the top of document if you know that you need to define something that will not change, let's take a look at a sample:
define("SALES_TAX",.05);
This creates a constant with the name name and the value is Tom Fitzgerald. You'll notice that constants do not require the $ before the variable name, and variables are traditionally defined in all upper case. This is not required but it can be easier when reading your code so you know what is a constant and what is not easily. You can now view the value by doing...
echo SALES_TAX
Simple Calculations
Now let's do some simple calculations using our variables and constant.
define("SALES_TAX",.05);
$Amount_Purchased = 5.45;
$Tax_Amount = $Amount_Purchased *
SALES_TAX;
This takes our constant SALES_TAX and our variable Amount_Purchased and multiplies the two to get the tax amount.
Note: Make sure if you are doing a calculation you are defining the variable correctly, for example:
This is the correct way
$Amount = 3
This is incorrect $Amount
= "3" ;
Quotes are used only
when defining a text variable or something
you don't want to ever run a
calculation on.
This is pretty simple so far so lets just view some more simple calculations:
$var1 = 3;
$var2 = 5;
$total = $var1 + $var2;
$total = $var1 * $var2;
$total = $var1 / $var2
This shows how we can do easy addition, multiplication and division using our new variables, good job.