Scribd
Upload
2 views11 pages

Mis Project Idea

The document outlines a Simple Online Store Management Information System (MIS) that includes an HTML frontend for adding products, making sales, and viewing sales logs, along with CSS for styling and JavaScript for functionality. It also provides a Node.js backend using Express to manage products and sales through REST API endpoints. Key features include in-memory data storage, product management, and sales recording capabilities.

Uploaded by

johnsonnyambageka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views11 pages

Mis Project Idea

The document outlines a Simple Online Store Management Information System (MIS) that includes an HTML frontend for adding products, making sales, and viewing sales logs, along with CSS for styling and JavaScript for functionality. It also provides a Node.js backend using Express to manage products and sales through REST API endpoints. Key features include in-memory data storage, product management, and sales recording capabilities.

Uploaded by

johnsonnyambageka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML PART

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Online Store MIS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Online Store Management System</h1>

<section>
<h2>Add Product</h2>
<form id="product-form">
<input type="text" id="product-name" placeholder="Product Name" required>
<input type="number" id="product-price" placeholder="Price" min="0" step="0.01"
required>
<input type="number" id="product-stock" placeholder="Stock" min="1" required>
<button type="submit">Add Product</button>
</form>
</section>

<section>
<h2>Product List</h2>
<table id="product-table">
<thead>
<tr>
<th>Name</th>
<th>Price ($)</th>
<th>Stock</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Products will appear here -->
</tbody>
</table>
</section>

<section>
<h2>Make Sale</h2>
<form id="sale-form">
<select id="sale-product"></select>
<input type="number" id="sale-quantity" placeholder="Quantity" min="1" required>
<button type="submit">Sell</button>
</form>
</section>

<section>
<h2>Sales Log</h2>
<ul id="sales-log">
<!-- Sales will appear here -->
</ul>
</section>

<script src="script.js"></script>
</body>
</html>
CSS PART
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
}

section {
background: #fff;
margin: 20px auto;
padding: 20px;
border-radius: 7px;
max-width: 600px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

form {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}

input, select, button {


padding: 7px;
font-size: 1em;
}

button {
background: #2196f3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background: #1976d2;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

th, td {
border: 1px solid #ddd;
padding: 7px;
text-align: center;
}
th {
background: #2196f3;
color: white;
}

ul#sales-log {
list-style-type: decimal;
padding-left: 25px;
}

JS PART
// Store data in memory for simplicity
let products = [];
let sales = [];

const productForm = document.getElementById('product-form');


const productName = document.getElementById('product-name');
const productPrice = document.getElementById('product-price');
const productStock = document.getElementById('product-stock');
const productTableBody = document.querySelector('#product-table tbody');
const saleForm = document.getElementById('sale-form');
const saleProduct = document.getElementById('sale-product');
const saleQuantity = document.getElementById('sale-quantity');
const salesLog = document.getElementById('sales-log');

// Add a new product


productForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = productName.value.trim();
const price = parseFloat(productPrice.value);
const stock = parseInt(productStock.value, 10);
if (!name || price < 0 || stock < 1) return;
products.push({ name, price, stock });
productName.value = "";
productPrice.value = "";
productStock.value = "";
renderProducts();
renderProductOptions();
});

// Render products in table


function renderProducts() {
productTableBody.innerHTML = "";
products.forEach((prod, idx) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${prod.name}</td>
<td>${prod.price.toFixed(2)}</td>
<td>${prod.stock}</td>
<td><button onclick="deleteProduct(${idx})">Delete</button></td>
`;
productTableBody.appendChild(tr);
});
}

// Delete product
window.deleteProduct = function(idx) {
products.splice(idx, 1);
renderProducts();
renderProductOptions();
};

// Render product options for sale


function renderProductOptions() {
saleProduct.innerHTML = "";
products.forEach((prod, idx) => {
const opt = document.createElement('option');
opt.value = idx;
opt.textContent = `${prod.name} (Stock: ${prod.stock})`;
saleProduct.appendChild(opt);
});
}

// Make a sale
saleForm.addEventListener('submit', function(e) {
e.preventDefault();
const prodIdx = parseInt(saleProduct.value, 10);
const qty = parseInt(saleQuantity.value, 10);
if (isNaN(prodIdx) || isNaN(qty) || qty < 1) return;
if (products[prodIdx].stock >= qty) {
products[prodIdx].stock -= qty;
sales.push({
name: products[prodIdx].name,
quantity: qty,
price: products[prodIdx].price,
date: new Date().toLocaleString()
});
saleQuantity.value = "";
renderProducts();
renderProductOptions();
renderSales();
} else {
alert("Not enough stock for this sale!");
}
});

// Render sales
function renderSales() {
salesLog.innerHTML = "";
sales.forEach(sale => {
const li = document.createElement('li');
li.textContent = `${sale.date}: Sold ${sale.quantity} x ${sale.name} @ $$
{sale.price.toFixed(2)} each`;
salesLog.appendChild(li);
});
}

// Initial render
renderProducts();
renderProductOptions();
renderSales();

Here’s a simple backend sample for your online store MIS using Node.js
with Express.
This backend will provide REST API endpoints for managing products and s
ales. You can connect it to your HTML/JS frontend later.

Features:

 In-memory data storage (no database, for simplicity)


 Endpoints to add/list/delete products
 Endpoints to create/list sales
server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;

// Middleware

How to run:

1. Save as server.js.
2. Run npm init -y and then npm install express cors.
3. Run with node server.js.
4. Your backend API is now live at http://localhost:3000.

Example API Endpoints:

 GET /api/products — List products


 POST /api/products — Add product ({ name, price, stock })
 DELETE /api/products/:id — Delete product
 POST /api/sales — Record sale ({ productId, quantity })
 GET /api/sales — List sales

Server Part
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;

// Middleware
app.use(cors());
app.use(express.json());

// In-memory data
let products = [];
let sales = [];

// Get all products


app.get('/api/products', (req, res) => {
res.json(products);
});

// Add a product
app.post('/api/products', (req, res) => {
const { name, price, stock } = req.body;
if (!name || price == null || stock == null) {
return res.status(400).json({ message: "Missing fields" });
}
const id = products.length + 1;
products.push({ id, name, price, stock });
res.status(201).json({ message: "Product added" });
});

// Delete a product
app.delete('/api/products/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
products = products.filter(p => p.id !== id);
res.json({ message: "Product deleted" });
});

// Make a sale
app.post('/api/sales', (req, res) => {
const { productId, quantity } = req.body;
const product = products.find(p => p.id === productId);
if (!product) {
return res.status(404).json({ message: "Product not found" });
}
if (product.stock < quantity) {
return res.status(400).json({ message: "Not enough stock" });
}
product.stock -= quantity;
sales.push({
productId,
name: product.name,
quantity,
price: product.price,
date: new Date().toISOString()
});
res.json({ message: "Sale recorded" });
});

// Get all sales


app.get('/api/sales', (req, res) => {
res.json(sales);
});

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

You might also like