WEB ENGINEERING

XSL – eXtensible Stylesheet Language

Posted by: Bharat on: October 26, 2010

XSL

XSL stands for EXtensible Stylesheet Language.

XSL = Style Sheets for XML

XSL consists of:

  • XSLT – a language for transforming XML documents
  • XPath – a language for navigating in XML documents
  • XSL-FO – a language for formatting XML documents

XSLT

XSLT stands for XSL Transformations

XSLT transforms an XML document into another XML document

With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display.

A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.

XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents.

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

Example

catalog.xml


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>

<cd>
<title>Rising Force</title>
<artist>Yngwie Malmsteen</artist>
<label>Polydor</label>
<price>10.90</price>
<year>1984</year>
</cd>

<cd>
<title>Fire and Ice</title>
<artist>Yngwie Malmsteen</artist>
<label>Elektra</label>
<price>9.90</price>
<year>1992</year>
</cd>

<cd>
<title>The Seventh Sign</title>
<artist>Yngwie Malmsteen</artist>
<label>CMC International - Spitfire</label>
<price>9.90</price>
<year>1994</year>
</cd>

</catalog>

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>Title</th>
<th>Artist</th>
<th>Label</th>
<th>Price</th>
<th>Year</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
<td><xsl:value-of select="label"/></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>

OUTPUT


Note

The <xsl:template> element is used to build templates.

The match attribute is used to associate a template with an XML element. The value of the match attribute is an XPath expression (i.e. match=”/” defines the whole document).

The <xsl:value-of> element is used to extract the value of a selected node.

The select attribute contains an XPath expression. An XPath expression works like navigating a file system; a forward slash (/) selects subdirectories.

The <xsl:for-each> element allows you to do looping in XSLT.

FILTERING


<xsl:for-each select="catalog/cd[year='1992']">

 

OUTPUT


JPlayer: Audio Player using JQuery and HTML5 on Virtual Host

Posted by: Bharat on: October 17, 2010

jPlayer is a jQuery plugin that allows you to:

  • play and control audio files in your webpage
  • create and style an audio player using just HTML and CSS
  • add sound effects to your jQuery projects
  • support more devices using HTML5

All of this with HTML5 <audio> support for compliant browsers that allow mp3 or ogg format, while supporting other browsers using mp3 format with no visible Flash.

STEPS:

1.      Download the Demos files.

2.      Make sure you created the virtual host as www.audio2.local as in previous tutorial.

3.      Unzip the file, and move the folder to htdocs folder in XAMPP

4.      Type www.audio2.local in browser url field to open project.

DOWNLOAD THE CODE HERE

Please donate to Jplayer developers, since the code has been derived from their site.

Create Virtual Hosts on Apache server

Posted by: Bharat on: October 17, 2010

Aim:  To create and use virtual hosts and domain name as www.audio2.local

What is Virtual Host

The term Virtual Host refers to the practice of maintaining more than one server on one machine, as differentiated by their apparent hostname.

For example, it is often desirable for companies sharing a web server to have their own domains, with web servers accessible as www.company1.com and www.company2.com, without requiring the user to know any extra path information.

Virtual Hosts can be configured in two ways

  • · Name-based Virtual Hosts
  • · IP-based Virtual Hosts

Name-based vs. IP-based Virtual Hosts

IP-based virtual hosts use the IP address of the connection to determine the correct virtual host to serve. Therefore you need to have a separate IP address for each host. With name-based virtual hosting, the server relies on the client to report the hostname as part of the HTTP headers. Using this technique, many different hosts can share the same IP address.

Name-based virtual hosting is usually simpler, since you need only configure your DNS server to map each hostname to the correct IP address and then configure the Apache HTTP Server to recognize the different hostnames.

Name Based Virtual Host Configuration

To use name-based virtual hosting, you must designate the IP address on the server that will be accepting requests for the hosts. This is configured using the NameVirtualHost directive.

The next step is to create a <VirtualHost> block for each different host that you would like to serve. The argument to the <VirtualHost> directive should be the same as the argument to the NameVirtualHost directive.

Inside each <VirtualHost> block, you will need at minimum a ServerName directive to designate which host is served and a DocumentRoot directive to show where in the filesystem the content for that host lives.

If you are adding virtual hosts to an existing web server, you must also create a <VirtualHost> block for the existing host. The ServerName and DocumentRoot included in this virtual host should be the same as the global ServerName and DocumentRoot.

PROCEDURE

Practical

To create domain as www.audio2.local

Open file “httpd-vhosts” at location C:\xampp\apache\conf\extra\httpd-vhosts

Add following lines to end of document


NameVirtualHost 127.0.0.1:80

<VirtualHost 127.0.0.1:80>

DocumentRoot C:/xampp/htdocs

ServerName localhost

</VirtualHost>

<VirtualHost 127.0.0.1:80>

DocumentRoot C:/xampp/htdocs/audio2

ServerName www.audio2.local

</VirtualHost>

“audio2” is the name of my web application folder on my localhost, htdocs folder.

Save and exit.

Open Notepad in Administrator Mode by, right clicking and selecting “Run as” administrator.

Open the hosts file at location C:\Windows\System32\drivers\etc\hosts in note pad.

Make sure u make the backup file, which will help you, in case anything goes wrong.

Add following code to end of hosts file


127.0.0.1       localhost

127.0.0.1       www.audio2.local

Save the file and exit

Make sure you restart apache server.

Type http://www.audio2.local in browser url field (i.e. your domain name to open website instead of typing localhost)

NOTE:

IF ANY PROBLE OCCURS AND APACHE SERVER DOESNT START AFTER CONFIGURATIONS, UNDO ANY CHANGES DONE TO FILE IN C:\xampp\apache\conf\extra\httpd-vhosts, YOUR SERVER WILL START AGAIN.

XML Schema: XML Validation

Posted by: Bharat on: October 13, 2010

What is an XML Schema?

The purpose of an XML Schema is to define the legal building blocks of an XML document, just like a DTD.

XML Schema is an XML-based alternative to DTD.

An XML Schema:

  • defines elements that can appear in a document
  • defines attributes that can appear in a document
  • defines which elements are child elements
  • defines the order of child elements
  • defines the number of child elements
  • defines whether an element is empty or can include text
  • defines data types for elements and attributes

Example:

Place all the files in same folder and run the validate.html file which contains javascript code to print error.

You can also download the zip file here

Y

1. order.xml


<?xml version="1.0" encoding="ISO-8859-1"?>

<orderLLLLLLL orderid="889923"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="order-schema.xsd">

<person>agent 11</person>

 <shipto>
 <name>Bharat Chandorkar</name>
 <address>Somewhere on Planet Earth</address>
 <city>Mumbai</city>
 <country>India</country>
 </shipto>

 <item>
 <title>Beethoven's Symphony</title>
 <note>Special Edition</note>
 <quantity>1</quantity>
 <price>50</price>
 </item>
 <item>
 <title>Segovia Complete Study</title>
 <quantity>1</quantity>
 <price>40</price>
 </item>
</order>

2. order-schema.xsd


<?xml version="1.0" encoding="ISO-8859-1" ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="order">
 <xs:complexType>
 <xs:sequence>
 <xs:element name="person" type="xs:string"/>
 <xs:element name="shipto">
 <xs:complexType>
 <xs:sequence>
 <xs:element name="name" type="xs:string"/>
 <xs:element name="address" type="xs:string"/>
 <xs:element name="city" type="xs:string"/>
 <xs:element name="country" type="xs:string"/>
 </xs:sequence>
 </xs:complexType>
 </xs:element>
 <xs:element name="item" maxOccurs="unbounded">
 <xs:complexType>
 <xs:sequence>
 <xs:element name="title" type="xs:string"/>
 <xs:element name="note" type="xs:string" minOccurs="0"/>
 <xs:element name="quantity" type="xs:positiveInteger"/>
 <xs:element name="price" type="xs:decimal"/>
 </xs:sequence>
 </xs:complexType>
 </xs:element>
 </xs:sequence>
 <xs:attribute name="orderid" type="xs:string" use="required"/>
 </xs:complexType>
</xs:element>
</xs:schema>

3. validate.html

<html>
<body>
<h3>This demonstrates a parser error:</h3>

<script type="text/javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.validateOnParse="true";
xmlDoc.load("order.xml");

document.write("<br />Error Code: ");
document.write(xmlDoc.parseError.errorCode);
document.write("<br />Error Reason: ");
document.write(xmlDoc.parseError.reason);
document.write("<br />Error Line: ");
document.write(xmlDoc.parseError.line);
</script>

</body>
</html>

OUTPUT

Refer www.w3schools.com for code explanations

DOWNLOAD THE ZIP FILE

Graphs on HTML 5.0 Canvas using RGRAPH canvas graph library

Posted by: Bharat on: September 19, 2010

RGRAPH

RGraph is a HTML5 canvas graph library.

It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, rose chart, scatter graph and traditional radar chart.

RGraph is covered by the RGraph License. Free for non-commercial purpose.

HTML5 introduces a new HTML element – the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript. This makes it perfect for producing graphs.

Because Javascript runs on your user’s computer, none of the stress on your server normally associated with producing graphs.

Browser support

Since the graphs are produced using HTML5 features (the new canvas tag), client support is currently:

  • Mozilla Firefox 3.0+
  • Google Chrome 1+
  • Apple Safari 3+
  • Opera 9.5+
  • Microsoft Internet Explorer 8+ (see note)
  • iPhone (text support from iOS v4+)

NOTE: Download the Rgraph html 5.0 canvas libraries form here, and place the files in libraries folder in the same directory where the html or php file is.

HTML Only Example


<!DOCTYPE html>
<html>
<head>
<title>RGraph: HTML5 canvas graph library - a basic example</title>
<script src="libraries/RGraph.common.core.js" ></script>
<script src="libraries/RGraph.bar.js" ></script>
</head>
<body>
<h1>RGraph: HTML5 canvas graph library - A basic example</h1>
<!-- This is the canvas that the graph is drawn on -->
<canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>

<!--This creates and displays the graph.
We can call this from the window.onload event,
allowing you to put it in your pages header. -->
<script>
window.onload = function ()
{
var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', 'A basic graph (big, but basic)');
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May',
    'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Draw();
}
</script>
</body>
</html>

PHP Only Example


<?php
// This simply makes a string out of the array of data
$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
// This prints out the required HTML markup
print('<script src="RGraph.common.core.js"></script>' . "\n");
print('<script src="RGraph.line.js"></script>' . "\n\n");
print('<canvas width="600" height="200"></canvas>' . "\n\n");
print('<script>' . "\n");
print('    var data = [' . $myData . '];' . "\n");
print('    var line = new RGraph.Line("myCanvasTag", data);' . "\n");
print('    line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
print('    line.Draw();' . "\n");
print('</script>');
?>

PHP and MySQL Database

This PHP code provides you with your data in a single string – $data_string, which you can then print in the correct place to use in your graph.

SQL: create database called rgraph_sampledb and create following table on it.

CREATE TABLE `rgraph_sampledb`.`votes` (`candidate` VARCHAR( 20 )
NOT NULL ,`totalVotes` INT( 20 ) NOT NULL) ENGINE = MYISAM ;

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate1', '20');

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate2', '30');

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate3', '40');



 PHP 

<?php

$hostname = 'localhost';
$username = 'root';
$password = 'sa';
$database = 'rgraph_sampledb';

$connection = mysql_connect($hostname, $username, $password);
mysql_select_db($database);

//result stores total votes casted
//result2 stores candidates list

$result = mysql_query('SELECT totalVotes FROM votes');
$result2 = mysql_query('SELECT candidate FROM votes');

if ($result) {
while ($row = mysql_fetch_row($result)) {
$data[] = $row[0];
}

// Now you can aggregate all the data into one string
$data_string = '[' . implode(',', $data) . ']';
} else {
print(mysql_error());
}

print("<h2>Data from rgraph_sampledb database</h2>");

//get number of votes in data_string
print($data_string);
if ($result2) {
while ($row = mysql_fetch_row($result2)) {
$data2[] = $row[0];
}

// Now you can aggregate all the data into one string
$data_string2 = '[' . implode(',', $data2) . ']';
} else {
print(mysql_error());
}

//get candidate names in data_string2
print($data_string2);

// This prints out the required HTML markup
print("<h2>Data rendered on HTML 5 canvas</h2>");

print("<br />");

print('<script src="libraries/RGraph.common.core.js"></script>' . "\n");
print('<script src="libraries/RGraph.bar.js"></script>' . "\n\n");
print('<script src="libraries/RGraph.common.tooltips.js" ></script>'
. "\n");
print('<script src="libraries/RGraph.common.annotate.js" ></script>'
. "\n");
print('<canvas id="myCanvasTag" width="300" height="200"></canvas>'
. "\n\n");
print('<script>' . "\n");
print('var data = [' . $data_string . '];' . "\n");
print('var bar = new RGraph.Bar("myCanvasTag", data);' . "\n");
print('bar.Set("chart.title", "Voting Results" );' . "\n");
print('bar.Set("chart.shadow", true); ' ."\n");
print('bar.Set("chart.shadow.blur", 5);' ."\n");
print('bar.Set("chart.shadow.color", "#aaa")' ."\n");
print('bar.Set("chart.shadow.offsety", -3);' ."\n");
print('bar.Set("chart.colors", ["#FF7B21"]); ' ."\n");
print('bar.Set("chart.annotatable", true);' . "\n");
print('bar.Set("chart.labels", ["Candidate1","Candidate2","Candidate3"]);'
. "\n");
print('bar.Set("chart.tooltips", ["tt","bb"]);' . "\n");
print('bar.Draw();' . "\n");
print('</script>');

?>

FINAL OUTPUT

 

Click here for more Samples and Demos

Older Entries

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 37 other followers

Author

Hello, My Name is
Bharat Chandorkar. I have completed Bachelor of Engineering in Information Technology from Mumbai University. Playing guitar is my Passion.

What I am Upto Now

Follow Me On Twitter

Blog Stats

  • 15,900 hits

Live Traffic

My Paintings

Guess Who is She

Magnet

Party Goer

Holi

Propose

More Photos

Blog at WordPress.com.

Theme: Albeo by Design Disease.

Follow

Get every new post delivered to your Inbox.

Join 37 other followers