240119 HTML 홈페이지 이어 만들기

오늘 할일

AQueryTool 에서 관계도 만드는 법 알아보기

기존 홈페이지에 댓글 달기

DBeaver 설치해서 사용해보기

 

홈페이지 가입할 때 아이디 중복 검사를 눌러야만 가입하기 버튼이 활성화되게 하기

if (result == 1) {
  alert("이미 가입되어 있어요.");
  $("#joinBtn").attr("disabled", "disabled"); // 가입 버튼을 비활성화 시키기
  $("#id").focus();
} else {
  alert("가입 가능해요.");
  $("#joinBtn").removeAttr("disabled") // 가입 버튼의 비활성화를 제거 = 활성화
  $("#name").focus();

 

ID 에 영어, 숫자만 작성되게 하기, 특수문자, 한글 막기

const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"\sㄱ-ㅎㅏ-ㅣ가-힣]/g; //한글+공백
// alert(regExp.test(id)); // 한글,공백 포함여부 검사하는 정규식
if (id.length < 3 || regExp.test(id)) {

 

input 의 값이 변경되면 창 띄우기

    // on - 값의 변화를 감지하는 함수
    $("#id").on("change keyup paste", function() {
      // alert("아이디 입력 값이 변경됨");
      $(".id-alert").show();
      $(".id-alert").html("<p class='alert'>당신이 입력한 ID 는 " + $('#id').val() + "</p>");
    });

 

이것 저것 해보는 중.. ID 의 중복, 특수문자, 한글 등 사용 시 가입 못하게 막기

코드가 완전.. 복잡

<script type="text/javascript">
  // $(document).ready(function() {});
  // 대신 사용할 수 있는 축약형
  // 글로벌 변수 만들기
  let idCheckBool = false;

  $(function() {
    $(".id-alert, .name-alert, .pw-alert").hide();
    // $(".name-alert").hide();
    // $(".pw-alert").hide();
    
    // onchange() 함수
    // $("#id").change(function (){
    //   $("#joinBtn").attr("disabled", "disabled"); // 비활성화 시키기
    // });
    
    // on - 값의 변화를 감지하는 함수
    $("#id").on("change keyup paste", function() {
      // alert("아이디 입력 값이 변경됨");
      $(".id-alert").show();
      $(".id-alert").html("<p class='alert'>당신이 입력한 ID 는 " + $('#id').val() + "</p>");
      if ($("#id").val().length > 2) {
        idCheck();
      }
    });
  })

  function check() {
    // alert("제이쿼리가 동작합니다.");
    let id = $("#id").val();
    // Not a Number
    // alert(id + " : " + id.length + " / 숫자 검사 : " + isNaN(id));
    if (id.length < 3 || id == "") {
      // alert("아이디는 3글자 이상이여야 함");
      $(".id-alert").show();
      $("#id").focus();
      return false;
    } else {
      $(".id-alert").hide();
    }

    if (!idCheck) {
      alert("ID 검사를 먼저 실행해주세요.")
      return false;
    }

    let name = $("#name").val();
    if (name.length < 3) {
      // alert("이름은 3글자 이상이여야 함");
      $("#name").focus();
      $(".name-alert").show();
      return false;
    } else {
      $(".name-alert").hide();
    }

    let pw1 = $("#pw1").val();
    let pw2 = $("#pw2").val();
    if (pw1.length < 8) {
      // alert("비밀번호는 8자리 이상만 받습니다.");
      $("#pw1").focus();
      $(".pw-alert").show();
      return false;
    }

    if (pw2.length < 8) {
      // alert("비밀번호는 8자리 이상만 받습니다.");
      $("#pw2").focus();
      $(".pw-alert").show();
      return false;
    }

    if (pw1 != pw2) {
      // alert("비밀번호는 서로 같아야 합니다.");
      $("#pw1").val(""); // val 안의 값을 넣지만, 빈칸이면 값을 지우는 효과를 가짐
      $("#pw1").focus();
      $(".pw-alert").show();
      return false;
    }
    $(".pw-alert").hide();
  }

  function idCheck() {
    // alert("ID 검사를 누름");
    let id = $("#id").val();
    const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"\sㄱ-ㅎㅏ-ㅣ가-힣]/g; //한글+공백
    // alert(regExp.test(id)); // 한글,공백 포함여부 검사하는 정규식
    if (id.length < 3 || regExp.test(id)) {
      $(".id-alert").show();
      $("#joinBtn").attr("disabled", "disabled"); // 비활성화 시키기
    } else {
      // $(".id-alert").hide();
      // alert(id);
      $.ajax({
        url : './idCheck', // 어디로 보낼 지 정함
        type : 'post', // 보내는 타입 설정
        dataType : 'text', // 보내는 데이터의 타입 설정
        data : {
          'id' : id
        }, // 앞이 보낼 이름
        success : function(result) {
          // alert("통신성공~");
          if (result == 1) {
            // alert("이미 가입되어 있어요.");
            // $(".id-alert").html("<p class='alert'>가입 불가능한 ID 입니다.<p>");
            $(".id-alert").append("<p class='alert'>이미 가입되어 있음</p>");
            $(".id-alert .alert").css("color", "tomato");
            idCheckBool = false;
            $("#joinBtn").attr("disabled", "disabled"); // 비활성화 시키기
            // $("#id").focus();
          } else {
            // alert("가입 가능해요.");
            // $(".id-alert").html("<p>가입 가능한 ID 입니다.<p>");
            $(".id-alert").append("<p class='alert'>가입 가능</p>");
            $(".id-alert .alert").css("color", "green");
            idCheckBool = true;
            $("#joinBtn").removeAttr("disabled") // 비활성화를 제거 = 활성화
            // $("#name").focus();
          }
        },
        error : function(request, status, error) {
          alert("문제가발생했어요~");
        }
      });
    }
    return false;
  }
</script>

 

게시글에 접속한 사람을 확인하여 중복 count 하지 않기

Board 에서 count 열을 삭제

 

이후 다시 접속한 사람의 기록이 남는 테이블을 하나 생성

 

방문 시 방문한 시간, 방문한 글 번호, 방문한 회원 번호 저장 - DAO 작성

  public void countUp(int no, String mid) {
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT COUNT(*) as count FROM visitcount WHERE board_no=? AND mno=(SELECT mno FROM member WHERE mid=?)";
    int result = 0;
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setInt(1, no);
      pstmt.setString(2, mid);
      rs = pstmt.executeQuery();
      
      if (rs.next()) {
        result = rs.getInt("count");
        if (result == 0) {
          realCountUp(no, mid);
        }
      }
    } catch (SQLException e) {
      System.out.println("BoardDAO - countUp 에러");
      // e.printStackTrace();
    } finally {
      close(conn, pstmt, rs);
    }
  }

 

글의 방문자 수를 count 하여 해당 내용을 출력

 

댓글 코멘트 만들기

댓글에도 글 번호, 회원번호, 댓글 내용, 댓글 작성일, 좋아요 수 테이블 생성

 

Board 게시판에도 댓글이 1개 이상 이면 제목 옆에 댓글 수 출력되게 변경

- > JSTL 사용

<td class="title"><a href="./detail?no=${row.no}">
${row.title }&ensp;<c:if test="${row.comment gt 0 }">
<span>${row.comment }</span></c:if></a></td>

 

글 조회시 외래키로 글 번호와 회원정보 등록하여 글 삭제가 불가 - > 현재는 불가

그리하여 글 삭제 시 실제 글이 삭제되는 것이 아닌 노출만 안되게 설정

DB 에 enum 으로 글의 노출 여부 설정

기본값은 1, 삭제 시 0 으로 업데이트 예정

 

boardview 에도 board_del 이 1 인 글만 조회되게 설정 추가

WHERE board_del = 1 조건 넣기

 

글 삭제 DAO 도 수정

다 똑같지만 SQL 문만 UPDATE 로 수정

String sql = "UPDATE board SET board_del='0' " +
"WHERE board_no=? AND mno=(SELECT mno FROM c23c_26.member WHERE mid=?)";

 

겉으로는 글 삭제가 된 것으로 보이지만 실제로는 글 삭제가 아닌 노출만 안되게 설정됨