Java에서 web을 사용하는 강의에서 배운 내용을 토대로 조금씩 정리하려고 한다.
준비단계
우선 우측 상단에 Java EE 아이콘을 눌러 Java EE로 변경한다.
상단에 있는 Window - Preferences를 실행한다.
Web 하위에 있는 CSS Files, HTML Files, ISP Files를 눌러 각각 UTF-8로 변경한다. 그러지 않으면 web에서 한글이 깨질 수 있다고 하니 꼭 해두자.
tomcat
tomcat 홈페이지에서 tomcat 10 을 다운받자.
(https://tomcat.apache.org/download-10.cgi)
아파치(apache)란?
세계에서 가장 많이 쓰는 웹 서버중 하나이며, 아파치 소프트웨어 재단에서 관리하는 HTTP 웹 서버이다.
Apache는 Apache재단에서 만든 HTTP서버로 워낙 다양한 추가기능에, 구축이 쉽다는 이유 때문에 많이 쓰고 있다. 대부분의 중소기업들은 무료이기 때문에 많이 쓰인다.
tomcat이란?
톰캣은 아파치 소프트웨어 재단의 웹 어플리케이션 서버(와스)로서,
자바 서블릿을 실행키고 JSP코드가 포함되어 있는 웹 페이지를 만들어준다.
본인이 사용하는 운영체제에 맞는 파일을 다운받아 설치하면 된다.
web생성
빈 공간에 우클릭을 한 후 Dynamic Web Project를 생성하자.
Target runtime을 다운받은 tomcat 버전을 일치시키자.
프로젝트 이름은 web01이라고 지정하였다.
방금 만든 web01 프로젝트에 JSP File을 생성한다.
home.jsp 파일을 생성하면 webapp에 생성된다.
home.jsp 파일 열면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
home.jsp테스트용 <!-- 추가한 내용-->
</body>
</html>이런 코드가 생성되어 있을 것이다.
아래 Servers 안에 있는 Tomcat v10.1 Server at localhost를 우클릭하여 Add and Remove...를 들어가보자.
위 사진처럼 Add버튼을 눌러 Configured에 위치하도록 하자.
완료했다면 Finish를 누르면 된다.
Tomcat v10.1 Server at localhost[Stopped] 는 실행중이 아니라는 뜻이다.
이 때 우클릭을 눌러 Start 버튼을 누르자.
Stopped에서 Started, Synchronized 으로 바뀌게 되면 실행 성공이다.
이제 크롬을 열어 확인해보러 가자!
127.0.0.1:8080/web01/home.jsp
localhost:8080/web01/home.jsp
둘 중 하나를 입력하여 위 사진처럼 나오면 성공!
회원가입
이전 수업시간에 했던 sql에서 만든 Member테이블을 사용하기 위해 준비가 필요하다.
우선 pom.xml파일먼저 만들어보자.
web01 프로젝트를 우클릭 한 후 위 사진처럼 Configure - Convert to Maven Project를 눌러 pom.xml을 생성하자.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>web01</groupId>
<artifactId>web01</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<release>11</release>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.3</version>
</plugin>
</plugins>
</build>
<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>
</project>
pom.xml에 이렇게 입력해두자.
web01 - Java Resources - src/main/java를 우클릭하여 Package를 만들자.
config, controller, dto, mapper, service를 생성한다.
package config;
import org.apache.commons.dbcp2.BasicDataSource;
import org.apache.ibatis.mapping.Environment;
import org.apache.ibatis.session.Configuration;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.apache.ibatis.transaction.TransactionFactory;
import org.apache.ibatis.transaction.jdbc.JdbcTransactionFactory;
import mapper.MemberMapper;
public class MyBatisContext {
public static SqlSession getSqlSession() {
try {
BasicDataSource dataSource = new BasicDataSource();
dataSource.setDriverClassName("oracle.jdbc.driver.OracleDriver");
dataSource.setUrl("jdbc:oracle:thin:@1.234.5.158:11521:xe");
dataSource.setUsername("ds201");
dataSource.setPassword("pw201");
TransactionFactory transactionFactory = new JdbcTransactionFactory();
Environment environment = new Environment("development", transactionFactory, dataSource);
Configuration config = new Configuration(environment);
config.setMapUnderscoreToCamelCase(true);
//만든 매퍼 등록
config.addMapper(MemberMapper.class);
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(config);
return factory.openSession(true);
}
catch (Exception e) {
e.printStackTrace();
return null;
}
}
}config에는 위 코드의 MyBatisContext를 생성하고
package controller;
import java.io.IOException;
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;
/* 1. LoginServlet를 생성하고 상송 및 오브라이드
2. WEB-INF 폴더에 login1.jsp 생성
3. 서버주소가 127.0.0.1:8080/web01/login.jsp입력 => login1.jsp를 표시*/
/* 1. 상속
서버 재구동 127.0.0.1:8080/web01/join1.jsp입력 */
@WebServlet("/join1.jsp") // 링크라고 생각
public class JoinServlet extends HttpServlet{
//2. 오브라이드
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. view로 필요한 정보를 전달
req.setAttribute("name", "aaa");
req.setAttribute("age", 13);
Member obj = new Member();
obj.setUserid("id01");
obj.setUserpw("pw01");
req.setAttribute("mem", obj);
// 2. view를 화면에 표시
req.getRequestDispatcher("/WEB-INF/join1.jsp").forward(req, resp);
// 실제로 나오는 화면
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
super.doPost(req, resp);
}
}controller에 JoinServlet 클래스를 만든 후 extends HttpServlet을 입력하자.
package dto;
import java.util.Date;
import lombok.Data;
@Data
public class Member {
private String userid;
private String username;
private String userpw;
private int userage;
private String userphone;
private String usergender;
private Date userdate ;
}dto에는 사용할 테이블인 Member
package mapper;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import dto.Member;
@Mapper
public interface MemberMapper {
// 회원가입
@Insert({
" INSERT INTO member (userid, username, userpw, userage, userphone, usergender, userdate) ",
" VALUES( #{obj.userid}, #{obj.username}, #{obj.userpw}, #{obj.userage}, #{obj.userphone}, #{obj.usergender}, CURRENT_DATE) " })
public int insertMemberOne(@Param("obj") Member obj);
}mapper에는 MemberMapper를 생성한다.
home.jsp를 만들었던 것처럼 join.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>
<div>
<h3>회원가입</h3>
<form action="joinaction1.jsp" method="post">
<!-- post : 보이지 않게, get : 보이게 -->
아아디 : <input type="text" name = "id" value = "11"/> <br />
<!-- <br /> = 한 줄 띄우기 -->
암호 : <input type="text" name = "pw" value = "11"/> <br />
<!-- value = " " = 값 고정-->
암호확인 : <input type="text" name = "pw1"/> <br />
이름 : <input type="text" name = "name"/> <br />
나이 : <input type="number" name = "age"/> <br />
연락처 : <input type="text" name = "phone"/> <br />
성별 : <input type="text" name = "gender"/> <br />
<input type="submit" value = "회원가입"/>
<!-- submit = 버튼 -->
</form>
</div>
</body>
</html>join.jsp를 연 후 이렇게 입력하자
다시 크롬을 열어서 http://127.0.0.1:8080/web01/join.jsp 접속하자. 위 사진처럼 보이면 성공!
회원가입이 완료되면 /joinok.jsp로 가야한다. 하지만 join.jsp 파일이 없으므로 404 오류가 뜬다.
반복문을 이용한 회원가입 및 리스트
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="5.0">
<display-name>web02</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>새로운 Servlet을 만드려면 WEB-INF 폴더에 있는 web.xml에서 아래 코드로 손을 봐야한다.
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;
// 1. 크롬에서 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 {
// 임의의 회원목록 생성 (ex 3명)
List<Member> list = new ArrayList<Member>();
for(int i=0;i<13;i++) {
Member obj = new Member();
obj.setUserid("id"+i);
obj.setUsername("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 {
doGet(request, response);
}
}controller에 MemberListServlet을 생성해보자.
여기서 반복문을짜고, memberlist1.jsp에서 실행할 것이다.
Other...
Web에 있는 Servlet을 선택하고 next
Servlet 명을 정한 뒤 next
위와같이 바꿔준다.
이렇게 MemberListServlet를 생성한다.
이어서 WEB-INF 폴더에 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.userid}, ${obj.username} <br />
</c:forEach>
</body>
</html>memberlist1.jsp는 위 코드와 같다.
이제 방금 만든 memberlist1.jsp을 실행시켜보자.
이렇게 나온다면 성공!
