File_article

DATE : 2024/1/10

❗Goal : File 게시물 - 상세 페이지 만들기

File Board 페이지에서 게시물을 클릭하면 이동할 상세 페이지를 만들어보도록 하자.

일반 게시물과 달리 파일을 업로드한 경우에는

파일 확장자에 따라 이미지를 출력하거나 파일 내용을 출력하는 구성으로 수정할 필요가 있다.

현재 파일 업로드 기능에는 이미지 타입의 확장자와 텍스트 파일만 허용하고 있기 때문에

두 가지 경우로 나누어 페이지를 구성할 것이다.

---

우선 이미지 파일을 업로드한 게시물을 살펴보면

상단에는 게시물 제목, 작성자, 게시물 내용을 출력하고 중앙에 업로드한 이미지 파일을 출력한다.

페이지 하단은 이전에 사용자들이 작성한 댓글과 댓글 입력 칸을 제공하는 공간으로 사용하고 있다.

추후에 다운로드 기능을 추가할 생각이지만 전체적인 구성은 비슷하게 가져갈 생각이기 때문에

큰 틀만 잘 잡아주면 될 듯하다.

이미지 파일 상세 페이지 모습은 아래에서 확인!

---

다음으로 텍스트 파일을 업로드한 경우를 살펴보자.

텍스트 파일도 이미지 파일과 마찬가지로 상단에는 게시물 제목과 작성자, 내용을 출력하고

페이지 중앙에서 업로드 된 파일 내용을 보여준다.

페이지 하단에서는 작성된 댓글과 댓글 입력 칸이 제공되는 구성이다.

이미지 파일의 상세 페이지와 비교했을 때, 페이지 중앙에 들어가는 내용만 다르기 때문에

이 부분만 잘 구분해주면 크게 어려운 점은 없을 것이다.

---

그럼 바-로 file_article.php 코드를 살펴보도록 하자.

...
<div class="image_box">
    <?php if($ext != "txt") { ?>
        <h2>Image View </h2>
        <img src=<?php echo "./files/".$file_name;?> alt="<?=$file_name;?>">
    <?php } else { ?>
        <h2>File Content</h2>
        <textarea readonly>
            <?php echo file_get_contents("./files/".$file_name);?>
        </textarea>
    <?php }?>
</div>
...

article.php와 비교했을 때, 중앙에 들어가는 영역이 추가되었다는 부분만 다르기 때문에

중복되는 코드를 건너뛰고 이미지(또는 파일 내용)를 출력하는 부분만 다룰 것이다.

지금 만들고자 하는 페이지는 앞서 말했듯이

이미지 또는 텍스트 파일을 모두 다루어야 하기 때문에 파일 확장자를 검사해 if-else문을 수행한다.

<?php if($ext != "txt") { ?>
    <h2>Image View </h2>
    <img src=<?php echo "./files/".$file_name;?> alt="<?=$file_name;?>">
<?php } else { ?>    

만약 파일 확장자가 txt가 아니라면 (= 이미지 유형의 파일이라면)

<img> tag를 이용해 files directory에 넣어둔 파일을 가져와 출력하고

<?php } else { ?>
    <h2>File Content</h2>
    <textarea readonly>
        <?php echo file_get_contents("./files/".$file_name);?>
    </textarea>
<?php }?>

파일 확장자가 txt라면 (= 텍스트 파일이라면)

file_get_contents() 함수로 게시물에 업로드했던 파일 내용을 출력한다.

이때 파일명은 게시물을 작성할 때,

DB에 저장해두기 때문에 SQL 결과 filename column에서 가져올 수 있고

$ext = explode(".",$file_name)[1];

filename을 dot 기준으로 분리해 두 번째 값 즉, 확장자를 $ext에 할당하여 if문에 사용하면 된다.

이렇게 코드를 작성하게 되면 위에서 본 바와 같이 업로드 했던 파일이

이미지 타입의 파일이냐, 텍스트 파일이냐에 따라 알맞은 구성으로 페이지를 제공할 수 있게 된다!