7/21 실습

app.get("/edit/:id", function (요청, 응답) {
  db.collection("post").findOne(
    { _id: parseInt(요청.params.id) },
    function (에러, 결과) {
      console.log(결과);
      응답.render("edit.ejs", { post: 결과 });
    }
  );
});

app.put("/edit", function (요청, 응답) {
  console.log(parseInt(요청.body.id));
  db.collection("post").updateOne(
    { _id: parseInt(요청.body.id) },
    { $set: { title: 요청.body.title, date: 요청.body.date } },
    function (에러, 결과) {
      console.log("수정완료");
      응답.redirect("/list");
    }
  );
});

<div class="container mt-4">
      <form action="/edit?_method=PUT" method="POST">
        <div class="form-group">
          <label>할일</label>
          <input
            type="text"
            value="<%= post._id %>"
            name="id"
            style="display: none"
          />
          <input value="<%= post.title %>" type="text" class="form-control"
          name="title"
        </div>
        <div class="form-group">
          <label>Due date</label>
          <input
            value="<%= post.date %>"
            type="text"
            class="form-control"
            name="date"
          />
        </div>
        <button type="submit" class="btn btn-danger">submit</button>
      </form>
    </div>

사용자가 "/edit/:id" 페이지를 방문하면 해당 "_id" 값을 가진 "할 일" 항목의 정보가 폼에 미리 채워진 상태로 나타납니다. 사용자는 폼에서 제목(title)과 날짜(date)를 수정하고 "submit" 버튼을 클릭하면 서버로 수정된 데이터를 전송합니다. 서버는 MongoDB의 "post" 컬렉션에서 해당 "_id" 값을 가진 데이터를 수정하고, 수정이 완료되면 "/list" 페이지로 리디렉션하여 수정된 "할 일" 목록을 보여줍니다.

app.use(
  session({ secret: "비밀코드", resave: true, saveUninitialized: false })
);
app.use(passport.initialize());
app.use(passport.session());

app.get("/login", function (요청, 응답) {
  응답.render("login.ejs");
});

app.post(
  "/login",
  passport.authenticate("local", {
    failureRedirect: "/fail",
  }),
  function (요청, 응답) {
    응답.redirect("/");
  }
);

// 아이디 비밀번호 검증
passport.use(
  new LocalStrategy(
    {
      usernameField: "id",
      passwordField: "pw",
      session: true,
      passReqToCallback: false,
    },
    function (입력한아이디, 입력한비번, done) {
      //console.log(입력한아이디, 입력한비번);
      db.collection("login").findOne(
        { id: 입력한아이디 },
        function (에러, 결과) {
          if (에러) return done(에러);

          if (!결과)
            return done(null, false, { message: "존재하지않는 아이디요" });
          if (입력한비번 == 결과.pw) {
            return done(null, 결과);
          } else {
            return done(null, false, { message: "비번틀렸어요" });
          }
        }
      );
    }
  )
);

passport.serializeUser(function (user, done) {
  done(null, user.id);
});
passport.deserializeUser(function (아이디, done) {
  db.collection("login").findOne({ id: 아이디 }, function (에러, 결과) {
    done(null, 결과);
  });
});

<div class="container mt-3">
      <form action="/login" method="POST">
        <div class="form-group">
          <label>아이디</label>
          <input type="text" class="form-control" name="id" />
        </div>
        <div class="form-group">
          <label>비번</label>
          <input type="text" class="form-control" name="pw" />
        </div>
        <button type="submit" class="btn btn-outline-secondary">로그인</button>
      </form>
    </div>

사용자가 "/login" 페이지를 방문하면 아이디와 비밀번호를 입력하는 폼이 나타납니다. 사용자가 폼에 정보를 입력하고 "로그인" 버튼을 클릭하면 입력한 정보가 서버로 전송됩니다. 서버는 Passport를 사용하여 입력한 아이디와 비밀번호를 검증하고, 인증이 성공하면 사용자 정보를 세션에 저장하여 로그인 상태를 유지합니다. 로그인이 성공하면 "/" 경로로 리디렉션하여 메인 페이지로 이동합니다.

app.get("/mypage", 로그인했니, function (요청, 응답) {
  console.log(요청.user);
  응답.render("mypage.ejs", { 사용자: 요청.user });
});

function 로그인했니(요청, 응답, next) {
  if (요청.user) {
    next();
  } else {
    응답.send("로그인안하셨는데요?");
  }
}

<%- include('nav.html') %>
    
    <p><%= 사용자.id %>마이페이지입니다.</p>

사용자가 "/mypage" 페이지에 접근하려면 먼저 로그인을 해야합니다. 만약 로그인하지 않은 상태로 "/mypage" 페이지에 접근하려고 하면 "로그인안하셨는데요?"라는 메시지가 보여집니다. 로그인한 사용자는 사용자의 아이디가 포함된 "마이페이지입니다." 메시지와 함께 해당 페이지를 볼 수 있습니다. 이렇게 로그인 여부를 확인하여 페이지 접근을 제한하는 것은 보안과 사용자 경험 측면에서 중요한 기능입니다.

app.get("/search", (요청, 응답) => {
  var 검색조건 = [
    {
      $search: {
        index: "titleSearch",
        text: {
          query: 요청.query.value,
          path: "title", // 제목날짜 둘다 찾고 싶으면 ['제목', '날짜']
        },
      },
    },
  ];
  db.collection("post")
    .aggregate(검색조건)
    .toArray((에러, 결과) => {
      console.log(결과);
      응답.render("search.ejs", { posts: 결과 });
    });
});

<div class="container input-group mb-2">
        <input class="form-control" id="search-input">
        <button class="input-group-append btn btn-danger" id="search">검색</button>
</div>
  
customAlias(document).ready(function() {
          customAlias('#search').click(function(e) {
            var 입력한값 = customAlias('#search-input').val();
            window.location.replace('/search?value=' + 입력한값);
          });

사용자가 "/search" 페이지로 들어가서 검색어를 입력하고 "검색" 버튼을 클릭하면 해당 검색어를 기준으로 MongoDB의 Full-Text Search를 실행하여 검색 결과를 화면에 보여줍니다.

이렇게 실습을 해봤습니다
내일은 Web RTC에 대해서 알아보겠습니다