R's Hacking Daily Log

php - Mini Project 2 - (2) 본문

PHP

php - Mini Project 2 - (2)

hanhxx 2023. 8. 4. 15:29

[ Mini Project ]

이번 포스트에서 살펴볼 내용은 To Do List를 구현하기 위해 필요한 메인 페이지 index.php이다. 

바로 코드부터 살펴보자!

 

 

[ index.php ]

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

$sql = "SELECT * FROM todo ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
?>

<html>
    <head>
        <title>To-Do List</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="toDo" class="container">
            <div class="row justify-content-sm-center">
                <div class="col-sm-5">
                    <form action="./app/add.php" method="POST" class="add_section">
                        <div class="card">
                            <h2 class="card-header text-center">To Do List</h2>
                            <div class="gw-example">
                                <div class="form-group">
                                    <input type="text" name="title" class="form-control" placeholder="Enter Your Duty">
                                </div>
                                <div class="d-grid margin-top-2">
                                    <button type="submit" class="btn btn-primary">ADD</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            <div class="row justify-content-sm-center">
                <div class="col-sm-5">
                    <section class="show_todo_section margin-top-2">
                        <?php if(mysqli_num_rows($result) <= 0) { ?>
                            <div class="card gw-example">
                                <div class="card-body box-shadow border-radius-1">
                                    There is No To Do List
                                </div>
                            </div>
                        <?php } ?>

                        <?php while ($row = mysqli_fetch_assoc($result)): ?>
                            <div class="card-body card">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <div class="form-check">
                                            <input 
                                                type="checkbox" 
                                                class="form-check-input" 
                                                onclick="location.href='./app/check.php?id=<?php echo $row['id'] ?>'"
                                                <?php echo $row['checked'] ? 'checked' : '' ?> >
                                        </div>
                                        <h5 class="<?php echo $row['checked'] ? 'gw-checked' : '' ?>">
                                            <?php echo $row['title'] ?>
                                        </h5>
                                    </div>
                                    <a href="./app/remove.php?id=<?php echo $row['id'] ?>" class="btn btn-outline-secondary btn-sm">DELETE</a>
                                </div>
                                <small>Added Date : <?php echo $row['date_time'] ?></small>
                            </div>
                        <?php endwhile; ?>
                    </section>
                </div>
            </div>

        </div>
    </body>
</html>

index.php는 to do list 추가 & 사용자가 추가한 to do list를 출력하는 페이지로

 

추가된 list가 없는 경우에는 "There is No To Do List"를 출력하고

list가 존재하는 경우에는 순서대로 list 내용을 출력한다.

 

내용을 출력하는 방식은 간단하다.

(1) DB에 접근해 테이블에 저장되어 있는 할 일 목록을 모조리 가져온다.

(2) while문을 돌면서 각 row 값을 예쁘게 포장해 페이지에 출력시킨다.

 

(1)번 역할을 php가, (2)번 역할을 html이 해준다고 보면 된다. 

 

 

[ php ]

우선 php부터 살펴보자.

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

$sql = "SELECT * FROM todo ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
?>

to do list를 사용자로부터 입력받으면 DB에 내용을 저장하고 

저장된 내용을 가져와 출력하는 것이기 때문에 DB와 연결이 필요하다.

 

따라서 코드 상단에 DB 연결을 수행하는 코드를 include 시켜준다.

 

 

위에서도 말했지만 php의 역할은 DB에 들어있는 to do list 내용을 모두 가져오는 것이다.

이 기능을 수행하기 위해 아래와 같은 sql문을 실행해 준다.

"SELECT * FROM todo ORDER BY id DESC";

sql문의 의미는 "todo table에 들어있는 모든 row를 가져오고 id 값을 기준으로 내림차순 정렬해!"이다.

sql의 결과는 $result에 넣고 DB와의 연결은 종료한다. 

 

 

여기까지의 내용을 보면,

사용자가 list를 추가한 경우 )

사용자가 입력한 list를 모두 가져와 $result에 넣어둔 상태!

 

사용자가 list를 추가하지 않은 경우 )

$result는 텅텅 비어있는 상태!

 

크게 두 가지 경우로 나누어지지만 어찌 됐든 메인 페이지에서는 어떤 내용이라도 출력해야 한다. 

이를 어떻게 구현했는지 HTML을 보면 해결될 것이다!

 

 

[ dbconn.php ]

<?php
$mysql_host = 'localhost';
$mysql_user = 'root';
$mysql_password = 'root씨 비밀번호';
$mysql_db = "project";

$conn = mysqli_connect($mysql_host, $mysql_user, $mysql_password, $mysql_db);

if(!$conn) {
    die("fail to connection: ".mysqli_connect_error());
}

ini_set('display_errors', 'Off');

함수 include()로 불러온 코드는 위와 같다. 코드 설명은 project 1에서 했기 때문에 여기서는 생략한다. 

 

 

[ HTML ]

html은 DB에서 가져온 데이터를 사용자에게 출력시켜 주는 역할을 한다.

 

이때 출력되는 요소는 아래와 같이 구성된다. 

(1) 사용자가 입력한 to do list 내용 

(2) check box : 완료 여부를 표시하는 기능 

(3) 사용자가 to do list를 작성한 시간

(4) delete 버튼 

 

 

HTML은 크게 나눠보면 class = row justify-content-sm-center인 div tag가 두 개인데

첫 번째 div는 to do list를 입력할 form을 구현하고

두 번째 div는 작성된 목록들을 보여주는 부분의 코드를 담는다.

 

 

우선 첫 번째 div부터 살펴보자.

<div class="row justify-content-sm-center">
    <div class="col-sm-5">
        <form action="./app/add.php" method="POST" class="add_section">
            <div class="card">
                <h2 class="card-header text-center">To Do List</h2>
                <div class="gw-example">
                    <div class="form-group">
                        <input type="text" name="title" class="form-control" placeholder="Enter Your Duty">
                    </div>
                    <div class="d-grid margin-top-2">
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

div tag가 굉장히 많이 사용되었지만 이는 html 용도 상 element의 구조를 잡기 위함이다.

이 부분에 대해서는 일일이 설명하지 않을 예정이다. 

 

 

form tag ) 

<form action="./app/add.php" method="POST" class="add_section">

 

form에 입력된 데이터는 POST 방식으로 ./app/add.php에 전달될 것이다.

이는 데이터를 저장하기 위한 과정 중 하나로 add.php를 구현해야 한다는 걸 눈치챌 수 있다.

 

 

h2 tag ) 

<h2 class="card-header text-center">To Do List</h2>

 

To Do list 문구를 출력하는 역할이다.

 

 

input tag ) 

<input type="text" name="title" class="form-control" placeholder="Enter Your Duty">

실제 입력을 받는 부분으로, name = title이니 사용자가 입력하는 값은 $_POST['title']로 저장될 것이다.

 

placeholder는 입력란에 띄워줄 문구를 지정하는 속성이다. 

사용자가 어떤 값을 입력하면 바로 사라지기 때문에 무엇을 입력해야 하는지 알려주는 용도로 사용할 수 있다.

 


button tag ) 

<button type="submit" class="btn btn-primary">ADD</button>

 

ADD 버튼을 누르면 button tag를 감싸는 form tag의 action 경로로 데이터를 보낸다. 

 


이때 전달되는 데이터는 input tag에 입력된 값이고 즉

버튼이 "데이터를 전달한다"는 이벤트를 발생시키는 역할을 한다고 할 수 있다.

 

 

지금까지 첫 번째 div 안에 구성된 내용을 살펴보았다.

코드를 보면 알 수 있듯이 to do list를 추가하기 위해서는 add.php가 필요하며

input에 입력된 값은 $_POST에 저장된다는 걸 기억하자.

 

 

이번엔 두 번째 div tag를 살펴보자!

 

section tag ) 

<section class="show_todo_section margin-top-2">
...
</section>

 

class = show_todo_section인 것을 보아 이 tag안에 todo list가 출력할 것이라 예상할 수 있다.

 

 

<?php ?> tag )

php로 데이터베이스 내용을 가져왔으니 이젠 출력해 줄 차례이다.

이때 확인해봐야 하는 게 있다면 바로 row의 개수!

 

<?php if(mysqli_num_rows($result) <= 0) { ?>
    <div class="card gw-example">
        <div class="card-body box-shadow border-radius-1">
            There is No To Do List
        </div>
    </div>
<?php } ?>

만약 row의 개수가 0보다 작거나 같다면 (= 등록된 할 일 목록이 없으면 )
"There is No To Do List"문구를 출력한다.

 

 

<?php while ($row = mysqli_fetch_assoc($result)): ?>
    <div class="card-body card">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <div class="form-check">
                    <input 
                        type="checkbox" 
                        class="form-check-input" 
                        onclick="location.href='./app/check.php?id=<?php echo $row['id'] ?>'"
                        <?php echo $row['checked'] ? 'checked' : '' ?> >
                </div>
                <h5 class="<?php echo $row['checked'] ? 'gw-checked' : '' ?>">
                    <?php echo $row['title'] ?>
                </h5>
            </div>
            <a href="./app/remove.php?id=<?php echo $row['id'] ?>" class="btn btn-outline-secondary btn-sm">DELETE</a>
        </div>
        <small>Added Date : <?php echo $row['date_time'] ?></small>
    </div>
<?php endwhile; ?>

만약 row의 개수가 0보다 작거나 같지 않다면 (= 한 개라도 등록된 할 일 목록이 있다면)

while문을 실행한다.

 

while문에 전달된 $row는 $result를 연관 배열 형태로 가져온 것으로 한 번 while문이 실행될 때마다

하나의 row에 대해 동작한다. 

 


(1) 첫 번째 row에 대해 while문 내용을 실행하고 

(2) 다음 row가 있다면 다음 row를 대상으로 같은 동작을 실행하고,
(3) 또 그다음 row가 있다면 또 실행하고.. 반복하다가

(4) 다음 row가 없다면 while문 조건에서 빠져나온다.

 

 

input tag ) type = checkbox 

<input 
    type="checkbox" 
    class="form-check-input" 
    onclick="location.href='./app/check.php?id=<?php echo $row['id'] ?>'"
    <?php echo $row['checked'] ? 'checked' : '' ?> >

onclick : 이 input을 클릭했을 때 동작할 내용을 의미한다.

location.href를 통해 check.php에 클릭된 목록의 아이디를 전달하는 걸 볼 수 있다.

 

그렇다면 check.php는 해당 id 값을 활용해 어떤 동작을 수행할 것으로 예상된다. 

 

 

h5 tag )

<h5 class="<?php echo $row['checked'] ? 'gw-checked' : '' ?>">
    <?php echo $row['title'] ?>
</h5>

checkbox가 체크되었다면 클래스를 gw-checked로, 아니라면 공백 처리한다.

이는 클래스가 달라짐에 따라 css를 다르게 처리되게 하기 위함이다.

(checkbox를 클릭하면 to do list 내용을 통과하는 line이 생겨난다.)

 

여기서 h5로 출력하고 있는 내용은( $row['title'] )

사용자가 입력한 to do list 값이다. 

 

 

a tag ) 

<a href="./app/remove.php?id=<?php echo $row['id'] ?>" class="btn btn-outline-secondary btn-sm">DELETE</a>

사용자가 입력한 to do list를 삭제하는 용도의 버튼 역할을 한다.

href 값을 보면 삭제할 목록의 id를 GET method로 remove.php에 전달하는 걸 알 수 있다.

 

또한 이 기능을 완료하기 위해서는 remove.php도 작성해야 할 것이다.

 

 

small tag )

<small>Added Date : <?php echo $row['date_time'] ?></small>

해당 list가 언제 작성되었는 지를 나타내는 용도로 테이블에 저장할 때 생성하는 값이다.

이 값은 $row['deta_time']에서 받아온다.

 

 

이번 글에서는 index.php를 살펴보았다.

다시 한번 전체적인 틀을 정리해 보면 index.php에는 목록을 입력받는 form과 목록을 출력하는 section이 존재한다.

 

form에 입력된 값은 add 버튼을 통해 add.php로 전달되고

section에 출력되는 목록은 각각 checkbox, 날짜, 할 일 내용, 삭제 버튼으로 구성된다.

 

삭제 버튼을 클릭하면 해당 목록의 아이디가 remove.php로 전달되고

checkbox를 클릭하면 해당 목록의 아이디가 check.php로 전달된다.

 

다음으로는 각각의 파일 check.php, remove.php, add.php가 어떤 동작을 수행하는지 알아보자!

 

 

* todo TABLE은 id, title, cheked, date_time column을 가진다.

* column id : 1부터 시작해서 데이터가 추가될 때마다 증가한다.

* column title : 사용자가 input에 입력한 내용

* column checked : checkbox의 선택 여부를 나타내며 기본값은 0이다.

* column date_time : 사용자가 to do list를 입력한 시간을 나타낸다. 

 

 

[ Next ]

(1) index.php - Done!

(2) add.php

(3) check.php

(4) remove.php

'PHP' 카테고리의 다른 글

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