청년취업아카데미/HTML
[01.01.28 JSP]이론
RSpring41
2021. 1. 28. 14:21
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page errorPage="error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
여기는 메인입니다.
<!-- 여기부분 --!>
<%@ include file = "footer.jsp" %>
</body>
</html>
▶ MIME(Multipurpose Internet Mail Extensions)
서버가 클라이언트에게 어떠한 정보를 보내는지 헤더에 미리 요약해서 알려주는 역활
▶ contentType
아래와 같이 기능을 설정함
요약
▶ 에러 페이지 예제
▷ 메인 페이지
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page errorPage = "ex01_errorpage.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%=2/0 %>
</body>
</html>▷ 에러페이지
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div{
width:50%;
height:600px;
margin:auto;
}
img{
width:600px;
height:100%;
margin:auto;
}
</style>
</head>
<body>
<div>
<img src="warnign.png" ><br>
죄송합니다. 다음에 이용해주세요.
</div>
</body>
</html>
▶ 지시자
▶ 주석 정리
<!-- HTML --> : 이거만 나중에 코드로 표현됨
<%-- JSP --%>
/* Java */
▶ 내장 객체 : JSP가 servlet으로 변환시 자동으로 생성되는 객체
▶ JSP와 HTML을 이용한 예제
▷ THML
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table{
width:400px;
margin:auto;
}
tr{
height:50px;
}
td{
width:200px;
}
</style>
</head>
<body>
<fieldset>
<legend>학점확인프로그램</legend>
<form action="check.jsp" method="post">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>JAVA점수</td>
<td><input type="text" name="JAVA"></td>
</tr>
<tr>
<td>WEB점수 </td>
<td><input type="text" name="WEB"></td>
</tr>
<tr>
<td>IOT점수 </td>
<td><input type="text" name="IOT"></td>
</tr>
<tr>
<td>ANDROID점수</td>
<td><input type="text" name="ANDROID"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="확인하기"></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>▷ JSP
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table{
width:400px;
margin:auto;
}
tr{
height:50px;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset=euc-kr");
String name = request.getParameter("name");
String[] check = new String[5];
int[] point = new int[5];
point[0] = Integer.parseInt(request.getParameter("JAVA"));
point[1] = Integer.parseInt(request.getParameter("WEB"));
point[2] = Integer.parseInt(request.getParameter("IOT"));
point[3] = Integer.parseInt(request.getParameter("ANDROID"));
point[4] = ((point[0] + point[1] + point[2] + point[3]) / 4);
for (int i = 0; i < 5 ; i++) {
if (point[i] < 70) {
check[i] = "F";
} else if (point[i] < 80) {
check[i] = "C";
} else if (point[i] < 85) {
check[i] = "B+";
} else if (point[i] < 95) {
check[i] = "A";
} else if (point[i] <= 100) {
check[i] = "A+";
}
}
%>
<fieldset>
<legend>학점확인프로그램</legend>
<table>
<tr >
<td>이름</td>
<td><%=name %></td>
</tr>
<tr>
<td>JAVA점수</td>
<td><%=point[0] + " (" + check[0] + ")" %></td>
</tr>
<tr>
<td>WEB점수</td>
<td><%=point[1] + " (" + check[1] + ")" %></td>
</tr>
<tr>
<td>IOT점수</td>
<td><%=point[2] + " ( " + check[2] + ")" %></td>
</tr>
<tr>
<td>ANDROID점수</td>
<td><%=point[3] + " (" + check[3] + ")" %></td>
</tr>
<tr>
<td>평균</td>
<td><%=point[4] %></td>
</tr>
<tr>
<td>학점</td>
<td><%=check[4] %></td>
</tr>
</table>
</fieldset>
</body>
</html>▷결과
※ HTML ※ JSP
▶ response.sendRedirect() : 다른 페이지로 연결
▶HTML과 JSP예제
▷ HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="ex04_response.jsp">
내가 가고 싶은 사이트는
<input type="text" name="url">
<input type="submit" value="이동">
</form>
</body>
</html>▷ JSP
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
String url = request.getParameter("url");
if(url.equals("네이버")){
response.sendRedirect("https://www.naver.com");
}else if(url.equals("다음")){
response.sendRedirect("https://www.daum.net");
}
%>
</body>
</html>▷ 결과는 해당 주소로 연결됨
▶ 같은 예제
▷ HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div style="width: 300px;">
<form action="ex05_selectSite.jsp" method="post">
<select name="select" style="width: 45%; height: 40px;">
<option>네이버</option>
<option>다음</option>
<option>카카오</option>
</select>
<input type="submit" value="이동" style="width: 45%; height: 40px;">
</form>
</div>
</body>
</html>
▷ JSP
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
String select = request.getParameter("select");
if(select.equals("네이버")){
response.sendRedirect("https://www.naver.com");
}else if(select.equals("다음")){
response.sendRedirect("https://www.daum.net");
}else if(select.equals("카카오")){
response.sendRedirect("https://www.kakaocorp.com/");
}
%>
</body>
</html>
▶ 랜덤 게임 예제
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.title{
text-align: center;
}
.main{
width : 400px;
margin : auto;
text-align: center;
}
.box{
height: 130px;
}
input{
margin-top : 15px;
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h1 class="title">랜덤당첨게임</h1>
<fieldset class="box">
<legend>랜덤 숫자 입력</legend>
<form action="ex06_createInput.jsp" method="post">
<input type="number" min="2" max="10" name="selectNum" placeholder="2 ~ 10 선택">
<input type="submit" value="생성하기" style="width: 208px; height: 35px;">
</form>
</fieldset>
</div>
</body>
</html>
JSP_1
<%@page import="java.util.Random"%>
<%@page import="jdk.nashorn.internal.runtime.RewriteException"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.main {
width: 400px;
margin: auto;
margin-top : 100px;
text-align: center;
}
.mainTable {
text-align: right;
width: 300px;
margin: auto;
}
input{
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset=euc-kr");
int selectNum = Integer.parseInt(request.getParameter("selectNum"));
Random rd = new Random();
int set = rd.nextInt(selectNum)+1;
%>
<div class="main">
<fieldset>
<legend>랜덤 숫자 입력</legend>
<form action="ex06_randomWinner.jsp" method="post">
<input type="hidden" name="selectNum" value="<%=selectNum %>">
<table class="mainTable">
<tr>
<td>주제 :</td>
<td><input type="text" name="title"></td>
</tr>
<%
for (int i = 1; i <= selectNum; i++) {
out.print("<tr>");
out.print("<td>아이템" + i + " : </td>");
out.print("<td><input type=text name=item_" + i + "></td>");
out.print("</tr>");
}
%>
<tr>
<td></td>
<td><input type="submit" value="시작" style="width: 208px; height: 35px;"></td>
</tr>
</table>
</form>
</fieldset>
</div>
</body>
</html>
JSP_2
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.main{
width : 400px;
margin : auto;
margin-top : 100px;
text-align: center;
}
</style>
</head>
<body>
<%
// 인코딩 설정 및 데이터 받기
request.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset=euc-kr");
int selectNum = Integer.parseInt(request.getParameter("selectNum"));
String title = request.getParameter("title");
// 여러게 생성된 데이터 받기
String[] item = new String[selectNum];
for(int i = 1; i <= selectNum; i++){
item[i-1] = request.getParameter("item_"+i);
}
// 랜덤을 이용하여 하나 선택
Random rd = new Random();
int randomNum = rd.nextInt(selectNum);
String setlectItem = item[randomNum];
%>
<div class="main">
<fieldset class="field">
<legend>랜덤당첨결과</legend>
<%=title %><br>
<%=setlectItem %>
</fieldset>
</div>
</body>
</html>
결과
▶JSP에서 다른 페이지에 코드를 불러오는 방법 (include)
▷ 코드를 가져오는거라 에러에 주의해야함
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page errorPage="error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
여기는 메인입니다.
<%@ include file = "footer.jsp" %>
</body>
</html>