JSP-웹페이지 구현(인트로,목록, 글쓰기)

기본환경 설정

JAVA BEAN 설정

BbsDTO.java

package net.bbs;

public class BbsDTO {
	//전송객체 DTO 
	private int  bbsno;
	private String wname;
	private String subject;
	private String content;
	private String passwd; 
	private int readcnt;
	private String regdt;
	private int grpno;
	private int indent;
	private int  ansnum;
	private String ip;
	
//생성자 함수 CONSTRUCTOR
public BbsDTO() {
	
}

//SOUCRCE-> GETTER SETTER 생성

public int getBbsno() {
	return bbsno;
}

public void setBbsno(int bbsno) {
	this.bbsno = bbsno;
}

public String getWname() {
	return wname;
}

public void setWname(String wname) {
	this.wname = wname;
}

public String getSubject() {
	return subject;
}

public void setSubject(String subject) {
	this.subject = subject;
}

public String getContent() {
	return content;
}

public void setContent(String content) {
	this.content = content;
}

public String getPasswd() {
	return passwd;
}

public void setPasswd(String passwd) {
	this.passwd = passwd;
}

public int getReadcnt() {
	return readcnt;
}

public void setReadcnt(int readcnt) {
	this.readcnt = readcnt;
}

public String getRegdt() {
	return regdt;
}

public void setRegdt(String regdt) {
	this.regdt = regdt;
}

public int getGrpno() {
	return grpno;
}

public void setGrpno(int grpno) {
	this.grpno = grpno;
}

public int getIndent() {
	return indent;
}

public void setIndent(int indent) {
	this.indent = indent;
}

public int getAnsnum() {
	return ansnum;
}

public void setAnsnum(int ansnum) {
	this.ansnum = ansnum;
}

public String getIp() {
	return ip;
}

public void setIp(String ip) {
	this.ip = ip;
}

@Override
public String toString() {
	return "BbsDTO [bbsno=" + bbsno + ", wname=" + wname + ", subject=" + subject + ", content=" + content + ", passwd="
			+ passwd + ", readcnt=" + readcnt + ", regdt=" + regdt + ", grpno=" + grpno + ", indent=" + indent
			+ ", ansnum=" + ansnum + ", ip=" + ip + "]";
}
	

}

BbsDAO.java

package net.bbs;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;


import net.utility.DBClose;
import net.utility.DBOpen;

public class BbsDAO {
//	DB관련된 작업 SQL문 CRUD
	private DBOpen dbopen=null;
	private Connection con=null;
	private PreparedStatement pstmt=null;
	private ResultSet rs=null;
	private StringBuilder sql=null;
	
	public BbsDAO() {
		dbopen= new DBOpen();
	}
	
	
	public int create(BbsDTO dto) {
		int cnt=0;
		try {
			con=dbopen.getConnection();
			
			sql=new StringBuilder();
			sql.append(" insert into tb_bbs(bbsno,wname,subject,content,passwd,ip,grpno) ");
			sql.append(" values(bbs_seq.nextval, ?, ?, ?, ?, ?, (select nvl(max(bbsno),0)+1 from tb_bbs)) ");
			
			pstmt=con.prepareStatement(sql.toString());
			pstmt.setString(1, dto.getWname());
			pstmt.setString(2, dto.getSubject());
			pstmt.setString(3, dto.getContent());
			pstmt.setString(4, dto.getPasswd());
			pstmt.setString(5, dto.getIp());
			
			cnt=pstmt.executeUpdate();
			
		} catch (Exception e) {
			System.out.println("행추가 실패"+e);
		}finally {
			DBClose.close(con,pstmt);
		}
		return cnt;
	}
	
	public ArrayList<BbsDTO> list() {
		ArrayList<BbsDTO> list= null;
		try {
			con=dbopen.getConnection();
			
			sql=new StringBuilder();
			sql.append(" select bbsno, wname, subject, readcnt, regdt, indent ");
			sql.append(" from tb_bbs ");
			sql.append(" order by grpno desc, ansnum asc ");
			
			pstmt=con.prepareStatement(sql.toString());
			rs=pstmt.executeQuery();
			
			if(rs.next()){
				list=new ArrayList<>();
				do {	//커서가 가리키는 한줄씩 sungjukDto에 저장
					BbsDTO dto=new BbsDTO();
					dto.setBbsno(rs.getInt("bbsno"));;
					dto.setWname(rs.getString("wname"));
					dto.setSubject(rs.getString("subject"));
					dto.setReadcnt(rs.getInt("readcnt"));
					dto.setRegdt(rs.getString("regdt"));
					dto.setIndent(rs.getInt("indent"));
					list.add(dto);//list에 저장
					
				}while(rs.next());
			}else{
				list=null;
			}
			
			
			
		}catch (Exception e) {
			System.out.println("목록 가져오기 실패"+e);
		}finally {
			DBClose.close(con,pstmt,rs);
		}
		return list;
	}
	
	
	public int count() {
		int cnt=0;
		try {
			con=dbopen.getConnection();
			
			sql=new StringBuilder();
			sql.append(" select count(*) as cnt ");
			sql.append(" from tb_bbs ");
			
			pstmt=con.prepareStatement(sql.toString());
			rs=pstmt.executeQuery();
			
			if(rs.next()){
				cnt=rs.getInt(1);
			}
		}catch (Exception e) {
			System.out.println("갯수 세기 실패"+e);
		}
		return cnt;
	}
}

CSS

layout.css
인트로 페이지인 index.css 및 template파일 적용

  @charset "UTF-8";
  @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

  body {
    font: 20px Montserrat, sans-serif;
    line-height: 1.8;
    color: #f5f6f7;
   
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1 { 
    background-color: #d1eaea; 
    color: #ffffff;
  }
  .bg-2 { 
    background-color: #474e5d; 
    color: #ffffff;
  }
  .bg-3 { 
    background-color: #ffffff; 
    color: #555555;
  }
  .bg-4 { 
    background-color: #0e274c; 
    color:#F8E6E0;
  }
  .container-fluid {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
  }
  .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: bold;
  }
  .navbar-nav  li a:hover {
    color: #1abc9c !important;
    cursor: wait;
  }

JSP TEMPLATE

인트로 페이지
index.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>MY Web</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./css/layout.css">
<style>
</style>
<style>
    #clock{ width:500px; height:40px; color:blue; font-weight:bold; font-size:30px; position: relative; margin: 0 auto;}    
  </style>

  <script>
        function showtime(){
        const d=new Date();//시스템의 현재 날짜 정보 가져오기 (년월일시분초)

        let today="";
        today += d.getFullYear() + "."; //2023.

        if(d.getMonth()+1<10){
            today += "0";
        }//if end
        today += d.getMonth()+1 + ".";  //2023.02.

        if(d.getDate()<10){
            today += "0";
        }//if end
        today += d.getDate();           //2023.02.16

        switch(d.getDay()){
        case 0 : today+=" (일) "; break;
        case 1 : today+=" (월) "; break;
        case 2 : today+=" (화) "; break;
        case 3 : today+=" (수) "; break;
        case 4 : today+=" (목) "; break;
        case 5 : today+=" (금) "; break;
        case 6 : today+=" (토) "; break;
        }//switch end


        if(d.getHours()<12){
        today += " AM ";
        }else{
        today += " PM ";                  //2023.02.16 (목) AM
        }//if end

        if(d.getHours()<13){
        today += d.getHours() + ":";
        }else{
        today += d.getHours()-12 + ":"; 
        }//if end                          //2023.02.16 (목) AM 9

        if(d.getMinutes()<10){
        today+="0";    
        }//if end
        today+=d.getMinutes() + ":";       //2023.02.16 (목) AM 9:48

        if(d.getSeconds()<10){
        today+="0";    
        }//if end
        today+=d.getSeconds();             //2023.02.16 (목) AM 9:48:21
                    
        document.getElementById("clock").innerText = today;

        //1초후에 showtime함수를 호출
        timer = setTimeout(showtime, 1000);

    }//showtime() end

    let timer; //전역변수

    function killtime() {
        clearTimeout(timer);//시간해제
    }//killtime() end
  </script>

</head>
<body onunload="killtime()">

<!-- Navbar -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=request.getContextPath()%>/index.jsp">HOME</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./bbs/bbsList.jsp">게시판</a></li>
        <li><a href="#">공지사항</a></li>
        <li><a href="#">로그인</a></li>
        <li><a href="#">포토갤러리</a></li>
        <li><a href="#">메일보내기</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- CONTENT  -->
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
   <img src="./images/welcome.jpg" class="img-responsive img-circle margin" style="display:inline" alt="ryan" width="50%">
  </div>

  <!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">    
  <div class="row">
    <div class="col-xs-12">
     
      <div id="clock"><script>showtime();</script></div>
    </div>
  </div>
</div>

<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
  Copyright &copy; 2023 MY Web 
  <div id="sfcdzzbhbqknl6gpf9ttl66rpqarj6c7slx"></div>
<script type="text/javascript" src="https://counter2.optistats.ovh/private/counter.js?c=dzzbhbqknl6gpf9ttl66rpqarj6c7slx&down=async" async></script>

<noscript><a href="https://www.freecounterstat.com" title="page counter"><img src="https://counter2.optistats.ovh/private/freecounterstat.php?c=dzzbhbqknl6gpf9ttl66rpqarj6c7slx" border="0" title="page counter" alt="page counter"></a></noscript>
  
</footer>
</body>
</html>

template.jsp
본문이 들어가는 영역 header와 footer 파일을 include해서 사용한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../header.jsp" %>

<!-- 본문 시작 -->
여기에 본문 내용 작성합니다
<!-- 본문 끝 -->

<%@ include file="../footer.jsp" %>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>My Web</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <!-- layout.css import -->
  <link rel="stylesheet" href="../css/layout.css">
  <style></style>
</head>
<body>

<!-- 메인 카테고리 시작 -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=request.getContextPath()%>/index.jsp">HOME</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../bbs/bbsList.jsp">게시판</a></li>
        <li><a href="#">공지사항</a></li>
        <li><a href="#">로그인</a></li>
        <li><a href="#">포토갤러리</a></li>
        <li><a href="#">메일보내기</a></li>
      </ul>
    </div>
  </div>
</nav><!-- 메인 카테고리 끝 -->

<!-- Content 시작 -->
<div class="container-fluid bg-3 text-center">    
  <div class="row">
    <div class="col-xs-12">

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    </div><!-- col-xs-12 끝 -->   
  </div><!-- row 끝-->
</div><!-- Second Container 끝-->

<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
    Copyright &copy; 2023 MyWeb
    
<div id="sfcdzzbhbqknl6gpf9ttl66rpqarj6c7slx"></div>
<script type="text/javascript" src="https://counter2.optistats.ovh/private/counter.js?c=dzzbhbqknl6gpf9ttl66rpqarj6c7slx&down=async" async></script>
<noscript><a href="https://www.freecounterstat.com" title="page counter"><img src="https://counter2.optistats.ovh/private/freecounterstat.php?c=dzzbhbqknl6gpf9ttl66rpqarj6c7slx" border="0" title="page counter" alt="page counter"></a></noscript>
    
</footer>
</body>
</html>

---

bbs.jsp

출력 페이지
bbsForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../header.jsp" %>

<!-- 본문 시작 -->
<h3>글쓰기</h3>
<p><a href="bbsList.jsp">글목록</a></p>
<!-- 이벤트는 myscript.js에 함수 작성
액션을 실행하기전에 폼을 한번 찍고 간다 -->
<form name="bbsfrm" id="bbsfrm" method="post" action="bbsIns.jsp" onsubmit="return bbsCheck()">
<table class="table">
<tr>
   <th class="success">작성자</th>
   <td><input type="text" name="wname" id="wname" class="form-control" maxlength="20" required></td>
</tr>
<tr>
   <th class="success">제목</th>
   <td><input type="text" name="subject" id="subject" class="form-control" maxlength="100" required></td>
</tr>
<tr>
   <th class="success">내용</th>
   <td><textarea rows="5"  class="form-control" name="content" id="content"></textarea></td>
</tr>
<tr>
   <th class="success">비밀번호</th>
   <td><input type="password" name="passwd" id="passwd" class="form-control" maxlength="10" required></td>
</tr>
<tr>
    <td colspan="2" align="center">
       <input type="submit" value="쓰기" class="btn btn-success">
       <input type="reset"  value="취소" class="btn btn-danger">
    </td>
</table>
</form>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp" %>

bbsIns.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp" %>

<!-- 본문 시작 -->
<%
//사용자가 입력한 정보를 가져오기
String wname=request.getParameter("wname").trim();
String subject=request.getParameter("subject").trim();
String content=request.getParameter("content").trim();
String passwd=request.getParameter("passwd").trim();
String ip =request.getRemoteAddr();

//dto객체에 담기
dto.setWname(wname);
dto.setSubject(subject);
dto.setContent(content);
dto.setPasswd(passwd);
dto.setIp(ip);

int cnt=dao.create(dto);

if(cnt==0){
	out.println("<p>글 목록 추가 실패</p>");
	out.println("<p><a href='javascript:history.back()'>재시도</a></p>");
}else{
	out.println("<script>");
	out.println("    alert(' 게시글 목록 추가 성공');");
	out.println(" location.href='bbsList.jsp';");	//목록페이지 이동
	out.println("</script>");
}
%>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp" %>

bbsList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp" %>

<!-- 본문 시작 -->
<h3>글목록</h3>
<p><a href="bbsForm.jsp">글쓰러 가기</a></p>

<table class="table table-hover" border="1">
<thead>
<tr class="info" >
<th>제목</th>
<th>조회수</th>
<th>작성자</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<%
ArrayList<BbsDTO> list = dao.list();
if(list==null){
	out.println(" <tr>");
	out.println(" <td colspan='5'>" );
	out.println(" <strong> 작성 글없음 <strong>" );
	out.println(" </td>" );
	out.println(" <tr>");
}else{
	for(int i=0;i<list.size();i++){
	dto=list.get(i);
%>
<tr>
<td style="text-align:left"><%=dto.getSubject() %></td>
<td><%=dto.getReadcnt() %></td>
<td><%=dto.getWname() %></td>
<td><%=dto.getRegdt().substring(0,10) %></td>
</tr>
<%
	}
	int totalRecord=dao.count();
	out.println("<tr>");
	out.println("<td colspan='4' style='text-align:center;'>");
	out.println("	글갯수:<strong>" +totalRecord +"</strong>");
	out.println("</td>");
	out.println("</tr>");		
}
%>
</tbody>
</table>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp" %>