PROGRAM-1: Static Website Development

1.(a) Aim: Create a static website using HTML Table.

Theory: HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked
together. As its name suggests, you use HTML to simply"mark-up" a text document with tags that tell a
Web browser how to structure it to display.
TAG DESCRIPTION
Paragraph tag: <p></p> The paragraph tag offers a way to structure your
text into different paragraphs.
Line Break tag: <br> Whenever you use the line break element,
anything following it starts from the next line.
Center tag: <center></center> You can use the center tag to put any content in the
center of the page or any table cell.
Horizontal tag: <hr> The horizontal tag creates a line from the current
position in the document to the right margin and
breaks the line accordingly.
Table tag: <table></table> HTML tables are created using table tag. Table
Table Heading tag: <th></th> row tag is used to create table rows and table data
Table Row tag: <tr></tr> tag is used to create data cells. Headings, which
Table Data tag: <td></td> are defined in table heading tags are centered and
bold by default.
Table Header tag: <thead></thead> Table header tag is used to create a separate table
Table Footer tag: <tfoot></tfoot> header. Table body tag is used to indicate the main
Table Body tag: <tbody></tbody> body of the table. Table foot tag is used to create a
separate table footer.

Output:-

1.(b) Aim: Create a registration form using HTML forms.

Theory: The <form> tag is used to create an HTML form for user input. It serves as a container for
various input elements like text fields, check boxes, and buttons, enabling the collection of data for
submission to a server or processing via client-side scripts. An HTML form also has various attributes
like name, target, action, auto-complete, no-validate etc.
TAG DESCRIPTION
Form tag: <form></form> The form tag is used to create an HTML form for
user input.
Input tag: <input> The input tag is used to collect user input. An input
element can be displayed in many ways,
 depending on the type attribute.
Label tag: <label></label> The label tag defines a label for many form
elements.

ATTRIBUTE DESCRIPTION
Text Field: <input type=”text”> Displays a single-line text input field.
Radio Button: <input type=”radio”> Displays a radio button for selecting one of many
choices.
Checkbox: <input type=”checkbox”> Displays a checkbox for selecting zero or more of
many choices.
Submit Button: <input type=”submit”> Displays a submit button for submitting the form.
Button: <input type=”button”> Displays a clickable button.

Output:-

1.(c) Aim: Apply various CSS attributes and styles

Theory: Cascading Style Sheets, referred to as CSS, is a design language intended to simplifythe
process of making web pages presentable. There are three types of CSS styles: Inline CSS, which
directly affects the tag it is written in, Inpage CSS, an internal stylesheet which holds the CSS code for
the webpage in the head section, and External CSS, which uses an external stylesheet.
ATTRIBUTE DESCRIPTION
Background:- Set a background color using a common color
“background: pink;” name, rgba notation, or hexadecimal notation.
“background: rgba(200, 200, 200, 1);”
“background: #e5e5e5;”
Color:- Set the font color of a text using a common color
“color: blue;” name, rgba notation, or hexadecimal notation.
“color: rgba(40, 40, 220, 1);”
“color: #2222ee;”
Font-Family:- Set the font of the HTML element.
“font-family: Courier, ‘Times New Roman’;”
Height and Width:- Set the height and width (size) of the HTML
“height: 80px;” element.
“width: 50%;”
Padding:- Padding represents the amount of space between
“padding: 40px;” the edge of an element and the text or other
“padding: 20px 40px;” content inside it. Set the padding of all four edges
“padding: 10px 20px 30px 40px;” with one value, y-edges and x-edges separately or
each edge separately moving clockwise.
Margin:- Margin represents the amount of space between an
“margin: 40px;” element and its surrounding or parent element. Set
“margin: 20px 40px;” the margin of all four edges with one value, y-
“margin: 10px 20px 30px 40px;” edges and x-edges separately or each edge
separately moving clockwise.
Text Align:- Set the horizontal alignment of an element.
“text-align: center;”
Border:- Set the border size, color, and type of the element.
“border: 1px black solid;”

Output:-

PROGRAM-2: Dynamic Website Development

2.(a) Aim: Develop dynamic web content using JavaScript

Theory: JavaScript is a lightweight, interpreted programming language with object-oriented
capabilities. It is used as a part of webpages to create network-centric applications. Its implementation
allows client-side script to interact with the user and make dynamic pages.

Output:-
2.(b) Aim: Develop a student registration form with validation support using javascript.
Theory: The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. JavaScript can be used to trap user-initiated events such as button clicks, link
navigation, and otheractions that the user initiates explicitly or implicitly. The JavaScript code is
executed when the user submits the form, and only if all the entries are valid, they would be submitted
to the Web Server.

Output:-
2.(c) Aim: Develop a Dynamic website using Event Handling.
Theory: JavaScript Events are actions or occurrences that happen in the browser. They can be
triggered by various user interactions or by the browser itself. Common events include mouse clicks,
keyboard presses, page loads, and form submissions. Event handlers are JavaScript functions that
respond to these events, allowing developers to create interactive web applications.
EVENT DESCRIPTION
<HTML element event-type=”onclick”> Triggered when an element is clicked.
<HTML element event-type=”onmouseover”> Fired when the mouse pointer moves over an
element.
<HTML element event-type=”onmouseout”> Occurs when the mouse pointer leaves an element.
<HTML element event-type=”onkeydown”> Fired when a key is pressed down.
<HTML element event-type=”onkeyup”> Fired when a key is released.
<HTML element event-type=”onchange”> Triggered when the value of an input element
changes.
<HTML element event-type=”onload”> Occurs when a page has finished loading.
<HTML element event-type=”onsubmit”> Fired when a form is submitted.
<HTML element event-type=”onfocus”> Occurs when an element gets focus.
<HTML element event-type=”onblur”> Fired when an element loses focus.

Output:-
Event Date:-
Event OnKeyUp:-

Event Click:-
2.(d) Aim: Develop DOM manipulation using Javascript.
Theory: HTML DOM is a standard object model and programming interface for HTML documents.
With HTML DOM, we can easily access and manipulate tags, IDs, classes, attributes, or elements of
HTML using commands or methods provided by the document object. Using DOM JavaScript we get
access to HTML as well as CSS of the web page and can also modify the behavior of the HTML
elements.

Output:-
PROGRAM-3: Server side programming using node.js

3.(a) Aim: Deployment of node.js and built-in node.js modules.

Theory: Node.js is a powerful runtime that allows developers to build server-side applications using
JavaScript. One of the reasons it’s so popular is its extensive set of built-in functions and modules that
simplify various tasks.
MODULE DESCRIPTION
File System module File system module provides functions for
import: const fs = require(‘fs’); interacting with the file system, making it easy to
read, write, and manipulate files.
HTTP module The HTTP module allows you to create HTTP
import: const http = require(‘http’); servers and make HTTP requests.
Path module The path module simplifies working with file and
import: const path = require(‘path’); directory paths, making it cross-platform
compatible.
Events module Events module allows you to create and handle
import: const EventEmitter = require(‘events’); custom events in your applications.
Readline module The readline module provides an easy way to read
import: const readline = require(‘readline’); user input from the command line.
URL module The URL module provides utilities for URL
import: const url = require(‘url’); parsing and formatting.
Buffer module The buffer class in Node.js allows you to work
object: const buffer = Buffer.from(‘Hello, World!’, with binary data directly.
‘utf-8’);
OS module The OS module provides information about the
import: const os = require(‘os’); operating system on which Node.js in running.

Output:-
1.

2.

3.

4.

5.

6.

3.(b) Aim: Implement Filesystem in node.js

Theory: Node.js File System (fs) module provides functions for interacting with the file system,
making it easy to read, write, and manipulate files.

Output:-

3.(d) Aim: Request parameter handling, request response object.

Theory: The request object (req) represents the HTTP request that the client sends to the server. It
contains information about the request, such as the request method, URL, query parameters, request
body, headers, and more. The response object (res) represents the HTTP response that the server sends
back to the client. It allows you to send data to the client, set response headers, and control the HTTP
response status code.

Output:-

3.(f) Aim: Create a REST service in Node.js

Theory: REST (Representational State Transfer) is an architectural style for designing networked
applications. A RESTful API is a web service that follows the principles of REST architecture. It uses
standard HTTP methods (GET, POST, PUT, DELETE) to perform CRUD (Create, Read, Update,
Delete) operations on resources, and data is typically transferred in JSON or XML format.

Output:-

PROGRAM-4: Server-side programming using React.js.

4.(a) Aim: Introduction to React Components, rendering HTML, JSX.

Theory: Components in React serve as independent and reusable code blocks for UI elements. They
represent different parts of a web page and contain both structure and behavior. Rendering in React is a
crucial process that involves generating the user interface from components. At its core, rendering is
about translating React components, which are written in JSX, into HTML elements that can be
displayed in the web browser.

Output:-
Rendering HTML:-
Rendering JSX:-

4.(b) Aim: Execute React props, events, lists, forms and router.
Theory: React props are read-only attributes passed from parent to child components in React to
customize rendering. React uses synthetic events to handle user actions (like clicks) in a way that’s
consistent across all browsers. Arrays can be rendered as lists using the map() function, with each item
requiring a unique key prop. Forms allow react to track user input and handle form submission. React
router facilitates navigation within a single-page application, handling different URLs and rendering
appropriate components.
EVENT DESCRIPTION
onInput This event fires when the value of input field gets
changed.
onSubmit This event is triggered when the user submits a
form using the submit button.
onFocus This event fires when the user clicks on any input
tag and that tag activates to receive data.
onBlur This event occurs when the element is no longer
active.

Output:-
React Event:-

React Form:-

React List:-
4.(c) Aim: Implement a REST service from Node.js and display SPA.
Theory: REST service uses HTTP methods (GET, POST, etc.) to interact with resources in a stateless
manner. An SPA (Single Page Application) is a web application that loads a single HTML page and
dynamically updates content as the user interacts with the app.

Output:-

PROGRAM-5: MongoDB and React JS

5.(b) Aim: Creating collections, retrieving data, inserting, updating, and querying the databases
Theory: In MongoDB, collections can be created manually or automatically when a document is
inserted. Data is added to a collection using the insertOne method for single documents or insertMany
for multiple documents. The find method is used to query documents in a collection based on given
criteria. Methods like updateOne and updateMany are used to modify existing documents based on a
specified query. MongoDB provides various operators like $eq, $gt, and $in to construct flexible and
powerful queries.

Program:-
use College
db
show dbs
db.Students.insertOne({ID:1, Name:'Alekhya', Age:20, Dept:'CSE'});
show dbs
db.Students.insertMany([{ID:2, Name:'Balu', Age:19, Dept:'ECE'}, {ID:3, Name:'Chanti', Age:21,
Dept:'EEE'} ]);
db.Courses.insertMany([{CourseID:101, CourseName:'Data Structures', Credits:4}, {CourseID:201,
CourseName:'Basic Electronics', Credits:3}, {CourseID:304, CourseName:'BEE', Credits:4}]);
db.Departments.insertMany([{Name:'CSE', FacultyCount:25}, {Name:'ECE', FacultyCount:32},
{Name:'EEE', FacultyCount:21}]);
db.Students.find()
db.Students.find({Dept:'CSE'});
db.Courses.find({CourseID:201});
db.Students.updateOne({ID:3}, {$set: {Name:'Sameera'}});
db.Students.find()
db.Departments.updateMany(
{ FacultyCount: 25 },
{ $set: { FacultyCount: 19, Name:'Civil'} }
);
db.Departments.find();
db.Courses.deleteOne({ CourseName: 'Data Structures' });
db.Courses.find();
show collections
db.Courses.drop();
show collections

Output:-
Create Database, Current Database & View Databases:-

Create Collections and Insert Documents:-

Query The Data:-
Update Data:-
Delete Data:-

Drop Collection:-
5.(c) Aim: Connection with Node.js
Steps to Connect Node to a MongoDB Database:-
Step-1: Install mongoose in your system using the below command.
To connect a Node.js application to MongoDB, we have to use a library called Mongoose.

npm install mongoose

Step-2: Import the mongoose library.

const mongoose = require("mongoose");

After that, we have to call the connect method of Mongoose.

Step-3: Use the Mongoose connect method to establish the connection.
mongoose.connect("mongodb://localhost:27017/collectionName", {
useNewUrlParser: true,
useUnifiedTopology: true
});

Then we have to define a schema. A schema is a structure, that gives information about how the data is
being stored in a collection.
Step-4: Define the Schema.
Example: Suppose we want to store information from a contact form of a website.

const contactSchema = {
email: String,
query: String,
};

Then we have to create a model using that schema which is then used to store data in a document as
objects.
Step-5: Create a Model with the defined schema.
 const Contact = mongoose.model("Contact", contactSchema);

Then, finally, we are able to store data in our document.