웹 개발 (게시판 글 DB저장, 로그인, 로그아웃 실행)

먼저 지금까지 완성된 것

1. 로그인, 회원가입, 게시판, 글쓰기 폼(html) 작성

2. 회원가입 정보를 DB에 저장

앞으로 해야할 것

1. 로그인, 로그아웃 성공 후 실행화면 만들기 (signIn.php, signOut.php)

2. 게시판 글쓰기 정보를 DB에 저장시키기 (board.html, write.php, dbConnect2.php)

3. 저장된 글 list에 호출시키기 (list.php)

4. SQL Injection 실행환경 구축하기

이제 시작해보자!

게시판 글쓰기 정보 DB에 저장시키기

<board.html>

<form action="write.php" method="post">
​
         <tr>
            <th>아이디</th>
            <td><input type="text" name="userId" placeholder="아이디를 입력하세요"></td>
         </tr>
         <tr>
            <th>비밀번호</th>
            <td><input type="password" name="userPw" placeholder="비밀번호를 입력하세요"></td>
         </tr>
         <tr>
            <th>제목</th>
            <td><input type="text" name="title" placeholder="제목을 입력하세요"></td>
         </tr>
         <tr>
            <th>내용</th>
            <td><textarea cols="40" rows="10" name="content" placeholder="내용을 입력하세요"></textarea></td>
         </tr>
     </table>
​
         <button class="btn btn-default“><a href=“write.php>WRITE</a></button>
         <button class="btn btn-default"> <a href="list.php">BOARD LIST</a></button>
​
         </form>
​

화면에 나타날 글쓰기 폼을 작성해줌

action은 write.php가 실행되게 하고 method 방식은 post로 설정해줌

<dbconnect2.php>

<?php
$host = 'localhost';
$user = 'root';
$pw = '******'; 
$dbName = 'board';
​
$mysqli = new mysqli($host, $user, $pw, $dbName);
​
$userId=$_POST['userId'];
$userPw=$_POST['userPw'];
$title=$_POST['title'];
$content=$_POST['content'];
​
if($db) {
    echo '[연결실패] : '.mysql_error().''; 
} else {
    echo '[연결성공]';
}
​
?>
​

글쓰기 정보가 저장될 DB를 연결해주는 코드를 만들어줌

연결 성공시에는 연결 성공이 뜨게 만들고 실패시는 연결실패가 뜨게 만듦

<write.php>

<?php
​
include "dbConnect2.php";
​
   if($userId != null)    
   {
      $sql = "insert into store (userId, userPw, title, content)";
      $sql = $sql."values('$userId', '$userPw', '$title', '$content')";
      
      if($mysqli->query($sql)){
         echo "<script>alert('Success'); location.href='index.html';</script>";
​
      }else{
         echo "<script>alert('Failed');location.href='index.html';</script>";
      }
   }
   else {
         echo "<script>alert('no match');location.href='board.html';</script>";
   }
​
?>
​

board.html에서 내용을 모두 작성한 후 WRITE 버튼을 누르면 write.php실행됨

write.php에는 dbConnect2.php와 연결시켜주는 include를 적용해줌

if($userId != null) { ​ $sql = "insert into store (userId, userPw, title, content)"; ​ $sql = $sql."values('$userId', '$userPw', '$title', '$content')"; // userId가 빈 값이 아니라면 DB에 입력받은 순서대로 userId, userPw, title, content를 저장해줌

그런데 게시판에 글을 작성하고 저장 버튼을 누르자 no match가 뜸

소스의 오류인가싶어서 계속해서 수정해봤지만 php가 아예 실행되지 않는 등의 문제점이 발생함

그래서 소스를 계속해서 살피던 중 write.php

<?php
​
include "dbConnect2.php";
​
   if($userId != null)    
   {
      $sql = "insert into store (userId, userPw, title, content)";
      $sql = $sql."values('$userId', '$userPw', '$title', '$content')";
      
      if($mysqli->query($sql)){
         echo "<script>alert('Success'); location.href='index.html';</script>";
​
      }else{
         echo "<script>alert('Failed');location.href='index.html';</script>";
      }
   }
   else {
         echo "<script>alert('no match');location.href='board.html';</script>";
   }
​
?>
​

if($userId != null)의 연산자를 바꿔보기로 함

==으로 바꿔주자

Success가 뜸

뭐지싶은 마음에 DB를 확인해봄

그러자 입력한 값이 null 값으로 저장되고 있다는 것이 확인되었음

(회색 줄이 데이터 값이 저장된 것임)

여러번 반복해 보았지만 계속해서 null 값만 추가됨

그래서 burp suite를 이용해 write.php가 무사히 실행되고 있는지? 어느 부분에서 오류가 발생하는지 확인해보기로함

확인해보자 회원가입시 사용되는 membersave.php와 게시판 글 저장시 사용되는 write.php가 모두 post로 보내지지 않고 있다는 것이 확인됨

그렇다면 method="post" 부분에서 오류가 발생함을 알게되었음

<board.html>

<form action="write.php" method="post">
​
         <tr>
            <th>아이디</th>
            <td><input type="text" name="userId" placeholder="아이디를 입력하세요"></td>
         </tr>
         <tr>
            <th>비밀번호</th>
            <td><input type="password" name="userPw" placeholder="비밀번호를 입력하세요"></td>
         </tr>
         <tr>
            <th>제목</th>
            <td><input type="text" name="title" placeholder="제목을 입력하세요"></td>
         </tr>
         <tr>
            <th>내용</th>
            <td><textarea cols="40" rows="10" name="content" placeholder="내용을 입력하세요"></textarea></td>
         </tr>
     </table>
​
         <button class="btn btn-default“><a href=“write.php>WRITE</a></button>
         <button class="btn btn-default"> <a href="list.php">BOARD LIST</a></button>
​
         </form>

form action="write.php" method="post"로 설정되어있지만 이를 실행시키는 과정에서 <button class="btn btn-default“><a href="write.php>WRITE</a> </button> 부분이 문제가 있음을 알게됨

write.php가 submit 형식으로 호출이 되는 것이 아니라 그저 링크가 걸려있어서 post로 실행되지 않고 있음이 확인됨

그래서 이 부분을 < button class="btnbtn -default" input type="submit"> WRITE< /button> 로 변경해줌

그리고 write.php 부분에서 !=에서 ==로 변경해준 연산자가 지금까지 데이터가 null 값으로 저장되고 있어서 실행됨을 깨닫고 다시 !=로 변경해줌

다시 실행해보자

게시판에 내용을 입력하고 저장해줌

DB를 확인해보자 내용이 무사히 저장된 것이 확인됨

마찬가지로 회원가입도 post 부분을 수정해줌

이렇게 오류를 수정하면서 글쓰기를 DB에 저장하는 시키는 것을 성공함~!

로그인 후 화면과 로그아웃 후 화면 만들기

<index.php>

<center>
  <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" type="text/css" href="main.css">
​
      <style>
        body {
                background-image: url("images/dfdf.jpg");
        }      
      </style>
    <body>
        <h1>Account Login</h1>
        <form method="post" action="signIn.php">
            
            <div data-validate="Enter username">
                <input type="text" name="userId" placeholder="ID">
            </div>
​
            <div data-validate="Enter password">
                <input type="password" name="userPw" placeholder="PASSWORD">
            </div>
​
            <button class="btn btn-default" input type="submit">LOGIN</a></button>
            <button class="btn btn-default"> <a href="register.html">REGISTER</a></button>
        </form>
    </body>
</center>
</html>

화면에 나타나는 로그인폼을 작성함

method 방식을 post로 설정해줌

UserId와 UserPw 값을 입력하고 LOGIN 버튼을 누르면 submit으로 제출되어 signIn.php가 실행되게 해줌

< signIn.php>

<?php 
  include "session.php";
  include "dbConnect.php";
​
  $check="select * from member where userId='$userId'"; 
  $result=$mysqli->query($check);
  if($result->num_rows==1){
    $row=$result->fetch_array(MYSQLI_ASSOC);
    if($row['userPw']==$userPw){ 
      $_SESSION['userId']=$userId;
      if(isset($_SESSION['userId'])) {
         echo "<script>alert('Login Success'); location.href='main.html';</script>";
      }
      else {
        echo "세션 저장 실패";
      }
    }
    else{
      echo "wrong id or pw";
    }
  }
  else{
    echo "wrong id or pw";
  }
​
 ?>

include "session.php"; include "dbConnect.php";

// LOGIN 버튼을 눌러 실행되는 signIn.php에는 세션이 시작되게 만드는 session.php와 회원가입 정보를 담고 있는 dbConnect.php를 연결시켜줌

$row=$result->fetch_array(MYSQLI_ASSOC); // 하나의 열을 배열로 가져옴

if($row['userPw']==$userPw){ ​ $SESSION['userId']=$userId; ​ if(isset($SESSION['userId'])) { ​ echo "<script>alert('Login Success'); //member에 있는 데이터와 입력 받은 데이터를 비교한 후 회원가입이 되어있는 아이디와 비밀번호이면 Login Success 문구를 띄우고 세션 변수를 만들어줌

else{ ​ echo "wrong id or pw"; ​ } //Id나 Pw에 오류가 있다면 wrong id or pw가 뜨도록 설정해줌

<main.html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="main.css">
  <style>
  body {
          background-image: url("images/dfdf.jpg");
  } 
  </style>
 
 
  </head>
  <form method="post" action="signOut.php">
    <title>Duni's web page</title>
  </head>
  <center>
     <body>
​
    <h1>WELCOME</h1>
    <img src="images/dd.jpg">
    <br><br>
 
      <button class="btn btn-default"> <a href="list.php">BOARD</a></button>
      <button class="btn btn-default" input type="submit">LOGOUT</button>
  </body>
</center>
</form>
</html>
​

로그아웃 버튼이 생성되어있는 페이지임

마찬가지로 method 방식은 post로 설정해주고 로그아웃 버튼을 누르면 signOut.php가 실행되도록 설정해줌

<signOut.php>

<?php
    include "session.php";
    $res=session_destroy();
    if($res){
        echo "<script>alert('Logout Success'); location.href='index.php';</script>";
    }
?>

include "session.php"; //세션을 시작해줌

$res=session_destroy(); //로그아웃 실행시 세션을 삭제함

성공시 Logout Success 문구가 뜨고 다시 처음 창인 로그인 폼이 뜨도록 만들어줌

지금까지 완성된 페이지의 모습을 구경해보자

페이지 접속하면 첫 화면에는 로그인폼이 뜸. 회원가입이 되어있지 않다면 회원가입을 할 수 있도록 REGISTER 버튼이 있음

회원가입을 위해 name,id, pw를 모두 w로 저장해봄

DB에 정상적으로 저장이 됨

로그인 폼에 id에 w, pw에 w 를 입력해봄

Login Success가 뜨고 정상적으로 로그인이 됨

확인을 누르면 로그인이 된 상태의 웹 페이지가 나타남

게시판 기능이 있는 BOARD 버튼과 로그아웃을 위한 LOGOUT 버튼이 있음

게시판을 보기 위해 BOARD 버튼을 누르고 들어오면 아직은 미완성 상태의 게시판 리스트를 볼 수 있음

게시판에 글을 쓰면 작성자, 제목, 내용 순으로 저장된 리스트가 나오게 만들것임

이제 게시판에 글을 쓰기 위해 WRITE 버튼을 눌러보자

게시판에 내용을 작성하고 WRITE 버튼을 눌러 저장시킴

Success가 뜸

DB를 확인해보자 마지막줄에 내용이 저장되었음

마지막으로 LOGOUT 버튼을 누르면 Logout Success가 뜨고 로그아웃이 실행됨

확인을 누르면 다시 초기화면은 로그인 폼으로 이동함