Web Technology 2075
Group A
Attempt any Two questions: (2x10=20)
1. Explain the architectural issues of web layer with example.
The web layer is also referred to as the UI layer. The web layer is primarily concerned with presenting the user interface and the behavior of the application (handling user interactions/events). While the web layer can also contain logic, core application logic is usually located in the services layer. The three Layers within the Web Layer are:
HTML-The Content Layer: The content layer is where you store all the content that your customers want to read or look at. This includes text and images as well as multimedia. It's also important to make sure that every aspect of your site is represented in the content layer. That way, your customers who have JavaScript turned off or can't view CSS will still have access to the entire site, if not all the functionality.
CSS - the Styles Layer: Store all your styles for your Web site in an external style sheet. This defines the way the pages should look, and you can have separate style sheets for various media types. Store your CSS in an external style sheet so that you can get the benefits of the style layer across the site.
JavaScript - the Behavior Layer: JavaScript is the most commonly used language for writing the behavior layer; ASP, CGI and PHP can also generate Web page behaviors. However, when most developers refer to the behavior layer, they mean that layer that is activated directly in the Web browser - so JavaScript is nearly always the language of choice. You use this layer to interact directly with the DOM or Document Object Model.
Benefits of separating the layers are:
- Shared resources
- Faster downloads
- Multi-person teams
- Accessibility
- Backwards compatibility
2. Explain the use of XML in web development. Write internal and external DTD to describe "mail" as a root element and "to", "from", and "subject", and "message" as child elements.
Extensible markup Language (XML) plays a significant role in the present world of web development, it is perfectly useful for those who wish to make use of web technologies for distributing information across the web. Like HTML, XML is also being used to format a document with a web browser. It is an influential and effectual tool to process a document’s contents and therefore, creating own tags is possible with XML. It gels well with any operating system and maintains a great amount of flexibility, which is very essential for the web development scenario.
Uses:
- XML is used to separate data from presentation
- XML is used to store and transport data.
- XML is used to separate data from HTML.
- XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data
- XML can be used to create new internet languages. For e.g. XHTML, WSDL
Now,
Internal DTD for given elements
//mail.dtd
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mail[
<!ELEMENT mail(to, from, subject, message)>
<!ELEMENT to(#PCDATA)>
<!ELEMENT from(#PCDATA)>
<!ELEMENT subject(#PCDATA)>
<!ELEMENT message(#PCDATA)>
]>
<mail>
<to>Jayanta</to>
<from>Sagar</from>
<subject>webtech</subject>
<message> Never miss the web tech class</message>
</mail>
External DTD for given elements
//mail.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mail SYSTEM "mail.dtd">
<mail>
<to>Jayanta</to>
<from>Sagar</from>
<subject>webtech</subject>
<message> Never miss the web tech class</message>
</mail>
//mail.dtd
<!ELEMENT mail(to, from, subject, message)>
<!ELEMENT to(#PCDATA)>
<!ELEMENT from(#PCDATA)>
<!ELEMENT subject(#PCDATA)>
<!ELEMENT message(#PCDATA)>
3. Develop a simple Web site that takes first name, last name and address from the user and stores this information in the database. Use JavaScript to validate form data.
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Registration</title>
</head>
<body>
<h2>Client Side Form Validation</h2>
<form name="signupForm" onsubmit="return validateForm();" method="POST" action="./formSubmit.php">
<div>
<label for="f_name">Please enter your first name: </label>
<input type="text" name="f_name" id="f_name">
</div>
<div>
<label for="l_name">Please enter your last name: </label>
<input type="text" name="l_name" id="l_name">
</div>
<div>
<label for="address">Please enter your address: </label>
<input type="text" name="address" id="address">
</div>
<div>
<input type="submit" name="signup" value="Signup">
</div>
</form>
<script>
function validateForm() {
if (document.signupForm.f_name.value == "") {
alert("Please provide your first name!");
document.signupForm.f_name.focus();
return false;
}
else if (document.signupForm.l_name.value == "") {
alert("Please provide your last name!");
document.signupForm.l_name.focus();
return false;
}
else if (document.signupForm.address.value == "") {
alert("Please provide your address!");
document.signupForm.address.focus();
return false;
}
return true;
}
</script>
</body>
</html>
//formSubmit.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "webtech";
$tablename = "users";
if($_SERVER["REQUEST_METHOD"] == "POST"){
$f_name = $_POST['f_name'];
$l_name = $_POST['l_name'];
$address = $_POST['address'];
//connect to database
$conn = mysqli_connect($servername, $username, $password) or die(mysql_error()); //Connect to server
mysqli_select_db($conn, $dbname) or die("Cannot connect to database"); //Connect to database
// Insert the values into database
mysqli_query($conn, "INSERT INTO ".$tablename."(f_name,L_name, address) VALUES ('$f_name', '$l_name', '$address')");
Print '<script>alert("Congrats! Your Submission is Successfully Registered!");</script>';
?>
Group B
Attempt any Eight questions: (8x5=40)
4. What is the structure of HTML file? Explain with example.
HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. It describes the structure of a Web page.
Structure of HTML document
Every HTML document consists of four basic structure elements: html, head, title, and body. Each of these is explored in detail below:
1. Html Element
- Start tag:
<html>- First tag in the document which declares you are writing an HTML element. - End tag:
</html>- Last tag in the document.
2. Head Element
- Start tag:
<head>- Second tag, follows the<html>tag, and starts the head section, which describes the document. - End tag:
</head>- Fifth tag, follows the</title>tag and closes the head section.
3. Title Element
- Start tag:
<title>- Third tag, follows the<head>tag, and contains the title you want for the document. This information will be displayed in the title bar at the top of the browser window. - End tag:
</title>- Fourth tag, immediately follows, without any spaces, the title you want for the document and precedes the</head>tag.
4. Body Element
- Start tag:
<body>- Sixth tag, follows the</head>tag to denote starting the content of the document. - End tag:
</body>- Next to last tag in the document, follows the end of the document content and precedes the</html>tag.
E.g.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
5. Define CSS? How can you use an external CSS? Explain.
CSS is a language that describes the style of an HTML document. It describes how HTML elements should be displayed.
External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.
E.g.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class = "main">
<div class ="CN">College Note</div>
<div id ="webtech">
Web tech solution.
</div>
</div>
</body>
</html>
//style.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.CN {
color:#009900;
font-size:50px;
font-weight:bold;
}
#webtech {
font-style:bold;
font-size:20px;
}
6. How can you define event handler? Write a Javascript to demonstrate event handling.
Event handlers are JavaScript code that are not added inside the <script> tags, but rather, inside the html tags, that execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. The basic syntax of these event handlers is:
name_of_handler="JavaScript code here"
For example:
<a href="http://google.com" onClick="alert('hello!')">Google</a>
When the above link is clicked, the user will first see an alert message before being taken to Google.
7. Compare XML schema with DTD.
Comparison between XML schema and DTD
- XML schemas are written in XML while DTD are derived from SGML syntax.
- XML schemas define datatypes for elements and attributes while DTD doesn't support datatypes.
- XML schemas allow support for namespaces while DTD does not.
- XML schemas define number and order of child elements, while DTD does not.
- XML schemas can be manipulated on your own with XML DOM but it is not possible in case of DTD.
- using XML schema user need not to learn a new language but working with DTD is difficult for a user.
- XML schema provides secure data communication i.e. sender can describe the data in a way that receiver will understand, but in case of DTD data can be misunderstood by the receiver.
- XML schemas are extensible while DTD is not extensible.
8. Discuss the use of Cookies with suitable example.
A cookie is a variable that is stored on the visitor's computer. Cookies let you store user information in web pages.
When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem "how to remember information about the user".
- When a user visits a web page, his/her name can be stored in a cookie.
- Next time the user visits the page, the cookie "remembers" his/her name.
Cookies are saved in name-value pairs like:
username = Ronaldo
When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to "remember" information about users.
E.g.
JavaScript code to set and get a cookie:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Jayanta";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
9. Why do we need XSLT? Explain XSL <xls:for-each> Element.
XSLT (Extensible Stylesheet Language Transformations) provides the ability to transform XML data from one format to another automatically. It is the recommended style sheet language for XML.
XSLT is far more sophisticated than CSS. With XSLT we can add/remove elements and attributes to or from the output file. We can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.
XSLT uses XPath to find information in an XML document.
<xls:for-each> Element
- The <xsl:for-each> element allows you to do looping in XSLT.
- The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set.
- The XSLT <xsl:for-each> element is used to apply a template repeatedly for each node.
syntax:
<xsl:for-each
select = Expression >
</xsl:for-each>
E.g.
<?xml version="1.0" encoding="UTF-8"?>
<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>
</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>
10. What is Web server software? Discuss its role on the Internet.
Web server is a program or a computer that can provide services to other programs called clients. A web server can contain one or more websites. A web server processes the incoming requests.
- The primary function of web server is to store, process and deliver web pages to clients. The communication between client and server takes place using the HTTP. Pages delivered are most frequently HTML documents, which ,may include images, style sheets.
- A web browser initiates the communication by making a request for a specific resources using HTTP and the server responds with the content of that resources or an error message if unable to do so.
Role of web server:
1. Stores and secures website data: In web hosting services, a web server stores all website data and secures it from unauthorized users when it is properly configured.
2. Provides web database access: A web server’s responsibility is to provide access to websites that are hosted. Web hosting service providers own some web servers that are used in variable ways to provide different web hosting services, such as backend database servers.
3. Serve the end user requests: Web servers accept requests from different users connected over the internet and serve them accordingly.
4. Bandwidth controlling to regulate network traffic: It is a feature available in web server to minimize excess network traffic. Web Hosts can set bandwidth values to regulate the rate of data transmission over the internet. This feature avoids the down time caused by high web traffic.
5. Virtual hosting: Virtual Hosting is a type of web hosting service in which a web server is used to host other software based virtual web-servers web sites, data, applications and other services. Virtualized Web servers do possess this feature to provide virtual hosting.
6. Server side web scripting: This feature of web server enables the user to create dynamic web pages. The popular server side scripting languages include Perl, Ruby, Python, PHPandASP etc
11. Write server-side code to select data stored in the database.
PHP code to select data stored in the database
The SELECT statement is used to select data from one or more tables:
SELECT column_name(s) FROM table_name
or we can use the * character to select ALL columns from a table:
SELECT * FROM table_name
The following example selects the id, firstname and lastname columns from the MyGuests table and displays it on the page:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
mysqli_close($conn);
?>
12. Discuss integrated window authentication.
13. Write short notes on:
a) SMTP
b) XQuery
a. SMTP
Simple Mail Transfer Protocol (SMTP) is an Internet standard for electronic mail (email) transmission across Internet Protocol (IP) networks. SMTP (Simple Mail Transfer Protocol) is a TCP/IP protocol used in sending and receiving e-mail. However, since it is limited in its ability to queue messages at the receiving end, it is usually used with one of two other protocols, POP3 or IMAP, that let the user save messages in a server mailbox and download them periodically from the server. In other words, users typically use a program that uses SMTP for sending e-mail and either POP3 or IMAP for receiving e-mail. On Unix-based systems, send mail is the most widely-used SMTP server for e-mail. A commercial package, Send mail, includes a POP3 server. Microsoft Exchange includes an SMTP server and can also be set up to include POP3 support.
SMTP usually is implemented to operate over Internet port 25. An alternative to SMTP that is widely used in Europe is X.400. Many mail servers now support Extended Simple Mail Transfer Protocol (ESMTP), which allows multimedia files to be delivered as e-mail.
An SMTP server performs two functions:
- Verifies proper configuration and grants permission to a computer attempting to send a message.
- Sends an outgoing message to a predefined destination and tracks the successful delivery of the message. If it is not deliverable, a message is sent back to the sender. All SMTP servers use their own code which identifies them. For instance, if you are using Hotmail to send e-mail. You would need to configure a mail client, such as Outlook Express with the following code: smtp.hotmail.com
b. XQuery
XQuery is a functional query language used to retrieve information stored in XML format. It is same as for XML what SQL is for databases. It was designed to query XML data.
XQuery is built on XPath expressions. It is a W3C recommendation which is supported by all major databases.
E.g.
for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title