WEB ENGINEERING

XSL – eXtensible Stylesheet Language

Bharat — Tue, 26 Oct 2010 10:03:53 +0000

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







Rising Force
Yngwie Malmsteen
Polydor
10.90
1984



Fire and Ice
Yngwie Malmsteen
Elektra
9.90
1992



The Seventh Sign
Yngwie Malmsteen
CMC International - Spitfire
9.90
1994

cdcatalog.xsl








My CD Collection



Title
Artist
Label
Price
Year

OUTPUT

Note

The 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 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 element allows you to do looping in XSLT.

FILTERING

OUTPUT

Filed under: XML, XSL

JPlayer: Audio Player using JQuery and HTML5 on Virtual Host

Bharat — Sun, 17 Oct 2010 12:13:43 +0000

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

Filed under: Apache, audio, Multimedia, Virtual Hosts

Create Virtual Hosts on Apache server

Bharat — Sun, 17 Oct 2010 12:13:16 +0000

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 block for each different host that you would like to serve. The argument to the directive should be the same as the argument to the NameVirtualHost directive.

Inside each 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 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



DocumentRoot C:/xampp/htdocs

ServerName localhost





DocumentRoot C:/xampp/htdocs/audio2

ServerName www.audio2.local

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

Filed under: Apache, Uncategorized, Virtual Hosts

XML Schema: XML Validation

Bharat — Wed, 13 Oct 2010 15:15:49 +0000

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

1. order.xml






agent 11

 
 Bharat Chandorkar
 Somewhere on Planet Earth
 Mumbai
 India
 

 
 Beethoven's Symphony
 Special Edition
 1
 50
 
 
 Segovia Complete Study
 1
 40

2. order-schema.xsd

3. validate.html



This demonstrates a parser error:

OUTPUT

Refer www.w3schools.com for code explanations

DOWNLOAD THE ZIP FILE

Filed under: XML

Graphs on HTML 5.0 Canvas using RGRAPH canvas graph library

Bharat — Sun, 19 Sep 2010 12:40:21 +0000

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





RGraph: HTML5 canvas graph library - a basic example




RGraph: HTML5 canvas graph library - A basic example

PHP Only Example


' . "\n");
print('' . "\n\n");
print('' . "\n\n");
print('');
?>

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 
Data from rgraph_sampledb database");

//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("Data rendered on HTML 5 canvas");

print("
");

print('' . "\n");
print('' . "\n\n");
print(''
. "\n");
print(''
. "\n");
print(''
. "\n\n");
print('');

?>

FINAL OUTPUT

Click here for more Samples and Demos

Filed under: Graphs, HTML 5.0, Javascript, Reporting

XML DTD: Document Type Definition

Bharat — Sat, 18 Sep 2010 13:02:33 +0000

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










]>



PHP Made Easy
XYZ
2005
30.00



Harry Potter
J K. Rowling
2005
29.99



Learning XML
Erik T. Ray
2003
39.95

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.




This demonstrates a parser error:

OUTPUT

Filed under: XML

Javascript and HTML 5.0 Gaming using Processing.js

Bharat — Wed, 18 Aug 2010 14:52:00 +0000

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:

Visualizing data
Creating user-interfaces
Developing web-based games

Processing.js is explicitly developed for browsers that support the HTML5 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

Filed under: Amazing Websites, HTML 5.0, Javascript

Simulation Example in NS 2

Bharat — Sun, 15 Aug 2010 08:54:00 +0000

Pre-Requisite: Installation of NS2 on Debian

Aim: To Simulate following Topology.

Topology Description

Network consists of 4 nodes (n0, n1, n2, n3).
The duplex links between n0 and n2, and n1 and n2 have 2 Mbps of bandwidth and 10 ms of delay.
The duplex link between n2 and n3 has 1.7 Mbps of bandwidth and 20 ms of delay.
Each node uses a DropTail queue, of which the maximum size is 10.
A “tcp” agent is attached to n0, and a connection is established to a tcp “sink” agent attached to n3.
As default, the maximum size of a packet that a “tcp” agent can generate is 1KByte.
A tcp “sink” agent generates and sends ACK packets to the sender (tcp agent) and frees the received packets.
A “udp” agent that is attached to n1 is connected to a “null” agent attached to n3.
A “null” agent just frees the packets received.
A “ftp” and a “cbr” traffic generator are attached to “tcp” and “udp” agents respectively,
The “cbr” is configured to generate 1 KByte packets at the rate of 1 Mbps.
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:

Create a file called simple.tcl in ns2 directory which is in all-in-one package directory.
Place the following code in simple.tcl file.
Go to ns prompt
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

Filed under: Computer Networks, Network Simulation, NS2 Open Source Network Simulator

Installing Network Simulator 2 on Debian GNU/Linux

Bharat — Sun, 15 Aug 2010 08:17:20 +0000

Pre-Requisite: Install Debian GNU/Linux

STEP 1: Download Network Simulator Setup.

Download NS2 All In One Package from following link:

http://sourceforge.net/projects/nsnam/files/allinone/ns-allinone-2.34/

Official Website:

http://www.isi.edu/nsnam/ns/

STEP 2: Place the file in your home directory and extract the tar file

$ tar -xzvf ns-allinone-2.31.tar.gz


Note: This tutorial was designed using 2.31 version.
Please don't forget to replace 2.31 to 2.34 in following commands
STEP 3: Go to folder where tar file is extracted.
$ cd ns-allinone-2.31

STEP 4: Insert Debian DVD for dependency components.

$ sudo apt-get install build-essential autoconf automake libxmu-dev
$ sudo apt-get install -f build-essential
libxt-dev libxt6 libsm-dev libsm6 libice-dev libice6 libxmu-dev

STEP 5: Install NS2 using following command.

$./install

Note: This process will take some time.
STEP 6: Set environment variables
$ gedit ~/.bashrc

Add the following lines to the end of it.
Dont forget to replace "/home/bharat with your directory path.
Example: /home/yourname/
# LD_LIBRARY_PATH
OTCL_LIB=/home/bharat/ns-allinone-2.31/otcl-1.13
NS2_LIB=/home/bharat/ns-allinone-2.31/lib
X11_LIB=/usr/X11R6/lib
USR_LOCAL_LIB=/usr/local/lib
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:
$OTCL_LIB:$NS2_LIB:$X11_LIB:$USR_LOCAL_LIB

# TCL_LIBRARY
TCL_LIB=/home/bharat/ns-allinone-2.31/tcl8.4.14/library
USR_LIB=/usr/lib
export TCL_LIBRARY=$TCL_LIB:$USR_LIB

# PATH
XGRAPH=/home/bharat/ns-allinone-2.31/bin:/home/bharat/ns-allinone-2.31
/tcl8.4.14/unix:/home/bharat/ns-allinone-2.31/tk8.4.14/unix
NS=/home/bharat/ns-allinone-2.31/ns-2.31/
NAM=/home/bharat/ns-allinone-2.31/nam-1.13/
PATH=$PATH:$XGRAPH:$NS:$NAM

STEP 7: Make changes
$ source ~/.bashrc

STEP 8: Check Installation Success
$ ns
%

If you type ns command on shell, then a "%" will appear on the screen.

That means NS2 is successfully installed.
STEP 9: Exit to Linux prompt

%exit
$


Type "exit" to quit the mode and back to "$"
STEP 10: Validation of NS2 Installation.
Go to network simulator directory inside the all in one

package and execute following command.


$ cd ns-2.31
$ ./validate

Note: Be patient till validation gets successful.

FINISHED

Filed under: Computer Networks, Network Simulation, NS2 Open Source Network Simulator

How to run PHP Scripts on IIS7 Web Server

Bharat — Sat, 14 Aug 2010 07:26:37 +0000

NOTE:

This tutorial is just to show how cross platform integrations are done. I would strongly advice you to use web servers like Apache for PHP.

STEP 1: Installing Web Platform Installer

Microsoft Web Platform Installer 2.0

The Microsoft Web Platform Installer 2.0 (Web PI) is a free tool that makes getting the latest components of the Microsoft Web Platform, including Internet Information Services (IIS), SQL Server Express, .NET Framework and Visual Web Developer easy. The Web PI also makes it easy to install and run the most popular free web applications for blogging, content management and more with the built-in Windows Web Application Gallery.

Features

The Web PI is a free download.
Weighing in at under 2 megabytes, the Web PI is the fastest way to get the components that make up the Microsoft Web Platform.
Installing Web Apps or updating the Microsoft Web Platform, Web PI’s improved validation support ensures everything just works.
Whether you’re updating or installing components, Web PI always includes the latest version of the Microsoft Web Platform.
Available in 9 different languages. Choose your language and if a component is available in that language, Web PI will ensure you get it.
Popular, free and ready to install Web Apps including Umbraco, WordPress, Acquia Drupal, SugarCRM, and more!

STEP 2: Installing WebMatrix

What Is WebMatrix?

WebMatrix is free, seamless, small which includes a complete Web development stack that installs in minutes and elegantly integrates a Web server, database and programming frameworks into a single, integrated experience

Features

WebMatrix is a free Web development tool that installs in minutes and elegantly brings together a Web server, a database, and programming frameworks into a single, integrated experience. WebMatrix lets you code, test, and deploy both ASP.NET and PHP applications side by side.
WebMatrix integrates Visual Studio into your workflow. Connect to Visual Studio to take advantage of powerful features such as debugging and profiling. And when you’re ready for a high-volume relational database server, move your database and data from SQL Server Compact to SQL Server with just a click of the mouse.
WebMatrix includes a small, embedded database called SQL Server Compact that can live with your Web site code and content. Use it to start building your next Web site, and when you’re ready to publish, just copy the database file from your computer to any Web server and it will run— no extra installation required. Or you can easily migrate the database and data to SQL Server when you’re ready for high-volume traffic.
WebMatrix integrates a rich code editor, a database editor, Web server management, Search Engine Optimization, FTP publishing.
Start with HTML, CSS and JavaScript and then seamlessly connect to a database or add in dynamic server code using the new ‘Razor’ syntax for ASP.NET Web pages. Your code is easy to read, simple to learn, short to write and works with any text editor. Use built-in helper functions to connect to a database, display a Twitter feed, or embed a video. And with a seamless path to ASP.NET MVC it is now easier than ever to create powerful ASP.NET Web applications.
Code helpers make common tasks (i.e. tweets or displaying video)easy to do with just a simple tag in your HTML.
WebMatrix uses the same Web server, database engine, and frameworks environment that will run your Web site on the Internet, which makes the transition from development to product seamless.
WebMatrix integrates with IIS Developer Express and is tightly linked with the Web server components that run your site. Directly monitor real-time Web requests and responses to track down problems right at the source. Missing an image? You’ll instantly see why and where, and WebMatrix will take you directly to the file to fix the problem.
Run an SEO report and find how to make your site more visible to search engines. WebMatrix takes the secrets out of search engine optimization, provides clear guidance on how to make your site better, and even offers to take you right to the file in your site you need to fix.

10. WebMatrix can be used to find a Web host that fits your requirements and use the built-in publishing support for FTP, FTPS, and WebDeploy to ensure that your files, databases, and settings arrive intact on the web.

Document No. D-IIS-3

Filed under: PHP