[CRUD을 이용한 File upload Web] (5) ejs로 user 회원가입 폼 만들기

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

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

 

 

 

🥕 ejs로 addUsers 회원가입 폼 만들기

부트트랩 사용함 https://cdnjs.com/

 

🐧 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") %>