728x90
2021/05/03(월)
개인 프로젝트로 사진을 선택하면 여러 영상처리된 사진들로 개인 전시회를 꾸밀 수 있도록 구현
우선 로그인을 먼저 구현해보도록 하자
<Mini_conn.jsp>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import= "java.sql.*" %>
<%
Connection conn = null; //JSP와 DB를 연결하는 교량
String url = "jdbc:mysql://localhost:3306/mini_project_db";
String user = "root";
String password = "1234";
Class.forName("com.mysql.jdbc.Driver"); //mysql ~~~.jar파일
conn = DriverManager.getConnection(url, user,password);
%>우선 로그인을 하려면 db를 가져와서 사용해야하기 때문에 db와 연동해주는 conn.jsp파일을 생성
class.forname에 mysql ~~ .jar파일은 build path에 mysql.jar파일을 넣어줘야한다
jar파일 넣는법은 아래 게시물 들어가면 있다 참고
https://cordingdoah.tistory.com/78
MariaDB설치하기 (가상 머신)
2021/04/28(수) mariaDB설치하기 mariadb.org/download/ Download MariaDB Server - MariaDB.org REST API MariaDB Repositories Release Schedule Reporting Bugs … Continue reading "Download MariaDB Server"..
cordingdoah.tistory.com
<Mini_LoginDP.jsp>
- 로그인 화면
<!DOCTYPE html>
<html lang="en">
<head>
<title>OneSchool — Website by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container-fluid">
<div class="d-flex align-items-center">
<div class="site-logo mr-auto w-25"><a href="Mini_LoginDP.jsp">Image processing</a></div>
<div class="mx-auto text-center">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mx-auto d-none d-lg-block m-0 p-0">
</ul>
</nav>
</div>
<div class="ml-auto w-25">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu site-menu-dark js-clone-nav mr-auto d-none d-lg-block m-0 p-0">
<li class="cta"><a href="#contact-section" class="nav-link"><span>Contact Us</span></a></li>
</ul>
</nav>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black float-right"><span class="icon-menu h3"></span></a>
</div>
</div>
</div>
</header>
<div class="intro-section" id="home-section">
<div class="slide-1" style="background-image: url('images/myImage.jpg');" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row align-items-center">
<div class="col-lg-6 mb-4">
<!-- 왼쪽 글 출력 -->
<h1 data-aos="fade-up" data-aos-delay="100">Image Processing Program</h1>
<p class="mb-4" data-aos="fade-up" data-aos-delay="200">Process video to create your own exhibition</p>
</div>
<div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="500">
<div class="form-box">
<!-- 로그인 처리 서버로 이동 -->
<form action="Mini_LoginProcess.jsp" method="post" >
<h3 class="h4 text-black mb-4">Login</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="ID" name="mem_id">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name ="mem_pw">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-pill" value="Login">
</div>
</form>
<!-- 회원가입 화면으로 넘어가기 -->
<form action= "Mini_SignDP.jsp" method="post">
<input type="submit" class="btn btn-primary btn-pill" value="Sign up">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- .site-wrap -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>1. Login 버튼 클릭 시 form action을 이용하여 로그인 처리 프로세스 jsp로 이동
2. Sign Up 버튼 클릭 시 form action을 이용하여 회원가입 화면 jsp로 이동
--> 결과화면
단순히 화면만 출력되는거고 이제 뒤를 처리해줄 서버jsp를 생성해주자!
<Mini_LoginProcess.jsp>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%@ include file="Mini_conn.jsp" %>
<%
String mem_id = request.getParameter("mem_id");
String mem_pw = request.getParameter("mem_pw");
ResultSet rs = null;
Statement stmt = conn.createStatement();
String sql ="SELECT mem_pw FROM member WHERE mem_id='";
sql +=mem_id +"'";
rs = stmt.executeQuery(sql);
String mem_pass2 ="";
while(rs.next()){
mem_pass2 = rs.getString("mem_pw");
}
if(mem_id.trim().equals(""))
out.println("<script>alert('아이디를 입력해주세요'); history.back();</script>");
else if(mem_pw.trim().equals(""))
out.println("<script>alert('비밀번호를 입력해주세요'); history.back();</script>");
else if(mem_pw.equals(mem_pass2)){
//놀이공원 손목띠 같은 개념 가지고 있는 세션만 통과
session.setAttribute("mem_id", mem_id);
session.setAttribute("mem_pw", mem_pass2);
//RequestDispatcher rd = request.getRequestDispatcher("Mini_MainDP.jsp");
//rd.forward(request,response);
//페이지 이동하는 명령
pageContext.forward("Mini_InsertFile.jsp");
}
else
out.println("<script>alert('아이디나 비밀번호가 잘못되었습니다.'); history.back();</script>");
stmt.close();
conn.close();
%>
</body>
</html>1. 값을 form에서 받아와서 변수에 저장
2. id값을 가진 변수를 가지고 sql을 사용해 해당 아이디의 비밀번호가 db에 있는지 조회
3. 있다면 해당아이디의 비밀번호를 변수에 저장
4. id, pw 입력창이 비어있다면 아이디, 비밀번호 입력요청 팝업을 띄움
5. id와 pw가 입력되어 있고 아이디가 db에 존재한다면 가져온 pw와 비교
6. 일치하지 않는다면 아이디, 비밀번호 잘못되었다는 팝업 출력
7. 일치한다면 파일을 선택할 수 있는 Mini_InsertFile.jsp로 이동
--> 결과화면
- 아이디 공백
- 비밀번호 공백
- 아이디, 비밀번호 불일치
** 아이디는 맞고 비밀번호가 불일치해도 "아이디나 비밀번호가 잘못되었습니다." 라는 메시지를 띄우는 이유는
비밀번호가 잘못되었습니다 라고 하면 아이디는 맞았다는 힌트가 되어 보안에 조금 더 취약해지기 때문!
728x90
'코딩 연습장 > JSP' 카테고리의 다른 글
| JSP 개인 프로젝트 - 3 (이미지 파일 등록 화면) (0) | 2021.06.24 |
|---|---|
| JSP 개인 프로젝트 - 2 ( 회원 가입 ) (0) | 2021.06.23 |
| Python/JSP/R 이용한 맛집 프로젝트 - 11 (JSP, DB 연동) (0) | 2021.06.21 |
| Python/JSP/R 이용한 맛집 프로젝트 - 9 (JSP 지역별 지도화면) (0) | 2021.06.19 |
| Python/JSP/R 이용한 맛집 프로젝트 - 8 (JSP 마이 페이지) (0) | 2021.06.19 |