반응형
SMALL
controller 패키지 생성 후 MainController 클래스 만들기고 HttpServlet 상속 받기
package controller;
import javax.servlet.http.HttpServlet;
public class MainController extends HttpServlet{
}
wedapp 에서 main 폴더 생성 후 index.jps 생성 후 아래 코드 입력
<%@ page contentType="text/html; charset=utf-8" %>
MainController 클래스 작성
package controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MainController extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher rd = req.getRequestDispatcher("main/index.jsp");
rd.forward(req, resp)
}
}
RequestDispatcher : 버퍼를 통제한다. 즉 출력하는 버퍼에 있는 내용을 main/index.jsp로 바꾼다. 그래서 main/index.jsp 로 이동함 forword 이나 include 와 비슷하다.
연습으로 MainController 와 서블릿을 연결해보았다. 굳이 이렇게 할 필요는 없다고 하지만 그래도 연습..! 째든..
서블릿 작성
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
<servlet>
<servlet-name>main-servlet</servlet-name>
<servlet-class>controller.MainController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>main-servlet</servlet-name>
<url-pattern>/main</url-pattern>
</servlet-mapping>
</web-app>
webapp 에 index.jsp를 추가로 생성해 main/index.jsp 로 이동하게 설정해줬다.<%@ page contentType="text/html; charset=utf-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:redirect url="/main"/>
taglib 를 이용해 reirect 로 /main을 지정해주었다. 그러면 http://localhost:3001/erp 만 입력해도 자동적으로 c:url 이 앞에 Contextpath를 붙여줘서 http://localhost:3001/erp/main 로 바꾸어준다. taglib 말고 자바코드로 Contextpath를 이용해 할 수 있는데 jsp 에 자바코드는 되도록이면 안쓰는게 좋다고 한다.
이제 헤더 본문 하단을 나누어 각 구역에 출력하고 싶은 것만 출력하기 위해
outline 폴더를 만들어 footer.jsp 와 header.jsp 를 생성하였다.
footer.jsp 와 header.jsp 에도 아래 코드를 넣어주었다.
<%@ page contentType="text/html; charset=utf-8" %>
header.jsp 작성
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="<c:url value="/css/style.css"/>">
<script src="<c:url value="/js/common.js"/>"></script>
<title>운동기록프로그램(erp)</title>
<body>
<header>
<h1>운동기록</h1>
</header>
<main>
마찬가지로 taglib 를 이용해 css 와 js 쓸 수 있게 링크 설정 하였다. 폴더는 css 와 js 폴더 각각 webapp안에 생성하였다.
footer.jsp 작성
<%@ page contentType="text/html; charset=utf-8" %>
</main>
<foorer>
<h1>하단</h1>
<iframe name="ifrmProcess" width="100%" height="0" class="dn"></iframe>
</foorer>
</body>
</html>
페이지 이동없이 현재페이지에서 처리하기 위해 iframe 을 이용하였다. dn 클래스는 display : none 클래스를 이따가 작성
footer.jsp 와 header.jsp 를 띄우기 위해 아래 코드를 작성
<%@ page contentType="text/html; charset=utf-8" %>
<jsp:include page = "../outline/header.jsp"/>
<jsp:include page = "../outline/footer.jsp"/>
이동 경로는 mian 밖으로 나가서 webapp에 outline 로 접근해야하기 때문에 ../ 맨앞에 으로 상위폴더로 나가서 outline 으로 접근 하였다.
아래와 같은 구성으로 클래스를 작성 하자
위에 서블릿은 연습용 이었고 이제 @Webservlet 을 이용하여 편하게 사용하자
GET method --출력--
운동기록 목록 : MainController - /main
POST method : --데이터 처리--
운동기록 추가 -/register
운동기록 삭제 -/delete
운동기록 수정 -/update
RegisterController 클래스 작성
package controller;
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;
@WebServlet("/register")
public class RegisterController extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
Post 방식 메서드 추가
UpdateController 클래스와 DeleteController 작성
package controller;
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;
@WebServlet("/update")
public class UpdateController extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
package controller;
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;
@WebServlet("/delete")
public class DeleteController extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
main > index.jsp 코드 추가
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../outline/header.jsp" />
<h2>운동기록 추가</h2>
<form name="frmRegist" method="post" action="<c:url value="/register"/>" target="ifrmProcess">
<div class = 'sports_wrap'>
<input type="radio" name="sports" value="CHEST" id="sports_CHEST">
<label for="sports_CHEST">가슴</label>
<input type="radio" name="sports" value="BACK" id="sports_BACK">
<label for="sports_back">등</label>
<input type="radio" name="sports" value="SHOULER" id="sports_SHOULER">
<label for="sports_shoulder">어깨</label>
<input type="radio" name="sports" value="LOWERBODY" id="sports_LOWERBODY">
<label for="sports_lowerbody">하체</label>
<input type="radio" name="sports" value="ARM" id="sports_ARM">
<label for="sports_CHEST">팔</label>
</div>
<input type="text" name="sportNm" size ="30" placeholder="운동 종목 입력(bench press 등..)"><br>
<input type="text" name="workoutSet" size ="30" placeholder="세트 수...(숫자만 입력하세요)"><br>
<input type="text" name="workoutNum" size ="30" placeholder="횟수...(숫자만 입력하세요)"><br>
<button type="submit">등록하기</button>
</form>
<jsp:include page="../outline/footer.jsp" />
텍스트를 눌러도 체크가 되게 설정 하기 위해 id 값을 넣고 lable for 를 이용하였다.
이부분과 <label for="sports_CHEST">
id="sports_CHEST" << 부분이 동일해야 한다.
'Servlet-Jsp' 카테고리의 다른 글
운동기록프로그램(servlet-jsp) Service 부분 #3 (0) | 2022.08.07 |
---|---|
운동기록프로그램(servlet-jsp) 데이터베이스 구성 #2 (0) | 2022.08.07 |
fmt:formatDate 커스텀 액션(JSP) (0) | 2022.08.04 |
클래스 작성하기(Servlet-Jsp) (0) | 2022.07.29 |
웹 기초 (0) | 2022.07.24 |
댓글