WEB ENGINEERING

Author Archive

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 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.

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 http://www.company1.com and http://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.

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

XML stands for eXtensible Markup Language.

XML is a markup language much like HTML

XML was designed to carry data, not to display data

XML tags are not predefined.

XML is designed to be self-descriptive, and has user defined tags.

XML is a W3C Recommendation

XML was designed to transport and store data.

XML is a software- and hardware-independent tool for carrying information.

XML Separates Data from HTML

XML is Used to Create New Internet Languages

•    XHTML the latest version of HTML
•    WSDL for describing available web services
•    WAP and WML as markup languages for handheld devices
•    RSS languages for news feeds
•    SMIL for describing multimedia for the web

XML documents are characterized by two distinct properties: well-formedness and validity.

XML with correct syntax is “Well Formed” XML.

XML validated against a DTD or XML Schema is “Valid” XML.

Well Formed XML Documents

A “Well Formed” XML document has correct XML syntax

  • XML documents must have a root element
  • XML elements must have a closing tag
  • XML tags are case sensitive
  • XML elements must be properly nested
  • XML attribute values must be quoted

A “Valid” XML document is a “Well Formed” XML document, which also conforms to the rules of a Document Type Definition (DTD)

XML DTD

It defines the document structure with a list of legal elements and attributes.

A DTD can be declared inline inside an XML document, or as an external reference.

Defining XML DTD

<?xml version="1.0" ?>
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+)  >
<!ELEMENT book (title,author,year,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ATTLIST  book category CDATA #REQUIRED>
<!ATTLIST  title lang CDATA #REQUIRED>
]>

<bookstore>
<bookLLLLLLLLLLLLLL category="PHP">
<title langLLLLLL="en">PHP Made Easy</title>
<author>XYZ</author>
<year>2005</year>
<price>30.00</price>
</book>

<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>

<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>

</bookstore>

Description

  • !DOCTYPE bookstore defines that the root element of this document is bookstore
  • !ELEMENT bookstore (book+) defines that the there should be atleast one element of type book.
  • !ELEMENT book defines that the note element contains four elements: “tile, author, year, price”
  • !ELEMENT title defines the to element  to be of type “#PCDATA”
  • !ELEMENT author defines the from element to be of type “#PCDATA”
  • !ELEMENT year defines the heading element to be of type “#PCDATA”
  • !ELEMENT price defines the body element to be of type “#PCDATA”

The Building Blocks of XML Documents

Seen from a DTD point of view, all XML documents (and HTML documents) are made up by the following building blocks:

  • Elements
  • Attributes
  • Entities
  • PCDATA
  • CDATA

PCDATA means parsed character data.

PCDATA is text that WILL be parsed by a parser. The text will be examined by the parser for entities and markup.

CDATA means character data.

CDATA is text that will NOT be parsed by a parser.

Tags inside the text will NOT be treated as markup and entities will not be expanded.

Validating With the XML Parser

If XML file has error  and we try to open the XML document, the XML Parser might generate an error. By accessing the parseError object, you can retrieve the error code, the error text, or even the line that caused the error.

Note: The load( ) method is used for files, while the loadXML( ) method is used for strings.

Javascript code to catch error.


<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("bookstore.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

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.

Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.

Processing.js can be used to:

  1. Visualizing data
  2. Creating user-interfaces
  3. Developing web-based games

Processing.js is explicitly developed for browsers that support the HTML5 <Canvas> element.

Processing.js runs in Firefox, Safari, Opera and Chrome but will not be supported in Internet Explorer until Mircosoft catch up with ISSUE 15.

Click here to find out one of the reasons to tell you why Internet Explorer suck.

History

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment.

PLAY HTML 5.0 GAME: GALACTIC INBOX

A Pure Javascript and HTML 5.0 Game inspired by Gmail.

DOWNLOAD EXAMPLES

QUICK START

Pre-Requisite: Installation of NS2 on Debian

Aim: To Simulate following Topology.

Topology Description

  1. Network consists of 4 nodes (n0, n1, n2, n3).
  2. The duplex links between n0 and n2, and n1 and n2 have 2 Mbps of bandwidth and 10 ms of delay.
  3. The duplex link between n2 and n3 has 1.7 Mbps of bandwidth and 20 ms of delay.
  4. Each node uses a DropTail queue, of which the maximum size is 10.
  5. A “tcp” agent is attached to n0, and a connection is established to a tcp “sink” agent attached to n3.
  6. As default, the maximum size of a packet that a “tcp” agent can generate is 1KByte.
  7. A tcp “sink” agent generates and sends ACK packets to the sender (tcp agent) and frees the received packets.
  8. A “udp” agent that is attached to n1 is connected to a “null” agent attached to n3.
  9. A “null” agent just frees the packets received.
  10. A “ftp” and a “cbr” traffic generator are attached to “tcp” and “udp” agents respectively,
  11. The  “cbr” is configured to generate 1 KByte packets at the rate of 1 Mbps.
  12. The “cbr” is set to start at 0.1 sec and stop at 4.5 sec, and “ftp” is set to start at 1.0 sec and stop at 4.0 sec.

Procedure:

  1. Create a file called simple.tcl in ns2 directory which is in all-in-one package directory.
  2. Place the following code in simple.tcl file.
  3. Go to ns prompt
  4. type: ns simple.tcl

Code:


#Create a simulator object
set ns [new Simulator]

#Define different colors for data flows (for NAM)
$ns color 1 Blue
$ns color 2 Red

#Open the NAM trace file
set nf [open out.nam w]
$ns namtrace-all $nf

#Define a 'finish' procedure
proc finish {} {
 global ns nf
 $ns flush-trace
 #Close the NAM trace file
 close $nf
 #Execute NAM on the trace file
 exec nam out.nam &
 exit 0
}

#Create four nodes
set n0 [$ns node]
set n1 [$ns node]
set n2 [$ns node]
set n3 [$ns node]

#Create links between the nodes
$ns duplex-link $n0 $n2 2Mb 10ms DropTail
$ns duplex-link $n1 $n2 2Mb 10ms DropTail
$ns duplex-link $n2 $n3 1.7Mb 20ms DropTail

#Set Queue Size of link (n2-n3) to 10
$ns queue-limit $n2 $n3 10

#Give node position (for NAM)
$ns duplex-link-op $n0 $n2 orient right-down
$ns duplex-link-op $n1 $n2 orient right-up
$ns duplex-link-op $n2 $n3 orient right

#Monitor the queue for link (n2-n3). (for NAM)
$ns duplex-link-op $n2 $n3 queuePos 0.5

#Setup a TCP connection
set tcp [new Agent/TCP]
$tcp set class_ 2
$ns attach-agent $n0 $tcp
set sink [new Agent/TCPSink]
$ns attach-agent $n3 $sink
$ns connect $tcp $sink
$tcp set fid_ 1

#Setup a FTP over TCP connection
set ftp [new Application/FTP]
$ftp attach-agent $tcp
$ftp set type_ FTP

#Setup a UDP connection
set udp [new Agent/UDP]
$ns attach-agent $n1 $udp
set null [new Agent/Null]
$ns attach-agent $n3 $null
$ns connect $udp $null
$udp set fid_ 2

#Setup a CBR over UDP connection
set cbr [new Application/Traffic/CBR]
$cbr attach-agent $udp
$cbr set type_ CBR
$cbr set packet_size_ 1000
$cbr set rate_ 1mb
$cbr set random_ false

#Schedule events for the CBR and FTP agents
$ns at 0.1 "$cbr start"
$ns at 1.0 "$ftp start"
$ns at 4.0 "$ftp stop"
$ns at 4.5 "$cbr stop"

#Detach tcp and sink agents (not really necessary)
$ns at 4.5 "$ns detach-agent $n0 $tcp ; $ns detach-agent $n3 $sink"

#Call the finish procedure after 5 seconds of simulation time
$ns at 5.0 "finish"

#Print CBR packet size and interval
puts "CBR packet size = [$cbr set packet_size_]"
puts "CBR interval = [$cbr set interval_]"

#Run the simulation
$ns run


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

Join 49 other followers

What I am Upto Now

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Follow Me On Twitter

Blog Stats

  • 72,473 hits

Live Traffic

My Paintings

%d bloggers like this: