저번주에는 코드를 이해하고 짜느라 로그인 페이지를 만들지 못했는데 어제 드디어 완성했다.
기본적인 코드는 https://choco4study.tistory.com/3 이 블로그를 따라 만들었고
아직 대부분의 코드는 보고 따라한 수준이라.. 후에 직접 코드를 짜서 올리겠다.
홈페이지의 큰 틀은
index.php(메인 페이지)
login.php로그인 페이지)
login_ok.php(로그인 확인 페이지)
join.php(회원가입 페이지)
join_php(회원가입 승인 페이지)
이렇게 구성된다. 물론 모든 페이지 간 연동은 되어있다.
모든 코드는 설명을 추가하겠다. 조금이라도 이해 안되면 댓글 달아주길 바랍니다~~
index.php (나는 main이 아닌 index라는 이름으로 사용함)
<!doctype html>
<?php session_start(); ?> //session을 시작한다는 의미는 session에 값을 넣으면 서버에 저장된다는 의미
// 단 서버에 저장하기 위해서는 <?php 문 사이에 코드를 넣어야한다.
<html lang="kr">
<head>
<link rel="stylesheet" href="./style.css"> //이건 사이트의 스타일을 지정하는것
<meta charset = "utf-8">
<title> 해킹사이트 </title>
</head>
<body>
<h1>메인페이지</h1>
//아래 코드는 session['user_id]에 값이 존재한다는 것은 로그인이 되어 있다는 뜻이기 때문에
// 이를 if 문에 넣어 로그인된 유저 정보가 있으면 환ㅇ 없으면 로그인하는 창(login.php)으로 이동한다는 의미이다.
<?php
if(isset($_session['user_id']) || isset($_session['user_name'])) {
$user_id = $_session['user_id'];
$user_name = $_session['user_name'];
echo "<p>$user_name($user_id)님 환영합니다.</p>";
echo "<p><button onclick=\"location.href='logout.php'\">로그아웃</button></p>";
} else {
//만약 false시 로그인을 필요로 하는 문구를 넣고 login.php로 이동하여 로그인을 진행하도록함
echo "<p> 로그인이 필요합니다.</p><br>";
echo "<p><button onclick=\"window.location.href='login.php'\">로그인</button> <button onclick=\"window.location.href='join.php'\">회원 가입 </button></p>";
}
?>
//보게되면 서버와 소통하는 부분은 <?php ?>로 묶이게 된다 이 괄호가 없으면 서버와 소통을 못해서 제대로 된 값이 나오지 않는다.
</body>
</html>login.php
<!DOCTYPE html>
<html lang="kr">
<?php session_start(); ?> '/session이 필요한 페이지는 start를 해주어야한다.
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<title>로그인 페이지</title>
</head>
<body>
//보면 if문의 참거짓 뒤에 참이면 실행될 코드와 거짓이면 실행될 코드를 구분하는 {를 <?php로 묶은것을 볼 수 있다.
//서버와 소통후 다음 코드 부분에서는 서버가 아닌 클라이언트에서 실행되는 부분이라 {를 ?> 뒤에 붙이게 되면
//페이지에 {를 출력하는 형태가 된다. 그렇기 때문에 특수문자까지 php에서 실행되도록해야한다.
<?php if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) { ?>
<form method='post' action="login_ok.php" autocomplete="off">
<p>로그인</p></br>
//placeholder는 입력 박스안에 간단히 무엇을 적어야하는지 적어주는 것으로 값을 넣으면 사라진다.
//type은 텍스트 형식 그리고 입력된 값은 user_id에 저장되고 최대 입력은 50까지 받는 다는 의미
<p><input type = "text" name='user_id' placeholder="아이디" maxlength="50" /><p>
<p><input type = "password" name='user_pw' placeholder="비밀번호" maxlength="50" /></p>
//아래 줄은 로그인이라는 제출 버튼을 만드는 코드
<input type="submit" value="로그인" >
//<a는 하이퍼링크로 다른 페이지와 연결을 해주는 역할을 한다. 다만 형태가 버튼 형식이 아닌
// 글자를 클릭하면 넘어가는 형태라 만약 버튼으로 만들고 싶으면 location.replace나 location.href를 사용하여 만들면 됨
<small><a href="index.php">메인으로</a></small>
</form>
<?php } else {
//session에 값이 있다는 것은 로그인이 되었다는 의미이기에 아래 코드 실행
$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'];
echo "<p>$user_name($user_id)님은 이미 로그인되어 있습니다.";
echo "<p><button onclick=\"window.location.href='index.php'\">메인으로</button> <button onclick=\"window.location.href='logout.php'\">로그아웃</button></p>";
} ?>
</body>
</html>login_ok.php
//login.php에서 user_id와 user_pw를 post방식으로 넣어줬기 때문에 서버에서 이를 비교하여 해당 값이
//데이터베이스에 있는지 판별하는 작업만 하면 로그인 확인이 끝이 난다. 어차피 모두 서버에서 작동하기 때문에
//전체를 php로 묶음
<?php
//post 방식으로 받아서 user_id라는 변수에 넣겠다는 의미
$user_id = $_POST['user_id'];
$user_pw = $_POST['user_pw'];
//아래 코드는 connect의 뜻으로 내가 가진 데이타베이스를 접근하기 위해 정보를 입력하는 칸
// 순서는 (내 address, 계정이름, 비밀번호,접근할 데이타베이스) 순이다. mysql의 계정 값을 넣어줘야함
$conn = mysqli_connect('localhost', 'root', 'aa', 'logindb');
// sql은 내가 요청할 자료이다 필요한 건 id와 pw이기 때문에 login이라는 table에서 id pw의 모든 자료를 가져온다.
$sql = "SELECT * FROM login where login_id='$user_id' and login_pw='$user_pw'";
//mysqli_query는 요청이라는 의미로 위 설명한 계정정보와 무엇을 요청할것인지를 실행하여 입력한 로그인 정보와 일치하는 값을 가져오는데
//fetch_array라는 형태의 배열로 값을 가져오게 된다. 이 형태는 각 행 [0], [1]에 순차적으로 값이 들어가 있다
$res = mysqli_fetch_array(mysqli_query($conn,$sql));
//res 변수에 값이 있다는 것은 로그인 정보와 일치하는 데이터가 있다는 의미로 일치시 로그인에 성공했다는 창을 띄운다.
if($res){
session_start();
$_SESSION['user_id'] = $res['login_id'];
$_SESSION['user_name'] = $res['name'];
echo "<script>alert('로그인에 성공했습니다!');";
echo "window.location.replace('index.php');</script>";
exit;
}
else{
// 값이 없으면 다시 login 페이지로 이동
echo "<script>alert('아이디 혹은 비밀번호가 잘못되었습니다.');";
echo "window.location.replace('login.php');</script>";
}
?>
<meta http-equiv="refresh" content="0;url=index.php">아래 코드는 mysql의 계정 정보와 데이터 베이스가 연결이 되는지 테스트 하는 것으로 작성한 코드가 데이터베이스와 내가 연결이 안된다 하면 아래 코드로 한번 연결을 확인해 보고 다시 진행하길 바란다.
<?php
$db_host="localhost"; //DB서버 주소를 입력
$db_user="root"; //접속할 ID
$db_password="aa"; // 접속할 ID의 패스워드
$db_name="logindb"; // 특별히 사용할 DB가 있다면 DB명을 넣음
$con=mysqli_connect($db_host, $db_user, $db_password, $db_name); // 변수 $con에 db접속 내장함수와 (인자값 들)을 저장
if ( mysqli_connect_error($con) ) { // DB접속 했을 때 오류가 발생한다면
echo "MariaDB 접속 실패 !!", "<br>"; // 출력
echo "오류 원인 : ", mysqli_connect_error(); // mysqli_connet_error() 내장함수는 DB서버 연결 오류 원인을 반환해주는 함수
exit();
}
echo "MariaDB 접속 완전히 성공!!"; // 에러가 없을 시 출력
mysqli_close($con); // DB 접속 종료
?>join.php
<!DOCTYPE html>
<?php session_start(); ?>
<html lang="kr">
<head>
<link rel="stylesheet" href="./style.css">
<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" placeholder="Name"required></p>
<p><input type="text" name="join_id" placeholder="ID"required></p>
<p><input type="password" name="join_pw" placeholder="password" 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>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', 'root', 'aa', 'logindb');
//신규 회원정보 삽입 + ID 재정렬
$multi = "
INSERT INTO login(login_id, login_pw, name) VALUES ('{$join_id}', '{$join_pw}','{$join_name}');
SET @COUNT = 0;
UPDATE member SET id = @COUNT:=@COUNT+1;
";
//login_ok.php와 동일한 내용
$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);
}
?>
//새로고침 후 contetn가 0 이면 main.php로 이동한다는 의미
<meta http-equiv="refresh" content="0;url=main.php">'Web > Web 개발' 카테고리의 다른 글
| [php] 언어 정리 (0) | 2022.04.19 |
|---|---|
| JS, php언어 공부 (0) | 2022.04.18 |
| Hash 란? (0) | 2022.04.05 |
| [web] mysql database 및 table 만들기 (0) | 2022.03.31 |
| web 로그인 페이지 만들기 프로젝트 1 (0) | 2022.03.30 |