1. ssi.jsp
ssi란 Server Side Include 라는 뜻으로 서버 페이지에 공통적으로 Include 되는 항목들을 모아둔 페이지이다.
이런 페이지를 만들면 이 jsp파일을 include하는 것만으로도 필요한 페이지들을 포함시킬 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- ssi.jsp 공통페이지(Server Side Include) --%>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%@ page import="net.sungjuk.*" %>
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"/>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"/>
<%request.setCharacterEncoding("UTF-8");%>
2. sungjukForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukForm.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {margin: auto; text-align: center; font-family: 'RIDIBatang', 'normal'; font-size:15px;}
table {margin: auto;}
th {text-align: center;}
.noti1 {background-color: white; text-align: center;}
.noti2 {color: black;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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">SUNGJUK</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="sungjukForm.jsp">성적입력</a></li>
<li><a href="sungjukList.jsp">성적목록</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적상세보기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적목록의<br>상세보기를 누르세요</span></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적수정하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적상세보기에서<br>수정을 누르세요</span></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>* 성적을 입력하세요 *</h3>
<form name="sungjukfrm" id="sungjukfrm" method="post" action="sungjukIns.jsp">
<table class="table table-hover">
<tr>
<th>이름 : </th>
<td><input type="text" style="width: 120px;" name="uname" maxlength="20" required autofocus></td>
</tr>
<tr>
<th>국어 : </th>
<td><input type="number" style="width: 120px;" name="kor" size="5" min="0" max="100" required autofocus placeholder="숫자입력"></td>
</tr>
<tr>
<th>영어 : </th>
<td><input type="number" style="width: 120px;" name="eng" size="5" min="0" max="100" required autofocus placeholder="숫자입력"></td>
</tr>
<tr>
<th>수학 : </th>
<td><input type="number" style="width: 120px;" name="mat" size="5" min="0" max="100" required autofocus placeholder="숫자입력"></td>
</tr>
<tr>
<th>주소 : </th>
<td>
<select name="addr" style="width: 120px;">
<option value="Seoul">서울</option>
<option value="Jeju">제주</option>
<option value="Suwon">수원</option>
<option value="Busan">부산</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" class="btn btn-success" value=" 전송 ">
<input type="reset" class="btn btn-danger" value=" 취소 ">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
3. sungjukIns.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.sungjuk.*" %>
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"/>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukIns.jsp</title>
</head>
<body>
<h3>* 성적 입력 결과 페이지 *</h3>
<%
request.setCharacterEncoding("UTF-8");
String uname = request.getParameter("uname").trim();
int kor = Integer.parseInt(request.getParameter("kor").trim());
int eng = Integer.parseInt(request.getParameter("eng").trim());
int mat = Integer.parseInt(request.getParameter("mat").trim());
String addr = request.getParameter("addr");
int aver = (kor+eng+mat)/3;
// 1) dto 객체를 사용하기 전
// int cnt = dao.insert(uname, kor, eng, mat, aver, addr);
// 2) dto 객체를 사용한 경우
// 전달값을 모두 dto 객체에 담기
dto.setUname(uname);
dto.setKor(kor);
dto.setEng(eng);
dto.setMat(mat);
dto.setAver(aver);
dto.setAddr(addr);
int cnt = dao.create(dto);
if(cnt==0){
out.println("<p>성적 입력에 실패했습니다</p>");
out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
} else{
out.print("<script>");
out.print(" alert('성적이 입력되었습니다');");
out.print(" location.href='sungjukList.jsp';");
out.print("</script>");
} // if end
%>
</body>
</html>
4. sungjukList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.sungjuk.*" %>
<%@ page import="java.util.ArrayList"%>
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"/>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukList.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {margin: auto; text-align: center; font-family: 'RIDIBatang', 'normal'; font-size:15px;}
table {margin: auto;}
th {text-align: center;}
.noti1 {background-color: white; text-align: center;}
.noti2 {color: black;}
footer {height: 50px;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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">SUNGJUK</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="sungjukForm.jsp">성적입력</a></li>
<li class="active"><a href="sungjukList.jsp">성적목록</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적상세보기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적목록의<br>상세보기를 누르세요</span></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적수정하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적상세보기에서<br>수정을 누르세요</span></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>* 성적 목록 *</h3>
<table class="table table-condensed">
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>등록일</th>
<th>상세정보</th>
</tr>
<%
ArrayList<SungjukDTO> list=dao.list();
if(list==null){
out.print("<tr>");
out.print(" <td colspan='5'>글없음!!</td>");
out.print("</tr>");
} else {
for(int idx=0; idx<list.size(); idx++){
dto=list.get(idx);
%>
<tr>
<td><%=dto.getUname()%></td>
<td><%=dto.getKor()%></td>
<td><%=dto.getEng()%></td>
<td><%=dto.getMat()%></td>
<td><%=dto.getWdate().substring(0,10)%></td>
<td><a class="detail" href="sungjukRead.jsp?sno=<%=dto.getSno()%>">상세보기</a></td>
</tr>
<%
}
}
%>
</table>
</div>
<footer>
<div>열심히 해야 살아남는다</div>
</footer>
</body>
</html>
5. sungjukRead.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%--
<jsp:include page="ssi.jsp"/>
도 같은 기능을 하지만 공통 페이지에 jsp코드가 많이 쓰여있다면 지시자를 활용한 include를 활용해야한다.
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukRead.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {margin: auto; text-align: center; font-family: 'RIDIBatang', 'normal'; font-size:15px;}
table {margin: auto;}
th {text-align: center;}
.noti1 {background-color: white; text-align: center;}
.noti2 {color: black;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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">SUNGJUK</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="sungjukForm.jsp">성적입력</a></li>
<li><a href="sungjukList.jsp">성적목록</a></li>
<li class="active"><a class="dropdown-toggle" data-toggle="dropdown">성적상세보기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적목록의<br>상세보기를 누르세요</span></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적수정하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적상세보기에서<br>수정을 누르세요</span></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h3>* 성적 상세보기 *</h3>
<div class="container">
<div class="table-responsive">
<table class="table">
<%
int sno = Integer.parseInt(request.getParameter("sno"));
dto = dao.read(sno);
if(dto==null){
out.print("자료 없음!!");
} else{
%>
<tr>
<th>이름</th>
<td><%=dto.getUname()%></td>
</tr>
<tr>
<th>국어</th>
<td><%=dto.getKor()%></td>
</tr>
<tr>
<th>영어</th>
<td><%=dto.getEng()%></td>
</tr>
<tr>
<th>수학</th>
<td><%=dto.getMat()%></td>
</tr>
<tr>
<th>평균</th>
<td><%=dto.getAver()%></td>
</tr>
<tr>
<th>주소</th>
<td><%=dto.getAddr()%>
<%
// 주소 한글로 출력
String addr = dto.getAddr();
if(addr.equals("Seoul")){
out.print("서울");
} else if(addr.equals("Jeju")){
out.print("제주");
} else if(addr.equals("Suwon")){
out.print("수원");
} else if(addr.equals("Busan")){
out.print("부산");
} // if end
%>
</td>
</tr>
<tr>
<th>작성일</th>
<td><%=dto.getWdate()%></td>
</tr>
<tr>
<td colspan="2" align="center">
<a class="btn btn-default" href="sungjukUpdate.jsp?sno=<%=dto.getSno()%>">수정</a>
<a class="btn btn-default" href="sungjukDel.jsp?sno=<%=dto.getSno()%>">삭제</a>
</td>
</tr>
<%
} // if end
%>
</table>
</div>
</div>
</body>
</html>
6. sungjukDel.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukDel.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {margin: auto; text-align: center; font-family: 'RIDIBatang', 'normal'; font-size:15px;}
table {margin: auto;}
th {text-align: center;}
.noti1 {bac kground-color: white; text-align: center;}
.noti2 {color: black;}
</style>
</head>
<body>
<h3>* 성적 삭제 *</h3>
<div class="container">
<div class="table-responsive">
<table class="table">
<%
int sno = Integer.parseInt(request.getParameter("sno"));
int cnt = dao.delete(sno);
if(cnt==0){
out.print("성적 삭제에 실패했습니다");
out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
} else{
out.print("<script>");
out.print(" alert('삭제 되었습니다');");
out.print(" location.href='sungjukList.jsp';");
out.print("</script>");
} // if end
%>
</table>
</div>
</div>
</body>
</html>
7. sungjukUpdate.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukUpdate.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {margin: auto; text-align: center; font-family: 'RIDIBatang', 'normal'; font-size:15px;}
table {margin: auto;}
th {text-align: center;}
.noti1 {background-color: white; text-align: center;}
.noti2 {color: black;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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">SUNGJUK</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="sungjukForm.jsp">성적입력</a></li>
<li><a href="sungjukList.jsp">성적목록</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown">성적상세보기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적목록의<br>상세보기를 누르세요</span></li>
</ul>
</li>
<li class="active"><a class="dropdown-toggle" data-toggle="dropdown">성적수정하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="noti1"><span class="noti2">성적상세보기에서<br>수정을 누르세요</span></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h3>* 성적 입력 결과 페이지 *</h3>
<div class="container">
<%
int sno = Integer.parseInt(request.getParameter("sno"));
dto = dao.read(sno);
if(dto==null){
out.print("자료 없음!!");
} else{
String addr = dto.getAddr();
%>
<form name="sungjukfrm" id="sungjukfrm" method="post" action="sungjukUpdateProc.jsp">
<input type="hidden" name="sno" value="<%=dto.getSno()%>">
<table class="table table-responsive">
<tr>
<th>이름 : </th>
<td><input type="text" name="uname" value="<%=dto.getUname()%>" maxlength="20" required autofocus></td>
</tr>
<tr>
<th>국어 : </th>
<td><input type="number" name="kor" value="<%=dto.getKor()%>" size="5" min="0" max="100" placeholder="숫자입력"></td>
</tr>
<tr>
<th>영어 : </th>
<td><input type="number" name="eng" value="<%=dto.getEng()%>" size="5" min="0" max="100" placeholder="숫자입력"></td>
</tr>
<tr>
<th>수학 : </th>
<td><input type="number" name="mat" value="<%=dto.getMat()%>" size="5" min="0" max="100" placeholder="숫자입력"></td>
</tr>
<tr>
<th>주소 : </th>
<td>
<select name="addr">
<option value="Seoul" <%if(addr.equals("Seoul")) {out.print("selected");}%>>서울</option>
<option value="Jeju" <%if(addr.equals("Jeju")) {out.print("selected");}%>>제주</option>
<option value="Suwon" <%if(addr.equals("Suwon")) {out.print("selected");}%>>수원</option>
<option value="Busan" <%if(addr.equals("Busan")) {out.print("selected");}%>>부산</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" class="btn btn-default" value="수정">
<input type="reset" class="btn btn-default" onClick="history.back()" value="취소">
</td>
</tr>
</table>
</form>
<%
} // if end
%>
</div>
</body>
</html>
8. sungjukUpdateProc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sungjukUpdateProc.jsp</title>
</head>
<body>
<h3>* 성적 수정 *</h3>
<%
request.setCharacterEncoding("UTF-8");
String uname = request.getParameter("uname").trim();
int kor = Integer.parseInt(request.getParameter("kor").trim());
int eng = Integer.parseInt(request.getParameter("eng").trim());
int mat = Integer.parseInt(request.getParameter("mat").trim());
String addr = request.getParameter("addr");
int aver = (kor+eng+mat)/3;
int sno = Integer.parseInt(request.getParameter("sno").trim());
dto.setUname(uname);
dto.setKor(kor);
dto.setEng(eng);
dto.setMat(mat);
dto.setAver(aver);
dto.setAddr(addr);
dto.setSno(sno);
int cnt = dao.update(dto);
if(cnt==0){
out.println("<p>성적 입력에 실패했습니다</p>");
out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
} else{
out.print("<script>");
out.print(" alert('성적이 입력되었습니다');");
out.print(" location.href='sungjukList.jsp';");
out.print("</script>");
} // if end
%>
</body>
</html>'⁂ JSP > : 기본 익히기' 카테고리의 다른 글
| [JSP] #7 SCOPE- JSP의 내장객체와 내부변수 (0) | 2022.10.17 |
|---|---|
| [JSP] #6 웹어플리케이션의 구조 (0) | 2022.10.11 |
| [JSP] #5-2 DBOpen, DBClose, SungjukDTO, SungjukDAO (0) | 2022.10.07 |
| [JSP] #5-1 Javabeans (0) | 2022.10.07 |
| [JSP] #4-2 jsp로 CRUD 작업하기(SQL 문법) - 공사중 (0) | 2022.10.06 |