본문 바로가기
JSP/웹페이지 만들기

JSP 20230703 웹페이지만들기 6장 form정리 및 실습

by 미눅스[멘토] 2023. 7. 3.
728x90

 

 

01.

1. action

폼 내부에 입력 값들 전송하는(받는사람) 서버 측 URL을 지정

데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하기 때문에 이를 위해 action 속성을 사용

 

2. name

전송될 데이터의 이름

 

3. accept-charset

폼 전송에 사용할 문자 인코딩을 지정.

 

4. target

action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

 

5. method (디폴트 값 = get)

서버로 데이터를 전송하는 방식

 get 방식 or post 방식이 있다.

 

    1) get 방식& 링크 &  URL 직접 & 자바스크립트 등등

    -URL의 끝에 데이터를 첨부해서 전송하는 방식

    문제점

    항상 노출이 된다. (보안에 중요한 데이터는 사용 금지)

    URL 최대 256자까지 (오버플로우 : 데이터 잘림)

    URL은 인코딩 방식이 base64(한글포함x)

    되도록 영문과 숫자 정도만 전송

 

    2) post 방식

    post 방식 :유일

    패킷의 본문 안에 데이터를 넣어서 전송하는 방식(FM 제대로 된 방식)

    데이터 노출이 없음(보안상 조금 더 안전)

     제한 크기 무제한

     한글 상관없이 전송

 

6. enctype

-인코딩 타입을 지정합니다. 이 속성에 의해 브라우저는 입력된 데이터를 서버로 보낼 때 어떤 타입으로 인코딩해야 하는지 알 수 있는데 다음과 같이 세 가지 중 하나는 지정해준다.

   1) enctype="application/x-www-form-urlencoded"

   서버에 보내기 전에 모든 문자를 인코딩하는 방식이며 폼에 텍스트 데이터를 포함했을 때 지정한다.(기본값)

   2. enctype="multipart/form-data"

   파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용.

   3. enctype="text/plain"

   일반 텍스트로 인코딩 됩니다.

  

7. novalidate

novalidate 속성은 HTML5에 새롭게 추가된 속성으로서, 유효성 미확인을 지정.

이 속성을 지정하면 폼에 입력된 데이터를 서버로 보낼 때 데이터를 체크하지 않는다.

 

02.

 input 태그, select 태그, textarea 태그가 있다.

input 태그는 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그로, 종료 없이 단독으로 사용 가능하다. select 태그는 여러 개의 항목을 나타낼 수 있으며, 시작과 종료 태그가 존재한다. select 태그 내에 option 태그를 사용하여 여러 항목들을 삽입한다. textarea 태그는 텍스트를 입력할 수 있는 태그다.

 

 

03.

request.getParameter() 메서드

 

 

 

 

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="form01_process.jsp">
	<div>
		<div>
			<label for="name">이름 : </label>
			<input type="text" name="name" />
		</div>
		<div>
			<label for="addr">주소 : </label>
			<input type="text" name="addr" />
		</div>
		<div>
			<label for="mail">이메일 : </label>
			<input type="text" name="mail" />
		</div>
		<input type="submit" value="전송">
	</div>
</form>
</body>
</html>

 

 

form01_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%//스크립틀릿
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String mail = request.getParameter("mail");

out.print("아이디 : " +name + "<br>");
out.print("주소 : " +addr + "<br>");
out.print("이메일 : " +mail + "<br>");

%>

<br/><br/><br/><br/><br/><br/>
<!-- 버퍼 이용해서 출력 -->
<div>
아이디 : <% StringBuffer buf1 = new StringBuffer(request.getParameter("name"));
out.print(buf1); %><br/>
주소 : <% StringBuffer buf2 = new StringBuffer(request.getParameter("addr"));
out.print(buf2); %><br/>
이메일 : <% StringBuffer buf3 = new StringBuffer(request.getParameter("mail"));
out.print(buf3); %>
</div>

 

결과

 

 

 

 

 

form02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="form02_process.jsp">
	<div>
		<div>
			<label for="name">이름 : </label>
			<input type="text" name="name" />
		</div>
		<div>
			<label for="addr">주소 : </label>
			<input type="text" name="addr" />
		</div>
		<div>
			<label for="mail">이메일 : </label>
			<input type="text" name="mail" />
		</div>
		<input type="submit" value="전송">
	</div>
</form>
</body>
</html>

 

 

form02_process.jsp

<%@page import="java.nio.Buffer"%>
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%//스크립틀릿

request.setCharacterEncoding("utf-8");
Enumeration paraNames  = request.getParameterNames();

while(paraNames .hasMoreElements()){
	StringBuffer text = new StringBuffer((String)paraNames.nextElement());
	out.print(text + " : ");
	
	String value = request.getParameter(text.toString());
	out.print(value+"<br>");
}
%>

 

 

결과

 

 

 

 

 

form03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="form03_process.jsp">
 <div>
 	<label for="orange">오렌지</label>
 	<input type="checkbox" id="orange" value="Orange" name="check">
 	<label for="apple">사과</label>
 	<input type="checkbox" id="apple" value="Apple" name="check">
 	<label for="banana">바나나</label>
 	<input type="checkbox" id="banana" value="Banana" name="check">
 	<input type="submit" value="전송">
 </div>
</form>
</body>
</html>

결과

 

form03_process.jsp

<%@page import="java.nio.Buffer"%>
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%//스크립틀릿
String[] name = request.getParameterValues("check");
for(int i=0; i<name.length; i++){
	out.print(name[i] + " ");
}

%>

결과

 

 

 

 

 

addBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
</head>
<body>
<%@ include file="menu.jsp" %>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">
				도서 등록
			</h1>
		</div>
	</div>

<div class="container">
	<form action="processAddBook.jsp" class="form-horizontal">
	<div class="form-group row">
		<label class="col-sm-2" for="bookId">도서 코드</label>
		<div class="col-sm-3">
			<input type="text" id="bookId" name="bookId">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="name">도서명</label>
		<div class="col-sm-3">
			<input type="text" id="name" name="name">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="unitPrice">가격</label>
		<div class="col-sm-3">
			<input type="text" id="unitPrice" name="unitPrice">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="author">저자</label>
		<div class="col-sm-3">
			<input type="text" id="author" name="author">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="publisher">출판사</label>
		<div class="col-sm-3">
			<input type="text" id="publisher" name="publisher">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="releseDate">출판일</label>
		<div class="col-sm-3">
			<input type="text" id="releseDate" name="releseDate">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="totalPages">총페이지 수</label>
		<div class="col-sm-3">
			<input type="text" id="totalPages" name="totalPages">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="description">상세 정보</label>
		<div class="col-sm-5">
			<textarea name="description" cols="50" rows="2" class="form-control"></textarea>
		</div>
				
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="unitsInStock">재고 수</label>
		<div class="col-sm-3">
			<input type="text" id="unitsInStock" name="unitsInStock">
		</div>
	</div>
	<div class="form-group 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="Refurbished"> 재생 제품
		</div>
	</div>
	<div class="form-group row">
		<div class="col-sm-offset-2 col-sm-10">
			<input type="submit" class="btn btn-primary" value="등록">
		</div>
	</div>
	
	</form>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>

 

 

 

 

 

processAddBook.jsp

<%@page import="java.util.List"%>
<%@page import="bookDAO.BookReposutory"%>
<%@page import="bookVO.BookVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
 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 releseDate = request.getParameter("releseDate");
String totalPages = request.getParameter("totalPages");
String description = request.getParameter("description");
String unitsInStock = request.getParameter("unitsInStock");
String condition = request.getParameter("condition");

out.print(bookId);
out.print(name);
out.print(unitPrice);
out.print(author);
out.print(publisher);
out.print(releseDate);
out.print(totalPages);
out.print(description);
out.print(unitsInStock);
out.print(condition);

int price;
//폼 페이지에서 상품 가격이 입력되지 않은 경우 0으로, 입력된 경우 int형으로 변경
if(unitPrice.isEmpty()){
	price = 0;
}else{
	price = Integer.parseInt(unitPrice);
}
	
//폼 페이지에서 상품 재고 수가 입력되지 않은 경우 0으로, 입력된 경우 int형으로 변경
//int타입의 허용 범위 : -2,147,483,648 ~ 2,147,483,647
int stock;
if(unitsInStock.isEmpty()){
	stock = 0;
}else{
	stock = Integer.parseInt(unitsInStock);
}

int pages;
if(totalPages.isEmpty()){
	pages = 0;
}else{
	pages = Integer.parseInt(unitsInStock);
}
BookVO vo = new BookVO();
vo.setBookId(bookId);
vo.setName(name);
vo.setUnitPrice(price);
vo.setAuthor(author);
vo.setPublisher(publisher);
vo.setReleseDate(releseDate);
vo.setTotalPages(pages);
vo.setDescription(description);
vo.setUnitsInStock(stock);
vo.setCondition(condition);

out.print("VO확인" + vo);

BookReposutory repository = BookReposutory.getInstance();
repository.addBook(vo);

List<BookVO> listOfProducts = repository.getAllProducts();
//향상된 for문
for(BookVO bookVo : listOfProducts){
	out.print("<p>"+bookVo+"</p>");
}
//목록으로 강제 이동. response 내장 객체의 sendRedirect()
response.sendRedirect("products.jsp");
%>

'JSP > 웹페이지 만들기' 카테고리의 다른 글

JSP 웹페이지 만들기 8장 연습문제  (0) 2023.07.15
JSP 웹페이지 만들기 7장 연습문제  (0) 2023.07.05
JSP 20230629 웹페이지 만들기 5장 실습  (1) 2023.06.29
JSP 4장 액션 태그 + 자바빈즈 정리 + 연습문제  (1) 2023.06.27
JSP 3장 디렉티브 태그 정리 + 연습문제  (0) 2023.06.27

관련글

티스토리툴바