Jes.Gs v2.0 » web dev

PHP and XML: A Quick Introduction

Jess G. — Fri, 20 Mar 2009 18:00:45 +0000

A quick and dirty intro to using PHP to manipulate XML. Very useful to know since there are probably situations where MySQL might be unavailable or just impractical and XML can make a great replacement, especially in small/light-weight applications.

The first place we start is by looking at PHP’s DOM extension; read through the Introduction and Installation/Configuration sections before continuing.
Now we’ll access the DOMDocument class. Starting out, this will probably be the class that gets used the most but as things progress, you’ll find yourself making use of the other classes available.

$xmldoc = new DOMDocument(); // create a new DOMDocument object.

Yep, it’s that simple. Now here comes the fun part. This scenario is going to assume that we’re just creating a new XML object.

$xmldoc->formatOutput = true; //Nicely formats output with indentation and extra space.
 
$root = $xmldoc->createElement( 'xml' ); //create a root element for your XML output
$xmldoc->appendChild( $root );
 
// Now, we're going to create a few child elements to go with it
$child1 = $xmldoc->createElement( 'child_one', 'Child One' );
$root->appendChild( $child1 );
 
$child2 = $xmldoc->createElement( 'child_two', 'Child Two' );
$root->appendChild( $child2 );
 
echo $xmldoc->saveXML(); //output to screen...

Pretty simple and straightforward. Now, if we want to save to a file, we do this:

$xmldoc->save( 'my-xml-file.xml' );

If we want to open and write to a file:

$xmldoc = new DOMDocument(); // create a new DOMDocument object.
$xmldoc->load( 'my-xml-file.xml' );
$xmldoc->formatOutput = true;
$root = $xmldoc->documentElement; // Conviently allows direct access to the root element.
 
$b = $xmldoc->createElement( 'another_one', 'another child' );
$root->appendChild( $b );
 
$xmldoc->save( 'my-xml-file.xml' );

Very quick and straightforward. I hope this helps anyone who was wondering how to use XML and PHP together.

For more information see:

PHP Manual: XML Manipulation
Kirupa.com: PHP and XML
IBM.com: XML for PHP Developers, Part 1 (three-part series)
DynamicDrive Forums: Read and Write XML with PHP (forum-post, this is what got me started)

CSS Calendars II

Jess G. — Tue, 02 Dec 2008 08:28:53 +0000

The last tutorial on CSS Calendar Icons was pretty straightforward but lacked directions for integration with other blogging platforms. Here, I’m going to use WordPress as an example and I’ll work with my calendar book-style css icon.

 // begin calendar icon code
	$year = get_the_time('Y');
	list($y1,$y2,$y3,$y4) = str_split($year, 1);
?>
	 the_time('F jS, Y') ?>">
		
		$y1?> $y2?> $y3?>$y4?> 
		
			 the_time('M')?>
			 the_time('j')?>
		
	
 // end calendar icon code ?>

Here, we’re using the WordPress function get_the_time(), which works like the_time()—which means that it uses the same PHP Date and Time formatting characters as the_time(). Unlike the_time(), get_the_time() passes the result to a variable instead of echoing it, which is what we need here. We use get_the_date(‘Y’) to grab just the year-part of the date, then we use str_split() and list() to parse the individual numbers of the year into separate variables.
CSS Code:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}
/* Book-Style */
.book {
	width: 57px;
	font-size: 12px;
	font-weight: normal;
}
.book .cssCalInner {
	width: 36px;
	margin-left: 10px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.book .spine {
	background: url(images/calendar_book.png) no-repeat scroll left center;
	display: block;
	float: left;
	width: 14px;
	height: 38px;
	position: relative;
	z-index: 1;
}
.book .year {
	font-size: 75%;
	background: purple;
	color: white;
	height: 38px;
	width: 15px;
	float: left;
	margin-left: -10px;
	position: relative;
	z-index: 0;
}
.book .year span {
	display: block;
	float: right;
	width: 10px;
	height: 8px;
}
.book .month {
	background: none;
	color: black;
}
.book .date {
	font-weight: bold;
	font-size: 120%;
}

Seems pretty straightforward, right?

Using WordPress? Go to the next page for a WordPress add-on to use in your own WordPress themes.

CSS Calendars

Jess G. — Sat, 29 Nov 2008 07:28:25 +0000

About sometime last fall, I came across a tutorial on how to create those little CSS calendar icons that are practically everywhere now. The method I found uses a background image and while that’s fine, I guess I prefer something that doesn’t require an image to bring off the design. This last layout that I’ve been working on for Dumpster-fairy.com makes use of those CSS icons, and to give credit where credit is due, I was very much influenced by the icons used at Last.fm for the events calender list. I came up with my own workable solution and I’ll walk you through my methods in this post.

Since I was going to be using a calendar icon in different places on my website, I obviously would want the icon to appear slightly different in each place; for instance, I use a larger calendar icon as part of the header for my blog posts, and a smaller event-like calendar for the side-bar. So, I start off specifying a series of default styles:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}

HTML Code:

<span class="cssCalendar" title="Friday November 28th, 2008">
    <span class="day">Fri</span>
    <span class="cssCalInner">
    	<span class="date">28</span>
        <span class="month">Nov</span>
        <span class="year">2008</span>
    </span>
</span>

This is what you should have:

I’ve tested the base styles in Firefox 3, IE 7, Safari and Opera 9.5 and it appears pretty much the same across the board. But it’s a little boring, don’t you think? So we move on to adding some additional styles:

/* Medium Size */
.medium {
	width: 52px;
	font-size: 18px;
}
.medium .cssCalInner {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.medium .day {
	font-size: 100%;
	font-weight: bold;
	color: white;
	background: red;
}
.medium .date {
	font-size: 120%;
	font-weight: bold;
}
.medium .month {
	font-size: 75%;
	font-weight: normal;
}
.medium .year {
	font-size: 50%;
	font-weight: normal;
}

So this is what we do now. Our HTML fragment above? Change the first line to this:

<span class="cssCalendar medium" title="Friday November 28th, 2008">

Didn’t know you could have more than one class for an html tag? Well, now you do. Your calendar—browser depending, of course—should look like this:

We could leave this tutorial here or, we can go on. You can check out the Last.fm-style calendar icons on the next page.

New Site coming soon

Jess G. — Mon, 24 Nov 2008 18:49:34 +0000

I’ve been working on a re-design for Dumpster-fairy.com, namely to make it more professional than it is now. I’m working on the layout and new pages, though some of the coding is giving me a headache. The new site will still have tutorials and resources, but will feature newly added tutorials and resources on the front page. The new site will also have a portfolio—even though I already have a portfolio—this portfolio will also contain code samples of my web development work. Also, each tutorial will have a downloadable PDF version that will be hosted on my DeviantArt page, mainly to avoid gobbling up my bandwidth. Hopefully, in the next week or so, you should see the new site unveiled.