Scribd
Upload
14 views7 pages

Ex 7 Project Management

The document outlines the creation of a web application for managing project modules using Express.js and SQLite. It provides step-by-step instructions for setting up the project, creating a database, developing the application, designing the user interface, and adding CSS styles. The final result is a functional project management dashboard that allows users to add tasks and update their statuses, with changes reflected in the SQLite database.

Uploaded by

hemnathsingh26
Copyright
© © All Rights Reserved
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
14 views7 pages

Ex 7 Project Management

The document outlines the creation of a web application for managing project modules using Express.js and SQLite. It provides step-by-step instructions for setting up the project, creating a database, developing the application, designing the user interface, and adding CSS styles. The final result is a functional project management dashboard that allows users to add tasks and update their statuses, with changes reflected in the SQLite database.

Uploaded by

hemnathsingh26
Copyright
© © All Rights Reserved
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/ 7

Ex: No : 7 PROJECT MANAGEMENT DASHBOARD APPLICATION

DATE :

AIM:
To create a web application for managing the status of a project modules using
Express.js as the web framework and SQLite as the database.

PROCEDURE:
Step 1: Setup Your Project
First, make sure you have Node.js installed. Create a new directory for your project and
initialize it with npm (Node Package Manager).
➢ mkdir project-dashboard
➢ cd project-dashboard
➢ npm init -y

Install the required dependencies:


➢ npm install express sqlite3 ejs

Create a directory structure like below:


project-dashboard/
├── node_modules/
├── public/
│ └── styles.css
├── views/
│ └── index.ejs
├── app.js
└── tasks.db

Step 2: Create the Database (Install SQLite and SQLite Viewer, SQLite3 Editor as
extension in VS code)
Create an SQLite database named tasks.db for storing task data and use an SQLite client
or execute SQL commands in your application to create tables.

Type the query for table creation in Query Editor window and to execute the query use
Shift+Enter for statement processing which in turn will pop up a notification for the same.
(or) Right click on db visible in the project folder and edit the query in query editor
window.

Here is a simple schema for the tasks table:


CREATE TABLE tasks (id INTEGER PRIMARY KEY, name TEXT, status TEXT);

Step 3: Create the Web Application


Now, create the Node.js application. Create an app.js file and set up the web server and
routes.
//app.js
const express = require('express');
const sqlite3 = require('sqlite3').verbose();

const app = express();


const port = process.env.PORT || 3000;
// Configure your database connection
const db = new sqlite3.Database('./tasks.db');

// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');

// Routes
app.get('/', (req, res) => {
db.all('SELECT * FROM tasks', (err, rows) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
return;
}
res.render('index', { tasks: rows });
});
});

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


const { taskName } = req.body;
db.run('INSERT INTO tasks (name, status) VALUES (?, ?)', [taskName, 'Pending'], (err)
=> {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
return;
}
res.redirect('/');
});
});

app.post('/update-status/:id', (req, res) => {


const taskId = req.params.id;
const newStatus = req.body.status;
db.run('UPDATE tasks SET status = ? WHERE id = ?', [newStatus, taskId], (err) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
return;
}
res.redirect('/');
});
});

// Start the server


app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Step 4: Create the User Interface
Create an index.ejs file in the views directory to display the dashboard.
//index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Project Management Dashboard</title>
<link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
<h1>Project Management Dashboard</h1>
<h2>Add New Task</h2>
<form action="/add-task" method="post">
<input type="text" name="taskName" placeholder="Task name" required>
<button type="submit">Add Task</button>
</form>

<h2>Task List</h2>
<ul>
<% tasks.forEach(task => { %>
<li>
<%= task.name %>
<form action="/update-status/<%= task.id %>" method="post">
<select name="status">
<option value="Pending" <%= task.status === 'Pending' ? 'selected' : '' %>>
Pending</option>
<option value="InProgress" <%= task.status === 'InProgress' ? 'selected' : '' %>>In
Progress</option>
<option value="Completed" <%= task.status === 'Completed' ? 'selected' : '' %>>
Completed</option>
</select>
<button type="submit">Update Status</button>
</form>
</li>
<% }); %>
</ul>
</body>
</html>

Step 5: Create CSS Styles


Add custom CSS styles in the public/styles.css file to enhance the appearance of your
dashboard.
//style.css
/* Reset some default styles */
body, ul {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
text-align: center;
}
h1 {
background-color: #333;
color: #fff;
padding: 10px;
}

h2 {
margin-top: 20px;
}

/* Form styles */
form {
margin-top: 10px;
}

input[type="text"] {
width: 300px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}

button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* Task list styles */


ul {
list-style: none;
padding: 0;
}

li {
background-color: #fff;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}

select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Status-specific styles */
li[data-status="Pending"] {
background-color: #ffcccb;
}

li[data-status="InProgress"] {
background-color: #ffedb3;
}

li[data-status="Completed"] {
background-color: #c2f0c2; }

Step 6: Run Your Application

Run your Node.js application with the following command: node app.js

Visit http://localhost:3000 in your web browser to access the project management


dashboard to add tasks, change their statuses, and view the current task list which will
reflect in the SQLite database.

OUTPUT:

//SQLite extension installation and table creation window


// http://localhost:3000 for project dashboard view to add and update status
//Status reflected in database

RESULT:
Thus, a simple project status tracking web application was implemented and
simulated successfully.

You might also like