본문 바로가기
모의해킹 공부/WEB 개발

[5주차 과제-2] 게시판 쓰기 & 읽기

Bandit10 2023. 4. 30. 01:01

2023.04.29 - [모의해킹 공부/WEB 개발 과제] - [5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현

 

[5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현

구현에 사용된 프로그램 Ubuntu-22.04.2 Apache2 : Apache/2.4.52 (Ubuntu) PHP : PHP 8.1.2-1ubuntu2.11(cli) MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu)) Visual Code(Widnows11) 00. 게시판 TB 구축하기 create table use

jisu069.tistory.com

구현에 사용된 프로그램

  • Ubuntu-22.04.2
  • Apache2 : Apache/2.4.52 (Ubuntu)
  • PHP : PHP 8.1.2-1ubuntu2.11(cli)
  • MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))
  • Visual Code(Widnows11)

00. 회원을 위한 게시판 쓰기 구현

00-1) 로그인을 했는지 체크로직

<?php
    session_start();
    if(!isset($_SESSION['sId'])){
        echo "
            <script>
                alert(\"로그인 해주세요!!!\");
               	location.href = \"./index.php\";
            </script>
	";
    }
?>
  • 먼저 회원이 쓰는 글이기 때문에 먼저 로그인을 했는지 안했는지를 세션 변수를 통해 체크한다!!
    • 안했을 경우 index 페이지로!!

00-2) 글을 쓰기위한 기본 틀 구현

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글쓰기</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/boardWrite.css">
</head>
<body>
    <header>
        <a href="index.php" id="logo">Wlkate</a>
        <nav>
            <ul>
                <li><a href="boardIndex.php">Board</a></li>
                <li><a href="index.php">Login</a></li>
            </ul>
        </nav>
    </header>
    <main class="wrap" id="write_wrap">
        <section>
            <h1>게시글 쓰기</h1>
            <form action="boardWrite_ok.php" method="post">
                <section id="board_write">
                    <div >
                        <label for="boardTitle">제목</label>
                        <p><input type="text" name="boardTitle" id="board_title" ></p>
                    </div>
                    <div>
                        <label for="boardDetail">내용</label>
                        <p><textarea name="boardDetail" id="board_detail" ></textarea></p>
                    </div>
                    <div>
                        <label for="boardFile">파일</label>
                    </div>
                </section>
                <div id="write_btn">
                   <p>
                       <a href="boardIndex.php" class="form_btn" id="can_btn">취소</a>
                   </p>
                   <p>
                       <input type="submit" value="올리기" class="form_btn"  id="sub_btn">
                   </p>
                </div>
            </form>
        </section>
    </main>
</body>
</html>
  • 파일 같은 경우 아직 미구현 -> 구현예정
  • post 메서드를 통해 입력한 내용을 boardWrite_ok.php로 보낸다

00-3) 사용자가 입력한 내용을 DB에 넣기 위한 페이지 작성

<?php
    session_start();
    include('./connect.php');

    $uId = $_SESSION['sId'];
    $bTitle = $_POST['boardTitle'];
    $bDetail = $_POST['boardDetail'];
    $bDate = date('Y-m-d H:i:s');
    $bFile = 0;
    
    $sql = "INSERT INTO userBoardTB
            (userId, boardTitle, boardDetail, boardDate, boardFile)
            VALUES('$uId', '$bTitle', '$bDetail', '$bDate', '$bFile');
            ";
    $rst = mysqli_query($con, $sql);

    if($rst){
        echo"
            <script>
                alert(\"게시글이 올라갔습니다!!!\");
                location.href = \"./boardIndex.php\";
            </script>
        ";
    }else{
        echo " 
            <script>
                alert(\"게시글이 올라가지 못했습니다!!!\");
                history.back();
            </script>
        ";
       exit;
    }
?>
  • bFile은 업로드할 파일 변수인데 아직 미구현이라 0으로 초기화
  • 기본 join_ok.php와 비슷한 구조!! 하지만 여기서는 session을 통해 사용자 ID를 받아온다

 

DB에 잘 연결되었고 작성한 내용이 잘 들어간 것을 확인!!

01. 사용자가 작성한 글을 확인하기 위한 게시판 읽기 구현

01-1) 2개 테이블을 통해 데이터 받고 boardIndex.php에서 idx를 받아와서 처리하기

<?php
    session_start();
    include('./connect.php');
    
    $cmpId = $_SESSION['sId'];
    $cmpSql = "select * from userTB where userId = '$cmpId';";
    $cmpRst = mysqli_query($con, $cmpSql);
    $idArr = mysqli_fetch_array($cmpRst);
    
    $idx = $_GET['idx'];
    $sql = "select * from userBoardTB where boardIdx = '$idx';";
    $rst = mysqli_query($con, $sql);
    $bdArr = mysqli_fetch_array($rst);
?>
  • 먼저 공부를 하기위해 Table을 비효율적으로 사용하였습니다(작업하실 때는 userBoardTB에 userName을 넣으시면 됩니다)
  • 세션에서 얻어온 아이디를 통해 userTB에서 userName을 가져온다
  • boardIndex.php에서 가져올 링크의 idx를 get으로 가져온다
  • $idx와 userBoardIdx를 비교해서 값들을 추출한다
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글쓰기</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/boardView.css">
</head>
<body>
    <header>
        <a href="index.php" id="logo">Wlkate</a>
        <nav>
            <ul>
                <li><a href="boardIndex.php">Board</a></li>
                <li><a href="index.php">Login</a></li>
            </ul>
        </nav>
    </header>
    <main class="wrap" id="view_wrap">
        <section>
            <h1><?php echo $bdArr['boardTitle']; ?></h1>
            <section id="board_wrap"> 
                <div class="board_head">
                    <label>작성자</label>
                    <p><?php echo $idArr['userName']; ?></p>
                    <label>작성일</label>
                    <p><?php echo $bdArr['boardDate']; ?></p>
                </div>
                <div class="board_head">
                    <label>조회수</label>
                    <p><?php echo $bdArr['boardViews']; ?></p>
                    <label>추천수</label>
                    <p><?php echo $bdArr['boardGood']; ?></p>
                </div>    
                <div id="board_detail">
                    <p><?php echo $bdArr['boardDetail']; ?></p>
                </div>
            </section>
            <div id="view_btn">
           	 <p>
              	  <a href="boardIndex.php" class="form_btn" id="back_btn">목록</a>
           	 </p>
            	<p>
              	  <a href="#" class="form_btn" id="up_btn">수정</a>
          	  </p>
          	<p>
              	  <a href="#" class="form_btn" id="del_btn">삭제</a>
           	</p>
            </div>
        </section>
    </main>
</body>
</html>
  • 글 제목, 작성일, 조회수, 추천수는 기본 Table(userBoardTB)에서 값을 가져온다
  • 작성자는 위에서 추출했던 userTB에서 값을 가져온다
  • 글 수정, 글 삭제는 아직 미구현 -> 구현 예정

boardWrite.css

/* ========== Page Common ========== */
*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
}

body{
    width: 100%;
    margin: 0 auto;
    background-color: rgb(59,65,64);
}
h1{
    color: rgb(238,164,80);
    font-size: 30px;
    padding: 2.5rem 0.5rem;
    text-align: center;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
p{
    padding: 5px;
}

div{
    display: flex;
}

/* ========== Header ========== */
header{
    top: 0;
    width: 90%;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: rgb(29,26,24);
    padding: 0 6rem;
}
header ul{
    display: flex;
    margin: 0;
    padding: 0;
}

header li{
    margin: 0 1rem;
}

header nav a{
    color: rgb(185,131,31);
    font-size: 1.25rem;
}
header nav a:hover{
    color: rgb(185,131,44);
}
#logo{
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(238,164,80);
    text-transform: uppercase;
}
/* ========== Main ==========*/
#write_wrap{
    border-radius: 5px;
    width: 60rem;
    height: 50rem;
    margin: 6rem auto;
    background-color: rgb(255, 253, 249);
    display: flex;
    justify-content: unset;
    align-items: center;
    flex-direction: column;
}
#board_write{
   height:35.5rem;
}
label{
    color: rgb(238,164,80);
    font-size: 20px;
    font-weight: 700 ;
    padding: 10px;
}

#board_title{
    width: 35rem;
    height: 2.2rem;
    padding-left: 10px;
    font-size: 16px;
    border: 1px solid rgb(211, 203, 203);
}

#board_detail{
    resize: none;
    width: 40rem;
    height: 25rem;
    padding-left: 10px;
    font-size: 16px;
    border: 1px solid rgb(211, 203, 203);
}

.form_btn{
    width: 5rem;
    height: 2rem;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid rgb(238,164,0 );
    background-color: rgb(238,164,0 );
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
 
}
#write_btn{
    display: flex;
    justify-content: flex-end;
}
#can_btn{
    display: inline-block;
    text-align: center;
}
#sub_btn{
   height: 2.2rem;
   display: inline-block;
}

boardView.css

/* ========== Page Common ========== */
*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
}

body{
    width: 100%;
    margin: 0 auto;
    background-color: rgb(59,65,64);
}
h1{
    color: rgb(238,164,80);
    font-size: 30px;
    padding: 2.5rem 0.5rem;
    text-align: center;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}


div{
    display: flex;
}

/* ========== Header ========== */
header{
    top: 0;
    width: 90%;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: rgb(29,26,24);
    padding: 0 6rem;
}
header ul{
    display: flex;
    margin: 0;
    padding: 0;
}

header li{
    margin: 0 1rem;
}

header nav a{
    color: rgb(185,131,31);
    font-size: 1.25rem;
}
header nav a:hover{
    color: rgb(185,131,44);
}
#logo{
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(238,164,80);
    text-transform: uppercase;
}
/* ========== Main ==========*/
#view_wrap{
    border-radius: 5px;
    width: 60rem;
    height: 43rem;
    margin: 6rem auto;
    background-color: rgb(255, 253, 249);
    display: flex;
    justify-content: unset;
    align-items: center;
    flex-direction: column;
}
#board_wrap{
   height:31rem;
}
label{
    width: 7rem;
    text-align: center;
    color: rgb(238,164,80);
    font-weight: 700;
    border-left:medium solid rgba(189, 130, 64,0.3);
    border-right:medium solid rgba(189, 130, 64,0.3);
    padding: 10px;
}
label+p{
    width: 33rem;
    text-align: left;
    padding: 10px;
}
.board_head{
    border: medium solid rgba(189, 130, 64,0.3);
    width: 40rem;
}
#board_detail{
    border: medium solid rgba(189, 130, 64,0.3);
    width: 40rem;
    height: 20rem;
}
#board_detail p{
    padding: 10px;
}
.form_btn{
    width: 5rem;
    height: 2rem;
    margin: 5px 15px;
    border-radius: 5px;
    border: 1px solid rgb(238,164,0 );
    background-color: rgb(238,164,0 );
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    
}
#view_btn{
   display: flex;
   justify-content: center;
}
#back_btn{
    display: inline-block;
    text-align: center;
}
#up_btn{
    display: inline-block;
    text-align: center;
}
#del_btn{
    display: inline-block;
    text-align: center;
}

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

[6주차 과제-2] 게시판 검색 구현  (0) 2023.05.14
[6주차 과제-1] 게시판 수정 & 삭제  (0) 2023.05.10
[5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현  (0) 2023.04.29
[4주차 과제-1] 회원가입 - 주소 검색 기능 구현  (0) 2023.04.26
[2주차 과제 -2] 로그인 & 메인 페이지 구현  (0) 2023.04.08

'모의해킹 공부/WEB 개발' Related Articles

티스토리툴바