form
form 개요
- 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식
- 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여줌
- 사용자가 어떤 내용을 원하는지, 사용자의 요구 사항이 무엇인지 파악할 때 가장 많이 사용하는 웹 애플리케이션의 필수 요소
form의 구성 태그의 종류
form : 폼을 정의 하는 최상위 태그
select : 항목을 선택할 수 있는 태그
input : 사용자가 입력할 수 있는 태그
textarea : 여러 줄을 입력할 수 있는 태그
form 태그의 기능 및 사용법
action : 폼 데이터를 받아 처리하는 웹 페이지의 URL을 설정
method : 폼 데이터가 전송되는 HTTP 방식을 설정
name : 폼을 식별하기 위한 이름을 설정
target : 폼 처리 결과의 응답을 실행할 프레임을 설정
enctype : 폼을 전송하는 콘텐츠 MIME 유형을 설정
accecpt-charset : 폼 전송에 사용할 문자 인코딩을 설정
input 태그의 기본 속성
type=text : 기본 값, 한 줄의 텍스트를 입력
type=radio : 라디오 버튼으로 열거된 것 중 택 1
type=checkbox : 체크 박스로 열거된 것 중 다중 선택
type=password : 암호입력
type=hidden : 값을 숨겨서 전송
type=file : 파일 업로드를 위한 파일을 선택
type=button : 버튼 모양을 출력
type=reset : 폼에 입력된 값을 모두 초기화
type=submit : 폼에 입력된 값을 서버에 전송
name : 입력 양식을 식별하는 이름 부여
value : 입력 양식의 초깃값 설정
- 입력할 때 회색/투명 글이 예시
select 태그
여러 개의항목이 나타나는 목록상자에서 항목을 선택하는 태그
<select 속성1="값1" [속성2="값2" ... ]>
<option 속성1="값" [속성1]>항목1</option>
<option 속성2="값" [속성2]>항목2</option>
</select>name : 목록 상자의 이름 설정
size : 한 번에 표시할 항목의 개수를 설정
multitple : 다중선택 가능
value : 항목의 값을 설정
selected : 해당 항목을 초기값을 선택
disabled : 항목을 비활성화
textarea
여러 줄의 텍스트를 입력할 수 있는 태그
띄어쓰기가 그대로 노출됨
<textarea name="comment">
// 여러 텍스트를 입력할 수 있는 공간을 생성
<textarea>name : 이름 설정
cols : 입력하 텍스트의 영역 너비
rows : 입력할 텍스트의 영역 높이
wrap="off" : 줄 바꿈을 하지 않고 수평 스크롤바로 이어 적기
wrap="soft" : 엔터없이 텍스트라인 끝에서 자동 행 바꿈
wrap="hard" : soft 상태와 비슷
요청 파라미터 값 받기
request 내장 객체는 웹 브라우저가 서버로 보낸 요쳉애 대한 정보를 담고 있으며 getParameter() 메소드로 요청 파라미터의 값을 얻음
예시 상품 등록(addProduct.jsp)
<%@page import="com.survivalcoding.data.ProductRepository" %>
<%@page import="com.survivalcoding.domain.model.Product" %>
<%@page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 등록</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<jsp:include page="menu.jsp"></jsp:include>
<div class="p-5 bg-primary text-white">
<div class="container">
<h1 class="display-3">상품 등록</h1>
</div>
</div>
<div class="container">
<form name="newProduct" action="processAddProduct.jsp" method="post" class="form-horizontal">
<div class="form-group row m-3">
<label class="col-sm-2">상품 코드</label>
<div class="col-sm-3">
<input type="text" name="productId" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">상품명</label>
<div class="col-sm-3">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">가격</label>
<div class="col-sm-3">
<input type="text" name="unitPrice" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">상세 정보</label>
<div class="col-sm-3">
<textarea type="text" name="description" class="form-control"></textarea>
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">제조사</label>
<div class="col-sm-3">
<input type="text" name="manufacturer" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">분류</label>
<div class="col-sm-3">
<input type="text" name="category" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">재고 수</label>
<div class="col-sm-3">
<input type="text" name="unitsInStock" class="form-control">
</div>
</div>
<div class="form-group row m-3">
<label class="col-sm-2">상태</label>
<div class="col-sm-3">
<input type="radio" name="condition" value="New" checked>신규 제품<br>
<input type="radio" name="condition" value="Old">중고 제품<br>
<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>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>위의 코드는 addProduct.jsp 파일의 코드로 웹 페이지에서 제품에 대한 정보를 직접 입력받고 입력받은 정보를 processAddProduct.jsp 파일에 입력한다.
<form name="newProduct" action="processAddProduct.jsp" method="post" class="form-horizontal">- action 속성으로 processAddProduct.jsp에 form태그에 입려된 정보를 위의 파일로 전송하도록 경로를 설정
- method="post" : 전송하는 데이터의 모든 값이 URL 주소에 나타나면서 전송됨
-- post와 get의 차이 https://im-developer.tistory.com/166
등록된 상품 정보 처리(processAddProduct.jsp)
넘어온 상품 정보를 받아 변수로 입력하여 등록하는 과정
<%@page import="com.survivalcoding.domain.model.Product"%>
<%@page import="com.survivalcoding.data.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 한글 처리
request.setCharacterEncoding("UTF-8");
// POST로 넘어온 것
String productId = request.getParameter("productId");
String name = request.getParameter("name");
int unitPrice = Integer.valueOf(request.getParameter("unitPrice"));
String description = request.getParameter("description");
String manufacturer = request.getParameter("manufacturer");
String category = request.getParameter("category");
int unitsInStock = Integer.valueOf(request.getParameter("unitsInStock"));
String condition = request.getParameter("condition");
ProductRepository repository = ProductRepository.getInstance();
Product product = new Product(productId, name, unitPrice);
product.setDescription(description);
product.setManufacturer(manufacturer);
product.setCategory(category);
product.setUnitsInStock(unitsInStock);
product.setCondition(condition);
repository.addProduct(product);
response.sendRedirect("products.jsp");
%>String productId = request.getParameter("productId");
=> URL로 넘어온 query string parameter 중 productId의 값을 읽고 문자형 변수로 입력
ProductRepository repository = ProductRepository.getInstance();
=> ProductRepository 클래스의 repository 인스턴스를 생성하고 ProductRepository.getInstance() 메소드를 실행
Q. 인스턴스 생성 방식 new vs getInstance
new : 실행할 때마다 새로운 인스턴스를 반환
getInstance : 한 번만 실행하면 동일한 인스턴스를 저장하고 반환
response.sendRedirect("products.jsp");products.jsp 파일로 이동하도록 한다(href 의 응용 정도로 생각하자)
상품의 정보가 등록된 파일(ProductRepository.java)
등록된 상품을 ArrayList 형식으로 보관함
package com.survivalcoding.data;
import java.util.ArrayList;
import java.util.List;
import com.survivalcoding.domain.model.Product;
// 다형성
public class ProductRepository {
private List<Product> products = new ArrayList<>();
// 싱글턴 패턴
// 1. static 인스턴스 준비
// 2. static 메서드로 인스턴스 리턴 (getInstance() 이름을 주로 씀)
// 3. 생성자 막기 (private)
private static ProductRepository instance = new ProductRepository();
public static ProductRepository getInstance() {
return instance;
}
private ProductRepository() {
Product phone = new Product("P1234", "iPhone 6s", 800000);
phone.setDescription("4.7-inch, 1334x750 Retina HD display");
phone.setCategory("Smart Phone");
phone.setManufacturer("Apple");
phone.setUnitsInStock(1000);
phone.setCondition("New");
Product notebook = new Product("P1235", "LG PC 그램", 1500000);
notebook.setDescription("!4.7-inch, 1334x750 Retina HD display");
notebook.setCategory("!Smart Phone");
notebook.setManufacturer("!Apple");
notebook.setUnitsInStock(1000);
notebook.setCondition("Refubished");
Product tablet = new Product("P1236", "Galaxy Tab S", 900000);
tablet.setDescription("?4.7-inch, 1334x750 Retina HD display");
tablet.setCategory("?Smart Phone");
tablet.setManufacturer("?Apple");
tablet.setUnitsInStock(1000);
tablet.setCondition("Old");
products.add(phone);
products.add(notebook);
products.add(tablet);
}
public List<Product> getAllProducts() {
return products;
}
public Product getProductById(String id) {
// List -> Stream (데이터의 흐름)
return products.stream()
// 클래스 product를 가져와서 product의 id와 매개변수 id가 일치하면
.filter((product) -> product.getId().equals(id)) // 조건
.findFirst() // 첫번째
.get(); // 얻어
}
public void addProduct(Product product) {
products.add(product);
}
}
살펴볼 코드(list.stream)
products.stream() : ArrayList의 원소를 차례대로 서치
.filter() : 스트림 내 요소들을 하나씩 평가하여 걸러내는 작업
상품 정보 출력(products.jsp)
<%@page import="com.survivalcoding.data.ProductRepository"%>
<%@page import="com.survivalcoding.domain.model.Product"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 정보</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<jsp:include page="menu.jsp"></jsp:include>
<div class="p-5 bg-primary text-white">
<div class="container">
<h1 class="display-3">상품 정보</h1>
</div>
</div>
<% // 싱글톤 패턴 객체(인스턴스) 생성
ProductRepository repository = ProductRepository.getInstance();
String id = request.getParameter("id");
Product product = repository.getProductById(id);
%>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>
<%=product.getName()%>
</h3>
<p>
<%=product.getDescription()%>
</p>
<p>
<b>상품 코드 : </b><span class="badge bg-danger"> <%=product.getId()%>
</span>
</p>
<p>
<b>제조사 : </b><%=product.getManufacturer()%></p>
<p>
<b>분류 : </b><%=product.getCategory()%></p>
<p>
<b>재고 수 : </b><%=product.getUnitsInStock()%></p>
<p>
<%=product.getUnitPrice()%>원
</p>
<p>
<a href="" class="btn btn-info">상품 주문 »</a>
</p>
<a href="products.jsp" class="btn btn-secondary">상품 목록 »</a>
</div>
</div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
배운 건 써 먹자