Nov 11 : form tag

Kim·2020년 11월 11일

JSP

목록 보기

2/5

📌 form

Written in .jsp file

⛄ form tag structure

<form method="get or post" action="name of server program">
<input type="whatever you want" value="" id="" name="">
</form>

method : get or post (refer to previous post)
action : name of server program (servlet) also can call JSP

⛄ example : compare get and post method

🐣 .jsp

<form method="get" action="MethodServlet"> //action = JSP or Servlet PHP : action =PHP
	<input type="submit" value="get call">
	</form>
	<br><br>
<form method="post" action="MethodServlet">
	<input type="submit" value="post call">
	</form>

🐣 .java(survlet) : server

	//get method
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println("<h1>get method</h1>");
		out.close();
	}
    
    //post method
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println("<h1>post method</h1>");
		out.close();
	}
}

🐣 result

⛄ URL

🐣 queryString
서버경로 : 포트번호/프로그램경로?쿼리스티링

🐣 example_
https://finance.naver.com/world/market_news_view.nhn?category=main&office_id=008&article_id=0004497817&date=2020-11-11

http = protocol, finance.naver.com~~ = site
nhn = program name (hidden). If you use Java then you can hide the program name
category=main ~ 2020-11-11 = queryString (key : value)
⛄ HttpServlet ✌ Response ✌

HttpServletResponse
An object is used for ✌SENDING DATA TO CLIENT✌(발신용)

⛄ HttpServlet ✌ Request ✌

HttpServletRequest
An object include ✌DATA FROM CLIENT✌(송신용)
protected void doGet(HttpServletRequest request, HttpServletResponse response)
HttpServletRequest request : parameter from client
HttpServletResponse response : parameter to client

📌 Example : get text from user

Get two numbers(integer) a, b from the user and print the result of a * b

⛄ .jsp (post method)

<form method="post" action="MethodServlet">
	<input type=text name=first id=first><br>
	<input type=text name=second id=second><br>
	<input type="submit" value="post call">
	</form>

⛄ .java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		String first=request.getParameter("first");
		String second=request.getParameter("second");
		
		int x=Integer.parseInt(first);  //정수로 변환한 뒤, 변환된 값을 담을 변수 필요함!!
		int y=Integer.parseInt(second);
		
		int result=x*y;
	
		PrintWriter out=response.getWriter();
		out.println(first+" * "+second+" = "+result);
		
		out.close();
	}

⛄ tip
String first=request.getParameter("first");
getParameter("first") = <input type=txt name="first">
🤔 mistake
Survlet get String and convert String to Integer in the survlet.
After converting, MUST declare a variable to contain the converted value.
getParameter and getParameterValues only can get String NOT other type values
⛄ result

📌 한글 나오게 인코딩하기

⛄ 추가!
java file에 있는 get, post method 안에
response.setContentType("text/html; charset=utf-8"); request.setCharacterEncoding("utf-8");
추가해주면 확실하게 한글이 깨지지 않고 나옴

📌 Example : get multiple selection

USE getParameterValues

⛄ .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form tag training</title>
</head>
<body>
<form method="get" action="MethodServlet">
	<input type="checkbox" name=item value=shoes>Shoes<br>
	<input type="checkbox" name=item value=bag>Bag<br>
	<input type="checkbox" name=item value=belt>Belt<br>
	<input type="checkbox" name=item value=hat>Cap<br>
	<input type="checkbox" name=item value=watch>Watch<br>
	<input type="checkbox" name=item value=jewerly>Jewerly<br>
	<input type="checkbox" name=item value=earring>Earrings<br>
	<input type=submit value=send>
	</form>
	<br><br>
	
<form method="post" action="MethodServlet">
	<input type=text name=first id=first><br>
	<input type=text name=second id=second><br>
	<input type="submit" value="post call">
	</form>
</body>
</html>

⛄ .java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		request.setCharacterEncoding("utf-8");
//		String item=request.getParameter("item"); //name, getparameter only can get strings
		String[] item=request.getParameterValues("item");
		
		PrintWriter out=response.getWriter();
		out.println("<h1>get 방식으로 처리됨</h1>");
		for(int i=0;i<item.length; i++) {
			out.println("item : "+item[i]+"<br>");
		}
		out.close();
	}

📌 Practice : Sign up

⛄ .jsp

	<%@ page language="java" contentType="text/html; charset=UTF-8"
	    pageEncoding="UTF-8"%>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>form tag training</title>
	</head>
	<body>
	<form method="get" action="MethodServlet">
	<table>
   <tr><td align=right>ID</td><td><input type=text name=userid size=12></td>
   <tr><td align=right>PW</td><td><input type=text name=passwd1 size=12></td>
   <tr><td align=right>Confirm PW</td><td><input type=text name=passwd2 size=12></td>
   <tr><td align=right>Name</td><td><input type=text name=username size=12></td>
   <tr><td align=right>DOB</td><td><input type=date name=birth></td>
   <tr><td align=right>Gender</td><td><input type=radio name=gender value=female>female
                           <input type=radio name=gender value=male>male</td>
   <tr><td align=right>Mobile</td><td><input type=phone name=mobile></td>
   <tr><td align=right>Regions</td><td><select name=selArea multiple>
                              <option value='Seoul'>Seoul</option>
                              <option value='LA'>LA</option>
                              <option value='Tokyo'>Tokyo</option>
                              <option value='Shanghai'>Shanghai</option>
                              <option value='NY'>NY</option>
                              <option value='Sydney'>Sydney</option>
                              </select></td>
   <tr><td align=right>Interests</td><td><input type=checkbox name=interest value="politic">Politic
                              <input type=checkbox name=interest value="economy">Economy
                              <input type=checkbox name=interest value="sports">Sports<br>
                              <input type=checkbox name=interest value="entertainment">Entertainment
                              <input type=checkbox name=interest value="society">Society
                              <input type=checkbox name=interest value="internation">Interantional<br>
                              <input type=checkbox name=interest value="finance">Finance
                              <input type=checkbox name=interest value="real">Real eastate
                              <input type=checkbox name=interest value="stock">Stock market
   </td>
   
   </table>
   <input type=submit value=submit>
   </form>
	</body>
	</html>

⛄ java

package web02;

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;

/**
 * Servlet implementation class MethodServlet
 */
@WebServlet("/MethodServlet")
public class MethodServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MethodServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		String userid=request.getParameter("userid");
		String passwd1=request.getParameter("passwd1");
		String passwd2=request.getParameter("passwd2");
		String username=request.getParameter("username");
		
		String birth=request.getParameter("birth");
		String gender=request.getParameter("gender");
		String mobile=request.getParameter("mobile");
		
		String [] selArea=request.getParameterValues("selArea");
		String [] interest=request.getParameterValues("interest");
		
		PrintWriter out=response.getWriter();
		
		out.println("ID : "+userid+"<br>");
		out.println("PW : "+passwd1+"<br>");
		out.println("PW confirm : "+passwd2+"<br>");
		out.println("Name : "+username+"<br><hr>");
		
		out.println("DOB : "+birth+"<br>");
		out.println("Gender : "+gender+"<br>");
		out.println("Mobile : "+mobile+"<br><hr>");
		
		for(int i=0; i<selArea.length;i++) {
			out.println("Area : "+selArea[i]+"<br>");
		}
		for(int i=0; i<interest.length;i++) {
			out.println("Interest : "+interest[i]+"<br>");
		}
		
		out.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

}

🤔 mistake
At the result, check box, radio and multiple select show the ✌value✌ of the selected ones. So change the value of real eastate(real >> real eastate) and stock market(stock >> stock market)

📌 Built-in objects

request **
response **
out **
page *
config
session *
application *
pageContext
exception

web03a.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Redirection</title>
</head>
<body>
<form method=post action="web03b">
	<select name=selSite size=5>
		<option value=naver>naver</option>
		<option value=daum>daum</option>
		<option value=amazon>amazon</option>
		<option value=facebook>facebook</option>
	</select><br><br>

	<input type=submit value=move>

</form>
</body>
</html>

web03d.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daum / Facebook</title>
</head>
<body>
	<h3>Daum or Facebook</h3>
<%
	String str=request.getParameter("selSite");
	//PrintWriter out = new response.getPrintWriter();
	out.println(str);
%>
</body>
</html>

web03c.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Naver / Amazon</title>
</head>
<body>
	<h3>Naver or Amazon</h3>
<%
	String str=request.getParameter("selSite");
	//PrintWriter out = new response.getPrintWriter();
	//= 내장객체(Built-in object)
	out.println(str);
	out.println("getContextPath : "+request.getContextPath()+"<br>");
%>
</body>
</html>

-web03b.java

package web03;

import java.io.IOException;

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



/**
 * Servlet implementation class web03b
 */
@WebServlet("/web03b")
public class web03b extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public web03b() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		String site=request.getParameter("selSite");
		String newsite=null;
		
		if(site.equals("naver")) {
			newsite="web03c.jsp";
		} else if(site.equals("daum")) {
			newsite="web03d.jsp";
		} else if(site.equals("amazon")) {
			newsite="web03c.jsp";
		} else if(site.equals("facebook")) {
			newsite="web03d.jsp";
		}
		
		RequestDispatcher dp=request.getRequestDispatcher(newsite);
		dp.forward(request, response); //move to the chosen page 웹페이지 이동
	}

}

Only jsp

reseach.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설문조사 결과</title>
</head>
<style>
b {
   font-size:16pt;
}
</style>
<body>
<h2>설문조사 결과</h2>
<%
   request.setCharacterEncoding("utf-8");
   String username=request.getParameter("username");
   String gender=request.getParameter("gender");
   String[] season=request.getParameterValues("season");
%>
<table>
<tr><td>이름</td><td><%=username %></td></tr>
<tr><td>성별</td><td><%=gender %></td></tr>
<tr><td>계절</td><td>
<%
   for(int i=0;i<season.length;i++){
      out.println(season[i]);
   }
%>
</td></tr>
<tr>
<td colspan=2 align=center><a href="javascript:history.go(-1)">뒤로 다시</a></td>
</tr>
</table>
</body>
</html>

researchForm.jsp

<%@ 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>
<form action=research.jsp method=post>
   <table>
   <tr>
      <td>이름</td><td><input type=text name=username size=12>
   </tr>
   <tr>
      <td>성별</td><td><input type=radio name=gender value=female>여성
                  <input type=radio name=gender value=male>남성</td>
   </tr>
   <tr>
      <td>좋아하는 계절</td><td>
      <input type=checkbox name=season value=spring>봄
      <input type=checkbox name=season value=summer>여름
      <input type=checkbox name=season value=fall>가을
      <input type=checkbox name=season value=winter>겨울
   </tr>
   <tr>
      <td colspan=2>
         <input type=submit value="전송">
         <input type=reset value='취소'>
      </td>
   </tr>
   </table>
</form>
</body>
</html>