Ndarja e dizenjimit te user interface nga programmi zgjidh disa problematika dhe ofron shume mundesi per aplikacionet e-commerce.
Mundeson qe programuesit te fokusohen ne llogjiken e kodit ndersa dizenjuesit e nderfaqes se perdoruesit te punojne ne menyre te pavarur duke ofruar keshtu nje nivel te larte ekspertize, per shkak te ndarjes me te specializuar te punes.
per me teper kjo ndarje krijon lehetesira kur mendojme se aplikacioni mund te kete nderfaqe te ndryshme, duke i mundesuar perdoruesit te komunkoje me te nepermjet :
nje si nje web browser standard
nje web browseri mobile
SMS ne telefoni celular
zerit - VoiceXML, CallXML
grafikes - SVG etj
ndarja e design nga programimi lejon qe kodi qe gjeneron kontentin te ndertohet vetem njehere dhe te perdroret per te gjitha llojet e nderfaqeve duke e transformuar content (ne formatin XML) nepermejt nje template transformimi (nepermjet XSLT) ne nje permbajtje qe mund te paraqiten ne nderfaqen e duhur.
Shembulli me poshte ilustron nje aplikacion web ne nje browser standard, i cili paraqet nje katalog produktesh.
skedari cdcatalog.xml permban katalogun e disa CD
skedari cdcatalog.xsl permban template e transformimit te XML ne HTML, qe te mund te paraqitet ne browser dhe
skedari shop.php perdor si parser Javascript, per te transformuar xml nepermjet template xslt.
Pas tranformimit rezultati paraqitet ne nje DIV, ne trupin e faqes shop.php
Skedari cdcatalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>My dream si to fly!</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
</catalog>
Skedari cdcatalog.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Skedari shop.php
<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<input type="button" value="rifresko" onClick="displayResult()">
<div id="example" />
</body>
</html>
Afishimi grafik do te ishte:
Nese ne kete moment po pyesni veten, se si te afishoni nje katalog qe ndodhet ne bazen e te dhenave, shembulli i meposhtem i jep pergjigje pyetjes Tuaj.
Do te ndetojme nje skedar cdcatalog.php i cili duhet te ngarkohet nga shop.php ne vend te cdcatalog.xml, pra instruksionin:
xml=loadXMLDoc("cdcatalog.xml");
do ta zevendesojme me instruksionin:
xml=loadXMLDoc("cdcatalog.php");
Me poshte po paraqesim nje version te faqes cdcatalog.php.
<?php
header ("Content-Type:text/xml");
mysql_connect('localhost','root','') or die('nuk lidhem dot');
mysql_select_db('endri') or die('nuk lidhem dot');
$sql='select code,title,subtitle from articles';
$r=mysql_query($sql) or die(mysql_error());
$res='<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>';
while ($rec=mysql_fetch_array($r))
{
$res=$res.'
<cd>
<title>'.substr($rec['title'],0,5).'</title>
<artist>'.substr($rec['subtitle'],0,5).'</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>';
}
$res=$res.'
</catalog>';
echo $res;
?>
Sic vihet re edhe nga shembulli me siper duhet te modifikojme headerat , duke i dhene informacion browserit per formatin e te dhenave qe po i dergojme.
header ("Content-Type:text/xml");
Pas kesaj cdo output i faqes nga browseri do te trajtohet si XML.