jsp와 데이터베이스를 연동해보자
이번시간에는 jsp 로 홈페이지(로그인페이지)를 만들었던 지난시간에 추가해서
로그인할때 입력한 정보를 데이터베이스(mariaDB)에 저장하고 업데이트하며,
약간은 조잡(?) 하지만 쨌든 일치하는 정보를 입력해 로그인하면 완료되어 메인페이지에 상시로그인상태(attribute)를
구현할 수 있는 페이지를 만들어보았다.
말이 되게 긴데 일단 들어가보자 ㄱㄱ
먼저 mariaDB 사이트에 접속해 mariaDB Connector 이란 파일을 다운받아주면 된다.
그러면 mariadb-java-client-(버전).jar 형식의 파일을 다운받게 될텐데
해당파일을 이클립스에 연동시켜주면 된다.
이클립스를 열고 데이터베이스와 연동시킬 프로젝트 우클릭 -> build path -> configure build path
java build path 에서 libraries -> modulepath 클릭 후 add external jars 클릭,
위에서 다운받은 jar 파일을 넣어준다.
modulepath 밑에 잘 들어가있는지 확인 후 apply and close 클릭.
이렇게 하면 일단 첫번째 연결은 마치게 된다.
이후 밑에서 코드작성하면서 connect 할 때 어떤 코드를 작성해야하는지, 포트지정, id,pw 입력 등을 다뤄보도록 하겠음!
간단한 회원가입페이지를 만들어서 사용자가 입력한 정보를 데이터베이스에 보내보자.
먼저 mariaDB에 빈 user 테이블을 만들어주고,
insert.jsp 와 insertPage.jsp 파일을 하나씩 만들어주자.
<insertPage.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>
<h1>어서오세요 회원가입페이지입니다!</h1>
<form action="insert.jsp" method="post">
아이디 : <input type="text" name="memberId"/>
비밀번호 : <input type="password" name="memberPw"/>
이름 : <input type="text" name="memberName"/>
이메일 : <input type="text" name="memberEmail"/>
<input type="submit" value="전송하기!"/>
</form>
</body>
</html>회원가입 정보를 받을 사이트를 만들어주고, 마찬가지로 액션태그와 submit 활용
<insert.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("memberId");
String pw = request.getParameter("memberPw");
String name = request.getParameter("memberName");
String email = request.getParameter("memberEmail");
//JDBC 드라이버 연결
Class.forName("org.mariadb.jdbc.Driver");
Connection conn = null;
PreparedStatement pstmt = null;
try{
String JDBC_URL = "jdbc:mariadb://localhost:3306/studydb";
String DBUSER = "root";
String DBPASS = "1212";
conn = DriverManager.getConnection(JDBC_URL, DBUSER, DBPASS);
pstmt = conn.prepareStatement("insert into user values(?, ?, ?, ?);");
pstmt.setString(1, id);
pstmt.setString(2, pw);
pstmt.setString(3, name);
pstmt.setString(4, email);
pstmt.executeUpdate();
}catch(Exception e){
out.println("드라이버 로딩 실패!");
}finally{
conn.close();
pstmt.close();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>지시어 부분에 java.sql.* 을 임포트해주고 request.getParameter 로 파라미터값을 받아와 저장.
이제 이전에 연동시켜둔 mariaDB와 요 jsp파일을 연결시키기위해 JDBC 드라이버를 연결시켜준다.
JDBC?
Java Database Connectivity
자바에서 DB프로그래밍을 하기위해 사용되는 api.
자바 어플리케이션에서 작성된 코드를 api를 거쳐, 각 드라이버를 통해(프로그램마다 다름, 위에서 다운받은 mariadb~~.jar 파일)
데이터베이스로 전달.
로딩하기위해 Class.forName("JDBC드라이버 이름"); 코드작성,
Connection , PreparedStatement 변수 설정.
데이터베이스관리시스템(DBMS, mariaDB같은것)과의 연결을 위해
JDBC_URL 에는 해당 DBMS 와, 포트번호, 사용할 DB 이름을 입력해주고,
DBUSER, DBPASS 에는 DB에 로그인할 아이디와 패스워드를 입력.
DriverManager.getConnection(JDBC_URL, DBUSER, DBPASS); 코드를 통해 connection 생성하고
conn.prepareStatement("insert 할 sql 쿼리"); 를 작성.
위에서는 ?로 작성후 밑에서 각 자리에 들어갈 필드값을 지정해주었다.
이후 executeUpdate(); 메서드로 쿼리실행.
자세히 보면 try, catch, finally 로 나뉜걸 볼 수 있는데,
try 문에서 실행 후 만약 에러가 발생시, catch로 넘어가 특정문구를 출력하도록 설정해줄수 있다.
finally 에서는 에러발생여부와 관계없이 실행되는 코드를 작성하는곳으로close();메서드를 통해 열었던 포트를 닫아주면 된다.
이제 실행시켜볼까?
회원가입 페이지에 아이디, 비밀번호, 이름, 이메일 입력후 전송하기! 버튼 클릭!
이후 아무것도 없는 흰 화면이 나오면 무사히 전송되었다는얘기다.
mariaDB로 넘어가 확인해보자
이렇게 정보가 무사히 넘어가 저장되어있는걸 볼 수 있다.
회원가입페이지의 원리를 조금은..? 이해한것같다
이번엔 update를 활용해 비밀번호 변경페이지를 만들어보자.
먼저 update.jsp 파일과, updatePage.jsp 파일 두개를 만들어준후
<updatePage.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>
<h1>비밀번호를 변경하세요~</h1>
<form action="update.jsp" method="post">
사용자 아이디 : <input type="text" name="memberId"/>
새 비밀번호 : <input type="password" name="memberPw"/>
<input type="submit" value="변경하기!"/>
</form>
</body>
</html><update.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("memberId");
String pw = request.getParameter("memberPw");
Class.forName("org.mariadb.jdbc.Driver");
Connection conn = null;
PreparedStatement pstmt = null;
try{
String JDBC_URL = "jdbc:mariadb://localhost:3306/studydb";
String DBUSER = "root";
String DBPASS = "1212";
String SQL = "update user set pw = '"+ pw +"' where id = '"+ id +"';";
conn = DriverManager.getConnection(JDBC_URL, DBUSER, DBPASS);
pstmt = conn.prepareStatement(SQL);
pstmt.executeUpdate();
}catch(Exception e){
out.println("드라이버 연결 실패!");
}finally{
conn.close();
pstmt.close();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>비밀번호 변경완료!</h1>
</body>
</html>update 쿼리문법을 활용해 위에 저장되어있는 김잡스씨의 비밀번호를 바꿔보자.
이번엔 변경이 잘되었다면 변경완료! 라는 구문이 보일것이다
이제 mariaDB로 가 확인해보자!
잘 변경되어있는걸 알 수 있다.
이렇게 insert 와 update 를 활용해 DB에 저장 및 저장되어있는값을 변경해보았다.
jsp에 있는 내장객체들은 해당 개체고유의 영역내에서 공유할 수 있는 부분을 가지고 있는데 그러한 공유되는 데이터는 attribute(속성) 이라 한다.
application (가장 큰 단위) : 웹 어플리케이션이 실행되는 동안 속성 유효
session : 한 세션이 유지되는 동안 유효 ex) 크롬, 엣지같은 브라우저 내에서는 로그인 유지상태
request : 클라이언트의 요청이 처리되는 동안 유효
page : 해당 페이지에서만 유효
즉 우리가 크롬브라우저를 사용하여 네이버같은 사이트에서 한번 로그인해두면
다른 브라우저로 가지 않는 이상 로그인상태가 유지되는데(네이버메일로가건, 네이버쇼핑으로 가건)
이건 로그인정보(attribute)가 session 이상의 단위에 적용 되어있기 때문이다.
이점을 활용해 로그인상태가 유지되는 페이지를 만들어보았다.
이전에 작성해둔 파일 중 loginTo.jsp, top.jsp 에서 수정
<loginTo.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
String id = request.getParameter("id");
String pw = request.getParameter("password");
%>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
if(id.equals("dlgkswo99") && pw.equals("lee")){
session.setAttribute("userName", "HJLee");
session.setAttribute("login", "OK");
response.sendRedirect("mainPage.jsp"); // 로그인에 성공했을 때
}else{ // 로그인에 실패했을 때
%>
<jsp:forward page="loginFail.jsp"/>
<%} %>
</body>
</html>session.setAttribute(); 를 활용해, userName = HJLee, login = OK 값을 포스트잇으로 세션에 딱 박아두고,
세션단위로 유효하기에 redirect 방식으로 이동해도 attribute는 남아있게 된다.
그래서 attribute 값을 받아 다시 mainPage.jsp 로 이동
<top.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="mainPage.jsp">Homepage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="subPage.jsp">Subpage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<%
String login = (String)session.getAttribute("login");
String userName = (String)session.getAttribute("userName");
if(login != null && userName != null){ //어트리뷰트값 있을때%>
<li>
<a><%=userName %>님, 어서오세요!</a>
</li>
<li>
<a href="logout.jsp">로그아웃</a>
</li>
<% }else{ //어트리뷰트값 없을때%>
<li>
<a href="loginMain.jsp" style="color:#000000">로그인</a>
</li>
<% } %>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>mainPage의 top 부분인 top.jsp 파일에서 attribute 값을 대조해보고 있으면 "~님 어서오세요!" 와 로그아웃버튼이 생기게끔하고,
attribute 값이 없을 때(처음 화면에 들어왔거나, 로그아웃했을 시) 로그인버튼만 보이게끔 설정!
이외 미리 만들어둔 mainPage.jsp 와 loginMain.jsp 파일
<mainPage.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>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
width: 100%;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
section {
height: 90%;
width: 80%;
margin-left: 10%;
}
</style>
</head>
<body>
<jsp:include page="top.jsp" flush="false"/>
<section>
<h1>홈페이지에 어서오세요!</h1>
<a>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis ullam laboriosam molestiae architecto cumque in pariatur facere eos placeat voluptatem nam sapiente, animi quidem. Atque vel hic possimus voluptas fugit?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit pariatur totam harum officia sed, rem id distinctio recusandae unde illo voluptatum eius eveniet quod incidunt quibusdam nostrum perferendis sequi neque?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus temporibus alias molestias blanditiis nemo provident, quisquam eaque cumque mollitia quaerat modi accusantium corporis pariatur dolorum. Quibusdam quo ad consequuntur laudantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae suscipit magnam porro, quod quisquam sed adipisci voluptatum facilis impedit quia itaque non dolor blanditiis placeat, neque et. Nam, alias in.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, nostrum ipsam possimus inventore distinctio blanditiis veritatis nesciunt necessitatibus sunt, laudantium ratione consectetur neque odit soluta aperiam quidem quia architecto reiciendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil vitae nam eos pariatur harum recusandae ut mollitia voluptas sapiente neque laudantium maiores blanditiis officia quisquam nostrum, voluptatibus voluptatem rem sunt!
</a>
</section>
<%@ include file="footer.jsp" %>
</body>
</html><loginMain.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>
<h1>로그인 페이지</h1>
<form action="loginTo.jsp" method="post">
아이디 : <input type="text" name="id" placeholder="insert ID.."/>
비밀번호 : <input type="password" name="password" placeholder="insert password.."/>
<input type="submit" value="로그인"/>
</form>
</body>
</html>자 그럼 mainPage.jsp 에서 실행해보자!
로그인 버튼이 생겨났다!
로그인버튼을 누르면
로그인 페이지로 오게되고 , loginTo.jsp 에서 조건문에 있는대로 알맞은 id와 pw 값을 입력해주면!
로그인에 성공하면서 문구와 로그아웃버튼이 생긴걸 볼 수있다.
아직까진 조잡한 단계지만, 이후 DB에서 정보를 불러와 대조하는 코드를 추가로 짜기만 하면
(loginTo.jsp 에서 if 문 안에 작성하면 되겠지..?)
정말 로그인페이지의 기본원리를 만들어 본게 되는것이다 ㅎㅎ
마무리
오늘은 이렇게 java와 DB 를 연동해보았는데 일상속에 쓰이는 기능들이 이런 과정을 거쳐서 만들어진다는것에 신기함도 느끼고,
또 그런 과정을 내손으로 미약하게나마 구현해보았다는게 뿌듯하기도 하다.
빨리 지식이 더 늘어 정말 그럴싸한 로그인페이지를 구현해보고싶다는 생각도 들었다.
이런 감정을 원동력삼는게 좋은 개발자가 되는 길이겠지..? ㅋㅋ
