Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Tutorial (Rate comments or items) Widget on your pages

innerHTML

  • Please log in to reply
No replies to this topic

#1 jerrywickey

jerrywickey

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 51 posts

Posted 20 January 2012 - 02:22 PM

A rating widget shows how others rated something and what the user rated it.

stars.jpg

You can easily place as many as you like in your HTML code letting users rate comments, items you have for sale or anything else.

All you need to do to put one of these stars.jpg any where on your page is place one of these spans in your HTML and back it up with the javascript and php code in this Tutorial.

<span id="rate0"></span>

You can see a working sample

http://www.jerrywick.../ratestuff.html

You can play with it here.

All you need to do is copy and paste from this tutorial. Download the small php file and drop it on your server in the same directory as the web page. Copy the javascript to the bottom of your web page and paste in as many of these spans as you like, numbering them consecutively. Give each span an initial rating in the java and you're up and running.

contents of this tutorial
level of understanding needed:
javascript tutorial:
HTML code javascript code needed to do this.
ssdbase.php file download file needed to do this.


LEVEL of understanding

It takes about 150 lines of javacode and 90 lines of php code in a single file on the server to do the job. This tutorial teaches a slightly more than beginner how it all works. This tutorial covers only the javascript. You don't need to know how the php file works to use this, but if there are requests, I will write the php tutorial as well.

This tutorial assumes the reader is familiar with HTML and has been at least introduced to javascript. If the reader fully understands the following javascript code:

while (inputtext.indexOf( '*end*' ) != -1){
	display(inputtext);
	inputtext= getmoretext();
}
inputtext is a user variable, not a command word;
display() and getmoretext() are user defined function, not native to javascript;
the while loop continues to display (what ever that function does) the contents of inputtext until the function getmoretext puts the string *end* into inputtext.

If that makes sense to you than you have enough knowledge to follow this tutorial and put user friendly rating images in your own HTML.


TUTORIAL

Of course since user ratings show user results that are an accumulation of many users ratings over many page views, data must be stored and manipulated automatically on the server other than as a part of the HTML document. If the page had access only to information contained within the HTML page which never changes, it would be impossible to display an accumulation of user ratings.

I use a simple PHP database software that I wrote to store and retrieve that data. The javascript in this example accesses that database. The entire database can be found right here in this tutorial for download as a single file. Put the file in the same server directory as your web page. That is all you have to do. How the database php file works is the subject of another tutorial in the php section which I will write if there is interest.

All you need to know is; Download the single file ssdbase.php ; and Drop it in your web server; Done

Now for the javascript. It is helpful at this point to copy the javascript code from the bottom of this Tutorial out to a text file and keep that open on your desktop so you can easily reference the code as you read.

<span id="rate5"></span>

The id must be unique for each star widget and numerically labeled "rate0" "rate1" 2 ... 10 11 so forth no spaces. This is so that the javacode can access them numerically. All it needs to know is how many there are and then each one is "rate" and a number. You can use this trick for other things. It simplifies things by reducing how much unique code you must write.

Since its merely an HTML element, it can be put anywhere.

If you like my tutorial and it was helpful, don't forget to add to my credibility. I am new here in this forum, but not new to programming. Thank you and good luck.

The first two lines of javacode merely make the thank you message disappear and then fill it in with note. This isn't part of the widget, just a good idea to reassure users their vote was recorded. The commitRate function accesses the "thankyou" <div> so don't just remove it without altering the function.

<script>
document.getElementById('thankyou').style.display= 'none';
document.getElementById('thankyou').innerHTML= '<b>Thank you for voting</b>';

The rating that a page viewer sees when loading the page are the accumulated ratings which have been stored over time. We need a server side database to store and deliver these values. I use my own super simple php database. ssdbase.php Down load it here and drop it on your server. To learn how it works ask for my php tutorial.

All we need to know right now is what we need to do to get and to save values to it. Which is simple. There are only four commands and javascript will be using all four by using httpaccess. Once you have copied the php file to your server, you can access the database from your browser. http://yourdomain.co...e.php?-command-

ssdbase.php?new="databasename" &p="password"  &l="recordlength"
ssdbase.php?set="databasename"  &p="password" &n="name" &v="value" 
ssdbase.php?read="databasename"  &p="password" &n="name" 
ssdbase.php?dump="databasename"  &p="password"
Pretty self explanatory. The output is plain text right in the browser, but when javascript accesses it, the output is stored in a variable and manipulated.

Dump simply dumps all name value pairs in the database separated by "\n" new line characters. This is the first function we will be using, since we need to populate the spans with the appropriate number of stars.

But before we can do that we need to set the name and pass word in the var dbase and passw

We need to declare three arrays that hold the data for each of the spans as an element. This is done outside of any function in global scope, because the functions use these to keep track of things. We keep track of the rating that came from the database in commentRating[] and the number of users who rated in commentNumberRating[] This is important because a high rating by hundreds of users shouldn't move at all when one user rates it low, but a high rating by two or three users should be brought down quickly by a few who rate it low.

var dbase= 'yourdata';
var passw= 'pass';

var commentRating= new Array(); 
var commentNumberRating= new Array();
var commentUserRating= new Array();
var nascentUserRating= 0;
var noComments= 0;

We also keep track of any ratings the user sets on the page this session in commentUserRating[]. We must declare two other global variables as well. nascentUserRating and noComments. You'll see why shortly. I used the word comment because initially I wrote this as a rating system for rating comments. But now I am too lazy to go back and change all the names.

Now on to business, the first thing we need to do is guarantee the database exists. The function merely does a database call with the function server and checks if the word 'fail' is returned beginning at the first character. We can't just check for the occurrence of the word "fail" because it may appear in the value or name of a database record. But if it appears as the first word with no spaces before it, the dbase is signaling that no such database was found or that the password is incorrect.

guaranteedatabase();
initratingvalues();
initratingimages();

It doesn't matter which, because in either case, we need the database so it creates it with new=dbase p=password. These were set above in the first lines of the java code.

Now we are setting the initial ratings for all the spans. The names of the database records n= must be numerical. Java will add the string "rate" in front of them to get the unique id for each span. v= the value which is the rating a colon and the number of people who rated. Of course all of these should be one since it is the programmer who is setting the initial rate, which could be zero. Notice the escape() colons are not url safe so they need to be escaped before being sent to the server.

function guaranteedatabase(){
	// check for database; create it if needed
	if (server('ssdbase.php?dump='+dbase+'&p='+passw).indexOf('fail')==0){
		server('ssdbase.php?new='+dbase+'&p='+passw+'&l=50');
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=0&v='+escape('1:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=1&v='+escape('2:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=2&v='+escape('3:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=3&v='+escape('6:10'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=4&v='+escape('7:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=5&v='+escape('8:1'));
	}
}

If the dbase did exist, but the pass word was wrong. All of these dbase commands will fail. And no stars will appear, because none of the spans will be populated with images. Not even images of blank stars. To see blank stars the variable commentRating[x] (X for the span id="rateX') must contain 0.

Lets take a moment to check out function server() because we use that a lot. Zip down the code to find the function. Its only four lines. The first of which merely initializes an http object. Different browsers do it differently, so it gets the object from browserdependant() which is the next function. Then it opens the object by telling it is an http GET. you know ?k=v type thing. Gives it the url which was passed to it and false refers to deferring delivery of the web page content that was returned by the url.

function server(url){
	a= browserdependant();
	a.open('GET', url, false);
	a.send();
	return a.responseText;		
}

function browserdependant(){
	if (window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}


This is no different than entering the exact url into your browser. If java does this with a url of a web page, it will return the html code that your browser receives to display the page. But java isn't allowed to access any http page except those on your own server for security reasons. That's ok you just copied ssdbase.php to your server.

send() and return the responseText are pretty self explanatory. The server() function is used a lot. It is the way in which javascript and php communicate. php generates a web page which you can see if you put yourdomain.com/ssdbase.php?dump=yourdata&p=pass into your browser. Now back up to the rest of the code near the top.

guaranteedatabase();
initratingvalues();
initratingimages();

After guaranteeing the database exists, we have to initialize the rating values and the rating images, the stars.

we're back to here
guaranteedatabase();
initratingvalues();
initratingimages();

The function initratingvalues(); dumps the database using server() and the dbase name and the password set at the beginning. It then adds the word "end" to the end. So it knows when it has read the whole content. It puts an \n end line character before end because each record of the dump will be separated by a new line character. That is why we split the data returned by server() with "\n"

function initratingvalues(){
	// get initial values from server
	var temp= server('ssdbase.php?dump='+dbase+'&p='+passw)+"\nend";
	var populateItems= temp.split("\n");
	while (populateItems[noComments]!='end'){
		var values= populateItems[noComments].split(':');
		commentRating[noComments]= parseFloat(values[1]);
		commentNumberRating[noComments]= parseInt(values[2]);
		commentUserRating[noComments]= 0;
		noComments++;	
	}
	noComments--;
}

Now its just a simple while loop looping through all the contents until it finds "end"

Remember noComments was declared at the beginning so it is global and accessible inside a function. It was started with zero which should match the first record id, but for simplify we don't check. A sophisticated programmer could implement the name of the dbase record in the name of the span. This would be useful on a comment page where the number of comments on the page changes. A php script could generate the content and the span ids based upon the dbase output. We'll save that for another time.

After all of the records are parsed and their values put into commentRating[] and commentNumberRating[] for each of the dbase records returned. Remember each record is separated by a new line character. commentUserRating[] is set to zero for each span id because of course the user has not yet rated anything. The screen hasn't even rendered completely yet. The browser is still working on that.

At the end just before returning from the function coComments is decremented one because of course it would have been incremented in preparation for the last record which turned out to be "end" That last increment must be reversed otherwise we'll have a phantom span id but no data for it.

Now its time to populate the spans. Its getting exciting. oooh The browser has finished rendering and the images of stars will soon be popping up on the screen.

After this last comment initratingimages(); which we are looking at now, javascript will stop and not execute again until the mouse hovers over one of the star images

in the function initratingimages(); we are generating the contents of the spans and placing that content in them. Each span will contain eight images, one for each star, and each image must handle three events. Click which signals the users rating. hover which must change the color of the stars and mouseout which must restore the starts to their normal rest colors.

function initratingimages(){
	var img1= '<img src="';
	var img2= '" onclick="rateCommit(';
	var img3= ')" onmouseover="rateHover(';
	var img4= ')" id="img';
	var img5= '" onmouseout="rateHoverOut(';
	var img6= ')">';
	var p= '';
	for (i=0; i<noComments; i++){
		p= '';
		for (j=1; j<=8; j++){
			p += img1+''+img2+i+img3+i+', '+j+img4+i+j+img5+i+', '+j+img6;
		}
		document.getElementById('rate'+i).innerHTML= p; 
		populate(i, commentRating[i], 0);
	}
}

We build these image html elements with the pieces in the local variables img1 - 6. Appropriate values will be inserted between these bits and pieces of html.

The i for loop counts through the span ids, the number of which is contained in noComments which was set by initratingvalues() when it accessed the database. With each iteration of the loop, the j for loop counts through the number of stars. Change the upper limit for j and you change the number of stars that appear. Everything will adjust, because the html content that makes it all work is being generated dynamically rather than the author writing each span out.

In each iteration of the i for loop, the j for loop executes eight times and each time an <im elements is generated using the img1-6 parts. You can see this in the p += line. P is cleared for each i iteration and then loaded up through each iteration of j. Eight <img src="" onclick="rateCommit( )" onmouseover="rateHover( )" onmouseout="rateHoverOut( )"> text strings are generated and added to p. Then p is loaded into the span whose id is "rate"i This continues until all the number of <img elements which were delivered by the database are generated. That number is contained in noComments which was incremented by initratingvalues()

The spans now have their <img elements inside them. The values of i and j were used to populate the arguments that are passed to the rateCommit() and the two hover functions. We'll see what they do and why those values make everything work next.

This continues until eight <img elements are placed in each span. (when i say span, i mean the span in which the stars appear, the ones which introduced this tutorial with)

One more thing that happens for each iteration of the i for loop is populate() is called right after the <img elements are placed in it.

If populate() had been called at any time before iniratingimages(), java would have thrown a error, because populate() places image file names in the .src of <img elements which would not yet exist.

In populate() the correct image is selected and placed as the src of the image. The function is not just called to initialize things but is called a lot because it is what changes the color of images when the mouse hovers over.

function populate(item, rate, userrate){
	for (j=1; j<=8; j++){
		if (j== Math.round(userrate)){
			rateimg= 'http://www.jerrywickey.com/images/fostar.jpg';			
		}else if(j<= Math.round(rate)){
			rateimg= 'http://www.jerrywickey.com/images/custar.jpg';			
		}else{
			rateimg= 'http://www.jerrywickey.com/images/unstar.jpg';			
		}
		document.getElementById('img'+item+j).src= rateimg; 	
	}
}

It needs to know which span to work and it needs to know which of the eight stars are which color. Since that changes all the time, the calling part of the program must deliver those in the three arguments. It would be far too complex to make this function figure out under what circumstances it was called. Make the software do the work. I say.

initratingimages() knows that it is initializing so the userrate is always zero, the user hasn't rated anything yet. Zero is passed for that. The span id is in i because it is looping through each span; and the rating pulled from the database is in commentRating[] for the i element. These are the values passed to populate()

Populate() simply loops through the eight stars. j is the number of the star from left to right. So the number contained in j is also the rating one intends if he hovers over that star. That is why the j loops start with 1 and not zero.

So a simple check to see if j is equal to the rating the userrate determines that the image must be the darker color, if less than or equal to the rate supplied by the database then the lighter color and finally if neither of those then it is a washed out blank star. One at a time the image uri is slipped into the src of the img element which are named 'img' item. This was the name given to it by the initratingimages() function between the var img4 and var img5 parts. item was also passed to it by the same function.

It is here that you can replace the star image with your own of any size. The size of these images determines the size of the whole rating widget.

When this whole rigmarole is done, all the images appear and each is appointed with the proper arguments in their inclick onmouseover and onmouseout function

We can see how it all works now by looking closely at the simple rateHover and rateHoverOut functions.

Each of the spans now has in it eight of these.
<img src="http://www.jerrywickey.com/images/unstar.jpg" onclick="rateCommit(3)" onmouseover="rateHover(3, 6)" id="img36" onmouseout="rateHoverOut(3, 6)">  
one after another. We are looking at rateHover() and we see that if the mouse is hovering oover the star that this image generates on the screen than rateHover will be called with the arguments 3 and 6. These arguments were placed in that <img element by initratingimages() and the src= image name was place by populate()

function rateHover(item, rate){
	mouse(2);
	populate(item, commentRating[item], rate);
	nascentUserRating= rate;
}

The first thing rateHover does is change the mouse. Look at mouse() to clarify. Then it calls populate, because the color of not only that star but all the stars may have to change. When someone clicks to commit their rating, sometimes the color of stars which are not under the cursor may change. Also if the condition j== Math.round(userrate) in populate() is changed to j<= Math.round(userrate) then users will see their ratings fill in all stars to the left of their rating.

So rateHover must accommodate these possibilities by populate() to check the color of all eight stars in that span. It passed to populate() the values item which are used to find which span and which were passed to it by the star image over which the mouse now hovers and that value was placed in the <img element by initratingimages()

The commentRating[item] is drawn from the database using item to identify which and finally rate was passed to rateHover by the <img element again having had that value placed in it by initratingimages()

populate() does its work again and the stars change color as the mouse moves over them. rateHover() must do one more thing. When this function is called from the onmouseover= command in the <img element the mouse is hovering over a star which may or may not be the star the user may want to vote. So we have to remember what that was before he votes it. The value with is rate as we just discussed and it is stored in nascentUserRating. We'll see what happens to that in a second

But first lets speed through rateHoverOut() which is nearly identical. The differences are these. The mouse function is told to return to a pointer mouse(1) and when the mouse leaves a star, all eight stars should be returned to the condition which reflects the data from the database including any previous votes the current user made this session, so the values passed to populate have to reflect user choices made during this session. Which would be zero just like in rateHover() unless he clicked a star as we will see in a moment. One last thing. nascentUserRating must be set to zero since he is leaving the star. He may well be entering the next star over. But rateHover() for that star will take car of that. He may also be moving on to something else. And nascentUserRating must be set to reflect that no selection is in progress.

function rateHoverOut(item, rate){
	mouse(1);
	populate(item, commentRating[item], commentUserRating[item]);
	nascentUserRating= 0;
}

rateCommit() is the meat and potatoes of the matter. (save the best for last) The value for item was passed by the onclick="rateCommit( in the <img in the span over which the mouse is hovering when he clicked. commentUserRating[] for that item number is set to the value of nascentUser which would have been set by what ever star he hovered over last. This value could have been added to rateCommit() by initratingvalues() at the very beginning. But using nascentUser gives us more flexibility if we want to get fancy later.

function rateCommit(item){
	commentUserRating[item]= nascentUserRating;
	var rating= server('ssdbase.php?read='+dbase+'&p='+passw+'&n='+item).split(':'); 
	var number= parseInt(rating[2]);	
	var calculatedrate= parseFloat(rating[1])*number+parseInt(nascentUserRating);
	number++;
	calculatedrate= calculatedrate/number;
	commentRating[item]= calculatedrate;
	server('ssdbase.php?set='+dbase+'&p='+passw+'&n='+escape(item)+'&v='+escape(calculatedrate+':'+number));
	document.getElementById('thankyou').style.top= getypos(document.getElementById('rate'+item))+'px';
	document.getElementById('thankyou').style.left= getxpos(document.getElementById('rate'+item))+'px';
	document.getElementById('thankyou').style.display= '';
	setTimeout("document.getElementById('thankyou').style.display= 'none'", 3000);
}

This is a click to commit his vote. So, in addition to recording his vote, we need to calculate how his vote alters the average user rating. To do that we need to access the database again.

server('ssdbase.php?read='+dbase+'&p='+passw+'&n='+item)
but this time it wont be a dump. We just need the values for this particular item.

Since the record name is followed by a colon and we put the two data points, user rating and number of raters in separated also by a colon we can do a simple .spli(':') to separate all three values record name : rating : number of raters. and place them in the array rating (by the way if you're new and didn't know .split() will create a new array variable. You dont have to declare it = new Array() before hand.

accessing them as rating[1] and rating[2] number of raters is an integer but rating must be a floating point value as you will see.

The formula for keeping track of averages when the number of data points keeps increasing is

new average = (old average * the number of data points + the new data point ) all divided by (the number of data points plus one for the new one)

This result is the new commentRating[] for that item and has to be set to the server to be remembered not only for next time, but for the next page load somewhere else which is probably already happening.

So the server is called again with

server('ssdbase.php?set='+dbase+'&p='+passw+'&n='+escape(item)+'&v='+escape(calculatedrate+':'+number));
remember to escape the values before sending them http. The rate and number are separated by a colon just like they were received. The colon is pretty much the only reason this needs to be escaped, but who knows one might want to add names instead of numbers for items so its just good practice. Saves hours of trouble shooting time when making changes later.

Thats it all thats left is the thank you

The last four lines merely position the thank you message over the span and set it to be turned off in 3 seconds.

Happy computing

Jerry

The php code needed to make this work is in its own code block below this HTML code block. Copy it to a plain text file. Name it ssdbase.php and save it to your server in the same directory as the web page you want to use the rating widget. If there is interest I will do a php tutorial on the php super simple data base .php

<div style="margin: 30px;">
<div style="text-align: right;">

rating stars under this<br><span id="rate4"></span><br><br><br>

<span id="rate5"></span><br> another over a different item<br><br>
</div>

<div id="thankyou" style="position: absolute; top: 0px; left: 0px; color: #844; font-size: 1.75em;"></div>

<span id="rate0"></span>

 how much do you like item 1<br><br><br>

<span id="rate1"></span> any number of rating spans can be placed on the page<br><br><br>

The stars can appear anywhere. <span id="rate2"></span><br><br><br>

<span id="rate3"></span><br>
it is merely an HTML span that can be placed anywhere an HTML element can be place.<br><br><br>

<center>
 Remember the initial ratings have few raters so, you'll see big changes in the overall rating when you select a rating.  But as more people rate one more rate doesn't make a big difference anymore.  You'll see the math of that in the Tutorial.
</center>
</div>



<script>
document.getElementById('thankyou').style.display= 'none';
document.getElementById('thankyou').innerHTML= '<b>Thank you for voting</b>';

// ssdbase.php?  Jerry's SuperSimpleDbase  
var dbase= 'yourdata';
var passw= 'pass';

//	ssdbase.php?new= &p= &l=
//	ssdbase.php?set= &p= &n= &v=
//	ssdbase.php?read= &p= &n= 
//	ssdbase.php?dump= &p=
//	name: value \n

var commentRating= new Array(); 
var commentNumberRating= new Array();
var commentUserRating= new Array();
var nascentUserRating= 0;
var noComments= 0;

guaranteedatabase();
initratingvalues();
initratingimages();

function guaranteedatabase(){
	// check for database; create it if needed
	if (server('ssdbase.php?dump='+dbase+'&p='+passw).indexOf('fail')==0){
		server('ssdbase.php?new='+dbase+'&p='+passw+'&l=50');
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=0&v='+escape('1:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=1&v='+escape('2:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=2&v='+escape('3:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=3&v='+escape('6:10'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=4&v='+escape('7:1'));
		server('ssdbase.php?set='+dbase+'&p='+passw+'&n=5&v='+escape('8:1'));
	}
}

function initratingvalues(){
	// get initial values from server
	var temp= server('ssdbase.php?dump='+dbase+'&p='+passw)+"\nend";
	var populateItems= temp.split("\n");
	while (populateItems[noComments]!='end'){
		var values= populateItems[noComments].split(':');
		commentRating[noComments]= parseFloat(values[1]);
		commentNumberRating[noComments]= parseInt(values[2]);
		commentUserRating[noComments]= 0;
		noComments++;	
	}
	noComments--;
}

function initratingimages(){
	var img1= '<img src="';
	var img2= '" onclick="rateCommit(';
	var img3= ')" onmouseover="rateHover(';
	var img4= ')" id="img';
	var img5= '" onmouseout="rateHoverOut(';
	var img6= ')">';
	var p= '';
	for (i=0; i<noComments; i++){
		p= '';
		for (j=1; j<=8; j++){
			p += img1+''+img2+i+img3+i+', '+j+img4+i+j+img5+i+', '+j+img6;
		}
		document.getElementById('rate'+i).innerHTML= p; 
		populate(i, commentRating[i], 0);
	}
}

function populate(item, rate, userrate){
	for (j=1; j<=8; j++){
		if (j== Math.round(userrate)){
			rateimg= 'http://www.jerrywickey.com/images/fostar.jpg';			
		}else if(j<= Math.round(rate)){
			rateimg= 'http://www.jerrywickey.com/images/custar.jpg';			
		}else{
			rateimg= 'http://www.jerrywickey.com/images/unstar.jpg';			
		}
		document.getElementById('img'+item+j).src= rateimg; 	
	}
}

function rateHover(item, rate){
	mouse(2);
	populate(item, commentRating[item], rate);
	nascentUserRating= rate;
}

function rateHoverOut(item, rate){
	mouse(1);
	populate(item, commentRating[item], commentUserRating[item]);
	nascentUserRating= 0;
}

function rateCommit(item){
	commentUserRating[item]= nascentUserRating;
	var rating= server('ssdbase.php?read='+dbase+'&p='+passw+'&n='+item).split(':'); 
	var number= parseInt(rating[2]);	
	var calculatedrate= parseFloat(rating[1])*number+parseInt(nascentUserRating);
	number++;
	calculatedrate= calculatedrate/number;
	commentRating[item]= calculatedrate;
	server('ssdbase.php?set='+dbase+'&p='+passw+'&n='+escape(item)+'&v='+escape(calculatedrate+':'+number));
	document.getElementById('thankyou').style.top= getypos(document.getElementById('rate'+item))+'px';
	document.getElementById('thankyou').style.left= getxpos(document.getElementById('rate'+item))+'px';
	document.getElementById('thankyou').style.display= '';
	setTimeout("document.getElementById('thankyou').style.display= 'none'", 3000);
}

function server(url){
	a= browserdependant();
	a.open('GET', url, false);
	a.send();
	return a.responseText;		
}

function browserdependant(){
	if (window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
} 

function mouse(ptr){
	if (ptr==1){ptr= 'default';}
	else if (ptr==2){ptr= 'pointer';}
	document.body.style.cursor= ptr; 
}

function getypos(obj){
	var y= 0
	while(obj){
		y= y+obj.offsetTop;
		obj= obj.offsetParent;
	}
	return y;
}

function getxpos(obj){
	var x= 0
	while(obj){
		x= x+obj.offsetLeft;
		obj= obj.offsetParent;
	}
	return x;
}
</script>

ssdbase.php
<?php
// Jerry's Super Simple Data Base

// prevent cashing of identical calls which in databases often deliver differnt info
header("Last-Modified: ".gmdate("D, d M Y H:i:s", (time()-1))." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

//new= &p= &l=
if (strpos($_SERVER['QUERY_STRING'], 'new=')===0){
	if (($f= trim($_GET['new']))!==false){
	if (($p= trim($_GET['p']))!==false){
	if (($l= intval($_GET['l']))!==false){
	if (!is_dir('ssdbase')){
		mkdir('ssdbase');
	}
	$code= '<'.'?php exit() ?'; 
	if (file_exists('ssdbase/'.$f.'.php')){
		$contents= file_get_contents('ssdbase/'.$f.'.php');
		if (strpos($contents, ('>'.$p.">"))==14){
			file_put_contents($f, ($code.'>'.$p.'>'.$l.">\n"));
			echo 'done';
			exit();
		}
	}else{
		file_put_contents(('ssdbase/'.$f.'.php'), ($code.'>'.$p.'>'.$l.">\n"));
		echo 'done';
		exit();
	}		
}}}}

//dump= &p=
if (strpos($_SERVER['QUERY_STRING'], 'dump=')===0){
	if (($f= trim($_GET['dump']))!==false){
	if (($p= trim($_GET['p']))!==false){
	if (file_exists('ssdbase/'.$f.'.php')){
		$contents= file_get_contents('ssdbase/'.$f.'.php');
		if (strpos($contents, ('>'.$p.">"))==14){
			echo str_replace(' ', '', substr($contents, (strpos($contents, "\n")+1)));
			exit();
		}
	}
}}}

//read= &p= &n= 
if (strpos($_SERVER['QUERY_STRING'], 'read=')===0){
	if (($f= trim($_GET['read']))!==false){
	if (($p= trim($_GET['p']))!==false){
	if (($n= trim($_GET['n']))!==false){
	if (file_exists('ssdbase/'.$f.'.php')){
		$contents= file_get_contents('ssdbase/'.$f.'.php');
		if (strpos($contents, ('>'.$p.">"))==14){
			if ($a= strpos($contents, ("\n".$n.':'))){
				$out= trim(substr($contents, ($a+1)))."\n";
				echo substr($out, 0, strpos($out, "\n"));
				exit();
			}
		}
	}
}}}}

//set= &p= &n= &v=
if (strpos($_SERVER['QUERY_STRING'], 'set=')===0){
	if (($f= trim($_GET['set']))!==false){
	if (($p= trim($_GET['p']))!==false){
	if (($n= trim($_GET['n']))!==false){
	if (($v= trim($_GET['v']))!==false){
	$f= 'ssdbase/'.$f.'.php';
	if (file_exists($f)){
		$contents= file_get_contents($f);
		if (strpos($contents, ('>'.$p.">"))==14){
			$parts= explode('>', $contents);
			$l= intval($parts[2]);
			$sp= '          ';
			while (strlen($sp)<$l){$sp= $sp.$sp;}
			if (strlen($v)>$l){$v= substr($v, 0, $l);}
			$out= $n.':'.substr($sp, 0, ($l-strlen($v))).$v;
			if ($x= strpos($contents, ("\n".$n.':'))){
				$file= fopen($f, 'r+');
				fseek($file, ($x+1));
				fputs($file, $out);
				fclose($file);
			}else{
				file_put_contents($f, ($out."\n"), FILE_APPEND);
			}
			echo $v;
			exit();
		}
	}
}}}}}

echo 'fail';

Attached Thumbnails

  • custar.jpg

Edited by jerrywickey, 20 January 2012 - 05:41 PM.

  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download