240123 HTML 홈페이지 만들기

Servlet 생성 시 나오는 항목들 알아보기

super() 는 어떤 역할일까

 

MyInfo 페이지에 자신이 봤던 글 목록 출력하기 - 아직 LIMIT 은 안해둠

내가 DTO 는 BoardDTO 그대로 가져가도 충분하여 BoardDTO 로 사용한 것과

선생님이 Map 으로 그냥 만든 것 두가지

   // 자신이 읽은 글 목록 출력하기, 내가 만든 것
List<BoardDTO> readList = bdao.readList((String)session.getAttribute("mid"));
request.setAttribute("readList", readList);
// 자신이 읽은 글 목록 출력하기, 선생님이 해주는 거
List<Map<String, Object>> readData = dao.readData(dto);
request.setAttribute("readData", readData);

 

내가 BoardDAO 에 새로 method 생성

  public List<BoardDTO> readList(String mid) {
    List<BoardDTO> list = null;
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT * FROM visitview WHERE mno=(SELECT mno FROM c23c_26.member WHERE mid=?)";
    
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setString(1, mid);
      rs = pstmt.executeQuery();
      list = new ArrayList<BoardDTO>();
      
      while (rs.next()) {
        BoardDTO dto = new BoardDTO();
        dto.setNo(rs.getInt("board_no"));
        dto.setTitle(rs.getString("board_title"));
        dto.setDate(rs.getString("vdate"));
        dto.setMno(rs.getInt("mno"));
        list.add(dto);
      }
    } catch (SQLException e) {
      e.printStackTrace();
      System.out.println("BoardDAO - readList 오류");
    }
    return list;
  }

 

DB 에도 따로 view 생성

 

출력문 -> myInfo.jsp

<article class="visitTable">
  <h3>내가만든거</h3>
  <table>
    <thead>
      <tr>
        <th>글번호</th>
        <th>글제목</th>
        <th>방문시각</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach items="${readList }" var="read">
        <tr>
          <td>${read.no }</td>
          <td class="visitTitle"><a href="./detail?no=${read.no }">${read.title }</a></td>
          <td>${read.date}</td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
</article>

 

선생님이 작성한 내용의 DAO

  public List<Map<String, Object>> readData(MemberDTO dto) {
    List<Map<String, Object>> data = new ArrayList<Map<String,Object>>();
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT v.vno, v.board_no, v.mno, "
        + "v.vdate, b.board_title FROM visitcount v "
        + "JOIN board b ON v.board_no = b.board_no "
        + "WHERE v.mno=(SELECT mno FROM c23c_26.member "
        + "WHERE c23c_26.member.`mid`=?)"
        + "ORDER BY v.vdate desc;";
    
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setString(1, dto.getMid());
      rs = pstmt.executeQuery();
      
      while (rs.next()) {
        Map<String, Object> map = new HashMap<>();
        map.put("vno", rs.getInt("vno"));
        map.put("board_no", rs.getInt("board_no"));
        map.put("board_title", rs.getString("board_title"));
        // map.put("mno", rs.getInt("mno"));
        map.put("vdate", rs.getString("vdate"));
        data.add(map);
      }
    } catch (SQLException e) {
      e.printStackTrace();
      System.out.println("MemberDAO - readData 오류");
    } finally {
      close(conn, pstmt, rs);
    }
    return data;
  }

 

SQL 쿼리문에 JOIN 과 서브쿼리를 사용하여 작성

 

선생님꺼 출력문, 시간도 따로 세팅하는 것을 시연

<article class="teacherTable">
  <h3>선생님꺼따라하기</h3>
  <table>
    <thead>
      <tr>
        <th>번호</th>
        <th>글번호</th>
        <th>제목</th>
        <th>조회 시간</th>
      </tr>
    </thead>
  <tbody>
  <c:forEach items="${readData }" var="readData">
    <tr>
      <td>${readData.vno }</td>
      <td>${readData.board_no }</td>
      <td onclick="location.href='./detail?no=${readData.board_no }'">${readData.board_title }</td>
      <fmt:parseDate value="${readData.vdate }" var="date" pattern="yyyy-MM-dd HH:mm:ss"/>
      <td><fmt:formatDate value="${date }" pattern="yy년 MM월 dd일 HH시 mm분"/></td>
      <%-- <td>${readData.vdate }</td> --%>
    </tr>
  </c:forEach>
  </tbody>
  </table>
</article>

 

현재 내용쓰는 칸은 summernote 로 인해 </div> 등 잘 막히지만

제목이나 댓글은 </div> 등 다른 태그를 작성하면 먹힘

해당 내용 막아보기 -> Util.java 에서 막는 것 만들기

  public static String removeTag(String str) {
    str = str.replaceAll("<", "&lt");
    str = str.replaceAll(">", "&gt");
    return str;
  }

 

단지 <, > 기호를 HTML 에서 사용하는 코드로 변경할 뿐

 

다음은 엔터 처리해주기

  public static String addBR(String str) {
    return str.replaceAll("(\r\n|\r|\n|\n\r)", "<br>");
  }

 

코드 중 엔터 처리하는 것들은 다 br 태그로 변경

중요한 것은 특수기호 처리한 후에 적어야 함 -> 처리를 미리 해버리면 br태그도 &lt;br&gt; 로 변경됨

commentContent = Util.addBR(commentContent);

 

title 에는 엔터 안넣음

 

게시글에 IP 출력하기

DB board 와 comment 쪽에 ip 넣음

이후 게시글과 댓글 불러오기 때에도 ip 불러오기

  public BoardDTO detail(int no) {
    BoardDTO dto = new BoardDTO();
    Connection conn = DBConnection.getInstance().getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT b.board_no, b.board_title, b.board_content, m.mname, m.mid,"
        + "b.board_date, b.board_ip, "
        + "(SELECT COUNT(*) FROM visitcount WHERE board_no=b.board_no) AS board_count "
        + "FROM board b JOIN member m "
        + "ON b.mno = m.mno WHERE board_no=?";
    
    // boardCountPlus(no, conn);
    
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setInt(1, no);
      rs = pstmt.executeQuery();

      if (rs.next()) {
        dto.setNo(rs.getInt("board_no"));
        dto.setTitle(rs.getString("board_title"));
        dto.setContent(rs.getString("board_content"));
        dto.setDate(rs.getString("board_date"));
        dto.setCount(rs.getInt("board_count"));
        dto.setIp(rs.getString("board_ip"));
        // dto.setWrite(rs.getString("board_write"));
        dto.setWrite(rs.getString("mname"));
        dto.setMid(rs.getString("mid"));
      }
    } catch (SQLException e) {
      e.printStackTrace();
    } finally {
      close(conn, pstmt, rs);
    }
    return dto;
  }

 

DB 에 저장되는 IP를 중간에 마킹한 IP로 하고싶지만

나중에 ip를 조회할 일이 있을 경우 전체 ip가 필요하여 출력만 마킹된 ip로 하기로 함

 

Util 쪽에 ip 를 마킹해주는 메소드 생성

나는 substring 과 indexOf 를 사용하여 하였지만

ChatGPT 는 split 을 이용하여 진행, 이것이 더 좋은 듯

.

  public static String changeIp(String str) {
    str = str.substring(0, str.indexOf(".") + 1) + "○" + str.substring(str.indexOf(".",4));
    return str;
  }
  
  public static String changeIp2(String ip) {
    if (ip.indexOf(".") != -1) {
      String[] temp = ip.split("\\."); // . 은 무작위라는 뜻이 있지만 \. 은 실제 . 을 찾음
      temp[1] = "○"; // \ 을 입력하기 위해서는 앞에 \ 를 붙여줘야 함 그래서 \\. 입력
      ip = String.join(".", temp); // 배열을 합쳐주는 메소드, 배열 사이에 . 입력
    }
    return ip;
  }

 

리턴된 문자열을 따로 request.setAttribute 로 세팅해줌

String ip = Util.changeIp(dto.getIp());
request.setAttribute("ip", ip);

 

JSP 에서 ip는 따로 출력

<span class="visitIP">${ip }</span> <span>${detail.count }</span>

 

-> 이렇게 출력됨

 

기존에 작성된 게시글이나 댓글들은 IP 가 null 일 경우 처리하는 방법을 알고 싶었으나

내 실력 부족으로,, 실패..