ahmedalani/edit_product.ejs

## edit_product.ejs
<!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>

## index.ejs
<!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>

## product_detail.js
<!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>

## server.js
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}`)
})
	<!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>
	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}`)
	})