-
-
Save ahmedalani/3be94c5097de5f2f3d0f19a33739fe6b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Edit Product</title> | |
</head> | |
<body> | |
<form action="/products/<%= product.id %>" method="POST"> | |
<p> | |
<label for="product-id">ID</label> | |
<input id="product-id" type="text" name="id" value="<%= product.id %>"> | |
</p> | |
<p> | |
<label for="product-name">Name</label> | |
<input type="text" name="name" value="<%= product.name %>"> | |
</p> | |
<p> | |
<label for="product-price">Price</label> | |
<input type="text" name="price" value="<%= product.price %>"> | |
</p> | |
<button type="submit">Update product</button> | |
</form> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
</head> | |
<body> | |
<h1>Home Page</h1> | |
<form action="/products" method="POST"> | |
<p> | |
<label for="product-id">ID</label> | |
<input id="product-id" type="text" name="id"> | |
</p> | |
<p> | |
<label for="product-name">Name</label> | |
<input type="text" name="name"> | |
</p> | |
<p> | |
<label for="product-price">Price</label> | |
<input type="text" name="price"> | |
</p> | |
<button type="submit">Create product</button> | |
</form> | |
<h2>Existing Product:</h2> | |
<ul> | |
<% for (product of products) { %> | |
<li> | |
<a href="/products/<%= product.id %>"> | |
<%= product.id %> - <%= product.name %> - <%= product.price %> | |
</a> | |
</li> | |
<% } %> | |
</ul> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Product Detail</title> | |
</head> | |
<body> | |
<h1>Product Detail</h1> | |
<p> | |
<b>ID</b> <%= product.id %> | |
</p> | |
<p> | |
<b>Name</b> <%= product.name %> | |
</p> | |
<p> | |
<b>Price</b> <%= product.price %> | |
</p> | |
<a href="/products/<%= product.id %>/edit">Edit</a> | |
<form action="/products/<%= product.id %>/delete" method="POST"> | |
<button type="submit">Delete</button> | |
</form> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const express = require('express') | |
const bodyParser = require('body-parser') | |
const app = express() | |
// Middleware | |
app.use(bodyParser.urlencoded({ extended: false })) | |
const productDatabase = [ | |
{ | |
id: "ipx", | |
name: "iPhone X", | |
price: "$999" | |
} | |
] | |
// Use EJS for template | |
app.set('view engine', 'ejs') | |
// Home Page | |
app.get('/', (req, res) => { | |
res.render('index', { products: productDatabase }) | |
}) | |
// Create product | |
app.post('/products', (req, res) => { | |
// 1. Get the form data that the user input | |
let product = req.body | |
// 2. Save the data as a product somewhere | |
productDatabase.push(product) | |
// 3. Redirect | |
res.redirect('/') | |
}) | |
// Show product detail | |
app.get('/products/:id', (req, res) => { | |
let id = req.params.id | |
let product = productDatabase.find(product => { | |
return product.id === id | |
}) | |
// 2. render the product | |
res.render('product_detail', { product: product }) | |
}) | |
// Show the edit product form | |
app.get('/products/:id/edit', (req, res) => { | |
let id = req.params.id | |
let product = productDatabase.find(product => { | |
return product.id === id | |
}) | |
res.render('edit_product', { product: product }) | |
}) | |
// Update product | |
app.post('/products/:id', (req, res) => { | |
let id = req.params.id | |
for (product of productDatabase) { | |
if (product.id === id) { | |
product.name = req.body.name | |
product.price = req.body.price | |
} | |
} | |
res.redirect(`/products/${id}`) | |
}) | |
// Delete product | |
app.post('/products/:id/delete', (req, res) => { | |
// 1. Find the product | |
let id = req.params.id | |
let product = productDatabase.find(product => { | |
return product.id === id | |
}) | |
// 2. Remove it | |
let index = productDatabase.indexOf(product) | |
productDatabase.splice(index, 1) | |
// 3. Redirect | |
res.redirect('/') | |
}) | |
// Start the server | |
let port = 8080 | |
app.listen(port, () => { | |
console.log(`Server listening on port ${port}`) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment