Can someone please explain what this code means?

PHP
1

The code below I got from j14.com and I want to learn how they do the image bars on the polls because I’m trying to make polls for my site. Can someone please explain in really plain English for someone who doesn’t know much about php (I have a little bit of programming experience, but don’t assume I know anything!). Explain it line by line so I can really understand what all of the code does. If I could understand it that would really help me.

<ol class=“results”>
<li>
<h3>teen mom</h3>
<div class=“result”>
<div class=“bar”><div class=“percentage” style=“width: 100%”></div></div>
<div class=“numbers”>100% (1)</div>
<div style=“clear: both”></div>
</div>
</li>
<li>
<h3>jersey shore</h3>
<div class=“result”>
<div class=“bar”><div class=“percentage” style=“width: 0%”></div></div>
<div class=“numbers”>0% (0)</div>
<div style=“clear: both”></div>
</div>
</li>
<li>
<h3>real world new orlamds</h3>
<div class=“result”>
<div class=“bar”><div class=“percentage” style=“width: 0%”></div></div>
<div class=“numbers”>0% (0)</div>
<div style=“clear: both”></div>
</div>
</li>
</ol>

2

You are correct there Michael so I retract the earlier statement (it’s not illegal syntax but its certainly unnecessary - I’ve never had to resort to DIV’s within a LI), however I still maintain that the code is seriously ugly and poorly constructed on the basis that it’s clearly having divitis (using DIV elements here, there and everywhere) employed to stuff stylistic hooks into the content. As for the semantic usefulness of the DIV element, I disagree that it’s entirely useless, microformats and well formed ID and CLASS naming schemes can give inherent (granted less strong, but still useful) semantically relevant information as to the content. Having a DIV using the convention of having an ID called “header” for example is as semantic IMO as a division as <header> in HTML5. :slight_smile:

3

HTML 4 isn’t semantically useful to begin with. DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, DIV, etc…

Hardly semantic… header, footer, nav, menu, sidebar, et al from HTML 5 can’t get here soon enough.

4

This was done with php. The php generated the HTML/CSS that was sent to the browser to display the bars. To recap:

$values = array();
$values['sunday'] = 345;
$values['monday'] = 231;
$values['tuesday'] = 115;
$values['wednesday'] = 209;
$values['thursday'] = 333;
$values['friday'] = 456;
$values['saturday'] = 311;

creates and populates the values array. In the real code these values would be generated by a poll and stored in a database but that is beyond this tutorial.

$html = <<<HTMLHTML
<!DOCTYPE html>
<html lang="en">
<head>

<!-- snip -->

</body>
</html>
HTMLHTML;

is a php variable in HEREDOC syntax that contains all the HTML and CSS that will display the results

http://php.net/manual/en/language.types.string.php

In the $html variable there are values inserted from the $values array. Look for this code:

div.sunday {
    [COLOR="Red"]width:{$values['sunday']}px;[/COLOR]
}

this is inserting the “sunday” value into the width of the Sunday bar. That happens for all seven days of the week.

And last,

echo $html;

sends the completed code to the browser.

For the fun of it, I added vertical bars to the demo:

http://cardumen.com/tools/bars.php

5

Style of code arguments are matters of taste. In the C family there’s the classing brace war :slight_smile:


// Should I do it this way?
function Foo {
     //statements
}

// Or this way?
function Bar
{
     // statements
}

## And why does PHP support Perl
## comments in addition to C style anyway??

I personally find HEREDOC’s abhorent. There are people here that hate the appearance of PHP short tags.

I think everyone hates Smarty by now though.

Anyway, the important thing is that whatever convention a programmer uses they should be consistent with it. Doubly true in CSS where the flexibility of the standard allows many, many ways to accomplish the same appearance. That consistency allows the next programmer or designer to get a handle on your work to make whatever changes the client wants without too much of a headache.

As far as rules in general go - I feel it is very important to know them thoroughly, but also know their history and why they are there. Then you’ll know when to break them.

Example for the floor in general that I’m sure Alex is familiar with – IE 6 and 7 do not support inline-block. However, a quirk of their engine is that you can get inline-block behavior by styling an element that is supposed to be block by default as ‘inline’. This isn’t correct by CSS 2 standard, but many things aren’t with those browsers.

Microsoft’s prioprietary <!–if> tags aren’t standard, but they provide a way to safely isolate IE 6 and 7 styling behaviors in a world where those two browsers are the only major exceptions left (unless you’ve dove into the CSS 3 pool ).

But neither of these examples is the same as say, doing a website with layout tables. That’s an example of not knowing the rules and stubbornly refusing not to learn them.

6

Can you explain the code you wrote or how to do this with php?

7

I understand the array and the line that starts with the word title but nothing else when I’m trying to understand the php version. How is it possible that you don’t need any html? Remember, I know just about nothing about php except the little bit I"ve learned from PHP and MySQL for dummies.

8

So there’s no way to look at the php used for this? I’ve started learning a little about php but I really want to do the bar graph for my polls and I think that has to do with php and I have no clue how to do that, so if someone can expain that and not the code I’ve copied that would help just as much.

9

See section 12.5 on the W3C CSS spec: http://www.w3.org/TR/CSS2/generate.html

An element with ‘display: list-item’ generates a principal box for the element’s content and an optional marker box as a visual indication that the element is a list item.

(emphasis mine)

Then see the W3C’s guidelines on principal boxes:

Block-level elements (except for display ‘table’ elements, which are described in a later chapter) generate a principal block box that contains either only block boxes or only inline boxes.

10

Can you explain what that means so I know what I’m doing?

Also, can anyone tell me what the syntax for doing a function to an array is if it’s possible or do I need to create a new thread for anyone to answer this?

11

And here it is complete. All you got to do is figure out how to populate the
$values array

<?php

$values = array();
$values['sunday'] = 345;
$values['monday'] = 231;
$values['tuesday'] = 115;
$values['wednesday'] = 209;
$values['thursday'] = 333;
$values['friday'] = 456;
$values['saturday'] = 311;

$html = <<<HTMLHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Bar Charts Tutorial by captainccs</title>
<style type="text/css">
div.bar {
    height:20px;
    background-color:blue;
}
div.sunday {
    width:{$values['sunday']}px;
}
div.monday {
    width:{$values['monday']}px;
}
div.tuesday {
    width:{$values['tuesday']}px;
}
div.wednesday {
    width:{$values['wednesday']}px;
}
div.thursday {
    width:{$values['thursday']}px;
}
div.friday {
    width:{$values['friday']}px;
}
div.saturday {
    width:{$values['saturday']}px;
}
table {
    border:2px solid gray;
    width:600px;
}
</style>
</head>
<body>
<p>Bar Charts Tutorial by captainccs</p>
<table>
<tr>
<td style="width:100px;">Sunday</td>
<td><div class="sunday bar"></div></td>
</tr>
<tr>
<td>Monday</td>
<td><div class="monday bar"></div></td>
</tr>
<tr>
<td>Tuesday</td>
<td><div class="tuesday bar"></div></td>
</tr>
<tr>
<td>Wednesday</td>
<td><div class="wednesday bar"></div></td>
</tr>
<tr>
<td>Thursday</td>
<td><div class="thursday bar"></div></td>
</tr>
<tr>
<td>Friday</td>
<td><div class="friday bar"></div></td>
</tr>
<tr>
<td>Saturday</td>
<td><div class="saturday bar"></div></td>
</tr>
</table>
</body>
</html>
HTMLHTML;

echo $html;

?>

Enjoy!

12

Polarbear:

That tutorial looks awful complicated. Here is a simpler one I am building.

First you have to figure out how the display is going to look. Here is one way entirely in HTML/CSS

<?php

$html = <<<HTMLHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Bar Charts Tutorial by captainccs</title>
<style type="text/css">
div.bar {
    height:20px;
    background-color:blue;
}
div.sunday {
    width:100px;
}
div.monday {
    width:120px;
}
div.tuesday {
    width:80px;
}
div.wednesday {
    width:200px;
}
div.thursday {
    width:150px;
}
div.friday {
    width:10px;
}
div.saturday {
    width:70px;
}
table {
    border:2px solid gray;
    width:600px;
}
</style>
</head>
<body>
<p>Bar Charts Tutorial by captainccs</p>
<table>
<tr>
<td style="width:100px;">Sunday</td>
<td><div class="sunday bar"></div></td>
</tr>
<tr>
<td>Monday</td>
<td><div class="monday bar"></div></td>
</tr>
<tr>
<td>Tuesday</td>
<td><div class="tuesday bar"></div></td>
</tr>
<tr>
<td>Wednesday</td>
<td><div class="wednesday bar"></div></td>
</tr>
<tr>
<td>Thursday</td>
<td><div class="thursday bar"></div></td>
</tr>
<tr>
<td>Friday</td>
<td><div class="friday bar"></div></td>
</tr>
<tr>
<td>Saturday</td>
<td><div class="saturday bar"></div></td>
</tr>
</table>
</body>
</html>
HTMLHTML;

echo $html;

?>

Next you need to populate the CSS with real values.

To be continued…

13

Actually what you need is the css file to know what is going on. Check the source and see if you can see the stylesheet. My guess is that the image is included there.

14

Polarbear:

The bar chart displayed by a browser is the result of the interaction between the various “things.” The code you posted is the HTML/CSS that actually displays the bar graph. You need either javascript (client side) or php (server side) to generate the “width” value for your browser to display. As mentioned by another poster, you need to understand the basics of php before jumping into a php project.

So there’s no way to look at the php used for this?

php executes server side and you never get to see the code, only the results, unless the author wants to show you the code. Look for tutorials with Google. Try Googling “php bar chart tutorial”

http://www.google.com/search?num=20&hl=en&newwindow=1&client=safari&rls=en&&sa=X&ei=Ta5NTJmJIYL78Abxr_Qy&ved=0CA8QBSgA&q=php+bar+chart+tutorial&spell=1

15

That code is HTML, not php.

16

The core of this code is:

<div class="percentage" style="width: 100%">

Either javascript or AJAX is used to change the width creating the bars.

17

Hi Polarbear4646,

Welcome to the sitepoint forums!

One thing we have to say that no one here can give you such line by line descriptions for such simple HTML code. I think you need to take a book on HTML and CSS then read them line by line to understand what the HTML tags do for you and how the CSS is implemented to manage the webpage look.

There is no such recommendation at least from my side because if you search in google you can have lots of results for you to study about HTML and CSS.

Good luck!

18

What don’t you understand? The HTML, the CSS or the php?

The HTML displays the output, the table with the charts, in your browser.

The CSS formats the output. Specifically, the classes Sunday trough Saturday specify the width of the respective bars

php populates these classes with the values in the array $values.

Try it out:

http://cardumen.com/tools/bars.php

19

I like it for long strings such as HTML needed to build emails. Why break it up into a gazzillion pieces when you can have the whole thing in one piece? :cool:

20

http://www.qualitycodes.com/tutorial.php?articleid=20&title=How-to-create-bar-graph-in-PHP-with-dynamic-scaling

captianccs:I found this site at the top of the google search you linked me to. It’s pretty helpful, but I don’t get it entirely.

Can someone tell me how I would go about trying to do this with php? I’m trying to have a bar graph that represents the poll results.