This tutorial focuses on using PHP to add an item or a 'child' to an XML file.
Basically, what we are going to do in this tutorial is to show the data from XML:
into this:
The full tutorial is accessible by clicking "Read More" ->
1. FOLDER
Navigate to your xampp/htdocs folder. Create a new folder, rename it to anything you want. For example, I saved mine as 'cd'.
2. XML
Create the following XML file and save it in your 'cd' folder.
cdcat.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
<ART>album art/tapa smile.jpg</ART>
<TITLE>Smile</TITLE>
<ARTIST>L'Arc~en~Ciel</ARTIST>
<COMPANY>Ki'ooh Records</COMPANY>
<COUNTRY>Japan</COUNTRY>
<PRICE>25.00</PRICE>
<YEAR>2001</YEAR>
</CD>
<CD>
<ART>album art/BGFROD.jpg</ART>
<TITLE>Brutal Games for Reminding of Death</TITLE>
<ARTIST>CROW'S CLAW</ARTIST>
<COMPANY>Tora no Ana</COMPANY>
<COUNTRY>Japan</COUNTRY>
<PRICE>12.00</PRICE>
<YEAR>2007</YEAR>
</CD>
<CD>
<ART>album art/ORIGINAL INTENTION_01.jpg</ART>
<TITLE>ORIGINAL INTENTION PLUS</TITLE>
<ARTIST>CROW'S CLAW</ARTIST>
<COMPANY>Tora no Ana</COMPANY>
<COUNTRY>Japan</COUNTRY>
<PRICE>20.00</PRICE>
<YEAR>2012</YEAR>
</CD>
</CATALOG>
|
Notice this part in the XML code:
| <ART>album art/tapa smile.jpg</ART> |
The 'album art/tapa smile.jpg' is a string. 'album art/' is the folder name, and 'tapa smile' is the image filename. Create a folder named 'album art' in your folder. That is where we're going to upload the images as cd album cover later.
Save the following images into the 'album art' folder if you want to see something good.
3. XSL & CSS
Create an XSL file to format the XML file in a meaningful view. Save this XSL file into your 'cd' folder.
ALLCD.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>CD Listing</h2>
<table>
<tr>
<th id="label">Album Art</th>
<th id="label">Album Title</th>
<th id="label">Artist</th>
<th id="label">Distributor</th>
<th id="label">Country</th>
<th id="label">Price</th>
<th id="label">Year</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td class="gambar">
<xsl:element name="img">
<xsl:attribute name="width">100</xsl:attribute>
<xsl:attribute name="height">100</xsl:attribute>
<xsl:attribute name="class">Photo</xsl:attribute>
<xsl:attribute name="src">
<xsl:value-of select="ART"/>
</xsl:attribute>
</xsl:element>
</td>
<td >
<xsl:value-of select="TITLE" />
</td>
<td>
<xsl:value-of select="ARTIST" />
</td>
<td>
<xsl:value-of select="COMPANY" />
</td>
<td>
<xsl:value-of select="COUNTRY" />
</td>
<td>
<xsl:value-of select="PRICE" />
</td>
<td>
<xsl:value-of select="YEAR" />
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
|
This XSL file has been formatted to read string value and change it into html readable format.
This part will enable formatting string into html:
<xsl:output method="html" omit-xml-declaration="yes"/>
|
This part reads the string and change it into html:
<xsl:element name="img">
<xsl:attribute name="width">100</xsl:attribute>
<xsl:attribute name="height">100</xsl:attribute>
<xsl:attribute name="class">Photo</xsl:attribute>
<xsl:attribute name="src">
<xsl:value-of select="ART"/>
</xsl:attribute>
</xsl:element>
|
style.css
Notice at the top part of the XSL, we have a code to call css file named "style.css".
Copy the following code and save as 'style.css' in your cd folder:
body, h1, h2, th, td, tr, div {font-family: 'Oxygen', sans-serif; }
.maklumat{
width: 400px;
}
.gambar{
width: 200px;
vertical-align: middle;
}
th {width:90px;text-align:left;}
.maintitle{ text-align: center; }
td { width:130px;text-align:left; }
td .desc{width:450px;}
#photo { background-color: #ffffff}
#label { font-weight: bold; background-color: #abc8e2 ; width: 140px;}
#label2 {font-weight: bold; background-color: #DCEBF7 ; }
#caption {background-color: #c4d7ed; width: 350px; }
#caption2 {background-color: #E8F1F7;}
table, th, td {border: 1px solid white; border-collapse: ncollapse; text-align: left;}
th, td {padding: 5px; vertical-align: top; background-color: #ffffff;}
|
4. PHP for browsing the XML by using the XSL format
Now, we'll use PHP to take both XML and XSL to produce the following result:
the sourcecode:
browsecd.php
<?php
if (file_exists('cdcat.xml')){
$xml = simplexml_load_file('cdcat.xml'); // loads the XML file
$xsl = new DOMDocument; //loads the xslt file
$xsl->load('ALLCD.xsl');
$proc = new XSLTProcessor; //attach xsl rules
$proc->importStyleSheet($xsl);
echo $proc->transformToXML($xml); // displaying XML data using XSLT
}
else{
exit('Failed to open the catalog file.');
}
?>
|
Since we're using PHP, that means the PHP-enabled server must be switched on first. Open xampp and start apache server.
Then, on your browser, type "localhost/cd/browseCD.php" to view the result.
5. Create HTML form to add new data into your XML:
HTML
Addcd.html
<html>
<body>
<h1>
Add new CD into the catalog:</h1>
<form action="addcditem.php" enctype="multipart/form-data" method="post">
Album Art: <input name="cdart" type="file" />
<br />
<br />
CD Title: <input name="cdtitle" type="text" />
<br />
<br />
Artist: <input name="cdartist" type="text" />
<br />
<br />
Company: <input name="cdcompany" type="text" />
<br />
<br />
Country: <input name="cdcountry" type="text" />
<br />
<br />
Price: <input name="cdprice" type="number" />
<br />
<br />
Year: <input name="cdyear" type="text" />
<br />
<br />
<input type="submit" value="Add" />
</form>
</body>
</html>
|
Create a php that would do the dynamic scripting to your server:
addcditem.php
<?php
$msg = "Item added!";
$target_dir = "album art/";
$target_dir = $target_dir . basename( $_FILES['cdart']["name"]);
if (move_uploaded_file($_FILES['cdart']["tmp_name"], $target_dir)) {
$uploaded_image = $target_dir;
} else {
echo "Sorry, there was an error uploading your file.";
}
if (file_exists('cdcat.xml')){
$xml = simplexml_load_file('cdcat.xml');
$cd = $xml->addChild('CD');
$cd->addChild('ART', $uploaded_image);
$cd->addChild('TITLE', $_POST['cdtitle']);
$cd->addChild('ARTIST', $_POST['cdartist']);
$cd->addChild('COMPANY', $_POST['cdcompany']);
$cd->addChild('COUNTRY', $_POST['cdcountry']);
$cd->addChild('PRICE', $_POST['cdprice']);
$cd->addChild('YEAR', $_POST['cdyear']);
file_put_contents('cdcat.xml', $xml->asXML());
}
echo $msg . "<br />";
echo "<a href='browseCD.php'>View CD listing</a> or <a href='Addcd.html'>Add more CD</a>";
?>
|
Type 'localhost/cd/addcd.html' and you'll get the following form:
Finally, test to see your code works or not. Enjoy coding!
No comments:
Post a Comment