본문 바로가기
Project/project 1 - JH community

[php] 로그인 페이지 만들기 - 1

by 끊임없는정진 2022. 10. 18.

※ 보안적 요소는 거의 고려하지 않고 php명령어 숙달용으로 혼자서 만드는 로그인 페이지 입니다.

 

▶로그인 페이지를 위해 만들어야 할 파일 (※이번 시간에 만들파일은 굵은 글씨로 표기)

 

dbconn.php : 데이터베이스 연결파일

index.php : 로그인 메인화면

login_check.php : 로그인 처리 페이지

logout.php : 로그아웃 처리 페이지

register.php : 회원가입 페이지

register-update.php : 회원가입 처리 페이지

style.css : 스타일 시트 파일

 

▶데이터베이스 연결파일

 

◎정보수집

우선 구글에 'php mysql connect'를 검색하자. 

mysql_connect의 경우 php5부터는 쓰이지 않고, php7부터는 사라졌으니, MySQLi 또는 PDO_MySQL을 사용하라고 한다.

다른 데이터베이스까지 연동할 생각이라면, PDO를 쓰는게 좋겠으나(12개의 데이터베이스를 지원하기 때문) 우리가 홈페이지를 만들때에는 MySQL을 사용할 예정이기 때문에, MySQLi 명령어를 사용하도록 하자.

mysqli_connect() 란으로 들어가게 되면, 

다음과 같이 명령어 사용법을 보여준다. 즉, mysqli_connect($hostname, $username, $password, $database, $port, $socket) 순서로 입력하면 된다. 많은 사용례를 본 결과, $port와 $socket 명령어는 생략해서 사용한다. 

 

이제 명령어를 알았으니 연결파일구상을 해보자. 우선, $hostname의 경우 내 자신의 아이피, 즉 "localhost"를 입력해주면 된다. 나머지 변수의 경우 MySQL에서 데이터를 받아와야 하기 때문에, MySQL에서 Table을 만들어야 진행이 가능하다.

 

◎MySQL TABLE 생성

MySQL을 다루는 방법은 다양하겠으나, 나는 phpmyadmin을 이용해서 Table을 하나 만들었다. 각 변수와 특징은 다음과 같다. 다른 명령어와의 혼선을 막기위해 각 필드명앞에서는 jj를 붙였다(별 의미없다. 그냥 '정진' 앞글자 딴거)

필드명 데이터 타입 역할
jj_no int(11) - auto_increment 고유번호(id로 하는 경우도 있으나, 내가 만들 페이지는 로그인 페이지인 관계로, no라는 변수로 설정했다.), primary_key 와 auto_increment 설정을 동시에 해둬서 고유번호는 한번 부여되면 변하지 않도록 해놓는다.
jj_id varchar(20) 회원의 ID, ID는 중복되면 안되기 때문에, unique_key로 설정해둔다. (primary_key로 설정하면 영원히 쓸수없다. 혹시나 회원탈퇴 등의 이슈로 재가입을 할 수도 있으니, unique_key로 설정하는 것.)
jj_password varchar(255) 회원의 비밀번호를 설정
jj_name varchar(255) 추후 다른 기능을 추가할 때, 이름을 넣어두면 편리하지 않을까 싶어서 일단은 넣어두기로 한다(예를 들자면, 글작성, 채팅..)
jj_datetime datetime 회원가입을 언제했는지 확인할 수 있게끔 넣어둔다. 시간으로 색인(index)을 표시할 필요가 있다고 생각해서 key값으로 넣어둔다.

phpmyadmin에서 명령어로 다음과 같이 입력한다.

 

CREATE table member ( jj_no int(11) NOT NULL AUTO_INCREMENT, jj_id varchar(20) NOT NULL DEFAULT '', jj_password varchar(255) NOT NULL DEFAULT '', jj_name varchar(255) NOT NULL DEFAULT '', jj_address varchar(255) NOT NULL DEFAULT '', jj_datetime datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (jj_no), UNIQUE KEY (jj_id), KEY jj_datetime (jj_datetime) );

 

입력 후에 확인해보면 Table이 정상적으로 생성된 것을 확인해볼수 있다. 

 

데이터베이스 연결파일 생성

 다시 돌아와서, 데이터베이스 연결파일을 Table값을 기반으로 만들어보도록 하자. 위에도 말했듯이, mysqli_connect($hostname, $username, $password, $database, $port, $socket) 순서로 입력하면 된다. 포트와 소켓은 생략해도 우리가 쓸 로그인 페이지에는 큰 영향을 끼치지 않는다. 우선, 변수를 위와 똑같이 설정해버리면 명령어 혼선이 염려되므로, 변수는 조금씩 변형해서 설정하도록 하자.

변수 설정 설정값
$hostname $mysql_host localhost
$username $mysql_user mysql계정 아이디
$password $mysql_password mysql계정 비밀번호
$database $mysql_db 불러올 스키마 이름 (나는 'test'라는 이름의 스키마 아래에 Table을 만들었었다.)

 변수를 이렇게 설정해놨다면, 코드를 짜는데 유의할 점이 있다.

우선, 악용될 염려가 있으므로 오류 메시지는 출력하지 않는 것이 좋다. display_errors 기능을 off 해주도록 하자(php설정함수인 ini_set으로 설정하면 된다. 아래 참조).

또한, 연결이 실패되었을 경우, 연결실패를 알려줄 필요가 있는데, 메세지를 출력하면서 연결을 끊는 설정을 해주도록 하자. die든 exit든 편한거 골라서 쓰자. 아래에 설명한바와 같이 die나 exit나 구조적으로 똑같다고 공식 홈페이지에 나와있다.

 

php 공식페이지 exit에 대한 설명

 

<?php

// 변수설정

$mysql_host = "localhost" ;

$mysql_user = "mysql 아이디";

$mysql_password = "mysql 비밀번호";

$mysql_db = "test(연결할 스키마 이름)";

// 데이터베이스 연결

$conn = mysqli_connect($mysql_host, $mysql_user, $mysql_password, $mysql_db);

// 연결오류 시 경고문 출력

if (!$conn){

die("연결 실패:" . mysqli_connect_error());

}

 

ini_set('display_errors', 'Off');

session_start();

?>

 

로그인 메인화면 생성

 페이지를 만들기 전, 우리가 만들 페이지가 어떻게 돌아갈지 생각해보자. 

①웹브라우저 실행 ->② 로그인 페이지  -> ③ 아이디, 비밀번호 검사 -> ④ 로그인 후 페이지

 이제 우리가 만들고자 하는 메인화면 생성은 2번 과정의 페이지를 만드는 것이다. 우선은 미적인 요소(CSS 등)는 빼놓고 담백하게 코드를 어떻게 구성할지 생각해보자. 로그인 화면이니깐 "Login" 글자도 넣어야겠고, id와 pw를 입력할 텍스트박스도 넣어야겠고, 이를 제출할 submit 박스도 만들어야겠고, 입력될 정보를 확인할 코드도 넣는 등 다양한 구상을 할 수가 있다. 

 그러나 로그인은 애초에 db와 연결이 되어야 할 수 있으므로, db연결이 최우선이 되어야 할 것이다. 다양한 블로그, 유튜브를 뒤져본 결과, 크게 두가지 방법으로 연결을 했다. 매번 연결함수를 정의하는 방법, include를 활용한 연결파일 불러오기. 나는 include 방식이 좀 더 합리적으로 보였던터라, include를 활용해서 만들어보기로 했다.

 

<?php

include("./연결파일이름.php");

?>

<html>

<head>

<title>LoginPage</tilte>

</head>

<body>

<h1>Login</h1>

<form action="./로그인처리페이지.php" method="post">

<p><input type="text" id="jj_id" name="jj_id" placeholder="ID"><p>

<p><input type="password" id="jj_password" name="jj_password" placeholder="Password"></p>

<p><button type = "submit"></p>

</form>

</body>

</html>

 

입력결과는

 

진짜 담백하고 간결한 로그인페이지가 만들어졌다. 미적인 요소는 css를 추가해서 꾸미면 된다.

 

로그인 처리 페이지 생성

 위에서 처리 페이지로 post로 데이터전송을 하도록 처리해놓았으니, 그 전송한 데이터를 받아서 처리하는 과정을 거치는 페이지를 만들면 된다. 참고로 mysqli_fetch_assoc은 mysqli_fetch_array로 해도 무방하다. assoc의 경우 열이름으로 정보를 받아오는 명령어라고 하며 array는 키값 번호 둘다 가능하다고 한다. (출처 : https://lightblog.tistory.com/m/117 )

 

[PHP] mysqli_fetch_row, assoc, array 의 차이

2017/09/18 - [PHP] - [PHP] DB에서 특정 행들만 가져오기(7) - DB에서 가져온 정보 출력하기 mysqli_fetch_row()에서 본 대로 mysqli_fetch_row() 는 다음과 같이 배열의 번호로 요소를 출력할 수 있다. DOCTYPE html>

lightblog.tistory.com

 

<?php

include("./연결파일이름.php");

 

//데이터받아오기 및 공백제거

$jj_id = trim($_POST['jj_id']);

$jj_password = trim($_POST['jj_password']);

 

//공란 입력시 경고

if (!$jj_id || !$jj_password) {
echo "<script>alert('No blank or other chars');</script>";
        echo "<script>location.replace('./index.php');</script>";
exit;
}

 

//sql에서 id 데이터 받아오기 및 변수설정

$sql = " SELECT * FROM member WHERE jj_id = '$jj_id' ";
$result = mysqli_query($conn, $sql);
$jj = mysqli_fetch_array($result);

 

//sql에서 password 데이터 받아오기 및 변수 설정
$sql = " SELECT * FROM member WHERE jj_password = '$jj_password' ";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
$password = $row['jj_password'];

 

//아이디가 등록됐는지, 등록된 아이디면 비밀번호가 일치하는지 확인
if (!$jj['jj_id'] || !($password === $jj['jj_password'])) {
echo "<script>alert('Unassigned ID or Wrong Password, please check again!');</script>";
echo "<script>location.replace('index.php');</script>";
exit;
}

 

//세션 생성(추후 로그인 유지에 사용될 예정)
$_SESSION['ss_jj_id'] = $jj_id;

 

//데이터베이스 접속 종료
mysqli_close($conn);

 

//세션 확인 후 로그인 후 접속할 페이지에 접속
if(isset($_SESSION['ss_jj_id'])){
        echo "<script>alert('Login success!');</script>";
        echo "<script>location.replace('로그인후접속할페이지.php');</script>";
}

댓글