본문 바로가기
WEB/웹 프로젝트

[8주차] 웹프로젝트 진행

by 단월໒꒱ 2022. 2. 19.

이번주 계획

 : 후기 게시판 제작, 검색 기능 추가 (+ 지난주에 못 완성한 후기 글 수정, 삭제 기능 추가)

 

1) 후기 게시판 제작

  - 후기를 모아놓은 게시판 제작

 

2) 검색 기능

   - 검색 기능 추가

 

3) 후기 작성 기능

   - 글 읽기 기능 추가

   - 글 수정 기능 추가

   - 글 삭제 기능 추가

 

https://github.com/jini-coding/ott_review_project

 

GitHub - jini-coding/ott_review_project: SISS 2022 겨울방학 웹프로젝트 - OTT별 콘텐츠 리뷰 홈페이지 제작

SISS 2022 겨울방학 웹프로젝트 - OTT별 콘텐츠 리뷰 홈페이지 제작. Contribute to jini-coding/ott_review_project development by creating an account on GitHub.

github.com

 

 

① 후기 게시판 제작

 

 

 

 

<body>
<h2> BOARD </h2>
    <?php
      $conn=mysqli_connect("localhost", "root", "비밀번호", "contents_review");
      $sql2=" SELECT * FROM contentsreview";
      $result=mysqli_query($conn, $sql2);
      $list=' ';
    ?>
    <table>
      <tr><th>OTT</th> <th>제목</th> <th>별점</th> <th>후기</th></tr>
    <?php
      while($row=mysqli_fetch_array($result)){
        if($row['ott']=='netflix'){
          $row['ott']='NETFLIX';
        }
        if($row['ott']=='tving'){
          $row['ott']='TVING';
        }
        if($row['ott']=='watcha'){
          $row['ott']='WATCHA';
        }
        if($row['ott']=='disney+'){
          $row['ott']='DISNEY+';
        }
      ?>
        <tr>
          <td><?php echo $row['ott']?></td>
          <td><?php echo $row['title']?></td>
          <td><?php echo $row['score']?></td>
          <td><?php echo $row['comments']?></td>
        </tr>
      <?php
      }
      ?>
      <?php
      echo "</table>";
      mysqli_close($conn);
    ?>


</body>

 

 

BOARD 게시판은 저번주와 다르게 테이블의 형태로 변환시켜주었다.

 

 

 

② 검색 기능

 

<body>
  <span id="home"><a href="index.php">메인으로</a></span>
  <h2> SEARCH </h2>
  <div id="search_box" style="text-align : center; padding-top : 50px;">
    <form action="Search.php" method="GET">
      <select name="categ">
        <option value="title">제목</option>
        <option value="ott">OTT</option>
        <option value="category">카테고리</option>
      </select>
      <input type="text" name="search" size="40" required="required">
          <button class="btn btn-primary">검색</button>
    </form>
  </div>
  <?php
    ini_set('display_errors', '0');
  ?>
  <?php
    $catg=$_GET['categ'];
    $search=$_GET['search'];
  ?>
  <p><br><br><br>
  <?php
    $conn=mysqli_connect("localhost", "root", "비밀번호", "contents_review");
    $sql2=" SELECT * FROM contentsreview";
    $result=mysqli_query($conn, $sql2);
    ?>
    <table>
      <tr><th>OTT</th> <th>제목</th> <th>별점</th> <th>후기</th></tr>
    <?php
      while($row=mysqli_fetch_array($result)){
        if($row['title']==$search or $row['ott']==$search or $row['category']==$search){
          if($row['ott']=='netflix'){
            $row['ott']='NETFLIX';
          }
          if($row['ott']=='tving'){
            $row['ott']='TVING';
          }
          if($row['ott']=='watcha'){
            $row['ott']='WATCHA';
          }
          if($row['ott']=='disney+'){
            $row['ott']='DISNEY+';
          }
    ?>
          <tr>
            <td><?php echo $row['ott']?></td>
            <td><?php echo $row['title']?></td>
            <td><?php echo $row['score']?></td>
            <td><?php echo $row['comments']?></td>
          </tr>
    <?php
        }
      }

      ?>
    </table>
    <?php
      echo "</table>";
      mysqli_close($conn);
    ?>

</body>

 

 

검색할 종류인 제목, OTT, 카테고리를 선택할 수 있도록 form태그를 이용했다.

그리고 검색 박스를 만들어 검색이 가능하도록 하였다. 

DB와 연동해주고 테이블 형태로 DB의 데이터값을 출력하였다.

if문을 이용해 아까 검색한 값인 $search와 동일한 값일 때 해당 ott, title, score, comments의 값을 출력해주었다.

이 테이블의 text를 가운데로 설정해주고 margin:auto로 설정해주어 페이지의 가운데에 위치할 수 있도록 하였다.

 

 

- 제목으로 검색한 경우

 

 

 

 

- OTT로 검색한 경우

 

 

 

 

 

③ 글 읽기 기능

 

 

 

 

후기를 작성하면 DB에 저장하는데, 작성된 후기를 DB에서 가져와서 화면에 출력하는 페이지이다. (UI 조금 더 수정 예정)

 

 

<?php
$conn = mysqli_connect("localhost", "root", "비밀번호", "contents_review");

function mq($sql)
{
  global $conn;
  return $conn->query($sql);
}

?>


(...중략...)


<?php
     $num = $_GET['id'];
     $sql = mq("select * from review_list where id='".$num."'");
     $board = $sql->fetch_array();
?>


(...중략...)


<div id="board"><h3>리뷰 모아보기</h3>
  <h2><?php echo $board['title']; ?></h2>
  <div id="info">
  <?php echo $board['ott']; ?> 별점:<?php echo $board['score']; ?> <?php echo $board['created']; ?>

<div id="read_content">
<?php echo nl2br("$board[comments]"); ?>
</div>

<div id="option">
<span><a href="review_page.php">목록</a></span>
<span><a href="modify_review.php?id=<?php echo $board['id']; ?>">수정</a></span>
<span><a href="delete_process.php?id=<?php echo $board['id']; ?>">삭제</a></span>
</div>
</div>

 

 

DB와 연결을 해주고 mq 함수를 만들어 후에 쿼리문을 전달하기 편하게 해주었다.

아이디값을 받아서 num 변수에 저장한 뒤에 이 num에 해당되는 id 값을 가진 데이터를 DB에서 불러오게끔 했다.

연결된 DB로부터 title, ott, score, created, comments 내용을 불러들여서 echo로 출력했다.

아래에는 목록, 수정, 삭제 버튼을 만들어서 각각 목록으로 돌아가기, 수정하기, 삭제하기 기능을 연결해주었다.

 

 

 

④ 글 수정 기능

  

<?php
$conn = mysqli_connect("localhost", "root", "비밀번호", "contents_review");

$num = $_GET['id'];
$ott = $_POST['ott'];
$title = $_POST['title'];
$score = $_POST['score'];
$comment = $_POST['comments'];
$date = $_POST['created'];


$sql = "
  UPDATE review_list set
     ott='".$ott."',
     title='".$title."',
     score='".$score."',
     comments='".$comment."'
     WHERE id='".$num."'
     ";

$result = mysqli_query($conn, $sql);
?>

<script type="text/javascript">
  alert("수정되었습니다."); 
</script>
<meta http-equiv="refresh" content="0 url=review_page.php?id=<?php echo $num; ?>">

 

 

DB와 연결을 해준다.

각 칼럼들에 해당하는 데이터를 가져와 각각의 변수에 저장했다.

sql 변수에 UPDATE 명령어를 활용하여 글을 수정하는 쿼리문을 넣어주었다.

결과적으로 연결된 DB에 sql 쿼리문을 전달하도록 해주었다.

마지막으로 해당 작업이 완료되면 alert 팝업이 뜨도록 스크립트를 넣어주었고 팝업을 닫으면 자동으로 후기 목록 페이지로 돌아가도록 해주었다.

 

 

 

 

수정 버튼을 누르면 위의 화면으로 진입한다.

(이전에 작성된 내용을 유지시키는 것까지 할 시간이 있다면 거기까지 기능을 추가해볼 예정)

 

위의 빈칸에 수정할 내용을 입력하고 작성 버튼을 누른다.

 

 

 

 

수정되었다는 팝업이 뜨고

 

 

 

 

다시 목록으로 돌아간다.

 

하지만 확인해보면 글 내용이 제대로 수정되지 않은 점을 확인할 수 있다.

코드가 아직 미완이라 이번주에 수정 기능을 좀 더 손봐서 완전하게 글을 수정할 수 있도록 할 예정이다.

 

 

 

⑤ 글 삭제 기능

 

<?php
$conn = mysqli_connect("localhost", "root", "비밀번호", "contents_review");

$num = $_GET['id'];
$sql = "
  DELETE FROM review_list where id='$num'";

$result=mysqli_query($conn, $sql);

?>

<script type="text/javascript">
       alert("삭제되었습니다.");
</script>
<meta http-equiv="refresh" content="0 url=review_page.php">

 

 

이미 만들어둔 DB와 연결을 해준다.

id 값을 받아서 num이라는 변수에 저장하고 sql 변수에 해당 num이란 id값을 가진 내용을 삭제하는 쿼리문을 넣어준다.

결과적으로 연결된 DB에 sql 쿼리문을 전달하도록 해주었다.

마지막으로 해당 작업이 완료되면 alert 팝업이 뜨도록 스크립트를 넣어주었고 팝업을 닫으면 자동으로 후기 목록 페이지로 돌아가도록 해주었다.

 

 

 

 

현재 후기 목록이다.

가운데에 위치한 후기글을 눌러 게시글에 들어가서 삭제 버튼을 눌러주었다.

 

 

 

 

삭제되었다는 팝업이 뜨고

 

 

 

 

다시 목록으로 돌아가지는데, 목록을 보면 해당 글이 삭제된 것을 확인할 수 있다.

 

 

 

 

다음주 -> 전체적인 UI 수정, 그동안 만든 파일 연결, 미완성인 기능 보완

 

'WEB > 웹 프로젝트' 카테고리의 다른 글

[9주차] 웹프로젝트 진행  (0) 2022.02.27
[6주차] 웹프로젝트 진행  (0) 2022.02.06
[4주차] 웹프로젝트 진행  (0) 2022.01.23
[생활코딩] DATABASE - MySQL 정리  (0) 2022.01.09
[생활코딩] WEB2-PHP 정리  (0) 2022.01.03

관련글

댓글

티스토리툴바