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 :(
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.
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.
Remember 'This site is best viewed in 1024x768 resolution'? Ok so should I re-adjust my screen?
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!
]]>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.
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>
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.
]]>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 :)
<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.
]]>
printf("format",$firstvariable,
$secondvariable);
$variable = sprintf("format", $variable1,
variable2);
printf() outputs formatted strings and the sprintf() does the same thing but instead outputs into a variable to be stored and used for later.
$variable1 = 'Tom';
printf("% says hello",$variable1);
Here we have the printf() function you will notice the % tells PHP to output the variable supplied as the second argument to the function. We could stop there but printf() has so many more neat functions, let see. What other things we can add to that lonely %. The syntax is as follows:
%padding-width.decimaltype
For example if the padding character is 0 and the with is 3 and the value is 5 then output would be.
001
Ok enough of all that, let's see it in action!
$paycheck = 250;
$newvariable = sprintf("My paycheck is
$%03.2f");
printf($newvariable);
The output would be :
$250.00
The $%03.2f is interpreted as follows; the % says to start outputting the variable. The 0 says to pad using variables. The 3 says to put 3 places to the left of the decimal point and the 2 says to go 2 places to the right of the decimal point.
Other Output Functions
Let's take a look at some other output functions, these are really quick simple examples, starting with Strtoupper().
strtoupper() - Converting to upper case
$newvariable =
strtoupper($variable);
printf($newvariable);
Takes the $variable and outputs in all uppercase. You can use unfirst() to capitalize only the first letter in the string to uppercase, likewise ucwords() will upper case each word in the string to uppercase.
strtr() - Replacing values
$variable1 = "1 6 3";
$newvariable = strtr($variable1,
"6","2");
printf($newvariable);
This takes $variable1 and reads the string, replacing 6 with 2, then outputs 1 2 3
substr() - Returns value inside of string at a specific point
$newvariable = substr("tommy", 2,4);
Reads "hello" and returns everything from the 2nd character to the 4th character. Outputting:
mmy
substr_count() - Counts number of times a given item is in a variable
$variable1 = "tom 123 tom
123 tom 123";
$find = "tom";
$numberoftimesfound =
substr_count($variable1, $find);
In this case the variable $numberoftimesfound would have a value of 3 because it found tom 3 times in $variable1.
Ok now we did some cool stuff, let's see how simple it is to use the date since that is used very heavily in most PHP applications. Like almost everything else in PHP, accessing the current date is very easy, let's take a look.
$today = date("d/m/y");
Would give the $today variable a value of 04/01/2006. Very easy! :)
Whatever text editor you use; type this data into the file.
<html>
<head>
<title> PHP
Tutorial</title>
</head>
<body>
<p>This is only a test</p>
<?php
echo "<p>...from PHP</p>";
?>
</body>
</html>
Save it as test.php, then upload it to your web server.
Access the web site in your web browser and you should see the following output:
This is only a test
...from PHP
And there you have it! Easy wasn't it?
Line by Line Explanation
Basically the only line that has to do with PHP is the one that says :
The <?php part means to start interpreting the following as PHP not HTML. The echo "<P>...from PHP</p>"; means to echo (display) the code <p>...from PHP</a> which of course is standard HTML. The quotes are necessary as the trailing ; to show the end of the line.
]]>Now, on to the technical explanation of how this technique is developed. In the example illustrated below, we have created two frames, in the first frame has the static image for an older player that cannot handle Version 8's animation, and anti-aliased for text features. So then in frame number 2, we put in the movie clip with the sophisticated animation imagery that Version 8 can receive.
From there, in the first frame, we put the following into the Action Frame (Hit F9 if it's not visible).
playerVersion = System.capabilities.version;
temp = substring(playerVersion, 5, 1);
if(temp >= 8) {
play();
} else {
stop();
}
To explain what this does; line by line.
playerVersion = System.capabilities.version;
This references the System.capabilities.version variable and stores it into a variable we created called playerVersion. The value of player version is now ...
WIN 8,0,22,0
Easy enough, but we are not home yet. We need to get the major version number (Version 8 in this case) so we can do an 'if..then' statement. So now onto the next line.
temp = substring(playerVersion, 5, 1);
This uses the substring function and references the playerVersion variable. It then takes the fifth letter and stores it in the variable temp. The "...5,1)" means to take the fifth character and the 1 means to only take 1 character. So now we have the major version number in a variable.
if(temp >= 8) {
play();
} else {
stop();
}
Now we say essentially iIf the version is 8 or higher, move to frame two, if it is less than Version 8, stay on the first frame. This will enable us to have the basic image on the first frame and the high tech stuff on the second frame.
]]>Line by Line
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<title>CCE's Simple Tutorial </title>
<a href="#" onclick="ChangeText();">Click here to change the below text</a>
<div id="changeme">This is the text we want to change</div>
</body>
</html>
Ok so that is the code so far, the <DIV> tag has some text in there, now let's learn how to change it. The above link says that when the user clicks on the test to activate the ChangeText function. The below code defines that and needs to go anywhere above our <DIV> tag.
<script language="javascript">
function ChangeText() {
document.getElementById("changeme").innerHTML = "This is what we replaced it with.";
}
</script>
The ChangeText function, uses document.getElementById("changeme") creates a object so we can modify it, we just give it our id name of 'changeme'. Then we change the properties of the element innerHTML and change it to whatever text we want. Very easy.
Save it as hello.py, and just open a command prompt and run the script like this
Then you will see Hello World! It's great and simple. Next time we'll do some more advanced stuff, had to start somewhere.
]]>