Views and PHP: Part II

17 08 2010

To illustrate the power of views, I’m going to have PHP create a report using the data stored in test4ah. The code will dynamically create a view v which we will then use with several queries to extract different pieces of data. Also, we’re going to work with PDO because it affords a high degree of security. And, we’ll also touch upon how to fail gracefully. Also, I’m going to try as much as is reasonable to adhere to an MVC deisgn approach, both on the front- and back- end.

What we want to come up with is a revnue report similar to the following:

<html>
<head><title>Income Statement</title>
<link rel="stylesheet" type="text/css" href="./pdoView.css" />
</head>

<body>

<H1 class="center">VT Revenue Statement</h1>
<table  class="med">
<tr><th class="left">Company</th><th class="right">Total</th></tr>
<tr>
     <td width="50%">3M ( <a id="details" href="#"><span class="details">Detail</span></a> )</td>

	 <td class="right">$  &nbsp;&nbsp;560.66</td>
</tr>
</table>
<table id="t">
<tr class="left"><th width="40%">Date</th><th>Invoice</th><th class="right">Amount</th></tr>
<tr>
	<td wudth="40%">2002-12-14</td>
	<td>123A</td>

	<td class="right">460.33</td>
</tr>
<tr>
	<td wudth="40%">2007-02-28</td>
	<td>123ABC</td>
	<td class="right">100.33</td>
</tr>
	
<tr><td colspan="3"><button id="mybut"> Close </button></td></tr>

</table>

<table  class="med">
	
<tr>
	<td width="50%">Subsidiaries</td>
	<td class="right">1038.72</td>
</tr>
</table>
<table  class="med">
       <tr><th class="right">Grand Total <span class="gt">$ 1599.38</span></th></tr>

 </table>
<script src="./pdoView.js"></script>
</body>
</html>

The CSS file’s contents are as follows:

body {
margin-left:auto;
width:55%;
margin-right:auto;
}
th.left {
  text-align:left;
}
td.right, th.right {
  text-align:right;
}
.details {
font:70% Arial,Helvetica;font-variant:small-caps;
}
h1.center {
text-align:center
}
table.med {
width:35em
}
td.right {
text-align:right
}
#t {
margin-left:2em;border:1px solid black;background:#eeeeee;width:28em;display:none;
}
tr.left {
text-align:left;
}
#mybut {
margin:1em;margin-left:86%;
}
.gt {
font-weight:500;
text-decoration:underline;
}

Note how I use the font-variant:small-caps in the above CSS file to style with small capital letters. There is an interesting discussion at http://stackoverflow.com/questions/2438122/font-variantsmall-caps-vs-text-transformcapitalize that I recommend.

and the javascript included file contains:

function ShowMe()
{
document.getElementById('t').style.display='table'; 
}

function HideMe()
{
document.getElementById('t').style.display='none';
}
document.getElementById('mybut').onclick=HideMe;
document.getElementById('details').onclick=ShowMe;

The javascript file is noteworthy because among other reasons it makes use of CSS2. Remember when hiding or displaying an element was as simple as providing a value like ‘none’ or ‘block’? Well, with CSS2 there are other options. You need to give the style of display table if you want the table to appear and in its correct proportions. Initially, I used a value of ‘block’ with terrible results in FireFox. I did find a work-around by following with a display value of the empty string (“”). Then I read online that FireFox does not have a bug and that the detail table would display correctly provided display has the CSS2 value of ‘table’. See the discussion at http://www.velocityreviews.com/forums/t160487-firefox-and-style-display-block-on-table-row.html

Now we are ready to move on to Part III and actually see some PHP code that fetches data using a view.

This work is licensed under a Creative Commons License
.

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: