로그인/로그아웃

Box Maker 2022. 10. 20. 14:34

2022. 10. 20. 14:34

1. login.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/53a8c415f1.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
        <form method="post" action="/login_check.php">
    <div class="wrap">
        <div class="login">
            <h2>Log-in</h2>
            <div class="login_sns">
            <li><a href=""><i class="fab fa-instagram"></i></a></li>
            <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
            <li><a href=""><i class="fab fa-twitter"></i></a></li>
            </div>
            <div class="id">
                <h4>ID</h4>
                <input type="text" name="id" id="" placeholder="id">
            </div>
            <div class="pw">
                <h4>Password</h4>
                <input type="password" name="pw" id="" placeholder="Password">
            </div>
            <div class="login_etc">
                <div class="checkbox">
                <input type="checkbox" name="" id=""> Remember Me?
                </div>
                <div class="Signup">
                <a href="">Signup</a>
            </div>
            </div>
            <div class="button">
                    <button type="submit" value="submit">login</button>
            </div>
            </form>
        </div>
    </div>
</body>
</html>

2. login.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans KR", sans-serif;
}
a {
  text-decoration: none;
  color: black;
}

li {
  list-style: none;
}

.wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
}

.login {
  width: 30%;
  height: 600px;
  background: white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h2 {
  color: tomato;
  font-size: 2em;
}
.login_sns {
  padding: 20px;
  display: flex;
}

.login_sns li {
  padding: 0px 15px;
}

.login_sns a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;

justify-content: center;
  padding: 10px;
  border-radius: 50px;
  background: white;
  font-size: 20px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1);
}

.id {
  margin-top: 20px;
  width: 80%;
}

.id input {
  width: 100%;
  height: 50px;
  border-radius: 30px;
  margin-top: 10px;
  padding: 0px 20px;
  border: 1px solid lightgray;
  outline: none;
}

.pw {
  margin-top: 20px;
  width: 80%;
}

.pw input {
  width: 100%;
  height: 50px;
  border-radius: 30px;
  margin-top: 10px;
  padding: 0px 20px;
  border: 1px solid lightgray;
  outline: none;
}

.login_etc {
  padding: 10px;
  width: 80%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.button {
  margin-top: 50px;
  width: 80%;
}
.button button {
  width: 100%;
  height: 50px;
  border: 0;
  outline: none;
  border-radius: 40px;
  background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47));
  color: white;
  font-size: 1.2em;
  letter-spacing: 2px;
}

3. home.php(메인페이지)

<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="/css/home.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Home</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">My Page
            <span class="visually-hidden">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Board</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">FAQ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <button type="button" class="btn btn-primary btn-sm" onClick="location.href='logout.php'">Log Out</button>
      </ul>
      <form class="d-flex">
        <input class="form-control me-sm-2" type="text" placeholder="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<h1 align="center">Welcome !!</h1>
</body>
</html>

4.home.css

css는 https://bootswatch.com/ 사이트에서 원하는 템플릿을 다운받아 사용하면 쉽게 디자인 할 수 있다

5. logout.php

<?php
session_start();
session_destroy();
?>
<script>
alert("Log Out!!");
location.replace('index.php');
</script>

6. login_check.php

login.php에서 데이터를 받아 DB를 대조해 로그인이 이루어질수 있도록 해주는 코드이다

<?php
session_start();
$id=$_POST['id'];
$pw=$_POST['pw'];
$mysqli=mysqli_connect("localhost", "계정명", "비밀번호", "DB명");

$check="SELECT * FROM login WHERE id='$id'";
$result=$mysqli->query($check);
if($result->num_rows==1){
        $row=$result->fetch_array(MYSQLI_ASSOC);
        if($row['pw']==$pw){
                $_SESSION['id']=$id;
                if(isset($_SESSION['id']))
                {
                        echo "<script>alert('Login Success!!');</script>";
                        echo "<script>location.href='home.php';</script>";
                }
                else{
                        echo "Session Save Failed";
                }
        }
        else{
                echo "<script> alert ('Wrong id or Password'); history.back(); </script>";
        }
}
else{
        echo "Wrong id or pw";
}
?>

7. DB 생성

localhost/phpmyadmin으로 접속해 DB를 생성한다

CREATE DATABASE MEMBER;//DB 생성

CREATE TABLE login (

id varchar(20), primary key,

pw varchar(20));// 테이블 생성

INSERT INTO login VALUES('john', '1234');//데이터 생성

8. 실제 화면

1) login.php

본인은 로그인 페이지를 인덱스(index.php)로 바꿔서 저장했다

로그인 성공 시 성공했다는 알림이 나타난 뒤 다음 메인 페이지로 넘어간다

id 또는 비밀번호가 틀릴경우 위와같은 알림이뜨면서 다시 로그인 페이지로 돌아간다

네비게이션바에 로그아웃 버튼을 클릭하면 로그아웃이라는 알림과함께 로그인페이지로 돌아간다

'Web Development' 카테고리의 다른 글

회원가입 / ID 중복확인 (0)	2022.11.04
로그인 case (0)	2022.10.24

HackBox