웹 개발: 게시판 - 글 목록

※ 여기선 단순 목록 나열만 다룸

 

 <현재 환경 세팅>

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

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

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

4. VScode SSH

5. 사진 등은 termius

 

 

 

<사이트 컨셉>

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

이런 너낌..아 아직 다 꾸민 거 아니에요 정말이에요

 

 

<글목록 구현>

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

 

중요한 부분
1) DB연동하여 데이터 불러오는 부분

2) 반복 출력할 게시물 부분

 

 

▶ DB 연동 및 데이터 불러오기

<?php
    $db_conn = mysqli_connection();  //DB사용 권한

    $select_sql = "SELECT * FROM upload_table ORDER BY idx DESC"; //데이터 최신순으로 불러오기
    $result = mysqli_query($db_conn,$select_sql);  //게시물 테이블의 데이터 
?>

 

 

 

▶ 게시물 반복 출력 (while문)

    <?php if (mysqli_num_rows($result)>0) :?> <!--만약 DB에서 추출한 데이터행이 1개 이상이면 아래 실행-->
      <div class="container mt-5"> <!--게시물 표시부분 css설정-->
        <div class="row g-4"> <!--각 게시물 상하좌우 간격 설정-->
          <!-- 각 게시물을 담는 카드 요소 시작 -->
            <?php while($row = mysqli_fetch_array($result)):?> <!--한 행씩 뽑아서 저장-->
              <div class="col-md-3"> <!--중간크기일 때 한 행에 게시물 4개씩 (12/3)-->
                <div class="card h-100">
                  <a href="post.php?id=<?=$row['idx']?>"> <!--파라미터 가지고 게시물 읽기 페이지로 이동-->
                    <div class="card-header">
                      <?=$row['idx']; ?> <!--뽑은 행의 idx값 출력-->
                    </div>             <!--뽑은 행의 그림 출력-->
                      <img src="<?=$row['image_url']; ?>" class="card-img-top" alt="그림 미리보기">
                    <div class="card-body">
                        <h5 class="card-title"><?=$row['title']; ?></h5> <!--뽑은 행의 제목 출력-->
                        <p class="card-text"><?=$row['description']; ?></p> <!--뽑은 행의 본문 출력-->
                    </div>
                  </a>
                </div>
              </div>
            <?php endwhile; ?> <!--뽑을 행 더 없으면 while문 종료-->
          <?php else: ?> <!--쿼리 실행 안돼서 아무것도 없으면 아래 문장 출력,디버깅-->
            <p>마지막 게시물입니다.</p>
          <!-- 다음 카드 요소가 반복 -->
          <!-- 나머지 카드들도 위와 동일한 방식으로 작성 -->
        </div>
      </div>
    <?php endif; ?> <!--if문 끝-->

 ㉮ <?php if (mysqli_num_rows($result)>0) :?>
 ㉯ <?php while($row = mysqli_fetch_array($result)):?>
 ㉰ <a href="post.php?id=<?=$row['idx']?>"> <!--파라미터 가지고 게시물 읽기 페이지로 이동-->
 ㉱ <?=$row['idx']; ?>
 ㉲ <?=$row['image_url']; ?>
 ㉳  <?=$row['title']; ?>
 ㉴ <?=$row['description']; ?>
 ㉵ <?php endwhile; ?>
 ㉶ <?php else: ?>
 ㉷ <?php endif; ?>

• if문: 결과 행 1개 이상이면 아래 실행
• while문: 결과 행을 한 행씩 뽑아 변수에 저장할 때 $row에 값이 들어오는 동안 아래 실행
• a태그: 게시글 클릭 시 idx값을 파라미터로 가지고 게시글 읽기 페이지로 이동
• echo: 뽑은 행의 idx값 출력
• echo: 뽑은 행의 이미지 경로 출력
• echo: 뽑은 행의 제목 출력
• echo: 뽑은 행의 설명 출력
• while문: 종료
• if문: 결과 행이 한 개도 없으면 다음 실행 ("마지막 게시물입니다.")
• if문: 종료

저런 식으로 띄엄띄엄 쓸 때는 endif나 endwhile을 명시해줘야하는 듯 하다.

안 쓰니까 게시물 무한으로 생성됨....(내리고 기다렸다 로드되는 커서 기반 페이지네이션같은 게 아니라 ㄹㅇ 무한)