<br>

UNT-2

OPERATING WEB BASED

APPLICATIONS
)Inside this Chapter
) Operating Web-based Applications An Introduction
D Online ReservationBooking System
)) E-Governance
Online Shopping
and Bill Payments
M Online Courses.
Tutorials and Tests
) Project
Management Web
BasedIApplication Development

77
<br>

PART-B
Information Technology - 12+h
78
OPERATING WEB-BASED APPLICATIONS- AN INTRODUCTION
2.1
over a computer network or internet through
An application that can be accessed a web
browser is called
a Web-based Application. A
web application (web app) is an application
over
program that is stored on a
remote server and delivered the internet through a browser
interface. Such applications are available 24x7 across the world. In modern times, web--based
applications are being used for various purposes like reservation
of tickets and bookings,
e-govenance, online shopping by making payments online using credit/debit cards, and
online tutorials, tests etc. All these facilities are available from anywhere around the world
through the internet. During the recent pandemic, these online services were a great helpas
they could be accessed from home, office, while travelling, etc.
Primarily the web-based online applications can be classified into two types-one thet
requires financial online transactions and the other one that provides information and alloue
interaction by filling up forms, posting queries, viewing information, sending emails or chatting
Some examples of the first category are online reservation system, online shopping. and
applications that allow bill payments, while those of the second category are e-govemance.
online tutorials and tests, online forms, word processors, spreadsheet applications, videos and
photo editing, file conversion, file scanning, and email programs such as Gmail, Yahoo and
AOL.
Web applications use a combination of server-side scripts (PHP and ASP) to handle the
storage and retrieval of information, and client-side scripts (JavaScript
and HTML) to present
information to users. This allows users to interact with companies using online forms, shopping
carts and more. In addition, the applications also allow employees to create
documents, share
information, collaborate on projects, and work on common documents, regardless of their
location or the device used.
some examples of web-based applications are:
•
Online reservation/booking system
• Online tutorials
• Online shopping
and bill payment
•
E-governance
• Online food
ordering
Google Office Suite
Microsoft Office 365

Amazon Cnva Canva

(PPinterest Spotify

Netflix
WhatsApp

Zoom
UUber
Fig. 2.1 Examples of web applications
<br>

Operating Web Based Applications

PART-B
Benefits of
a web application 79
. Web applications run on multiple platforms
Operating System or device as long as regardless of the
the browser To see
Web apps can be accessed through
is compatible. Concept of web
various platforms
adesktop,laptop, or mobile. such as application
in Action
Al userscan access the same version, eliminating any
comDatibility
issues.
Woh apps are not
installed on the hard disk of the system. thus
they eliminate space limitatjons. Scan QR Code
They reduce software
piracy in subscription-based
web applications (i.e.
They reduce costs for both
the business and end user as SaaS).
is reguired by the less support and maintenance
business and less requirements
for the end user's computer.
How do web applications work
Web applications are
not downloadable as they are To see
through a network. Users can access accessed What
a web application through a is web
browser, such as Google web application
Chrome, Mozilla Firefox or Safari. in Action
For making a web
application operational, we
an application server, need a web server,
and a database. Web servers manage
Tequests that come
from a client and the application server the
the requested task. A completes Scan QR Code
database can be used to store any
information. needed
User's device

Mac 05

JSP Files
|Stored???
PDA

INTERNET
Laplop

Web Server Database

PC

Fig. 2.2 Working of web application

tbso
2.2
ONLINE RESERVATION/BOOKING SYSTEM
Let us
study this in detail
with some examples.
Online
booking reservation system refers to booking or cancelling tickets using
can be done the internet. Ticket
reservation. either for travelling or watching shows or movies or any other kind of
on It includes online transfer of money. A user can check the information available
therelevant
of ticket website and perform the transaction related reservation ticket. Some examples
booking are:
<br>

Information Technology -12th

PART- B
80
Airline ticket
Railway ticket
• Bus ticket
Movie ticket
• Theatre ticket
• Hotel room booking

Car rental booking

Tour and travel booking
any place and for any location. While booking he
The tickets can be booked online from
tickets, all the related information
can be checked online on the respective web application
is also done online. After the booking, the data related to the booking can
and the transaction
be retrieved online as confirmation.

2.2.1 Advantages of Online Reservation/Booking

System
us
customer as well as the provider. Let
Online reservation/booking is beneficial to the
understand in detail:
Advantages for the customer
easy to book tickets without any hassle of
1. Easy to book and convenient to use: It is It is convenient
standing in queues. Booking can be done anytime and from anywhere.
customer needs a
for the customers to book tickets for any type of reservation. The
computer with an internet connection and any mode of online payment for carrying
out the transaction. The customer does not waste time standing in a queue, parking
the vehicle or asking for booking schedule and other details.
2. Comparison between prices: With online booking, it is
easy to compare the prices
and other details on various sites meant for booking tickets like IRCTC (for travel),
bookmyshow, makemytrip and so on. The customer can compare and choose the best
deal.
3. Ticket confirmation: We book the ticket through a website and get the updated
information regarding the ticket status (whether it is confirmed or in waiting) along
with other details. We can book our meal (type of meal as well), bedding facilities and
choose other services like taxi or cab for reaching our destination from the comfort of
our home or office.
4. Time saving: There is no need to stand in queues or wait for the next day to book
the ticket. Websites allow ticket booking 24x7, so you can book the ticket as per your
convenience. Your ravel time is also saved as you get the updated information regarding
your scheduled departure or arrival.
5. Discount related schemes: The users can look for special discount schemes provided
by the service provider, such as season discount, advance booking discount and frequent
user discount and avail them as per their need.
6. Security: Most online reservation sites are secure as per the latest RBI regulations and
related to online transactions. These sites require the user to create their profile
and
provides them with a username and password. Therefore, the user data is secured
protected through a password.
<br>

Web Based Applications

Operating
PARTB
81
Advantages for Providers:
Reduced working staff:Lesss staff is required as every
1. taskis donethrough cornputers.
Reduced physical space needed: The required
2. size of the booking
smmall as less staff is required. This also office can
be reduces the office rent,
other miscellaneous
expenses. Though electricity and
the initial cost for setting up
maintaining it increases, the saving on office the website and
maintenance
is much bigger.
3. Global availability: ( Online reservation can
be made from anywhere
of
world irrespective ia
physical location. You can
book tickets from
around the
Eteravelling. This is an advantage for the customer as anywhere, even
well as for the provider.
2.2.2 Precautions while Performing Online Transactions
Internet transactions are vulnerable to frauds, so we need
to take precautions. When we
use any online
booking/reservation site, we login by providing a usernane
veryimportantto keep the password secure so no
and password. It is
that unauthorized person
can enter through
r account. The following
precautions should be taken while doing online bookings:
1 Make your
password complex by a
using combination of capital letters, small letters,
numbers and special characters. With a strong
password, there are less chances of
hackers hacking your account.
2. Never share your OTP, or PIN with anyone while
doing any online transaction.
3. Don't respond to calls that say they are from the
bank, IRDA, or Tax department which
ask for your personal details. Re cerve
4. You don't have to use your UPlpin to revise the money on any UPI App. Some
fraudsters
claim that they are sending you money but actually they
send you a "Payment request".
5.Never give access to anyone to share your screen for any kind of assistance. Dont use
software like Team viewer or Anydesk.
6.Before entering the payment details on any website, ensure that the site is secure. Check
the following:
(a) A padlock symbol appears in the browser windowframe when you attempt to login
or register.
(b)Even with a padlock symbol, the site might still be fraudulent. Check that the web
address begins with https://. (The 's' stands for 'secure.)
(c) lf you're using the latest version of your browser, the address bar or the name of
the site will appear in green.
I.Always save your online payment receipts-electronic or otherwise.
payment, check your Credit card and bank statements carefully to ensure that the
ler
Correct amount has been debited. and also that no fraud has taken place as a result of
the transaction.
9.Always patches on your operating
install the latest version of the program and security
system when you are prompted to do so.
10.Browsers often Make sure they are activated.
Come with built-in security features.
<br>

Information Technology - 12th

82 PART-B

2.2.3 Operating the Online Reservation Systems To see

system:
Let us understand the operation of the online reservation Onlíne reservation
system
• Open the online reservation website on any web browser like in Action
etc.
Internet Explorer, Google's Chrome, Opera, Mozilla Firefox,
• If you know the address of the website then type the address
in the address bar, but if you do not know the address, open
a search engine like google.com or bing.com or any other and Scan QR Code
search for the online reservation website. Get the address of the
required site. For example, on Google Search,
you can search for online railway booking site Q. Name any 2 web browsers.
(CBSE Board Paper-2023)
like IRCTC, MakeMyTrip.com, Yatra.com, etc.
• Open the website. Q. Name the Indian Government portal
for booking train tickets.
Browse and search for the required information. (CBSE Board Paper-2023)
• Then book your ticket either by creating
your login accountor as a guest user. enokueog potsrc
2.2.4 Case Study: Book a RailTicket
Let us take the example of the IRCTC site. The steps required for railway reservation on
the IRCTC site are:
1. Open the website irctc.co.in.

LOGIN REGISTER AGENT LOGIN cONTACT US ASK DIsHA ALERTS 15Jan-2023 [16:48s1y A AA fta
RCTC EcLUSIVE TRAINS BUSES FLIGHTS HOTELS HOUIDAYS LOYALTY MEALS PROMOToNS MORE
RCTC

PNR STATUS CHARTs/VACANCY

Anrit Mahotsav
BOOK TICKET
G24
DONETYY
1501R023
INDIAN RAILWAYS
AICasses
ontyPunciSy
GENERAL

Peres Wjo Deabay Coocesdos Fesae Wad Date Trsia eih Asaiube Bert
Latry Pass CeaceErios

Search Boolk and get INR 5O00 warth

on ASK
af value vouchers fron So Branch
New 1RCTC leunches cket booking OSA 20Try begkingi As DISSA 28
Tickets booked drougnautharised egants or saiging cas ba leesed wisout rafond.
Please inpat cervec eobile nber of pasaenger for gatting dnely alers os bocked jourbey. O Book Ticket

Have you not found the right one?

Find a service suitable for you here. From The industry Laader
Get yencoe uf indah protecion
against sophisticad attacka

2.3 Fig.
2. When you click the login button, a login window appears.
<br>

Operating Web Based Applications

irctc.co.in/ngettrain-search
PART-B
A

Mans eNCERT EE A Recent Look at th..

83
YouTube
Gmall

LOGIN

User Name

Password
FORGOTACCOUNT DETAILS?

Enter Captcha

Login & Booking With OTP

Sign in

REGISTER AGENT LOGIN

Fig. 2.4
2 Enter the login details (username and password) or
click on the register button to create
a new user login.
A Enter Captcha. Click on login and book. It will send you an OTP in case you want one,
otherwise leave it blank.
5.Click on the Sign in button.
6. The following screen appears which asks for particulars to book the ticket.
RCTC Net Generation eficetin x ONTES oe to locdion Rmoy Passe K

a irctcco.in/nget/train-search G
Recent Look at
M Gmal Maps NCERT
E
A
YouTtbe
th

LRCTC

PNR STATUS CHARTS/VACANCY

Refund Status Re Book Favourite lourney

l BOOK TICKET
Azadi
Amit Mahotsav BisHA
DD/MM
From

JAIPUR- JP 15/11/2022 Get your

IIN Tatkal ticket on1O0DISHA AM
To
AC 1000 AMANon AC

All Classes Buuk bcket

UDAIPUR CTY- UDZ ln
as
aalasL, asy and sece way
whk yaacI

GENERAL

Person With Dlsabillty Concesslon Flexlble With Date

Traln with Avallable Berth Rallway Pass Concesslon

Fig. 2.5
<br>

Information Technology - 12:%

84 PARTB
date and class. And click on
Also mention the
7. Mention the From and To places. search
(as shown).
CHARTS / VACANCY
PNR STA TUS

AzadiKa
Amrit Mahotsav
BOOK TICKET
G2 3023 INDIA

DDIMMYYYY*

07/01/2023
From

All Classes
9 To

EB GENERAL

With Date
Person With Disability Concession |Flexible
Train with Available Berth Railway Pass Concession

Search

on Ask DISHA
New IRCTC launches ticket booking on ASK DISHA 2.0 Try booking 2.0

Welcomne to lndian Raay Pass

& IRCTC Net Generation eTicketin 9NTES
irctcco.in/nget/train-search
Maps NCERT FE A Recent Look at th.
M Gmal OYouTube 9

6
BOOK TICKET
Azadika
Amrit Mahotsav
DD/MM/YYY
From

4 JAIPUR-JP 16/11/2022

To
INDIAN RAILWAYS
All
Classes
NEW DELHI- NDLS
nty Punctuatity

GENERAL

Person With Disability Concession Flexible WithDate

Get your
Train with Available Berth Raitway Pass Concession Tatkal tcket on DISHA
AC 10:00AMANonAC H00AM

Search

wey wchoutyour RCTE pa

New IRCTC launches ticket booking on ASK DISHA 2.0 Ccllck here
hfaL esy and secure
Dn
theiOTCbsthe bnd Mobile App
tndlan Ralhways heve started provisioning of Linen in trains. Click here for the llst of skDSAs aow Nakatle as a vOiaro and
tralns where Linen Services have been restarted as on date. Chatbot in Hndi, Hingit, Englist, and orn
For the
pDSSble
rt
tine, ain edce o
naposathona
oudng RCIC DESSOrd. bo

Fig. 2.6
<br>

Web Based Applications

Operating
PART-B 85
8. The staus
of the available trains with details will
appear, a shown below:
x NTP OWelcoma to
Generaton eTictsr hdan Raay
ARCKNet
irdccoin/ngetbooking/train-ist Pase+
Maps NCERT FE A Recent Look at
M
Grnal
buTube th

JAIPUR- JP
9 NEW DELHI - NDL'
4 16/11/2022 All Classes
3GENERAL Modify Search
Hexible wit Date Irain with Available Heth Person With isability ( onçession Kailway Pass CofEsston

Refine Results Reset Filters 15 Resuts for JAIPUR- NEW DELHI

|Wed, 16 Nov 2022 For Quota | General
Sort By |Duration Show Avnllable Trains
JOURNEY CLASS Select AI|
(Predous Day
Net Duy

DAC First Class VAC 2 Tier (2A) DOUBLE DECKER (12985)

(1A) Runs bn: MT WIFSS
second sltting VAC 3 Tier (3A) Train Scheduie
(25)
AC Chelr car VExec. Chalr Car 06:00 JAIPUR 1 Wed, 16 Nov
(EC)
0425 10:25 DELHI S ROHILLA
| Wed, 16 NoV
(Cc)
sleeper (S4)
V AC Chalr car (CC) Exec. Chalr Car (EC)

Select AII^
Refresh C Refresh C
TRAIN TVPE

GARIB RATH Bool OTHERDATES

Now
OTHER

Fig. 2.7

9. Select the train and click on the Book Now button.

& IRCTC Net Generation eTidetin XNTES xOWekome to lhdlan Pase

e irdcco.innget/booking/train-list G
M Gmal YouTube Maps NCERT EE A Recent Look at th.

Refresh C Refresh C
TRAIN TYPE Select AlI

GARIB RATH OTHER DATES

Book Now

OTHER

Train Schedul
RAJDHANI
ADI NDLS RAJ EX (12957)
Runs On:
MT WTFSS
SHATABD1

JAIPUR | Wed, 16 Nov 04:35 07:30| NEW DELHI | Wed, 16 Noy

SPECIAL 02:55
vSPECIAL TATKAL AC 2 Tler (2A) AC First Class (1A)
ACS Tler (3A)
Sun, 20 Nov
Frl, 18 Nov Sat, 19 Nov
DEPARTURE TIME Select AII
Wed, 16 Nov Thu, 17 Nov AVAILABLE-00
AVAILABLE-O018 AVAILABLE-0011
AVAILABLE-0025
AVAILABLE-0012

00:00 06:00 06:00

-
12:00 may increase at the time of booking.
in this train. Fare will not be added in Fare
Early Morning
Morning Dynamic Pricing is applicable Option then catering charge
in this train if You Opted for No Food
Food Choice ls Optional
12:00 18:00 18:00 - 24:00
Mid Day Night Book Now R1
Train Schedul
00:00 Hr Runs On: MTWTFSS
24:00 Ars
ARRVAL TIME DEE GARIBRATH (12216)
Select AII A

Fig. 2.8
<br>

Information TechnologyJ-12th
PART-B
86
details of each passenger and then make the payment
10. Enter the booking

A Irtccoin/nge/booling/pgnlnpt
NCERT EANeeent Lok t th
M

GaTube Maps

may chek after éntering dàtsik Fare Summary

Senlor Citten eoncesslon not alowed tot
thirein/Quota/cass. Person With Dtabity/ ipurnast
Tleket Pars
ADI NDLS RAJ EX (12957)
02155 | AIPUR 07:30 | NEW DELHI
-04:35 Wed, 16 Nov
Wed, 16 Nov
AC2 Tler (2A) |General
Day: 2 | Boarding Date: 16 Nov 2022
Boardins Station | JAIPUR| Arrtval: 02:45|Departure: 02:55 |

Role: Please sabmlt fuloame of the pessehgers Jnstead of intiels.

•Note: The iD card wll be regulred during Journey

Passenger Detais

No Prelelence
Passenger Name Gender

Food Choloe"

+ +
Add Passenger Add Infant With Berth Add infent Without Berth

Fig. 2.9
This is how you book the train tickets. From the train option, you can also cancel the ticket
or check the other services available and so on.
Crdcaointnget/rainsearch
Gmalbube 9MapsNe Translate

REFUND SATUS Walcome Sharad Saxena (sharad1pr) CONTACT US

Logout ASK DISHAALSRT 07-Jan2023 (11:08:431 A A A
a
IRC1C FYCLUSIVE TRAJNS BUSES FUGHTS HOTELS HOUDAYS LOYALTY
MEALS PROMOTIONS MY ACcOUNT MORE

Boolt Ticktet ROTG

Forsign Tourtat Booting

Fletune 6tatu
Conneeting Journey Booking
BOOK TICKE IRCTC TRAINS
Azadl
AmftMahotsay CancelThelet
chots
PNR Enqiry
From Countar Thcket

Train Bctedale
INDIAN RAILWAYS
Track Yeur Traln
Satety Secunty Punctuaity
FTR GoBch/Train Booking
GENERAL

Pesee Wa Dlsbllry Cacaslos

Flble Wih Date
trale win Aralalle Berth Ralray Pus Concessian

Search

lor CTClauschslckal
bookg on ASK DISHA
20 Iy bookig on Ask DiSA 2D

Fig. 2.10
<br>

Operating Web Based Applications

PART-B 87
2.3 E-GOVERNANCE
E-Governance is an important service
for afast growing economy.
Dornance or electronic-governance can To see
means n
in application of
be defined as the effective E-governance
use offelectronic
Information and Communication in Action
Technology ((CT) for providing government
services, exchange of
information, transactions, integration of
previously existing
and information portals. The tools required services
connection, web browser, computer/laptop or
for its working are internet
mobile, etc. Scan QR Code
E-governance makes the
whole administrative process
officient, transparent, fully convenient,
accountable and responsible.
services include projects like Some examples of e-governance
e-Mitra (Rajasthan), e-Seva
(Common Entrance Test), etc. project (Andhra Pradesh), CET
The government has set up ICT enabled
booking of railway tickets, submission services, like registration
of birth/death certificates,
applications for income tax returns, etc. of RTI applications, filling
economically, and enhances their E-governance empowers the citizens socialy and
lives by providing them with quality
services. E-governance has information and better
brought transparency to the system removing
who used to charge for their services. It by the middlermen
has also brought the citizens and government
government services can easily closer as
be accessed anytime online. The services of e-governance
portal can be broadly classified into two the
categories: to provide information
online services. and to provide
The application which is meant to give only
information so that citizens can understand
by-laws laid down by the government comes the
under the information category, whereas
application which the users can access for directly
filling up the forms like income
the
GST passport application details, modification tax returns,
in aadhar card, voter-id, etc. comes
online services category. under the
Apart from this, there are four types of interactions in e-governance,
viz.,government
to citizens (G2C), government to business (G2B), government to government,
agency relationships (G2G),
and government to employees(G2E). that is, inter
1. G2C (Government to Citizens): In this case, an interface is
government and citizens which enables citizens to benefit from created between the
efficient delivery of a
large range of public services. It gives citizens the choice of when to
(being availabe
24 x 7),from where to interact (e.g., service centre, unattended kiosk, or
from one's
home/workplace) and how to interact with the government (e.g., through
the internet,
fax,telephone, email, face-to-face, etc). The primary purpose is to make the government,
citizen-friendly.
2. G2B (Government to Business): Here, e-governance tools are used to assist the
business community to interact with the government through various websites like flling
forms for GST or tax, etc. The objective is to save time, reduce operational costs, and
to create a more transparent business environment when dealing with the government.
3. G2G (Government to Government): In this case, Information and Communications
Technology is used not only to restructure the government processes involved in the
functioning of government entities but also to increase the flow of information and
services within and between different entities. This kind of interaction is between different
government agencies as well as between national, provincial, and local governments.
The primary objective is to increase efficiency, performance, and output.
<br>

Information Technology-
88 PART-B -12th
The government is by far the biggest employer
4. G2E (Government to Employees): and interact: with its employees.
and like any organisation, it
has to regularly improve
between the organisation and the employees.
This interaction isatwo-way procesS and efficient on one The
use of ICT tools helps in making these interactions fast hand and
levels of employees on the other.
increase satisfaction
G2E
G2C Government-to
Government-to Employees
Citizens

Vernarel
afornatcs
Centee
E-GOVERNMENT

e- G
ioral
Nat G2G
Government-to
Business
G2G
Government-to
Government

N20
NeGP
Fig. 2.11 E-government

2.3.1 Initiative
National Informatics Centre (NIC) established
its ICT network known as NICNET. This network o. NeGP stands for
has institutional linkages across all the ministries/ (CBSE Board Paper-2 023)

departmnents of the central government, governments of states

district administrations of the country. NICNET is a satellite-based
and union territories, and
nation-wide computer
communication network, which is a type of Wide Area Network (WAN) launched in 1987.
DISNIC (District Information System of the National Informatics
Centre) program waslaunched
to computerise all district offices in the country for which free
hardware and software were
offered to the state governments. NICNET Was extended
via the state capitals to all district
headquarters by 1990. Later, computerisation, tele-connectivity
and internet connectivity led
to the establishment of a large number of e-Governance initiatives,
levels. The National e-governance Plan (NeGP) both at the union and state
has been formulated by the Department o
Electronics and Information Technology (DEITY)
and Department of Administrative Retorms
and Public Grievances (DARPG) in 2006.
<br>

Operating Web Based Applications

PART-B 89
NIC NETWORK

National Long Distanoe

High-speed (Multiple 10 Gbps) Connectivity form State
Leased Data Circuits to State Capitals to Districts Usíng
Capitals 34/100 Mbps/1 Gbps Leased
Circuits

VSAT Servlce At (Connects National Data

100+ Locations Ners s on High-speed
work

|Secure Access Through VPN

and Secure W-fi Services

Fig. 2.12

2.3.2 E-Governance Sites

Some of the central initiatives for e-governance include:
• National e-Governance Plan (NeGP)
Q. Mention any one e-Governance
• National e-Governance Division (NeGD)
initiative taken by the Central
e-Governance Infrastructure Government of India.
(CBSE Board Paper-2023)
Mission Mode Projects
Citizen Services
• Business Services
Government Services
• Projects and Initiatives
• R&D in e-Governance
• MyGov Initiative
• National Scholarships Portal (NSP)
• Darpan Portal
• DigiLocker
Geo-informatics e-governance
• National Centre of steps to promote
innovative
have taken various services
Several state governmentsroadmaps for IT implementation and online delivery of
up their own e-governance sites of India are as follows:
and have drawn the key information
to the citizens. Some of of India, which helps in accessing
is the national portal this portal
entities. The contents in levels. This
1. india.gov. in: This government
services provided by the variousdepartments at the central/state/district
and
various ministries and E-Governance Plan, designed and
are shown by Project under the
National Government of
Mission Mode (NIC), Deit Y, MoCIT, and
portal is Informatics Centre
maintained by National
India.
<br>

90 PART-B Information Technology - 12th

p tn meh codert gn in RegltA SA

n
ON
india.gov. in
national portal of india TOPICS SERVICES MY OOVEPNAENT PEOPLE OROUPS NOIAAT AGLANCE

MOST Bnth centicate(brvvng(cene AD

(o
SearchKepword, Phrese Santo SEARCHED

63 Intamatonal Fln Fosthval of inde

53 INTERNATIONAL
FILM FESTIVAL OF INDIA
20"H - 28 NOVEMVBER 2022

News Highlights Most Requested Information & Forms Activities & Initiatives

>> Voe President praises glorlous > Acoass sorvloes of Department of Telecommunicaitons
history and rich cultural.
>>Natlonal Sporta Aardoss pay tribute to falen > Webslte of State Resource Centre for Women of Naguland
heroes at Delhi.
> Wobalte of Indian Instthute of Forest Management Initlatlve of the Govermment of
>>Ushering ln a naw era of good govemance in Jammy & Kashmir india to caletrate end
>» India continues to make strides in Webslte of Departmont of Spaca orta r
Yenrs of
the worlid of manutacturing nca of progressve
> PM Invtos partidipation in Mann ki
Baat quz
>
Webaite of Morona ditrict of Madhya Pradosh Inda
>> UIDAI releasos Odober Monthly
Progross and Achievement Raport > Webte of Natlonal Certro for Antarctic and Ooen Reseerch

> India has emerged es a net seurty provideer in Indo-Pacilc..

more new
> Infomatlon on Kalidas Academy in Uijain dstrid of Madhya.
G2.4
LOne Earth One Family One

Fig. 2.13 India.gov.in website

https://www.india.gov. in/web-directory-government-india (Government of India
Web Directory): This portal is a one-point source to access all Indian
at all levels and from all sectors. It also includes sites of different statesGovernment websites
of India, and sites of government departments like the judiciary
and union territories
and legislature. It provides
information about the various sectors like education and agriculture as
well.
E-governance initiatives in India are discussed at http://india.gov.in/e-governance.
https://nceg.gov.in/:The Indian e-governance portal is https:l/nceg.gov.in.
you can get comprehensive information On this portal,
regarding the National Conference on e-governance
and reports of earlier conferences.

2.4 ONLINE SHOPPING AND BILL PAYMENTS

Online shopping is an e-commerce application where
the customer To see
can purchase goods over the internet. There are 10 best online
various websites from
where a customer can shop online. The customer can purchase all shopping sites
in Action
kinds of items, like books, TV, mobile phones, clothes,
shoes, cosmetics,
jewellery, greeting cards and what not. The goods are purchased by
making the payment using a debit or credit card or Cash on Delivery
(COD). The goods are then delivered at the address specified
by the Scan QR Code
customer on the specific date of delivery.
<br>

Web Based Applications PART-B 91

Operating

$20.00
ADD TO CART

Fig. 2.14

2.4.1 Benefits of Online Shopping

Online shopping is useful in many ways such as:
• It is convenient especially when the customer does not have time to go to the market
for shopping.
• When the market is at a far off location.

• Overhead expenses such as travelling to the store, parking etc can be cut.
you need.
•It saves the hassle of searching the market for the product
• In case you want to send a product to your friend, you can purchase it online and
get it delivered directly to your friend anywhere in the country. This means you save
your time and energy.
can shop 24x7 from your office, home
•
Since online shopping has no fixed hours, you
or anywhere else.
• Various online payment schemes are offered by the online shopping applications.
• In case of defects, the goods can be returned or replaced, making online shopping

more convenient.
customer to register
Every online shopping site provides security features by asking the
as a user. At the time of shopping, the user has to login with the
username and password
tor ensuring safety while making payment.
<br>

PART-B
Information Technology --12th
92
2.4.2 Working of Online Shopping Apps
There are various online shopping sites and is an e-commerce
every shopping site is different. Each site can be application where the customer Can
customised for different users. Let us únderstand purchase goods over the Internet
some of the steps of online shopping sites: (CBSE Board Paper-2023)

Open the shopping site.

• You can login with a username
and password for customised preferences. You can
browse the site for the products you want to see and logout after browsing.
• If you wish to buy goods, then after browsing the site and searching for the products
you can add them to the shopping Cart by clicking on Add to Cart button. Cart is like
a shopping basket where you can add the products you want to buy from the online
shopping stores.
After selecting the products, you can view what you have selected and check the total
amount to be paid by you.
• You may delete any
product from the shopping cart, or proceed for payment.
• Read the terms
and conditions before making the payment.
Some examples of online shopping stores are:
1. Amazon: Amazon is a popular online shopping website where you can
range of new and secondhand items, buya wide
ranging from books and music to computers
and cars.
amazon. 3intvr dres
2EN
Selles selles Mbles fotayy De
Cw Seect
rpstesCocon Soin
HOSTEL DAZE
Under 1,499
4 Star rated & aboye
headphones
Free Delivery ont oder

Redeflne your living room Shop &Pay ) Earn rewards Up to 60% off Professional
daly tools, instruments &more Sign in for your best
experience

LAPTOPS
FROM TOP BRANDS

en you py ore
See morg

See org

Exclusive offers on travel Shop by Category Up to 60% off | Styles for

tickets Car &
bike
Women essentials| Up to
60% of

Fig. 2.15 Amazon

2. Flipkart: Flipkart is also an online shopping site. From electronics to kids' toys, Flipkart
offers a wide range of products that customers
love to buy.
<br>

Operating Web Based Applications

PART-B 93
hpeg atr
Flipkort Search for products, brands
and more
Betome a GAder More

Grocery Mobiles Fashion Electronics -

Home Appliances Travel Top Offlers Beny Toys & Mrs 2Vheslers

realme
realme C33
50MP Camera at Lowest Price
11,999 From 7,990*
Bourice s9 Ses Desa

Best of
Electronics
VWWALL

Printers Top Microloss Camoras

Printers Top Deals of Camera
Accessorl. Pramlum PowerBanks
From 2336 Shop Now From t3999 Shop Nowl Shop Now
Canon, Sony, Fujifilm. Tripods, Gambals, Bags EMIFest
Ms, reelime & more
Caron Up fo 65% O
Os Tvs Appancan

Beauty, Food,

Fig. 2.16 Flipkart

3. Ebay: Ebay is an American multinational e-commerce company based in San Jose,
California, that allows online shopping through its website. eBay was founded by Pierre
Omidyar in 1995. eBay is a multi-billion-dollar business with operations in about 32
countries, (by 2019). Alltypes of products in categories like movies, music, games,
mobiles, cameras, computers, healthcare and personal products, home appliances and
electronics, stationery, perfumes, toys, apparels, shoes, books, cosmetics and mobiles
are available on ebay.

Cbayo
Daly
Da HD& Cenlad

ebay a Search lor anything ACat

Deeteea otor fohien Co

d At
Roneg Soed

The best of the top

categories
Sneaket, olectioic toys anifnio8
elect

Buy it toy>

Daily Deals See pll

12:23

So99
664.99 ore

Fig. 2.17 Ebay

<br>

Information Technology - 12th

94 PART-B
ibibo.com,snapdeal.comandinfibeam co
are: yebhi.com, myntra.com,
Some other sites

2.4.3 Bill Payments bill payment from credit

eavd
are meant for any kind of
Online bill payment applications apps allow you to make payments using credit or
bill payment
bill to mobile bill. The online or vouchers at the time of payment
or banking. Some applications give points
debit cards net making the payments. Bill payments
can also be
Always read the terms and conditions while income
many government services like electricity bill, water bill, property tax and
made foF
tax.
TESTS
2.5 ONLINE COURSES, TUTORIALS AND
Online courses and tutorials are very popular these Q.Write advantages of online tutoríals,
new software (CBSE Board Paper-2023)
days as they help the user în learning
or some new course or a lesson. In online tutoring, via
are at physically different locations, connected to each other
the students and the teachers
the Internet. Online learning has many advantages like:
own convenient time and place.
1. It makes the learner free to choose his/her
on the basis of age, caste, gender, background, or
2. The learner cannot be discriminated
qualification.
3. The online learning material is mostly well supported by audio and
video, which makes
learning more enjoyable and attractive.
4. Tutorials and tests are provided for all topics even in other regional languages.
5. Supplementary supporting material is also available, like problem-solving sessions,
or clarify
webinars (real time lectures) where users can participate and ask queries
doubts.

2.5.1 Online Tutorial/Learning Sites To see

Many online sites related to education are available, like: 7 best free learning
websites for students
1. Khan Academy is an educational website created in 2008 by in Action
an educator. Khan Academy is a not-for-profit educational
organisation started by Salman Khan in 2008. Its mission was
to provide free, world-class education to anyone, anywhere.
The website hosts video tutorials on different subjects like, Scan QR Code
mathematics, history, physics, chemistry, civics, and economics.
Learners can view the video lectures as per their convenience.
<br>

Operating
Web Based Applications PART-B 95

Caurees OKhan Academy

Denste

For every student,

every classroom.
Real results.
Weie a nonprofit ith the mission to proylde a frer, ward-dans
cducation for anyone. anehere

00

Fig. 2.18 Khan Academy

2. udacity.org is a site which offers online courses for development of technical skills. Udacity is
an online education provider that offers online courses popularly
known as MOOCs or
Massive Open Online Courses. As compared to others, MOOC provider Udacity
focuses strongly on job training. Udacity offers a micro-credential called Nanodegree.
Sometimes, Nanodegree courses are released for free.

udacity com/nanodegree

Walcóme o Udacty!! M your bursonai disc

discount no ndsvahin 7 days Latn
Explofe programs and us n

wUDACITY Why Udacity? Student Success Schools Sign in Get Started

Explore our schools to find your perfect

program
Match your goals to oúr programs, exp)loreyour optins and map out your path to. cocoens

SCHOOL OF SCHOOL OF SCHOOL OF SCHOOL OF SCHOOL OF SCHOOL OF SCHOOL OF sCHOOL OF

Data Science Artificial Programming Autonomous Cloud Computing Buainess Cybersecurity Product
Inteligence Systoms Management

All Our Programs Include

Real-world projects from Technical mentor suppot

Fig. 2.19 Udacity website

3. coursera.org and edx.org provide high quality online courses for free. They operate in
collaboration with various universities across the globe. Users can check or review almost
any course on edx for free; however, to access exams or complete a verified certificate,
<br>

Information Technology - 1
96 PART-B 12th
you need to pay a fee. Of
course, you can subscribe, pre-pay for all courses,
a free trial.
The or pay
specialisation subscriptions include courses
the course. All
including
include
courses for the school
science, and engineering
topics from humanities, courses for a fee. level.
verified certificates for several
These sites provide
Find your
DeesV
Ooline Carr Por Brtarpe Por n

La
COursera Whetdeyou wart to am
lor in-demand lech oles with ho Blan Corost cncn tom BTS Pln.
Ned Prep

Learn Without
Limits
Start, switch, or advance your cafeer with more than 5,000 courses,
Protessional Certificates, and degrees from world-class universities
and companies.

Join for Free Tyy Coursera for Buslness

We collaborate with 275+ leading universities and companies

aws
@
Google IsD Stanford OMetg BM

Fig. 2.20 Coursera.org

ourtes v Pograma& Oegreoev sehoels & Purtern whatdo yau wan to leam a eGCFor Busleess

Start learning from

the world's bestinstitUtions
Search ou 3000+ eourses Search

417,124 poge ere ieyningon edk todiy

HARVARD Berkeley n

Learn from more than 160 member

universlties

6dk ang Rs
gtecnologes tor prfonnanc, analyis, ond marallng @urosh
nmor atou these
ecpkogisin thebacb

Fig. 2.21 Edx.org

4. u3schools. com offers free tutorials in all web development technologies like HTML, ,
Javascript, PHP etc. W3 Schools is, and will always be, a completely free develope
resource. W3 Schools is optimised
for learning, testing, and training.
<br>

Operating Web Based Applications PART-B 97

Blareneeg Eereises Videon

Wterials etCershed Frse Wbite Log

Learn to Code
With theworld's largest web developer
er site,

Searh ur tloral, esHTHL

Not Surr Where To Begin?

HTML HTML Examples

The language for building vweb pees teI Tterlal/tiees

a1s is badng/ht

Fig. 2.22 w3schools. com

5. GCFLearnFree.org creates and provides quality, innovative online learning opportunities

to anyone who wants to improve their skills in technology, literacy and maths that are
needed to be suçcessful in both work and life. The GCFGlobal.org program has helped
millions around the world in learning the essential skills they need to live and work
in the 21st century by offering self-paced online courses. It has 750 different lessons
provided absolutely free. GCFLearnFree.org is a worldwide leader in online education.
GCFGlobal Enelish

Learn Your Future

Leim and deveop th sls needed to adhanc
in ork and Wfe

Watch video

Did you come to learn? You're in the right place.

to learn the essential skills they need eo
e
and
who have come to
us
walks of IHe
Joln more than 200 llon peoplefrom all cour extershee library
work in the 21st century, Browse

A
coRE SIILLS READING & MATH Toplcs)
TECHNOLOGY

Fig. 2.23 GCFlearnFree.org

an NCERT portal that provides online learning
6. http:/www.ncert. nic. in/index. html is papers, children's books, etc. The
resources in the form of e-books, journals, question
1 to 12 in English, Hindi and Urdu in PDF
App contains all NCERT Books from Class
also.
format which can used in OFFLINE mode
<br>

Information Technology - 12th

98 PART-B

National Coundl of Educational kesdarch

& Iranins

s d
Dywifregry Meon Annets
ee Abet'

National Council of Educational

Research And Traíning

VenicRT fartes

NCERT Constituents

RE Aymet

Fig. 2.24 NCERT website

7. Udemy (www.udemy.com): Udemy is an online learning and teaching market
place
with over 213000 courses and 57 million students.

cengae
Ücdemy

Unkock the power of your

people

A broad selection of courses

Choesa from 213,000 online video courses with oy addticns pulished everyy noath
n
y Eacat b Dvelpent atogt Deta Betancs ANS Cartituln Deng

Expend your caroer opportunitias wtth Python

leen ha ta budevenytNng tbom gumes to sites to ppsChooe brom a rungesfcooses tha anosal t
arsPn

Fig. 2.25 Udemy.com

In addition to learning, there are several sites that allow the students to test their knowledge.
These websites host tests in different subjects. The learner can take a test and get evaluated.

2.6 PROJECT MANAGEMENT WEB BASED APPLICATION DEVELOPMENT

Web development is the process of building websites and web
To see
applications that work on the internet. A web application development The life cycle of project
refers to the web design and development of application programs management
in Action
that are located on distant servers and use the internet to deliver those
on the device of the user. A web app is accessed through an
internet
connection and does not need to be downloaded. It means that any
end-user can open a web application via Chrome, Mozilla Firefox,
Scan QR Code
<br>

R M
Operating Web Based Applications D
D PART-B 99
or any other similar web browser. Most
Safari of these web applications are written in CSS,
HTML or Java.
A application is like making an online
web
quiz, a gane, or a bill calculator. A project is
planned with various stages involved in completing and
implementing it.
A project is defined as a sequence
of tasks
that must be conpleted to attaina certain
outcome. Some of the key characteristics of a project are as
. Aproject follows:
has a beginning and an end. There are deadlines for
project. the completion of the
.A
project requires fixed resources
to complete the project.
. Every
project is unique, producing something that did not exist previously.
. A
project is predefined and operates within certain constraints
of time, money, quality,
and functionality.
A project is complete when its end objectives are achieved.
The objectives are specific,
pre-defined and identifiable.
Project management is the application of skills, experience, knowledge, methods, and
processes to achieve the objectives of a project. Management is
the process of achíeving the
objectives of the project through a set of activities defined within the given time frarne, to
produce the end result. It is the application of knowledge, skills, tools, and techniques to carry
out activities to meet the project requirements.

2.6.1 Project Essentials and Tips

Let us discuss how web applications are created.

Phases in a Web Application Project

A web development lifecycle concerns all the stages that go into building the website, from
formulating the idea to coding and designing, to deploying and maintaining. These are the
standard or methodical steps to follow to achieve a well-functioning website. It gives an outline
of the basics of a software development lifecycle for a web developer and project manager to
follow to ensure minimum errors and optimal results.
The 7 stages of a web development cycle are:
1. Research 2. Planning
3. Designing 4. Content creation
5. Development 6. Testing
7, Maintenance
1. Research and Analysis
process. To ensure that your
Most people ignore this critical step in the web development
information about the project and the
design and development is on the right path, gathering
client is crucial.
a of what he/she is working for and what are the
A developer must have clear idea
requirements so that he/she may provide the correct solution.
or your clients during the information
Some the common questions to ask yoúrself
of

gathering stage are:

<br>

Information Technology - 112th

100 PART-B

Púrpose:
• What is the purpose of the website? - informational, commereial, product, or
• What type of website/app will it be service-
based?
• Who is your target audience?

Requirements:
• Is there adequate demand in the market for the contents of your website?
• Why do users need your website?
consumers are you trying to fulfill?
• What requirements of the
website?
• What are the non-negotiable requirements for the
Expectations:
to be?
• How do you expect the look and feel of the website
• Howand what will the website generate for your business?
• What features will the user expect from such an application?
• What are some features you wish to include?
benefitted
During this phase, it is important to visualize the type of people who will be
by the website. Taking into consideration their age, gender, preferences, and needs, set goals
surveys and getting
and generate requirement elicitation documents. Many times, conducting
user feedback on the problems they are facing and what are the solutions they are looking for
proves beneficial.
You need to analyze your web app ideas and see its feasibility and profitability.

2. Planning and Strategy

The website development plan involves all aspects of the website, including design,
technology, content, and marketing. Based on information gathered and analyzed in the
previous stage, informed decisions are made about the structure and features of the website.
In the Planning phase, a dedicated team is formed with each member having a defined role
and delegated with clear tasks.
Deciding on the content structure, rough designs, choosing the technology stack and
software development methodology are important decisions to take before the creation of the
website. Technology stack is a set of programming languages, web frameworks, and software
that are used to build any web app.
Creating a sitemap, estimating timelines, defining deliverables, and allocation of resources
are also essential parts of the planning phase. Finally, you have to decide on the branding of
your website before moving on to the Design phase.
3. Designing the layout
The web design stage involves designing the layout of the website and bringing the creative
UI-UX (User Interface-User Experience) designers to the forefront.
The layout involves designing a rough graphical sketch, to get a feel of the design of the
website. The purpose of the layout is to present an information structure, enabling a visual tou
of the content and base features for your clients.
<br>

Web Based Applications

Operating
PART-B 101
mind the target audience requirements, design an
Keepingin
preferences and demands. Include. interactive e website that caters
to their graphics, colours, and other media to attract users
without deviating from the branding and purpose of the website.
Creation
4. Conternt an
Content plays important role. If you
are unable to
communicate with your customers
no amount of fancy
design can help you.
andreaders,
Creating a communication channel through the user interface is
the main aim of the
content creation stage.
Content writing involves
providing relevant information about your company in an easy
nanderstand, attractive manner. Adding calls-to-action, creative headlines, formatting, line
oiting, writing, and updating texts go on throughout the web development lifecycle.
Content is the only way to interact with end-users and convert them into customers, so
make sure to pay due attention and focus on users' problems and the solutions you can
offer.
5. Code and Development
The development phase involves the actual building of the website. Developing the client
side and server-side of the website is accomplished in this stage. It is
the most time-consuming
part of the website development life cycle.
Q.Define
Front End, with respect to web
(a) Front-end web development based application project.
To develop a web page, the web design process is (CBSE Board Paper-2023)
decided in the early stages to transform into interactiveQ.RDBMS packages are widely used as
elements on the web page. Web designers integrate (Frontend/Backend)
components and functions into the website skeleton, (CBSE Board Paper-2023)
using web frameworks and development tools. Q. Requirement,
HTML, CSS, and a scripting language, Implementation and Testing are the
generally JavaScript, are used by web designers phases in Web Application Development.
to create a user-friendly site. For a majority of web (CBSE Board Paper-2023)
apps, Bootstrap and Foundation are preferred for
front end development using HTML and CSS.
For JavaScript, several front-end frameworks are available in the market.
To keep up with the latest market trends, a mobile-based counterpart of
your website is
alsorecommended. Using mobile-friendly elements in your website design or developing a
mobile application is a good option.

(b) Back-end web development

web app. While the front-end
Ihis phase involves developing the actual features of the
users, the backend codes the instructions for each
designs the visual elements. dealing with the
element to perform the necessary functions.
encompasses the process of developing the server-side app, creating
ne server-side server and client-side functions.
databases, application logic, and integrating
writing the
Developers use programming languages in this stage.
several technologies and to the list of tasks of backend
Recently, Search Engine Optimisation (SEO) is also added
tasks for the developers. Including these features can attain higher rankings for your site in
search engines like Google.
<br>

Information Technology-12th
102 PART-B

6. Testing and Quality Assurance

website is developed,
a set rigorous tests are conducted to eliminate any bugs
of
the
After
perform repeated testing such
system. The Quality Assurance (QA) team meticulously
in the checking the functionality,
as Unit testing, Stress testing, Integration testing, and Load testing
usability, compatibility, and performance of the
web app.
is important for a well-functioning site that provides a seamloce.
Project consistency on all devices and platforms is also crucial
experience. Testing the working of all features
as plugins and SEO-optimisation ensures
Apart from this, making small additions such a till the OA
a smooth deployment. Testing Engineers and Developers work together in loop
users.
team is satisfied that the final website is ready for the

7. Deployment and Maintenance

Once the QA team approves, the website or
app is finally ready for deployment. Using File
servers ànd is available to the viewers.
Iransfer Protocol, the app is hosted on web
user interaction lets you know the
But the work is not over. Continuous feedback from
scopes for improvement. Accordingly, the web application development lifecycle is executed
to make the necessary modifications.
are absolutely crucial to keep the site
Apart from this, regular maintenance and updates
functioning perfectly and for engaging new users.
Many times, if you are hiring a web development company or custom website developers,
you don't neglect
the day-to-day maintenance of the website falls into your hands. Ensure that
cases.
the post deployment maintenance services in such
no matter
Every phase of the programming lifecycle of web development is significant,
how small or big the project is.
Although coding is a very important aspect of any software development project, it is
also important to not neglect the other steps of web development such as design,
content
generation or security checklists, or tests by the QA team.
Website development lifecycle is a constant journey that can be made better every day.

2.6.2 Case Study--Online Game

the Online Game. Here, we will create n
First, let us define the problem statement for
online game called Wordle. It is a simple guesing game where a player has to guess a b-ete
word with the help of the given hints. Let us create this game.
Problem Statement: Wordle is a popular word game. In this game, a player types
word. The player has to guess the word in six tries. Each guess must be a valid 5-letter wou
The colour of the tiles will change to show how close your gquess is to the original word.
1. Requirement Definition: The problem statement is identified.
identify the
(a)Feasibility: The students are encouraged to discuss in groups and w
technical requirements for this project to evaluate whether it is feasible to implement
<br>

Operating Web Based Applications

PART-B 103
Abe scope of resources available in the school. The steps are
based on the assumption that the
project is feasible.
(b) Scope: The application must
perform the following:
(1) Ask the player to login.
(ii) The game randomly selects a word
green colour (the letter is at
and highlights the available letters in the word with
the correct position), yellow colour (the availability
letter but at some other place) and grey colour of the
(the non-availability of the letter in
word). the
(ii) The player makes guesses. The guess is either a hit (successful) or a
willget sx attempts. miss (fail). The user
If it is success, the game gets over. program
user to make a total The should allow the
of six guesses.
2. Design:
(a) A Map of the Web Application
Site: The students are encouraged to design the
structure of the sets by identifying the pages
for this site. They need to make a login
page then only the user can play game.
the Determination of relationships between
these pages is also very important for the design of the website.. For
willbe designed for example, a page
front-end interface containing leads to other pages. Implementation
has to follow this design structure.
(b) Database: It is decided to create the following
tables in the database, along with the
Attributes of the tables, their data types, and the sizes of the columns:
• User login
Game detail
Table: User
S.No. Name Type Description
1. Username Varchar(25) Unique user name
2. Password |Varchar(16) Password
Table: Games
S.No. Name Type Description
1. guessword Varchar(6) The words that the user will guess
2. No of trial Integer Validation will be applied. The user
cannot go for more than 6 attempts
3. Win Boolean Whether the user wins or loses
(c) Page Structure: Design the structure of the page.
It is found that the inputs required from the user are as follows:
• Login by the user
• Guessing
the words
<br>

PART-B
Information Technology - 12th
104
The following front-end interface
can be designed.

Enter User Name

Enter Password

Wordle
Wordle ??
G R AB OU
G R
R

T L TAST E

TEPID TH1 EF
T1ERS
L
DE
3. Implementation: Create the back-end database, front-end, and the connectivity
between them.
4. Test: Having implemented the complete application, test the application with random
data. Test each feature and functionality of the application. Fix the bugs, if found and
retest.

2.6.3 Case Study Online Quiz

Creating a new quiz is a two-step process. In the first step,you create the quiz activity and
set its options which specify the rules for interacting with the quiz. In the second step, you add
questions to the quiz. This page describes the options you can set for the quiz activity.
Let us now define the problem statement for an Online Quiz. Since the pen-paper method
of quiz is time-consuming, less flexible and involves a lot of human effort in terms of corrections,
generating results, searching records, result analysis, etc., so it is better to createa a web-based
online quiz.
Problem Statement: The online quiz web application allows a number of students to take
the quiz at the same time and displays the results as the test gets over. The result is generated
automaticaly. A first-time user has to register to get a login and password. The user then uses
this login and password to take the test and also to see the results. Once logged in, the user
can select the category for which to take the quiz. The user then attempts the quiz. When the
quiz is complete, a report is generated based on the correct answers. The administrator has the
privilege to create, modify and delete the quiz questions.
1. Requirement Definition: The problem statement is identified.
(a) Feasibility: The students are motivated to discuss among themselves or in groups and
identify the technical requirements for this project and evaluate whether it is teasiole
to implement it within the scope of resources available in the school. Looking at ue
development, the project appears feasible.
<br>

Operating Web Based Applicaticns PART-B 105

(b) Scope: The application must perform the following:
(i) Allowa user to register.
(ii) Provide login and password to the user.
(iii) Allow user to select a category of quiz.
(iv) Display the quiz questions for the selected category to a valid user.
(v) Generate a report to provide the results of the quiz.
(vi) Allow the administrator to create, modify, and delete questions.

2. Design:
(a) A Map of the Web Application Site: The students are encouraged to design the
structure byidentifying the pages for this site. They need to make a login for registering
in the quiz. Determination of relationships between these pages is also very ímportant for
the design of the website. For example, a page will be designed for front-end interface
containing leads to other pages. Implementation will follow this design structure.
(b) Database: It is decided to create the following tables in the database, along with the
Attributes of the tables, their data types, the sizes of the columns:
• Admin Login
• Quiz information (Here, we take 5 subjects for class 10)
• User Info
• Result

Administrator
Table: Admin Login

S.No Name Type Remarks

1 Username Varchar (20) Username for the administrator
2. Password Varchar (10) Password for the administrator

Table: Quiz Info

S.No. Name Type Remarks

1. Question No |Integer Question number

2. Subject Varchar(15) Subject name e.g. English, Hindi,

maths, SSt, Science
|Varchar(50) Quiz Question
3 Quiz Question
Option1 |Varchar(20) Quiz Question optionl
Varchar(20) Quiz Question option2
5.
Option2
Vrchar(20) Quiz Question option3
6 |Option3
Varchar(20) |Quiz Question option4
7. |Option4
Varchar(10) |Correct Answer from the options
8. Answer
<br>

PART-B
Information Technology - 12th
106
Table: User Info

Type Remarks
S.No Name
Varchar (20) Username for login purpose. It is also a
1. Username Primary key
Varchar (10) Password for user
2. Password
3. Name Varchar (20) User name
4. Email Varchar (25) User's email id
5. DOB Date User's date of birth
Char (1) User gender (M for male andF for female)
6. Gender
7. City Varchar (15) City to which the user belongs

Table: Result

S.No Name Type Remarks

1 Username Varchar (20) Username for login purpose
2. Marks Number Marks scored by the user
3. Subject Varchar (15) Subject which the user attempted

(c) Page Structure: Design the structure of the page. The inputs required from the user
are as follows:
•
User name and password
Selection of Category for which the quiz is attempted
The quiz is displayed to the user. The user selects the answer for each question.
The following front-end interface can be designed.

Enter User Name

Enter Password

UserName Subject

Question1 The question is displayed here

• The option 1 answer

• The option 2 answer
• The option 3 answer
• The option 4 answer
<br>

Web Based Applications

Operating
PART-B 107
Result
Name Login

Subject

Marks

3. Implementation: Create the back-end

database, front-end, and the connectivity Q. In which of the following phase of
between them. web based application project, we create
backend database, frontend and the
4. Test: Having implemented the complete
connectivity between thern?
application, test the application with random (CBSE Board Paper-2023)
data. Test each feature and functionality of the (a) Requirement (b) Design
application. Fix the bugs, if found and retest. (c) Implementation (d) Test

2.6.4 Case Study-Online BillCalculator

Let us now define the problem statement for an online bill calculator. This requires proper
record keeping and reporting. The interface should be interactive, and easy to use. To provide
users with a facility to calculate the bill online, a web-based online bill calculator has to be
Created.
Problemn Statement: The online bill calculator will calculate the bill for an individual
user. It allows a user to enter the bill details. A first-time user has to register to get a login and
password. Once the user is logged in, he/she can enter the details of the bill and the bill is
generated. The administrator has the privilege to add, edit, or delete a user account.
1. Requirement Definition: The problem statement is identified.
(a) Feasibility: The students are encouraged to discuss in groups and identify the technical
requirements for this project to evaluate whether it is feasible to implement it within
the scope of resources available in the school. The following steps are based on the
assumption that the project is feasible:
(b) Scope: The application must perform the following:
Allowa user to register
(1)

(i1) Provide login and password to the user

(iii) Allow entry of user information

(iv) Allow entry of bill information
(v) Display the generated bill
or delete a user.
(vi) Allow the administrator to add, edit

2. Design:
students are encouraged to design the
(a) A Map of the Web Application Site: The to a login page. Only
structure by identifying the pages for this site. They need make
can a user generate the bill. Determination of relationships between these pages is
then
<br>

PART-B Information Technology - 12th

108
also very important for the design of the website. For example, a page will be desianed
for frontend interfacecontaining leads to other pages. Implementation will follow this
design structure.
with the
(b) Database: It is decided to create the following tables in the database, along
Attributes of the tables, their data types, the sizes of the columns as shown below:
User info
• Bill info
Table: User Info
S.No. Name Type Remarks
1. Username Varchar (10) Name of user for login purpose (Primary Key)

2. Password Varchar (10) Password for login

3. Name Varchar (20) Name of user

Email id Varchar (40) Address details of user
4.
5. City Varchar (20) City of user

6. State Varchar (20) State of user

7. Country Varchar (20) Country of user
Pin Code Varchar (10) Pin code of city
8.
Mobile NumberVarchar (15) Mobile number of user
9.
Table: Bill Info
Name Type Remarks
S.No.
1. Usernanme Varchar (10) Name of user for login purpose (Primary Key)
2. Name Varchar (20) Name of customer

3. Address Varchar (40) Address details of customer

4 City. Varchar (20) City of customer
Varchar (20) State
of
customer
5. State
Country Varchar (20) Country of customer
6.
7. Pin Code Varchar (10) Pin code of city of customer
8 Month Dispatch Varchar (5) Month of dispatch of material
9. Duration of Bill Varchar (5) Bill
duration in days
10. Mobile Number Varchar (15) Mobile number of user

(c) Page Structure: Design the structure of the page.

The inputs required from the user are as follows:
Username and password
Interface to select the option of generating or submitting the bill
<br>

Operating Web Based Applications PART B 109

Interface to add a user
Interface to add bill information
The following front-end interface can be designed.

LOGIN
ADD A NEW USER ACCOUNT

USERNAME
PASSWORD

submit reset search

Online Bill Calculator

GENERATE BILL

NAME

ADDRESS

CITY

STATE

COUNTRY

PINCODE

PHONE NUMBER

MOBILE NUMBER

MONTH OF DISPATCH

DURATION OF BILL

AMOUNT

TAX

TOTAL AMOUNT

LAST DATE WITH FINE

FINE
<br>

PART-B
Information Technology - 12th
110

USER NAME
PASSWORD

MPASSWORD

NAME

CITY

STATE

COUNTRY

PINCODE

PHONE NUMBER

submit reset cancel

connectivity between
3. Implementation: Create back-end database, front-end, and the
them.
with random
4. Test: Having implemented the complete application, test the application
data. Test each feature and functionality of the application. Fix the bugs, if found and
retest.

) Solved_ Questions
1. What is web-based application? identify the two types of web applications.
a
Ans. An application that can be accessed over a computer network or internet through web
browser is called a web-based application. A web application (web app) is an application
program that is stored on a remote server and delivered over the Internet through a
browser interface. Such applications are available 24x7 across the world. In modern
times, web-based applications are being used for various purposes like reservation of
tickets and bookings, e-governance, online shopping with the provision of making online
payments by using credit/debit cards, and online tutorials, tests etc.
The web-based online applications can primarily be classified into two types, one that
requires financial online transactions and the other that provides information and allowS
interaction by filling up forms, posting queries, viewing information, sending emails or
chatting.
2. What is online reservation? Why do we prefer online reservation?
Ans. Online reservation system refers to booking or cancelling of tickets using the internet.
Ticket booking can be done either for travelling or watching shows or movies, or any
other kind of reservation where booking of tickets is required. It includes transter of
<br>

Operating Web Based Applications

PART-B 111
money using the online transaction system. user can
A check the information availlable
on the relevant website and
perform the transaction related to reservation of
the ticket.
Tickets can be booked online from any place for any
location. While booking tickets, all
the related information can be checked online on
the respective web application and the
transaction is also done online. After booking,
the data related to the booking can be
retrieved online as part of confirmation.

3. What precautions should be taken for doing online booking?

Ans. The following precautions should be taken while
doing online bookings:
1, Create a complex password by using a combination
of capital letters, small letters,
numbers and special characters. With a strong password, there are
less chances of
hackers your account being hacked.
9
Never share the OTP or PIN with anyone while doing any
online transaction.
3. Don't respond to calls that say that they are from the bank, IRDA, or Tax departrment
which ask for your personal details.
4. You never have to reveal your UPI pin to revise the money on any UPI app.
Some
fraudsters may say that they are sending money to you but actually they have sent
you a "Payment request".
5. Never give access to anyone for sharing your screen for assistance. Don't use software
like Teamviewer or Anydesk.
6. Before entering the payment details on any website, ensure that the site is secure.
Check the following:
(1) There should be a padlock symbol in the browser windowframe which appears
when you attempt to login or register.
(b) Even with a padlock symbol, the site might still be fraudulent. Check that the
web address begins with 'htps://. (The 's' stands for 'secure'.)
(c) Ifyou're using the latest version of your browser, the address bar or the name of
the site owner will appear in green.
7. Always save your receipts - electronic or otherwise.
8. Carefully check your credit card and bank statements after payment to ensure that
the correct amount has been debited, and also that no fraud has taken place as a
result of the transaction.
9. Always install the latest version of the program and security patches on your
so.
operatingsystem when you are prompted to do
10. Browsers often come with built-in security features bult in. Make sure they are
activated.

4. Explain the purpose of e-governance.

can be defined as the effective use of elecronic
Ans. Egovernance or electronic-governance
means in application of Information and Communication Technology (1CT) for providing
government services, exchange of information, transactions, integration of previously
<br>

112 PART-B Information Technology-

12th
existing services and information portals. The tools required are internet connection,
web browser, computer/laptop or mobiles, etc.
E-governance makes the whole administrative process convenient, efficient, transparent,
fully accountable and responsible. Some examples of e-governance services include
projects, like e-Mitra (Rajasthan), e-Seva(Andhra Pradesh), CET (Common Entrance
Test), etc. The government has set up ICT enabled services, like registration of birth
death certificates, booking of railway tickets, submission of RTI applications, fillina
applications for income tax returns, etc.
5. Which is the Web Directory of the Government of India?
Ans. https://www.india.gov.in/web-directory-government-india. This portal is a one-point
source to access all Indian Government websites at all levels and from all sectors. It
also includes sites of different states and union territories of India, sites of government
departments like judiciary and legislature. It provides information about the various
sectors like education and agriculture as well.
6. Write any five benefits of online shopping.
Ans. Online shopping is useful in many ways such as:
• It is convenient for the customer especially when he/she
does not have time to go
to the market for shopping.
• When the market is at a far off location.
Overhead expenses such as travelling to the store, parking the vehicles etc are cut.
• It saves the hassle of seraching the market for the product you need.
In case you want to send a product to your friend you can get it delivered directly
to their address anywhere in the country. This saves your time and energy.
Online shopping has no fixed hours and you can shop 24x7 from your office, home
or anywhere else.
7. What is a project? Write a few characteristics of a project.
Ans.A project is defined as a sequence of tasks that must be completed to attain a certain
outcome. Some of the keycharacteristics of a project are as follows:
• A
project has a beginning and an end. There are deadlines for its completion.
• A
project requires fixed resources to complete the project.
• Every project is unique,
producing something that did not exist previously.
• A project operates
within certain constraints of time, money, quality,
and functionality.
8. Name the seven stages of web development.
Ans.The seven stages of web development cycle are:
1. Research 2. Planning
3. Designing 4. Content creation
4. Development 6. Testing
5. Maintenance.