lOMoARcPSD|27005258

BCS 053 Web Programming Study Notes

Web Programming (Indira Gandhi National Open University)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Jarvis Binary ([email protected])
 lOMoARcPSD|27005258

Contents
Block 1 Client Side.......................................................................................................................................3
Unit 1 – Web 2.0 and XHTML/HTML5......................................................................................................3
Web 2.0 and its difference from Web 1.0 – Page 6..............................................................................3
Technologies of Web 2.0 – Pages 6 & 7................................................................................................3
Blogging – Page 8.................................................................................................................................3
Social Networking - Page 8..................................................................................................................4
Web Services – Page 9.........................................................................................................................4
Data Streaming – Page 12....................................................................................................................4
Unit 2 – Style Sheets................................................................................................................................5
Cascading Style Sheets – Page 32 & CYP 1...........................................................................................5
CSS Rules format with an example – Page 32......................................................................................5
Class selector with an example – Page 43............................................................................................5
The Box Model of HTML – Page 45 & CYP 3.........................................................................................5
Div and span tags with example – Page 48..........................................................................................6
Unit 3 – Introduction to XML...................................................................................................................7
Need for XML – Page 57.......................................................................................................................7
XML Schema – Page 67-68...................................................................................................................7
Unit 4 – Programming with JavaScript – DOM and Events.......................................................................8
Definition of an Event – Page 93..........................................................................................................8
Unit 5 – Introduction to WAP and WML..................................................................................................9
WML Difference from HTML – Pages 106 & 109..................................................................................9
WML select Element – Page 114..........................................................................................................9
Block 2 Server Side....................................................................................................................................10
Unit 1 – The Server Side Scripting..........................................................................................................10
Static and Dynamic Web Pages – Page 7............................................................................................10
2 Tier and N Tier Architecture – Page 9-10........................................................................................10
MVC Architecture with a Diagram – Page 11.....................................................................................10
Request and Response – Page 15......................................................................................................11
Safe Methods – Page 16....................................................................................................................11

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

GET Method with an example – Page 16...........................................................................................11

HTTP Post Method with an example – Page 17.................................................................................12
Web Container – page 18..................................................................................................................12
Unit 2 – JSP – Basic................................................................................................................................13
Uses of JSP and Advantages over Servlet – Page 23...........................................................................13
Life Cycle of a JSP Page with a diagram – Page 24..............................................................................13
Purpose of Directives – Page 27.........................................................................................................13
2 Types of Include – Page 28 and Page 37.........................................................................................14
Scriptlets – Page 33............................................................................................................................14
Unit 3 – JSP – Applications.....................................................................................................................15
JSP Compilation Time Error – Page 53...............................................................................................15
JSP Request Time Error – Page 54......................................................................................................15
Need of Session Management – Page 60...........................................................................................15
Cookies – Page 61..............................................................................................................................15
URL Rewriting – Page 63....................................................................................................................16
Hidden Fields for Session Management – Page 64............................................................................16
Unit 4 - JSP – Application Deployment...................................................................................................17
Role of JDBC – Page 77.......................................................................................................................17
The DriverManager Class – Page 79...................................................................................................17
JDBC-ODBC Bridge – Page 83.............................................................................................................17

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Block 1 Client Side

Unit 1 – Web 2.0 and XHTML/HTML5
Web 2.0 and its difference from Web 1.0 – Page 6
- Web 2.0 is the second generation of WWW
- It refers to the transition from static to dynamic web pages
- It is more organized and is based on creating web applications as per the specific needs of users
- It has improved communication among the users and created many web-based communities
- In Web 1.0, there was not much need and scope of different web applications to communicate
and share data with each other
- It was mainly concerned with creating and viewing online content
- However, web 2.0 has changed this scenario. It offers services that allow users to find and
manipulate content, coupled with all types of media services.
- Examples of web 2.0 are social networking sites, blogs, wikis, etc.
- Basic idea of each of these sites is user interaction. On blogs, you can post comments, on social
networking sites, you can make friends, and so on.

Technologies of Web 2.0 – Pages 6 & 7

Client Side Technologies in web 2.0 include

- Ajax (Asynchronous Javascript And XML)

- Javascript
- XML (eXtensible Markup Language)
- SOAP (Simple Object Access Protocol)
- JSON (JavaScript Object Notation)

Server Side Technologies:

- PHP
- Ruby
- ASP.NET
- Java Server Pages

Blogging – Page 8
- A blog is an informational website maintained by its blogger (or author).
- It contains discrete entries or posts which are displayed in reverse chronological order (most
recent post appears first)
- Types of blogs
o Textual (most common)
o Art (art blogs)
o Music (mp3 blogs)

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

o Videos (video blogs or vlogs)

o Photographs (photoblogs)
o Audio (Podcasts)
- In education, blogs can be used as instructional resources. (called edublogs)
- WordPress and Blogger are 2 websites that allow anyone to start their own blog
- WordPress is an advanced blogging tool which provides a rich and diverse set of features
through its administrative panels.
- Micro-Blogging is another type of blogging which contains very short posts. Eg. Twitter
- Blogs often allow users to leave comments
- Bloggers not only produce content but also build social relations

Social Networking - Page 8

- A social networking site is an online platform that focuses on building social networks or social
relations among its users who share their profiles, interests, etc
- Examples – Facebook, Twitter, Orkut, LinkedIn, MySpace
- Facebook is the largest social networking site
- Social Networking sites can have certain themes. E.g. LinkedIn is a business oriented site which
allows users to stay in touch with their professional contacts.
- These sites are also being used by teachers and students as communication tools
- Some sites have features that allow users to create groups, upload photographs, add friends,
comment on profiles, etc.
- Social networking sites allow two way interactions

Web Services – Page 9

- In Web 2.0, there is a lot of user interaction.
- When these interactions are between 2 or more people and other resources on the Web, then
the role of web services comes.
- Web services improve the interactions or interconnections that may exist between 2 or more
different web resources and hence between those organizations that deliver them.
- E.g., if an organization wants to include a feature of credit card payments online, it can either set
up its own payment gateway or can integrate the web service of a Payment Service Provider (e.g.
PayPal) into the website. The user will make their purchase from company’s website, but for the
payment the control is automatically transferred to the service provider’s site. All this will
happen automatically between two organizations

Data Streaming – Page 12

- Data streaming is a technique for transferring data at high speed rate so that it can be processed
as a steady and continuous stream.
- The client side computers do not always have fast internet access to download heavy media files
quickly.
- With data streaming, the client browser can start displaying the data before the entire file has
been transmitted.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 2 – Style Sheets

Cascading Style Sheets – Page 32 & CYP 1
- Cascading Style Sheets (CSS) are used to control the presentation of a single or many web pages.
- In the earlier web pages, the display attributes were put in the particular tags.
- One of the major problems of such a situation was that if you had to insert same style to number
of occurrences of that tag in same or different pages, you would have to enter that style in every
tag. Not only was this tedious and time consuming but also difficult to change.
- But if you use Cascading style sheet, you can set the same formatting style to all such tags or
elements using a single rule. This rule can then be applied to all the occurrences of that element.
- A style sheet consists of rules that specify how formatting should be applied to particular
elements in a document. In general, a style sheet consists of many such rules.

CSS Rules format with an example – Page 32

- Each CSS rule contains two parts: selector and declaration
- The selector indicates element or elements for which the declaration applies. In the selector
part, the elements can be separated by commas.
- The declaration specifies formatting properties for the element.
- Figure on Page 32

- In above example, the rule says that all the <p> elements should appear in Verdana font.

Class selector with an example – Page 43

- Class selector is used to apply same style specifications to the content of more than one kind of
element with HTML class attribute.
- In style specification definition, the class attribute is defined with a name which is preceded with
a period.
- Then in the body of pages, you refer to this class name to activate the element tag.
- Syntax and Example on Page 43

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

ID Selector with an example – Page 44

The Box Model of HTML – Page 45 & CYP 3

- In a HTML document, each element is represented as a rectangular box.
- Each of these boxes is described using the box model. Diagram on Page 45
- Each box has four edges: margin, border, padding, and content
- Innermost area is the content area where text and images appear. This area is measured by
height and width.
- The padding is the space between the content area and its border.
- The outermost area is the margin which is completely invisible.
- Each element has the following properties: border-style, margin, padding, height, width.
- It is possible to set style for a specific side of the element using border-style-left, border-style-
right, … , padding-bottom.

Div and span tags with example – Page 48

- The div elements define logical divisions in a web page.
- This tag is used as a container for a group of elements.
- It is used to define the style of whole sections of HTML page.
- It is a block-level element which works a lot like <p>. A div element is displayed from new line.
- The span tag is used to style the part of text it encloses.
- Span tag is an inline element.
- Without any style attributes, the span element will not change the enclosed items at all.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 3 – Introduction to XML

Need for XML – Page 57
- HTML is designed to display documents in a web browser. It becomes cumbersome if you want
to display the documents in some other language or upgrade the document for dynamic display.
- XML is just suited for this purpose.
- It is used to store data in plain text format using various unicode formats.
- XML data can be used by various other programming languages. This makes it easy to carry data
irrespective of any platform.
- It is also used as a base language for communication protocols such as XMPP (eXtensible
Messaging and Presence Protocol).
- XML provides users the flexibility to define their own tags which makes it easier to transport and
allows users to define their document structure.
- XML as a document does not do anything. It is the software which uses this document to
connect with the database and does the processing of the data.

XML Schema – Page 67-68

- XML Schema is described as successor to DTD.
- It also describes the structure of an XML document, and so is also referred to as XML schema
definition (XSD).
- XSDs are more powerful than DTDs in describing XML language.
- They use a rich data typing system and allow for more detailed constraints on an XML
document’s logical structure.
- The great strength about schemas is that they are written in XML. So, someone with only XML
knowledge can write the schemas for their XML files as well.
- XML schema defines:
o Elements and attributes of an XML document
o Data types for elements and attributes
o Default or fixed values for elements and attributes
o The child elements
o The number and order of child elements
o Empty or non-empty elements

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 4 – Programming with JavaScript – DOM and Events

Definition of an Event – Page 93
- Events are generated by the browser when “things happen” to HTML elements.
- E.g., clicking of the mouse, loading of the web page / image, moving the mouse over an element,
submission of a HTML form, etc.
- When events happen to an HTML element in a web page, it checks to see if any event handlers
are attached to it.
- If the answer is yes, it calls them in respective order, while sending along references and further
information for each event that occurred. The event handlers then act upon the event.
- DOM elements can be inside each other and, the event handler of the parent will work even if
we click on its child.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 5 – Introduction to WAP and WML

WML Difference from HTML – Pages 106 & 109
- WML is the markup language defined in the WAP specification. WML is an application of XML,
which is defined in a document-type definition.
- WAP sites are written in WML, while web sites are written in HTML. Both of them use tags and
are written in plain text format.
- The basic unit of navigation in HTML is a page, while that in WML is a card.
- Unlike HTML, WML strictly adheres to the XML hierarchical structure and hence elements must
contain a start tag and an end tag.
- WML is a case sensitive language unlike HTML.

WML select Element – Page 114

- The <select>…</select> WML elements are used to define a selection list and the <option>…
</option> tags are used to define an item in the selection list.
- Items are presented as radio buttons in some WAP browsers.
- The <option>…</option> tag pair should be enclosed within the <select>…</select> tags.
- Example on page 115

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Block 2 Server Side

Unit 1 – The Server Side Scripting
Static and Dynamic Web Pages – Page 7
Static Web Pages

- If a server stores a web page as seen by users exactly as HTML and CSS, it is a static web page.
- Every user will see the same information on the web site.
- Sites designed in early stages of WWW were static. These were useful in showing brochure like
fixed content about an organization.
- For editing, the web administrator would manually edit the static HTML pages or change images
and their links on the HTML pages and reload them on the server.
- Main tools used for this editing were text editors like notepad.

Dynamic Web Pages

- It was felt static websites were not flexible and lacked user interaction.
- User wanted that a web page be catered specifically to their requirements.
- This would require more user interaction.
- Therefore, websites now consist of JavaScript or Applets at the client side, as well as they may be
created at the server as per user interaction using a rich set of server side languages and
database tools.

2 Tier and N Tier Architecture – Page 9-10

- 2 Tiers: Client tier or frontend and Server tier or backend
- A developer needs to design the basic interactivity for the application, rules of data access, and
business rules in the client tier.
- Web pages of a web application accessed by the user using their computer and browser are part
of the client tier of the web application.
- Client tier is used to submit the request for a web page. If a user has appropriate permissions,
the request information is passed on to the server, where the server-tier program services the
sent request. Once the requested data is available, it is sent back to the client.
- 2-tier client-server applications require complex implementations and number of
communications between the clients and servers.
- A step up from 2 tier architecture is the 3 tier architecture. It consists of Presentation layer,
application logic layer, and data layer.
- An n-tier architecture in addition to the above three layers may have many more application
layers such as client presentation layer, entity class layer, persistence layer, etc.
- The more are the number of layers, the more complex the system gets but it increases the
application flexibility.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

MVC Architecture with a Diagram – Page 11

- Model View Controller (MVC) architecture is used by Java for web application development.
- Following are the basic components of the MVC architecture:
- Model:
o A model defines the data model and its access controls.
o The main responsibility of this component is to accept user requests and the data
entered by the user and perform necessary data related functions.
- View:
o The function of the view is to accept the data from the model and convert it to a form that can be
seen to a user in a user friendly way.
o Thus, view is responsible for displaying the web pages for the user.
o Any change in model should also change the view
- Controller:
o A user may be allowed to interact with the web pages.
o This interaction may be in the form of checking boxes, filling up input fields, etc.
o It is the controller which accepts this data from the user and initiates suitable actions that should
be carried out by the model.

Controller in MVC – Page 12

Request and Response – Page 15

- HTTP uses a request-response method of communication.
- As a client, a user types in the URL of a website, http://www.ignou.ac.in/school/result.asp. A
request for the web server is initiated.
- The client’s ISP uses DNS servers to find the IP address of the web server hosting
www.ignou.ac.in.
- Once that is found, a request using a HTTP method such as GET is sent to the web server.
Request may look like the following
o GET /school/result.asp HTTP/1.1
- Once the web server receives the request, it processes the sent data and sends a response.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

- The response is of the following structure

o Firstly, the status code of the failure or success of the request is sent along with the
protocol version:
 HTTP/1.1 200 OK
o Secondly, a number of HTTP headers to inform the client of the type of document are
sent.
o Finally, the requested resource is sent.
- Diagram on Page 16

Safe Methods – Page 16

- The methods that are only meant to retrieve information and not make any change in the server
of any kind are considered as safe methods.
- GET and HEAD methods are safe methods.

GET Method with an example – Page 16

- The purpose of GET method is to retrieve the required sources from the server.
- GET can be also be used to communicate information to the server as a part of URL.
- Example
o Consider the URL:
http://localhost:8080/DatabaseApplication/CourseStudentListProcess.jsp?
ProgCode=BCA
o /DatabaseApplication/CourseStudentListProcess.jsp is the requested resource
o ?ProgCode=BCA passes additional information to the server about a parameter called
ProgCode
o Thus, GET not only passes the resource name but also several parameters that can be
used by the server to refine information

HTTP Post Method with an example – Page 17

- POST is another important method used for passing data to the server.
- However in POST method, data is passed inside a message and not as part of the URL being sent.
- Example on page 17
- GET has an advantage that it is simple and safe however, the maximum length of the string that
can be passed through a URL is fixed.
- POST on the other hand has an advantage that it hides information as it is not displayed.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

- In general, whenever you want that parameters should not be visible in the URL, you should use
POST method else use GET method.

Web Container – page 18

- A web container is a part of Java Enterprise Architecture
- It is a part of the web server
- It relates a client request to a servlet that is to be executed in order to give a response to the
request
- A servlet is a Java Class that is executed on the server
- Diagram on page 19

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 2 – JSP – Basic

Uses of JSP and Advantages over Servlet – Page 23
- Java Server Pages (JSP) is a web technology that helps software developers to create dynamic
content based web pages.
- A JSP page contains HTML tags as well as JSP elements which are the basic building blocks of the
page.
- A JSP page also consists of directives, scripting elements, scriptlets, and action elements.
- JSP has certain advantages over servlets. These are:
o Allows programmers to insert Java code directly into the JSP file which makes the
development process easier.
o Supports element based dynamic content which allows programmers to develop custom
tags libraries to satisfy application needs
o Content and display logic are separated
o JSP pages can be used in conjunction with servlets that handle business logic

Life Cycle of a JSP Page with a diagram – Page 24

- When the JSP page is first accessed, it is translated into corresponding servlet and compiled,
then, the page services the received request as a servlet.
- The life cycle of a JSP page is controlled by three methods:
- jspInit():
o Called only once during the life cycle
o Synonymous to init() method of servlets
o Used to initialize objects and variables which are used throughout the life cycle of the
JSP page
o Is invoked when the page is initialized
o Has no parameters, returns no value, throws no exceptions
- _jspService():
o Called every time the JSP page is requested to serve a request
o Takes HttpServletRequest and HttpServletResponse as parameters
o Returns no value
o Is defined automatically by the processor and cannot be overridden
- jspDestroy():
o Is invoked when the page is to be terminated
o Synonymous with destroy() method of servlets
o Has no parameters, returns no value, throws no exceptions
o Developers can override jspDestroy() when they need to perform any cleanup such as
releasing database connections or closing open files
- Diagram on Page 26

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Purpose of Directives – Page 27

- Directives are used to guide the JSP container for translation and compilation of the JSP page
- They appear on top of the page
- Using directives, the container translates the page into a servlet
- They do not directly produce any output
- Have the following syntax
o <%@ directive attribute=”value” %>
- Or in XML:
o <jsp:directive directivename attribute=”value” />
- 3 types of directives: page, include, and taglib

2 Types of Include – Page 28 and Page 37

- Include Directive
- Important jsp directive
- Used to insert text and code in the form of a file such as HTML, JSP, etc. into the current JSP
document at translation time
- Enables you to import content of another static file
- Can appear anywhere in a JSP document
- Syntax:
o <%@ include file= “relative URL” %>
- Example on page 29
- <jsp:include>
- Dynamic include
- Action Element
- In static include, content is included at compile time hence if the content is changed during run
time the current JSP page will not change until server restart

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

- In dynamic include, the content is included at request time

- Hence, this include can be used for both dynamic and static content
- Syntax:
o <jsp:include page= “RelativeUrl” flush= “true”/>
o Or
o <jsp:include page= “RelativeUrl” flush= “true”> <jsp:param … / > </jsp:include>
- If there are no parameters, first version is used

Scriptlets – Page 33
- In scriptlets, all scripting elements are grouped together
- Executed at request time, and makes use of declarations, expressions, and JavaBeans
- Can be written anywhere in the page
- Contains valid java expressions within <% %> tag which get inserted into _jspService() method of
generated servlet
- Syntax
o <% scriptlet code %>
- Or in XML:
o <jsp:scriptlet> code fragment </jsp:scriptlet>

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 3 – JSP – Applications

JSP Compilation Time Error – Page 53
- This error comes at translation or compilation time when JSP page is translated from JSP source
to Java Servlet Class
- Usually result of compilation failures due to some syntax error or spelling mistakes
- Known as translation time errors and are reported to the client browser with error status code
500
- Compilation Time errors are handled by JSP engine
- Example on page 53

JSP Request Time Error – Page 54

- This error occurs during run time or request time
- These result in form of an exception
- These exceptions can be caught and handled by the calling JSP
- Exceptions occur in the body of the JSP page
- For exception handling, a JSP error page needs to be created and defined
- This can be done in 2 ways:
- page level
o exception handling code is defined on each page
o if there is unhandled exception, corresponding error page will be displayed
o page wise error page is defined using page directive
- application level:
o an error page is defined for all pages by describing it in deployment descriptor i.e.
web.xml

Need of Session Management – Page 60

- HTTP is the protocol used by web server and client machine to communicate with each other
- HTTP is a stateless protocol i.e., it cannot persist data or it doesn’t remember a thing
- Each request is treated as a new request originating from a new user
- This is not reliable when users want to perform doing a business transaction or something else
where data persistence is necessary
- To remove this obstacle, session management is needed

Cookies – Page 61
- A cookie is a small piece of data sent from a website and stored in a user’s browser while a user
is browsing the website
- The cookie is sent alongside every request from the browser to the website thereafter.
- It is basically information about the user viz, username, password, id number, etc.
- When the cookie is sent from the browser, the server uses this information to identify the user
- Typically cookies are set at the beginning of the JSP page as they are sent as part of the HTTP
headers.

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

- Example on page 61
- Methods used
o Cookie cookieOne = new Cookie (“name”, “value”);
o Response.addCookie(cookieOne);
o Request.getCookies();

URL Rewriting – Page 63

- Used when browser cookies are functionally turned off
- The session token is embedded in each URL
- In each dynamically generated page, the server embeds an extra query parameter so whenever
the client submits a request, the token is retransmitted to the server
- E.g., http://ignou.ac.in/student.jsp?name1=value1&name2=value2&...
- When a user clicks on such a link, the parameters/name value pairs will be passed to the server
- From JSP page, getParameter() method can be used to retrieve the parameter value
- Example on page 63

Hidden Fields for Session Management – Page 64

- User sessions are managed by passing a token as the value for a hidden HTML form field
- When the client submits a form, the additional field values are also sent in the request
- The hidden fields will either be sent in the URL or the request body depending on whether the
form uses GET method or POST method
- The values of the fields can be retrieved using getParameter() method
- Example:
o <input type= “hidden” name= “userid” value= “ignou” />
- Detailed example on page 64

Downloaded by Jarvis Binary ([email protected])

 lOMoARcPSD|27005258

Unit 4 - JSP – Application Deployment

Role of JDBC – Page 77
- Most of the web applications use database. Database accessing plays a significant role in web
development.
- JDBC is a Java API that enables JSP program to execute SQL statements
- The most widely used interface to access database is ODBC
- It cannot be used directly with Java because it uses C interface and makes use of pointers which
have been removed from Java
- This is why JDBC is required

The DriverManager Class – Page 79

- The task of this class is to maintain a list of JDBC drivers which contains information about the
object reference of each driver and subprotocols it supports.
- When a program requests a database connection with getConnection() method, the
DriverManager goes through the list and matches a suitable driver
- Each JDBC driver must be registered with DriverManager
- The most important method of DriverManger class is getConnection(). It returns a
java.sql.Connection object.

JDBC-ODBC Bridge – Page 83

- Also called TYPE-1 driver
- Freely distributed with JDK
- This bridge driver works with Microsoft vendors such as MS Access, MS-SQL, etc.
- It translates JDBC method calls to ODBC function calls which are then passed on to ODBC driver
- ODBC driver must be configured on the client machine
- This driver is used for prototyping when there is no alternative option for JDBC driver
- It does not support multiple concurrent open statements per connection
- Diagram on Page 83

Downloaded by Jarvis Binary ([email protected])