로그인 페이지 구현의 목적
- Web에 대한 이해
- HTML, PHP, MYSQL(DB)의 구성(역할) 이해
- 각 기술의 문법 학습
- SQL Injection 실습
입문자가 이해하기 쉽도록 보안 구조를 배제하고 간결한 형식으로 이루어져 있습니다.
따라서 다음 코드는 보안상 취약한 방식으로 작성되었습니다.
(기본 환경)
- XAMPP를 통해 Apache와 MySQL 서버를 로컬에서 구동
- VS Code(Visual Studio Code)를 코드 편집
로그인 페이지 구성
1) login.html
- <meta charset="UTF-8"> : 웹 페이지의 기본 언어를 영어(en)로 설정
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 브라우저의 뷰포트(viewport)를 설정하는 역할- width=device-width: 기기의 화면 너비에 맞춰 웹페이지 너비를 설정
- initial-scale=1.0: 페이지 로딩 시 기본 확대 비율을 1로 설정해 모바일에서도 자연스럽게 보이도록 설정
- <tittle></tittle> : 문서의 제목을 정의(웹 페이지 제목)
- <h2></h2> : 문서에서 제목을 정의(로그인 페이지 제목)
- <form></form> : 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의
- <form> action 속성: 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시
- POST: 요청 메소드, 서버에 데이터 전송
- <input></input> : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의
- <input> type 속성: <input> 요소가 나타낼 타입을 명시, 기본값은 “text”
- <input> name 속성: <input> 요소의 이름을 명시,
2) logn.php
- mysqli_connect("DB 서버 주소", "DB 사용자명", "DB 비밀번호", "DB 서버 이름");
- mysqli_connect: PHP에서 MYSQL을 연결하는 함수
- $_POST['username'] / $_POST['password'];
- $_POST: HTML 폼이 POST 방식으로 전송될 때 서버가 해당 입력값을 받는 변수
- $query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
- SELECT * FROM users: users 테이블 속 모든 열/컬럼(*)을 조회(SELECT)함
- WHERE username='$username' AND password='$password;'
- $username, $password: 사용자 입력값이 들어감
- $result=mysqli_query($login_db, $query);
- $query를 $login_db를 통해 실행
- mysqli_query(연결, 쿼리문)
- 연결 : 데이터베이스 접속을 나타내는 객체 ($login_db)
- 쿼리문 : 실행할 SQL 코드 ($query)
- $row = mysqli_fetch_assoc($result);
- $result에서 한 행(row)의 데이터를 연관 배열 형태로 가져옴
- mysqli_fetch_assoc(): 결과에서 한 줄을 가져옴, 컬럼명을 키(key)로 하는 배열
- error_log("ID: " . $row['id']);
- 로그인 시 얻은 사용자 정보를 서버의 에러 로그에 기록하는 코드
- error_log(): 서버의 에러 로그 파일에 문자열을 출력하는 함수
- <a></a>: 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의
- <a> href 속성: 링크된 페이지의 URL을 명시
- <br> : 줄바꿈을 정의
3) MYSQL(DB)
- create: 생성
- id int auto_increment primary key
- 데이터를 고유하게 식별할 수 있는 번호를 자동으로 부여
- auto_increment: 새 행을 추가할 때 자동으로 숫자를 1씩 증가시켜 넣어줌
- primary key: 기본 키 역할, 각 행을 고유하게 구분하는 컬럼, 중복 값 허용 X
- 컬럼 VARCHAR (글자수)
- 문자형 데이터 타입
- username VARCHAR(50): username은 최대 50글자의 문자형 데이터로 저장 가능
- password VARCHAR(100): password는 최대 100글자의 문자형 데이터로 저장 가능
- INSERT INTO 테이블명 (컬럼1, 컬럼2, ...) VALUES (값1, 값2, ...);
- 테이블에 새로운 레코드를 추가
- INSERT INTO users (username, password) VALUES ('username1', '123');
로그인 페이지 실행
(사용자 이름: username1, 비밀번호: 123 입력)
