Today I Learned …

[웹개발] 로그인/로그아웃, 메인 페이지, 회원가입 본문

Web/APM

[웹개발] 로그인/로그아웃, 메인 페이지, 회원가입

염베리 2021. 10. 15. 01:46

* 개인적인 공부 내용을 기록한 글입니다.


1주차 개발 과제

1. 가상 환경에 Ubuntu 설치

2. APM 세팅

3. 로그인/로그아웃, 메인 페이지 개발

 

소감

PHP + Mysql 을 통해 로그인 기능을 구현했다.

 

로그인 시 DB에 저장된 ID/PW 와 일치 여부를 확인하고

성공하면 세션을 발급해서 다른 페이지로 넘어가도 로그인 상태를 유지할 수 있도록 했다.

로그아웃 시에는 발급해준 세션을 삭제한다.

 

내친 김에 회원가입 기능도 만들어봤는데

로그인 기능과 크게 다른 점은 없는 것 같다.

회원가입 시 폼에 기입한 정보를 쿼리문에 적어서 DB로 넘겨줬다.

지금 상태에서는 PW를 평문인 상태로 바로 저장하는데.. 곧 암호화 과정을 추가해줄 생각이다.

앗 그리고.. 새로운 회원 정보가 테이블에 들어가면서 Auto_increment가 꼬이는 경우가 있어서

회원이 추가될 때마다 자동증가 컬럼을 재정렬해줄 수 있게 멀티 쿼리를 사용했다.

 

기능을 만들고나니 이왕이면 좀 예뻤으면 해서 CSS 적용도 해봤다.

블로그에 올릴 생각을 못해서 중간 과정을 따로 찍어둔게 없었는데

마침 커밋을 해둬서 다행이었다.

이 포스팅에 첨부된 코드는 필요한 기능만 구현했을 때의 모습이다.

 

git 과거로 갔다가 다시 돌아오는 방법

$ git checkout HEAD~

뒤에 돌아가고 싶은 단계만큼 숫자를 붙여주면 된다.

예를 들어, 한 단계 전으로 돌아가고 싶다면

$ git checkout HEAD~1

다시 돌아오는 방법은

$ git checkout main

main 자리에는 master 등 돌아오고 싶은 브랜치 이름을 넣어주면 된다.

 

참고 포스팅

http://parkjuwan.dothome.co.kr/wordpress/2017/07/11/php-session-login/


PHP / Mysql 로그인 기능 구현

 

0. 요약

1. main.php

2. login.php

3. login_ok.php  //로그인 처리

4. logout.php

 

1. main.php

<!DOCTYPE html>
<?php session_start(); ?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
</head>
<body>
    <h1>MAIN</h1>
    <?php
        if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) {
            echo "<p>로그인을 해 주세요.</p>";
            echo "<p><button onclick=\"window.location.href='login.php'\">로그인</button> <button onclick=\"window.location.href='join.php'\">회원가입</button></p>";
        } else {
            $user_id = $_SESSION['user_id'];
            $user_name = $_SESSION['user_name'];
            echo "<p>$user_name($user_id)님 환영합니다.";
            echo "<p><button onclick=\"window.location.href='logout.php'\">로그아웃</button></p>";
        }
    ?>
</body>
</html>

2. login.php

<!DOCTYPE html>
<?php session_start(); ?>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
    </head>
    <body>
        <h2>로그인</h2>
        <?php if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) { ?>
        <form method="post" action="login_ok.php" autocomplete="off">
            <p>아이디: <input type="text" name="user_id" required></p>
            <p>비밀번호: <input type="password" name="user_pw" required></p>
            <p><input type="submit" value="로그인"></p>
        </form>
        <small><a href="join.php">처음 오셨나요?</a><small>
        <?php } else {
            $user_id = $_SESSION['user_id'];
            $user_name = $_SESSION['user_name'];
            echo "<p>$user_name($user_id)님은 이미 로그인되어 있습니다.";
            echo "<p><button onclick=\"window.location.href='main.php'\">메인으로</button> <button onclick=\"window.location.href='logout.php'\">로그아웃</button></p>";
        } ?>
    </body>
</html>

3. login_ok.php

<?php
    $user_id = $_POST['user_id'];
    $user_pw = $_POST['user_pw'];
    $conn = mysqli_connect('localhost', 'choco', '7173', 'study_login');
    $sql = "SELECT * FROM member where login_id='$user_id' and login_pw='$user_pw'";
    $res = mysqli_fetch_array(mysqli_query($conn,$sql));
    if($res){
        session_start();
        $_SESSION['user_id'] = $res['login_id'];
        $_SESSION['user_name'] = $res['name'];
        echo "<script>alert('로그인에 성공했습니다!');";
        echo "window.location.replace('main.php');</script>";
        exit;
    }
    else{
       echo "<script>alert('아이디 혹은 비밀번호가 잘못되었습니다.');";
       echo "window.location.replace('login.php');</script>";
    }
?>
<meta http-equiv="refresh" content="0;url=main.php">

4. logout.php

<?php
    session_start();
    session_destroy();
?>
<meta http-equiv="refresh" content="0;url=main.php">

PHP / Mysql 회원가입 기능 구현

 

0. 요약

1. join.php

2. join_ok.php  //회원가입 처리

 

1. join.php

<!DOCTYPE html>
<?php session_start(); ?>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Join</title>
    </head>
    <body>
        <h2>회원가입</h2>
        <?php if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) { ?>
        <form method="post" action="join_ok.php" autocomplete="off">
            <p>이름: <input type="text" name="join_name" required></p>
            <p>아이디: <input type="text" name="join_id" required></p>
            <p>비밀번호: <input type="password" name="join_pw" required></p>
            <p><input type="submit" value="가입하기"></p>
        </form>
        <small><a href="login.php">이미 회원이신가요?</a><small>
        <?php } else {
                $user_id = $_SESSION['user_id'];
                $user_name = $_SESSION['user_name'];
                echo "<p>$user_name($user_id)님은 이미 로그인되어 있습니다.";
                echo "<p><button onclick=\"window.location.href='main.php'\">메인으로</button> <button onclick=\"window.location.href='logout.php'\">로그아웃</button></p>";
        } ?>
    </body>
</html>

2. join_ok.php

<?php
    if (!isset($_POST['join_name']) || !isset($_POST['join_id']) || !isset($_POST['join_pw'])) {
        header("Content-type: text/html; charset=UTF-8");
        echo "<script>alert('기입하지 않은 정보가 있거나 잘못된 접근입니다.')";
        echo "window.location.replace('join.php');</script>";
        exit;
    }
    $join_name = $_POST['join_name'];
    $join_id = $_POST['join_id'];
    $join_pw = $_POST['join_pw'];
    $conn= mysqli_connect('localhost', 'choco', '7173', 'study_login');
    //신규 회원정보 삽입 + ID 재정렬
    $multi = "
        INSERT INTO member(name, login_id, login_pw, created) VALUES ('{$join_name}', '{$join_id}', '{$join_pw}', now());
        SET @COUNT = 0;
        UPDATE member SET id = @COUNT:=@COUNT+1;
    ";
    $res = mysqli_multi_query($conn,$multi);
    if($res){
        echo "<script>alert('회원가입이 완료되었습니다.');";
        echo "window.location.replace('login.php');</script>";
        exit;
    }
    else{
       echo "<script>alert('저장에 문제가 생겼습니다. 관리자에게 문의해주세요.');";
       echo mysqli_error($conn);
    }
?>
<meta http-equiv="refresh" content="0;url=main.php">

'Web > APM' 카테고리의 다른 글

[웹개발] 게시글 작성 기능  (0) 2021.10.26
[웹개발] 비밀번호 일치 확인  (0) 2021.10.24
[웹개발] 로그인 5 Cases  (2) 2021.10.24
[웹개발] 아이디 중복 검사  (3) 2021.10.23
[웹개발] CSS 적용  (1) 2021.10.15
프로필사진
berry
FE Developer, loves React & better DX
Comments