게시판 코딩 - 댓글달기_ jquery와 ajax로 코딩하기

안녕하세요

이번 게시글은 새롭게 배운 jquery와 ajax로 댓글들을 달 수 있도록 코딩해보려고 합니다 !

일단 jquery는 많은 라이브러리 함수들을 사용할 수 있다는 것이 매우 큰 장점입니다

만약 없다면 직접 하나하나 구현 해야 겠죠?

그렇다면 ajax란 무엇인가에 대해서 한 번 알아봅시다

ajax -> 비동기

비동기라는 말이 매우 생소 할 것 입니다. 저도 매우 생소했습니다

일단은 비동기가 있다는 말은 동기도 있다는 말이겠죠?

비동기 VS 동기

비동기

간단하게 클라이언트에서 요청을 보내면 굳이 응답을 계속 기다릴 필요가 없다는 의미입니다

즉 클라이언트에서 응답을 새롭게 다시 받을 필요가 없기 때문에 속도가 빨라진다는 장점이 있습니다

그와 반대로 동기에 대해서 알아봅시다

동기

동기의 경우는 이런식으로 Request를 보내면 Response를 받을 때 까지 기다려야합니다

그렇게 하면 저렇게 초록색으로 표시한 만큼의 대기 시간이 생기겠죠?!

그래서 비동기에 비해 동기는 속도가 느립니다 만약 데이터 양이 많아진다면 체감할 수 있을 거 같습니다

넘어가서 어떤 방식으로 구현 했는지 알아보겠습니다

<div id = "area_reply" style = "border-top : 0.5px solid black;">
  <div class = "box_reply_info" style = 'margin-left : 300px; margin-top : 25px;'>댓글</div>
  <div class = "reply_content">
  <div class = "box_comment_list" id = "box_comment_list"></div>
    <div style = "text-align : center;display : grid;grid-template-columns: 1500px 1fr;">
      <input class = "b_code" type = "hidden" name = "id" value = "<?= $_GET['id'] ?>">
      <textarea class = 'comment_text' name="comment" placeholder="내용" cols = 150px rows = 5px style = "margin-left : 400px;"></textarea>
      <button class = 'comment_button' style = "margin-right : 300px;">남기기</button>

웹을 처음 코딩하는거라 style이라던가 등등 깔끔하게 코딩하지 못한 점이 너무 아쉽네요..!!

만약 다음에 코딩한다면 첫번째 개선점입니다!

일단 이런식으로 댓글을 달아줄 textarea부분을 생성해주고 버튼을 만들어줬습니다

버튼을 누르면 데베에 댓글 정보를 저장해줄 php로 넘겨주고 새로고침을 해줄 겁니다.

만약 비동기방식이 아니라면

댓글 버튼 -> addcomment.php (댓글 추가 php) -> 댓글 보는 php

이런 방식이겠지만

비동기 방식을 사용해서

댓글 버튼 -> 댓글 보는 php

이렇게 됩니다 확실히 하나의 단계가 줄으니 client 입장에선 좀 더 빠르게 응답을 받을 수 있겠죠?!

var comment = $('.comment_text');
var b_code = $('.b_code');
var id = b_code.val();
$(document).ready(function() {
  $('.comment_button').click(function() {
      if ($('.comment_text').val() == ''){
          alert("댓글을 입력해주세요");
          $('.comment_text').focus();
      }
      else {
          $.ajax({
              type:'post',
              dataType:'json',
              url:'addcomment.php',
              data:{comment1: comment.val(),b_code1: b_code.val(),writer: session},
              success:function(data) {
                console.log('success');
                location.reload();
              },
              error:function() {
                console.log('fail');
              }
            })
          
      }
  });
});

 이런식으로 먼저 아무 내용 없는 댓글을 방지하기위해서 전에 썻던 jquery를 갖고 왔습니다

if문이 아니라 else문으로 간다면 ajax기능을 이용해서 addcomment.php 에 데이터들을 post 방식으로 넘겨줍니다

<?php
$conn = mysqli_connect();
$comment = $_POST['comment1'];
$sql = "
    INSERT INTO comment
        (b_code,comment,writer,reg_datetime)
        VALUES(
            '{$_POST['b_code1']}',
            '{$_POST['comment1']}',
            '{$_POST['writer']}',
            NOW()          
        )
";
$result = mysqli_query($conn,$sql);
if($result === false){
    echo 'save error';
    echo json_encode(array("comment"=>"error"));
}
else {
    echo json_encode(array("comment"=>"$comment"));
}

mysqli_connect 부분은 정보를 지웠습니다!

button을 누르면 js를 이용해 addcomment.php 부분에 post 방식으로 데이터를 넘겨줬습니다

그럼 이 데이터들을 php를 이용해서 DB에 저장해주는 역할을 하는 php 입니다!

자 그러면 client 입장에서는 단순하게 정보만 갖다주고 응답을 한번만 기다리면 되니깐

보다 빠른 응답을 받을 수 있게 됩니다 !