본문 바로가기
Java 웹 개발

21.10.13 - 웹 개발 입문 43일차

개발이란 2021. 10. 13. 22:59

웹 - form태그

form 태그는 데이터를 전송하고 싶을 때 사용한다.
= form이 전송(submit)되면 from 내부의 모든 입력값이 전송된다.
= 내부에 각종 입력창(input, select, textarea)과 전송버튼(submit) 그리고 초기화버튼(reset)을 배치하여 사용한다.

 

form은 반드시 전송될 목적지가 설정되어야 한다.
= 만약에 설정하지 않으면 현재 페이지로 자동 지정된다.
= action 속성에 주소를 작성한다.


form 안에 있는 입력창(input, select, textarea) 중에서 전송할 입력창에는 파라미터 이름을 부여
= name이라는 속성에 이름을 작성 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 배우기</title>
</head>
<body>

	<!-- 전송 폼 -->
	<form action="/web05/exam/detail.txt">
	
		<!-- 입력 창 -->
		<input type="text" name="examId">
		
		<!-- 전송 버튼 -->
		<input type="submit" >
		
		<!-- 초기화버튼 -->
		<input type="reset">
		
	</form>
	
</body>
</html>

 

기본적인 구조



 


(Q1) form을 이용하여 PRoductDetailServlet과 연결된 입력창을 구현


참고 : value는 초기 표시값 설정 옵션, placeholder는 입력창 도움말 설정 옵션 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험 정보 검색 페이지</title>
</head>
<body>

	<h1>상품 검색</h1>
	<form action="/web05/product/detail.txt">

		<input type="text" name="no" placeholder="상품번호 입력"> 
		
		<input type="submit" value="검색">
		
	</form>

</body>
</html>


(Q2) form을 이용하여 ExamFindServlet과 연결된 입력창을 구현


참고 : 항목 입력창 - 드롭다운 리스트(select)
= option의 value는 실제 전송값, 사이에 작성된 글자는 화면에 보이는 값

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험 정보 검색 페이지</title>
</head>
<body>

	<h1>시험 정보 검색</h1>
	
	<form action="/web05/exam/find.txt">

		<!-- 항목 입력창 -->
		<input type="text" name="column" placeholder="항목 입력">
		
		<!-- 검색어 입력창 -->
		<input type="text" name="keyword" placeholder="검색어 입력">
		
		<!-- 전송 버튼 -->
		<input type="submit" value="검색">

	</form>
	
		<hr>
	
	<h1>시험 정보 검색(select 적용)</h1>
	
	<form action="/web05/exam/find.txt">

		<!-- 항목 입력창 : 드롭다운 리스트(select) -->
		<select name="column">
			<option>student</option>
			<option>subject</option>
			<option>type</option>
		</select>
		
		<!-- 검색어 입력창 -->
		<input type="text" name="keyword" placeholder="검색어 입력">
		
		<!-- 전송 버튼 -->
		<input type="submit" value="검색">

	</form>
	
			<hr>
	
	<h1>시험 정보 검색(select 표시값 전송값 분리)</h1>
	
	<form action="/web05/exam/find.txt">

		<select name="column">
			<option value="student">학생명</option>
			<option value="subject">과목명</option>
			<option value="type">시험유형</option>
		</select>
		
		<!-- 검색어 입력창 -->
		<input type="text" name="keyword" placeholder="검색어 입력">
		
		<!-- 전송 버튼 -->
		<input type="submit" value="검색">

	</form>

</body>
</html>

 

 

Q. 회원을 원하는 항목에 대한 검색어로 검색할 수 있도록 입력하는 폼을 구현

(참고)
required="required" 라고 주면 반드시 입력해야 전송되도록 설정할 수 있다.
autocomplete="off" 라고 주면 자동완성이 표시되지 않는다.
= 이름과 값이 똑같은 속성은 이름만 적어도 인정! (required, readonly, disabled, ...)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 검색 페이지</title>
</head>
<body>

	<h1>회원 검색</h1>
	<form action="/web05/member/find.txt">
	
		<select name="column">
		<option value="member_id">아이디</option>
		<option value="member_pw">닉네임</option>
		<option value="member_email">이메일</option>
		<option value="member_phone">전화번호</option>
		<option value="member_grade">등급</option>
		</select>
		
		<input type="text" name="keyword" placeholder="검색어 입력" required autocomplete="off">
		
		<input type="submit" value="검색">
	
	</form>

</body>
</html>

 

 

Q. 시험 정보를 등록하는 서블릿과 연결되는 입력폼을 구현하세요. (기본)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험 정보 등록 페이지</title>
</head>
<body>

	<form action="/web05/exam/insert.txt">

		<input type="text" name="student" placeholder="학생이름" required>
		<br><br>
		<input type="text" name="subject" placeholder="과목이름" required>
		<br><br>
		<input type="text" name="type" placeholder="시험유형" required>
		<br><br>
		<input type="text" name="score" placeholder="시험점수" required>
		<br><br>
		<input type="submit" value="등록">

	</form>

</body>
</html>

 

Q. 시험 정보를 등록하는 서블릿과 연결되는 입력폼을 구현하세요. (셀렉트)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험 정보 등록 페이지</title>
</head>
<body>

	<h1>시험 정보 등록</h1>

	<form action="/web05/exam/insert.kh">

		<input type="text" name="student" placeholder="학생이름" required>
		<br><br>
		<select name="subject" required>
			<option value="">과목 선택</option>
			<option>응용SW기초기술활용</option>
			<option>프로그래밍언어활용</option>
			<option>네트워크프로그래밍구현</option>
			<option>SQL활용</option>
			<option>데이터입출력구현</option>
			<option>요구사항확인</option>
			<option>서버프로그래밍구현</option>
		</select>
		<br><br>
		<select name="type" required>
			<!-- 첫 도움말은 비어있는 값처럼 처리할 수 있다 -->
			<option value="">유형 선택</option>
			<option>서술형</option>
			<option>문제해결시나리오</option>
			<option>평가자체크리스트</option>
		</select>
		<br><br>
		<input type="number" name="score" placeholder="시험점수" required
					min="0" max="100">
		<br><br>
		<input type="submit" value="등록">

	</form>

</body>
</html>

 

Q. 회원가입을 할 수 있도록 form을 구현

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
</head>
<body>

		<h1>회원 가입</h1>

	<form action="/web05/member/join.txt">
		아이디
		<br>
		<input type="text" name="memberId" required>
		<br><br>
		비밀번호
		<br>
		<input type="password" name="memberPw" required>
		<br><br>
		닉네임
		<br>
		<input type="text" name="memberNick" required>
		<br><br>
		생년월일
		<br>
		<input type="date" name="memberBirth" required>
		<br><br>
		이메일
		<br>
		<input type="email" name="memberEmail">
		<br><br>
		전화번호
		<br>
		<input type="tel" name="memberPhone" >
	
		<br><br><br>
		<input type="submit" value="회원가입">
	</form>


</body>
</html>

 

알아두면 좋은 입력창

select 태그에서 특정 option을 선택해두고 싶다면 해당 option에 selected="selected"를 추가

성별:
<select name="gender1">
	<option value="M">남자</option>
	<option value="F" selected>여자</option>
</select>

 


라디오버튼 : 같은 이름을 가진 경우 택1 형태로 선택이 가능
= radio에는 name과 value가 있어야 하며, value가 없으면 체크시 on으로 전송됨
= radio에서 기본값 선택을 하기 위해서는 checked="checked" 속성을 적용

성별:
<input type="radio" name="gender2" value="M">남자
<input type="radio" name="gender2" value="F" checked>여자

 

 

체크박스 : 두 가지 상태를 토글(Toggle)하는 도구
= 전송을 위해서는 name과 value가 있어야 하며, value가 없으면 on이 전송

<input type="checkbox" name="agree" value="ok"> 동의합니까?

 


히든(Hidden) : 안보이는 입력창. 입력창은 아니고 숨겨진 전송 도구라고 봐야 한다.
= 사용자는 모르게 개발자의 펠요에 의해서 특정 데이터를 같이 첨부할 겨우 사용

<input type="hidden" name="nickname" value="abc">

 

 


텍스트에어리어(textarea)
= 여러 줄 입력할 수 있는 입력창
= 범위를 가진다
= (주의) value 속성이 없고 초기값은 태그의 사이에 작성
= rows 속성을 이용하여 초기에 표시될 줄 수를 지정
= cols 속성을 이용하여 초기에 표시될 칸 수를 지정

<textarea name="test" rows="10" cols="10">hello</textarea>

 

웹 - 데모홈페이지 구현 해보기

(beans는 기존 web05에 구현한거 재사용)

flow chart

(1) 메인 페이지 구현

1-1 메인 페이지 index.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	
	<h1><a href="index.html">테스트 홈페이지</a></h1>	
	
	<!-- 각종 기능(CRRUD)으로의 연결(링크) 구현 -->
	<h5><a href="insert.html">시험 정보 등록</a></h5>
	<h5><a href="list.txt">시험 정보 목록</a></h5>
	<h5><a href="search.html">시험 정보 검색</a></h5>
	<h5><a href="detail.html">시험 정보 상세조회</a></h5>
	<h5><a href="update.html">시험 정보 변경</a></h5>
	<h5><a href="delete.html">시험 정보 삭제</a></h5>
		
</body>
</html>

 

1-2 확인

 

(2) 삭제 기능 구현

2-1 삭제 번호 입력 delete.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>시험 정보 삭제</h1>
	
	<form action="delete.txt">
		<input type="number" name="examId" placeholder="시험지번호" required>
		<input type="submit" value="삭제">
	</form>
</body>
</html>

 

2-2 삭제 처리 delete.txt 만들기

package web07.servlet;

import java.io.IOException;

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

import web07.beans.ExamDao;

@WebServlet(urlPatterns = "/delete.txt")
public class ExamDeleteServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			// 입력
			int examId = Integer.parseInt(req.getParameter("examId"));

			// 처리
			ExamDao examDao = new ExamDao();
			boolean success = examDao.delete(examId);

			// 출력
			//= 화면을 서블릿에서 만들려고 애쓸 필요가 없다
			//= 화면은 HTML 등의 전문 페이지가 존재하기 때문에 해당 페이지로 사용자를 이동시키면 된다.
			//= 재접속 지시 코드 = 리다이렉트
			if(success) {
				resp.sendRedirect("delete_success.html");
			}
			else {
				resp.sendRedirect("delete_fail.html");
			}
		} catch (Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

2-3 삭제 성공 delete_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>시험 정보 삭제 성공</h1>
	<h5><a href="index.html">메인페이지로 이동</a></h5>
</body>
</html>

 

2-4 삭제 실패 delete_fail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>존재하지 않는 시험지 번호</h1>
	<h5><a href="index.html">메인페이지로 이동</a></h5>
</body>
</html>

 

2-5 확인

 

(3) 등록 기능 구현

3-1 등록 정보 입력 insert.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	
	<h1>시험 정보 등록</h1>
	
	<form action="insert.txt">
	
		학생명 : <input type="text" name="student" required>
		<br><br>
		과목명 : <input type="text" name="subject" required>
		<br><br>
		유형 : <input type="text" name="type" required>
		<br><br>
		점수 : <input type="text" name="score" required>
		<br><br>
		<input type="submit" value="등록">
		
	</form>
	
</body>
</html>

 

3-2 등록 처리 insert.txt 만들기

package web07.servlet;

import java.io.IOException;

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

import web07.beans.ExamDao;
import web07.beans.ExamDto;

@WebServlet(urlPatterns = "/insert.txt")
public class ExamInsertServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : ExamDto(student + subject + type + score)
			ExamDto examDto = new ExamDto();
			examDto.setStudent(req.getParameter("student"));
			examDto.setSubject(req.getParameter("subject"));
			examDto.setType(req.getParameter("type"));
			examDto.setScore(Integer.parseInt(req.getParameter("score")));
			
			//처리
			ExamDao examDao = new ExamDao();
			examDao.insert(examDto);
			
			//출력 : 결과 페이지로 리다이렉트
			resp.sendRedirect("insert_success.html");
			
		}
		catch(Exception e){
			e.printStackTrace();
			resp.getWriter().println("error");
		}
		
	}
}

 

3-2 등록 완료 insert_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>시험 정보 등록 완료</h1>
	<h5><a href="index.html">메인페이지로 이동</a></h5>
</body>
</html>

 

3-3 확인

 

(4) 수정 기능 구현

4-1 수정 정보 입력 update.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	
	<h1>시험 정보 수정</h1>
	<form action="update.txt">
	
		시험지번호 : <input type="text" name="examID" required>
		<br><br>
		학생명 : <input type="text" name="student" required>
		<br><br>
		과목명 : <input type="text" name="subject" required>
		<br><br>
		유형 : <input type="text" name="type" required>
		<br><br>
		점수 : <input type="text" name="score" required>
		<br><br>
		<input type="submit" value="수정">
	
	</form>
	
</body>
</html>

 

4-2 수정 처리 update.txt 만들기

package web07.servlet;

import java.io.IOException;

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

import web07.beans.ExamDao;
import web07.beans.ExamDto;

@WebServlet(urlPatterns = "/update.txt")
public class ExamUpdateServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 ExamDto(examId + student + subject + type + score)
			ExamDto examDto = new ExamDto();
			examDto.setExamId(Integer.parseInt(req.getParameter("examID")));
			examDto.setStudent(req.getParameter("student"));
			examDto.setSubject(req.getParameter("subject"));
			examDto.setType(req.getParameter("type"));
			examDto.setScore(Integer.parseInt(req.getParameter("score")));
			
			//처리
			ExamDao examDao = new ExamDao();
			boolean success = examDao.update(examDto);
			
			//출력 : 성공/실패 여부에 따라 다른 페이지로 리다이렉트
			if(success) {
				resp.sendRedirect("update_success.html");
			}else {
				resp.sendRedirect("update_fail.html");
			}
			
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

4-3 수정 성공 update_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>시험 정보 변경 성공</h1>
	<h5><a href="index.html">메인페지로 이동</a></h5>
</body>
</html>

 

4-4 수정 실패 update_fail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>
	<h1>시험 정보 변경 실패</h1>
	<h5><a href="index.html">메인페이지로 이동</a></h5>
</body>
</html>

 

4-5 확인

 

(참고) 

2~4 삭제/등록/수정 페이지는 입력/처리/결과 형태로 구현 가능했지만

5~7 조회 페이지는 결과가 실시간으로 변할 수 있으므로 HTML으로는 구현이 불가능하다 (= 프로그래밍 영역)

      -> 추후에 JSP를 통해서 구현 예정

      -> 우선 형태만 비슷하게 구현하기

 

(5) 목록 조회 기능 구현

5-1 목록 조회 및 출력 list.txt 만들기

package web07.servlet;

import java.io.IOException;
import java.util.List;

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

import web07.beans.ExamDao;
import web07.beans.ExamDto;

@WebServlet(urlPatterns = "/list.txt")
public class ExamListServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : 없음			
			//처리 : ExamDao
			ExamDao examDao = new ExamDao();
			List<ExamDto> list = examDao.select();
			
			//출력 : 리다이렉트 불가(화면으로 데이터 전달을 할 수 없음. HTML은 정적화면만 구현 가능)
			//resp.sendRedirect("결과페이지");//불가
			resp.setCharacterEncoding("MS949");
			for(ExamDto examDto : list) {
				resp.getWriter().print(examDto.getExamId());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getStudent());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getSubject());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getType());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getScore());
				resp.getWriter().print("점");
				resp.getWriter().println();
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

5-2 확인

 

 

(6) 검색 조회 기능 구현

6-1 검색  정보 입력 search.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>

	<h1>시험 정보 검색</h1>
	
	<form action="search.txt">	
		
		<select name="column">
			<option value="student">학생명</option>
			<option value="subject">과목명</option>
			<option value="type">유형</option>
		</select>
		
		<input type="text" name="keyword" placeholder="검색어" required>
		
		<input type="submit" value="검색">
		
	</form>
	
</body>
</html>

 

6-2 검색 처리 및 출력 search.txt 만들기

package web07.servlet;

import java.io.IOException;
import java.util.List;

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

import web07.beans.ExamDao;
import web07.beans.ExamDto;

@WebServlet(urlPatterns = "/search.txt")
public class ExamSearchServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : column, keyword
			String column = req.getParameter("column");
			String keyword = req.getParameter("keyword");
			
			//처리 : column, keyword 둘 다 있는 경우만 검색을 처리
			//if(column이나 keyword중 하나라도 없으면) {
			if(column==null || keyword==null || column.equals(" ") || keyword.equals(" ")) {
				throw new Exception();
			}
			
			ExamDao examDao = new ExamDao();
			List<ExamDto> list =examDao.select(column, keyword);
			
			//출력 : 리다이렉트? 불가. 데이터전달이 안됨
			//resp.sendRedirect("search.result.html");
			
			resp.setCharacterEncoding("MS949");
			resp.getWriter().println("검색결과 : "+list.size()+"개");
			for(ExamDto examDto : list) {
				resp.getWriter().print(examDto.getExamId());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getStudent());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getSubject());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getType());
				resp.getWriter().print(" / ");
				resp.getWriter().print(examDto.getScore());
				resp.getWriter().print("점");
				resp.getWriter().println();
			}
			
		} catch (Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}

	}
}

 

6-3 확인

 

(7) 상세 조회 기능 구현

7-1 번호 입력 detail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음 만든 홈페이지</title>
</head>
<body>

	<h1>시험 정보 상세 조회</h1>
	<form action="detail.txt">
		시험지번호 : <input type="text" name="examId" required>
		<input type="submit" value="보기">
	</form>
	
</body>
</html>

 

7-2 단일 조회 및 출력 detail.txt 만들기

package web07.servlet;

import java.io.IOException;

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

import web07.beans.ExamDao;
import web07.beans.ExamDto;

@WebServlet(urlPatterns = "/detail.txt")
public class ExamDetailServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			// 입력 : examId
			int examId = Integer.parseInt(req.getParameter("examId"));

			// 처리
			ExamDao examDao = new ExamDao();
			ExamDto examDto = examDao.select(examId);

			// 출력 : 리다이렉트 불가
			resp.setCharacterEncoding("MS949");
			if (examDto != null) {
				resp.getWriter().println("시험지 번호 : " + examDto.getExamId());
				resp.getWriter().println("학생명 : " + examDto.getStudent());
				resp.getWriter().println("과목명 : " + examDto.getSubject());
				resp.getWriter().println("유형 : " + examDto.getType());
				resp.getWriter().println("점수 : " + examDto.getScore() + "점");
			} else {
				resp.getWriter().println("존재하지 않는 시험지번호");
			}
		} catch (Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

7-3 확인

 

'Java 웹 개발' 카테고리의 다른 글

21.10.15 - 웹 개발 입문 45일차  (0) 2021.10.15
21.10.14 - 웹 개발 입문 44일차  (0) 2021.10.15
21.10.12 - 웹 개발 입문 42일차  (0) 2021.10.12
21.10.11 - 웹 개발 입문 41일차  (0) 2021.10.11
21.10.08 - 웹 개발 입문 40일차  (0) 2021.10.08

'Java 웹 개발' Related Articles

티스토리툴바