๐Ÿ˜Ž ๊ณต๋ถ€ํ•˜๋Š” ์ง•์ง•์•ŒํŒŒ์นด๋Š” ์ฒ˜์Œ์ด์ง€?

[CRUD์„ ์ด์šฉํ•œ File upload Web] (4) ejs๋กœ ๋ฉ”์ธ html ๋งŒ๋“ค๊ธฐ ๋ณธ๋ฌธ

๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js

[CRUD์„ ์ด์šฉํ•œ File upload Web] (4) ejs๋กœ ๋ฉ”์ธ html ๋งŒ๋“ค๊ธฐ

์ง•์ง•์•ŒํŒŒ์นด 2023. 3. 10. 01:29
728x90
๋ฐ˜์‘ํ˜•

<๋ณธ ๋ธ”๋กœ๊ทธ๋Š” DCodeMania ์˜ ์œ ํŠœ๋ธŒ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ :-)>

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

 

 

 

๐Ÿฅ• ejs๋กœ html ๊พธ๋ฏธ๊ธฐ

ejs๋Š” Embedded JavaScript Template์˜ ์•ฝ์ž๋กœ nodejs ์ง„์˜์—์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํ…œํ”Œ๋ฆฟ ์—”์ง„

index.ejs๋กœ ํ•œ๊บผ๋ฒˆ์— ๊พธ๋ช„์ง€๋งŒ

๋ฉ”์ธ (index) => footer๊ณผ header๋กœ ๋‚˜๋ˆ„์–ด์„œ index ์—์„œ ํ•ฉ์นจ

์œ ์ € (addUsers) => ์œ ์ € ๋“ฑ๋กํ•˜๋Š” ํŽ˜์ด์ง€

 

๋ถ€ํŠธํŠธ๋žฉ ์‚ฌ์šฉํ•จ https://cdnjs.com/

 

๐Ÿง 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" />
</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/layout/footer.ejs

<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>
</body>

</html>

 

 

๐Ÿง views/layout/index.ejs

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

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>
          Home page Content
        </h1>
      </div>
    </div>
  </div>

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

 

 

๐Ÿง views/addUser.ejs

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

<div class = "container">
  <div class = "row">
    <div class = "col-lg-12">
      <h1>
        Add users page
      </h1>
    </div>
  </div>
</div>

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

 

๐Ÿง views/index.ejs

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

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>
          Home page Content
        </h1>
      </div>
    </div>
  </div>

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

 

 

 

๐Ÿฅ• ๋ผ์šฐํ„ฐ์— ejs์™€ ์—ฐ๋™

๐Ÿง routes/routes.js

const express = require("express");
const router = express.Router();

// Home (ejs ์™€ ์—ฐ๋™)
router.get("/", (req, res) => {
  res.render("index", { title : "Home" });
});

router.get("/add", (req, res) => {
  res.render("addUsers", { title : "Add users" });
})
728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'๐Ÿ‘ฉโ€๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End) > Node js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[CRUD์„ ์ด์šฉํ•œ File upload Web] (6) ejs๋กœ ๋ฉ”์ธ ์ƒ๋‹จ ๋ชฉ๋ก ํ‹€ ๋งŒ๋“ค๊ธฐ  (0) 2023.03.10
[CRUD์„ ์ด์šฉํ•œ File upload Web] (5) ejs๋กœ user ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ  (0) 2023.03.10
[CRUD์„ ์ด์šฉํ•œ File upload Web] (3) router ์™€ schema ์—ฐ๊ฒฐ  (0) 2023.03.10
[CRUD์„ ์ด์šฉํ•œ File upload Web] (2) MongoDB Compass ๋ฐ session ์—ฐ๊ฒฐ  (0) 2023.03.08
[CRUD์„ ์ด์šฉํ•œ File upload Web] (1) node js๋กœ ๋กœ์ปฌ ์„œ๋ฒ„ ๋„์šฐ๊ธฐ  (0) 2023.03.08
'๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js' Related Articles more
Comments