PHP Progress Bar

[therealwesfoster]

This is something I've been trying to learn here lately.. the basics behind creating a php progress bar.

 

I've searched google all around and found many classes and (lame) tutorials on how to do this, but for some reason my brain isn't wanting to comprehend the idea of how it works.

 

Maybe I'm just looking in the wrong places, so I would appreciate it if someone could link me to OR provide me with some code/ideas so I can figure it out. I'm wanting to do something like the following:

 

I'm wanting to send 5000 emails. I want to have a progress bar that shows ###/5000 Sent and also a percentage.. I know ajax is probably used (and I'm familiar with ajax), I'm just not sure how to go about doing it..

 

Any input is appreciated, thanks

 

Wes

[bluejay002]

PHP? that's a server-side thing. you cannot do that using PHP alone.

 

you might want to use JavaScript, specifically Ajax, for that.

[therealwesfoster]

True, like I said, I'm familiar with ajax. I just need to know how to go about doing it

[xtopolis]

See this thread.  It may get you started enough to get where you want.  Specifically I have an example that you should be able to take, as well as use his code about how he inserts into the db when he does his task in order to keep track.

 

I intend to post an answer to the other guy when I get home in a few hours.

[therealwesfoster]

See this thread.  It may get you started enough to get where you want.  Specifically I have an example that you should be able to take, as well as use his code about how he inserts into the db when he does his task in order to keep track.

 

I intend to post an answer to the other guy when I get home in a few hours.

 

Thanks I'll mark it to email me.

 

Anyone else?

[bluejay002]

True, like I said, I'm familiar with ajax. I just need to know how to go about doing it

 

my bad, i didn't notice that.

[lilwing]

There are a million ways to do this. You could change the colors of the background of a table, in accordance to percentage complete...

 

What I would do, is make 100 images and basically replace them for the increased var.

 

That's just PHP specific. With web languages today, you could almost do it all completely with just CSS and XHTML. But it's probably easier with JavaScript, since this would function better on the client side.

[the shig]

Howdy,

 

Firstly hello.

 

Saw this thread and thought it would be a good mini project (not created a progress bar yet).

 

If you want a progress bar, then consider making a table with two columns (ids = "done" and "to_do" (use the id to access using javascript)).

"done" starts with width of 0px and background color of blue (or green or whatever).

"to_do" starts with width of 500px and background color of white.

 

as you receive the ajax.responseText from the counter, just modify the widths of the two columns.

e.g. at 25% , width of "done" will be 125px and "to_do" will be 375px. at 47% width of "done" will be 235px and "to_do" will be 265px etc. etc. all the way to 100% when all you can see is "done" at 500px and "to_do" is now 0px;

 

Looks pretty groovy and almost exactly like a moving progress bar.

 

If you want some working code then get in touch.

 

Hope this helps.

 

 

 

 

[therealwesfoster]

Thanks for the reply shig

 

My main question is how to constantly get the percentage to display.. read my example about mail in the first (i think) post

 

Wes

[ThunderAI]

Here is the code for a progress bar i use.

 

	<?php
	// This Div layer will show a precent completed of the current search query. It relates directly 
	//	to the procedures that follow the While loop.
	?>
	<div id="myDiv" style="display:none; position:absolute; z-index:9; left:0; top:0; width:302;">
		<table width="100%" Class="windowMain" CELLSPACING=1 CELLPADDING=2>
			<tr>
				<td class="newTopicTitle">Search Query Progress</td>
				</tr>
			<tr>
				<td class="newTopicBoxes">
					<div id="myDiv_bar" style="display:none; width:0; background-color: #7198BF;background-image:url('images/animated_timer_bar.gif'); background-repeat:no-repeat;background-position: left center;">
						<table>
							<tr>
								<td class="newTopicTitle" id="percent" align="center" valign="middle">
									 
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>				
			<tr>
				<td colspan="2" class="newTopicEnder"> </td>
				</tr>
			</table>

 

												//echo "Number of Rows Found Across all Cycles ".$totalcellsfound." <br>";
												//echo "Number of Empty Returns Across all Cycles ".$totalcellsblanks." <br>";
												//echo "There are ".$totalsize." rows in each cycle <br>";
												//echo "Increase tmp_a by the totalsize <br>";
												$tmp_a	= ( $tmp_a + $totalsize );
												//echo ">>> a > The Value is ".$tmp_a." <br>";
												//echo "The DIV layer is 300 pixels wide, what percent of the pixel is completed? <br>";
												$tmp_b	= ( (300 / $scobby) / $totalexpectedcycles );
												//echo ">>> b >The Vlaue is ".$tmp_b." <br>";
												//echo "Take the percentage times the amount of records completed, and round the result <br>";
												$tmp_c	= round(( $tmp_b * $tmp_a ),0);
												//echo ">>> c > The Value is ".$tmp_c." <br>";
												//echo "What percent of the progress bar is completed? <br>";
												$tmp_d	= ( round( ( $tmp_c / 300 ), 4 ) * 100 );
												//echo ">>> d > The value is ".$tmp_d." <br>";
												//echo "--------------------------------------------------------------------- <br>";										
												?>
															<script>														
																document.getElementById("myDiv").style.display 		= "block";
																document.getElementById("myDiv_bar").style.display 	= "block";
																document.getElementById("myDiv_bar").style.width 	= "<?=$tmp_c;?>";
																document.getElementById("percent").innerHTML 		= "<font color='#FFFFFF'><?=$tmp_d;?>%</font>";
																//alert('You have unread messages \n Please check them by clicking the Notice Button');
																</script>

 

	<script>														
		document.getElementById("myDiv").style.display 		= "none";
		document.getElementById("myDiv_bar").style.display 	= "none";
		//alert('You have unread messages \n Please check them by clicking the Notice Button');
		</script>

[the shig]

hi,

 

I've used two ajax calls for the progress bar. Modified the names of scripts for your example

 

Number 1) this calls the php emailer script and then calls the second ajax function

 

Number 2) this calls the php counter script, and if the percentage done isn't yet 100, recursively calls itself using setTimeout().

 

basically, the emailer script whirrs away sending emails. Each time an email is sent, the script updates a database table.

 

the database table is something like

id

total

done

        ....

 

When updating, it sets the done column to whatever stage the emails are at.

 

the counter script connects to and uses the data from this table to compute the total sent and the percentage.

it then outputs these totals e.g. echo $done.'|'.$percentage;

 

the output from the counter script is what triggers the readyState = 4 in the second javascript function.

 

then the output can be assigned to two variables

var output = ajax.responseText;
var bits = output.split('|');
var done = bits[0];
var percentage = bits[1]

 

Some html that looks like this is needed.

<span id="done">0</span> / 5000 (<span id="percentage">0</span>%)

 

Then change the HTML

document.getElementById("done").innerHTML = done;
document.getElementById("perentage").innerHTML = percentage;

 

because this second ajax function is recursive, with the next ajax call and response the new values of done and percentage will be used.

 

If you need prototype code for this I'm happy to post it.

 

Hope this helps.

 

 

 

[therealwesfoster]

hi,

 

I've used two ajax calls for the progress bar. Modified the names of scripts for your example

 

Number 1) this calls the php emailer script and then calls the second ajax function

 

Number 2) this calls the php counter script, and if the percentage done isn't yet 100, recursively calls itself using setTimeout().

 

basically, the emailer script whirrs away sending emails. Each time an email is sent, the script updates a database table.

 

the database table is something like

id

total

done

        ....

 

When updating, it sets the done column to whatever stage the emails are at.

 

the counter script connects to and uses the data from this table to compute the total sent and the percentage.

it then outputs these totals e.g. echo $done.'|'.$percentage;

 

the output from the counter script is what triggers the readyState = 4 in the second javascript function.

 

then the output can be assigned to two variables

var output = ajax.responseText;
var bits = output.split('|');
var done = bits[0];
var percentage = bits[1]

 

Some html that looks like this is needed.

<span id="done">0</span> / 5000 (<span id="percentage">0</span>%)

 

Then change the HTML

document.getElementById("done").innerHTML = done;
document.getElementById("perentage").innerHTML = percentage;

 

because this second ajax function is recursive, with the next ajax call and response the new values of done and percentage will be used.

 

If you need prototype code for this I'm happy to post it.

 

Hope this helps.

 

 

 

 

 

You're the man! That gave me a brand new look at it. I'll put one together and let you know if I have any problems

 

Thanks,

Wes

[therealwesfoster]

http://vgbb.net/progress

 

There is my progress bar It doesn't really do anything, all it is doing is running a FOR loop and sleeping() in each one to make it not go super fast. But it works

 

Thanks everyone