JSP 웹프로그래밍 61일차 (25/2/12)

벡엔드 웹프로그래밍/JSP

JSP 웹프로그래밍 61일차 (25/2/12)

wkun 2025. 2. 12. 17:58

contents

PART 03 페이지 처리 기법

chapter 06 폼 태그: 도서 등록 페이지 만들기

01.폼 처리의 개요

02.form 태그

03.input 태그

04.select 태그

05.textarea 태그

06.폼 데이터 처리

07.북마켓 도서 등록 페이지 만들기

----------------------------------------------------

PART 03 페이지 처리 기법

chapter 06 폼 태그: 도서 등록 페이지 만들기

01.폼 처리의 개요

-폼(form)은 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식임. 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여줌. 폼은 사용자와 웹 애플리케이션이 상호 작용하는 중요한 기술 중 하나임. 즉 사용자가 어떤 내용을 원하는지, 사용자의 요구 사항이 무엇인지 파악할 때 가장 많이 사용하는 웹 애플리케이션의 필수적인 요소임

*폼 데이터 처리 과정

1)폼이 있는 웹 페이지를 요청하고 폼 내용을 입력함 2)폼 안에 있는 모든 데이터를 웹 서버로 보냄 3)웹 서버는 전송받은 폼 데이터를 처리하기 위해 JSP 컨테이너로 넘김 4)JSP 컨테이너는 폼 데이터를 처리함 5)처리 결과에 따라 새로운 웹 페이지를 웹 서버로 보냄 6)웹 서버는 전송받은 웹 페이지를 웹 브라우저로 보냄 7)웹 브라우저는 전송받은 결과 웹 페이지를 보여줌

◎폼을 구성하는 태그의 종류

태그	설명	태그	설명
form	폼을 정의하는 태그로 최상위 태그임	select	항목을 선택할 수 있는 태그임
input	사용자가 입력할 수 있는 태그임	textarea	여러 줄을 입력할 수 있는 태그임

02.form 태그

-form 태그는 사용자가 다양한 정보를 입력하고 서로 전달할 때 사용하는 태그임. 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그로 형식은 다음과 같음 이 태그의 속성을 이용하여 폼 데이터를 전송할 때 어디로 보낼지, 어떤 방식으로 보낼지 설정할 수 있음. 한편 form 태그의 모든 속성은 필수가 아니라 선택적으로 사용함

◎form 태그의 속성

속성	설명
action	폼 데이터를 받아 처리하는 웹 페이지의 URL을 설정함
method	폼 데이터가 전송되는 HTTP 방식을 설정함
name	폼을 식별하기 위한 이름을 설정함
target	폼 처리 결과의 응답을 실행할 프레임을 설정함
enctype	폼을 전송하는 콘텐츠 MIME 유형을 설정함
accept-charset	폼 전송에 사용할 문자 인코딩을 설정함

-폼을 전송할 HTTP 방식의 기본값이 GET이므로 method 속성을 생략할 수 있음

-form 태그의 method 속성은 웹 브라우저에서 웹 서버로 정보를 전송하는 방법으로 GET방식과 POST 방식이 있음. 웹 브라우저에서 입력된 모든 데이터를 서버로 전송하는 기능은 동일하지만 방식이 다름

-GET 방식은 폼 데이터를 URL 끝에 붙여서 전송하므로 웹 브라우저의 주소 표시 줄에 그대로 나타남. 그리고 구분자로 물음표(?)를 사용하여 URL 뒤에 name=value와 같은 형식의 요청 파라미터를 붙이기 때문에 URL과 요청 파라미터를 구분함. 또한 여러 개의 요청 파라미터를 전송할 경우 구분자 앰퍼샌드(&)를 사용하여 연결함. 그러나 POST 방식은 GET 방식과 달리 내부적으로 전송하기 때문에 웹 브라우저의 주소 표시 줄에 구분자가 나타나지 않음

◎GET 방식과 POST 방식의 차이

-URL 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약함. 따라서 개인 정보 등을 보호해야 할 때는 POST 방식을 사용해야 함. 또한 GET 방식은 지정된 리소스에서 데이터를 요청할 때, 즉 읽을 때 사용함. 반면 POST 방식은 지정된 리소스에서 데이터를 처리할 때, 즉 쓰고, 수정하고, 삭제할 때 사용함. 그러므로 보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽는 경우 GET 방식을 사용하고, 그렇지 않은 경우 POST 방식을 사용하면 됨

구분	GET 방식	POST 방식
전송 형태	이름과 값의 형태로 URL에 포함되어 전송->파라미터 ?(o)	HTTP 헤더 속에 감춰서 전송 ?(x)
전송량	제한적(4,096B)	제한 없음
속도	빠름 cf) <a> 클릭해서 이동/ <form>	느림 cf) <form>
보안	없음	있음

03.input 태그

-input 태그는 사용자가 텍스트 입력이나 선택 등을 다영하게 할 수 있도록 공간을 만드는 태그로 형식은 다음과 같음. input 태그는 종료 태그 없이 단독으로 사용할 수 있음

◎input 태그의 기본 속성

속성	속성 값	설명
type	text	기본값으로 한 줄의 텍스트를 입력할 때 사용함
	radio	라디오 버튼으로 열거된 것 중 하나만 선택할 때 사용함
	checkbox	체크 박스로 열거된 것 중 다중 선택을 할 때 사용함
	password	암호를 입력할 때 사용함
	hidden	보이지 않게 숨겨서 값을 전송할 때 사용함
	file	파일 업로드를 위한 파일을 선택할 때 사용함
	button	버튼 모양을 출력할 때 사용함
	reset	폼에 입력된 값을 모두 초기화 할 때 사용함
	submit	폼에 입력된 값을 모두 서버에 전송할 때 사용함
name	텍스트	입력 양식을 식별하는 이름을 설정함
value	텍스트	입력 양식의 초기값을 설정함

◎input 태그의 기본 속성 외에 사용되는 속성

속성	속성 값	설명
readonly		입력 양식을 읽기 전용으로 설정함
maxlength	숫자	입력 양식의 최대 입력 글자 수를 설정함. type="text"인 경우에만 사용
size	숫자	입력 양식의 너비를 설정함. 모든 폼 구성 태그에 사용함
disabled		해당 입력 양식을 비활성화로 설정함. 모든 폼 구성 태그에 사용함
checked		기본값을 선택할 때 설정함. type="checkbox" 또는 type="radio"인 경우에만 사용함

◎HTML5의 추가된 속성

속성	속성 값	설명
required		입력 양식을 필수 태그로 설정함. 필수 태그를 입력하지 않고 <submit> 버튼을 누르면 오류 메시지가 웹 브라우저에 출력됨
autofocus		웹 페이지가 로딩되자마자 해당 입력 양식의 포커스를 설정함
placeholder	텍스트	입력 양식의 힌트를 설정함
pattern	regexp	정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용함

예제 6-1.form 태그와 input 태그로 간단한 회원 가입 양식 만들기

JSPBook/src/main/webapp/ch06/form01.jsp

실행 결과

04.select 태그

-select 태그는 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그로 형식은 다음과 같음. select 태그에는 시작 태그와 종료 태그가 있으며, 리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option 태그를 포함해야 함

◎select 태그의 속성

속성	속성 값	설명
name	텍스트	목록 상자의 이름을 설정함
size	숫자	한 번에 표시할 항목의 개수를 설정함
multiple		다중 선택이 가능하도록 함. ctrl을 눌러 목록 상자의 항목을 다중 선택함

◎option 태그의 속성

속성	속성 값	설명
value	텍스트	항목의 값을 설정함
selected		해당 항목을 초기값으로 선택함
disabled		항목을 비활성화함

*<optgroup> 태그

-optgroup 태그로 항목을 그룹으로 만들 수 있음. label 속성을 사용하여 그룹으로 만들 이름을 설정하며, optgroup 태그 하위에 option 태그를 포함해야함

예제 6-2.select 태그로 [예제 6-1] 회원 가입 양식의 연락처 수정하기

JSPBook/src/main/webapp/ch06/form02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="#" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="password">
<p> 이름 : <input type="text" name="name">
-------------------------- 수정 -------------------------------
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p> 취미 : 독서 <input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2">
영화<input type="checkbox" name="hobby3">
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>

실행 결과

05.textarea 태그

-textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 태그로 형식은 다음과 같음. 기본적으로 textarea 태그의 너비와 높이를 지정하기 위해 cols와 rows 속성을 설정함. 기본값은 <textarea>와 </textarea> 태그 사이에 설정하면 됨. textarea 태그의 가장 큰 특징은 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력된다는 것임

◎textarea 태그의 속성

속성	속성 값	설명
name	텍스트	이름을 설정함
cols	숫자	입력할 텍스트 영역의 너비(열 크기)를 설정함
rows	숫자	입력할 텍스트 영역의 높이(행 크기)를 설정함
wrap	off	줄 바꿈을 설정함 wrap="off": 줄 바꿈을 하지 않고 문장을 입력할 때 수평 스크롤바가 생기고 옆으로 계속 문장이 입력됨
	soft	wrap="soft": enter를 누르지 않아도 텍스트라인 끝에서 자동으로 행이 바뀜
	hard	wrap="hard": soft 상태와 비슷하며 실제 내용을 서버에 전송할 때 캐리지 리턴 문자를 전달함

예제 6-3.textarea 태그로 [예제 6-2]의 회원 가입 양식에 가입 인사 추가하기

JSPBook/src/main/webapp/ch06/form03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="#" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="password">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p> 취미 : 독서 <input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2">
영화<input type="checkbox" name="hobby3">
-------------------------- 추가 -------------------------------
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>

실행 결과

06.폼 데이터 처리

-JSP에서 가장 많이 사용하는 기능 중 하나는 사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 이를 처리하는 것임. 이렇게 폼 데이터를 처리함으로써 표현문이나 스크립틀릿 태그에 request 내장 객체를 이용하여 폼 페이지에서 전달된 값을 얻을 수 있음

1)요청 파라미터 값 받기

-request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter() 메소드를 이용하여 요청 파라미터의 값을 얻을 수 있음

String 변수=request.getParameter("요청 파라미터 이름");

-폼 페이지에서 이름을 선택하고 <전송>을 클릭하면 체크 박스를 선택한 경우 on이, 선택하지 않은 경우 null이 전송됨. 이때 폼 페이지에 설정된 체크 박스의 수만큼 request 내장 객체의 getParameter() 메소드를 호출하여 전송하는 데이터를 받음

*value="on" / value의 값을 적지 않아도 선택하면 자동으로 on으로 인식함

예제6-4.[예제 6-3]의 회원 가입 양식에서 폼 데이터 전송받기

JSPBook/src/main/webapp/ch06/form05.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
-------------------------- 추가 -------------------------------
<form action="ch06_1" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="password">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p> 취미 : 독서 <input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2">
영화<input type="checkbox" name="hobby3" value="movie">
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>

ch06_1_controller.java

package controller.ch06;

import java.io.IOException;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/ch06_1")
public class ch06_1_controller extends HttpServlet{

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher ds = req.getRequestDispatcher("ch06/form03.jsp");
ds.forward(req, resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String id = request.getParameter("id");
String password = request.getParameter("password");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String sex = request.getParameter("sex");
String hobby1 = request.getParameter("hobby1");
String hobby2=request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
String comment = request.getParameter("comment");

System.out.println(id);
System.out.println(password);
System.out.println(name);
System.out.println(phone1);
System.out.println(phone2);
System.out.println(phone3);
System.out.println(sex);
System.out.println(hobby1);
System.out.println(hobby2);
System.out.println(hobby3);
System.out.println(comment);
}

}

실행 결과

admin
1234
홍길순
010
1234
5678
남성
독서
null
null
안녕하세요. 홍길순 가입합니다.

예제 6-5.[예제 6-4]의 회원 가입 양식에서 폼 데이터 전송받기

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="ch06_1" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="password">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p> 취미 :

독서 <input type="checkbox" name="hobby" value="독서" checked>
운동<input type="checkbox" name="hobby" value="운동">
영화<input type="checkbox" name="hobby" value="영화">
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>

ch06_1_controller.java

package controller.ch06;

import java.io.IOException;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/ch06_1")
public class ch06_1_controller extends HttpServlet{

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher ds = req.getRequestDispatcher("ch06/form03.jsp");
ds.forward(req, resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String id = request.getParameter("id");
String password = request.getParameter("password");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String sex = request.getParameter("sex");
/*
String hobby1 = request.getParameter("hobby1");
String hobby2=request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
*/
String [] hobby = request.getParameterValues("hobby");

String comment = request.getParameter("comment");
/*
System.out.println(hobby1);
System.out.println(hobby2);
System.out.println(hobby3);
*/
for(int i=0; i<hobby.length; i++) {
System.out.println(hobby[i]);
}
System.out.println(id);
System.out.println(password);
System.out.println(name);
System.out.println(phone1);
System.out.println(phone2);
System.out.println(phone3);
System.out.println(sex);
System.out.println(comment);
}

}

*체크박스의 값 배열처리: for문

실행 결과

독서
영화
admin
1234
홍길순
010
1234
5678
여성
안녕하세요. 홍길순 가입합니다.

2)요청 파라미터의 전체 값 받기

-getParameter() 메소드를 이용하면 폼 페이지가 서버로 보낸 요청 파라미터 값을 얻을 수 있음. 그런데 입력 데이터가 다수이거나 입력 양식이 다양하면 이를 전송받기 위해 최악의 경우 입력 양식에 맞춰 전달받는 데이터의 수만큼 request 내장 객체의 getParameter() 메소드를 설정해야 함. 이때 다음과 같은 일괄 처리 메소드를 이용하면 웹 브라우저에서 서버로 전송되는 요청 파라미터를 설정하지 않아도 모든 값을 전달받을 수 있음. 또한 텍스트 박스, 라디오 버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한 번에 폼 데이터를 전달 받을 수 있음

◎폼 데이터의 일괄 처리 메소드

메소드	형식	설명
getParameterNames()	java.util.Enumeration	모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration(열거형) 형태로 전달받음
hasMoreElements()	boolean	Enumeration(열거형) 요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환함 : 커서이동
nextElement()	E(Enmeration 객체를 생성 할 때의 타입)	Enumeration(열거형) 요소를 반환함 : 값 반환

*key 모를 때 사용

cf)key 알 때: String id=request.getParameter("id");

-jsp 페이지에서 이름을 선택하고 <전송>을 클릭하면 request 내장 객체의 getParameterNames() 메소드를 호출하여 모든 요청 파라미터를 가져옴. hasMoreElements() 메소드는 전송된 요청 파라미터가 없을 때까지 반복함. nextElement() 메소드는 각 요청 파라미터의 이름을 가져와 getParameter() 메소드에 의해 요청 파라미터의 값을 얻어옴

예제 6-6.[예제 6-4]의 회원 가입 양식에서 폼 데이터를 한 번에 전송받기

JSPBook/src/main/webapp/ch06/form06.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="ch06_6" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="password">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p> 취미 :

독서 <input type="checkbox" name="hobby" value="독서" checked>
운동<input type="checkbox" name="hobby" value="운동">
영화<input type="checkbox" name="hobby" value="영화">
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>

controller_ch06_06.java

package controller.ch06;

import java.io.IOException;
import java.util.Enumeration;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/ch06_6")
public class ch06_6_controller extends HttpServlet{

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doget 입장");
RequestDispatcher ds = req.getRequestDispatcher("ch06/form06.jsp");
ds.forward(req, resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

Enumeration en=request.getParameterNames();

while(en.hasMoreElements()) {
String key = (String) en.nextElement();
String value = request.getParameter(key);
System.out.println("key : " + key);
System.out.println("value : " + value);
}
}

}

실행 결과

key : id
value : aaa
key : password
value : 11
key : name
value : aa
key : phone1
value : 010
key : phone2
value : 1234
key : phone3
value : 5678
key : sex
value : 남성
key : hobby
value : 독서
key : comment
value : comment

07.북마켓 도서 등록 페이지 만들기

-폼 태그를 적용하여 북마켓의 도서 정보를 등록하는 폼 페이지를 만들고, 사용자로부터 새로운 도서 정보 데이터를 입력받아 도서 정보를 등록하여 축력함

*순서:

1.getParameter -> 변수

변수x10

↓

2.DTO(변수 묶음): new Book() class 타입

set(변수1)

arr.add(Book)

↓

3.ArrayList 보관: collection framwork

ex) 1반(1~50) 2반(51~100) ... ArrayList: 1학년[1~10반]

*생성자: 1.초기화, 2.객체 생성

예제 6-7.도서 정보 등록 페이지 만들기

BookMarket/src/main/webapp/addBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src=" " crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>도서 등록</title>
</head>
<body>
<div class="container py-4">
<%@ include file="menu.jsp" %>

<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">도서 등록</h1>
<p class="col-md-8 fs-4">Book Addition</p>
</div>
</div>

<div class="row align-items-md-stretch">
<form name="newBook" action="./processAddBook.jsp" method="post">
<div class="mb-3 row">
<label class="col-sm-2">도서코드</label>
<div class="col-sm-3">
<input type="text" name="bookId" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">도서명</label>
<div class="col-sm-3">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">가격</label>
<div class="col-sm-3">
<input type="text" name="unitPrice" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">저자</label>
<div class="col-sm-3">
<input type="text" name="author" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">출판사</label>
<div class="col-sm-3">
<input type="text" name="publisher" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">출판일</label>
<div class="col-sm-3">
<input type="text" name="releaseDate" class="form-control">
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2">상세정보</label>
<div class="col-sm-5">
<textarea name="description" cols="50" rows="2" class="form-control" placeholder="100자 이상 적어주세요"></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">분류</label>
<div class="col-sm-3">
<input type="text" name="category" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">재고수</label>
<div class="col-sm-3">
<input type="text" name="unitsInStock" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">상태</label>
<div class="col-sm-5">
<input type="radio" name="condition" value="New"> 신규도서
<input type="radio" name="condition" value="Old"> 중고도서
<input type="radio" name="condition" value="EBook"> E-book
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="등록">
</div>
</div>
</form>
</div>
<jsp:include page="footer.jsp" />
</div>
</body>
</html>

예제6-8.도서 정보 등록 데이터 처리하기

1)신규 도서 데이터를 저장하는 메소드 만들기

BookMarket/src/main/java/dao/BookRepository.java

package dao;

import dto.Book;
import java.util.ArrayList;

public class BookRepository {

private ArrayList<Book> listOfBooks = new ArrayList<Book>();
-------------------------- 추가 -------------------------------
private static BookRepository instance = new BookRepository(); //싱글톤

public static BookRepository getInstance() {
return instance;
}

public BookRepository() {

// System.out.println("BookRepository 객체가 생성됨");

Book book1 = new Book("ISBN1234", "C# 프로그래밍", 27000);
book1.setAuthor("우재남");
book1.setDescription(
"C#을 처음 접하는 독자를 대상으로 일대일 수업처럼 자세히 설명한 책이다. 꼭 알아야 할 핵심 개념은 기본 예제로 최대한 쉽게 설명했으며, 중요한 내용은 응용 예제, 퀴즈, 셀프 스터디, 예제 모음으로 한번 더 복습할 수 있다.");
book1.setPublisher("한빛아카데미");
book1.setCategory("IT모바일");
book1.setUnitsInStock(1000);
book1.setReleaseDate("2022/10/06");

Book book2 = new Book("ISBN1235", "자바마스터", 30000);
book2.setAuthor("송미영");
book2.setDescription(
"자바를 처음 배우는 학생을 위해 자바의 기본 개념과 실습 예제를 그림을 이용하여 쉽게 설명합니다. 자바의 이론적 개념→기본 예제→프로젝트 순으로 단계별 학습이 가능하며, 각 챕터의 프로젝트를 실습하면서 온라인 서점을 완성할 수 있도록 구성하였습니다.");
book2.setPublisher("한빛아카데미");
book2.setCategory("IT모바일");
book2.setUnitsInStock(1000);
book2.setReleaseDate("2023/01/01");

Book book3 = new Book("ISBN1236", "파이썬 프로그래밍", 30000);
book3.setAuthor("최성철");
book3.setDescription(
"파이썬으로 프로그래밍을 시작하는 입문자가 쉽게 이해할 수 있도록 기본 개념을 상세하게 설명하며, 다양한 예제를 제시합니다. 또한 프로그래밍의 기초 원리를 이해하면서 파이썬으로 데이터를 처리하는 기법도 배웁니다.");
book3.setPublisher("한빛아카데미");
book3.setCategory("IT모바일");
book3.setUnitsInStock(1000);
book3.setReleaseDate("2023/01/01");

listOfBooks.add(book1);
listOfBooks.add(book2);
listOfBooks.add(book3);

}

public ArrayList<Book> getAllBooks() {
return listOfBooks;
}

public Book getBookById(String bookId) {
Book bookById=null;

for(int i=0; i<listOfBooks.size(); i++) {
Book book=listOfBooks.get(i);
if(book!=null && book.getBookId()!=null && book.getBookId().equals(bookId)) {
bookById=book;
break;
}
}
return bookById;
}

-------------------------- 추가 -------------------------------

public void addBook(Book book) { //DTO
listOfBooks.add(book);
}

}

2)신규 도서 등록 처리 페이지 만들기

BookMarket/src/main/webapp/processAddBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="dto.Book" %>
<%@ page import="dao.BookRepository" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
request.setCharacterEncoding("UTF-8");

String bookId=request.getParameter("bookId");
String name=request.getParameter("name");
String unitPrice=request.getParameter("unitPrice");
String author=request.getParameter("author");
String publisher=request.getParameter("publisher");
String releaseDate=request.getParameter("releaseDate");
String description=request.getParameter("description");
String category=request.getParameter("category");
String unitsInStock=request.getParameter("unitsInStock");
String condition=request.getParameter("condition");
System.out.println(bookId);
System.out.println(name);
System.out.println(unitPrice);
System.out.println(publisher);
System.out.println(releaseDate);
System.out.println(description);
System.out.println(category);
System.out.println(unitsInStock);
System.out.println(condition);

Integer price;

if(unitPrice.isEmpty())
price=0;
else
price=Integer.valueOf(unitPrice);

long stock;

if(unitsInStock.isEmpty())
stock=0;
else
stock=Long.valueOf(unitsInStock);

BookRepository dao=BookRepository.getInstance();

Book newBook=new Book();
newBook.setBookId(bookId);
newBook.setName(name);
newBook.setUnitPrice(price);
newBook.setAuthor(author);
newBook.setPublisher(publisher);
newBook.setReleaseDate(releaseDate);
newBook.setDescription(description);
newBook.setCategory(category);
newBook.setUnitsInStock(stock);
newBook.setCondition(condition);

dao.addBook(newBook);

response.sendRedirect("books.jsp");

%>

</body>
</html>

*price=Integer.valueOf(unitPrice); 문자열->숫자

3)도서 목록 페이지 수정하기

BookMarket/src/main/webapp/books.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dto.Book" %>
-------------------------- 추가 -------------------------------
<%@ page import="dao.BookRepository" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src=" "></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>도서 목록</title>
</head>
<body>
<div class="container py-4">
<%@ include file="menu.jsp" %>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">도서목록</h1>
<p class="col=md-8 fs-4">BookList</p>
</div>
</div>
<%
BookRepository bookDAO=BookRepository.getInstance();
ArrayList<Book> listOfBooks = bookDAO.getAllBooks();
%>

<div class="row align-items-md-stretch text-center">
<%
for(int i=0; i<listOfBooks.size(); i++){
Book book=listOfBooks.get(i);

%>
<div class="col-md-4">
<div class="h-100 p-2">
<h5><b><%=book.getName() %></b></h5>
<p> <%=book.getAuthor() %>
<br><%=book.getPublisher() %> : <%=book.getUnitPrice() %>원
<p> <%=book.getDescription() %>
<p><%=book.getUnitPrice() %>원
<p> <a href="./book.jsp?id=<%=book.getBookId() %>" class="btn btn-secondary" role="button">상세 정보 »</a>
</div>
</div>
<%
}
%>
</div>
<%@ include file="footer.jsp" %>
</div>
</body>
</html>

4)도서 상세 정보 페이지 수정하기

BookMarket/src/main/webapp/book.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="dto.Book" %>
-------------------------- 추가 -------------------------------
<%@ page import=dao.BookRepository %>
<jsp:useBean id="bookDAO" class="dao.BookRepository" scope="session" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src=" " crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<title>도서 정보</title>
</head>
<body>
<div class="container py-4">
<%@ include file="menu.jsp" %>

<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">도서정보</h1>
<p class="col-md-8 fs-4">BookInfo</p>
</div>
</div>

<%
String id=request.getParameter("id");
Book book=bookDAO.getBookById(id);
%>

<div class="row align-items-md-stretch">
<div class="col-md-12">
<h3><b><%=book.getName() %></b></h3>
<p> <%=book.getDescription() %>
<p> <b>도서코드 : </b><span class="badge text-bg-danger">
<%= book.getBookId()%></span>
<p> <b>저자</b> : <%=book.getAuthor() %>
<p> <b>출판사</b> : <%=book.getPublisher() %>
<p> <b>출판일</b> : <%=book.getReleaseDate() %>
<p> <b>분류</b> : <%=book.getCategory() %>
<p> <b>재고수</b> : <%=book.getUnitsInStock() %>
<h4><%=book.getUnitPrice() %>원</h4>
<p> <a href="#" class="btn btn-info">도서주문 »</a>
<a href=" ./books.jsp" class="btn btn-secondary" >도서 목록 »</a>
</div>
</div>
<jsp:include page="footer.jsp" />
</div>
</body>
</html>

cf) 객체생성:

1)<jsp:useBean>

2)BookRepository bookDAO=BookRepository.getInstance();

실행 결과

'벡엔드 웹프로그래밍 > JSP' 카테고리의 다른 글

JSP 웹프로그래밍 63일차 (25/2/14) (0)	2025.02.14
JSP 웹프로그래밍 62일차 (25/2/13) (0)	2025.02.13
JSP 웹프로그래밍 60일차 (25/2/11) (2)	2025.02.11
JSP 웹프로그래밍 59일차 (25/2/10) (2)	2025.02.10
JSP 웹프로그래밍 58일차 (25/2/7) (0)	2025.02.07

현재글JSP 웹프로그래밍 61일차 (25/2/12)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그