[23.01.13] 58일차 [프론트엔드]

W·2023년 1월 13일

국비

목록 보기

85/119

로그인폼 만들기

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/loginForm.jsp</title>
</head>
<body>

<h1>jsp3/loginForm.jsp</h1>

<form action="loginPro.jsp" method="get">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pass"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>

loginPro.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/loginPro.jsp</title>
</head>
<body>
<h1>jsp3/loginPro.jsp</h1>

<%
// 폼에서 입력한 내용이 서버에 전달 => request 내장객체 저장
// request 태그이름에 해당하는 값을 가져오기 => 변수에 저장
String id = request.getParameter("id");
String pass = request.getParameter("pass");

// 1단계 JDBC안에 있는 Driver 프로그램 불러오기
Class.forName("com.mysql.cj.jdbc.Driver");

// 2단계 Driver 프로그램 이용해서 디비연결
String dbUrl = "jdbc:mysql://localhost:3306/jspdb1";
String dbUser = "root";
String dbPass = "1234";

Connection con = DriverManager.getConnection(dbUrl, dbUser, dbPass);

// 3단계 SQL구문 만들어서 실행할 준비(select where id=? and pass?)

String sql = "select * from members where id = ? and pass = ?";

// 4단계 SQL구문을 실행(select) => 결과 저장
PreparedStatement pstmt = con.prepareStatement(sql);

pstmt.setString(1, id);
pstmt.setString(2, pass);

// 5단계 결과를 출력, 데이터 담기 (select)

ResultSet rs = pstmt.executeQuery();

// next(다음행) => 리턴값 데이터 있으면 true => 아이디 비밀번호 일치
// => 세션값 생성 "id", id 값
// => 데이터 없으면 false => 아이디 비밀번호 틀림
// => script "입력정보 틀림" 뒤로 이동
if(rs.next()){
	session.setAttribute("id", id);
	response.sendRedirect("Main.jsp");
}else{
	%>
	<script type="text/javascript">
	alert("입력정보 틀림");
	history.back();
	</script>
	<%
}
%>

</body>
</html>

Main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js3/main.jsp</title>
</head>
<body>
<h1>js3/main.jsp</h1>

<%

// session.setAttribute("id", 모든 참조형값); => 업캐스팅(자동형변환)
// 자식 = 업캐스팅된 부모(다운캐스팅 명시적으로 형변환)
String id = (String)session.getAttribute("id");
// 세션값이 없으면(세션값이 null 이면) => loginForm.jsp
if(id==null){
	response.sendRedirect("loginForm.jsp");
}
%>

<%=session.getAttribute("id") %>님이 로그인하셨습니다.
<a href="logout.jsp">로그아웃</a>
</body>
</html>

logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/logout.jsp</title>
</head>
<body>
<h1>jsp3/logout.jsp</h1>

<%
session.invalidate();
%>

<script type="text/javascript">
alert("로그아웃");
location.href="main.jsp";
</script>

</body>
</html>

DB 회원정보 확인
로그인
로그인 성공

로그아웃

로그인 화면으로 돌아감

잘못된 아이디 입력
로그인 실패

로그인 화면으로 돌아감

회원정보조회

메인화면에 회원정보 조회 링크 추가

<a href="info.jsp">회원정보조회</a><br>

info.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/info.jsp</title>
</head>
<body>
<h1>jsp3/info.jsp</h1>
<%
// 회원정보 기준값 id => 세션에 "id"값 저장되어 있음
// 세션에서 "id"값을 가져오기 -> 변수에 저장
String id = (String)session.getAttribute("id");

Class.forName("com.mysql.cj.jdbc.Driver");

String dbUrl = "jdbc:mysql://localhost:3306/jspdb1";
String dbId = "root";
String dbPass = "1234";

Connection con = DriverManager.getConnection(dbUrl, dbId, dbPass);

String sql = "select * from members where id = ?";

PreparedStatement pstmt = con.prepareStatement(sql);

pstmt.setString(1, id);

ResultSet rs = pstmt.executeQuery();


if(rs.next()){
%>

아이디 : <%=rs.getString("id") %><br>
비밀번호 : <%=rs.getString("pass") %><br>
이름 : <%=rs.getString("name") %><br>
가입날짜 : <%=rs.getTimestamp("date") %><br>
<%} %>
<a href="main.jsp">메인으로 이동</a>
</body>
</html>

회원정보조회 클릭

회원정보 수정

main에 회원정보수정 링크 추가

<a href="updateForm.jsp">회원정보수정</a>

updateForm.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/updateForm.jsp</title>
</head>
<body>
<h1>jsp3/updateForm.jsp</h1>
<%
String id = (String)session.getAttribute("id");

Class.forName("com.mysql.cj.jdbc.Driver");

String dbUrl = "jdbc:mysql://localhost:3306/jspdb1";
String dbId = "root";
String dbPass = "1234";

Connection con = DriverManager.getConnection(dbUrl, dbId, dbPass);

String sql = "select * from members where id = ?";

PreparedStatement pstmt = con.prepareStatement(sql);

pstmt.setString(1, id);

ResultSet rs = pstmt.executeQuery();

if(rs.next()){
%>

<form action="updatePro.jsp" method="get">
아이디 : <input type="text" name="id" value="<%=id%>" readonly><br>
비밀번호 : <input type="password" name="pass"><br>
이름 : <input type="text" name="name" value="<%=rs.getString("name")%>"><br>
<input type="submit" value="수정하기">
</form>

<%} %>

</body>
</html>

updatePro.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp3/updatePro.jsp</title>
</head>
<body>
<h1>jsp3/updatePro.jsp</h1>
<%
request.setCharacterEncoding("utf-8");

String id = (String)session.getAttribute("id");
String pass = request.getParameter("pass");
String name = request.getParameter("name");


Class.forName("com.mysql.cj.jdbc.Driver");

String dbUrl = "jdbc:mysql://localhost:3306/jspdb1";
String dbId = "root";
String dbPass = "1234";

Connection con = DriverManager.getConnection(dbUrl, dbId, dbPass);

String sql = "select * from members where id = ? and pass = ?";

PreparedStatement pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, pass);

ResultSet rs = pstmt.executeQuery();

if(rs.next()){
String sql2 = "update members set name = ? where id=?";
PreparedStatement pstmt2 = con.prepareStatement(sql2);
pstmt2.setString(1, name);
pstmt2.setString(2,id);
pstmt2.executeUpdate();
response.sendRedirect("main.jsp");
}else{
	%>
	<script type="text/javascript">
	alert("아이디 비밀번호 틀림");
	history.back();
	</script>
	<% 
}

%>

</body>
</html>

- 김길동으로 수정

이전 포스트

[23.01.13] 57일차 [클라우드]

다음 포스트

[23.01.13] 58일차 [프론트엔드]

국비

로그인폼 만들기

회원정보조회

회원정보 수정

[23.01.13] 57일차 [클라우드]

[23.01.16] 59일차 [백엔드]

0개의 댓글