이전 블로그에서 데이터베이스에 저장된 데이터에 대한 상세 화면을 만들어 보았습니다.
2023.08.12 - [데이터베이스] - mongoose-express 상세페이지 만들기
이제 신규 product를 입력하고 데이터베이스에 저장하는 기능을 만들어 보겠습니다.
우선 입력 폼과 그 폼을 제출할 두 개의 라우트가 필요합니다.
기존 index.js 에서 신규 상품을 입력하는 라우트로 app.get 으로 products/new 를 추가하고, 입력한 폼을 제출하기 위한 라우트로 app.post 로 products 에 신규 상품을 추가합니다.
(...)
app.get("/products", async (req, res) => {
const products = await Product.find({});
res.render("products/index", { products });
});
app.get("/products/new", (req, res) => {
res.render("products/new");
});
app.get("/products/:id", async (req, res) => {
const { id } = req.params;
const product = await Product.findById(id);
console.log(product);
res.render("products/show", { product });
});
(...)view/products/new.ejs 파일을 다음과 같이 만듭니다.
폼을 만들고, 입력한 데이터는 /products 로 넘겨줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Product</title>
</head>
<body>
<h1>Add a Product</h1>
<form action="/products" method="POST">
<input type="text" name="name" placeholder="Product name" />
</form>
</body>
</html>
아래와 같이 index.js 에 폼에서 입력한 데이터를 데이터베이스에 저장하기 위해 app.post 를 추가하고,
new.ejs 에 form tag로 상품명, 가격, 카테고리 정보를 입력하도록 입력필드와 레이블을 작성합니다.
카테고리는 선택 옵션을 사용합니다.
입력한 데이터는 req.body 로 받아오게 되는데 이것을 받기 위해 express.urlencoded 를 추가합니다.
[index.js]
(...)
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.get("/products", async (req, res) => {
const products = await Product.find({});
res.render("products/index", { products });
});
app.get("/products/new", (req, res) => {
res.render("products/new");
});
app.post("/products", (req, res) => {
console.log(req.body);
res.send("making your product!");
});
app.get("/products/:id", async (req, res) => {
const { id } = req.params;
const product = await Product.findById(id);
console.log(product);
res.render("products/show", { product });
});
(...)[new.ejs]
(...)
<body>
<h1>Add a Product</h1>
<form action="/products" method="POST">
<label for="name">Product Name</label>
<input type="text" name="name" id="name" placeholder="Product name" />
<label for="price">Product Price</label>
<input type="number" name="price" id="price" placeholder="Price (Unit)" />
<label for="category">Select Category</label>
<select name="category" id="category">
<option value="fruit">fruit</option>
<option value="vegetable">vegetable</option>
<option value="dairy">dairy</option>
</select>
<button>Summit</button>
</form>
</body>
(...)
입력한 데이터가 products 로 정상적으로 전달되는 것을 확인하였으니 실제로 데이터베이스에 입력되도록 하겠습니다.
[index.js]
(...)
app.get("/products/new", (req, res) => {
res.render("products/new");
});
app.post("/products", async (req, res) => {
const newProduct = new Product(req.body);
await newProduct.save();
res.redirect(`/products/${newProduct._id}`);
});
(...)폼을 통해 전달 받은 데이터는 비동기(async/await)로 데이터베이스에 저장(save()) 하고
중복데이터 입력을 방지하기 위해 바로 새로 입력한 상품의 상세페이지로 리다이렉트(redirect) 합니다.
아직 입력한 데이터의 유효성 검사나 오류 처리 없이 새로운 상품을 생성하는 기본적인 작업흐름만 살펴 보았습니다.
'데이터베이스' 카테고리의 다른 글
| mongoose-express 카테고리 선택자 자동 셋팅 (0) | 2023.08.21 |
|---|---|
| mongoose-express 데이터 업데이트 하기 (0) | 2023.08.19 |
| mongoose-express 상세페이지 만들기 (0) | 2023.08.12 |
| mongoose-express 데이터 조회 페이지 (0) | 2023.08.05 |
| mongoose - express 모델 만들기 (0) | 2023.08.05 |
