0.파일 구조
/src
├── Libraries
│ └── user
│ └── User.java
│ └── UserDAO.java
/src/main/webapp
├── META-INF
│ └── MANIFEST.MF
├── WEB-INF
│ └── web.xml
│ └── lib
├── css/
├── fonts/
├── js/
├── login.jsp
├── loginAction.jsp
└── index.jsp1.Work Space 및 Eclipse 설정
Work Space 설정
개발을 시작하기 위해 사용할 Work Space Directory를 제작합니다.
$ mkdir jspweb
Eclipse 실행
$ eclipse
Eclipse 설정 및 개발 준비
①window-preference-general -startup and shutdown- workspace - prompt for workspace on start up
②window-preference-java-installed jres에서 설치한jdk로 변경
③(아래 그림처럼 하단에 Servers 탭이 없다면)window-show view-other에서 Servers를 검색해서 추가
만약 Servers가 없다면 아래 게시물을 참고하여 설치할 수 있습니다.
*https://hgserver.tistory.com/19
이클립스 > Servers 탭, Run On Server가 없는 경우 어떻게?
1. Servers 탭이 없는 경우 Tomcat Server를 추가하려는데 Servers 탭이 보이질 않는다. 이클립스는 Window > Show View에서 필요한 창을 구성할 수 있다. 메뉴에 보이지 않는 것은 Other..를 클릭해 추가해줄 수
hgserver.tistory.com
④Servers 탭에서 "No servers are available. Click this link to create a new server..." 클릭 후 설치한 톰캣 버전에 따라 버전을 선택하고 Next 클릭
"Browse"를 눌러 Tomcat 설치 경로 선택 및 아까 설정한 JRE 선택
⑤File-new-other 에서 'Dynamic Web project' 검색 및 선택 후, Project name / Dynamic web module version 입력, 'Finish' 클릭
⑥프로젝트 이름에서 우클릭 - Properties 클릭 - Project Facets 항목에서 Dynamic Web Module 옆에 Runtimes에 아까 생성한 서버(Apache Tomcat v9.0)로 체크되어 있는지 확인
⑦Servers 탭 아래 "Tomcat v9.0 Server at localhost" 항목에 우클릭 - Add and Remove 클릭.
Available 공간에 있는 "BBS(Project 이름)"를 Add All>> 을 클릭하여 Configured 공간으로 넘기고 Apply
⑧Servers 탭 아래 "Tomcat v9.0 Server at localhost" 항목 더블 클릭 - Servers 탭 바로 위 Modules 클릭 - Add Web Module 클릭 - OK 클릭
2.BootStrap 설치
설치
①http://getbootstrap.com/docs/3.3 에서 "Download Bootstrap" 클릭
②"Download Bootstrap"클릭
③압축 풀기
user@virtualbox-machine:~$ cd ~/Downloads
user@virtualbox-machine:~/Downloads$ unzip bootstrap-3.7.7-dist
④리눅스 GUI 폴더로 Bootstrap 디렉터리를 열고, Eclipse 개발 환경으로 돌아가 드래그하여 webapp 밑에 'css', 'fonts', 'js' 폴더 추가
3.login.jsp
login.jsp
로그인 폼이 존재하는 페이지로, 상단에 main.jsp와 bbs.jsp로 이동하는 bar와 login 및 sign up을 수행하는 페이지로 이동되는 버튼을 추가할 것입니다.
login.jsp 파일 생성
①webapp에서 'New' - 'JSP File'
②File name을 login.jsp로 작성, 'Finish' 클릭
③코드 작성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!--인코딩 설정, UTF-8-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1"> <!--반응형 웹 메타 태그-->
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP Baord</title>
</head>
<body>
<nav class="navbar navbar-default"> <!--옆쪽의 네비게이션 바-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="icon-bar"></span> <!-- 메뉴 오른쪽 아이콘 바 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">JSP Board</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="main.jsp">Main</a>
<li><a href="bbs.jsp">Board</a>
</ul>
<ul class="nav navbar-nav navbar-right"> <!--오른쪽 큰 네비게이션 메뉴-->
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Access<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="login.jsp">login</a></li> <!--active=현재 선택된 경우 보여줄 것을 명시-->
<li><a href="join.jsp">Sign up</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="padding-top: 20px;">
<form method="post" action="loginAction.jsp">
<h3 style="text-align: center;">Login</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Id" name="userID" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="userPassword" maxlength="20">
</div>
<input type="submit" class="btn btn-primary from-control" value="Login">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
동작 확인
①하단에 'Tomcat v9.0 Server at localhost' 우클릭 - 'Start' 클릭
만약 아래와 같은 메시지가 발생했다면, 이는 8080포트를 다른 프로세스가 사용하고 있다는 것입니다. 따라서 터미널을 새로 열고 아래의 명령어를 입력합니다. 명령어는 8080 소켓 포트를 선점한 프로세스를 netstat으로 출력하고 kill을 이용해 해당 프로세스를 강제 종료시킵니다.
user@virtualbox-machine:~$ sudo netstat -tpln
..
tcp 0 0 0.0.0.0:8080 0.0.0.0:* LISTEN 973/tnslsnr
-l : listening server sockets을 출력
-t : tcp 프로토콜
-p : PID와 프로그램 이름 출력
-n : domain 등 이름이 아닌 ip 주소 사용
user@virtualbox-machine:~$ sudo kill 973
명령어를 수행한 후 다시 서버를 시작하면 대개 제대로 동작합니다.
*만약 8080 포트 문제가 아니라면 Ojdbc 드라이버 문제, 위 코드가 아닌 servlet 코드 URL 매핑을 xml 파일과 annotation에서 같은 경로로 한 경우 등이 있으니, 잘 살펴보시기 바랍니다.
②http://localhost:8080/BBS/login.jsp 방문
위와 같은 페이지가 출력됩니다. 참고로 다른 파일을 아직 제작하지 않았으니, 'Main', 'Board' 버튼을 누르거나, Access에서 signup을 누르면 404에러가 발생하는 것이 당연합니다.
4.User Database 생성
데이터 베이스 접속
$ sqlplus sys as sysdba
...
Enter password: #오라클 DB 설정 때 작성했던 비밀번호를 입력
Connected to:
Oracle Database ...
SQL>기본적으로 sqlplus sys as sysdba 혹은 sqlplus '/as sysdba' 로 접근할 수 있습니다.
*비밀번호가 기억이 나지 않는다면
sudo /etc/init.d/oracle-xe configure비밀번호는 오라클 DB 설치 후, 위의 설정을 진행할 때 포트 설정과 비밀번호를 입력하는데 그때 사용한 비밀번호입니다.
사용자 생성
CREATE USER myuser IDENTIFIED BY mypassword;myuser와 mypassword는 각 사용자 별로 변경합니다. 저는 userj:pass1word로 진행하겠습니다.
GRANT CONNECT, RESOURCE TO myuser;myuser 사용자가 데이터베이스에 연결하고 자원을 생성할 수 있도록 권한을 부여합니다.
테이블 생성
$ sqlplus myuser/mypassword새로운 명령어 프롬프트에서 생성한 사용자로 로그인합니다.
CREATE TABLE USERT (
userID VARCHAR2(20),
userPassword VARCHAR2(20),
userName VARCHAR2(20),
userGender VARCHAR2(20),
userEmail VARCHAR2(50),
PRIMARY KEY (userID)
);
사용자 id, 비밀번호, 닉네임, 성별, 이메일을 저장할 테이블을 생성했습니다.
INSERT INTO USERT VALUES('tester', 'test', 'kim', 'Male', 'test@test.com');
SELECT * FROM USERT;
commit;이후에 페이지에서 값을 불러와야하므로, 테스트 값들을 INSERT 구문으로 삽입하고, SELECT 문으로 잘 저장되었는지 확인해봅니다.
5.User.java: JAVA Beans
패키지 생성
JSP에서 해당 데이터베이스 개체를 담고 활용할 수 있도록 패키지를 생성해야 합니다.
①'Java Resources' - 'src' - 우클릭 - 'new' - 'Package'
②Name을 user로 저장
③생성한 패키지에서 우클릭 - 'new' - 'Class'
④Name을 User로 저장
*클래스에서 사용하는 변수들의 이름과 타입은 데이터베이스 컬럼과 동일하게 처리하는 것이 가장 좋습니다.
Java Beans 생성
JavaBeans는 하나 이상의 객체를 하나의 표준화된 객체인 빈으로 캡슐화하는 클래스입니다.
①코드 작성
package user;
public class User {
private String userID;
private String userPassword;
private String userName;
private String userGender;
private String userEmail;
}
②User.java에서 'private String userID' 부터 'private String userEmail'까지 드래그 - 'Source' - 'Generate Getters and Setters' 선택
③'Select All' 클릭 - 'Create' 클릭
6.UserDAO.java: Database Access Object
로그인 기능 구현
DAO: Database Access Object의 약자, 실질적으로 데이터베이스와 소통하는 부분을 담당합니다.
①user 패키지에서 우클릭 - 'New' - 'Class' - Name을 UserDAO로 생성
package user;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.DriverManager;
public class UserDAO {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
public UserDAO() {
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
String URL = "jdbc:oracle:thin:@localhost:1521:xe";
String USER = "username";
String PASSWORD = "password";
conn = DriverManager.getConnection(URL, USER, PASSWORD);
} catch (Exception e) {
e.printStackTrace();
}
}
public int login(String userID, String userPassword) {
String SQL = "SELECT userPassword FROM USERT WHERE userID = ?";
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if (rs.next()) {
if(rs.getString(1).equals(userPassword)) {
return 1;
}
else
return 0;
}
return -1;
} catch (Exception e) {
e.printStackTrace();
}
return -2;
}
}
ojdbc 드라이버 적용 방법
ojdbc 다운로드 링크: https://www.oracle.com/database/technologies/appdev/jdbc-downloads.html
JDBC and UCP Downloads page
Oracle JDBC Driver Implements JDBC 4.2 spec and certified with JDK8, JDK11, JDK17, JDK19, and JDK21 Oracle JDBC driver except classes for NLS support in Oracle Object and Collection types. (4,535,290 bytes) - (SHA1: d82419ba52c6064a40e211cce991e6e778249912
www.oracle.com
①WEB-INF 안에 있는 lib 디렉터리에 다운받은 ojdbc 파일을 드래그&드롭으로 삽입
②'Java Build Path' 항목에서 'Libraries'로 이동
③'Modulepath' 클릭 후, 우측에서 'Add JARs' 클릭
④'WEB-INF' - 'lib' - ojdbc 파일 선택
⑤'Apply and Close' 클릭
loginAction.jsp
ID와 비밀번호 값을 처리해주는 기능
①webapp 에서 'New' - 'jsp' - 'loginAction.jsp'
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setproperty name="user" property="userID" />
<jsp:setproperty name="user" property="userPassword" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Searcher</title>
</head>
<body>
<%
UserDAO userDAO = new UserDAO();
int result = userDAO.login(user.getUserID(), user.getUserPassword());
if (result == 1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href='main.jsp'");
script.println("</script>");
}
else if (result == 0) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('Invalid Password.')");
script.println("history.back()");
script.println("</script>");
}
else if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('Invalid ID.')");
script.println("history.back()");
script.println("</script>");
}
else if (result == -2) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('DB Error')");
script.println("history.back()");
script.println("</script>");
}
%>
</body>
</html>
동작 확인
①하단에 'Tomcat v9.0 Server at localhost' 우클릭 - 'Start' 클릭
(1)존재하는 계정으로 로그인한 경우 -> main.jsp 로 리다이렉트(없는 페이지기 때문에 404에러 발생)
(2)잘못된 ID로 로그인시
(3)잘못된 비밀번호로 접근
7. JSP의 <jsp:useBean> 및 <jsp:setProperty> 기능 설명
간단히 요약하면, <jsp:useBean>이 객체를 준비하고, <jsp:setProperty>가 그 객체의 값을 설정하는 역할을 합니다
useBean
<jsp:useBean id="user" class="user.User" scope="page" />- id="user": JSP에서 사용할 객체 이름 (변수명)
- class="user.User": Java 클래스 (user.User)를 사용
- scope="page": 객체의 생명주기 (Scope: page, request, session, application)
생명주기
- page: 현재 페이지에서만 사용 가능 (기본값)
- request: 하나의 요청(Request) 내에서 유지
- session: 사용자 세션(Session) 동안 유지
- application: 웹 애플리케이션 전체에서 공유
setProperty
<jsp:setProperty name="user" property="userID" />- name="user" 값을 설정할 대상 Bean (<jsp:useBean>의 id)
- property="userID" 설정할 속성 (Java 클래스의 필드)
- JSP 요청 파라미터에서 값을 가져와 해당 속성에 자동으로 저장. 즉 request.getParameter("userID") 값을 user.setUserID(String userID)으로 자동 설정
<jsp:userBean>을 통해 제작했던 getter&setter인 user.User 클래스를 가져오고, 해당 페이지로 넘어오는 요청을 setter로 매핑합니다. 이때 당연하지만, 요청으로 전송되는 파라미터의 이름과 setProperty 구문의 property 이름은 서로 같아야 동작합니다.
*물론 setProperty의 param="form_name" 을 사용하면 별도로 파라미터 이름과 같게 지정한 후 매핑을 진행할 수도 있습니다.
'project > JSP+Oracle_DB+Apache_Tomcat' 카테고리의 다른 글
| [JSP/OracleDB/Tomcat/Eclipse]글쓰기 기능 (0) | 2025.03.09 |
|---|---|
| [JSP/OracleDB/Tomcat/Eclipse]게시판 기능 (0) | 2025.03.05 |
| [JSP/OracleDB/Tomcat/Eclipse]세션 관리 (0) | 2025.03.04 |
| [JSP/OracleDB/Tomcat/Eclipse]Sign up 기능 (0) | 2025.02.28 |
| [JSP/OracleDB/Tomcat/Eclipse]환경 설정과 여러가지 에러들 (5) | 2024.12.27 |
