지금까지 아파치 설치 및 데이터베이스 연동, ssl/tls, 가상호스트 등을 생성을 하는 작업을 진행하였습니다.
형태는 없고 서버만 만든거라 이번에는 로그인 페이지를 구현할려고 합니다.
사전 작업이 안되어 있으신 분들은 위에 하이퍼 링크를 참고해주시면 감사합니다.
html, css, js 등 기본적인 웹 구현에 필요한 언어의 이해가 필요한 글입니다.
포스팅 목차
로그인 웹 페이지 구축 단계
1. 기본 디렉토리 생성
css
- 웹페이지의 스타일시트 파일들을 저장
- 디자인, 레이아웃 관련 코드를 분리하여 관리
js
- 자바스크립트 파일들을 저장
- 웹페이지의 동적인 기능을 담당하는 코드 관리
images
- 웹사이트에서 사용되는 이미지 파일들을 저장
- 로고, 아이콘, 배경 이미지 등을 관리
auth
- 로그인, 회원가입 등 사용자 인증 관련 파일들을 저장
- 보안 관련 코드를 분리하여 관리
# 웹 루트 디렉토리로 이동
cd /var/www/html
# 필요한 디렉토리 생성
mkdir css js images
mkdir auth # 인증 관련 파일들을 저장할 디렉토리2. 메인 로그인 페이지 (index.php)
메인 로그인 페이지 php를 우선 구현합니다.
nano /var/www/html/index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login-container">
<h2>로그인</h2>
<form action="auth/login_process.php" method="POST">
<div class="form-group">
<input type="text" name="username" placeholder="아이디" required>
</div>
<div class="form-group">
<input type="password" name="password" placeholder="비밀번호" required>
</div>
<div class="form-group">
<button type="submit">로그인</button>
</div>
</form>
<div class="links">
<a href="auth/register.php">회원가입</a>
<a href="auth/find_id.php">아이디 찾기</a>
<a href="auth/find_password.php">비밀번호 찾기</a>
</div>
</div>
</body>
</html>3. CSS 스타일 (css/style.css)
css 스타일 구현.
nano /var/www/html/css/style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.links {
margin-top: 15px;
text-align: center;
}
.links a {
color: #666;
text-decoration: none;
margin: 0 10px;
font-size: 14px;
}
.links a:hover {
color: #333;
}4. 데이터베이스 사용자 생성 및 데이터베이스 생성
데이터베이스의 사용자와 데이터베이스 생성을 진행합니다.
포스팅 제목과 포스팅 내용을 가독성을 높이기 위해 데이터베이스 이름을 “login_db”로 생성하였지만 추후 사용 예정이나 프로젝트로 활용하시는 분들은 데이터베이스 이름을 환경에 맞게끔 설정을 해주세요.
CREATE DATABASE login_db;
USE login_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
name VARCHAR(100) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);테이터베이스 생성이 완료가 되면 해당 데이터베이스의 권한을 가진 유저를 생성합니다.
# MariaDB 접속
mysql -u root -p
# MariaDB 데이터베이스 권한 부여
CREATE USER 'webuser'@'localhost' IDENTIFIED BY 'password지정';
GRANT ALL PRIVILEGES ON login_db.* TO 'webuser'@'localhost';
FLUSH PRIVILEGES;데이터베이스 생성 및 사용자 권한까지 부여가 완료되면 config.php파일을 수정합니다.
nano /var/www/html/config.php
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'webuser'); // 생성한 사용자 이름
define('DB_PASS', 'password'); // webuser의 비밀번호
define('DB_NAME', 'login_db'); // 데이터베이스 이름
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>5. 권한 설정
# 파일 권한 설정
chown -R apache:apache /var/www/html
chmod -R 755 /var/www/html6. Apache 설정 확인
# Apache 설정에서 DirectoryIndex 확인
sudo nano /etc/httpd/conf/httpd.conf
# 다음 라인이 있는지 확인
DirectoryIndex index.php index.html설정이 완료되면 http://IP로 접근을 하여 최종 확인.
