R's Hacking Daily Log

php - Mini Project 1 - (6) 본문

PHP

php - Mini Project 1 - (6)

hanhxx 2023. 8. 2. 14:14

[ Mini Project - Last ]

Mini Project (1)부터 지난 글에 걸쳐 메인 페이지 & login & 회원가입 기능을 구현해 보았다!

이번 글에서는 로그인 후 접근할 수 있는 member_list.php를 만들어보고자 한다.

 

member_list.php는 회원 계정을 가지고 있는 회원 리스트가 제공되는 페이지로 

datetime을 기준으로 내림차순 정렬을 할 예정이다. 

 

 

[ member_list.php ]

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

$sql = "SELECT COUNT(*) AS `cnt` FROM member";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$total_count = $row['cnt'];

$sql = "SELECT * FROM member ORDER BY mb_datetime desc";
$result = mysqli_query($conn, $sql);

if(!$_SESSION['ss_mb_id']) {
    echo "<script>alert('You can access this page after login');</script>";
    echo "<script>location.replace('./index.php');</script>";
}
?>

<html>
    <head>
        <title>Member List</title>
        <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">
    </head>
    <body>
        <div class="container">
            <h4 class="display-4 text-center">USER LIST</h4>
            <div class="box">
                <table class="table table-striped">
                    <caption>Totle <?php echo number_format($totle_count)?></caption>
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Job</th>
                            <th>Gender</th>
                            <th>Language</th>
                            <th>Register Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php for($i=0; $row=mysqli_fetch_assoc($result); $i++): ?>
                            <tr>
                                <td><?php echo $i+1?></td>
                                <td><?php echo $row['mb_id']?></td>
                                <td><?php echo $row['mb_name']?></td>
                                <td><?php echo $row['mb_email']?></td>
                                <td><?php echo $row['mb_job']?></td>
                                <td><?php echo $row['mb_gender']?></td>
                                <td><?php echo $row['mb_language']?></td>
                                <td><?php echo $row['mb_datetime']?></td>
                            </tr>
                        <?php endfor; ?>
                        <?php
                        if ($total_count == 0) {
                            echo '<tr><td colspan="8">User not exist</td></tr>';
                        }
                        ?>
                    </tbody>
                </table>

                <a href="./register.php" class="btn btn-primary">Edit info</a>
                <a href="./logout.php" class="btn btn-secondary">LOGOUT</a>
            </div>
        </div>
        <?php 
        mysqli_close($conn);?>
    </body>
</html>

member_list.php 코드는 php & html로 구성되어 있다.

 

php로는 회원 수와 회원 정보를 가져오는 기능을 수행하고

html은 가져온 데이터를 테이블 형태로 보여주는 구조를 형성한다. 

 

 

php ) 

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

$sql = "SELECT COUNT(*) AS `cnt` FROM member";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$total_count = $row['cnt'];

$sql = "SELECT * FROM member ORDER BY mb_datetime desc";
$result = mysqli_query($conn, $sql);

if(!$_SESSION['ss_mb_id']) {
    echo "<script>alert('You can access this page after login');</script>";
    echo "<script>location.replace('./index.php');</script>";
}
?>

member_list.php에서는 데이터베이스 테이블에 있는 정보를 가져와야 하기 때문에 

DB 연결이 필요하다. (= include("./dbconn.php") )

 

 

첫 번째 sql )

html 부분에서 회원 정보를 테이블 형태로 출력해 줄 예정인데

총 몇 개의 행이 존재하는지 알기 위해 member table에 있는 row 개수를 카운트하는 명령어이다. 

 

 

두 번째 sql ) 

총 몇 개의 행이 존재하는 지 파악한 후에는 행 개수만큼 반복하면서 회원 정보를 출력해 줄 것이다.

이때 member 테이블에 존재하는 모든 회원 정보를 datetime 값이 내림 차순인 형태로 가져오는 명령어이다.

 

 

if 문 )

만약 member_list.php에 접근할 때 로그인 된 상태가 아니라면 (= session이 존재하지 않는다면)

접근하지 못하도록 처리한다. (다시 index.php로 이동)

 

 

HTML ) 

<table class="table table-striped">
    <caption>Totle <?php echo number_format($totle_count)?></caption>
    <thead>
        <tr>
            <th>Number</th>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Job</th>
            <th>Gender</th>
            <th>Language</th>
            <th>Register Date</th>
        </tr>
    </thead>
    <tbody>
        <?php for($i=0; $row=mysqli_fetch_assoc($result); $i++): ?>
            <tr>
                <td><?php echo $i+1?></td>
                <td><?php echo $row['mb_id']?></td>
                <td><?php echo $row['mb_name']?></td>
                <td><?php echo $row['mb_email']?></td>
                <td><?php echo $row['mb_job']?></td>
                <td><?php echo $row['mb_gender']?></td>
                <td><?php echo $row['mb_language']?></td>
                <td><?php echo $row['mb_datetime']?></td>
            </tr>
        <?php endfor; ?>
        <?php
        if ($total_count == 0) {
            echo '<tr><td colspan="8">User not exist</td></tr>';
        }
        ?>
    </tbody>
</table>

html 중에서 table을 형성하는 부분이다.

 

 

html tag 중 테이블을 만드는 데 사용되는 태그들이 사용되었다. (table, tr, td, th, tbody, thead)

<caption>Total <?php echo number_format($total_count)?></caption>

우선 php에서 카운트한 행 개수를 테이블 아래에 출력해 준다. 

 

 

<thead>
    <tr>
        <th>Number</th>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Job</th>
        <th>Gender</th>
        <th>Language</th>
        <th>Register Date</th>
    </tr>
</thead>

thead 태그에는 각 column이 어떤 값을 나타내는지 나열하기 위해 사용한다. 

tr은 테이블에 들어가는 하나의 행을 생각하면 되고

 

위의 코드는 아래의 표와 같이 

Number  ID  Name Email Job Gender Language Date
...              
...              

한 줄에(tr) number, id, name, email, job, gender, language, date 값을 나열하고 있는 것이다.

 

 

<tbody>
    <?php for($i=0; $row=mysqli_fetch_assoc($result); $i++): ?>
        <tr>
            <td><?php echo $i+1?></td>
            <td><?php echo $row['mb_id']?></td>
            <td><?php echo $row['mb_name']?></td>
            <td><?php echo $row['mb_email']?></td>
            <td><?php echo $row['mb_job']?></td>
            <td><?php echo $row['mb_gender']?></td>
            <td><?php echo $row['mb_language']?></td>
            <td><?php echo $row['mb_datetime']?></td>
        </tr>
    <?php endfor; ?>
    <?php
    if ($total_count == 0) {
        echo '<tr><td colspan="8">User not exist</td></tr>';
    }
    ?>
</tbody>

hbody 태그는 작성될 실제 값들이 들어가는 공간이다. 

어떤 값이 들어가는지 살펴보면 $result 값을 한 줄(tr)로 작성하는 걸 반복하고 있다. (= for문)

 

여기서 $result는 member table에서 가져온 등록되어 있는 모든 사용자의 정보로

사용자 한 명에 대해서 mb_id, mb_name, mb_email... mb_datetime 값이 존재한다. 

 

 

즉 for문이 한 번 실행될 때마다

Number ID Name Email Job Gender Language Date
1 shark A A's email A's Job A's gender .. ..
               

테이블에 한 줄씩 사용자의 정보가 추가되며

이 과정을 총 회원 수만큼 반복해서 모든 사용자의 정보를 볼 수 있는 테이블이 완성된다. 

 

만약 아무도 회원가입을 하지 않아서 회원 수가 0이라면 ( $total_count == 0 )

테이블을 만들 수 없기 때문에 회원이 존재하지 않는다는 문구만 출력한다. 

 

 

<a href="./register.php" class="btn btn-primary">Edit info</a>
<a href="./logout.php" class="btn btn-secondary">LOGOUT</a>

member_list.php에는 두 가지 버튼이 존재하는 데

하나는 이전 글에서 이미 언급했던 정보 수정 버튼이고 하나는 로그아웃 버튼이다.

 

member_list.php에는 로그인을 해야지만 접근이 가능하기 때문에 이 페이지에 접근한 사용자는 모두 로그인된 상태이다.

따라서 로그아웃 기능도 제공할 필요성이 있다!

 

Edit info 버튼은 회원 정보를 수정하기 위한 기능을 제공하기 때문에 register.php로 이동하게 되고

index.php에서 REGISTER 버튼으로 접근하는 경우와 다른 점은 

 

 

(1) ID 값을 수정하지 못하도록 readonly 처리되었다는 점과

(2) 회원 가입 시 입력했던 정보가 미리 input에 작성되어 있다는 점이다.

 

 

<?php 
mysqli_close($conn);?>

마지막으로 회원 정보를 모두 가져와 출력한 후에는 DB와의 연결을 종료시켜 준다. 

 

[ 결과 화면 ]

이전에 만들어둔 계정으로 로그인하면 User List가 출력되는 걸 볼 수 있다.

현재 시점에서는 딱 하나의 계정만 만들었기 때문에 shark Bob의 계정만 나오는 상태이다!

 

caption tag로 총 몇 명의 정보가 출력되는지 알려주는 "Total 1" 문구도 볼 수 있고

하단에는 Edit & LOGOUT 버튼이 위치해 있는 것도 확인할 수 있다.

 

여기서 Edit info 버튼을 클릭하면 위에서 확인했던 사진처럼 

회원 정보가 일부 기입된 form이 출력된다.

만약 정보를 수정하고 싶다면 form을 작성한 뒤 EDIT info 버튼을 누르면 된다.

 

 

 

회원 정보를 수정할 경우, 작성되어야 하는 5가지 값을 모두 입력해야 정상적으로 처리된다는 걸 잊지 말자!

위와 같이 form을 작성하고 EDIT info 버튼을 눌러주면 

 

 

정상적으로 정보 수정이 끝났다는 팝업 창이 뜨고

 

 

member_list.php로 이동하는 데 회원 정보를 보면 

Edit form에서 입력한 값으로 수정된 것을 확인할 수 있다!

 

이젠 마지막 step으로 logout.php만 구현하면 Mini Project가 마무리된다!!!

 

[ Next ]

(1) dbconn.php - 완료!

(2) login_check.php - 완료!

(3) register.php - 완료!

(4) member_list.php - 완료!

(5) register_update.php - 완료!

(6) logout.php

'PHP' 카테고리의 다른 글

php - Mini Project 2 - (1)  (0) 2023.08.04
php - Mini Project 1 - (7)  (0) 2023.08.02
php - Mini Project 1 - (5)  (0) 2023.08.02
php - Mini Project 1 - (4)  (0) 2023.08.01
php - Mini Project 1 - (3)  (0) 2023.07.31
'PHP' Related Articles more
Comments