[CRUD을 이용한 File upload Web] (11) 최종 코드안

<본 블로그는 DCodeMania 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> CRUD App With Image Upload Using NodeJs, ExpressJs, MongoDB & EJS Templating Engine

 

 

🥕 user의 프로필 목록에 생성하고 수정하고 삭제하고 MongoDB에 저장하기

참고 : https://github.com/gani0325/2023/tree/main/Web/ImageUpload

 

🐧 models/user.js

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  phone: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
  created: {
    type: Date,
    required: true,
    default: Date.now,
  }
}, { collection: 'node_crud' });

module.exports = mongoose.model("User", userSchema);

 

🐧 routes/routes.js

const express = require("express");
const router = express.Router();
const User = require("../models/user");
const multer = require("multer");
const fs = require("fs");
const { resourceLimits } = require("worker_threads");

// image upload
var storage = multer.diskStorage({
  // 파일이 업로드될 경로 설정
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  // timestamp를 이용해 새로운 파일명 설정
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
  }
})

var upload = multer({
  storage: storage,
}).single("image");   // 한 개의 이미지 처리

// Insert an user into database route
router.post("/add", upload, (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: req.file.filename,
  });

  user.save().then((err) => {
    // index.js 에 res.locals.message 있음
    req.session.message = {
      type: "success",
      message: "User added successsfull!"
    };
    // 지정된 다른 URL로 재요청 (홈)
    res.redirect("/");
  }).catch((err) => {
    res.json({ message: err.message, type: "danger" });
  })
});

// 1) Get all users route
router.get("/", async (req, res) => {
  const user = await User.find();

  try {
    // Query를 이용할 때 프로미스를 리턴받고 싶다면 exec() 메서드를 이용
    // find()를 실행하여 Query의 인스턴스를 리턴
    res.render("index", {
      title: "Home Page",
      // 궁금 : 너 왜 error 잡히니?
      users: user
    });
  } catch (error) {
    (error) => {
      res.json({ message: error.message });
    }
  };
});

router.get("/add", (req, res) => {
  res.render("addUsers", { title: "Add users" });
})

// 2) Edit an user routes
router.get("/edit/:id", async (req, res) => {
  let id = req.params.id;
  const user = await User.findById(id);

  try {
    if (user == null) {
      res.redirect("/");
    } else {
      res.render("editUsers", {
        title: "Edit User",
        user: user,
      });
    }
  } catch (err) {
    res.redirect("/");
  }
});

// 3) Update user route
router.post("/update/:id", upload, async (req, res) => {
  let id = req.params.id;
  let new_image = "";

  if (req.file) {
    new_image = req.file.filename;
    try {
      // 동기 방식으로 파일 정보 읽기
      fs.readFileSync("./uploads/" + req.body.old_image);
    } catch (err) {
      console.log(err);
    }
  } else {
    req.image = req.body.old_image;
  }

  //  첫 번째 인자는 업데이트 하고자 하는 문서의 id, 두 번째 인자는 업데이트 할 정보 혹은 내용
  const user = await User.findByIdAndUpdate(id, {
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: new_image
  });

  try {
    req.session.message = {
      type: "success",
      message: "User updated successfully!",
    };
    res.redirect("/");
  } catch (err) {
    res.json({ message: err.message, type: "danger" });
  }
});

// 4) Delete user route
router.get("/delete/:id", async (req, res) => {
  let id = req.params.id;
  // id 를 찾아서 지움
  await User.findByIdAndRemove(id);

  try {
    req.session.message = {
      type: "info",
      message: "User deleted successfully!"
    };
    res.redirect("/");
  } catch (err) {
    res.json({ message: err.message });
  }
});

module.exports = router;

 

🐧 views/layout/footer.ejs

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
  integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.bundle.min.js"
  integrity="sha512-43iShtbiyImxjjU4a9rhXBy7eKtIsrpll8xKhe1ghKqh5NyfME8phZs5JRFZpRBe1si44WM3tNmnqMym7JRmDQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 이전/다음 페이지 이동 -->
<script src="https://cdn.datatables.net/v/bs4/dt-1.13.3/datatables.min.js"></script>

<script>
  // 표시된 테이블을 초기화표시된 테이블을 초기화 => 이전/다음 페이지 기능 해줌
  $(document).ready(function () {
    $("table").DataTable({
      order: [0, "desc"]
    });
  });
</script>
</body>

</html>

 

🐧 views/layout/header.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>

    <!-- 부트트랩 사용 -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css"
        integrity="sha512-aqT9YD5gLuLBr6ipQAS+72o5yHKzgZbGxEh6iY8lW/r6gG14e2kBTAJb8XrxzZrMOgSmDqtLaF76T0Z6YY2IHg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 다음 페이지 이동하는 테이블 사용 -->
    <link href="https://cdn.datatables.net/v/bs4/dt-1.13.3/datatables.min.css" rel="stylesheet" />
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a href="/" class="navbar-brand"><i class="fas fa-code me-2"></i>GANI</a>

            <button class="navbar-toggler" data-bs-target="#my-nav" data-bs-toggle="collapse" aria-controls="my-nav"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>


            <div id="my-nav" class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/"><i class="fas fa-home me-1"></i>Home</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/add"><i class="fas fa-user-plus me-1"></i>Add user</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#"><i class="fas fa-globe me-1"></i>About</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#"><i class="fas fa-envelope me-1"></i>Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

 

 

🐧 views/addUsers.ejs

<%- include("layout/header") %>

  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto mt-4">
        <div class="card shadow">
          <div class="card-header bg-primary">
            <h3 class="text-light">Add New User</h3>
          </div>
          <div class="card-body p-4">
            <!-- add랑 router 경로 같아야 될듯? -->
            <form action="/add" method="post" id="add-form" enctype="multipart/form-data">
              <div class="mb-3">
                <label for="name">Name</label>
                <input type="text" name="name" class="form-control form-control-lg" placeholder="Enter name" required />
              </div>
              <div class="mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control form-control-lg" placeholder="Enter email"
                  required />
              </div>
              <div class="mb-3">
                <label for="phone">Phone</label>
                <input type="tel" name="phone" class="form-control form-control-lg" placeholder="Enter phone"
                  required />
              </div>
              <div class="mb-3">
                <label for="image" class="form-label">Select Image</label>
                <input type="file" name="image" class="form-control form-control-lg" required />
              </div>
              <div class="mb-3 d-grid">
                <input type="submit" name="submit" value="Add User" class="btn btn-primary btn-lg" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

<%- include("layout/footer") %>

 

🐧 views/editUsers.ejs

<%- include("layout/header") %>

  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto mt-4">
        <div class="card shadow">
          <div class="card-header bg-success">
            <h3 class="text-light">Edit User (<%= user.name %>)</h3>
          </div>
          <div class="card-body p-4">
            <!-- add랑 router 경로 같아야 될듯? -->
            <form action="/update/<%= user._id %>" method="post" id="add-form" enctype="multipart/form-data">
              <div class="mb-3">
                <label for="name">Name</label>
                <input type="text" name="name" class="form-control form-control-lg" placeholder="Enter name"
                  value="<%= user.name %>" required />
              </div>
              <div class="mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control form-control-lg" placeholder="Enter email"
                  value="<%= user.email %>" required />
              </div>
              <div class="mb-3">
                <label for="phone">Phone</label>
                <input type="tel" name="phone" class="form-control form-control-lg" placeholder="Enter phone"
                  value="<%= user.phone %>" required />
              </div>
              <div class="mb-3">
                <label for="image" class="form-label">Select Image</label>
                <input type="file" name="image" class="form-control form-control-lg" />
                <img src="/<%= user.image %>" width="100" class="img-thumbnail mt-1">
              </div>
              <input type="hidden" name="old_image" value="<%= user.image %>">
              <div class="mb-3 d-grid">
                <input type="submit" name="submit" value="Update User" class="btn btn-success btn-lg" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%- include("layout/footer") %>

 

🐧 views/index.ejs

<%- include("layout/header") %>

  <div class="container">
    <div class="row my-4">
      <div class="col-lg-12">
        <!-- router 에 있는  locals.message 가져옴 -->
        <!-- 
        1. <% %> : EJS 에서 소스내 에서 실행되지만 보이지는 않는 태그
        2. <%- %> : <% %> 태그와는 조금 다르게 HTML 코드를 날것(Raw)로 보임
        3. <%= %> : 이스케이프 문자를 포함, 다른 페이지에서 받아온 데이터를 넣어줄 때
       -->
        <% if (message) { %>
          <div class="alert alert-dismissible fade show alert-<%= message.type %>" role="alert">
            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            <strong>
              <%= message.message %>
            </strong>
          </div>
          <% } %>

            <div class="table-responsive">
              <% if (users !="" ) { %>
                <!-- 화면 크기에 따라 효과적으로 콘텐츠가 표시되도록 테이블을 조정 -->
                <table class="table table-striped">
                  <!-- 테이블의 열의 머리글인 행들의 집합 -->
                  <thead class="table table-striped text-center my-3">
                    <tr class="table-dark">
                      <th>ID</th>
                      <th>Image</th>
                      <th>Name</th>
                      <th>E-mail</th>
                      <th>Phone</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% users?.forEach((row, index)=> { %>
                      <tr class="align-middle">
                        <td>
                          <%= index %>
                        </td>
                        <td><img src="<%= row.image %>" width="50" class="img-thumbnail"></td>
                        <td>
                          <%= row.name %>
                        </td>
                        <td>
                          <%= row.email %>
                        </td>
                        <td>
                          <%= row.phone %>
                        </td>
                        <td>
                          <a href="/edit/<%= row._id %>" class="text-success"><i class="fas fa-edit fa-lg mx-1"></i></a>
                          <a href="/delete/<%= row._id %>" class="text-danger"><i
                              class="fas fa-trash fa-lg mx-1"></i></a>
                        </td>
                      </tr>
                      <% }) %>
                  </tbody>
                </table>
                <% } else { %>
                  <h1 class="text-center text-secondary mt-S">No users found in the databases!</h1>
                  <% } %>
            </div>
      </div>
    </div>
  </div>

  <%- include("layout/footer") %>

 

🐧 index.js

// imports
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const session = require("express-session");
// express-session 
// 1. 파일에 저장
// 2. DB에 저장
// 3. Memory 에 저장

const app = express();
const PORT = process.env.PORT || 8000;

// Database 연결
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });   // useNewUrlParser : 에러 방지
const db = mongoose.connection;
db.on("error", (error) => console.log(error));
db.once("open", () => console.log("💚 Connected to the database!"));

// Middleware 연결
app.use(express.urlencoded({ extended: false }));
app.use(express.json());        // JSON형태의 데이터를 해석
app.use(session({
  secret: process.env.SECRET,   // 암호화를 위한 keygen. 보통 env에 넣어서 전달
  saveUninitialized: true,      // 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
  resave: false,                // 세션을 언제나 저장할지 설정함 
  cookie: {                     // 쿠키의 유효시간
    maxAge: 86400000,           // 24 hours (= 24 * 60 * 60 * 1000 ms)
  },
})
);

// 공통 EJS 파일(header나 footer)에서 사용할 데이터를 세팅
app.use((req, res, next) => {
  // ejs 파일에서 사용하려면 'res.locals.변수명 = 값' 을 이용
  res.locals.message = req.session.message;
  delete req.session.message;
  next();         // 앱 내의 그 다음 미들웨어 함수가 호출
});

// uploads 폴더의 사진 html에 보이게 하기
app.use(express.static("uploads"));

// set template engine
app.set("view engine", "ejs");

// router
app.use("", require("./routes/routes"));

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(PORT, () => {
  console.log(`server started at 🚀 http://localhost:${PORT}`);
});

 

🐧 .env

APPLICATION_NAME=
PORT=3000
MONGODB_URI=mongodb+srv://
SECRET=jVTKzz8w1@k^Lrvm*52w

 

🐧 package.json

{
  "name": "imageupload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "ejs": "^3.1.8",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "mongoose": "^7.0.1",
    "multer": "^1.4.5-lts.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.21"
  }
}