Web Technologies
Web Technologies
Web Technologies
The term “front-end” refers to the user interface, while “back-end” means the server
application and database that work behind the scenes to deliver information to the
user.
Database
Which organizes the information required for application. There are enterprise-level
databases like Oracle, Teradata, Microsoft SQL Server, IBM DB2, EnterpriseDB and
SAP Sybase ASE, as well as other popular databases including MySQL, NoSQL and
PostgreSQL.
2. What is the difference between static web page and dynamic web page?
A web application is a collection of the web pages that may contain text, images
audio, video etc.
Static web page
Every user who visits that webpage will receive the exact same information. The
content of the web page is hardcoded or fixed at the time of designing the webpage. It
can't be changed without update the page manually. Usually build with HTML, CSS
and they don't interact with a database.
3. What is HTML?
HTML stands for HyperText Markup Language. Which is used to create Web pages.
Properties of HTML
It is free, open standard, not owned by any company or individual.
It is a tag based language. These tags tell the web browser how to display the
page
It is a platform independent language that can be used on any platform such as
Windows, Linux, Macintosh, and so on.
It is not case sensitive language.
Tag Description
<table> It defines a table
<tr> It defines a row in a table
<th> It defines a header cell in a table
<td> It defines a cell in a table
<caption> It defines a table caption
<colgroup> It specifies a group of one or more columns in a table for formatting
<col> It is used with <colgroup> element to specify column properties for
each column
<tbody> It is used to group the body content in a table
<thead> It is used to group the header content in a table
<tfooter> It is used to group the footer content in a table
<FRAME> Tag:
The <FRAME> tag enables to specify just what appears in row or column.
Example: <FRAME SRC="contents.html">
SRC (Source): Specifies the Web page that you want to display in the frame.
DESCRIPTION:
<FORM NAME = “name” ACTION="URL" METHOD="Action">
ACTION : Provides the URL address where the request with the form content will be
sent. If the field ACTION is absent, the request will be sent to the current server.
METHOD : HTTP command used to communicate with the HTTP server. There are
two methods, GET and POST.
<html>
<head> <title> Use of Form </title> </head>
<body>
<form action=" " method="post" name="form1">
<p>Please fill out the following information</p>
NAME : <input type="text" name="textfield1"> <br>
City: <select name="select" size=5>
<option>New Delhi</option>
<option selected>Bombay</option>
<option>Culcutta</option>
<option>Madras</option>
<option>Banglore</option>
<option>Hyderabad</option>
</select> <br>
State: <select name="select">
<option>AP</option>
<option>MP</option>
<option>Karnatak</option>
<option>Tamilnadu</option>
<option selected>Maharashtra</option>
</select> <br>
Address: <textarea name="textarea"></textarea> <br>
Mail ID: <input type="text" name="textfield4"><br>
<H4>Which feed back u want to enter <h4><br>
<input type="checkbox" name="checkbox" value="checkbox"> Internet<br>
<input type="checkbox" name="checkbox" value="checkbox">Designing
HTML<br>
<input type="checkbox" name="checkbox" value="checkbox"> web site<br>
<input type="checkbox" name="checkbox" value="checkbox">Development
Tools<br>
<h4> give feedback <h4>
<input name="radiobutton" type="radio" value="radiobutton">Excellent
<input name="radiobutton" type="radio" value="radiobutton">Good
<input name="radiobutton" type="radio" value="radiobutton"> Satisfactory
<br>
<input type="reset" name="Reset" value="Reset">
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
Inline Styles:
An inline style may be used to apply a unique style for a single eelement.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
Program:
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
17. What are the different selectors used to apply CSS styles?
CSS selectors are used to "find" (or select) HTML elements based on their element
name, id, class, attribute, and more.
1. Element Type Selector:
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this :
Example:
<html>
<head>
<style>
p{
color: red;
background-color: linen;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ID Selector
It uses the id attribute of an HTML element to select a specific element. The id of an
element should be unique within a page, so the id selector is used to select one unique
element. To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
Example:
<html>
<head>
<style>
#abc {
color: red;
background-color: linen;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p id="abc">This is a paragraph.</p>
</body>
</html>
3. Universal Selector
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type, It selects all elements on a page.
Example:
<html>
<HEAD>
<style>
*{
color: green;
background-color: linen;
}
</style>
</HEAD>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
4. Class Selector
The class selector selects elements with a specific class attribute. To select elements
with a specific class, write a period (.) character, followed by the name of the class.
Example:
<html>
<HEAD>
<style>
.abc {
color: green;
font-size: 20px;
background-color: linen;
}
</style>
</HEAD>
<body>
<h1 class="abc">This is a heading</h1>
<p>This is a paragraph.</p>
<h2 class="abc">This is a heading</h1>
</body>
</html>
18. What is the use of JavaScript?
JavaScript is a client-side, event-based, object oriented scripting language used to add
dynamic interactivity to web pages.
The main purpose of JavaScript is to perform basic client side validations like check
emptiness of the form field, mobile number (10 digits), E-Mail verification (proper
email structure). We can do same validations at server side also, but it is extra burden
to the server and creates network traffic.
We cannot perform data base validations in java script, It is possible to do at server
side only.
1. In the <head> section: These scripts will be called when an event triggers them.
Example:
<html>
<head>
<script type="text/javascript">
function sayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
2. In the <body> section: These scripts will run as the page loads.
Example:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>
3. In an external file: write JavaScript in external documents that have the file
extension .js. Each page must include a reference to the external .js file inside the
<script> element.
Example: message.js
<html> function msg()
<head> {
<script type="text/javascript" src="message.js"> alert("Hello World");
</script> }
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
20. What are the popup boxes can be generate in JavaScript?
In JavaScript we can create three kinds of popup boxes:
1. Alert Box: It is often used if you want to make sure information comes through to
the user. When an alert box pops up, the user will have to click "OK" to proceed.
Syntax: alert("sometext")
2. Confirm Box: A confirm box is often used if you want the user to verify or accept
something. When a confirm box pops up, the user will have to click either "OK"
or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user
clicks "Cancel", the box returns false.
Syntax: confirm("sometext")
3. Prompt Box: A prompt box is often used if you want the user to input a value
before entering a page. When a prompt box pops up, the user will have to click
either "OK" or "Cancel" to proceed after entering an input value. If the user clicks
"OK" the box returns the input value. If the user clicks "Cancel" the box returns
null.
Syntax: prompt("sometext","defaultvalue“)
21. What are the packages need to import to connect with Database from java
application?
In order to connect with database from java we need to import the following
packages.
java.sql.*; (usually enough)
javax.sql.*; (for advanced features, such as scrollable result sets)
The JDBC-ODBC bridge driver uses ODBC driver to connect to the database. The
JDBC-ODBC bridge driver converts JDBC method calls into the ODBC function
calls. We no need to install separately, It is by default available with JDK up to
java7.0 Oracle does not support the JDBC-ODBC Bridge from Java 8.
Advantages:
It is very easy to use
Data base independent driver
Disadvantages:
It is slowest driver
It is only applicable for windows machines
Advantages:
It is relatively fast than type-1 driver
portable
Disadvantages:
Advantages:
No client side library is required because of application server that can
perform many tasks like auditing, load balancing, logging etc.
Disadvantages:
The thin driver converts JDBC calls directly into the vendor-specific database
protocol. That is why it is known as thin driver. It is fully written in Java
language.
Advantages:
Performance is high.
Platform independent
Disadvantages:
Example:
String query="create table employee1(empid varchar(20),empname
varchar(30),empsal varchar(20))";
stmt.executeUpdate(query);
25. What are the JDBC different interfaces available in java.sql.* package?
Statement: Statement is the factory for resultset. It is used for general purpose access
to the database. It executes a static SQL query at runtime.
31. What are the servlet life cycle methods or methods in Servlet interface?
Servlet life cycle consists of a series of events that begins when the Servlet container
loads Servlet, and ends when the container is closed down Servlet.
service()
This method is called for the each request. This is the entry point for the every servlet request
and here we have to write our businesslogic or any other processes. This method
takes HttpServletRequest and HttpServletresponse as the parameters. It is not mandatory to
write this method, normally developers are interested in writing doGet() or doPost() methods
which is by default called from the service() method. If you override service(), it is your
reponsibility to call the appropriate methods. If you are not overridden the service() method,
based on the types of the request the methods will be called.
destroy()
This method will be called once for a instance. It is used for releasing any resources used by
the servlet instance. Most of the times it could be database connections, Fill IO operations,
etc. destroy() is called by the container when it is removing the instance from the servlet
container.Servlet instance is deleted or garbage collected by the container only when the web
server issues shut down or the instance is not used for a long time.
<web-app>
<servlet>
<servlet-name>servletName</servlet-name>
<servlet-class>servletClass</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servletName</servlet-name>
<url-pattern>./request</url-pattern>
</servlet-mapping>
</web-app>
When a request comes it is matched with url pattern in servlet mapping attribute.
When url matched with url pattern web server try to find the servlet name in servlet
attributes same as in servlet mapping attribute. When match found control is goes to
the associated servlet class.
RequestDispatcher: This interface provides the option of dispatching the client’s request to
another web resource, which could be an HTML page, another servlet, JSP etc. It provides
the following two methods:
1. public void forward(ServletRequest request, ServletResponse response) : When this
method is called, the control is transferred to the next resource called.
Example:
RequestDispatcher rd = request.getRequestDispatcher("servlet2");
rd.forward(request, response);
Example:
RequestDispatcher rd = request.getRequestDispatcher("servlet2");
rd.forward(request, response);
This method is used redirect response to another resource, which may be a servlet, jsp or an
html file.
ServletContext
1. For every web application, web container creates one ServletContext object to
hold application level configuration information.
2. Within the servlet we can get context object as follows
ServletContext context=config.getServletContext();
3. On the ServletContext object we can call the following methods.
getRequestDispatcher()
getInitParameter()
getServerInfo()
getResourcepaths()
1) cookies
A cookie is a small piece of information that is persisted between the multiple client requests.
In cookies technique, we add cookie with response from the servlet. So cookie is stored in the
cache of the browser. After that if request is sent by the user, cookie is added with request by
default. Thus, we recognize the user as the old user.
Example:
Cookie ck=new Cookie("user","amaranath");//creating cookie object
response.addCookie(ck);//adding cookie in the response
Advantages
1. Simplest technique of maintaining the state.
2. Cookies are maintained at client side.
Disadvantages
1. It will not work if cookie is disabled from the browser.
2. Only textual information can be set in Cookie object.
2) hidden fields
In case of Hidden Form Field a hidden (invisible) textfield is used for maintaining the state of
an user.
Advantages
1. It will always work whether cookie is disabled or not.
Disadvantages
1. It is maintained at server side.
2. Extra form submission is required on each pages.
3. Only textual information can be used.
3) URL rewriting
In URL rewriting, we append a token or identifier to the URL of the next Servlet or the next
resource. We can send parameter name/value pairs using the following format:
Example: url?name1=value1&name2=value2&??
Advantages
1. It will always work whether cookie is disabled or not (browser independent).
2. Extra form submission is not required on each pages.
Disadvantages
1. It will work only with links.
2. It can send Only textual information.
4) HttpSession
In this case, container creates a session id for each user.The container uses this id to identify
the particular user.An object of HttpSession can be used to perform two tasks:
1. bind objects
2. view and manipulate information about a session, such as the session identifier,
creation time, and last accessed time.
The HttpServletRequest interface provides two methods to get the object of HttpSession:
JSP technology is the extension to Servlet technology. We can use all the features of the
Servlet in JSP. In addition to, we can use implicit objects, predefined tags, expression
language and Custom tags in JSP, that makes JSP development easy.
2) Easy to maintain
JSP can be easily managed because we can easily separate our business logic with
presentation logic. In Servlet technology, we mix our business logic with the presentation
logic.
If JSP page is modified, we don't need to recompile and redeploy the project. The Servlet
code needs to be updated and recompiled if we have to change the look and feel of the
application.
In JSP, we can use many tags such as action tags, JSTL, custom tags, etc. that reduces the
code. Moreover, we can use EL, implicit objects, etc.
The scripting elements provides the ability to insert java code inside the jsp. There are three
types of scripting elements:
1. scriptlet tag: A scriptlet tag is used to execute java source code in JSP.
Example:
<html>
<body>
<% out.print("welcome to jsp"); %>
</body>
</html>
2. expression tag
The code placed within JSP expression tag is written to the output stream of the
response. So you need not write out.print() to write data. It is mainly used to print the
values of variable or method.
Example:
<html>
<body>
<%= "welcome to jsp" %>
</body>
</html>
3. declaration tag
The JSP declaration tag is used to declare fields and methods. the code written inside
the jsp declaration tag is placed outside the service() method of auto generated servlet.
Example:
<html>
<body>
<%! int data=50; %>
<%= "Value of the variable is:"+data %>
</body>
</html>
To run web applications, Web server requires. Web server provides support for Servlets, JSP, HTML...
To run Enterprise applications, application server required. Application server provides support for
Servlet, JSP, EJB, JMS… web server is a part of application server.