Last active
September 13, 2017 18:18
-
-
Save rbao/2169421ae5a36f7f9c669fef40a5747d 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