Google Pagerank using Ajax
on Tuesday, November 13th, 2007 at 2:27 pmLately I’ve been searching for a good Google Pagerank function.
Couldn’t find any… So i decided to make my own.
Here is an Ajax Google Pagerank I have done today
Download files: click here
Brief description:
- _ajax.new.js: is the main ajax class. I have already explained this class here
- pagerank.php: functions to calculate the hash
- ouf.php: php call to the function
- index.html: simple input form
- style.css: simple stylesheet
If you like it digg it here
Please provide me with any comments to improve it.
//Jo
Installing LAMP on Ubuntu 7.10/8.04/8.10 (Linux,Apache,MySQL,PHP)
on Monday, November 5th, 2007 at 1:33 amLately I’ve been using ubuntu 7.10 for all my projects/daily work.
As a web developer i should have LAMP on my machine and now i would guide you through installing it on yours.
This guide is divided into 3 steps: installing/tesing Apache, PHP and finally MySQL.
Lets start with Apache:
1. Open the terminal (we will be using it through most of my guide) from Applications > Accessories > Terminal
2. Install apache2 using apt-get by typing the following
Note that you should know the root password.
Now everything should be downloaded and installed automatically.
To start/stop apache2 write:
Your www folder should be in: /var/www/
If everything is OK you should see an ordinary HTML page when you type: http://localhost in your firefox browser
Finished with Apache ? lets conquer PHP:
1. Also in terminal write:
or any php version you like
2. restart apache
This is it for PHP 
Wanna test it ? Just create an ordinary PHP page in /var/www/ and run it.
Example:
and write in it: < ?php echo “Hello World”; ?>
Now run it by typing http://localhost/test.php in firefox… You should see your ” Hello World ”
66 % is over, lets continue to installing MySQL:
1. Again and again in terminal execute:
2. (optional) If you are running a server you should probably bind your address by editing bind-address in /etc/mysql/my.cnf and replacing its value (127.0.0.1) by your IP address
3. set your root password (although mysql should ask you about that when installing)
4. Try running it
where xxx is your password.
Note: You can install PHPMyAdmin for a graphical user interface of MySQL by executing
5. restart apache for the last time
Congratulions your LAMP system is installed and running
Happy Coding
//Jo
UPDATE:
Due to the large number of people emailing about installing/running phpmyadmin.
Do the following:
The phpmyadmin configuration file will be installed in: /etc/phpmyadmin
Now you will have to edit the apache config file by typing
and include the following line:
Restart Apache
Another issue was making mysql run with php5
First install these packages:
then edit php.ini and add to it this line : ” extensions=mysql.so” if it isnt already there
Restart Apache
Hope this helps 
Ajax login form (PHP & Javascript)
on Saturday, September 22nd, 2007 at 8:10 pmOk, here’s another AJAX login form example…
In this example I am using 3 javascript files, 2 php files and 1 stylesheet.
click here: http://mazesolutions.me/demos/ajax2 for the demo
click here: http://mazesolutions.me/demos/ajax2/ajax2.rar to download the files
Brief description:
_ajax.new.js: is the main ajax class. I have already explained this class here
_formdata2querystring.js: used for posting the element of a form
_applogin.js: specific ajax class to handle the login form
index.php: simple login form
style.css: simple stylesheet
If you like it digg it here
Next post will be a tutorial on how to make it
Stay tunned …
//Jo
Peace
Validate a username using Javascript and PHP ( AJAX )
on Saturday, August 11th, 2007 at 11:44 am
Who doesn’t hate these long forms ? You fill each field in them and when you submit, it will return something like :
‘ SORRY BUT YOUR USERNAME IS ALREADY TAKEN ‘.
In this tutorial I m gonna show you how to check if a username is valid without leaving the page using ajax (Asynchronous Javascript And XML).
Before I start, check the final result to see if this what you are looking for.
Demo: click here
Download files: click here
Ready ?
Lets roll
First of all what is AJAX ?
Ajax, or AJAX, is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page’s interactivity, speed, functionality, and usability.
Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.
Now lets see those files
- _ajax.new.js: is the main file. Javascript is the glue that connect the server side language to the HTML page.
- index.html: is the HTML page where the user sends its request and receives the answer
- ajax-test.php: is the php file where we will make all the database operations or simple checkings like string lenght etc…
_ajax.new.js:
We’ll start by creating a basic class, called Ajax, in which we’ll wrap the functionality of the XMLHttpRequest class
Note: I will not analyse the whole class here, i will just explain briefly some key functions.
I will do another tutorial later, on how to make an advanced Ajax class using javascript.
Here are the beginnings of our Ajax’s class constructor function.
This code just defines the properties we’ll need in our Ajax class in order to work with XMLHttpRequest objects.
this.req = null;
this.url = null;
this.status = null;
this.statusText = ”;
this.method = ‘GET’;
this.async = true;
this.dataPayload = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = ‘text’, // ‘text’, ‘xml’, ‘object’
this.mimeType = null;
this.headers = [];
}
Now lets add an init method.
Here I am creating an XMLHttpRequest object. As you can see i tried to instantiate the object in a number of different ways, because XMLHttpRequest is implemented differently in Firefox, Safari, and Opera than it is in Internet Explorer.
Internet explorer 6 and earlier use a class called ActiveXObject while Firefox and Safari use class called XMLHttpRequest.
var i = 0;
var reqTry = [
function() {
return new XMLHttpRequest(); },
function() {
return new ActiveXObject('Msxml2.XMLHTTP') },
function() {
return new ActiveXObject('Microsoft.XMLHTTP' )} ];
while (!this.req && (i < reqTry.length)) {
try {
this.req = reqTry[i++]();
}
catch(e) {}
}
return true;
};
SENDING A REQUEST:
Now that we created an XMLHttpRequest, lets write a function that uses it to make a request.
Here are the steps
1- Calls init to create an instance of the XMLHttpRequest class and displays an alert if the call is not successful.
2- Call the open method on this.req this.req.open(this.method,this.url,this.async) to begin setting up the HTTP request.
The open method takes 3 parameters:
a- this.method ( GET or POST )
b- this.url ( the URL of the server side page )
c- this.async ( if this is set to true, then our javascript will continue to execute normally while waiting for a response. If you set it to false then our javascript will stop until the response comes back from the server… This should be set to true as this is the whole point of an AJAX application )
3-Set the headers of the page, depending on the method used
4-Setting up the onreadystatechange event handler.
As the HTTP request is processed by the server, its progress is indicated by these set of integers:
0: uninitialized
1: loading
2: loaded
3: interactive
4: completed
Now we have to wait until the request is completed ( state 4 ) so we can handle the response ( or maybe launch a function )
5-Processing the response.
When the response completes we should check first if the request succeeded. The status property contains the HTTP status code of the completed request.(now this could a 404 page or 500 page… )
But if req.status is bigger then 199 and smaller then 300 then we are ok
Note: a full list of the HTTP status code can be found here
Talaaaaaaaaa here’s the code
var self = null;
var req = null;
var headArr = [];
if (!this.init()) {
alert(‘Could not create XMLHttpRequest object.’);
return;
}
req = this.req;
req.open(this.method, this.url, this.async);
if (this.method == “POST”) {
this.req.setRequestHeader(
‘Content-Type’, ‘application/x-www-form-urlencoded’);
}
if (this.method == ‘POST’) {
req.setRequestHeader(
‘Content-Type’, ‘application/x-www-form-urlencoded’);
}
self = this; // Fix loss of scope in inner function(s)
req.onreadystatechange = function() {
var resp = null;
self.readyState = req.readyState;
if (req.readyState == 4) {
self.status = req.status;
self.statusText = req.statusText;
self.responseText = req.responseText;
self.responseXML = req.responseXML;
switch(self.responseFormat) {
case ‘text’:
resp = self.responseText;
break;
case ‘xml’:
resp = self.responseXML;
break;
case ‘object’:
resp = req;
break;
}
if (self.status > 199 && self.status < 300) {
if (!self.handleResp) {
alert('No response handler defined ' +
'for this XMLHttpRequest object.');
return;
}
else {
self.handleResp(resp);
}
}
else {
self.handleErr(resp);
}
}
}
req.send(this.dataPayload);
};
Now all what we still need is a URL and a HANDLER function for the response.
This method here will kick off the request.
this.url = url;
this.handleResp = hand;
this.responseFormat = format || ‘text’;
this.doReq();
};
index.html:
First lets call our Ajax class. Here we have 2 functions:
hand(): this function will handle the response received and will write it .
validateUsername(): this function will actually launch the ajax class and call the method doGet.
window.document.getElementById(‘response_span’).innerHTML=str;
}
function validateUsername(user){
var strDomain=”;
window.document.getElementById(‘response_span’).innerHTML=
“Validating username…”;
var ajax = new Ajax();
ajax.doGet(strDomain+’ajax-test.php?action=validateUsername&
username=’+user,hand,’text’);
}
The HTML:
| Choose your username |
size="30" onchange="validateUsername(this.value)"/> |
|---|
ajax-test.php:
All what this page does is check if the username is > then 3 characters and if it is equal to some pre-defined values.
You can easily change the code below to suit your needs and write some SQL statements in it.
case ‘validateUsername’:
$username = trim($HTTP_GET_VARS['username']);
if ( strlen($username) >= 3 ){
if ( $username == “joe” || $username == “rony”
|| $username== “joo” )
print “Username is valid“;
else
print “Username is not valid“;
}
else{
print “Username must be longer then
3 characters“;
}
break;
default:
//silence is golden
endswitch;
I hope i was comprehensible in my first big tutorial.
Just leave some comments and tell me your advices.
//Jo
Signing out
Peace