[SISS] 웹 프로젝트 7주차

2022. 2. 13. 23:37

6주차의 내용은 아래 링크를 참고

https://jini00.tistory.com/141

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

DB 수정

원래 Table을 두개로 나누어 나중에 JOIN하는 방식으로 구성하려했다. 하지만 게시판을 만들면서 데이터들을 정리하기 않음을 느껴 처음에 제작했던 DB 방식으로 다시 수정하였다.

아래 사진은 해당 table(contentsreview)의 형태이다.

DB에 값 넣기

- process_create.php

<?php
$conn=mysqli_connect("localhost", "root", "비밀번호", "contents_review");
var_dump($_POST);
$sql="
  INSERT INTO contentsreview
    (title, ott, category, score, comments, created)
    Value(
      '{$_POST['title']}',
      '{$_POST['ott']}',
      '{$_POST['category']}',
      '{$_POST['score']}',
      '{$_POST['comments']}',
      NOW()
      )";
$result=mysqli_query($conn, $sql);
if($result===false){
  echo '저장하는 과정에서 문제가 발생하였습니다.';
  error_log(mysqli_effor($conn));
}
else{
  echo '저장에 성공했습니다. <a href="index.php">돌아가기</a>';
}

?>

먼저 DB와 연동을 시켜주었다. 저번주와 다르게 DB를 다시 수정하면서 table을 하나로 통일했기 때문에 위의 코드가 잘 작동되었다.

각 ott별 후기 작성 게시판

이런식으로 페이지에 내용을 입력해주고 작성 버튼을 눌러준다.

위 후기들은 네이버 블로그 등을 통해 발췌한 후기들이다.

작성 버튼을 눌러주면 위와 같은 페이지가 뜨고 DB에 저장된다.

이를 DB를 통해 확인해보면 아래와 같이 잘 저장되었다는 것을 확인할 수 있다.

아래에 설명할 BOARD 게시판을 통해서도 확인할 수 있다.

- 삭제 기능 추가

<?php 
   $conn = mysqli_connect('localhost','root','1111','CONTENTS_REVIEW');

   $sql = " DELETE FROM  WHERE  = {}";

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


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

contents_review DB와 연결시킨 뒤 sql 변수에 데이터를 삭제하는 쿼리문을 지정해주었다.
글이 정상적으로 삭제되었음을 알리기 위해 js를 이용해서 alert 창이 뜨도록 하고 페이지를 refresh 시켜 원래의 게시판 페이지로 돌아가도록 했다.
여기서 php구문 안에 if-else문을 넣어서 삭제 실패/성공에 대한 메세지를 띄워도 되는데, 이럴 경우 아예 다른 페이지로 넘어가야하거나 깔끔하게 원래 페이지로 돌아올 방법이 마땅치 않아서 위의 코드의 방식을 적용했다.
(하지만 추후에 수정될 수 있음)

Board 게시판 제작

- Board.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    li{
      text-align: left;
      padding: 10px;
      color :black;
      font-size: 20px;
      font-family : sans-serif;
    }
    h2{
      text-align: center;
      padding: 35px;
      color :#A50000;
      font-size: 5em;
      font-family : sans-serif;
    }
    body{
      background-color:#FFD8D8;
      height : 4000px;
    }
  </style>
  <title>board</title>
</head>
<body>
<h2> BOARD </h2>
    <?php
      $conn=mysqli_connect("localhost", "root", "비밀번호", "contents_review");
      $sql2=" SELECT * FROM contentsreview";
      $result=mysqli_query($conn, $sql2);
      $list=' ';
      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+';
        }
        $list = $list."<li>{$row['ott']} - {$row['title']}(별점 : {$row['score']}) : {$row['comments']}";
      }
      echo $list;
      mysqli_close($conn);
    ?>


</body>
</html>

먼저 DB와 연결을 시켜주었다. $sql2에 SELECT문을 넣어 contentsreview 테이블을 가지고 올 수 있도록 하였다. $row에 mysqli_fetch_array함수를 이용하여 DB의 값을 받아왔다. 여기서 if문을 이용해 $row['ott']의 출력형태를 모두 대문자로 바꿔주었다. 그리고 $list에 li태그를 이용해 ott, title, score, comments를 저장해주었으며 이를 마지막에 echo하도록 하여 출력해주었다.

아래 사진은 임의로 DB에 저장한 데이터들이 출력된 모습이다. 아직 페이지를 꾸미지는 않았기에 다음주에 더 보완하고자 한다.

'Web Hacking > WEB Hacking 기초' 카테고리의 다른 글

[SISS] bwAPP 4주차 < Cross-site scripting – Reflected (POST) > (0)	2022.02.17
[SISS] bwAPP 4주차 < Cross-site scripting – Reflected (GET) > (0)	2022.02.16
[SISS] bwAPP 3주차 < SQL injection - POST/search > (0)	2022.02.09
[SISS] bwAPP 3주차 < SQL injection - GET/search > (0)	2022.02.09
[SISS] bwAPP 2주차 < HTML injection - stored(Blog) > (0)	2022.02.08

SolB