TIL 0422

먼지·2024년 4월 22일

Today I Learned

목록 보기

45/89

점심 메뉴 선택

HTML Form 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>점심 선택</title>
</head>
<body>
	<h3>오늘 점심은 무엇을 먹을까? (2개 이상 선택)</h3>
	<form action="/ch03_JSP/todayMenu" method="post">
	<input type="checkbox" name="lunch" value="떡볶이">떡볶이 
	<input type="checkbox" name="lunch" value="버섯덮밥">버섯덮밥
	<input type="checkbox" name="lunch" value="칼국수">칼국수
	<input type="checkbox" name="lunch" value="치즈김밥">치즈김밥
	<input type="checkbox" name="lunch" value="피자">피자
	<input type="submit" value="전송">
	</form>
</body>
</html>

Servlet 작성

package kr.web.ch02;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/todayMenu")
public class todayMenu extends HttpServlet {
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");

		PrintWriter out = response.getWriter();

		out.println("<html>");
		out.println("<head><title>점심 메뉴</title></head>");
		out.println("<body>");
		out.println("<h3>오늘의 점심은</h3>");

		String[] menus = request.getParameterValues("lunch");
		if (menus != null) { // 전송된 데이터가 있는 경우에는 for문을 통하여 반복
			for (int i = 0; i < menus.length; i++) {
				out.println(menus[i] + "<br>");
			}
		} else { // 전송된 데이터가 없는 경우
			out.println("선택한 점심 메뉴가 없습니다.");		
		}
		
		out.println("</body>");
		out.println("</html>");

		out.close();
	}

}
}

문자열 배열로 값을 받아와서 반복문으로 해당 내용들을 뽑아준다.

null일 경우에는 오류가 발생하기 때문에 조건 체크를 해줘야 한다.

[실습] 여행지 선택

HTML Form 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[실습] 여행지 선택</title>
<script type="text/javascript">
window.onload = function(){
	// 폼태그 이벤트 연결
	const form = document.getElementById('myForm');

	form.onsubmit = function() {
		// 이름 필수 유효성 체크
		const name = document.getElementById('name');
		if(name.value.trim() == ''){
			alert('이름을 입력하세요.');
			name.value='';
			name.focus();
			return false;
		}

		// 여행지 두 개 이상 필수 선택
		const city = document.getElementsByClassName('cb-city');
		var count = 0;
		for(var i=0;i<city.length;i++){ // 체크를 했을 경우 count의 값이 증가
			if(city[i].checked == true){
				count++;
			}
		}
		if(count < 2){
			alert('2개 이상 여행지를 선택해주세요.');
/* 			for(var i=0;i<city.length;i++){
				city[i].checked = false;
			} */
			return false;
	}
}
}
</script>
</head>
<body>
	<h3>여행지를 선택하세요 (2개 이상 선택)</h3>
	<form action="/ch03_JSP/travel" method="post" id="myForm">
	이름 : <input type="text" name="name" id="name"><br>
	여행지 선택<br>
	<input type="checkbox" name="city" value="서울" class="cb-city">서울
	<input type="checkbox" name="city" value="뉴욕" class="cb-city">뉴욕
	<input type="checkbox" name="city" value="런던" class="cb-city">런던
	<input type="checkbox" name="city" value="파리" class="cb-city">파리
	<input type="submit" value="전송">
	</form>
</body>
</html>

Servlet 작성

package kr.web.ch03;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/travel")
public class TravleServlet extends HttpServlet {
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");

		PrintWriter out = response.getWriter();

		out.println("<html>");
		out.println("<head><title>여행지</title></head>");
		out.println("<body>");
		out.println("<h3>여행지 선택</h3>");
//		String name = request.getParameter("name");
		out.println("이름 : "+request.getParameter("name")+"<br>");
		out.println("여행지 : ");
		
		String[] city = request.getParameterValues("city");
		if (city != null) { // 여행지를 선택한 경우
			for (int i = 0; i < city.length; i++) {
				out.println(city[i]);
				if (i < city.length-1)
					out.println(", ");
			}
		} else { // 여행지를 선택 안 한 경우
			out.println("선택된 여행지가 없습니다.");
		}
		out.println("</body>");
		out.println("</html>");

	}

}

[실습] 성적 처리하기

HTML Form 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>성적 처리 하기</title>
<style>
	ul{
		list-style: none;
	}
</style>
<script type="text/javascript">
/* window.onclick = function() {
	// form 이벤트 연결하기
	const myForm = document.getElementById('myForm');
	myForm.onsubmit = function() {
		// 성적 0~100 사이의 숫자만 가능하고, 숫자만 입력 가능하고
		const kor = document.getElementById('korean')
		if(isNaN(kor.value)){
			alert('숫자만 입력 가능합니다.');
			kor.value ='';
			return false;
		} else if(kor.value < 0 || kor.value > 100){
			alert('0부터 100까지의 범위로만 입력해주세요.');
			kor.value = '';
			return false;
		} else if(kor.value.trim()==''){
			alert('점수를 입력하세요');
			return false;
		}

		const eng = document.getElementById('english')
		if(isNaN(eng.value)){
			alert('숫자만 입력 가능합니다.');
			eng.value ='';
			return false;
		} else if(eng.value < 0 || eng.value > 100){
			alert('0부터 100까지의 범위로만 입력해주세요.');
			eng.value = '';
			return false;
		} else if(eng.value.trim()==''){
			alert('점수를 입력하세요');
			return false;
		}

		const math = document.getElementById('korean')
		if(isNaN(math.value)){
			alert('숫자만 입력 가능합니다.');
			math.value ='';
			return false;
		} else if(math.value < 0 || math.value > 100){
			alert('0부터 100까지의 범위로만 입력해주세요.');
			math.value = '';
			return false; 
		} else if(math.value.trim()==''){
			alert('점수를 입력하세요');
			return false;
		}
	}


} */

window.onload = function() {
    const myForm = document.getElementById('myForm');
    //form 이벤트 연결
    myForm.onsubmit = function() {
		const items = document.querySelectorAll('input[type="text"]');
		for(let i = 0; i < items.length; i++){
			/* 입력을 하지 않았거나 공백을 입력한 경우*/
			if(items[i].value.trim()==''){
				const label = document.querySelector('label[for="' + items[i].id + '"]');
				const label_text = label.textContent;
				alert(label_text + ' 항목 입력은 필수입니다.');
				items[i].value = '';
				items[i].foucus();
				return false;
			}

			// 문자인지 숫자인지 체크
			if(isNaN(items[i].value)){
				alert('성적은 숫자만 가능');
				items[i].value='';
				items[i].foucus();
				return false;
			}

			// 0 ~ 100 값만 인정
			if(items[i].value < 0 || items[i].value > 100){
				alert("0 ~ 100까지만 입력 가능");
				items[i].value = '';
				items[i].foucus();
				return false;
			}
		}
    };
};
</script>
</head>
<body>
<h3>성적 처리 하기</h3>
<form action="/ch03_JSP/score" method="post" id="myForm">
	<ul>
		<li>
			<label for="korean">국어</label>
			<input type="text" name="korean" id="korean">
		</li>
		<li>
			<label for="english">영어</label>
			<input type="text" name="english" id="english">
		</li>
		<li>
			<label for="math">수학</label>
			<input type="text" name="math" id="math">
		</li>
	</ul>
	<input type="submit" value="입력">
</form>
</body>
</html>

Servlet 작성

package kr.web.ch03;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/score")
public class scoreServlet extends HttpServlet {
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		성적 처리
//		국어, 영어, 수학, 총점, 평균, 등급 출력하기
		
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		int kor = Integer.parseInt(request.getParameter("korean"));  // 국어 성적
		int eng = Integer.parseInt(request.getParameter("english")); // 영어 성적
		int math = Integer.parseInt(request.getParameter("math"));   // 수학 성적
		int sum = kor + eng + math ;	// 총점
		int avg = sum / 3;		// 평균
		char grade;				// 등급
		switch (avg / 10) {
		case 10:
		case 9:
			grade = 'A';
			break;
		case 8 :
			grade = 'B';
			break;
		case 7 :
			grade = 'C';
			break;
		case 6 :
			grade = 'D';
			break;
		default:
			grade = 'F';
		}
		
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>성적 출력</title></head>");
		out.println("<body>");
		out.println("국어 : " + kor+ "<br>");
		out.println("영어 : " + eng + "<br>");
		out.println("수학 : " + math + "<br>");
		out.println("총점 : " + sum + "<br>");
		out.println("평균 : " + avg + "<br>");
		out.println("등급 : " + grade + "<br>");
		out.println("</body>");
		out.println("</html>");
		
		out.close();
		  
	}
}

LifeCycle

Servlet 작성

package kr.web.ch04;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/lifecycle")
public class LifeCycle extends HttpServlet {
	int initCnt = 0;
	int serviceCnt = 0;
	int destroyCnt = 0;

	@Override
	public void init() throws ServletException {
		System.out.println("init 메서드는 첫 요청만 호출됨 : " + (++initCnt));
	}
     
	@Override
	public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("service 메소드가 요청할 때 마다 호출됨 : " + (++serviceCnt));

//		문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
//		HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>Servlet Life Cycle</title></head>");
		out.println("<body>");
		out.println("서블릿 init() 메서드 호출 횟수 : " + initCnt + "<br>");
		out.println("서블릿 service() 메서드 호출 횟수 : " + serviceCnt + "<br>");
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
	
	@Override
	public void destroy() {
		System.out.println("destroy 메서드는 본 Servlet이 더 이상 사용되지 않을 때만 호출됨" + (++destroyCnt));
	}   
}

JSP

디렉티브

–<%@ 디렉티브이름 속성1="값1" 속성2="값2" ... %>

page : JSP 페이지에 대한 정보를 지정, 문서의 타입, 출력 버퍼의 크기, 에러 페이지 등 정보 지정
taglib : 사용할 태그 라이브러리를 지정
include : 다른 문서를 포함
page 디렉티브 주요 속성

속성	설명
language	JSP 스크립트 코드에서 사용되는 프로그래밍 언어
contentType	JSP가 생성할 문서의 타입을 지정
pageEncoding	JSP 페이지 자체의 캐릭터 인코딩 지정
import	JSP 페이지에서 사용할 자바 클래스를 지정
session	JSP 페이지가 세션을 사용할 지의 여부를 지정
info	JSP 페이지에 대한 설명을 입력한다.
errorPage	에러가 발생할 때 보여 줄 페이지를 지정
isErrorPage	에러 페이지인지의 여부를 지정
buffer	버퍼 사용 여부 및 크기 지정(기본값 : 8kb)
autoFlush	버퍼가 다 찼을 때 처리 방식 지정
true	버퍼가 다 찼을 경우 버퍼를 플러시하고 계속해서 작업
false	버퍼가 다 찼을 경우 예외를 발생시키고 작업 중지
isELIgnored	표현 언어(EL)지원 여부 지정. true - 미지원, false - 지원
trimDirectiveWhitespaces	출력결과에서 템플릿 텍스트의 공백 문자를 제거할지 여부 지정

JSP 구동 원리
출력 버퍼와 응답
출력 버퍼 - JSP가 생성한 응답 결과를 임시로 저장
출력 버퍼의 장점
- 데이터 전송 성능 향상
- 버퍼가 다 차기 전까지 헤더 변경 가능
- JSP 실행 도중 버퍼를 비우고 새 내용 전송 가능
include 디렉티브
코드 차원에서 포함
구문 : <%@ include file="포함할파일" %>
활용
- 모든 JSP 페이지에서 사용되는 변수 지정
- 저작권 표시와 같은 간단하면서도 모든 페이지에서 중복되는 문장

스크립트

동적으로 출력 결과를 생성하기 위해 사용

스크립트 요소

선언부(Declaration)
변수 선언, 메서드 선언 <%! %>
스크립트릿(Scriptlet)
자바 코드를 실행- 변수 선언, 연산, 제어문 사용, 출력 등 <% %>
표현식(Expression)
연산, 출력(변수의 값, 메서드의 결과값)<%= %>

기본 객체

기본객체	실제 타입	설명
request	javax.servlet.http.HttpServletRequest	클라이언트의 요청 정보를 저장한다.
response	javax.servlet.http.HttpServletResponse	응답 정보를 저장한다.
pageContext	javax.servlet.jsp.PageContext	JSP페이지에 대한 정보를 저장한다.
session	javax.servlet.http.HttpSession	HTTP 세션 정보를 저장한다.
application	javax.servlet.ServletContext	웹 어플리케이션에 대한 정보를 저장한다.
out	javax.servlet.jsp.JspWriter	JSP 페이지가 생성하는 결과를 출력할 때 사용되는 출력 스트림이다.
config	javax.servlet.ServletConfig	JSP 페이지에 대한 설정 정보를 저장한다.
page	java.lang.Object	JSP 페이지를 구현한 자바 클래스 인스턴스이다.
exception	java.lang.Throwable	예외 객체. 에러 페이지에서만 사용된다.

request

웹 브라우저가 웹 서버에 전송한 요청 관련 정보 제공

주요 기능

클라이언트(웹 브라우저)와 관련된 정보 읽기 기능
서버와 관련된 정보 읽기 기능
클라이언트가 전송한 요청 파라미터 읽기 기능
클라이언트가 전송한 요청 헤더 읽기 기능
클라이언트가 전송한 쿠키 읽기 기능
속성 처리 기능

response

웹 브라우저에 전송하는 응답 정보 설정

주요 기능

헤더 정보 입력
리다이렉트 처리

out

JSP 페이지가 생성하는 모든 내용은 out 기본 객체를 통해서 전송

pageContext

다른 기본 객체에 대한 접근 메서드 제공

application

웹 어플리케이션에 대한 정보를 저장

JSP 코드

JSP Basic

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오늘의 날짜와 시간</title>
</head>
<body>
<%
	Date nowTime = new Date();	
%>
현재 날짜와 시간 <%= nowTime %> 입니다.
<br>
-------------------------------
<br>
<%
	SimpleDateFormat sf = 
	      new SimpleDateFormat("yyyy년MM월dd일 a hh:mm:ss");
%>
현재 날짜와 시간은 <%= sf.format(nowTime) %> 입니다.
</body>
</html>

JSP Basic 2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1부터 100까지의 합</title>
</head>
<body>
<h1>1부터 100까지의 합</h1>
<%
	int total = 0;
	for(int i=1;i<=100;i++){
		total += i;
	}
	out.println("1부터 100까지의 합 : " + total);
%>
</body>
</html>

JSP Basic 3

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 - 5단</title>
</head>
<body>
5단<br>
-----------<br>
<%
	for(int i=1;i<=9;i++){
		//출력
		out.println("5 * " + i + " = " + 5 * i + "<br>");
	}
%>
</body>
</html>

JSP script

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 연습</title>
</head>
<body>
<h2>배열의 내용 출력 - 선언부, 스크립트릿</h2>
<%!
	//선언부 : 변수 선언, 메서드 선언
	String[] str = {"JSP가","정말","재미","있다"};
%>
<table border="1">
	<tr>
		<th>배열의 인덱스</th>
		<th>배열의 내용</th>
	</tr>
<%
	//스립트릿 : 변수 선언, 연산, 제어문, 출력
	for(int i=0;i<str.length;i++){
		out.println("<tr>");
		out.println("<td>" + i + "</td>");
		out.println("<td>" + str[i] + "</td>");
		out.println("</tr>");
	}
%>	
</table>
<br>

<h2>배열의 내용 출력 - 선언부, 스크립트릿, 표현식</h2>
<table border="1">
	<tr>
		<th>배열의 인덱스</th>
		<th>배열의 내용</th>
	</tr>
<%
	for(int i=0;i<str.length;i++){
%>
	<tr>
		<td><%= i %></td>
		<td><%= str[i] %></td>
	</tr>
<%		
	}
%>	
</table>

<h2>배열의 내용 출력 - 확장 for문 이용</h2>
<table border="1">
	<tr>
		<th>배열의 내용</th>
	</tr>
<%
	for(String s : str){
%>
	<tr>
		<td><%= s %></td>
	</tr>
<%		
	}
%>	
</table>
</body>
</html>

JSP script 2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	//선언부 : 변수 선언, 메서드 선언
	//메서드 선언(정의)
	public int multiply(int a, int b){
		return a * b;
	}
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선언부를 사용한 두 정수값의 곱</title>
</head>
<body>
	10 * 25 = <%= multiply(10,25) %>
</body>
</html>

JSP request Information

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클라이언트 및 서버 정보</title>
</head>
<body>
클라이언트 IP = <%= request.getRemoteAddr() %><br>
요청정보 프로토콜 = <%= request.getProtocol() %><br>
요청정보 전송방식 = <%= request.getMethod() %><br>
요청 URL(Uniform Resource Locator) = 
                    <%= request.getRequestURL() %><br>
요청 URI(Uniform Resource Identifier) = 
                    <%= request.getRequestURI() %><br> 
컨텍스트 경로 = <%= request.getContextPath() %><br>
쿼리 문자열 = <%= request.getQueryString() %><br> 
서버 이름 = <%= request.getServerName() %><br>
서버 포트 = <%= request.getServerPort() %>                                      
</body>
</html>

먼지

Lucky Things🍀

이전 포스트

TIL 0419

다음 포스트

TIL 0422

Today I Learned

점심 메뉴 선택

HTML Form 작성

Servlet 작성

[실습] 여행지 선택

HTML Form 작성

Servlet 작성

[실습] 성적 처리하기

HTML Form 작성

Servlet 작성

LifeCycle

Servlet 작성

JSP

디렉티브

스크립트

기본 객체

request

response

out

pageContext

application

JSP 코드

JSP Basic

JSP Basic 2

JSP Basic 3

JSP script

JSP script 2

JSP request Information

TIL 0419

TIL 0423

0개의 댓글