로그인 페이지

  <?php
  $g_title = "로그인";
  $js_array = ["js/login.js"];
  $menu_code = "login";
  include "inc_header.php";
  ?>
  <main class=" mx-auto border rounded-2 p-5 d-flex gap-5" style="height: calc(100vh - 265px);">
    <form method="post" action="" class="w-25 mt-5 m-auto" autocomplete="off">
      <img src="images/logo.svg" alt="" class="w-25">
      <h1>Log-In</h1>
      <div class="form-floating">
        <input type="text" id="f_id" class="form-control" placeholder="아이디 입력">
        <label for="f_id">아이디</label>
      </div>
      <div class="form-floating mt-2">
        <input type="password" id="f_pw" class="form-control" placeholder="비밀번호 입력">
        <label for="f_pw">비밀번호</label>
      </div>
      <button type="button" class="w-100 btn btn-primary mt-2" id="btn_login">로그인</button>
    </form>
  </main>
  <?php
  include "inc_footer.php";
  ?>

• 기본적인 틀은 회원가입 페이지를 참고하였습니다.

1. calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다.
   출 처 https://developer.mozilla.org/ko/docs/Web/CSS/calc
2. form-floating은 Bootstrap에서 사용되는 기능으로 입력 필드 위로 떠오르는 폼을 만들 수 있습니다.
   출 처 https://getbootstrap.kr/docs/5.0/forms/floating-labels/

로그인 기능

document.addEventListener("DOMContentLoaded", () => {
  const btn_login = document.querySelector("#btn_login")

  btn_login.addEventListener("click", () => {
    const f_id = document.querySelector("#f_id")
    const f_pw = document.querySelector("#f_pw")

    if (f_id.value == "") {
      alert("아이디를 입력해 주세요.")
      f_id.focus()
      return false
    }
    if (f_pw.value == "") {
      alert("비밀번호를 입력해 주세요.")
      f_pw.focus()
      return false
    }
    // Ajax
    const xhr = new XMLHttpRequest()
    xhr.open("post", "./pg/login_process.php", "true")

    const f1 = new FormData()

    f1.append("id", f_id.value)
    f1.append("pw", f_pw.value)

    xhr.send(f1)

    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.responseText)

        if (data.result == "Login_success") {
          alert("환영합니다.")
          location.href = "index.php"
        } else if (data.result == "Login_fail") {
          alert("해당 정보가 존재하지 않습니다.")
          f_id.value = ""
          f_pw.value = ""
          f_id.focus()
          return false
        }
      }
    }
  })
})

로그인 처리

<?php

$id = (isset($_POST["id"]) && $_POST["id"] != "" ? $_POST["id"] : "");
$pw = (isset($_POST["pw"]) && $_POST["pw"] != "" ? $_POST["pw"] : "");

if ($id == "") {
  die(json_encode(["result" => "empty_id"]));
}
if ($pw == "") {
  die(json_encode(["result" => "empty_pw"]));
}

include "../inc/dbconfig.php";
include "../inc/member.php";

$mem = new Member($db);

if ($mem->login($id, $pw)) {
  $arr = ["result" => "Login_success"];

  session_start();
  $_SESSION["id"] = $id;
} else {
  $arr = ["result" => "Login_fail"];
}

die(json_encode($arr));

DB - 로그인 기능

// 로그인
  public function login($id, $pw)
  {
    $sql = "SELECT * FROM member WHERE id=:id AND password=:pw";
    $stmt = $this->conn->prepare($sql);
    $stmt->bindParam(":id", $id);
    $stmt->bindParam(":pw", $pw);
    $stmt->execute();

    return $stmt->rowCount() ? true : false;
  }