0% found this document useful (0 votes)

13 views

Web Programming for Artificial Intelligence -1

Uploaded by

t.subhashtcms

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

13 views

Web Programming for Artificial Intelligence -1

Uploaded by

t.subhashtcms

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 78

SIDDHARTHINSTITUTEOFENGINEERING&TECHNOLOGY: PUTTUR

(Autonomous)
SiddharthNagar,Narayanavanam Road–57583

QUESTIONBANK(DESCRIPTIVE)

SubjectwithCode: Web Programming for Artificial Intelligence(20CS0907)

Course&Branch: B.Tech–CSM
Year&Sem: III B.Tech&IISem Regulation: R20

UNIT–I
HTML5, CSS3, XML, JavaScriptandJQuery

1 a What is Web Programming? Briefly explain the Architecture of WEB? [L1] [CO1] [ 6M ]

Web programming is the process of creating web pages. During this process, the
programmer is in charge of shaping the site according to the demands and needs
of the company.

Web architecture refers to the overall structure of a website or web application,

including the way it is designed, implemented, and deployed. It involves the use
of technologies and protocols such as HTML, CSS, JavaScript, and HTTP to
build and deliver web pages and applications to users.

Web architecture consists of several components, including the client, the server,
the network, and the database. The client is the web browser or application that
the user interacts with, and the server is the computer or group of computers that
host the website or web application. The network is the infrastructure that
connects the client and the server, such as the internet. The database is a
collection of data that is used to store and retrieve information for the website or
web application.

Web architecture also includes the design and layout of the website or web
application, as well as the way it is organized and the relationships between
different pages and components. It also includes the way the website or web
application is built and maintained, including the use of frameworks and
libraries, and the deployment and hosting of the website or web application
b What is HTML? Briefly explain the tags in HTML? [L1] [CO1] [ 6M ]

HTML tags are like keywords which defines that how web browser will format
and display the content. With the help of tags, a web browser can distinguish
between an HTML content and a simple content. HTML tags contain three main
parts: opening tag, content and closing tag. But some HTML tags are unclosed
tags.

 The <!DOCTYPE html> declaration defines that this document is an

HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

2 Create a Simple job Registration form using HTML [L6] [CO1] [12M]

<!DOCTYPE html>
<html>
<head>
<title> Job Registration form</title>
</head>
<body>
<h2>Job application form</h2>
<form>
<h3>Personal Information</h3>
First name: <input type="text" name="Fname" placeholder="first name">
Last name: <input type="text" name="Lname" placeholder="last name">
Middle name: <input type="text" name="Mname" placeholder="middle name">
<br><br>
<table>
<tr>
<td>Current address</td>
<td>Permanant address</td>
</tr>
<tr>
<td><textarea rows="5" cols="15" name="Current address" placeholder="type your
address...."></textarea></td>
<td><textarea rows="5" cols="15" name="Permanant address" placeholder="type your
address...."></textarea></td>
</tr>
</table>
<p><strong>Phone:</strong></p>
Home Phone: <input type="number" name="pnumber" size="20" maxlength="5"
placeholder="Country code">
<br><br>
E-mail: <input type="E-mail" name="email" placeholder=" email address">
upload cv: <input type="file" name="cv"
<hr>
<br><br>
<hr>
<strong>Employment Details</strong>
<br>
<p><strong>position:</strong></p>
Professor: <input type="radio" name="position">
Assoc Prof: <input type="radio" name="Position">
Assit Prof: <input type="radio" name="position">
<br>
<p><strong> Are you Currently employed </strong></p>
yes: <input type="radio" name="employee">
No: <input type="radio" name="employee">
<hr>
<strong>Start date:</strong>
<input type="date" name="start date">
<hr>
<strong>Avalability</strong>
<br>
Monday: <input type="checkbox" name="day">
Tuesday: <input type="checkbox" name="day">
Wednesday: <input type="checkbox" name="day">
Thursday: <input type="checkbox" name="day">
Friday: <input type="checkbox" name="day">
Saturday: <input type="checkbox" name="day">
<hr>
Submit: <input type="Submit" name="submit">
Reset: <input type="reset" name="reset">
</form>
</body>
<html>

3 Explain HTML 5.0 and mention the tag differences between HTML and [L5] [CO1] [12M]
HTML 5.0?

HTML HTML5

It didn’t support audio and video without the use It supports audio and video controls with the use of <audio> and
of flash player support. <video> tags.

It uses SQL databases and application cache to store offline

It uses cookies to store temporary data. data.

Allows JavaScript to run in background. This is possible due to

Does not allow JavaScript to run in browser. JS Web worker API in HTML5.

Vector graphics is possible in HTML with the Vector graphics is additionally an integral a part of HTML5 like
help of various technologies such as VML, Silver- SVG and canvas.
light, Flash, etc.

It does not allow drag and drop effects. It allows drag and drop effects.

Not possible to draw shapes like circle, rectangle,

triangle etc. HTML5 allows to draw shapes like circle, rectangle, triangle etc.

It supported by all new browser like Firefox, Mozilla, Chrome,

It works with all old browsers. Safari, etc.

<HTML>,<Body> , and <Head> tags are

mandatory while writing a HTML code. These tags can be omitted while writing HTML code.

Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.

Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy.

4 Create a webpage using HTML and add CSS to the webpage. [L6] [CO1] [12M]

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

5 a What is CSS? Explain the CSS box model. [L1] [CO1] [ 6M ]

In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

b What is Inheritance? Explain the CSS Inheritance? [L1] [CO1] [ 6M ]

Inheritance is a process of receiving values of properties by a child element from

its parent element.

This is a simple example of inheritance:

In the external css file, we have set color for H1 element as maroon. Now look at
the html source code, we have an i element, located within H1 element, to make
the word inheritance italic. Because of inheritance, word inheritance has also
become maroon since it is a child element of H1.

View the example in a browser.

To set the value of a property which you want to be applied throughout a web
document, you can place that property value at the very top level of the document
tree, for HTML, which is html or body element. Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><title>This is to understand CSS Inheritance - Example 2</title>
<head>
<link href="inheritance-all.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
<p>This paragraph inherits the value form body element</p>
</body>
</html>

6 a Discuss the CSS Text Properties [L6] [CO1] [ 6M ]

To manipulate text using CSS properties. You can set following text properties
of an element −
 The color property is used to set the color of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space
between the letters that make up a word.
 The word-spacing property is used to add or subtract space
between the words of a sentence.
 The text-indent property is used to indent the text of a
paragraph.
 The text-align property is used to align the text of a
document.
 The text-decoration property is used to underline, overline,
and strikethrough text.
 The text-transform property is used to capitalize text or
convert text to uppercase or lowercase letters.
 The white-space property is used to control the flow and
formatting of text.
 The text-shadow property is used to set the text shadow
around a text.

b Distinguish between CSS and CSS 3.0 [L4] [CO1] [ 6M ]

7 a List and explain in detail the various selector strings with example. [L1] [CO1] [6M]

The CSS element Selector

The element selector selects HTML elements based on the element name.
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to select
one unique element!

To select an element with a specific id, write a hash (#) character,

followed by the id of the element.

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.)

character, followed by the class name.

b Explain XHTML and Specify some new tags in XHTML? [L5] [CO1] [6M]
XHTML elements are referred to as "tags", though many prefer the term tag
strictly in reference to the semantic structures delimiting the start and end of an
element.

8 a What is XML? Briefly explain the namespaces in XML? [L1] [CO1] [ 6M ]

XML Namespaces provide a method to avoid element name conflicts.

In XML, element names are defined by the developer. This often results in a
conflict when trying to mix XML documents from different XML applications.

ML Namespaces - The xmlns Attribute

When using prefixes in XML, a namespace for the prefix must be defined.
The namespace can be defined by an xmlns attribute in the start tag of an
element.
The namespace declaration has the following syntax. xmlns:prefix="URI".

<root>

<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table xmlns:f="https://www.w3schools.com/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

</root>

b Explain XMLDTD Types. [L5] [CO1] [ 6M ]

An XML document with correct syntax is called "Well Formed".

An XML document validated against a DTD is both "Well Formed" and "Valid".

DTD
DTD stands for Document Type Definition.
A DTD defines the structure and the legal elements and attributes of an XML
document.

Valid XML Documents

A "Valid" XML document is "Well Formed", as well as it conforms to the rules of
a DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The DOCTYPE declaration above contains a reference to a DTD file. The content
of the DTD file is shown and explained below.

XML DTD
The purpose of a DTD is to define the structure and the legal elements and
attributes of an XML document:
Note.dtd:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
9 a What is DOM? Briefly explain DOM based XML Processing? [L1] [CO1] [6M]

The Document Object Model (DOM) is the foundation of XML. XML

documents have a hierarchy of informational units called nodes; DOM is a way of
describing those nodes and the relationships between them.
A DOM document is a collection of nodes or pieces of information organized in a
hierarchy. This hierarchy allows a developer to navigate through the tree looking
for specific information. Because it is based on a hierarchy of information, the
DOM is said to be tree based.
The XML DOM, on the other hand, also provides an API that allows a developer
to add, edit, move, or remove nodes in the tree at any point in order to create an
application.
<!DOCTYPE html>
<html>
<body>
<h1>TutorialsPoint DOM example </h1>
<div>
<b>Name:</b><spanid="name"></span><br>
<b>Company:</b><spanid="company"></span><br>
<b>Phone:</b><spanid="phone"></span>
</div>
<script>
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=newXMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/address.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("company").innerHTML=
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

b Discuss the Levels of DOM [L6] [CO1] [6M]

Levels of DOM:
 Level 0: Provides a low-level set of interfaces.
 Level 1: DOM level 1 can be described in two parts: CORE and HTML. ...
 Level 2: consists of six specifications: CORE2, VIEWS, EVENTS,
STYLE, TRAVERSAL, and RANGE.

10 Explain Briefly about JSON and Jquery [L5] [CO1] [12M]

The jQuery parseJSON() method takes a JSON string and returns a JavaScript object.
The specified JSON string must follow the strict JSON format. Passing an incorrect
string will cause a JS exception.

Some of the examples of malformed JSON strings that can cause an exception on
passing are given as follows -

1. {id: 01} // The attribute name id must be double-quoted

2. {'id': 01} // The attribute name id must be double-
quoted instead of single quotation
3. {"name": 'john'} // The value of the name attribute is a string so, it must be do
uble-quoted instead of single quotation
4. ".7" //A number must start with a digit. We can write "0.7"
5. "undefined"// We cannot represent undefined in a JSON string

As similar to the above strings, multiple other malformed strings will cause an
exception. The JSON standard also does not allow the appearance of control
characters (such as tab or newline character) in the string.

Before jQuery version 1.9, if we pass an empty string, null, or undefined,

the parseJSON() method returned null instead of throwing an error.

Syntax
1. jQuery.parseJSON( json )

UNIT–II
Web Applications and services

1 Discuss Briefly about AngularJS. [L6][CO2] [12M]

AngularJS is a very powerful JavaScript Framework. It is used in Single Page

Application (SPA) projects. It extends HTML DOM with additional attributes and
makes it more responsive to user actions. AngularJS is open source, completely free,
and used by thousands of developers around the world. It is licensed under the Apache
license version 2.0.

 AngularJS is a efficient framework that can create Rich Internet

Applications (RIA).
 AngularJS provides developers an options to write client side applications
using JavaScript in a clean Model View Controller (MVC) way.
 Applications written in AngularJS are cross-browser compliant.
AngularJS automatically handles JavaScript code suitable for each
browser.
 AngularJS is open source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license
version 2.0.

<html>
<head>
<title>AngularJS First Application</title>
</head>

<body>
<h1>Sample Application</h1>

<divng-app="">
<p>Enter your Name: <inputtype="text"ng-model="name"></p>
<p>Hello <spanng-bind="name"></span>!</p>
</div>

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

</body>
</html>
2 Explain briefly aboutMVC. [L2][CO2] [12M]

The Model-View-Controller (MVC) framework is an architectural/design pattern that

separates an application into three main logical components Model, View,
and Controller. Each architectural component is built to handle specific development
aspects of an application. It isolates the business logic and presentation layer from each
other. It was traditionally used for desktop graphical user interfaces (GUIs).
Nowadays, MVC is one of the most frequently used industry-standard web development
frameworks to create scalable and extensible projects. It is also used for designing
mobile apps.
MVC was created by Trygve Reenskaug. The main goal of this design pattern was to
solve the problem of users controlling a large and complex data set by splitting a large
application into specific sections that all have their own purpose.

Features of MVC :
 It provides a clear separation of business logic, Ul logic, and input logic.
 It offers full control over your HTML and URLs which makes it easy to
design web application architecture.
 It is a powerful URL-mapping component using which we can build
applications that have comprehensible and searchable URLs.
 It supports Test Driven Development (TDD).
Components of MVC :
The MVC framework includes the following 3 components:
 Controller
 Model
 View
Controller:
The controller is the component that enables the interconnection between the views and
the model so it acts as an intermediary. The controller doesn’t have to worry about
handling data logic, it just tells the model what to do. It process all the business logic
and incoming requests, manipulate data using the Model component and interact with
the View to render the final output.
View:
The View component is used for all the UI logic of the application. It generates a user
interface for the user. Views are created by the data which is collected by the model
component but these data aren’t taken directly but through the controller. It only
interacts with the controller.
Model:
The Model component corresponds to all the data-related logic that the user works with.
This can represent either the data that is being transferred between the View and
Controller components or any other business logic-related data. It can add or retrieve
data from the database. It responds to the controller’s request because the controllercan’t
interact with the database by itself. The model interacts with the database and gives the
required data back to the controller.
3 Explain about LARAVEL framework. [L5][CO2] [12M]

Laravel is an open-source PHP framework, which is robust and easy to understand. It

follows a model-view-controller design pattern. Laravel reuses the existing components
of different frameworks which helps in creating a web application. The web application
thus designed is more structured and pragmatic.

Laravel offers a rich set of functionalities which incorporates the basic features of PHP
frameworks like CodeIgniter, Yii and other programming languages like Ruby on Rails.
Laravel has a very rich set of features which will boost the speed of web development.
If you are familiar with Core PHP and Advanced PHP, Laravel will make your task
easier. It saves a lot time if you are planning to develop a website from scratch.
Moreover, a website built in Laravel is secure and prevents several web attacks.

Features of Laravel
Laravel offers the following key features which makes it an ideal choice for designing
web applications −
Modularity
Laravel provides 20 built in libraries and modules which helps in enhancement of the
application. Every module is integrated with Composer dependency manager which
eases updates.
Testability
Laravel includes features and helpers which helps in testing through various test cases.
This feature helps in maintaining the code as per the requirements.
Routing
Laravel provides a flexible approach to the user to define routes in the web application.
Routing helps to scale the application in a better way and increases its performance.
Configuration Management
A web application designed in Laravel will be running on different environments, which
means that there will be a constant change in its configuration. Laravel provides a
consistent approach to handle the configuration in an efficient way.
Query Builder and ORM
Laravel incorporates a query builder which helps in querying databases using various
simple chain methods. It provides ORM (Object Relational Mapper)
and ActiveRecord implementation called Eloquent.
Schema Builder
Schema Builder maintains the database definitions and schema in PHP code. It also
maintains a track of changes with respect to database migrations.
Template Engine
Laravel uses the Blade Template engine, a lightweight template language used to design
hierarchical blocks and layouts with predefined blocks that include dynamic content.
E-mail
Laravel includes a mail class which helps in sending mail with rich content and
attachments from the web application.
Authentication
User authentication is a common feature in web applications. Laravel eases designing
authentication as it includes features such as register, forgot password and send
password reminders.
Redis
Laravel uses Redis to connect to an existing session and general-purpose cache. Redis
interacts with session directly.
Queues
Laravel includes queue services like emailing large number of users or a
specified Cron job. These queues help in completing tasks in an easier manner without
waiting for the previous task to be completed.

4 What is RWD and explain it briefly. [L1][CO2] [12M]

Responsive Web Design(RWD). It is the most important approach in web development

which creates dynamic changes to the appearance of a website, depending on the screen
size and orientation of the device being used to view it. A website that is responsive in
nature looks good on every device.
What are the languages required to make a website responsive?
You will be thinking that you need some complex language to make your website
responsive. So the answer is “NO” you don’t have to learn too many complex computer
languages. For making your website you just need basic HTML and CSS. It is not a
program or JavaScript.
Why it is recommended by web developers that always make responsive websites?
The reason behind this thought is there are so many devices that have different
resolutions like smartphones, tablets, desktops, and smartwatches. Your need to design
your website in such a way that your web application will look good on every device. If
Your website is not responsive then your UI will not look good on other devices. It is
not compulsory that the website you are using is the same on other devices. For example
– If you are looking at this article on your computer then you can see everything is good
but now if you open this same article on your phone then you can find that the UI has
changed.
Responsive web design, or RWD, is a design approach that addresses the range of
devices and device sizes, enabling automatic adaption to the screen, whether the
content is viewed on a tablet, phone, television, or watch. Responsive web design isn't
a separate technology — it is an approach.

5 a List out some popular MVC frameworks [L1][CO2] [6M]

Some of the most popular and extensively used MVC frameworks are listed
below.
• Ruby on Rails
• Django
• CherryPy
• Spring MVC
• Catalyst
• Rails
• Zend Framework
• Fuel PHP
• Laravel
• Symphony

b What are the core Features of AngularJS [L1][CO2] [6M]

The core features of AngularJS are as follows –

Data-binding − It is the automatic synchronization of data between model and

view components.
Scope − These are objects that refer to the model. They act as a glue between
controller and view.
Controller − These are JavaScript functions bound to a particular scope.
Services − AngularJS comes with several built-in services such as $http to
make a XMLHttpRequests. These are singleton objects which are
instantiated only once in app.
Filters − These select a subset of items from an array and returns a new array.
6 What is Single Page web application with example? [L1][CO2] [12M]

Single page application (SPA) is a web application that fits on a single page. All your
code (JS, HTML, CSS) is retrieved with a single page load. And navigation between
pages performed without refreshing the whole page.

• Step 1: Create a Module. ...

• Step 2: Define Controller. ...
• Step 3: Deploy the AngularJS script in HTML Code. ...
• Step 5: Configure Routes. ...
• Step 6: Time to Build Controllers. ...
• Step 7: Configuring the HTML Pages. ...
• Step 8: Add Links to Those HTML Pages.

7 What are the MVC architectural patterns? [L1][CO2] [12M]

The MVC architectural pattern allows us to adhere to the following design principles:

1. Divide and conquer. The three components can be somewhat independently

designed.

2. Increase cohesion. The components have stronger layer cohesion than if the view
and controller were together in a single UI layer.
3. Reduce coupling. The communication channels between the three components are
minimal and easy to find.

4. Increase reuse. The view and controller normally make extensive use of reusable
components for various kinds of UI controls. The UI, however will
become application specific, therefore it will not be easily
reusable.

5. Design for flexibility. It is usually quite easy to change the UI by changing the
view,the controller, or both.
8 Design an application in node.js for student management [L6][CO2] [12M]

import javax.swing.*;
import java.awt.*;
import java.awt.Image;
import java.awt.event.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.print.*;
import javafx.print.Printer;
import java.io.*;
import java.io.IOException;

// Creating the fee class

public class fee extends Frame {

JLabel l1, l2, l3, l4,

l5, l6, l7, l8,
l9, l10, l12, l13,
l14, l11, l15;

JTextField tf1, tf2, tf3,

tf4, tf5, tf6,
tf7, tf8, tf9,
tf10;

JTextArea area2, area1;

JRadioButton rb1, rb2, rb3,

rb4, rb5, rb6,
rb7;

JFileChooser f1;

// Default constructor to
// initialize the parameters
fee()
{

l1 = new JLabel("Fee Report");

l1.setBounds(550, 100, 250, 20);

l2 = new JLabel(
"Name of the Student:");
l2.setBounds(50, 150, 250, 20);

tf1 = new JTextField();

tf1.setBounds(250, 150, 250, 20);

l3 = new JLabel(
"Name of the Father:");
l3.setBounds(50, 200, 250, 20);

tf2 = new JTextField();

tf2.setBounds(250, 200, 250, 20);

l4 = new JLabel("Roll Number:");

l4.setBounds(50, 250, 250, 20);
tf3 = new JTextField();
tf3.setBounds(250, 250, 250, 20);

l5 = new JLabel("Email ID:");

l5.setBounds(50, 300, 250, 20);

tf4 = new JTextField();

tf4.setBounds(250, 300, 250, 20);

l6 = new JLabel("Contact Number:");

l6.setBounds(50, 350, 250, 20);

tf5 = new JTextField();

tf5.setBounds(250, 350, 250, 20);

l7 = new JLabel("Address:");
l7.setBounds(50, 400, 250, 20);

area1 = new JTextArea();

area1.setBounds(250, 400, 250, 90);

l9 = new JLabel("Gender:");
l9.setBounds(50, 500, 250, 20);

JRadioButton r5
= new JRadioButton(" Male");
JRadioButton r6
= new JRadioButton(" Female");

r5.setBounds(250, 500, 100, 30);

r6.setBounds(350, 500, 100, 30);

ButtonGroup bg = new ButtonGroup();

bg.add(r5);
bg.add(r6);

l10 = new JLabel("Nationality:");

l10.setBounds(50, 550, 250, 20);

tf6 = new JTextField();

tf6.setBounds(250, 550, 250, 20);

l11 = new JLabel(

"Year of passing 10th");
l11.setBounds(50, 600, 250, 20);

String language[]
= { "2016", "2015", "2014" };

final JComboBox cb1

= new JComboBox(language);

cb1.setBounds(250, 600, 90, 20);

l12 = new JLabel(

"Year of passing 12th");
l12.setBounds(50, 650, 250, 20);

String languagess[]
= { "2019", "2018", "2017" };

l13 = new JLabel(

"Points Secured in 10th:");
l13.setBounds(50, 700, 250, 20);

tf7 = new JTextField();

tf7.setBounds(250, 700, 250, 20);

l14 = new JLabel("Percentage in 12th:");

l14.setBounds(50, 750, 250, 20);

tf8 = new JTextField();

tf8.setBounds(250, 750, 250, 20);

ImageIcon i2 = new ImageIcon("2.png");

JLabel l15
= new JLabel("", i2, JLabel.CENTER);

l15.setBounds(900, 50, 600, 200);

final JComboBox cb2

= new JComboBox(languagess);

cb2.setBounds(250, 650, 90, 20);

l8 = new JLabel(
"Groups Offered here are:");
l8.setBounds(800, 150, 250, 20);

rb1 = new JRadioButton("SEAS");

rb1.setBounds(550, 150, 100, 30);

rb2 = new JRadioButton("SLABS");

rb2.setBounds(650, 150, 100, 30);

ButtonGroup bg1 = new ButtonGroup();

bg1.add(rb1);
bg1.add(rb2);

rb3 = new JRadioButton("HOSTELLER");

rb3.setBounds(550, 200, 100, 30);

rb4 = new JRadioButton("DAY SCHOLAR");

rb4.setBounds(650, 200, 120, 30);

ButtonGroup bg2 = new ButtonGroup();

bg2.add(rb3);
bg2.add(rb4);

String languages[]
= { "CSE", "ECE", "EEE",
"CIVIL", "MECH" };
final JComboBox cb
= new JComboBox(languages);
cb.setBounds(800, 200, 90, 20);

final JLabel label

= new JLabel();
label.setBounds(600, 430, 500, 30);
JButton b = new JButton("Show");
b.setBounds(1000, 300, 80, 30);

final DefaultListModel<String> li1

= new DefaultListModel<>();

li1.addElement("CSE(2, 50, 000)");

li1.addElement("ECE(2, 50, 000)");
li1.addElement("EEE(2, 50, 000)");
li1.addElement("MECH(2, 50, 000)");
li1.addElement("CIVIL(2, 50, 000)");

final JList<String> list1

= new JList<>(li1);

list1.setBounds(600, 300, 125, 125);

DefaultListModel<String> li2
= new DefaultListModel<>();

li2.addElement(
"2 SHARE(1, 50, 000)");
li2.addElement(
"3 SHARE(1, 40, 000)");
li2.addElement(
"5 SHARE(1, 20, 000)");
li2.addElement(
"8 SHARE(1, 10, 000)");
li2.addElement(
"bus(40, 000)");

final JList<String> list2

= new JList<>(li2);
list2.setBounds(
800, 300, 125, 125);

JButton Receipt
= new JButton("Generate Receipt");
Receipt.setBounds(600, 490, 150, 30);
JButton b2 = new JButton("Reset");
b2.setBounds(750, 490, 150, 30);
JButton Print = new JButton("Print");
Print.setBounds(900, 490, 150, 30);

area2 = new JTextArea();

area2.setBounds(600, 540, 450, 240);

add(l1);
add(l2);
add(l3);
add(l4);
add(l5);
add(l6);
add(l7);
add(l8);
add(l9);
add(l10);
add(l11);
add(l12);
add(l13);
add(l14);
add(tf1);
add(tf2);
add(tf3);
add(tf4);
add(tf5);
add(tf6);
add(tf7);
add(tf8);
add(area1);
add(area2);
add(l15);
add(rb1);
add(rb2);
add(rb3);
add(rb4);
add(r5);
add(r6);
add(cb);
add(cb1);
add(cb2);
add(list1);
add(list2);
add(b);
add(label);
add(Receipt);
add(b2);
add(Print);

b.addActionListener(new ActionListener() {

// Method to display the data

// entered in the text fields
public void actionPerformed(ActionEvent e)
{
String data = "";
if (list1.getSelectedIndex() != -1) {
data = "You had selected the Group:"
+ list1.getSelectedValue();
label.setText(data);
}
if (list2.getSelectedIndex() != -1) {
data += " and Hostel with the "
+ "facility of: ";

for (Object frame :

list2.getSelectedValues()) {
data += frame + " ";
}
}
label.setText(data);
}
});

// Reset the text fields

b2.addActionListener(
new ActionListener() {
public void actionPerformed(
ActionEvent e)
{
area2.setText("");
area1.setText(" ");
tf1.setText("");
tf2.setText("");
tf3.setText("");
tf4.setText("");
tf5.setText("");
tf6.setText(" ");
}
});

// Implementing the Print action

Print.addActionListener(
new ActionListener() {
public void actionPerformed(
ActionEvent e)
{
try {
area2.print();
}
catch (java.awt.print
.PrinterException a) {
System.err.format(
"NoPrinter Found",
a.getMessage());
}
}
});

// Generating the receipt

Receipt.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{

area2.setText(
"--------------------------------"
+ "-----------FEE RECEIPT----"
+ "--------------------------"
+ "--------------------------"
+ "-------------------\n");

area2.setText(area2.getText()
+ "Student Name: "
+ tf1.getText()
+ "\n");
area2.setText(area2.getText()
+ "Father's Name: "
+ tf2.getText()
+ "\n");
area2.setText(area2.getText()
+ "RollNumber: "
+ tf3.getText()
+ "\n");
area2.setText(area2.getText()
+ "Email ID: "
+ tf4.getText()
+ "\n");
area2.setText(area2.getText()
+ "Contact Number: "
+ tf5.getText()
+ "\n");
area2.setText(area2.getText()
+ "Wants to take: "
+ cb.getSelectedItem()
.toString()
+ "\n");

if (rb1.isSelected()) {
area2.setText(area2.getText()
+ "Wants to Join in "
+ "School of Engineering "
+ "and Applied Sciences\n");
}
if (rb2.isSelected()) {
area2.setText(area2.getText()
+ "Wants to Join in "
+ "School of Liberal "
+ "Arts and Sciences\n");
}
if (rb3.isSelected()) {
area2.setText(area2.getText()
+ "Wants to be a "
+ "Hosteller \n");
}
if (rb4.isSelected()) {
area2.setText(area2.getText()
+ "Wants to be a "
+ "Day Scholar \n");
}
area2.setText(area2.getText()
+ "Had chosen: "
+ list1.getSelectedValue()
.toString()
+ "\n");
area2.setText(area2.getText()
+ "Had chosen: "
+ list2.getSelectedValue()
.toString()
+ "\n");

int index2 = list2.getSelectedIndex();

if (index2 == 0) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be "
+ "paid is 4 Lakhs \n");
}

if (index2 == 1) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.9 Lakhs \n");
}

if (index2 == 2) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.8 Lakhs \n");
}

if (index2 == 3) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.7 Lakhs \n");
}

if (index2 == 4) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 2.9 Lakhs \n");
}

if (e.getSource() == Receipt) {
try {
FileWriter fw
= new FileWriter(
"java.txt", true);
fw.write(area2.getText());
fw.close();
}
catch (Exception ae) {
System.out.println(ae);
}
}

JOptionPane.showMessageDialog(
area2, "DATA SAVED SUCCESSFULLY");
};
});
addWindowListener(
new WindowAdapter() {
public void windowClosing(
WindowEvent we)
{
System.exit(0);
}
});
setSize(800, 800);
setLayout(null);
setVisible(true);
setBackground(Color.cyan);
}
public static void main(String[] args)
{
new fee();
}
}
9 Create an application using MeteorJS framework [L6][CO2] [12M]
10 a Explain the features of Responsive web Design [L5][CO2] [6M]

1.Reflowing Content
Reflowing content simply refers to content that adjusts its width to fit width of
window. Every day, new devices are being developed with new screen sizes. It
forces browser to again calculate dimensions and position of all elements and then
again reload page. It is essential to provide optimized layouts for mobile devices
and tablets.
2. Relative Sizing
Relative sizing simply means adjusting size of element according to width of
browser or screen. When it comes to responsive design, one need to use relative
length unit. Relative unit length does not have fixed size. With help of relative
sizing, images or other elements adapt their size according to browser width.
Different relative unit length that one can use include %, VW (Viewport Width),
em, Vmin (Viewport Minimum), VH (Viewport Height), etc.
3. Breakpoints
Breakpoints, also known as media queries, are the simplest filters applied to CSS
styles that can be used for different style rules for various devices such as laptops,
mobiles, tablets, etc. One can also modify and make changes to layout and design
on different device width ranges. It can also be used to detect other things about
environment on which site is running and one can customize their website design
for different devices.

4. Adaptation to all Devices

Flexibility is main component of responsive website. Their flexibility to adapt to
different size screen provide better user experience and makes it more appealing.
Responsive Websites works independently, adjust itself according to screen size,
resize images, change font and navigations, reposition content, etc. This helps
create a positive user experience and positive image of business on customer or
user that in turn increase more audience.
b What are the Advantages and Disadvantages of Single Page web application [L1][CO2] [6M
]
Pros
No page refresh
When you are using SPA, you don’t need to refresh the whole page, just load the part
of the page which needs to be changed. Angular allows you to pre-load and cache all
your pages, so you don’t need extra requests to download them.
Better user experience
SPA feels like a native application: fast and responsive.
Ability to work offline
Even if user loses internet connection, SPA can still work because all the pages are
already loaded.

Cons
More complex to build
You need to write pretty much javascript, handle shared state between pages, manage
permissions, etc.

SEO
To index your SPA app, search engine crawlers should be able to execute javascript.
Only recently Google and Bing started indexing Ajax-based pages by executing
JavaScript during crawling. You need to create static HTML snapshots specially for
search engines.
Initial load is slow
SPA needs to download more resources when you open it.
Client should have javascript enabled
Of course, SPA requires javascript. But fortunately, almost everyone has javascript
enabled.

UNIT–III
Web Communication Processes and Technologies
1 What is servlet?What are the advantages of servlet?Explain the Lifecycle of [L1][CO3] [12M]
servlets.

 Servlets are server side java program used for generating dynamic web
in response to the client requests
 Servlets are deployed in application server or webserver.
 In servlets the request send by the browser and the response send by the
server will be represented as objects.

Advantages of servlet
• Efficient and scalable
• Reduces the execution time
• Avoids loading program for every request.
• Portability
• Server and platform independent
• Able to deploy in any server and worked on various operating system
• Robustness
• Managed by JVM
• No problem of memory leak or garbage collection.

Life Cycle of Servlets

Init():
• This method define the initialization information
• The init() method is called only once throughout the life cycle of the
servlet
• It must be called by the servlet container before the servlet can service
any request.

Service()
• The servlet container calls the service() method for servicing any request.
• The service() method determines the kind of request and calls the
appropriate method (doGet() or doPost()) for handling the request and
sends response to the client using the methods of the response object.
•
Destroy():
• This method removes the servlet from the server
• Define any clean up codes that releases resources,such as closing a
database connection etc before removing the servlet from memory
• It is called only once throughout the life cycle of the servlet
2 Write a servlet code to get parameters from HTML document. [L2][CO3] [12M]

NewServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class NewServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest rq, HttpServletResponse rs)
throws ServletException, IOException {
rs.setContentType("text/html");
PrintWriter out=rs.getWriter();
HttpSession session=rq.getSession(true);
Integer count=(Integer)session.getAttribute("NewServlet.HitCount");
if(count==null)
{
count=new Integer(1);
}
else
{

count=new Integer(count.intValue()+1);
}

session.setAttribute("NewServlet.HitCount",count);
out.println("<html><html><title>Session example </title></head>");
out.println("<body><h4>Session server to "+"demonstrate session Tracking
and its life cycle </h4>");
out.println("</br> session status : ");
if(session.isNew())
{
out.println("New session </br>");}
out.println("HitCount for your current session is : "+count);
out.println("</br> <h2>some basic session information</h2>");
out.println("session ID : "+session.getId()+"</br>");
out.println("it is a new session: "+session.isNew());
out.println("</br>session creation time : "+session.getCreationTime());
out.println("("+new Date(session.getCreationTime())+"</br>");
out.println("Last acessed Time : "+session.getLastAccessedTime());
out.println("("+ new Date(session.getLastAccessedTime())+"</br>");
out.println("Max Inactive Time :
"+session.getMaxInactiveInterval()+"</br>");
out.println("session info as in cookie :
"+rq.isRequestedSessionIdFromCookie()+"</br>");
out.println("</body></html>");

}
}

3 a Difference between GenericServlet and HttpServlet. [L1][CO3] [6M]

b What is Servlet Context Interface [L1][CO3] [6M]

An object of ServletContext is created by the web container at time of deploying

the project.

 This object can be used to get configuration information from web.xml

file.
 There is only one ServletContext object per web application.
 If any information is shared to many servlet, it is better to provide it from
the web.xml file using the <context-param> element.

There is given some commonly used methods of ServletContext interface.

public String getInitParameter(String name):Returns the parameter value for

the specified parameter name.
public Enumeration getInitParameterNames():Returns the names of the
context's initialization parameters.
public void setAttribute(String name,Object object):sets the given object in
the application scope.
public Object getAttribute(String name):Returns the attribute for the specified
name.
public Enumeration getInitParameterNames():Returns the names of the
context's initialization parameters as an Enumeration of String objects.
public void removeAttribute(String name):Removes the attribute with the
given name from the servlet context.

getServletContext() method of ServletConfig interface returns the object of

ServletContext.
getServletContext() method of GenericServlet class returns the object of
ServletContext.
Syntax of getServletContext() method
public ServletContext getServletContext()

4 State and explain Session Tracking with Techniques. [L2][CO3] [12M]

 Session Tracking is a way to maintain state (data) of an user. It is also

known as session management in servlet.
 Http protocol is a stateless so we need to maintain state using session
tracking techniques.
 Each time user requests to the server, server treats the request as the new
request.

Session Tracking Techniques are categorized as follows:

 Cookies
 Hidden Form Field
 URL Rewriting
 Http Session

A cookie is a small piece of information that is persisted between the multiple

client requests.
A cookie has a name, a single value, and optional attributes such as a comment,
path and domain qualifiers, a maximum age, and a version number.
There are 2 types of cookies in servlets.
Non-persistent cookie
It is valid for single session only.
Persistent cookie
It is valid for multiple session .
Hidden Form Field
In case of Hidden Form Field a hidden (invisible) textfield is used for
maintaining the state of an user.
In such case, we store the information in the hidden field and get it from another
servlet.
This approach is better if we have to submit form in all the pages and we don't
want to depend on the browser.

URL Rewriting
In URL rewriting, we append a token or identifier to the URL of the next Servlet
or the next resource.
We can send parameter name/value pairs using the following format:
url?name1=value1&name2=value2&??

HttpSession interface
In such case, container creates a session id for each user.
The container uses this id to identify the particular user.
An object of HttpSession can be used to perform two tasks:
• bind objectsview and manipulate information about a session, such as the
session identifier, creation time, and last accessed time.

5 Create a Java servlet program to display current Date and Time [L6][CO3] [12M]

public class NewServlet extends HttpServlet {

count=new Integer(count.intValue()+1);
}

}
}

6 Explain about a) HTTP servlet Request b) HTTP servlet Response with [L5][CO3] [12M]
syntax.

A Servlet Request object provides data including parameter name and values,
attributes, and an input stream. Interfaces that extend Servlet Request can provide
additional protocol-specific data.

HttpServletRequest Interface

Public class HttpServletRequest extends ServletRequest

HttpServletRequest is an extension of ServletRequest and provides additional
methods for accessing

 HTTP request URL

 Context, servlet, path, query information
 HTTP Request header information
 Authentication type & User security information
 Cookies
 Session

Accessing Request Components

 getParameter("param1") -- Returns the value of a request parameter as a
String, or null if the parameter does not exist.

 getCookies() => Cookie[]

 getContentLength() --- Returns the length, in bytes, of the request body

and made available by the input stream

 getContentType() --- Returns the MIME type of the body of the request

 getHeaderNames() -- This method returns an enumeration of all request

header values

 getMethod() ---This method returns the type of the HTTP request such as
get,post etc

Http ServletResponse interface

Defines an object to assist a servlet in sending a response to the client. The servlet
container creates a ServletResponse object and passes it as an argument to the
servlet's service method.

● A servlet almost always returns a response body

● Response body could either be a PrintWriter or a ServletOutputStream

● PrintWriter object

Using response.getWriter() – For character-based output

 PrintWriter out = response.getWriter();

 out.println("<HTML><HEAD>...")

To send binary data in a MIME body response, use the

ServletOutputStream returned by getOutputStream()

● ServletOutputStream object

– Using response.getOutputStream() – For binary (image) data

service() methods take generic requests and responses:

service(ServletRequest request,ServletResponse response)

doGet() or doPost() take HTTP requests and responses:

– doGet(HttpServletRequest request, HttpServletResponse response)

– doPost(HttpServletRequest request, HttpServletResponse response)

7 Explain about a) Servlet Collaboration b) Servlet Filter [L5][CO3] [12M]

a) Servlet Collaboration

The exchange of information among servlets of a particular Java web

application is known as Servlet Collaboration.
This enables passing/sharing information from one servlet to the other through
method invocations.

The servlet api provides two interfaces namely:

javax.servlet.RequestDispatcher
javax.servlet.http.HttpServletResponse

b) Servlet Filter

A filter is an object that is invoked at the preprocessing and post processing of a

request.
It is mainly used to perform filtering tasks such as conversion, logging,
compression, encryption and decryption, input validation etc.
8 Explain in detail about working of cookies with an example. [L5][CO3] [12M]

A cookie is a small piece of information that is persisted between the multiple

NewServlet.jsp
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class NewServlet extends HttpServlet {

count=new Integer(count.intValue()+1);
}

}
}

9 Discuss in detail about AJAX architecture [L6][CO3] [12M]

AJAX is an abbreviation for Asynchronous JavaScript and XML. AJAX is a
technique not a programming language which is used by the developers to make
the websites behaving like desktop applications.
It operates on the client-side for creating asynchronous web applications. AJAX
is a group of technologies that uses number of web technologies for creating a
set of web development techniques.

Technologies involved in AJAX are:

HTML – It is used at the client side.
JavaScript – It is used to make the request.
CSS – It is also used at the client side.
XML – It is just a request formats.
JSON – It is also a request formats.
php – It is used at the server side.

Disadvantages of Ajax :
• We face browser compatibility issues in AJAX.
• If JavaScript is disabled by user then those users cannot use AJAX as
AJAX needs JavaScript to be enabled.
• Various search engine like Google can’t index AJAX pages.
• We cannot bookmark AJAX updated page content.
• Since data is downloadable from client side henceforth AJAX is less
secure.

10 Explain AJAX framework and its security [L5][CO3] [12M]

Technologies involved in AJAX are:

Advantages of Ajax :
• Response time of AJAX is high henceforth it increases speed and
performance.
• AJAX supports a lot of browsers.
• Some of the complex AJAX applications gives feeling that we are using it
on Desktop.
• There is lesser requirement of time between server and client.
• AJAX allows multiple tasks to be performed at same time.
Disadvantages of Ajax :
• We face browser compatibility issues in AJAX.
• If JavaScript is disabled by user then those users cannot use AJAX as
AJAX needs JavaScript to be enabled.
• Various search engine like Google can’t index AJAX pages.
• We cannot bookmark AJAX updated page content.
• Since data is downloadable from client side henceforth AJAX is less
secure.

UNIT–IV
Web Servers

1 Difference between Session and Cookie [L1][CO4] [12M]

2 Explain node.js with example [L5][CO4] [12M]

Node.js is a cross-platform, open-source server environment that can run on Windows,

Linux, Unix, macOS, and more.
Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript
Engine, and executes JavaScript code outside a web browser.

Features of Node.js
Following are some of the important features that make Node.js the first choice of
software architects.
• Asynchronous and Event Driven − All APIs of Node.js library are
asynchronous, that is, non-blocking. It essentially means a Node.js based server
never waits for an API to return data. The server moves to the next API after
calling it and a notification mechanism of Events of Node.js helps the server to
get a response from the previous API call.
• Very Fast − Being built on Google Chrome's V8 JavaScript Engine, Node.js
library is very fast in code execution.

• Single Threaded but Highly Scalable − Node.js uses a single threaded model
with event looping. Event mechanism helps the server to respond in a non-
blocking way and makes the server highly scalable as opposed to traditional
servers which create limited threads to handle requests. Node.js uses a single
threaded program and the same program can provide service to a much larger
number of requests than traditional servers like Apache HTTP Server.
• No Buffering − Node.js applications never buffer any data. These applications
simply output the data in chunks.

• License − Node.js is released under the MIT license

Following are the areas where Node.js is proving itself as a perfect technology
partner.
• I/O bound Applications
• Data Streaming Applications
• Data Intensive Real-time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

3 Design an application in node.js for student management [L6][CO4] [12M]

// Creating the fee class

public class fee extends Frame {

JLabel l1, l2, l3, l4,

l5, l6, l7, l8,
l9, l10, l12, l13,
l14, l11, l15;

JTextField tf1, tf2, tf3,

tf4, tf5, tf6,
tf7, tf8, tf9,
tf10;

JTextArea area2, area1;

JRadioButton rb1, rb2, rb3,

rb4, rb5, rb6,
rb7;

JFileChooser f1;

// Default constructor to
// initialize the parameters
fee()
{

l1 = new JLabel("Fee Report");

l1.setBounds(550, 100, 250, 20);

l2 = new JLabel(
"Name of the Student:");
l2.setBounds(50, 150, 250, 20);

tf1 = new JTextField();

tf1.setBounds(250, 150, 250, 20);

l3 = new JLabel(
"Name of the Father:");
l3.setBounds(50, 200, 250, 20);

tf2 = new JTextField();

tf2.setBounds(250, 200, 250, 20);

l4 = new JLabel("Roll Number:");

l4.setBounds(50, 250, 250, 20);

tf3 = new JTextField();

tf3.setBounds(250, 250, 250, 20);

l5 = new JLabel("Email ID:");

l5.setBounds(50, 300, 250, 20);

tf4 = new JTextField();

tf4.setBounds(250, 300, 250, 20);

l6 = new JLabel("Contact Number:");

l6.setBounds(50, 350, 250, 20);

tf5 = new JTextField();

tf5.setBounds(250, 350, 250, 20);

l7 = new JLabel("Address:");
l7.setBounds(50, 400, 250, 20);

area1 = new JTextArea();

area1.setBounds(250, 400, 250, 90);

l9 = new JLabel("Gender:");
l9.setBounds(50, 500, 250, 20);

JRadioButton r5
= new JRadioButton(" Male");
JRadioButton r6
= new JRadioButton(" Female");

r5.setBounds(250, 500, 100, 30);

r6.setBounds(350, 500, 100, 30);

ButtonGroup bg = new ButtonGroup();

bg.add(r5);
bg.add(r6);
l10 = new JLabel("Nationality:");
l10.setBounds(50, 550, 250, 20);

tf6 = new JTextField();

tf6.setBounds(250, 550, 250, 20);

l11 = new JLabel(

"Year of passing 10th");
l11.setBounds(50, 600, 250, 20);

String language[]
= { "2016", "2015", "2014" };

final JComboBox cb1

= new JComboBox(language);

cb1.setBounds(250, 600, 90, 20);

l12 = new JLabel(

"Year of passing 12th");
l12.setBounds(50, 650, 250, 20);

String languagess[]
= { "2019", "2018", "2017" };

l13 = new JLabel(

"Points Secured in 10th:");
l13.setBounds(50, 700, 250, 20);

tf7 = new JTextField();

tf7.setBounds(250, 700, 250, 20);

l14 = new JLabel("Percentage in 12th:");

l14.setBounds(50, 750, 250, 20);

tf8 = new JTextField();

tf8.setBounds(250, 750, 250, 20);

ImageIcon i2 = new ImageIcon("2.png");

JLabel l15
= new JLabel("", i2, JLabel.CENTER);

l15.setBounds(900, 50, 600, 200);

final JComboBox cb2

= new JComboBox(languagess);

cb2.setBounds(250, 650, 90, 20);

l8 = new JLabel(
"Groups Offered here are:");
l8.setBounds(800, 150, 250, 20);

rb1 = new JRadioButton("SEAS");

rb1.setBounds(550, 150, 100, 30);

rb2 = new JRadioButton("SLABS");

rb2.setBounds(650, 150, 100, 30);

ButtonGroup bg1 = new ButtonGroup();

bg1.add(rb1);
bg1.add(rb2);

rb3 = new JRadioButton("HOSTELLER");

rb3.setBounds(550, 200, 100, 30);

rb4 = new JRadioButton("DAY SCHOLAR");

rb4.setBounds(650, 200, 120, 30);

ButtonGroup bg2 = new ButtonGroup();

bg2.add(rb3);
bg2.add(rb4);

String languages[]
= { "CSE", "ECE", "EEE",
"CIVIL", "MECH" };
final JComboBox cb
= new JComboBox(languages);
cb.setBounds(800, 200, 90, 20);

final JLabel label

= new JLabel();
label.setBounds(600, 430, 500, 30);
JButton b = new JButton("Show");
b.setBounds(1000, 300, 80, 30);

final DefaultListModel<String> li1

= new DefaultListModel<>();

li1.addElement("CSE(2, 50, 000)");

li1.addElement("ECE(2, 50, 000)");
li1.addElement("EEE(2, 50, 000)");
li1.addElement("MECH(2, 50, 000)");
li1.addElement("CIVIL(2, 50, 000)");

final JList<String> list1

= new JList<>(li1);

list1.setBounds(600, 300, 125, 125);

DefaultListModel<String> li2
= new DefaultListModel<>();

li2.addElement(
"2 SHARE(1, 50, 000)");
li2.addElement(
"3 SHARE(1, 40, 000)");
li2.addElement(
"5 SHARE(1, 20, 000)");
li2.addElement(
"8 SHARE(1, 10, 000)");
li2.addElement(
"bus(40, 000)");
final JList<String> list2
= new JList<>(li2);
list2.setBounds(
800, 300, 125, 125);

area2 = new JTextArea();

area2.setBounds(600, 540, 450, 240);

b.addActionListener(new ActionListener() {
// Method to display the data
// entered in the text fields
public void actionPerformed(ActionEvent e)
{
String data = "";
if (list1.getSelectedIndex() != -1) {
data = "You had selected the Group:"
+ list1.getSelectedValue();
label.setText(data);
}
if (list2.getSelectedIndex() != -1) {
data += " and Hostel with the "
+ "facility of: ";

for (Object frame :

list2.getSelectedValues()) {
data += frame + " ";
}
}
label.setText(data);
}
});

// Reset the text fields

// Implementing the Print action

// Generating the receipt

Receipt.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{

area2.setText(
"--------------------------------"
+ "-----------FEE RECEIPT----"
+ "--------------------------"
+ "--------------------------"
+ "-------------------\n");

int index2 = list2.getSelectedIndex();

if (index2 == 0) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be "
+ "paid is 4 Lakhs \n");
}

if (index2 == 1) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.9 Lakhs \n");
}

if (index2 == 2) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.8 Lakhs \n");
}

if (index2 == 3) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.7 Lakhs \n");
}

if (index2 == 4) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 2.9 Lakhs \n");
}

if (e.getSource() == Receipt) {
try {
FileWriter fw
= new FileWriter(
"java.txt", true);
fw.write(area2.getText());
fw.close();
}
catch (Exception ae) {
System.out.println(ae);
}
}

Express.js tutorial provides basic and advanced concepts of Express.js.

Our Express.js tutorial is designed for beginners and professionals both.

Express.js is a web framework for Node.js. It is a fast, robust and asynchronous in
nature.
Our Express.js tutorial includes all topics of Express.js such as Express.js
installation on windows and linux, request object, response object, get method, post
method, cookie management, scaffolding, file upload, template etc.

• It can be used to design single-page, multi-page and hybrid web applications.

• It allows to setup middlewares to respond to HTTP Requests.
• It defines a routing table which is used to perform different actions based on
HTTP
It allows to dynamically render HTML Pages based on passing arguments to
templates

Let's see a basic Express.js app.

File: basic_express.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Welcome to JavaTpoint!');
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});

b Discuss Data session [L6][CO4] [6M]

Data Session means a connection to the Internet or mobile Internet, established

using GPRS, 3G/4G/UMTS, or other technologies made available over the Network

Session Data means as applicable, usage information, such as IP Address, type of

browser, type of operating system, referring URL, date, time, and duration of a
visitor's visit, the number of visits to a website, the pages viewed, order of pages
viewed, number of cookies accumulated, bytes sent and received,

To track sessions, a web session ID is stored in a visitor's browser. This session ID

is passed along with any HTTP requests that the visitor makes while on the
site (e.g., clicking a link).

Sessions are server-side files that contain user information, whereas Cookies are
client-side files that contain user information. Session is dependent on Cookie, but
Cookie is not dependent on a session. Session ends when a user closes his/her
browser, while a Cookie expires depending on the lifetime you set for it.
5 What is an Event? Explain the Callback Event [L1][CO4] [12M]

Every action on a computer is an event. Like when a connection is made or a file is

opened.
Objects in Node.js can fire events, like the readStream object fires events when
opening and closing a file:

Node.js has a built-in module, called "Events", where you can create-, file-, and listen
for- your own events.
• To include the built-in Events module use the require() method.
• In addition, all event properties and methods are an instance of an EventEmitter
object.
• To be able to access these properties and methods, create an EventEmitter object:

var events = require('events’);

var eventEmitter = new events.EventEmitter();

The EventEmitter Object
You can assign event handlers to your own events with the EventEmitter object.
In the example below we have created a function that will be executed when a
"scream" event is fired.
To fire an event, use the emit() method.

var events = require('events');

var eventEmitter = new events.EventEmitter();

//Create an event handler:

var myEventHandler = function () {
console.log('I hear a scream!');
}

//Assign the event handler to an event:

eventEmitter.on('scream', myEventHandler);

//Fire the 'scream' event:

eventEmitter.emit('scream');
6 Explain the Terminal REPL [L5][CO4] [12M]

Read-Eval-Print Loop(REPL)
A Read-Eval-Print Loop, or REPL, is a computer environment where user inputs are
read and evaluated, and then the results are returned to the user.

It performs the following tasks –

• Read − Reads user's input, parses the input into JavaScript data-structure,
and stores in memory.

• Eval − Takes and evaluates the data structure.

• Print − Prints the result.
• Loop − Loops the above command until the user presses ctrl-c twice.

REPL Commands

• ctrl + c − terminate the current command.

• ctrl + c twice − terminate the Node REPL.
• ctrl + d − terminate the Node REPL.
• Up/Down Keys − see command history and modify previous commands.
• tab Keys − list of current commands.
• .help − list of all commands.
• .break − exit from multiline expression.
• .clear − exit from multiline expression.
• .save filename − save the current Node REPL session to a file.
• .load filename − load file content in current Node REPL session.

7 Explain Briefly Cookies and its types? [L5][CO4] [12M]

Cookies are text files with small pieces of data — like a username and password —
that are used to identify your computer as you use a computer network.
Specific cookies known as HTTP cookies are used to identify specific users and
improve your web browsing experience.
Data stored in a cookie is created by the server upon your connection. This data is
labeled with an ID unique to you and your computer.
When the cookie is exchanged between your computer and the network server, the
server reads the ID and knows what information to specifically serve to you.

Session cookies. Session cookies, also known as 'temporary cookies', help websites
recognise users and the information provided when they navigate through a website.

Persistent cookies or permanent cookies are stored on users' hard drive until it
expires or until the user deletes the cookie. These cookies remain on a user's device
even after they close a web browser.

First-Party Cookies
These cookies allow website owners to collect analytics data, remember language
settings, and perform other useful functions that provide a good user experience.
An example of a first-party cookie is when a user signs into an ecommerce website,
like Amazon.

A third-party cookie is a cookie that's placed on a user's device -- computer, cellphone

or tablet -- by a website from a domain other than the one the user is visiting.

A Flash cookie, also known as a local shared object, is a text file that is sent by a Web
server to a client when the browser requests content supported by Adobe Flash, a
popular browser plug-in.

A zombie cookie is a piece of data that could be stored in multiple locations -- since
failure of removing all copies of the zombie cookie will make the removal reversible,
zombie cookies can be difficult to remove.

8 Create a Java Servlet Program session life time cookies [L6][CO4] [12M]

public class NewServlet extends HttpServlet {

count=new Integer(count.intValue()+1);
}

session.setAttribute("NewServlet.HitCount",count);
out.println("<html><html><title>Session example </title></head>");
out.println("<body><h4>Session server to "+"demonstrate session Tracking and its
life cycle </h4>");
out.println("</br> session status : ");
if(session.isNew())
{
out.println("New session </br>");}
out.println("HitCount for your current session is : "+count);
out.println("</br> <h2>some basic session information</h2>");
out.println("session ID : "+session.getId()+"</br>");
out.println("it is a new session: "+session.isNew());
out.println("</br>session creation time : "+session.getCreationTime());
out.println("("+new Date(session.getCreationTime())+"</br>");
out.println("Last acessed Time : "+session.getLastAccessedTime());
out.println("("+ new Date(session.getLastAccessedTime())+"</br>");
out.println("Max Inactive Time : "+session.getMaxInactiveInterval()+"</br>");
out.println("session info as in cookie :
"+rq.isRequestedSessionIdFromCookie()+"</br>");
out.println("</body></html>");

}
}
9 Discuss Rendering JSON Data [L6][CO4] [12M]

The JSON format is syntactically similar to the code for creating JavaScript objects. Because of
this, a JavaScript program can easily convert JSON data into JavaScript objects.
Since the format is text only, JSON data can easily be sent between computers, and used by
any programming language.
JavaScript has a built in function for converting JSON strings into JavaScript objects:
JSON.parse()
JavaScript also has a built in function for converting an object into a JSON string:
JSON.stringify()

To load JSON data using jQuery, use the getJSON() and ajax() method. The jQuery.getJSON( )
method loads JSON data from the server using a GET HTTP request.
Here is the description of all the parameters used by this method −
• url − A string containing the URL to which the request is sent
• data − This optional parameter represents key/value pairs that will be sent to the server.
• callback − This optional parameter represents a function to be executed whenever the
data is loaded successfully.

Features: jQueryUI is categorized into four groups, interactions, widgets, effects,

utilities.
• Interactions − These are the interactive plugins like drag, drop, resize and more
which give the user the ability to interact with DOM elements.

• Widgets − Using widgets which are jQuery plugins, you can create user interface
elements like accordion,datepicker etc.
• Effects − These are built on the internal jQuery effects. They contain a full suite of
custom animations and transitions for DOM elements.
• Utilities − These are a set of modular tools the JqueryUI library uses internally.

10 Create a shopping cart application [L6][CO4] [12M]

NewServlet1.java
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class NewServlet1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest rq, HttpServletResponse rs)
throws ServletException, IOException {
HttpSession s=rq.getSession();int itemcount=0;
ArrayList cart;
cart = (ArrayList)s.getAttribute("cart");
if(cart!=null)
{
itemcount=cart.size();
}
rs.setContentType("text/html");
PrintWriter p=rs.getWriter();
p.println("<html><head><title> shopping cart 1 </title></head><body>");
p.println("<h1>Welcome to the shopping cart</h1>");
p.println("<p>You've "+itemcount+" items in your cart.</p>");
p.println("<form action=\"");
p.println(rs.encodeURL("http://localhost:8084/simple1/NewServlet"));
p.println("\"method=\"post\">");
p.println("<p><input type=checkbox name=item value=java>");
p.println("Item1:JAVA </p>");
p.println("<p><input type=checkbox name=item value=c>");
p.println("Item2:c </p>");
p.println("<p><input type=checkbox name=item value=c++>");
p.println("Item3:C++ </p>");
p.println("<p><input type=checkbox name=item value=C#>");
p.println("Item4:C# </p>");
p.println("<p><input type=submit value=Add to cart>");
p.println("</form></body><html>");
p.close();
}
NewServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.*;
public class NewServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

HttpSession ses=request.getSession(true);
ArrayList cart=(ArrayList)ses.getAttribute("cart");
if(cart==null)
{
cart=new ArrayList();
ses.setAttribute("cart",cart);
}
PrintWriter out=response.getWriter();
response.setContentType("text/html");
String[] itemselected;
String itemname;
itemselected=request.getParameterValues("item");
if(itemselected!=null)
{
for(int i=0;i<itemselected.length;i++)
{
itemname=itemselected[i];

cart.add(itemname);
}

//print the contents of the cart

out.println("<html><head><title>Shopping cart contents</title></head>");
out.println("<body>");
out.println("<form action=\"");

out.println(response.encodeURL("/simple1/NewServlet1"));

out.println("\"method=\"post\">");
out.println("<h1>Items currently in your cart</h1>");
out.println("<hr>");

Iterator iterator=cart.iterator();
while(iterator.hasNext())
{
out.println("<p>"+iterator.next()+"</p>");
}

out.println("<hr>");
out.println("<a href=\"");
out.println(response.encodeURL("/simple1/NewServlet1"));
out.println("\">Back</a>");
out.println("</form>");
out.println("<hr>");
out.println("</body></html>");
out.close();
}
}
UNIT–V
Storage,Web toolkits –Backend and
FrontendWebframeworks

1 Explain Briefly MongoDB Framework [L5][CO5] [12M]

MongoDB is an open-source document database that provides high performance, high

availability, and automatic scaling.
In simple words, you can say that - Mongo DB is a document-oriented database. It is an
open source product, developed and supported by a company named 10gen.
MongoDB is available under General Public license for free, and it is also available
under Commercial license from the manufacturer.
The manufacturing company 10gen has defined MongoDB as:
"MongoDB is a scalable, open source, high performance, document-oriented database."
- 10gen
MongoDB was designed to work with commodity servers. Now it is used by the
company of all sizes, across all industry.

The primary purpose of building MongoDB is:

• Scalability
• Performance
• High Availability
• Scaling from single server deployments to large, complex multi-site
architectures.
• Key points of MongoDB
• Develop Faster
• Deploy Easier
• Scale Bigger

MongoDB’s Aggregation Framework enables users to send an analytics or data

processing workload, written using an aggregation language, to the database to execute
the workload against the data it holds.

You can think of the Aggregation Framework as having two parts:

1. The Aggregations API provided by the MongoDB Driver embedded in each
application to enable the application to define an aggregation task called a
pipeline and send it to the database for the database to process
2.The Aggregation Runtime running in the database to receive the pipeline
request from the application and execute the pipeline against the persisted
data
2 Explain Accessing of MongoDB Documents from Node.js [L5][CO5] [12M]

Access MongoDB With Node. JS

1. Install MongoDB.
2. Create Project.
3. Create Database.
4. Create Collection.
5. Insert Data.
6. Find Data.
7. Update Data.
8. Delete Data.
3 Create a MongoDB collection of “Research articles “with required details [L6][CO5] [12M]

package net.javaguides.mongodb.collection;

import java.util.ArrayList;

import org.bson.Document;

import com.mongodb.MongoCommandException;
import com.mongodb.client.MongoClients;
import com.mongodb.client.MongoCollection;

/**
* Java MongoDB Create Collection Example
* @author Ramesh Fadatare
*
*/
public class MongoCreateCollection {

public static void main(String[] args) {

try (var mongoClient =

MongoClients.create("mongodb://localhost:27017")) {

var database = mongoClient.getDatabase("javaguides");

try {
database.createCollection("users");
System.out.println("Collection created successfully");
} catch (MongoCommandException e) {
database.getCollection("users").drop();
}

var docs = new ArrayList < Document > ();

MongoCollection < Document > collection =

database.getCollection("users");

var d1 = new Document("_id", 1);

d1.append("_firstName", "Ramesh");
d1.append("_lastName", "Fadatare");
docs.add(d1);

var d2 = new Document("_id", 2);

d2.append("_firstName", "Tony");
d2.append("_lastName", "Stark");
docs.add(d2);

var d3 = new Document("_id", 3);

d3.append("_firstName", "Tom");
d3.append("_lastName", "Cruise");
docs.add(d3);

var d4 = new Document("_id", 4);

d4.append("_firstName", "Amir");
d4.append("_lastName", "Khan");
docs.add(d4);

var d5 = new Document("_id", 5);

d5.append("_firstName", "Umesh");
d5.append("_lastName", "Fadatare");
docs.add(d5);

collection.insertMany(docs);
}
}
}

4 a List out Various Backend Web frameworks [L1][CO5] [6M]

1. Django

2. Laravel

3. Express

4. Spring Boot

5. Ruby on Rails

6. Flask

7. ASP.NET

b List out Various Frontend Web frameworks [L1][CO5] [6M]

Top Most Popular Frontend Frameworks 2023

1. React.

2. Angular.

3. JQuery.

4. Vue.js.

5. Backbone.js.
6. Ember.js.

7. Semantic-UI.

8. Svelte.

5 Explain Manipulating of MongoDB Documents from Node.js [L5][CO5] [12M]

// Importing mongoose module

const mongoose = require("mongoose");

// Database Address
const url = "mongodb://localhost:27017/GFG";

// Connecting to database
mongoose
.connect(url)
.then((ans) => {
console.log("Connected Successful");
})
.catch((err) => {
console.log("Error in the Connection");
});

// Calling Schema class

const Schema = mongoose.Schema;

// Creating Structure of the collection

const collection_structure = new Schema({
name: {
type: String,
required: true,
},
marks: {
type: Number,
},
});

// Creating collection
const collections = mongoose.model("GFG2", collection_structure);

// Inserting one document

collections
.create({

// Inserting value of only one key

name: "GFG",
marks: "10q0", // Inserting wrong value
})
.then((ans) => {
console.log(ans);
})
.catch((err) => {
console.log(err.message);
});

6 What is MeteorJS framework [L1][CO5] [12M]

 Meteor is an open-source full-stack JavaScript platform that is useful for

developing modern web and mobile applications.
 Meteor helps the developer to develop in one language.
 Meteor has several features that help for creating a responsive and reactive
web or mobile application using JavaScript or different packages available
in the framework.

7 Create an application using MeteorJS framework [L6][CO5] [12M]

meteor create myApp
Once completed switch to myApp folder and type meteor. That’s it. You should be seeing screen like this.

8 Explain a) Angular b) Meteor [L5][CO5] [12M]

a) Angular
Angular is a TypeScript-based, free and open-source single-page web application framework
led by the Angular Team at Google and by a community of individuals and corporations.
Angular is a complete rewrite from the same team that built AngularJS.

Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it,

and its primary purpose is to develop single-page applications. As a framework, Angular has
clear advantages while also providing a standard structure for developers to work.

Angular is at least 7 times faster than AngularJS due to its better architecture, and algorithm for
data binding. It does not generate HTML, and wait for the browser to parse it, instead, it creates
DOM data structures directly.

b) Meteor

Meteor, or MeteorJS, is a partly proprietary, mostly free and open-source isomorphic

JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and
produces cross-platform code.

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications.
Meteor includes a key set of technologies for building connected-client reactive applications, a
build tool, and a curated set of packages from the Node. js and general JavaScript community.

Meteor is a full-stack framework. In practice, that means Meteor applications include client
code, which runs in either a web browser or Cordova mobile app, server code inside a Node. js
container, as well as a common code that runs on both client and server sides.

9 Create an application in node.js for student management [L6][CO5] [12M]

// Creating the fee class

public class fee extends Frame {

JLabel l1, l2, l3, l4,

l5, l6, l7, l8,
l9, l10, l12, l13,
l14, l11, l15;

JTextField tf1, tf2, tf3,

tf4, tf5, tf6,
tf7, tf8, tf9,
tf10;

JTextArea area2, area1;

JRadioButton rb1, rb2, rb3,

rb4, rb5, rb6,
rb7;

JFileChooser f1;

// Default constructor to
// initialize the parameters
fee()
{

l1 = new JLabel("Fee Report");

l1.setBounds(550, 100, 250, 20);

l2 = new JLabel(
"Name of the Student:");
l2.setBounds(50, 150, 250, 20);

tf1 = new JTextField();

tf1.setBounds(250, 150, 250, 20);

l3 = new JLabel(
"Name of the Father:");
l3.setBounds(50, 200, 250, 20);

tf2 = new JTextField();

tf2.setBounds(250, 200, 250, 20);

l4 = new JLabel("Roll Number:");

l4.setBounds(50, 250, 250, 20);

tf3 = new JTextField();

tf3.setBounds(250, 250, 250, 20);

l5 = new JLabel("Email ID:");

l5.setBounds(50, 300, 250, 20);

tf4 = new JTextField();

tf4.setBounds(250, 300, 250, 20);

l6 = new JLabel("Contact Number:");

l6.setBounds(50, 350, 250, 20);

tf5 = new JTextField();

tf5.setBounds(250, 350, 250, 20);

l7 = new JLabel("Address:");
l7.setBounds(50, 400, 250, 20);

area1 = new JTextArea();

area1.setBounds(250, 400, 250, 90);

l9 = new JLabel("Gender:");
l9.setBounds(50, 500, 250, 20);

JRadioButton r5
= new JRadioButton(" Male");
JRadioButton r6
= new JRadioButton(" Female");

r5.setBounds(250, 500, 100, 30);

r6.setBounds(350, 500, 100, 30);

ButtonGroup bg = new ButtonGroup();

bg.add(r5);
bg.add(r6);

l10 = new JLabel("Nationality:");

l10.setBounds(50, 550, 250, 20);

tf6 = new JTextField();

tf6.setBounds(250, 550, 250, 20);

l11 = new JLabel(

"Year of passing 10th");
l11.setBounds(50, 600, 250, 20);

String language[]
= { "2016", "2015", "2014" };
final JComboBox cb1
= new JComboBox(language);

cb1.setBounds(250, 600, 90, 20);

l12 = new JLabel(

"Year of passing 12th");
l12.setBounds(50, 650, 250, 20);

String languagess[]
= { "2019", "2018", "2017" };

l13 = new JLabel(

"Points Secured in 10th:");
l13.setBounds(50, 700, 250, 20);

tf7 = new JTextField();

tf7.setBounds(250, 700, 250, 20);

l14 = new JLabel("Percentage in 12th:");

l14.setBounds(50, 750, 250, 20);

tf8 = new JTextField();

tf8.setBounds(250, 750, 250, 20);

ImageIcon i2 = new ImageIcon("2.png");

JLabel l15
= new JLabel("", i2, JLabel.CENTER);

l15.setBounds(900, 50, 600, 200);

final JComboBox cb2

= new JComboBox(languagess);

cb2.setBounds(250, 650, 90, 20);

l8 = new JLabel(
"Groups Offered here are:");
l8.setBounds(800, 150, 250, 20);

rb1 = new JRadioButton("SEAS");

rb1.setBounds(550, 150, 100, 30);

rb2 = new JRadioButton("SLABS");

rb2.setBounds(650, 150, 100, 30);

ButtonGroup bg1 = new ButtonGroup();

bg1.add(rb1);
bg1.add(rb2);

rb3 = new JRadioButton("HOSTELLER");

rb3.setBounds(550, 200, 100, 30);

rb4 = new JRadioButton("DAY SCHOLAR");

rb4.setBounds(650, 200, 120, 30);

ButtonGroup bg2 = new ButtonGroup();

bg2.add(rb3);
bg2.add(rb4);

String languages[]
= { "CSE", "ECE", "EEE",
"CIVIL", "MECH" };
final JComboBox cb
= new JComboBox(languages);
cb.setBounds(800, 200, 90, 20);

final JLabel label

= new JLabel();
label.setBounds(600, 430, 500, 30);
JButton b = new JButton("Show");
b.setBounds(1000, 300, 80, 30);

final DefaultListModel<String> li1

= new DefaultListModel<>();

li1.addElement("CSE(2, 50, 000)");

li1.addElement("ECE(2, 50, 000)");
li1.addElement("EEE(2, 50, 000)");
li1.addElement("MECH(2, 50, 000)");
li1.addElement("CIVIL(2, 50, 000)");

final JList<String> list1

= new JList<>(li1);

list1.setBounds(600, 300, 125, 125);

DefaultListModel<String> li2
= new DefaultListModel<>();

li2.addElement(
"2 SHARE(1, 50, 000)");
li2.addElement(
"3 SHARE(1, 40, 000)");
li2.addElement(
"5 SHARE(1, 20, 000)");
li2.addElement(
"8 SHARE(1, 10, 000)");
li2.addElement(
"bus(40, 000)");

final JList<String> list2

= new JList<>(li2);
list2.setBounds(
800, 300, 125, 125);

area2 = new JTextArea();

area2.setBounds(600, 540, 450, 240);

b.addActionListener(new ActionListener() {

// Method to display the data

// Reset the text fields

// Implementing the Print action

// Generating the receipt

Receipt.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{

area2.setText(
"--------------------------------"
+ "-----------FEE RECEIPT----"
+ "--------------------------"
+ "--------------------------"
+ "-------------------\n");

int index2 = list2.getSelectedIndex();

if (index2 == 0) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be "
+ "paid is 4 Lakhs \n");
}

if (index2 == 1) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.9 Lakhs \n");
}

if (index2 == 2) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.8 Lakhs \n");
}

if (index2 == 3) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 3.7 Lakhs \n");
}

if (index2 == 4) {
area2.setText(area2.getText()
+ " "
+ "Total amount to be paid "
+ "is 2.9 Lakhs \n");
}

if (e.getSource() == Receipt) {
try {
FileWriter fw
= new FileWriter(
"java.txt", true);
fw.write(area2.getText());
fw.close();
}
catch (Exception ae) {
System.out.println(ae);
}
}

10 Explain a) Django b) Ruby on Rails [L5][CO5] [12M]

a) Django

It is developed in the context of several architecture ideologies.

Every stack part is designed to render it separate and, thus, loosely connected.
The developer will write fewer code while encouraging the fast creation of applications.
When completed, the model does not replicate itself, maybe easily replicated at several
intersections in application formation.
Consequently, it encourages best practices in technology by keeping a clean architecture
in its own application and thus a super-fast growth.

It is a high-level web framework from Python that allows for the rapid implementation
of security and sustainable websites.
Designed by seasoned programmers, it takes care of most of the web creation headache
and you can focus on developing the software without the need to start from scratch.
It’s free and open-source, it has a vibrant and involved community, excellent resources,
and lots of free and paid services.
It has a customized caching system.
Django REST framework is one of the best tools for building API’s.

Applications:
1. Data-analysis tools.
2. Photo-based verification systems.
3. E-mail systems.
Famous companies that use Django framework:
• Instagram
• NASA
• Dropbox
• Spotify etc

b) Ruby on Rails

It is a server-side web application development framework written in Ruby

language.
It allows us to write fewer lines of code than other languages and frameworks.
It includes everything required to build a model-view-controller (MVC) pattern,
database-backed web applications.
Rails are loaded up with many features, such as metaprogramming, that make
developers more efficient.
 It also uses code generation but rely on metaprogramming for difficult
tasks. An active record will archive an object in the database.
 It does not need much modification, as it prefers the traditional method.
 It is a series of application libraries that provide a ready-made solution
for routine activities such as designing on-site tables, templates, or
menus.
 Ruby, programming language is paired with JavaScript, HTML, and CSS
to build web applications that operate on a web server.
 Ruby on Rails is known as a back-end or web application creation tool on
the server-side because it operates on the web server. It is like PHP on
Laravel and Symfony, or on Django as Python

Applications:

There are many applications and websites that are built with ruby on rails:
• GitHub- It is a platform that brings together the community of developers to
discover, share, and develop better software.
• Crunchbase- It is one of the top platforms to collect the company’s information
for both private and public entities.
• Basecamp- Business managing project scheduling and tools for team
collaboration.
Ask.fm, SlideShare, Shopify, Hulu, Zendesk, etc., are some other applications and
websites that use Ruby On Rails framework

BCA - (WEB PROGRAMMING) (Total 5 Units PDF
100% (1)
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
153 pages
Introduction To HTML+CSS+Javascript
100% (1)
Introduction To HTML+CSS+Javascript
23 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
Unit 2
No ratings yet
Unit 2
26 pages
Web Designing Using HTML5
No ratings yet
Web Designing Using HTML5
104 pages
Interview Questions
No ratings yet
Interview Questions
25 pages
WT LAB 2 HTML CSS-1
No ratings yet
WT LAB 2 HTML CSS-1
3 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
Week 1 - Documentation (Autosaved)
No ratings yet
Week 1 - Documentation (Autosaved)
11 pages
The Practical Programmer's Guide To HTML & CSS
No ratings yet
The Practical Programmer's Guide To HTML & CSS
128 pages
Basics of HTML and Css From Scratch PDF
No ratings yet
Basics of HTML and Css From Scratch PDF
20 pages
Chapter 2 & 3 - HTML and CSS
No ratings yet
Chapter 2 & 3 - HTML and CSS
60 pages
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
Web Devlopment
No ratings yet
Web Devlopment
21 pages
intro
No ratings yet
intro
5 pages
WT Unit 1 IMP Bat Notes
No ratings yet
WT Unit 1 IMP Bat Notes
2 pages
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet
WEB[1]
No ratings yet
WEB[1]
29 pages
SAILAKSHMI_1910331413_Seminar_report_final_-_Sailakshmi_Dusi (1)_removed (1)
No ratings yet
SAILAKSHMI_1910331413_Seminar_report_final_-_Sailakshmi_Dusi (1)_removed (1)
25 pages
WEB
No ratings yet
WEB
32 pages
WT Unit 1 IMP Bat Notes
No ratings yet
WT Unit 1 IMP Bat Notes
11 pages
Coding JavaScript
From Everand
Coding JavaScript
Tom Henricksen
No ratings yet
Unit-II-Web-Technologies
No ratings yet
Unit-II-Web-Technologies
17 pages
Web Programming Indv Assignment PDF
No ratings yet
Web Programming Indv Assignment PDF
8 pages
Fundamental of Web Design Assignment 1
No ratings yet
Fundamental of Web Design Assignment 1
10 pages
Unit 1
No ratings yet
Unit 1
13 pages
Cse 443
No ratings yet
Cse 443
21 pages
Lab 01 manual
No ratings yet
Lab 01 manual
16 pages
Frontend Lecture
No ratings yet
Frontend Lecture
16 pages
Internship Training
No ratings yet
Internship Training
23 pages
Occ Record
No ratings yet
Occ Record
145 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
Quick Start Basic HTML and JavaScript
From Everand
Quick Start Basic HTML and JavaScript
Tom Henricksen
No ratings yet
MCSD Web Applications Html5 Courseware
No ratings yet
MCSD Web Applications Html5 Courseware
174 pages
HTML, CSS, and Javascript
No ratings yet
HTML, CSS, and Javascript
10 pages
Chris Walshaw Computing & Information Systems University of Greenwich
No ratings yet
Chris Walshaw Computing & Information Systems University of Greenwich
45 pages
Cooking up the web with HTML and JavaScript
From Everand
Cooking up the web with HTML and JavaScript
Tom Henricksen
No ratings yet
E-Book - Full Stack Python
No ratings yet
E-Book - Full Stack Python
13 pages
html
No ratings yet
html
13 pages
Unit 2-Web Technologies - HTML
No ratings yet
Unit 2-Web Technologies - HTML
45 pages
Web_Application_Development_Notes_by_Piyush_-_Slashbyte
No ratings yet
Web_Application_Development_Notes_by_Piyush_-_Slashbyte
44 pages
Mohit
No ratings yet
Mohit
23 pages
Web Programming Class-2
No ratings yet
Web Programming Class-2
61 pages
PPT1 - Web Designing
No ratings yet
PPT1 - Web Designing
54 pages
Html5: QuickStudy Laminated Reference Guide
From Everand
Html5: QuickStudy Laminated Reference Guide
Robin Nixon
No ratings yet
Lesson 1 - Introduction HTML Css
No ratings yet
Lesson 1 - Introduction HTML Css
38 pages
Interview_quick_Notes_for_HTML_Javascript_CSS_Python_1664021144
No ratings yet
Interview_quick_Notes_for_HTML_Javascript_CSS_Python_1664021144
27 pages
WT Unit1
No ratings yet
WT Unit1
33 pages
CSC 122 LECTURE NOTE
No ratings yet
CSC 122 LECTURE NOTE
23 pages
HTML+CSS Quick-n Dirty
From Everand
HTML+CSS Quick-n Dirty
Tom Henricksen
No ratings yet
ITR@3
No ratings yet
ITR@3
22 pages
Inbound 4311014418207722898
No ratings yet
Inbound 4311014418207722898
87 pages
HTML-and-CSS-QuickStart-Guide
No ratings yet
HTML-and-CSS-QuickStart-Guide
161 pages
PROJECT
No ratings yet
PROJECT
38 pages
HTML and Web Creation
No ratings yet
HTML and Web Creation
15 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
HTML - Hyper Text Markup Language
No ratings yet
HTML - Hyper Text Markup Language
8 pages
Unit 2WD
No ratings yet
Unit 2WD
8 pages
Unit 2
No ratings yet
Unit 2
11 pages
The Racers Life - Copy (10)
No ratings yet
The Racers Life - Copy (10)
72 pages
29.spring Boot
No ratings yet
29.spring Boot
24 pages
Internship Upload Nowwwww - Saikat Chakraborty (Ra2032241010090)
No ratings yet
Internship Upload Nowwwww - Saikat Chakraborty (Ra2032241010090)
10 pages
Lab1 JSX and ES6
No ratings yet
Lab1 JSX and ES6
10 pages
Waterfall Model Used in Software Development Reference: Software Requirements Engineering Waterfall Model
No ratings yet
Waterfall Model Used in Software Development Reference: Software Requirements Engineering Waterfall Model
4 pages
Zaheer Resume
No ratings yet
Zaheer Resume
1 page
Bartender Integration Methods ١
No ratings yet
Bartender Integration Methods ١
13 pages
1-Agile Principle and Mindset Q - A
No ratings yet
1-Agile Principle and Mindset Q - A
20 pages
CIT 302 COMPUTER PROGRAMMING
No ratings yet
CIT 302 COMPUTER PROGRAMMING
4 pages
T24 Componentisation
No ratings yet
T24 Componentisation
30 pages
SOAP UI Raghav Pal Notes
No ratings yet
SOAP UI Raghav Pal Notes
14 pages
Kuchh To Hua Hai
No ratings yet
Kuchh To Hua Hai
12 pages
ISTQB CTFL v4.0 Sample-Exam-A-Questions v1.5
No ratings yet
ISTQB CTFL v4.0 Sample-Exam-A-Questions v1.5
31 pages
Automation Testing Real Time Interview Questions
No ratings yet
Automation Testing Real Time Interview Questions
99 pages
Scripting Language
No ratings yet
Scripting Language
2 pages
Client Server
No ratings yet
Client Server
9 pages
Learn python full road map
No ratings yet
Learn python full road map
2 pages
Low Code Pillar Download
No ratings yet
Low Code Pillar Download
22 pages
Industrial Perspective in Java Programming CSV0652T - Unit - 1 - Part - I - Raw
No ratings yet
Industrial Perspective in Java Programming CSV0652T - Unit - 1 - Part - I - Raw
12 pages
Synopsis
No ratings yet
Synopsis
11 pages
Rudhi Vapp
No ratings yet
Rudhi Vapp
1 page
DevOps lifecycle I
No ratings yet
DevOps lifecycle I
12 pages
Laxmikant Marke - React JS - 2.6
No ratings yet
Laxmikant Marke - React JS - 2.6
2 pages
MERN Stack
No ratings yet
MERN Stack
6 pages
Full Stack Web Development Notes Book - Unit 1 - Basics of Full Stack
No ratings yet
Full Stack Web Development Notes Book - Unit 1 - Basics of Full Stack
19 pages
ESB Presentation
No ratings yet
ESB Presentation
35 pages
Python For Web Development: April 2022
No ratings yet
Python For Web Development: April 2022
14 pages
Coding Bootcamp in Full Stack Development - MEAN New
No ratings yet
Coding Bootcamp in Full Stack Development - MEAN New
18 pages
Software Engineering 3 Unit
No ratings yet
Software Engineering 3 Unit
32 pages
BCS 31 C Imp Ques
No ratings yet
BCS 31 C Imp Ques
5 pages
STQA Report
No ratings yet
STQA Report
21 pages