웹 개발: 게시글 읽기 페이지

 <현재 환경 세팅>

1. Virtual Box 7.1.4 + 우분투 리눅스 20.04

2. 우분투 APM (Apache2 + PHP + MySQL)

3. 기본 웹 루트 경로 /var/www/html

4. VScode SSH

5. 사진 등은 termius

6. 디자인은 부트스트랩 ...

 

 

<사이트 컨셉>

그림판으로 그린 그림 자랑하는 사이트

던전 브레이크 아님

 

 

 

<글 읽기 페이지 구현>

이라기엔 민망하지만 암튼..

 

중요한 부분

1) index.php(글목록)에서 post.php(글읽기)로 파라미터 전송 및 이동
2) 파라미터를 기준으로  DB연동하여 데이터 불러오는 부분

3) 불러온 데이터 출력

 

 

게시글의 idx값을 파라미터로 받아서 DB데이터를 가져오기 때문에 위 세 부분이 포인트

 

 

 

 

▶ index.php에서 게시글 읽기 페이지로 이동

<a href="post.php?id=<?=$row['idx']?>"> ..게시물 요소.. </a>

• a태그로 게시물 요소(카드 요소)를 감싸서 글을 클릭하면 post.php로 이동함.
• 이때 게시글의 idx값을 파라미터로 가져감.

 

 

 

▶ 파라미터 받아서 DB에 데이터 불러오기 (post.php)

<?php
    $idx=$_GET['id'];
    
    $db_conn = mysqli_connection();
    $select_sql = "SELECT * FROM upload_table WHERE idx = $idx";
    $result = mysqli_query($db_conn,$select_sql);
    $row = mysqli_fetch_array($result);
?>

• 받은 파라미터를 변수에 저장.
• DB연동 권한을 받음
• 쿼리문을 저장해 실행한 결과행을 $result에 저장
• 데이터에 접근하기 위해 결과 집합 중 한 행을 변수에 저장

 

 

 

▶ 불러온 데이터 출력

    <?php if (isset($row)) :?>
        <div class="container mt-5">
            <div class="card mb-3" style="">
                <div class="row g-0">            
                    <div class="card-header">
                        <?=$row['idx'];?>
                    </div>
                    <div class="col-md-4">
                        <img src="<?=$row['image_url']; ?>" class="img-fluid rounded-start" alt="...">
                    </div>
                    <div class="col-md-6">
                        <div class="card-body col-md-12">
                            <h5 class="card-title"><?=$row['title']; ?></h5>
                            <p class="card-text"><?=$row['description']; ?></p>
                            <p class="card-text"><small class="text-body-secondary"><?=$row['upload_date']; ?></small></p>
                            <h4 class="card-text"><?=$row['nick']?></h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-5">
                <form method="POST" action="">
                    <lable for="comment-box">댓글</lable>
                    <input type="textarea" id="comment" class="col-md-6"/>
                    <button type="submit" class="btn btn-warning">올리기</button>
                </form>
            </div>
        </div>
    <?php endif; ?>

㉮ <?php if (isset($row)) :?>  
㉯ <?=$row['idx'];?>
㉰ <?=$row['image_url']; ?>
㉱ <?=$row['title']; ?>
㉲ <?=$row['description']; ?>
㉳ <?=$row['upload_date']; ?>
㉴ <?=$row['nick']?>
㉵ <?php endif; ?>

• 쿼리 결과가 있다면 아래 코드 실행
• idx의 데이터를 출력
• image_url의 데이터를 출력
• title의 데이터를 출력
• 게시물 설명을 출력
• 게시물 업로드 날짜를 출력
• 게시자 닉네임 출력
• if문 종료