R's Hacking Daily Log

php - Mini Project 1 - (1) 본문

PHP

php - Mini Project 1 - (1)

hanhxx 2023. 7. 30. 18:10

[ Mini Project ]

이번에 해볼 것은 간단한 웹 페이지 만들기로 전체적인 흐름은 다음과 같다. 

 

1) index.php 

로그인 form이 있는 메인 페이지이다.

index.php에 존재하는 옵션은 두 가지, 회원 가입 or 로그인이다. 

 

 

2) 로그인을 시도한 경우

데이터베이스에 있는 정보와 비교해 계정 정보가 검증되면 member list를 확인할 수 있는 페이지로 이동한다.

또한 회원 정보를 수정할 수 있는 옵션과 로그아웃 기능이 제공된다.

 

2-1) 회원 정보를 수정할 경우

수정할 정보를 입력한 뒤 서버로 전달하면 데이터베이스에 해당 내용이 업데이트된다. 

 

2-2) 로그아웃을 시도한 경우 

로그아웃 버튼을 누르면 사용했던 세션 정보를 모두 파기하고 로그인을 종료한다. 

 

 

3) 회원가입을 시도한 경우

사용자 정보를 입력받아 데이터베이스에 저장한다. 

이때 이미 사용중인 ID가 없는지 확인하는 절차 등이 포함될 것 

 

첫 번째로 만들 페이지는 index.php이다. 

index.html처럼 웹 사이트에 방문했을 때, 메인 화면으로 출력되는 페이지를 의미한다. 

 

 

[ index.php ]

<?php
include("./dbconn.php");
?>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Login</title>
</head>
<body>
    <div class="container">
        <h4 class="display-4 text-center"/>LOGIN</h4>
        <form action="./login_check.php" method="post">
            <div class="mb-3">
                <label for="mb_id">ID</label>
                <input type="text" id="mb_id" name="mb_id" class="form-control">
            </div>
            <div class="mb-3">
                <label for="mb_password">PASSWORD</label>
                <input type="password" id="mb_password" name="mb_password" class="form-control">
            </div>
    
            <button type="submit" class="btn btn-primary">LOGIN</button>
            <a href="./register.php" class="btn btn-secondary">REGISTER</a>
        </form>
    </div>
</body>
</html>

index.php의 전체 code는 위와 같다. 코드 설명을 하기 전에 완성된 페이지를 먼저 확인해 보자!!

 

 

index.php는 페이지 중앙에 로그인 form이 제공되는 페이지로

 

결과 화면에서 알 수 있듯

(1) ID & PASSWORD를 입력받은 input이 있고

(2) LOGIN & REGISTER 기능을 제공하는 버튼이 각각 만들어져 있는 모습이다.

 

그렇다면 이제, 위와 같은 페이지를 만들기 위해서 어떤 코드가 작성되었는지 하나씩 살펴보자!!

 

[ 코드 설명 ]

<?php
include("./dbconn.php");
?>

 

include() 함수로 데이터베이스에 연결하는 부분만 따로 구현해 둔 파일을 불러온다.

 

회원 정보를 확인, 수정하는 과정에서 데이터베이스에 접근해야 하는 데 

이 기능이 필요한 모든 파일에 동일한 내용을 작성하기는 비효율적이기 때문에

하나의 파일로 구현해 두고 include()로 해당 내용을 포함시키는 것이다. 

 

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>Login</title>

head tag 안에 포함된 link & title tag이다.

link tag는 작성 중인 이 파일에 다른 파일을 연결할 때 할 수 있는 tag로 js & css file을 연결할 때 흔하게 사용된다.

 

title tag는 브라우저에서 페이지를 보여줄 때, 해당 페이지의 이름이라고 생각하면 된다. 

 

 

<div class="container">
        <h4 class="display-4 text-center"/>LOGIN</h4>
        <form action="./login_check.php" method="post">
            <div class="mb-3">
                <label for="mb_id">ID</label>
                <input type="text" id="mb_id" name="mb_id" class="form-control">
            </div>
            <div class="mb-3">
                <label for="mb_password">PASSWORD</label>
                <input type="password" id="mb_password" name="mb_password" class="form-control">
            </div>
    
            <button type="submit" class="btn btn-primary">LOGIN</button>
            <a href="./register.php" class="btn btn-secondary">REGISTER</a>
        </form>
    </div>

 

이번엔 body tag 내용을 살펴보자. (다른 건 다 건너뛰고 php와 관련될 부분만 설명할 예정이다.)

 

div안에 들어있는 form tag가 index.php에 주인공이라 할 수 있다.

form tag에는 ID & PASSWORD를 입력받는 input과 버튼이 2개 위치해 있다.

 

 

 

form tag ) 

<form action="./login_check.php" method="post"></form>

method가 post이기 때문에 form으로 전달되는 데이터는 모두 $_POST에 저장되며

type이 submit인 button or input tag를 클릭할 시 login_check.php로 데이터를 전달 & 이동한다. 

 

 

 

input tag )

<div class="mb-3">
	<label for="mb_id">ID</label>
	<input type="text" id="mb_id" name="mb_id" class="form-control">
</div>
<div class="mb-3">
	<label for="mb_password">PASSWORD</label>
	<input type="password" id="mb_password" name="mb_password" class="form-control">
</div>

 

이전 글에서 다뤘듯이 input tag는 다양한 type 값을 가질 수 있다.

그렇다 보니 password를 입력받는 경우에는 type을 password로, id를 입력받는 경우에는 text로 설정해 준다.

 

form으로 전달되는 데이터는 method에 따라 $_POST 또는 $_GET에 저장되는 데

이때 key-value 형태로 데이터를 저장하기 때문에 key 값이 필요하다.

 

이 key 역할을 해주는 속성이 name이라는 것도 이미 앞에서 살펴보았다!

 

나머지 id & class 속성은 css에서 선택자로 사용하여 style을 입히기 위한 값으로

php와는 거리가 있으니 상세히 설명하진 않겠다.

 

 

 

button & a tag )

<button type="submit" class="btn btn-primary">LOGIN</button>
<a href="./register.php" class="btn btn-secondary">REGISTER</a>

마지막으로 버튼 부분을 살펴볼 건데.. 코드를 보면 button tag를 두 개 사용한 게 아니다..!?

LOGIN 버튼은 button tag로 만들어졌고 REGISTER 버튼은 a tag로 만들어졌다.

 

button tag를 먼저 보면 type 속성이 submit이기 때문에 이 버튼을 누르면 form에 입력한 데이터가 

action 속성(login_check.php) 경로로 전달된다는 걸 이제는 알 수 있다!! 

 

a tag는 href 속성에다 register.php 링크를 걸어두었다.

 

따라서 LOGIN 버튼을 클릭하면 ID & PASSWORD가 login_check.php로 전달되면서 다음 과정이 진행되고

REGISTER 버튼을 클릭하면 회원가입을 할 수 있는 페이지로 이동하게 되는 것이다. 

 

 

코드 설명은 여기까지..! 지만 이 시점에서 한 번 고민해 보자!!

 

왜 button tag를 두 개 사용하는 게 아닌, button & a tag를 사용한 것일까?

button tag는 type = submit이기 때문에 form에 입력된 데이터를 action 경로로 전달하는 역할이지만
a tag는 href 경로로 단순히 페이지 이동만을 수행하기 때문에

 

데이터 전달이 필요하지 않은 register page로의 이동은 a tag로 구현한 것이다. 

이런 형태의 버튼 생성은 앞으로 살펴볼 코드에서도 등장할 예정!

 

[ Next ]

이번 글에서는 메인 페이지인 index.php code를 살펴보았다. 

코드를 보면서 눈치챘을 수도 있지만 다음으로 살펴봐야 할 페이지는

(1) 이번 코드에서 include 한 dbconn.php

(2) LOGIN 버튼을 눌렀을 때 동작할 login_check.php

(3) REGISTER 버튼을 눌렀을 때 동작할 register.php

되시겠다!

'PHP' 카테고리의 다른 글

php - Mini Project 1 - (3)  (0) 2023.07.31
php - Mini Project 1 - (2)  (1) 2023.07.31
php - File Upload (3)  (0) 2023.07.26
php - File Upload (2)  (0) 2023.07.25
php - File Upload (1)  (0) 2023.07.25
'PHP' Related Articles more
Comments