본문 바로가기
WEB HACKING/웹 해킹[실습]

Php로 웹 개발하기 : 로그인(1) - 기초 Setting

by madevth 2021. 10. 16.
반응형

다음 글 : [모의해킹_실습] - Php로 웹 개발하기 : 로그인 페이지 만들기(2) - MySQL 연동 Error 해결하기

 

1) 우선 MySQL에 데이터베이스를 구축하자.

mysql > CREATE DATABASE dbname;
mysql > USE dbname;
mysql > CREATE table 'tbname' (
    → 	'id' int(10) NOT NULL AUTO-INCREMENT,
    → 	'login_id' varchar(20) NOT NULL,
    → 	'login_pw' varchar(20) NOT NULL,
    → 	PRIMARY KEY(id)
    → );
mysql > SHOW tables; // tbname이 제대로 출력되면 ok!
mysql > INSERT into tbname values (1, 'id', 'pw');
mysql > SELECT * from tbname; // id, login_id, login_pw가 제대로 출력되면 ok!

데이터베이스를 만들어준 후 로그인 아이디와 패스워드를 넣은 테이블을 하나 생성해 준다.

테이블을 생성할 때는 Indentation을 신경 쓰자. 우선 PRIMARYRYKEY는 id로 설정해 주었는데, 중복된 아이디를 제거하기 위해 login_id로 설정하는 것도 좋을 것 같다.

 

2) php 로그인 form 만들기

/var/www/html 경로에 php 파일을 하나 생성하자.

(태그 구조는 나중에 CSS 넣을 때 차차 바꾸고, 우선은 빠르게 작성하고 작동이 잘 되는지를 확인해 보자.)

VSCode에서는 !를 입력하고 엔터를 치면 자동으로 기본 html 뼈대를 만들어준다.

위와 같이 작성한 후 http://localhost/index.php로 확인해 보면 로그인 창이 떠 있는 것을 볼 수 있다.

 

 

3) php - mysql 연동하기

<?php
    if(isset($_POST['id']) && isset($_POST['pw'])){
        $username = $_POST['id'];
        $password = $_POST['pw'];

        $conn = mysqli_connect('localhost', 'id', 'pw', 'dbname');
        $sql = "SELECT * FROM login where login_id = '$username' and login_pw = '$password';";
        
        if($result = mysqli_fetch_array(mysqli_query($conn, $sql))){
            header('Location: mainpage.php');
        } else{
            echo "<script>alert('등록되지 않은 사용자입니다.')</script>";
        }
        mysqli_close($conn);
    }
?>

위 코드를 php 파일에 삽입해 준다.

첫 if 문은 사용자가 로그인 버튼을 눌렀을 때 ID와 PW 칸에 넣은 데이터가 있는지 확인한다.

데이터가 있다면, ID 칸에 넣은 데이터를 $username에 넣어주고, PW 칸에 넣은 데이터를 $password에 넣어준다.

 

그 뒤로는 mysql과 연동해서 mysql에 저장해 놓은 id와 pw 값을 가져오는 것이다.

$conn 부분에 적은 id와 pw는 mysql에 로그인하기 위한 id와 pw을 의미한다.

(마찬가지로 dbname은 위에서 만들었던 데이터베이스의 이름을 의미한다.)

 

사용자가 입력한 ID, PW 모두 mysql에 만들어 놓았던 table의 login_id, login_pw와 일치한다면 $result가 존재하고, 그렇게 되면 새로운 페이지 (mainpage.php로 만든 페이지)로 이동하고, 아니라면 경고창을 띄우도록 코드를 작성했다.

login.php 파일을 만든 후 <h1>로그인 성공</h1> 같은 간단한 문구를 넣고 테스트해보자.

반응형

댓글