이번 블로그부턴,
지금까지의 배운 것들로 'Login' 페이지를 만들 것이다.
최종 목표는 로그인 페이지에 DB 설정까지 하여, 실제 회원가입과 로그인이 되게 설정하는 것이 목표이다.
많은 실패와 변수가 있을 수 있지만,
내가 배운 것과 느낀 것을 그대로 자세하게 블로그에 남겨볼 것이다.
1. 프론트 페이지
먼저 사이트에 접속하면 보이는 화면을 만들어볼 것이다.
내가 현재 생각하고 있는 화면은 다음과 같다.
(시간이 된다면 css까지 추가 생각 중이긴 하지만.. 아직 계획은 없다.)
사이트 접속 시 위 그림판과 같은 느낌의 형태로 나타나게 할 것이다.
생각 했던 느낌으로 사이트 프론트를 만들어봤다.
얼추 생각했던 느낌과 같은 것 같다.
코드를 봐보자.
<front.php>
<!doctype html>
<html>
<head>
<h1>NAMGI WEB 로그인 페이지</h1>
<meta charset="utf-8">
</head>
<body>
<!--사용자가 데이터를 제출하면 'login' 파일에 post 방식으로 전송-->
<form action="login.php" method="post">
<!--텍스트 입력 창으로 이름 데이터 전송-->
이름: <input type="text" name="name"><br>
<!--입력 비밀번호를 데이터로 전송-->
비밀번호: <input type="password" name="pwd"><br>
<!--입력 데이터 제출-->
<br><input type="submit" name="submit" value="로그인하기">
</form>
<!--회원가입 페이지로 이동-->
<a href="signup.php"><br>회원가입</a>
</body>
</html>HTML 코드는 다음과 같다.
post 방식으로 이름과 비밀번호를 전송한다.
24번 째 줄의 '<a href="signup.php"><br>회원가입</a>'는
링크 방식으로 '회원가입'을 클릭하면 'signup.php' 화면으로 넘어가는 과정이다.
이제 본격적으로 'login.php' 를 만들어보자.
위 코드는 내 블로그 중 '[php Forms]'에서 참고하였다.
[php Forms] 보러가기: https://namgi.tistory.com/15
[php Forms] 2주차(1회차) / php 양식 처리, 유효성 검사, 필수 필드, 양식확인
이번엔 2주차로, php forms에 대해 배울 것이다. php 양식 처리 이름: 이메일: 위 코드 실행시 사이트 상에서 보이는 화면이다. 이름과 이메일, 두 개의 입력 필드와 제출 필드가 있는 HTML 양식(Handling)
namgi.tistory.com
2. 로그인 페이지
이 로그인 페이지가 진짜 관건이다.
로그인 페이지를 구축하는 여러 방법이 있겠지만,
'[php Advanced]'에서 쿠키에 대해 배웠기에,
쿠키를 불러와 로그인 되는 과정을 만들어 볼 것이다.
[php Advanced] '쿠키' 보러가기: https://namgi.tistory.com/18
[php Advanced] 2주차(4회차) / php 쿠키, 세션
이번 회차에선 php 쿠키와 세션에 대해 배웠다. php 쿠키, 세션 쿠키 생성/검색 쿠키란? - 쿠키는 사용자를 식별하는데 사용된다. 브라우저로 페이지를 요청할 때 쿠키도 같이 보낸다. 더 자세한 내
namgi.tistory.com
'login.php'를 만들기 앞서,
'front.php'에 추가해주어야 할 코드가 하나 있다.
<?php
//쿠키에서 로그인정보 불러오기
if (isset($_COOKIE['userId'])){
$userId = $_COOKIE['userId'];
$idSaveCheck = "checked";
}
?>위 코드로, 쿠키에서 로그인 정보를 불러올 때 사용하게 된다.
'front.php'의 전체코드는 다음과 같다.
<front.php>
<!doctype html>
<html>
<head>
<h1>NAMGI WEB 로그인 페이지</h1>
<meta charset="utf-8">
</head>
<body>
<?php
//쿠키에서 로그인정보 불러오기
if (isset($_COOKIE['userId'])){
$userId = $_COOKIE['userId'];
$idSaveCheck = "checked";
}
?>
<!--사용자가 데이터를 제출하면 'login' 파일에 post 방식으로 전송-->
<form action="login.php" method="post">
<!--텍스트 입력 창으로 이름 데이터 전송-->
이름: <input type="text" name="name"><br>
<!--입력 비밀번호를 데이터로 전송-->
비밀번호: <input type="password" name="pwd"><br>
<!--입력 데이터 제출-->
<br><input type="submit" name="submit" value="로그인하기">
</form>
<!--회원가입 페이지로 이동-->
<a href="signup.php"><br>회원가입</a>
</body>
</html>이제 정말로 'login.php'를 만들어보자.
<login.php>
<html>
<body>
<?php
session_start();
//$userId, $userPw, $idcheck의 값들을 변수에 저장
$userId = trim($_POST['userId']);
$userPw= trim($_POST['userPw']);
$idcheck = trim($_POST['idCheck']);
//mysql DB 연결
$mysqli = mysqli_connect("php-study-bihus.run.goorm.io/phpmyadmin/","namgi","namgi2280","loginDB");
if ($mysqli->connect_errno) {
die('Connect Error: '.$mysqli->connect_error);
}
//로그인 정보 확인(아이디 및 비밀번호)
if ($result = $mysqli->query("select * from LoginInfo where id='".$userId."' and password='".$userPw."'")){
while ($row = $result->fetch_object()) {
$Exist = "1";
}
}
if ($Exist ==""){
//로그인에 실패한다면, 'alert'로 경고/ 'history.back();'으로 전 페이지로 돌아감
echo "<script>alert('id/pw가 알맞지 않습니다.'); history.back();</script>";
//세션 파괴
session_destroy();
exit;
}
//쿠키 세팅
if ($idcheck =="on"){
setcookie('userId',$userId,time()+(86400*30),'/');
}else{
setcookie('userId',$userId,time()-(86400*30),'/');
unset($_COOKIE['userId']);
}
$_SESSION['userId'] = $userId;
?>
</body>
</html>DB 연결에..
쿠키 설정까지 했는데
실행을 하게 되면..
없는 아이디와 비밀번호를 넣었지만
'login.php'로 넘어간다는 것이다.
이게 로그인이 된 건지..
그냥 버튼을 클릭해 'login.php'로 넘어가는 것인지 모르겠다.
조금 더 알아보고,
다음 블로그에선 해결된 모습으로 올 수 있으면 좋겠다.
'php' 카테고리의 다른 글
| [php OOP] 3주차(7회차) / php 정적 메서드 (0) | 2022.09.22 |
|---|---|
| [php OOP] 3주차(6회차) / php 반복 가능한 객체(iterable) (2) | 2022.09.22 |
| [php OOP] 3주차(5회차) / php 네임스페이스 (1) | 2022.09.22 |
| [php OOP] 3주차(4회차) / php 인터페이스, 특성 (2) | 2022.09.20 |
| [php OOP] 3주차(3회차) / php 상속, 상수 (0) | 2022.09.18 |