<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PHP Made Simple &#187; level 2</title>
	<atom:link href="http://www.phpmadesimple.info/tag/level-2/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.phpmadesimple.info</link>
	<description>To support simplicity, possiibility and cost effective of PHP</description>
	<lastBuildDate>Tue, 03 Aug 2010 14:13:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Building a Data Access layer using PDO</title>
		<link>http://www.phpmadesimple.info/2008/02/10/building-a-data-access-layer-using-pdo/</link>
		<comments>http://www.phpmadesimple.info/2008/02/10/building-a-data-access-layer-using-pdo/#comments</comments>
		<pubDate>Sat, 09 Feb 2008 18:40:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[level 2]]></category>

		<guid isPermaLink="false">http://artemis.com.vn/blogvui/index.php/2008/02/10/building-a-data-access-layer-using-pdo/</guid>
		<description><![CDATA[Every time you start building a complete website with some modules and functionalities, you start thinking about the &#8220;structure&#8221; of your system or in other word, the framework you use  through  the system. For a PHP website, MVC is the most widely use framework or programming model where M is the Model which [...]]]></description>
			<content:encoded><![CDATA[<p>Every time you start building a complete website with some modules and functionalities, you start thinking about the &#8220;structure&#8221; of your system or in other word, the framework you use  through  the system. For a PHP website, MVC is the most widely use framework or programming model where M is the Model which handles the logic of the website, V is view which presents information to your users and C is controller which collaborate Views and Models together. However, the MVC itself does not include the data access layer which actually does the data manipulation work within your system and without data, your system seems to be unreal.</p>
<p>PDO is a very useful and widely use PEAR library for data manipulation. <strong>It can work with most kind of DBMS</strong> (DataBase Management System) such as MySQL (of course), Microsoft SQL, etc. PDO stands for PHP Data Object, a powerful and fast data access method for developers who need to <strong>work with different types of DBMS, handle stored procedures, process transactions or passing params to queries.</strong></p>
<p><span id="more-26"></span></p>
<p>So let begin with a Database class using PDO. <strong>This class should be simple to use, aware about your &#8216;entity&#8217; object, prevent you from being attacked by injection and the most important, bring use a methodology of writing clean, reusable and testable SQL queries</strong>.</p>
<p>Sounds like buzzwords but in fact, PDO does most of those things and our work is to just making a little more systematic in the way we use PDO functions. So, the first step is to declare a PDO object in our class:</p>
<pre class="brush: php">

class Database
{
protected $pdo;

function __construct($host, $db, $user, $password)
{
$this-&gt;pdo = new PDO(&quot;mysql:host=$host;dbname=$db&quot;, $user, $password);
}
}
</pre>
<p>The code above also shows you how to connect to an MySQL database with PDO. We as the consumer to pass basic informations to the constructor of the Database class so we can create a connection to the DB using our $pdo object.</p>
<p>The next key work is we want to pass parameter to our object to execute a query. This way, we can write only one query to use in different places and make sure that once the query runs properly, unexpected result can be caused only by bad parameters.</p>
<pre class="brush: php">

protected function parseSql($sqlElement, $params)
{
$sql = $this-&gt;pdo-&gt;prepare((string)$sqlElement);

if (!is_array($params))
$params = array($params);
try
{
for ($i = 1; $i &lt; = count($params); $i++)
{
//Replace null param by empty string for wellform SQL query
if ($params[$i-1] == null)
$params[$i-1] = &#039;&#039;;
$sql-&gt;bindValue($i, $params[$i-1]);
}
return $sql;
}
catch(Exception $ex)
{
echo &quot;Error while parsing SQL query.&lt;br /&gt;&quot;;
var_dump($sqlElement); echo &quot;&lt;br /&gt;&quot;;
var_dump($params); echo &quot;&lt;br /&gt;&quot;;
}
}</pre>
<p>From the code above, first of all you can notice the $sqlElement. It is actually not a string of SQL query but a SimpleXML text element  containing the SQL query and some other information our framework needs. We will talk about those XML files later but at this moment, we have to convert $sqlElement into string before use.</p>
<p>In order to pass params to a marked SQL query using PDO, you go through two steps. First, you ask PDO to prepare the query using the <strong>prepare() </strong>method and then use the prepared query to bind marked parameters with values using the <strong>bindValue()</strong> method.</p>
<p><strong>The PDO library provide you two binding functions, bindParam() and bindValue()</strong>. They are similar in binding mechanism but different in processing the result query. Both bind a PHP variable to a question mark or named param in a query and you can specify name, data type and also the length of the parameter. However, <strong>the bindParam hold a referent to the PHP variable you bind and the result query is evaluated only at runtime. bindValue() result an evaluated query immeidately</strong>.</p>
<pre class="brush: php">

protected function execute($sqlId, $params, &amp;$sql)
{
$sql = $this-&gt;parseSql($this-&gt;getSqlElement($sqlId), $params);
try
{
$sql-&gt;execute();
return true;
}
catch(Exception $ex)
{
echo &quot;Error while executing $sqlId &lt;br /&gt;$sql-&gt;errorInfo()&quot;;
}

}

protected function getSqlElement($sqlId)
{
$tmp = explode(&#039;.&#039;, $sqlId);
$sqlFile = SitePath . &#039;data&#039; . DIRSEP . $tmp[0] . &#039;.xml&#039;;

$root = simplexml_load_file($sqlFile);
foreach($root-&gt;sql as $sql)
{
if ($sql[&#039;Id&#039;] == $tmp[1])
return $sql;
}
return null;
}</pre>
<p>Back to our class, what we need now is where to get the SQL queries and how to execute one query after having it parsed with params. You may implement the SQL query resource in many different ways but for me, I prefer to put all SQL queries into XML files. That way, I <strong>never write SQL code in my PHP files</strong> meaning the code is very clean and easy to debug. I can also write and test my query first in a MySQL query client tool and the copy the tested code to my XML file, remove testing values with question marks so that I can pass to them the parameters I want from PHP code.</p>
<p>Writing SQL queries this way is a similar way of writing one-query-procedure. <strong>It is not only very reusable but also make the teamwork of many developers easy and help you deploy the system from testing environment to production environment quickly</strong>. Just forget about finding all PHP files where you have just change your SQL queries inside and copy them to another place.</p>
<p>Enough talk. Back to the XML and the getSqlElement function in our class. Our coding convention (which is very important in a PHP framework) is having the sqlId of two parts separated by a period (.). First part is the XML filename and the second part is the &#8216;id&#8217; of the SQL element in that file. <strong>We don&#8217;t want to put all queries into just one file because many developers can work on that file at the same time. Also we don&#8217;t want the getSqlElement function to look through a long text file just to find out a short SQL query to run</strong>. For your information, PDO cannot run as fast as pure PHP data manipulation function. It as rate at the second position, with the great Database library ADOdb.</p>
<p>Now, once we have the query from XML file, pass parameters to it, the execution is simple by calling <strong>execute()</strong> function in PDO. After execute, the $sql variable holds result data that you can fetch is in many different way.</p>
<p>I don&#8217;t like processing data rows and columns as array of array so I use PDO fetch object style. It&#8217;s easier for you whenever you pull data form the DB, they are in form of a &#8216;Model&#8217; object (in an MVC framework) and ready for you to call some logic function. That&#8217;s why we don&#8217;t process an array of columns just to create an object to continue our programming flow.</p>
<p>As you can see in the code below, except for querying data for just one column of the first returned row, we all fetch data as object or list of object. If we pass the class name of the object to the queryXXX function, it try to create an object of the desired class for us, otherwis it create a standard PHP object.</p>
<pre class="brush: php">

public function queryForColumn($sqlId, $params, $columnIndex, $defaultValue = null)
{
$sql = null;
$ret = $this-&gt;execute($sqlId, $params, $sql);
if ($ret === true)
return $sql-&gt;fetchColumn($columnIndex);
else
return $defaultValue;
}

public function queryForObject($sqlId, $params, $className = null, $defaultValue = null)
{
$sql = null;
$ret = $this-&gt;execute($sqlId, $params, $sql);
if ($ret === true)
{
if ($className != null)
$sql-&gt;setFetchMode(PDO::FETCH_CLASS, $className);
else
$sql-&gt;setFetchMode(PDO::FETCH_OBJ);

return $sql-&gt;fetch();
}
else
return $defaultValue;
}

public function queryForList($sqlId, $params, $className = null, $defaultValue = null)
{
$sql = null;
$ret = $this-&gt;execute($sqlId, $params, $sql);
if ($ret === true)
{
if ($className != null)
$sql-&gt;setFetchMode(PDO::FETCH_CLASS, $className);
else
$sql-&gt;setFetchMode(PDO::FETCH_OBJ);

return $sql-&gt;fetchAll();
}
else
return $defaultValue;
}</pre>
<p>I do like fetching data into named object as PHP5 provides magic getter/setter methods that make my class become more reusable from project to project. <strong>The idea is a map to translate columns in Database into properties in PHP code. That way, I never break my PHP coding standard no matter what the DB naming standard is. </strong> Another roughly example is in some websites you use email as the useranme while in others you really have an username column in the database beside the email column. In the first cases, I just map email to the Username property so my code to handle user related logic does not change else where.</p>
<p>Here is how to create an EntityBase class with magic setter function.</p>
<pre class="brush: php">

class EntityBase
{
/**
* @desc Column map for consistent entity property
*/
protected $columnMap = array();

public function __set($column, $value)
{
$property = $this-&gt;columnMap[$column];
$setter = &quot;set$property&quot;;
if (!method_exists($this, $setter))
$this-&gt;$property = $value;
else
$this-&gt;$setter($value);
}
}</pre>
<p>Last thing, we don&#8217;t want to call a function like queryForXXX to execute an action query like Insert/Update/Delete data. So we just add a simpe query() funtion for this task.</p>
<pre class="brush: php">

public function query($sqlId, $params)
{
$sql = null;
return $this-&gt;execute($sqlId, $params, $sql);
}
</pre>
<p>Now, we have an useful Database class and to use it, just create an users.xml file of queries like what I have for my simple demo blog site:</p>
<pre class="brush: xml">

&lt; ?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;queries&gt;
&lt;sql Id=&quot;getUserById&quot;&gt;
Select *
From users
Where Id = ?
&lt;/sql&gt;

&lt;sql Id=&quot;validateUser&quot;&gt;
Select Count(Id)
From users
Where Email = ? AND Password = ?
&lt;/sql&gt;

&lt;sql Id=&quot;getIdByName&quot;&gt;
Select Id
From users
Where email = ?
&lt;/sql&gt;
&lt;/queries&gt;</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.phpmadesimple.info/2008/02/10/building-a-data-access-layer-using-pdo/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Learn CSS by examples</title>
		<link>http://www.phpmadesimple.info/2008/01/20/learn-css-by-examples/</link>
		<comments>http://www.phpmadesimple.info/2008/01/20/learn-css-by-examples/#comments</comments>
		<pubDate>Sun, 20 Jan 2008 02:17:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[cheatsheet]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[level 2]]></category>

		<guid isPermaLink="false">http://artemis.com.vn/blogvui/?p=24</guid>
		<description><![CDATA[Most Useful CSS Properties with Examples
CSS cheatsheet



 Basic Concepts



Grouping
One or more selectors separated by commas. Grouping allows you to assign styles to multiple elements (selectors). All four heading tags below will be purple.
H1, H2, H3, H5 {color: purple;}



Contextual selectors
One or more selectors delimited by spaces. The example rule indicates the bold markup will be red [...]]]></description>
			<content:encoded><![CDATA[<p>Most Useful CSS Properties with Examples</p>
<p><a href="http://www.ilovejackdaniels.com/css_cheat_sheet.png" onclick="window.open('http://www.ilovejackdaniels.com/css_cheat_sheet.png','','scrollbars=yes,resizable=yes,dependent=yes,width=800,left='+(screen.availWidth/2-400)+',top='+(screen.availHeight/2-0)+'');return false;" target="_blank">CSS cheatsheet</a><span id="more-24"></span></p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3> Basic Concepts</h3>
</td>
</tr>
<tr>
<td>Grouping</td>
<td>One or more selectors separated by commas. Grouping allows you to assign styles to multiple elements (selectors). All four heading tags below will be purple.</p>
<pre>H1, H2, H3, H5 {color: purple;}</pre>
</td>
</tr>
<tr>
<td>Contextual selectors</td>
<td>One or more selectors delimited by spaces. The example rule indicates the bold markup will be red only while enclosed in H1 tags.</p>
<pre>H1 B {color: red;}

     &lt;H1&gt;This is &lt;B&gt;<span class="example">red</span>&lt;/B&gt;.&lt;/H1&gt;

     &lt;P&gt;This is &lt;B&gt;not&lt;/B&gt;.&lt;/P&gt;</pre>
</td>
</tr>
<tr>
<td>Class<br />
(tag attribute)</td>
<td>Class selectors may be used as an attribute to a tag. A class selector is a string preceded by a period. Do not use the period when referencing the class. Do not begin a class name with a number, although IE4/5 let you get away with it.</p>
<pre>.example {color: red;}

     &lt;P class="example"&gt;<span class="example">This is an example in red.</span>&lt;/P&gt;</pre>
</td>
</tr>
<tr>
<td>ID<br />
(tag attribute)</td>
<td>ID selectors may be used as an attribute to a tag. An ID selector is a string preceded by a hash mark (#), and is called using the ID= attribute. The hash mark does not appear in the value of ID. Works like the class selector except that the ID can be used only once in the document.</p>
<pre>#i5 {color: red;}

     &lt;P ID="i5"&gt;<span class="example">This is text with an ID of 'i5'.</span>&lt;/P&gt;</pre>
</td>
</tr>
<tr>
<td>Comments</td>
<td>Good idea to leave comments in the style sheet. Affects anything enclosed, even across multiple lines.</p>
<pre>/* This is a comment. */</pre>
</td>
</tr>
<tr>
<td>DIV and SPAN tags</td>
<td>These two HTML tags were introduced to support style sheets. Think of them as empty tags which you can fill with styles.DIV is used for formatting structure, blocks of text.</p>
<pre>&lt;DIV style="color:green; font-weight:bold"&gt;&lt;H1&gt;<span style="font-weight: bold; color: green">This heading</span>&lt;/H1&gt;&lt;/DIV&gt;</pre>
<p>SPAN is used for inline formatting.</p>
<pre>&lt;P&gt;This is &lt;SPAN class="example"&gt;<span class="example">red text</span>&lt;/SPAN&gt; in a paragraph&lt;/P&gt;</pre>
</td>
</tr>
<tr>
<td>Shorthand syntax</td>
<td>Many properties can accept a shorthand syntax. Values are read from the top clockwise.</p>
<pre>Example:

DIV { padding: 5px 10% 0 10% }

is the same as:DIV { padding-top:5px; padding-right:10%;

      padding-bottom:0; padding-left:10% }</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Units</h3>
</td>
</tr>
<tr>
<td>Length Units</td>
<td>Units of measure take 2-letter abbreviations, with no space between number and unit.<br />
Units fall into three categories:</p>
<ul>
<li>Absolute: mm, cm, in, pt (point size), pc (pica)</li>
<li>Relative: em (defining point size of font), ex (x-height of font)</li>
<li>Device-dependent: px (pixel)</li>
</ul>
<pre>width: 50px;

margin-left: 2em;</pre>
</td>
</tr>
<tr>
<td>Percentage Units</td>
<td>Used by various properties to define size in relative terms. Values are calculated with regard to their context; in the example, the H2 element will be 75% of its default size.</p>
<pre>H2 {font-size: 75% }</pre>
</td>
</tr>
<tr>
<td>Keywords</td>
<td>CSS uses keywords as values for many properties.<br />
Examples are bolder, lighter, larger, x-large, xx-large, x-small.</td>
</tr>
<tr>
<td>Color Units</td>
<td>By hex number; by percentage; by name.</p>
<pre>color: #FF00FF;    /* note that this may be expressed as #F0F */

color: rgb(100%,0%,100%);

color: <span style="color: chocolate">chocolate</span></pre>
</td>
</tr>
<tr>
<td>URLs</td>
<td>Used by various properties to define the location of images. Important: Partial URLs are relative to the style sheet, not the HTML document!</p>
<pre>url(picture.gif)

url(http://www.pix.org/lib1/pic278.gif)

list-style-image: url(bullet3.gif)</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>The Cascade</h3>
</td>
</tr>
<tr>
<td>! important</td>
<td>Style declaration is declared important. Important declarations override all others, regardless of origin or specificity. In CSS2, user will have precedence over author.</p>
<pre>H1 {color: maroon ! important;}</pre>
</td>
</tr>
<tr>
<td>Inheritance</td>
<td>Formatting properties of any element are inherited from the element in which it is contained. CSS properties always have some value, even if not specified by the author. This can be used to minimize style markup but can be the source of unpleasant surprises since each browser may give slightly different initial values to properties.</td>
</tr>
<tr>
<td>Link External Style Sheet</td>
<td>The external style sheet is the means to control the look of many pages at once. Use the LINK tag in the HEAD of your page.Example: <span class="example">&lt;LINK REL=&#8221;STYLESHEET&#8221; TYPE=&#8221;text/css&#8221; href=&#8221;demo.css&#8221;&gt;</span></td>
</tr>
<tr>
<td>Cascading Order and Style Syntax</td>
<td>Precedence is from the most specific to the most general. The closer a style is to the element being styled, the more priority it has. The order from highest to lowest:</p>
<ol>
<li><strong>STYLE=&#8221;blah blah&#8221; inline attribute to a tag</strong><br />
Example: <span class="example">&lt;P STYLE=&#8221;color: red; font-family: &#8216;Times New Roman&#8217;, serif&#8221;&gt;inline&lt;/P&gt;</span><br />
Note the single quotes around the font name to avoid conflict with double quotes.</li>
<li><strong>&lt;STYLE&gt; tag in HEAD of document</strong><br />
Example:<br />
<span class="example">&lt;STYLE&gt;<br />
.title { font-family: &#8216;Snap ITC&#8217;, cursive;<br />
font-size: 120%;}<br />
&lt;/STYLE&gt;</span>The styles of the STYLE tag should be placed after any referenced external stylesheets.</li>
<li><strong>&lt;LINK&gt; to external style sheet in HEAD of document</strong><br />
Example: <span class="example">&lt;LINK REL=&#8221;stylesheet&#8221; TYPE=&#8221;text/css&#8221; href=&#8221;demo.css&#8221;&gt;</span></li>
<li><strong>Browser default styles</strong></li>
</ol>
</td>
</tr>
<tr>
<td>Media</td>
<td>Technically part of CSS-2, you can specify different styles for online display and print. A common use is to specify items not to appear on screen or not to print.</p>
<pre>&lt;STYLE media="print"&gt;      /* print version styles here */

.noprint {display: none;}  /* items with this class won't print */

&lt;/STYLE&gt;&lt;STYLE media="screen"&gt;     /* screen version styles go here */

.noshow {display:none;}    /* items with this class won't appear on screen */

&lt;/STYLE&gt;</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Font Properties</h3>
</td>
</tr>
<tr>
<td>font-family</td>
<td>Used to declare specific font to be used, or a generic font family in order of preference.<br />
The generic families are: serif, sans-serif, monospace, cursive and fantasy. They must not have quotes around them. Multiword font names should have quotes to avoid confusion.</p>
<pre>P {font-family: "Times New Roman", serif;}</pre>
</td>
</tr>
<tr>
<td>font-style</td>
<td>Selects between italic and normal.</p>
<pre>EM {font-style: italic;}</pre>
</td>
</tr>
<tr>
<td>font-variant</td>
<td>Currently has two values: small-caps and normal. Likely to acquire more values in the future.</p>
<pre>H3 {font-variant: small-caps;}</pre>
</td>
</tr>
<tr>
<td>font-weight</td>
<td>Values are: bold, normal, lighter, bolder and numeric values 100-900.</p>
<pre>B {font-weight: 700;}</pre>
</td>
</tr>
<tr>
<td>font-size</td>
<td>Sets the absolute size (pt, in, cm, px), relative size (em, ex), or percentage of normal size.<br />
Keywords: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller</p>
<pre>H2 {font-size: 200%;}

H3 {font-size: 36pt;}</pre>
</td>
</tr>
<tr>
<td>font</td>
<td>Shorthand property for the other font properties. The order of values is important, and is as follows:<br />
font {font-style font-variant font-weight font-size/line-height font-family;}. Any of these values may be omitted but order is important.</p>
<pre>P {font: bold 12pt/14pt Helvetica,sans-serif;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Color and Background Properties</h3>
</td>
</tr>
<tr>
<td>color</td>
<td>Sets the color of a given element. For text, this sets the text color; for other elements, such as HR, it sets the foreground color.</p>
<pre>H6 {color: <span style="color: green">green</span>;}</pre>
</td>
</tr>
<tr>
<td>background-color</td>
<td>Sets the background color of an element. Background extends to the edge of the element&#8217;s border. Initial value: transparent.</p>
<pre>{ background-color: #CCCC00 }</pre>
</td>
</tr>
<tr>
<td>background-image</td>
<td>Sets an image to be the background pattern. In conjunction with the other background properties, the image may tile or repeat in one direction only. Recommend using with background-color to allow for users who disable image loading.</p>
<pre>BODY {background-image: url(bg41.gif);}</pre>
</td>
</tr>
<tr>
<td>background-repeat</td>
<td>Sets the repeat style for a background image. Values are: repeat (tile), no-repeat, repeat-x (horizontal), repeat-y (vertical). Default: repeat.</p>
<pre>BODY { background-repeat: repeat-y }</pre>
</td>
</tr>
<tr>
<td>background-attachment</td>
<td>Defines whether or not the background image scrolls with the element. Values are: scroll and fixed.</p>
<pre>BODY {background-attachment: fixed;}</pre>
</td>
</tr>
<tr>
<td>background-position</td>
<td>Sets the starting position of the background color or image. If a color, the color fill continues from the set position. If an image, the first image is placed at the set position. Values: Position (x y) or (x% y%); top, center, bottom, left, right.</p>
<pre>BODY {background-position: top center;}</pre>
</td>
</tr>
<tr>
<td>background</td>
<td>Shorthand property for the other background properties. The values can be written in any order.</p>
<pre>BODY {background: white url(bg41.gif) fixed center;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Text Properties</h3>
</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>Sets the amount of white space between letters, which are defined as any displayed character .</p>
<pre>P {letter-spacing: 0.5em;}</pre>
</td>
</tr>
<tr>
<td>line-height</td>
<td>Sets the vertical distance between baselines in an element. Negative values are not permitted.</p>
<pre>P {line-height: 18pt;}

H2 {line-height: 200%;}</pre>
</td>
</tr>
<tr>
<td>text-decoration</td>
<td>Values are: none, underline, overline, line-through, blink . Combinations of the values are legal.</p>
<pre>U {text-decoration: underline;}

.old {text-decoration: line-through;}</pre>
</td>
</tr>
<tr>
<td>text-transform</td>
<td>Changes the case of the letters in the element, regardless of the original text. Values are: capitalize (capitalizes first letter of each word), uppercase, lowercase.</p>
<pre>H1 {text-transform: uppercase;}</pre>
</td>
</tr>
<tr>
<td>text-align</td>
<td>Sets the horizontal alignment of the text in an element. May only be applied to block-level elements.</p>
<pre>P {text-align: justify;}

H4 {text-align: center;}</pre>
</td>
</tr>
<tr>
<td>text-indent</td>
<td>Sets the indentation of the first line in an element. Most often used to create a tab effect for paragraphs. Only applies to block-level elements; negative values are permitted.</p>
<pre>P {text-indent: 5em;}

H2 {text-indent: -25px;}</pre>
</td>
</tr>
<tr>
<td>vertical-align</td>
<td>Determines the alignment of text within a line or within a table cell; Keywords: baseline; middle; sub; super; top; text-top; bottom; text-bottom.</p>
<pre>.super {vertical-align: super;}</pre>
</td>
</tr>
<tr>
<td>word-spacing</td>
<td>Sets the amount of white space between words, which are defined as strings of characters surrounded by white space.</p>
<pre>P {word-spacing: 0.5em;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>  CSS Puts Everything in a Box</h3>
</td>
</tr>
<tr>
<td>The Box Model</td>
<td>The most powerful way of thinking about style is to consider every element (&lt;P&gt;, &lt;H1&gt;,etc.) as a box. The dimensions of the box can be controlled to produce a very broad range of effects.If you think of a page as a box of boxes, this model forms the basis of positioning elements even to the pixel level.Note that as of IE6.0, that browser now follows the W3C definition for width, which should not include border and padding values.</p>
<p align="center"> <img src="http://home.tampabay.rr.com/bmerkey/images/cssbox16.gif" alt="Box Model (simplified)" border="0" height="263" width="376" /></p>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Box Properties</h3>
</td>
</tr>
<tr>
<td>margin-top</td>
<td>Sets the size of the top margin of an element. Negative values are permitted, but exercise caution. Negative margins not handled well by Netscape 4!</p>
<pre>UL {margin-top: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>margin-right</td>
<td>Sets the size of the right margin of an element. Negative values are permitted, but exercise caution.</p>
<pre>IMG {margin-right: 30px;}</pre>
</td>
</tr>
<tr>
<td>margin-bottom</td>
<td>Sets the size of the bottom margin of an element. Negative values are permitted, but exercise caution.</p>
<pre>UL {margin-bottom: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>margin-left</td>
<td>Sets the size of the left margin of an element. Negative values are permitted, but exercise caution.</p>
<pre>P {margin-left: 3em;}</pre>
</td>
</tr>
<tr>
<td>margin</td>
<td>Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution. Multiple values start from the top and go clockwise.</p>
<pre>H1 {margin: 2em;}

P {0% 5% 0% 5%;}</pre>
</td>
</tr>
<tr>
<td>padding-top</td>
<td>Sets the size of the top padding of an element, which will inherit the element&#8217;s background. Negative values are not permitted.</p>
<pre>UL {padding-top: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>padding-right</td>
<td>Sets the size of the right padding of an element, which will inherit the element&#8217;s background. Negative values are not permitted.</p>
<pre>IMG {padding-right: 30px;}</pre>
</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>Sets the size of the bottom padding of an element, which will inherit the element&#8217;s background. Negative values are not permitted.</p>
<pre>UL {padding-bottom: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>padding-left</td>
<td>Sets the size of the left padding of an element, which will inherit the element&#8217;s background. Negative values are not permitted.</p>
<pre>P {padding-left: 3em;}</pre>
</td>
</tr>
<tr>
<td>padding</td>
<td>Sets the size of the overall padding of an element, which will inherit the element&#8217;s background. Negative values are not permitted.</p>
<pre>H1 {padding: 2ex;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Box Properties (cont.)</h3>
</td>
</tr>
<tr>
<td>border-top-width</td>
<td>Sets the width of the top border of an element, which will inherit the element&#8217;s background, and may have a foreground of its own (see border-style). Negative values are not permitted.</p>
<pre>UL {border-top-width: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>border-right-width</td>
<td>Sets the width of the right border of an element, which will inherit the element&#8217;s background, and may have a foreground of its own (see border-style). Negative values are not permitted.</p>
<pre>IMG {border-right-width: 30px;}</pre>
</td>
</tr>
<tr>
<td>border-bottom-width</td>
<td>Sets the width of the bottom border of an element, which will inherit the element&#8217;s background, and may have a foreground of its own (see border-style). Negative values are not permitted.</p>
<pre>UL {border-bottom-width: 0.5in;}</pre>
</td>
</tr>
<tr>
<td>border-left-width</td>
<td>Sets the width of the left border of an element, which will inherit the element&#8217;s background, and may have a foreground of its own (see border-style). Negative values are not permitted.</p>
<pre>P {border-left-width: 3em;}</pre>
</td>
</tr>
<tr>
<td>border-width</td>
<td>Sets the width of the overall border of an element, which will inherit the element&#8217;s background, and may have a foreground of its own (see border-style). Negative values are not permitted.</p>
<pre>H1 {border-width: 2ex;}</pre>
</td>
</tr>
<tr>
<td>border-color</td>
<td>Sets the color of the border of an element. In the example, top and bottom borders are silver, left and right are black. All 4 borders may be separately set.</p>
<pre>H1 {border-color: silver black;}</pre>
</td>
</tr>
<tr>
<td>border-style</td>
<td>Sets the style of the overall border of an element. Values: dashed; dotted; double; groove; inset; outset; ridge; solid; none. Default: none (border not displayed).</p>
<pre>H1 {border-style: solid; border-color: purple;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Box Properties (cont.)</h3>
</td>
</tr>
<tr>
<td>border-top</td>
<td>Shorthand property which defines the width, color, and style of the top border of an element.</p>
<pre>UL {border-top: 0.5in solid black;}</pre>
</td>
</tr>
<tr>
<td>border-right</td>
<td>Shorthand property which defines the width, color, and style of the right border of an element.</p>
<pre>IMG {border-right: 30px dotted blue;}</pre>
</td>
</tr>
<tr>
<td>border-bottom</td>
<td>Shorthand property which defines the width, color, and style of the bottom border of an element.</p>
<pre>UL {border-bottom: 0.5in grooved green;}</pre>
</td>
</tr>
<tr>
<td>border-left</td>
<td>Shorthand property which defines the width, color, and style of the left border of an element.</p>
<pre>P {border-left: 3em solid gray;}</pre>
</td>
</tr>
<tr>
<td>border</td>
<td>Shorthand property which defines the width, color, and style of the overall border of an element.</p>
<pre>H1 {border: 2px dashed tan;}</pre>
</td>
</tr>
<tr>
<td>width</td>
<td>Used to set the width of an element. Can be used on any block-level or replaced element. Negative values are not permitted.</p>
<pre>TABLE {width: 80%;}</pre>
</td>
</tr>
<tr>
<td>height</td>
<td>Used to set the height of an element. Can be used on any block-level or replaced element, within limits. Negative values are not permitted.</p>
<pre>IMG.icon {height: 50px;}</pre>
</td>
</tr>
<tr>
<td>float</td>
<td>Causes the element to float to one side and other text to wrap around it. Use it for non-positioned block elements. Values: left; right; none.</p>
<pre>IMG {float: left;}</pre>
</td>
</tr>
<tr>
<td>clear</td>
<td>Specifies whether the element can have floating elements around it. Causes the element to be positioned below any floating elements on the side specified. Values: both; left; right; none. Default is none.</p>
<pre>H1 {clear: both;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Classification Properties</h3>
</td>
</tr>
<tr>
<td>display</td>
<td>Used to override default formatting for HTML elements. Values: block; inline; list-item; none. Default is block. Note that space is not reserved for the element when display = none. (See Positioning Property: visibility.)</p>
<pre>.hide {display: none;}</pre>
</td>
</tr>
<tr>
<td>white-space</td>
<td>Defines how whitespace within the element is treated. Values: normal, pre, nowrap.</p>
<pre>TD {white-space: nowrap;}

TT {white-space: pre;}</pre>
</td>
</tr>
<tr>
<td>list-style-type</td>
<td>Used to declare the type of bullet or numbering to be used in an unordered or ordered list. Values: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.</p>
<pre>UL {list-style-type: square;}

OL {list-style-type: lower-roman;}</pre>
</td>
</tr>
<tr>
<td>list-style-image</td>
<td>Used to declare an image to be used as the bullet in an unordered or ordered list. Applies to elements with a display value of list-item.</p>
<pre>UL {list-style-image: url(bullet3.gif);}</pre>
</td>
</tr>
<tr>
<td>list-style-position</td>
<td>Used to declare the position of the bullet or number in a list with respect to the content of the list item. Values: inside; outside. Default: outside.</p>
<pre>LI {list-style-position: inside;}</pre>
</td>
</tr>
<tr>
<td>list-style</td>
<td>Shorthand property condensing all other list-style properties. Applies to all elements with a display value of list-item.</p>
<pre>UL {list-style: square url(bullet3.gif) outer;}</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Positioning Properties</h3>
</td>
</tr>
<tr>
<td>left</td>
<td>Specifies the left position of an element positioned relatively or absolutely. Values: auto or length values (pt, in, cm, px) or percentage. Negative values permitted.</p>
<pre>{ left: 2% }</pre>
</td>
</tr>
<tr>
<td>top</td>
<td>Specifies the top position of an element positioned relatively or absolutely. Values: auto or length values (pt, in, cm, px) or percentage. Negative values permitted.</p>
<pre>{ top: -20px }</pre>
</td>
</tr>
<tr>
<td>overflow</td>
<td>Specifies how content which overflows its box is to be handled. Values: visible (display content); hidden (hide overflow content); scroll (provide scrolling mechanism); auto (up to the browser to figure out what to do)</p>
<pre>{ overflow: auto }</pre>
</td>
</tr>
<tr>
<td>position</td>
<td>Specifies whether the element can be positioned. Values: static (default&#8211;not positioned); relative (in relation to where the element would normally be); absolute (in relation to the top left hand corner of the parent element).</p>
<pre>{ position: relative }</pre>
</td>
</tr>
<tr>
<td>visibility</td>
<td>Specifies whether element is visible. Note that space for element is reserved in either case. (see Classification Property: display) Values: visible; hidden.</p>
<pre>{ visibility: hidden }</pre>
</td>
</tr>
<tr>
<td>z-index</td>
<td>Specifies whether an element is displayed above or below overlapping elements. Values: auto (stack on page in order element appears in code); or an integer. Elements with higher numbers are on top of those with lower.</p>
<pre>{ z-index: 2 }</pre>
</td>
</tr>
<tr>
<td>clip</td>
<td>Specifies an area of an *absolutely positioned* element to be rendered transparent. Values: rect (top right bottom left) where top right bottom left are auto or length values (pt, in, cm, px). The value given for clip only applies if overflow is set to something other than visible.  Beware, Internet Explorer has a completely different definition of clip. Yes, this is confusing!</p>
<pre>p.framed { clip: rect (2em auto auto auto) }</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Pseudo-Classes and Pseudo-Elements</h3>
</td>
</tr>
<tr>
<td>anchor</td>
<td>Pseudo-classes can be used in contextual selectors and can be combined with normal classes.</p>
<pre>A:link {color: #900}

A:link IMG { border: solid blue }

A:hover { background:#ffff00; }

A:visited {}

A:active {} /* style visible only at moment of click */</pre>
<p>Combining pseudos: Normal class names precede pseudos in the selector.</p>
<pre>A.external:link { color: magenta }&lt;A CLASS="external" href="http://out.side/"&gt;external link&lt;/A&gt;</pre>
</td>
</tr>
<tr>
<td>first-line</td>
<td>Applied to the first displayed line of text in the given element. This persists even if the text is reformatted. Applied to block-level elements only. Supported by IE5.5 and Opera 3.6.</p>
<pre>P:first-line {color: red;}

     &lt;P&gt;<span class="example">The first line of this paragraph is</span>

 red. More blah blah blah...&lt;/P&gt;</pre>
</td>
</tr>
<tr>
<td>first-letter</td>
<td>Applied to the first letter in the given element. Can be used to generate drop-cap effects, among others. Should be applied to block-level elements only. Supported by IE5.5 and Opera 3.6.</p>
<pre>P:first-letter {color: red;}

     &lt;P&gt;<span class="example">T</span>he capital 'T' at the beginning of this paragraph is red.&lt;/P&gt;</pre>
</td>
</tr>
</table>
<p class="page">&nbsp;</p>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Printing Properties</h3>
</td>
</tr>
<tr>
<td>page-break-after</td>
<td>Printing properties currently work partially with IE4 and more fully with IE5 and Opera 3.5. CSS2 will greatly augment single-source strategies for documenters.<br />
Values:<br />
<strong>auto</strong> do a page break after the element only if there is no remaining space on the current page<br />
<strong>always</strong> always do a page break after the element<br />
<strong>left</strong> do one or two page breaks after the element until a blank left page is reached<br />
<strong>right</strong> do one or two page breaks after the element until a blank right page is reached</p>
<pre>Example:&lt;STYLE&gt;

.page {page-break-after: always}

&lt;/STYLE&gt;

...

&lt;P CLASS="page"&gt;

...</pre>
</td>
</tr>
<tr>
<td>page-break-before</td>
<td>Values: same as above. Note that neither of these properties work within tables. Also buggy used with &lt;br&gt; tag. Recommend using page breaks in structural tags (H1, P, DIV, etc.).If there are conflicts between the two page-break properties, the value that results in the largest number of page breaks will be used.</td>
</tr>
</table>
<table border="1" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#990066">
<h3>Miscellaneous</h3>
</td>
</tr>
<tr>
<td>cursor</td>
<td>Specifies the appearance of the cursor when placed within an element.Values: auto (browser determines based on context); crosshair; default (usually an arrow &#8211; determined by operating system); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize.<br />
Use &#8216;hand&#8217; to force the hand cursor, which works for IE4, IE5, and Opera 3.5 although not part of the W3C specs. For most other browsers, &#8216;pointer&#8217; will display the hand cursor.</p>
<pre>{ cursor: help }</pre>
</td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.phpmadesimple.info/2008/01/20/learn-css-by-examples/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Using Zend components in your own web project</title>
		<link>http://www.phpmadesimple.info/2008/01/15/using-zend-components-in-your-own-web-project/</link>
		<comments>http://www.phpmadesimple.info/2008/01/15/using-zend-components-in-your-own-web-project/#comments</comments>
		<pubDate>Tue, 15 Jan 2008 07:15:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[components]]></category>
		<category><![CDATA[level 2]]></category>
		<category><![CDATA[zend]]></category>

		<guid isPermaLink="false">http://artemis.com.vn/blogvui/?p=20</guid>
		<description><![CDATA[I am a fan of Prado but Zend framework takes my love with its set of components. Having an MVC framework with a higher level of intefration between Model &#8211; View &#8211; Controller is better than taking Zend basic MVC model into a real life project. However, using Zend components to complete common web features [...]]]></description>
			<content:encoded><![CDATA[<p>I am a fan of Prado but Zend framework takes my love with its set of components. Having an MVC framework with a higher level of intefration between Model &#8211; View &#8211; Controller is better than taking Zend basic MVC model into a real life project. However, using Zend components to complete common web features is a dream.</p>
<p>Zend components are not only easy to use but also designed with standards and deep thought. They are also very isolated so that coders are not required to use Zend MVC framework to use a component. Off course, there are some dependencies you have to take care of, for example, Zend_Authentication depends on Zend_Session or Zend_Feed depends on Zend_Http.<span id="more-20"></span>Zend library is about 13Mb in its latest release at this moment, contains the whole framework suite and examples.</p>
<ul>
<li>To download Zend framework: http://framework.zend.com/download</li>
<li>To download API and Programmer ref. guide: http://framework.zend.com/download/documentation/</li>
</ul>
<p>Here are steps to take Zend components in to use in my own project:</p>
<ol>
<li> Extract ZendFramework/library/Zend into my /includes folder. Actually, I put only components I need but if you don&#8217;t want to concern with component dependencies, put them all here.</li>
<li>Zend will make a lot of include file once you include one component into your code. So in order to forget this including process, create an __autoload() function for PHP5 to take of this inclusion.
<pre class="brush: php">
// For loading classes
function __autoload($class_name) {
$filename = $class_name . &#039;.php&#039;;
include_once($filename);
}
</pre>
</li>
<li>Then you have to add /includes/Zend into your include_path as you will don&#8217;t know where does a Zend component want to include its dependency or at least, you really don&#8217;t care.
<pre class="brush: php">
$includePath = get_include_path();
$includePath .= PATH_SEPARATOR . SitePath . &#039;includes&#039;;
$includePath .= PATH_SEPARATOR . SitePath . &#039;includes&#039; . DIRSEP . &#039;Zend&#039;;
$includePath .= PATH_SEPARATOR . SitePath . &#039;framework&#039;;
$includePath .= PATH_SEPARATOR . SitePath . &#039;data&#039; . DIRSEP . &#039;entities&#039;;
set_include_path($includePath);
</pre>
</li>
<li>Now, let&#8217;s test Zend_Feed component which requires Http, Uri, Validate, Exception and Loader</li>
</ol>
<pre class="brush: php">
require_once &#039;Zend/Feed.php&#039;;

// Fetch the latest Slashdot headlines
try {
$phpvnRss = Zend_Feed::import(&#039;http://artemis.com.vn/blogvui/?feed=rss2&#039;);
} catch (Zend_Feed_Exception $e) {
// feed import failed
echo &quot;Exception caught importing feed: {$e-&gt;getMessage()}\n&quot;;
exit;
}

// Initialize the channel data array
$channel = array(
&#039;title&#039; =&gt; $phpvnRss-&gt;title(),
&#039;link&#039; =&gt; $phpvnRss-&gt;link(),
&#039;description&#039; =&gt; $phpvnRss-&gt;description(),
&#039;items&#039; =&gt; array()
);

// Loop over each channel item and store relevant data
foreach ($phpvnRss as $item) {
$channel[&#039;items&#039;][] = array(
&#039;title&#039; =&gt; $item-&gt;title(),
&#039;link&#039; =&gt; $item-&gt;link(),
&#039;description&#039; =&gt; $item-&gt;description()
);
}

if (count($channel[&#039;items&#039;]))
{
echo &quot;&lt;ul&gt;&quot;;
for ($i = 0; $i &lt; 5 &amp;&amp; $i &lt; count($channel[&#039;items&#039;]); $i++)
{
$item = $channel[&#039;items&#039;][$i];
echo &#039;&lt;li&gt;&lt;a href=&quot;&#039; . $item[&#039;link&#039;] . &#039;&quot; target=&quot;_blank&quot;&gt;&#039;.$item[&#039;title&#039;].&#039;&lt;/a&gt;&#039;;
}
echo &quot;&lt;/ul&gt;&quot;;
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.phpmadesimple.info/2008/01/15/using-zend-components-in-your-own-web-project/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
