Scribd
Upload
10 views

Lab Work 1 (1)

Uploaded by

Шар
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Lab Work 1 (1)

Uploaded by

Шар
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab work 1: CRUD Operations in Node.

js

Objective

In this lab, you will create a simple Node.js application with CRUD (Create, Read, Update, Delete)
functionality using Express and EJS. This lab will demonstrate how to manage data dynamically and
serve HTML views through EJS.

Instructions

1. Setting Up the Project:


o Open your terminal and create a new folder for the project.
o Initialize the project:

npm init -y

o Install the required dependencies:

npm install express ejs body-parser

2. Create the Project Structure:


o Inside your project folder, create the following structure:

crud-lab/
├── node_modules/
├── public/
│ └── style.css
├── views/
│ ├── index.ejs
│ ├── add.ejs
│ ├── edit.ejs
├── server.js
├── package.json
└── package-lock.json

3. Write the Code:


o server.js:
const express = require('express');

const bodyParser = require('body-parser');

const path = require('path');

const app = express();


app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static('public'));

let items = []; // In-memory database

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

// Routes

app.get('/', (req, res) => {

res.render('index', { items });

});

app.get('/add', (req, res) => {

res.render('add');

});

app.post('/add', (req, res) => {

const { name, description } = req.body;

const newItem = { id: Date.now(), name, description };

items.push(newItem);

res.redirect('/');

});

app.get('/edit/:id', (req, res) => {

const item = items.find((i) => i.id == req.params.id);

res.render('edit', { item });


});

app.post('/edit/:id', (req, res) => {

const { name, description } = req.body;

const item = items.find((i) => i.id == req.params.id);

item.name = name;

item.description = description;

res.redirect('/');

});

app.post('/delete/:id', (req, res) => {

items = items.filter((i) => i.id != req.params.id);

res.redirect('/');

});

const PORT = 3000;

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

o views/index.ejs:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Items</title>

<link rel="stylesheet" href="/style.css">

</head>

<body>
<h1>Item List</h1>

<ul>

<% items.forEach(item => { %>

<li>

<strong><%= item.name %></strong>: <%= item.description %>

<a href="/edit/<%= item.id %>">Edit</a>

<form action="/delete/<%= item.id %>" method="POST" style="display: inline;">

<button type="submit">Delete</button>

</form>

</li>

<% }); %>

</ul>

<a href="/add">Add New Item</a>

</body>

</html>

o views/add.ejs:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Add Item</title>

<link rel="stylesheet" href="/style.css">

</head>

<body>

<h1>Add New Item</h1>

<form action="/add" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>


<br>

<label for="description">Description:</label>

<input type="text" id="description" name="description" required>

<br>

<button type="submit">Add Item</button>

</form>

</body>

</html>

o views/edit.ejs:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Edit Item</title>

<link rel="stylesheet" href="/style.css">

</head>

<body>

<h1>Edit Item</h1>

<form action="/edit/<%= item.id %>" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" value="<%= item.name %>" required>

<br>

<label for="description">Description:</label>

<input type="text" id="description" name="description" value="<%= item.description %>"


required>

<br>

<button type="submit">Update Item</button>

</form>
</body>

</html>

o public/style.css:
body {

font-family: Arial, sans-serif;

margin: 20px;

ul {

list-style-type: none;

li {

margin: 10px 0;

a{

margin-right: 10px;

button {

background-color: red;

color: white;

border: none;

padding: 5px 10px;

cursor: pointer;

4. Run the Application:


o Start the server:

node server.js

o Open your browser and go to http://localhost:3000.


Lab Objectives:

● Understand and implement basic CRUD functionality using Node.js and Express.
● Create dynamic HTML views using the EJS templating engine.
● Learn to manage routes and handle HTTP methods (GET, POST).
● Practice styling with basic CSS.

Expected Outcome:

● A working CRUD application where students can:


○ Add items to a list.
○ View the list of items.
○ Edit existing items.
○ Delete items from the list.

You might also like