File Board

DATE : 2024/1/1

❗Goal : File 게시판 만들기

이번 글에서 다룰 내용은 바로 바로 파일 게시판 만들기이다.

저번 주에 구현한 게시물 작성 페이지 수정 : write_post.php에서 파일 업로드 기능에 연장선으로

(1) 사용자가 게시물 작성 시, 파일은 업로드하지 않은 경우

(2) 사용자가 게시물 작성 시, 파일도 함께 업로드 한 경우

이 두 가지 상황을 분리해 파일을 업로드한 게시물은 파일 게시판에서 보여줄 생각이다.

메인 화면인 index.php에서는 이전과 마찬가지로 일반 게시물을 보여주고

상단 header에 제공되는 File을 누르면

파일을 업로드한 게시물만 보여주는 파일 게시판 페이지로 이동하게 된다.

다시 일반 게시판 페이지로 넘어가기 위해서는 동일하게, 상단 header에 제공되는 Main을 클릭하면 된다.

자! 만들고자 하는 게 무엇인지 눈으로 확인해봤으니 👀 바-로 코드를 구현해보자!

(1) header

<div class="header">            
        <div>
            <h2><a href="./file_board.php">File</a></h2>
            <h2><a href="">Anonymous</a></h2>
        </div>
        <div>
            <p><?php echo $usr;?>님</p>
            <button id="mypage_btn">
                My Page
            </button>
        </div>
    </div>

파일 게시판으로 이동하기 위해서는 상단 헤더에 File 버튼이 제공되어야 한다.

이를 위해 a tag로 생성된 File & anonymous 링크를 추가했다.

(2) index.php : Query 변경

index.php의 전체적인 구조를 보면 (header 제외하고)

상단에 위치한 BOARD 문구는 고정된 값이고 하단에 위치한 페이징 기능은

DB에 들어있는 게시물의 개수에 따라 자동 조정된다.

따라서 우리는 중앙에 위치한 테이블 관련 코드만 조금 수정해주면 되는데

다른 건 건들 필요 없고, 게시물을 가져올 때 실행하는 Query만 살짝 손대주면 된다.

...
if(isset($_POST['search_value'])) {
    $sql = "SELECT * FROM board WHERE filename is NULL and $option LIKE '%$search_value%' ORDER BY $option";
} else {
    $sql = "SELECT * from board WHERE filename is NULL";
}

$res = mysqli_query($conn, $sql);
$cnt = mysqli_num_rows($res);
$post_per_page = 10;
...

이 코드는 table tag에 작성된 코드 중 일부로 index.php 전체 코드는 WEB SERVER 여기에서 확인!

본론으로 돌아와 달라진 코드에 대해 얘기해보자면

SELECT * FROM board WHERE $option LIKE '%$search_value%' ORDER BY $option
SELECT * from board

원래는 모든 게시물을 구분 없이 index.php에서 보여줬기 때문에

별 다른 조건 없이 DB에 있는 모든 게시물 정보를 꺼내왔는데

SELECT * FROM board WHERE filename is NULL and $option LIKE '%$search_value%' ORDER BY $option
SELECT * FROM boaed WHERE filename is NULL

이제는 파일을 업로드한 게시물과 업로드 하지 않은 게시물을 구분해야 하기 때문에

파일을 업로드한 게시물만이 갖는 filename column 값의 유무로 가져올 게시물 정보를 걸러낸다.

이를 위해 Table board 에 filename column을 추가해

게시물에 업로드 된 파일이름을 저장하도록 코드를 작성해두었다.

즉 파일을 업로드 하지 않은 경우에는 filename이 NULL이기 때문에

index.php에서는 filename이 NULL이다 라는 조건을 만족하는 게시물을 가져오는 것이다.

...
if(isset($_POST['search_value'])) {
    $get_post_sql = "SELECT * FROM board WHERE filename is NULL and $option LIKE '%$search_value%' ORDER BY $option LIMIT $start,$post_per_page";
} else {
    $get_post_sql = "SELECT * FROM board WHERE filename is NULL ORDER BY date LIMIT $start,$post_per_page";
}
$get_post_res = mysqli_query($conn, $get_post_sql);
...

결론적으로 일반 게시물만 꺼내오기 위해서는

filename is NULL and ~~

filename column 값이 NULL이라는 조건을 추가해주기만 하면 된다!

(3) File board.php

앞에서는 index.php에서 일반 게시물만 DB에서 꺼내오기 위해 Query를 작성했는데

이와 반대로 file_board.php에서는 파일을 업로드한 게시물만 가져와야 한다.

따라서 다른 부분은 동일하지만 Query만 아래와 같이 작성해주면 된다.

...
if(isset($_POST['search_value'])) {
    $sql = "SELECT * FROM board WHERE filename != '' and $option LIKE '%$search_value%' ORDER BY $option";
} else {
    $sql = "SELECT * from board WHERE filename != ''";
}
...

(4) mypage.php

index.php & file_board.php에는 모두 상단 우측에 마이페이지 버튼이 위치해있다.

원래는 index.php만 있었다 보니

mypage에서 우측 상단에 HOME을 누르면 index.php로 이동하도록 코드를 작성해뒀는데

이제는 마이페이지로 접근할 수 있는 경로가 두 개로 늘어서

마이페이지로 접속하기 이전 페이지로 돌아가려면 코드를 수정해줄 필요가 있다.

before )
const home_btn = document.getElementById("home_btn");

home_btn.addEventListener('click', () => {
    window.location.href = "./index.php";
});


after )
home_btn.addEventListener('click', () => {
    history.back();
});

원래 작성했던 코드는 location을 이용해 index.php로 가라는 코드였는데

이제는 마이페이지로 접근하기 이전 페이지로 이동해야 하기 때문에 history.back()을 사용하면 된다.

여기까지 해서 게시판 - 파일 게시판 - 마이페이지 간의 흐름은 깔끔하게 정리 완료! 👍

다음으로 파일 게시판의 상세 페이지를 디자인해보도록 하자!