R.M.K.

ENGINEERING COLLEGE
(An Autonomous Institution)

R.S.M Nagar, Kavaraipettai, Gummidipoondi Taluk, Thiruvallur District - 601 206.

Affiliated to Anna University, Chennai / Approved by AICTE, New Delhi

ISO 21001:2018 Certified Institution / Accredited by NAAC with A+ Grade
All the eligible UG Programs are accredited by NBA, New Delhi

DEPARTMENT OF COMPUTR SCIENCE AND ENGINEERING

Regulation 2022

22CS402 – Web Development Frameworks

LABORATORY MANUAL

B.E. / B. TECH – SECOND YEAR, SEMESTER 04

 R.M.K. ENGINEERING COLLEGE
(An Autonomous Institution)

R.S.M Nagar, Kavaraipettai, Gummidipoondi Taluk, Thiruvallur District - 601 206.

Affiliated to Anna University, Chennai / Approved by AICTE, New Delhi

ISO 21001:2018 Certified Institution / Accredited by NAAC with A+ Grade
All the eligible UG Programs are accredited by NBA, New Delhi

DEPARTMENT OF COMPUTR SCIENCE AND ENGINEERING

Regulation 2022

22CS402 - Web Development Frameworks

LABORATORY MANUAL

B.E. / B.TECH – SECOND YEAR, SEMESTER 04

Name : --------------------------------------------------

Register Number : --------------------------------------------------

Branch / Section : --------------------------------------------------

Academic Year / Semester : --------------------------------------------------

Prepared by Approved by Approved by

Name Mr. S. Vijayakumar Dr. T Sethukarasi Dr. K A Mohamed Junaid

Associate Professor
Designation HoD / CSE Principal
CSE

Signature

Date
 PROGRAM OUTCOMES (POs)

Engineering Graduates will be able to:

1. Engineering Knowledge: Apply the knowledge of Mathematics, Science, Engineering

Fundamentals, and an Engineering Specialization to the solution of complex engineering
problems.
2. Problem Analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of Mathematics,
Natural Sciences, and Engineering Sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis of
the information to provide valid conclusions.
5. Modern Tool Usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modelling to complex engineering activities
with an understanding of the limitations.
6. The Engineer and Society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to
the professional engineering practice.
7. Environment and Sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
of the engineering practice.
9. Individual and Team Work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive
clear instructions.
11. Project Management and Finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long Learning: Recognize the need for and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
22CS402 – Web Development Frameworks 4

Syllabus

L T P C
22CS402 Web Development Frameworks 3 0 2 4
OBJECTIVES:
The Course will enable learners to:
❖ Simplify website development using Spring boot as server-side technologies.
❖ Build single page applications using REACT as a reusable UI component
technology as client-side technology.
❖ Assemble REACT as a front end technology and Node js as a server side
technology to develop enterprise applications
❖ Develop a scalable and responsive web application
❖ Develop an industry ready application web enterprise feature
UNIT I SPRING BOOT AND STRUTS 9+6
Spring Boot: Introducing Spring Boot, getting started with springboot, Common springboot
task-Managing configuration, creating custom properties, executing code on Springboot
application startup, Database access with Spring data, Securing spring boot application.
List of Exercise/Experiments:
1. Use Spring Boot to build a Web Application
2. Create REST Service for an Education Site
UNIT II JAVA REACT 9+6
React: Introduction to React, Pure React- The Virtual DOM, React Elements, React with JSX,
Props, State, and the Component Tree, Enhancing Components- Flux.
List of Exercise/Experiments:
1. Build Search filter in React
2. Display a list in React
3. Create Simple Login form in React
UNIT III Node JS 9+6
Node JS: Introduction to Node JS, Setting up Node.js, Node.js Modules- Finding and loading
CommonJS and JSON modules using require, Hybrid CommonJS/Node.js/ES6 module
scenarios, npm - the Node.js package management system.
List of Exercise/Experiments:
1. Write a node.js program for making external http calls
2. Write a program in node.js to parse the given url.
UNIT IV WEB FRAMEWORK (ANGULAR) – I 9+6
Introduction- Angular First App, Angular UI with Bootstrap CSS Authentication,
Authentication Service, Unsubscribe, Logout and Route Guard Cleanup, Customer Service
,http Service, Token Interceptor, Multi Provider, Compile-time Configuration, Runtime
Configuration, Error Handling.
List of Exercise/Experiments:
1. Create a Dropdown using Angular UI bootstrap
2. Modify existing components and generating new components using Angular
UNIT V WEB FRAMEWORK (ANGULAR) – II 9+6
Dependancy injection in Angular, Reactive programming in Angular, Laying out pages with
Flex Layout, Implementing component communications, Change detection and component
lifecycle.
List of Exercise/Experiments:
1. Launching your app with Angular root module
TOTAL: 75 PERIODS

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 5

OUTCOMES:
Upon completion of the course, the students will be able to:
CO1: Write Web API/RESTful API application programming interface to communicate with
Spring boot as a serverside technology.
CO2: Build single page applications using REACT as a reusable UI component technology as
client side technology
CO3: Build applications using Node Js as server side technologies
CO4: Able to develop a web application using latest Angular Framework
CO5: Apply various Angular features including directives, components, and services.
TEXTBOOKS:
1. Somnath Musib, Spring Boot in Practice, Manning publication, June 2022
(https://www.manning.com/books/spring-boot-in-practice)
2. Alex Banks, Eve Porcello , “Learning React”, May 2017, O'Reilly Media, Inc. ISBN:
9781491954621 (https://www.oreilly.com/library/view/learning- react/9781491954614/)
3. David Herron ,”Node.js Web Development - Fourth Edition”,2018, Packt
Publishing,ISBN: 9781788626859
4. Sukesh Marla, “A Journey to Angular Development Paperback “, BPB
Publications.(https://in.bpbonline.com/products/a-journey-to-angular-
development?_pos=1&_sid=0a0a0e9fb&_ss=r)
5. Yakov Fain Anton Moiseev, “Angular Development with TypeScript”, 2nd
Edition.(https://www.manning.com/books/angular-development-with-typescript-Second
Edition.
REFERENCES:
1. Sue Spielman, The Struts Framework 1: A Practical guide for Java Programmers‖, 1st
Edition. Elsevier 2002
LIST OF EQUIPMENTS:
VSCode, Angular JS, React JS, Node JS, Ruby, Django

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 6

S. No. List of Exercises

1 Use Spring Boot to build a Web Application

2 Create REST Service for an Education Site

3 Build Search filter in React

4 Display a list in React

5 Create Simple Login form in React

6 Write a node.js program for making external http calls

7 Write a program in node.js to parse the given url.

8 Create a Dropdown using Angular UI bootstrap

9 Modify existing components and generating new components using Angular

10 Launching your app with Angular root module

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 7

Date :
Exercise Number :1
Title: Use Spring Boot to build a Web Application

Aim:
To develop a Web Application using Spring Boot.

Introduction:
Web application development is defined as creating software and web-based applications that run
on a web server and can be accessed over the internet using web browsers. This process involves designing,
developing, testing, and deploying web-based systems that allow users to interact with data and perform
tasks online. Application development can be built using a variety of programming languages and
frameworks and can be customized to meet the specific needs of an organization or business.
Key aspects of web application development include:

Client-Side Development: This involves creating the user interface (UI) components of the web
application. Client-side development typically includes HTML (Hypertext Markup Language) for
structuring content, CSS (Cascading Style Sheets) for styling, and JavaScript for adding
interactivity and dynamic behavior.
Server-Side Development: Server-side development focuses on building the back end of the web
application. This includes designing and implementing the server logic, database management,
user authentication, and business logic. Common programming languages for server-side
development include Python, Ruby, Java, PHP, and Node.js.
Database Management: Web applications often require databases to store and manage data.
Developers design and implement database schemas, create queries to retrieve and manipulate
data, and ensure data integrity and security.
Frameworks and Libraries: Developers use frameworks and libraries to streamline the
development process and ensure best practices. These tools provide pre-built components,
structures, and patterns for routing, authentication, and data handling tasks.
Front-End and Back-End Communication: Communication between a web application’s front-
end and back-end components is essential. APIs (Application Programming Interfaces) enable data
exchange and interaction between the client and server.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 8

Web App Development Frameworks

Web application development frameworks provide a structured and organized way to build web
applications. These frameworks offer pre-built components, libraries, and tools that streamline
development, promote best practices, and help developers create robust and maintainable
applications. Here are some popular web application development frameworks:
Spring Boot (Java):
A Java-based framework for building web applications and microservices. It simplifies the
configuration and setup process, allowing developers to focus on writing code.
React (JavaScript):
A widely-used JavaScript library for building user interfaces. It’s particularly suited for building
interactive UI components in complex applications.
Angular (TypeScript):
A front-end framework maintained by Google for building dynamic single-page applications
(SPAs). It offers powerful data binding, component architecture, and dependency injection.
Express.js (Node.js):
A minimal and flexible Node.js framework for building server-side applications and APIs. It’s
often used for creating lightweight and fast applications.
NestJS (Node.js/TypeScript):
A progressive Node.js framework for building scalable and efficient server-side applications. It’s
built with TypeScript and follows the modular architecture of Angular.

Algorithm:
1. Follow the below steps to build a web application using Spring Boot
1. Set Up Your Development Environment:
✓ Ensure you have Java JDK installed on your system.
✓ Install an Integrated Development Environment (IDE) like IntelliJ IDEA, Eclipse, or
Spring Tool Suite (STS).
✓ Install Apache Maven or use Gradle as your build tool.
2. Create a New Spring Boot Project:
✓ Open your IDE and create a new Spring Boot project.
✓ Choose Maven or Gradle as the build tool.
✓ Add the required dependencies for building a web application.
3. Define Your Application's Dependencies:
✓ For a web application, you'll need dependencies like spring-boot-starter-web, which
includes everything you need to build a web application with Spring MVC.
4. Define Your Application's Structure:
✓ Define your project's package structure based on Spring's best practices (e.g.,
controllers, services, repositories).

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 9

✓ Create necessary folders and packages for controllers, services, models, and views.
5. Create Controllers:
✓ Create Spring MVC controllers to handle incoming HTTP requests and define request
mappings.
✓ Annotate your controllers with @Controller or @RestController.
6. Define Service Layer:
✓ Implement service classes to contain business logic.
✓ Annotate service classes with @Service.
7. Create Views (if necessary):
✓ For server-side rendering, create views using template engines like Thymeleaf,
Freemarker, or JSP.
✓ Place your HTML templates in appropriate folders.
8. Configure Application Properties:
✓ Configure your application properties (e.g., server port, database configuration) in the
application.properties or application.yml file.
9. Run Your Application:
✓ Run your Spring Boot application from your IDE or using Maven/Gradle commands.
✓ Access your web application through the specified port (e.g., localhost:8080).
10. Test Your Application:
✓ Test your web application by sending HTTP requests to your defined endpoints.
✓ Use tools like Postman or Swagger for testing API endpoints.
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

public static void main(String[] args) {

SpringApplication.run(MyApplication.class, args);
}
}

Result:
Thus a Web Application was successfully developed using Spring Boot.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 10

Date :
Exercise Number :2
Title: Create REST Service for an Education Site

Aim:
To develop a REST Service for an Education Site using Spring Boot.

Introduction:
REST stands for REpresentational State Transfer. REST specifies a set of architectural
constraints. Any service which satisfies these constraints is called RESTful Service.
The five important constraints for RESTful Web Service are
1. Client - Server : There should be a service producer and a service consumer.
2. The interface (URL) is uniform and exposing resources.
3. The service is stateless.
4. The service results should be Cacheable. HTTP cache, for example.
5. Service should assume Layered architecture. Client should not assume direct connection to
server - it might be getting info from a middle layer - cache.

Algorithm:
Create REST Service for an Education Site
1. Define the API Endpoints: Determine the endpoints that your REST service will expose to
interact with RestApi resources. For example:
✓ GET /labs: Retrieve a list of all RestApi.
✓ GET /labs/{id}: Retrieve details of a specific RestApi.
✓ POST /labs: Create a new RestApi.
✓ PUT /labs/{id}: Update an existing RestApi.
✓ DELETE /labs/{id}: Delete a RestApi.
2. Set Up Your Spring Boot Project:
✓ Create a new Spring Boot project using Spring Initializr or your preferred IDE.
✓ Include dependencies such as spring-boot-starter-web to enable web functionality.
3. Create Entity Classes: Define Java classes to represent RestApi resources. These classes
will typically map to database tables.
@Entity public class LabManual { @Id @GeneratedValue(strategy =
GenerationType.IDENTITY) private Long id; private String title; private String description;
// getters and setters }
Create Repository Interfaces: Create repository interfaces by extending JpaRepository to
handle CRUD operations on RestApi entities.
public interface RestApi Repository extends JpaRepository< RestApi, Long> { }

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 11

Implement Service Layer: Create service classes to implement business logic for RestApi
operations.
@Service public class RestApi Service { private final RestApi Repository RestApi
Repository; public RestApi Service(RestApi Repository RestApi Repository) { this. RestApi
Repository = RestApi Repository; } public List< RestApi > getAll RestApi s() { return
RestApi Repository.findAll(); } // Implement other methods for CRUD operations }
4. Create REST Controller: Define REST endpoints in a controller class to handle HTTP
requests.
@RestController @RequestMapping("/labs") public class RestApi Controller { private final
RestApi Service RestApi Service; public RestApi Controller(RestApi Service RestApi
ervice) { this. RestApi Service = RestApi Service; } @GetMapping public List< RestApi >
getAll RestApi s() { return RestApi Service.getAll RestApi s(); } // Implement other REST
endpoints for CRUD operations }
5. Test Your REST Service: Use tools like Postman or write unit tests to verify that your
REST service behaves as expected.
6. Deploy Your Application: Deploy your Spring Boot application to a server or cloud
platform so that it can be accessed by clients.

Result:
Thus a REST Service for an Education Site was successfully developed using Spring Boot.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 12

Date :
Exercise Number :3
Title: Build Search filter in React

Aim:
To create a Search filter using React Framework.
Introduction:
A search filter is a tool or feature that lets users choose certain things or search results based
on criteria or keywords. Narrowing down the presented material to only the things that match their
search query helps user obtain pertinent information quickly.
The search filter is used in various projects which generally returns all the matching strings of the
text entered by the user which could be used at many different places and the logic remains the
same for it.
The React Search filter will accomplish the following functionalities:
1. Search box to allow users to input search query.
2. Display filtered list of items.

Algorithm:
Build Search filter in React
1. Set Up Your React Application:
1. Create a New React App:
✓ Use Create React App or any preferred method to set up a new React project.
bashCopy code
npx create-react-app search-filter-app
2. Navigate to Project Directory:
✓ Move into the newly created project directory.
bashCopy code
cd search-filter-app
2. Create Component Structure:
1. Create Components:
✓ Inside the src directory, create a new folder named components.
✓ Create two components: SearchFilter.js and UserList.js.
3. Implement Search Filter Component:
1. SearchFilter.js:
✓ Define a functional component SearchFilter.
✓ Create state variables to manage search input and filtered user data.
✓ Implement a function to handle input change and filter users based on search query.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 13

✓ Render an input field for search and a list of filtered users.

4. Implement User List Component:
1. UserList.js:
✓ Define a functional component UserList.
✓ Receive user data as props.
✓ Render a list of users with their details (e.g., name, email).
5. Fetch User Data (Optional):
1. Fetch User Data:
✓ If your application requires fetching user data from an API, implement the necessary
logic in the main App component or a separate service file.
6. Integrate Components in App:
1. App.js:
✓ Import the SearchFilter and UserList components.
✓ Implement logic to fetch user data (if applicable) and pass it as props to the UserList
component.
✓ Render the SearchFilter and UserList components within the main App component.
7. Style Your Components:
1. CSS Styling:
✓ Style your components using CSS or a CSS-in-JS solution like styled-components to
enhance the visual appearance of your search filter and user list components.
8. Test Your Application:
1. Run Your Application:
✓ Start your React development server to test your application in the browser.
npm start
2. Test the Search Filter:
✓ Enter search queries in the input field and observe the filtered user list updating
dynamically based on the input.
9. Refactor and Enhance:
1. Refactor Code:
✓ Refactor your components as needed to improve code quality, readability, and
maintainability.
2. Add Features (Optional):
✓ Enhance your search filter with additional features such as sorting, pagination, or
advanced filtering options based on your application requirements.

Result:
Thus a Search filter was successfully created using React Framework.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 14

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 15

Date :
Exercise Number :4
Title: Display a list in React

Aim:
To create an application to Display a List using React Framework
Introduction:
Lists are used to display data in an ordered format and mainly used to display menus on websites.
React is a popular JavaScript library for building user interfaces. It provides a flexible and efficient
way to render and update UI components. One common requirement in web development is to
display a list of items in a React application. In React, Lists can be created in a similar way as we
create lists in JavaScript. In order to traverse a list we will use the map() function.

Problem Description:
Different approaches to create lists in React.
1. Display an Array of Strings
2. Simple Displaying an Array of Objects
3. Displaying an Array of Objects Using a Child Component
4. Using External Data Sources
5. Using a Table to Display an Array of Items
6. Using a Grid or Card Layout
Algorithm:
Display a list in React
1. Set Up Your React Application:
1. Create a New React App:
✓ Use Create React App or any preferred method to set up a new React project.
npx create-react-app list-display-app
Navigate to Project Directory:
✓ Move into the newly created project directory.
cd list-display-app
Create a Component to Display the List:
Create Component:
✓ Inside the src directory, create a new folder named components.
✓ Create a new file named ListDisplay.js inside the components folder.
ListDisplay.js:
✓ Define a functional component named ListDisplay.
✓ Inside the component, define an array of items to display in the list.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 16

✓ Use the map method to iterate over the array and generate list items for each
item.
✓ Return a JSX element containing an unordered list (<ul>) with list items (<li>)
generated dynamically.
// ListDisplay.js
import React from 'react';
const ListDisplay = () =>
{ // Sample array of items const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
return (
<div>
<h2>List Display</h2>
<ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul>
</div>
);
};
export default ListDisplay;

3. Integrate Component in App:

1. App.js:
✓ Import the ListDisplay component.
✓ Render the ListDisplay component within the main App component.
// App.js
import React from 'react'; import './App.css';
import ListDisplay from './components/ListDisplay';
function App()
{
return (
<div className="App">
<ListDisplay />
</div> );
}
export default App;
4. Run Your Application:
1. Start Your Application:
✓ Start your React development server to test your application in the browser.
npm start
2. View List Display:
✓ Open a web browser and navigate to http://localhost:3000 to view the list displayed
by your React application.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 17

Result
Thus an application to Display a List was successfully created using React Framework.
Reference: https://react.dev/learn/rendering-lists

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 18

Date :
Exercise Number :5
Title: Create Simple Login form in React

Aim:
To develop an application to Create Simple Login form using React Framework.

Problem Description:
Websites include both public and private pages. A public page is open to the public, but a
private page requires a user login. Authentication can be used to control which users have access
to which pages. When a user tries to access a private page before logging in, our React
application will need to handle it. We'll need to save the login credentials once they've successfully
authenticated

Algorithm:
1. Display the login form with username, password, and submit button on the screen.
2. Users can input the values on the form.
3. Validate the username and password entered by the user.
4. Display an error message when the login fails.
5. Show a success message when login is successful.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 19

Sample Output:

Algorithm
5. Create Simple Login form in React

Set Up Your React Application:

1. Create a New React App:
✓ Use Create React App or any preferred method to set up a new React project.
npx create-react-app login-form-app
2. Navigate to Project Directory:
✓ Move into the newly created project directory.
cd login-form-app
2. Create Login Form Component:
1. Create Component:
✓ Inside the src directory, create a new folder named components.
✓ Create a new file named LoginForm.js inside the components folder.
2. LoginForm.js:
✓ Define a functional component named LoginForm.
✓ Use state hooks to manage the login form input values (e.g., username and
password).
✓ Implement event handler functions to update the state when the user types in the
input fields.
✓ Implement a submit handler function to handle form submission (e.g., validate
credentials, make API call, etc.).
// LoginForm.js
import React, { useState } from 'react';
const LoginForm = () =>

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 20

{
// State for login form input values const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
// Event handler functions to update state on input change
const handleUsernameChange = (e) => { setUsername(e.target.value);
};
const handlePasswordChange = (e) => { setPassword(e.target.value);
};
// Submit handler function
const handleSubmit = (e) => { e.preventDefault();
// Implement login logic here (e.g., validation, API call)
console.log('Username:', username);
console.log('Password:', password);
};
return
(
<div> <h2>Login Form</h2>
<form onSubmit={handleSubmit}>
<div> <label>Username:</label>
<input type="text" value={username} onChange={handleUsernameChange} />
</div>
<div> <label>Password:</label> <input type="password" value={password}
onChange={handlePasswordChange} />
</div> <button type="submit">Login</button>
</form>
</div>
);
};
export default LoginForm;
3. Integrate Component in App:
1. App.js:
✓ Import the LoginForm component.
✓ Render the LoginForm component within the main App component.
// App.js
import React from 'react';
import './App.css'; import LoginForm from './components/LoginForm';
function App() {
return (
<div className="App">
<LoginForm />
</div>
);
}
export default App;

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 21

4. Run Your Application:

1. Start Your Application:
✓ Start your React development server to test your application in the browser.
npm start
2. View Login Form:
✓ Open a web browser and navigate to http://localhost:3000 to view the login form
displayed by your React application.

Result:
Thus an application to Create Simple Login form was successfully created using React
Framework.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 22

Date :
Exercise Number :6
Title: node.js program for making external http calls

Aim:
To create a node.js program for making external http calls using Node.js.
Introduction:
It is often necessary for a network application to make external HTTP calls. HTTP servers are also
often called upon to perform HTTP services for clients making requests. Node provides an easy
interface for making external HTTP calls. For example, the following code will fetch the front
page of google.com.

Problem Description:
var http = require('http');
http.request({
host: 'www.google.com',
method: 'GET',
path: "/"
}, function(response) {
response.setEncoding("utf8");
response.on("readable", function() {
console.log(response.read())
});
}).end();

Algorithm:
1. Install Required Packages:
1. Initialize Node.js Project:
✓ Create a new directory for your project and navigate into it.
✓ Initialize a new Node.js project by running npm init -y to create a package.json
file.
2. Install node-fetch Package:
✓ Install the node-fetch package, which provides a fetch API similar to the one
available in browsers.
npm install node-fetch
2. Write Node.js Program:

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 23

1. Create JavaScript File:

✓ Create a new JavaScript file (e.g., http-calls.js) in your project directory.
2. Import Required Module:
✓ Require the node-fetch module at the top of your JavaScript file.
const fetch = require('node-fetch');
3. Make HTTP Request:
✓ Use the fetch function to make an HTTP GET request to an external URL. For
example:
const url = 'https://api.example.com/data'; fetch(url) .then(response => { if (!response.ok) { throw
new Error('Failed to fetch data'); } return response.json(); }) .then(data => { console.log('Data:',
data); }) .catch(error => { console.error('Error:', error.message); });

3. Run Node.js Program:

1. Execute Program:
✓ Run the Node.js program by executing the JavaScript file using Node.js.
node http-calls.js
2. Observe Output:
✓ Check the console output for the fetched data or any errors encountered during the
HTTP request.

Result:
Thus a node.js program for making external http calls successfully created using Node.js.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 24

Date :
Exercise Number :7
Title: parse the given url using node.js

Aim:
To create a node.js program to parse the given url using Node.js.

Algorithm:
1.Write Node.js Program:
1. Create JavaScript File:
✓ Create a new JavaScript file (e.g., parse-url.js) in your project directory.
2. Import Required Module:
✓ Require the url module at the top of your JavaScript file.
const url = require('url');
3. Parse Given URL:
✓ Use the url.parse() method to parse the given URL and extract its components.
For example:
const givenUrl = 'https://www.example.com/path/to/resource?query=value';
const parsedUrl = url.parse(givenUrl, true);
console.log('Parsed URL:', parsedUrl);
console.log('Protocol:', parsedUrl.protocol);
console.log('Host:', parsedUrl.host);
console.log('Path:', parsedUrl.pathname);
console.log('Query Parameters:', parsedUrl.query);
2. Run Node.js Program:
1. Execute Program:
• Run the Node.js program by executing the JavaScript file using Node.js.
node parse-url.js
2. Observe Output:
• Check the console output for the parsed URL components, including the protocol,
host, path, and query parameters.

Result:
Thus a node.js program to parse the given url was successfully created using Node.js.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 25

Exercise Number :8
Title: Create a Dropdown using Angular UI bootstrap
Aim:
To develop an application to Create a Dropdown using Angular UI bootstrap.

Problem Description:
Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing
better UI which can be used easily.
Syntax:
<div uib-dropdown></div>
Download AngularUI from the link:
https://angular-ui.github.io/bootstrap

Algorithm:
1. Install Angular UI Bootstrap: If you haven't already, install Angular UI Bootstrap via
npm:
npm install angular-ui-bootstrap
2. Import the Module: Import the ui.bootstrap module into your Angular application
module.
import angular from 'angular'; import 'angular-ui-bootstrap'; angular.module('myApp',
['ui.bootstrap']);
3. Use the Dropdown Component: In your HTML template, use the uib-dropdown
directive to define the dropdown container, and uib-dropdown-toggle directive to define
the dropdown toggle button. Add uib-dropdown-menu directive for the dropdown menu
items.
<div uib-dropdown>
<button class="btn btn-default" uib-dropdown-toggle>
Dropdown <span class="caret">
</span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="#">Action 1</a>
</li> <li><a href="#">Action 2</a>
</li> <li><a href="#">Action 3</a>
</li>
</ul>
</div>
4. Style as Needed: Apply CSS styles to customize the appearance of your dropdown
button and menu as desired.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 26

Optional: Handle Dropdown Events: You can handle events such as open, close, or toggle by
using the respective attributes (uib-dropdown-open, uib-dropdown-close, uib-dropdown-
toggle).

Result:
Thus an application to Create a Dropdown was successfully created using Angular UI
bootstrap.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 27

Exercise Number :9
Title: Modify existing components and generating new components using Angular
Aim:
To develop an application to Modify existing components and generating new components
using Angular.

Algorithm:
Modify Existing Components:
1. Locate the Component Files: Identify the component you want to modify and locate its
files in your Angular project. Typically, components are located in the src/app directory.
2. Modify the Component Template (HTML): Open the component's HTML file (usually
{component-name}.component.html) and make the desired changes to the template.
3. Modify the Component Class (TypeScript): Open the component's TypeScript file
(usually {component-name}.component.ts) and modify the class definition as needed.
You can add properties, methods, or update existing logic.
4. Modify the Component Styles (CSS/SCSS): Optionally, you can modify the
component's styles by editing the CSS or SCSS file associated with the component
(usually {component-name}.component.css or {component-name}.component.scss).
5. Save Changes: Save the modified files, and Angular's development server (if running)
will automatically reload the browser with the updated component.
Generate New Components:
1. Use Angular CLI Command: Open a terminal or command prompt and navigate to
your Angular project's root directory.
2. Run the Generate Component Command: Use the Angular CLI generate component
command to generate a new component. Replace {component-name} with the desired
name for your component.
ng generate component {component-name}
3. Optional Flags: You can use additional flags with the generate component command to
specify options such as the directory where the component should be created, the style
format (CSS, SCSS, etc.), and whether to skip tests.
ng generate component {component-name} --style=scss --skip-tests
4. Customize Generated Files: After running the command, Angular CLI will generate
files for the new component in the specified directory. You can customize these files by
modifying the template, class, and styles to fit your requirements.
5. Use the New Component: Once the component is generated and customized, you can
use it in other parts of your application by referencing its selector in other component
templates or routing configuration.
6. Import and Export Component Modules (if necessary): If you've created the
component in a separate module, make sure to import and export the component in the

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 28

module file ({component-name}.module.ts) to make it available for use in other parts of

your application.

Result:
Thus an application to Modify existing components and generating new components was
successfully created using Angular.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 29

Exercise Number : 10
Title: Launching a app with Angular root module
Aim:
To develop an application to Launch an app with Angular root module using Angular.

1. Home Page (index.html):

1. Create HTML File:
✓ Create a new file named index.html in your project directory.
2. Basic HTML Structure:
✓ Write the basic structure of an HTML page, including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.
3. Content for Home Page:
✓ Add content relevant to your home page, such as headings, paragraphs, images, or
navigation links.
4. Link External Stylesheets or Scripts (if needed):
✓ If your home page requires external stylesheets or JavaScript files, link them in
the <head> section using <link> or <script> tags.
5. Save and Exit:
✓ Save the index.html file.
2. Node.js Server Setup:
1. Install Dependencies:
✓ If you haven't already, initialize a new Node.js project using npm init and install
the required dependencies, such as express for creating the server.
bashCopy code
npm init -y npm install express
2. Create Server File (server.js):
✓ Create a new file named server.js in your project directory.
3. Import Required Modules:
✓ Require the express module at the top of the server.js file.
javascriptCopy code
const express = require('express');
4. Create Express App:
✓ Create an instance of the Express application.
javascriptCopy code
const app = express();
5. Define Route for Home Page:

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 30

✓ Define a route to serve the index.html file when users access the root URL (/).
javascriptCopy code
app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); });
6. Start Server:
✓ Set the server to listen on a specific port (e.g., 3000).
javascriptCopy code
const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is
running on port ${PORT}`); });
7. Run Server:
✓ Run the server by executing the server.js file using Node.js.
bashCopy code
node server.js
8. Access Home Page:
✓ Open a web browser and navigate to http://localhost:3000 to access the home
page served by your Node.js server.

Result:
Thus an application to Launch an app with Angular root module was successfully created
using Angular.

Theory Course with Laboratory Component

22CS402 – Web Development Frameworks 31

Theory Course with Laboratory Component