기본 사용법
1. 웹 주소 만들기
서버주소:포트번호/컨텍스트root(동적프로젝트 명)/url주소(파일 명)
서버주소:포트번호/컨텍스트root(동적프로젝트 명)/url주소(파일 명) // 본인 주소 확인하여 쓸 것.
000.0.0.0:0000/web01/home.jsp
localhost:0000/web01/home.jsp
999.999.99.99:0000/web01/home.jsp // iPv4위의 양식대로 주소창에 입력 시, Tomcat을 이용해 만든 웹 페이지가 표시되게 된다.
웹의 경우에는 서로 다른 웹 페이지의 주소로 보내주는 형식이므로, 일반적인 웹의 기능을 구현하기 위해서는 각각의 jsp 파일들을 역할에 맞게 구성하는것이 중요하겠다.
2. pom.xml 생성하기
어제 생성한 Dynamic web project인 web01를 우클릭해준 뒤,Configure를 클릭하여
Convert to Maven Project를 클릭하여 pom.xml을 생성시켜준다.
3. web용 기본 적용 maven 라이브러리
<dependencies>
<!-- mybatis 연동 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.9</version>
</dependency>
<!-- apache 연동 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-dbcp2</artifactId>
<version>2.9.0</version>
</dependency>
<!-- oracle 연동 -->
<dependency>
<groupId>com.oracle.database.jdbc</groupId>
<artifactId>ojdbc8</artifactId>
<version>21.7.0.0</version>
</dependency>
<!-- lombok 연동 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
</dependencies>4. <body>와 </body>의 사이에다 웹상에 표시하고자 하는 기능 추가하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<div>
<h3>회원가입</h3>
<!-- joinaction.jsp로 페이지를 전환시킴! -->
<form action = "joinaction.jsp" method = "post">
<!-- method 를 get으로 설정할 시 주소창에 데이터가 보임! -->
<!-- 민감한 정보를 전달 할 시 post로 정보를 전송할 것 -->
<!-- name은 입력값의 고유명임. 값을 불러올 때 필요! -->
아이디 : <input type="text" name = "id"/> <br />
비밀번호 : <input type="text" name = "pw1"/> <br />
비밀먼호 확인 : <input type="text" name = "pw2"/> <br />
이름 : <input type="text" name = "name" /> <br />
연락처 : <input type="text" name = "phone"/> <br />
주소 : <input type="text" name = "adr"/> <br />
<!-- submit 타입은 버튼 -->
<input type="submit" value="회원가입" />
</form>
</div>
</body>
</html>지정한 주소로 들어가게 되면 아래와 같이 출력된다.
5. 웹에서 입력받은 정보 Oracle로 보내기 (jsp에서 java 문법 사용하기)
// joinaction.jsp
<%@page import="dto.Member"%>
<%@page import="mapper.MemberMapper"%>
<%@page import="config.MyBatisContext"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 처리</title>
</head>
<body>
<%
/* 여기는 자바 문법을 사용 할 수 있음. */
/* 또한, 기본적으로 몇가지 클래스의 객체를 생성해 놓았음. */
// HttpServletRequest request; // 요청
// HttpServletResponse response; // 응답
// System객체 생성 되어 있음.
String id = request.getParameter("id");// request.getParameter()는 값을 지정하는 명령어이다.
String pw1 = request.getParameter("pw1");
String pw2 = request.getParameter("pw2");
String name = request.getParameter("name");
String phone = request.getParameter("phone");
String adr = request.getParameter("adr");
MemberMapper mapper = MyBatisContext.getSqlSession().getMapper(MemberMapper.class);
Member obj = new Member();
obj.setMEM_NAME(name);
obj.setMEM_ID(id);
obj.setMEM_PW(pw1);
obj.setMEM_PHONE(phone);
obj.setMEM_ADDRESS(adr);
int ret = mapper.insertMemberOne(obj);
// Mapper와 MyBatisContext는 Java Resources 하위 폴더에 패키지를 만들어 적용시켰다.
if(ret == 1){ // 데이터 전달 성공시
response.sendRedirect("joinok.jsp"); // joinok.jsp로 이동
}
else{ // 실패시
response.sendRedirect("join.jsp"); // 다시 join.jsp(회원가입)으로 이동
}
%>
<%
// java 문법칸 "<% %>"은 중복으로 생성 가능!
%>
</body>
</html>
연결은 성공적이다. 이제 기능이 동작하기 위해서는 joinok.jsp만 있으면 되겠다!
6. Servlet을 거쳐 Jsp로 연결해주기
먼저 Java Resources의 src/main/java로 들어가 HttpServlet의 기능을 사용할 클래스를 생성해준다.
쉽게 구분하고자 패키지 이름을 controller, 클래스 이름을 JoinServlet으로 설정했다.
// JoinServlet
package controller;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
//1. extends 추가 (HttpServlet 기능 사용)
@WebServlet("/join.do")
// 어노테이션 사용, 항상 주소값은 servlet을 통과하여 jsp를 찾아감.
/* 주소창에서 검색을 위해 입력하는 주소값. */
public class JoinServlet extends HttpServlet{
// 2. override
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getRequestDispatcher("/WEB-INF/join1.jsp").forward(req, resp);
} /* 주소창으로부터 실제로 연결과는 Jsp의 명칭 */
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}주소값을 경우, 항상 Servlet을 통해서 해당하는 Jsp로 가게끔 되어있다.
따라서 웹을 설계하고자 할 때 기능에 알맞은 주소값을 지정해주고, 주소와 연결된 jsp가 올바른지 반드시 확인해 볼 필요가 있겠다.
(@WebServlet 어노테이션과 getRequestDispatcher의 값은 동일하지 않아도 된다!)
잘 적용이 된 모습이다.
7. Servlet을 통해 Jsp로 데이터 전송하기
// JoinServlet
@WebServlet("/join1.do") // 어노테이션 사용, 항상 주소값은 servlet을 통과하여 jsp를 찾아감.
public class JoinServlet extends HttpServlet {
// 2. override
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. view로 필요한 정보를 전달
// 1-1. 변수선언
req.setAttribute("name", "aaa");
req.setAttribute("phone", "010");
// 1-2. 객체선언
Member obj = new Member();
obj.setMEM_NAME("홍길동");
obj.setMEM_ID("id123123");
req.setAttribute("member", obj);
/* 변수 또는 객체로 선언하여 데이터의 전달이 가능하다. */
// 2. 해당 주소의 jsp로 전달
req.getRequestDispatcher("/WEB-INF/join1.jsp").forward(req, resp);
}
}
// join1.jsp
<%@page import="dto.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>join1.jsp</title>
</head>
<body>
<%
/* ------------- joinServlet에서 불러온 값 ------------- */
// 1-1
String name = (String) request.getAttribute("name"); // request.getAttribute()는 값을 불러오는 명령어이다.
String phone = (String) request.getAttribute("phone");
// 1-2
Member member = (Member) request.getAttribute("member");
// ------------------------------------------------------ //
/* jsp에서 import는 문자 끝에서 Ctrl + space를 해주어야 함! */
// ------------------------------------------------------ //
out.println("{변수선언값 : ");
out.println(name);
out.println(phone);
out.println("} | {");
out.println("객체선언값 : ");
out.println(member.getMEM_ID());
out.println(member.getMEM_NAME());
out.println("} |");
%>
join1.jsp
</body>
</html>
데이터를 성공적으로 불러왔다.
8. JSTL
하지만, 위의 방법들은 기본적인 개념을 알기 위한 부분들이며, 이대로 개발을 진행한다면 많은 문제점들에 부딪히기 쉽다. 그래서 우리는 좀 더 확실하고 간단한 방법을 사용하고자 JSTL을 이용해서 JSP의 코드를 구성할것이다.
<%@page import="dto.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri ="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>join1.jsp</title>
</head>
<body>
// --------------------JSTL 사용시
<input type = "text" value = "${name}" />
${name}
${age}
${mem.userid}
${mem.userpw}
<hr/>
/*------------- ↓아래의 코드들을 위의 코드만으로 간단히 구현하는것이 가능하다!---------------*/
<%
// joinServlet에서 불러온 값
// 1-1
String name = (String) request.getAttribute("name");
String phone = (String) request.getAttribute("phone");
// 1-2
Member member = (Member) request.getAttribute("member");
/* jsp에서 import는 문자 끝에서 Ctrl + space를 해주어야 함! */
out.println("{변수선언값 : ");
out.println(name);
out.println(phone);
out.println("} | {");
out.println("객체선언값 : ");
out.println(member.getMEM_ID());
out.println(member.getMEM_NAME());
out.println("} |");
%>
/*---------------------------------------------------------------------------------*/
</body>
</html>(사용을 안할 이유가 없다. 당장 쓰도록 하자.)
그럼 어떻게 사용해야할까??
먼저 pom.xml에 dependency하나를 더 추가하도록 하자.
바로 JSTL 연동 라이브러리이다.
JSTL 라이브러리 (pom.xml)
<!-- JSTL 연동 -->
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>jakarta.servlet.jsp.jstl</artifactId>
<version>2.0.0</version>
</dependency>위를 추가해준 뒤,
<%@ taglib prefix="c" uri ="http://java.sun.com/jsp/jstl/core" %>
처럼 어노테이션을 추가해주면 되겠다.
JSP 환경 특성상 Ctrl + space가 사용이 되지 않으니, 한번은 꼭 타이핑 한 이후에, 복사해서 붙여넣으면 되겠다!
이번에는 일반 class가 아니라
Servlet class로 한번 servlet을 만들어보도록 하겠다.
생성 초기화면은 위와 같다. 빨간줄이 있는 부분에 이름을 작성해준 뒤,
URL mappings: 항목에 있는 파일을 선택해준뒤, Edit를 눌러 주소명을 검색하기 용이하도록 바꿔준다.
바꿔주면서 소문자로 입력했다.
Servlet을 생성하고나면,
web01>src>main>webapp>WEB-INF의 경로에
web.xml이 생성된것을 확인할 수 있다.
클릭해준뒤 Source를 통해서 코드를 확인하면
와 같이 구성되어있는것을 확인해줄수있는데,
이후 또다른 Servlet을 생성할때 복잡함을 줄이고자 Welcom-file과 display-name을 제외한 나머지 servlet파일들은 모두 지워주었다.
이렇게. 그 이유는 간단하다.
// MemberListServlet.java
package controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import dto.Member;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
// 크롬에서 127.0.0.1:8080/web01/memberlist.do를 입력하면
@WebServlet("/memberlist.do")
public class MemberListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public MemberListServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<Member> list = new ArrayList<>();
for (int i = 0; i < 3; i++) {
Member obj = new Member();
obj.setMEM_ID("web01_id" + i);
obj.setMEM_NAME("web01_name" + i);
list.add(obj);
}
// 2. jsp로 값을 전달
request.setAttribute("list", list);
// 3. WEB-INF 폴더의 memberlist1.jsp 표시
request.getRequestDispatcher("/WEB-INF/memberlist1.jsp").forward(request, response);
;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
방금 생성한 Servlet 클래스에서
@WebServlet("/memberlist.do") 이 어노테이션 한줄이 방금의 코드들을 모두 대신하는 역할을 수행하기 때문이다.
만약 같은 코드가 중복되어 있다면 서버의 오류를 야기할 수 있기 때문에 지워준것이다.
이후, 위의 코드를 바탕으로 memberlist1.jsp를 만들어주었다.
// memberlist1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri ="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원목록</title>
</head>
<body>
<c:forEach var="obj" items="${list}">
${obj.MEM_ID}, ${obj.MEM_NAME}<br/>
</c:forEach>
</body>
</html>이제 웹에서 직접 주소를 쳐서 실행해보면..
이런 식으로 정보가 표시되게 된다!
JSTL에 대해서 아직 개념이 부족하니, 아래의 블로그 글에서 개념적인 부분을 좀 더 참고하여 정리할 수 있도록 하자.
시작은 미약하지만, 그 끝은 창대하리라