<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
body {
display: flex; /* 내부 요소를 정렬할 수 있게 함(기본 정렬 방식 대신 유연한 배치가 가능해짐) */
justify-content: center; /* 가로 방향 가운데 정렬*/
align-items: center; /* 세로 방향 가운데 정렬*/
height: 100vh; /* 화면 전체 높이
100vh는 화면 높이의 100%를 의미함 → 페이지 전체를 꽉 채워서 가운데 배치 가능 */
margin: 0; /*기본 브라우저 여백을 없애서 딱 맞게 배치*/
background-color: #f0f2f5;
}
.container {
text-align: center;
padding: 40px; /*박스 안쪽 여백을 40픽셀로 설정해서 넉넉한 공간 확보*/
border-radius: 12px; /* 박스 모서리를 둥글게*/
}
img {
width: 500px; /*이미지 가로 너비를 500픽셀로 고정한다*/
border-radius: 12px; /* 이미지 모서리를 둥글게*/
margin-bottom: 20px; /* 이미지 아래쪽 공간에 20px 추가해서 폼 사이의 여백 추가*/
}
</style>
</head>
<body>
<div class="container">
<!-- src 이미지를 가져오는데 만약 못불러올 경우 alt 내용을 출력하고 사진의 크기는 500으로 가져와라 -->
<img src="search.pstatic.jpeg" alt="Login Banner" width="500" />
<form method="POST" action="login_prcc.php">
<!-- 서버에서 name 또는 value 이름으로 값을 받을 수 있음, placeholder는 입력창에 흐리게 표시되는 글자 역할-->
<input type="text" name="id" placeholder="User ID" />
<input type="password" name="password" placeholder="User Password" />
<input type="submit" value="Login" />
<input type="submit" name="login_type" value="식별/인증 동시" style="padding: 20px;"/>
<input type="submit" name="login_type" value="식별/인증 분리" style="padding: 20px;"/>
<input type="submit" name="login_type" value="식별/인증 동시 + 해시" style="padding: 20px;"/>
<input type="submit" name="login_type" value="식별/인증 분리 + 해시" style="padding: 20px;"/>
</form>
<form method="POST" action="register.php" style="padding-top: 20px;">
<input type="submit" value="회원가입" />
</form>
</div>
</body>
</html>
~
~
login_prcc.php
$_SERVER["REQUEST_METHOD"]
$_SERVER는 PHP에서 제공하는 슈퍼 글로벌 변수 중 하나예요.
→ 이건 서버와 클라이언트(브라우저) 사이에 오가는 요청 정보, 환경 정보, 헤더 정보 등을 담고 있는 연관 배열이에요.
<?php
session_start();
// DB 연결
$conn = new mysqli("localhost:3306", "choyongyeop", "1234", "test");
if ($conn->connect_error) {
die("DB 연결 실패: " . $conn->connect_error);
}
// POST 방식으로 전송된 요청일 때만 실행됨
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['login_type'])) {
$type = $_POST["login_type"];
switch ($type) {
case "식별/인증 동시":
if(isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
$sql = "SELECT * from users where id = '$id' AND password = '$pw' ";
$result = $conn->query($sql);
if ($result && $result->num_rows>0) {
$_SESSION['id'] = $id;
header("Location: login_succ.php");
exit;
}
header("Location: login_fail.php");
exit;
}
break;
case "식별/인증 분리":
if (isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
// 1단계: ID가 존재하는지 확인
$sql = "SELECT * FROM users WHERE id = '$id'";
$result = $conn->query($sql);
if ($result && $result->num_rows > 0) {
$user = $result->fetch_assoc();
// 2단계: PW가 같은지 확인 (해시 사용 안 하는 버전)
if ($user['password'] === $pw) {
$_SESSION['id'] = $id;
header("Location: login_succ.php");
exit;
}
}
header("Location: login_fail.php");
exit;
}
break;
case "식별/인증 동시 + 해시":
if(isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
$sql = "SELECT * from users where id = '$id' ";
$result = $conn->query($sql);
if ($result && $result->num_rows>0) {
$user = $result->fetch_assoc();
if (password_verify($pw, $user['password'])) {
$_SESSION['id'] = $id;
header("Location: login_succ.php");
exit;
}
}
header("Location: login_fail.php");
exit;
}
break;
case "식별/인증 분리 + 해시" :
if(isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
$sql = "SELECT * from users where id = '$id'";
$result = $conn->query($sql);
if ($result && $result->num_rows>0) {
$user = $result->fetch_assoc();
if (password_verify($pw, $user['password'])) {
$_SESSION['id'] = $id;
header("Location: login_succ.php");
exit;
}
}
header("Location: login_fail.php");
exit;
}
break;
default :
echo "알 수 없는 로그인 방식입니다.";
}
}
// 폼이 제출되었을 때만 처리
// 사용자의 id 값과 password 값이 존재할 경우, 전달된 값을 id와pw에 변수에 저장한다.
if (isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
// DB에서 해당 ID의 사용자 정보 조회
$sql = "SELECT * FROM users WHERE id = '$id'";
$result = $conn->query($sql); // 위에서 만든 sql쿼리를 실제로 mysql에 실행하는 부분
if ($result->num_rows > 0) { // 사용자가 입력한 아이디가 DB에 존재하면 실행
$user = $result->fetch_assoc(); // DB 결과를 배열로 가져오기
// 비밀번호 확인
if (password_verify($pw, $user['password'])) {
$_SESSION['id'] = $id; // 세션 저장
header("Location: login_succ.php"); // 로그인 성공
exit;
} else {
header("Location: login_fail.php"); // 비밀번호 틀림
exit;
}
}
}
?>
~
→ name, score, pass 컬럼에 각각 ‘Alice’, ‘90’, ‘Pass’ 값을 추가
⚠️ idx는 Auto Increment로 자동 증가되므로 따로 넣지 않아도 됨!
컬럼이름을 *(전체)로 넣을때는 아래와 같이 적지 않고 바로 value로 넘어간다.
✅ 정교한 SELECT 문 -WHERE조건 사용
SELECT [컬럼명] FROM [테이블명] WHERE [조건];
📌 조건이 하나일 때
SELECT * FROM score_table WHERE name = 'normaltic';
📌 조건이 여러 개일 때
AND:모든 조건이 참일 경우
SELECT * FROM score_table WHERE name = 'normaltic' AND pass = 'Pass';
OR:하나라도 조건이 참이면
SELECT * FROM score_table WHERE name = 'normaltic' OR pass = 'Pass';
✅ PHP - MySQL 연동 예제 (db_test.php)
<?php
// 데이터베이스 접속 정보 정의
define('DB_SERVER', 'localhost'); // DB 서버 주소
define('DB_USERNAME', 'admin'); // DB 아이디
define('DB_PASSWORD', 'admin1234'); // DB 비밀번호
define('DB_NAME', 'test'); // 사용할 DB 이름
// DB 연결 시도
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// 연결 확인
if ($db_conn === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
} else {
echo "DB 연결 성공!";
}
?>
db_conn 이라는 변수에 넣어 mysqli_connect를 통해서 mysql과 연동하겠다.
if 만약 db_conn 변수가 연결이 되면 OK, 아닐경우, Fail 문구가 나오게 해라
sql 이라는 변수 안에 select를 통해 test_table 속 전체를 보여줘라
그 결과를 result에 담아라
MySQL 결과 중에서 맨 위의 하나의 행만 가져오는 방법으로 mysqli_fetch_array() 또는 mysqli_fetch_assoc()을 사용합니다.
[3] 로그인 페이지 이쁘게 만들기 (CSS / Bootstrap) 둘 중 하나를 공부해야함
✅ 로그인 페이지 만들기
login.php
<?php
session_start();
// DB 연결
$conn = new mysqli("localhost:3306", "choyongyeop", "1234", "test");
if ($conn->connect_error) {
die("DB 연결 실패: " . $conn->connect_error);
}
// 폼이 제출되었을 때만 처리
// 사용자의 id 값과 password 값이 존재할 경우, 전달된 값을 id와pw에 변수에 저장한다.
if (isset($_POST['id']) && isset($_POST['password'])) {
$id = $_POST['id'];
$pw = $_POST['password'];
// DB에서 해당 ID의 사용자 정보 조회
$sql = "SELECT * FROM users WHERE id = '$id'";
$result = $conn->query($sql); // 위에서 만든 sql쿼리를 실제로 mysql에 실행하는 부분
if ($result && $result->num_rows > 0) { // 사용자가 입력한 아이디가 DB에 존재하면 실행
$user = $result->fetch_assoc(); // DB 결과를 배열로 가져오기
// 비밀번호 확인
if (password_verify($pw, $user['password'])) {
$_SESSION['id'] = $id; // 세션 저장
header("Location: login_prcc.php"); // 로그인 성공
exit;
} else {
header("Location: login_fail.php"); // 비밀번호 틀림
exit;
}
} else {
header("Location: login_fail.php"); // ID가 없음
exit;
}
}
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
body {
display: flex; /* 내부 요소를 정렬할 수 있게 함(기본 정렬 방식 대신 유연한 배치가 가능해짐) */
justify-content: center; /* 가로 방향 가운데 정렬*/
align-items: center; /* 세로 방향 가운데 정렬*/
height: 100vh; /* 화면 전체 높이
100vh는 화면 높이의 100%를 의미함 → 페이지 전체를 꽉 채워서 가운데 배치 가능 */
margin: 0; /*기본 브라우저 여백을 없애서 딱 맞게 배치*/
background-color: #f0f2f5;
}
.container {
text-align: center;
padding: 40px; /*박스 안쪽 여백을 40픽셀로 설정해서 넉넉한 공간 확보*/
border-radius: 12px; /* 박스 모서리를 둥글게*/
}
img {
width: 500px; /*이미지 가로 너비를 500픽셀로 고정한다*/
border-radius: 12px; /* 이미지 모서리를 둥글게*/
margin-bottom: 20px; /* 이미지 아래쪽 공간에 20px 추가해서 폼 사이의 여백 추가*/
}
</style>
</head>
<body>
<div class="container">
<!-- src 이미지를 가져오는데 만약 못불러올 경우 alt 내용을 출력하고 사진의 크기는 500으로 가져와라 -->
<img src="search.pstatic.jpeg" alt="Login Banner" width="500" />
<form method="POST">
<!-- 서버에서 name 또는 value 이름으로 값을 받을 수 있음, placeholder는 입력창에 흐리게 표시되는 글자 역할-->
<input type="text" name="id" placeholder="User ID" />
<input type="password" name="password" placeholder="User Password" />
<input type="submit" value="Login" />
</form>
<form action="register.php" method="POST" style="padding-top: 20px;">
<input type="submit" value="회원가입" />
</form>
</div>
</body>
</html>
login_prcc.php
<?php
session_start(); //세션 시작
if (!isset($_SESSION['id'])) {
echo "<h1>세션이 만료되었거나 로그인하지 않았습니다.</h1>";
exit;
}
$id = htmlspecialchars($_SESSION['id']);
echo "<h1>$id 님, 로그인에 성공했습니다 🎉</h1>";
// 학생 이름이 GET으로 전달되었을 때만 실행
if (isset($_GET['name'])) {
$name = $_GET['name'];
// DB 연결 정보 (내 DB 환경에 맞게 수정!)
$host = "localhost:3306";
$user = "choyongyeop";
$pass = "1234"; // ← 너의 MySQL 비밀번호로 변경
$dbname = "test"; // ← 너가 만든 DB 이름
// DB 연결
$conn = new mysqli($host, $user, $pass, $dbname);
// 연결 확인
if($conn){
echo "DB Connect OK";
}else{
echo "DB Connect Fail";
}
// 학생 점수 조회 쿼리
$sql = "select score from test_table where name = '$name' ";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result); // 조회된 데이터 가져오기
$score = $row['score']; // 점수 값을 변수로 꺼냄
// 결과 확인
if($result) {
echo "<h2>{$name} 학생의 점수는 {$score}점 입니다. </h2>";
}else{
echo "<h2>{$name} 학생의 점수를 찾을 수 없습니다. </h2>";
}
}
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 성공</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /*현재 브라우저 화면 높이를 꽉 채움(세로 전체) */
margin: 0;
font-family: 'Segoe UI', sans-serif; /*첫번째가 없을 경우 빽업용 글씨 sans-serif로 대체함 */
background-color: #f0f2f5;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
color: #333;
}
</style>
</head>
