(이 글은 기본적으로 Eclipse, Sql Developer가 설치, 인코딩 처리, 서버 등록이 완료된 상태를 가정하고 작성되었습니다.)
- 사용 기술 : Java, JSP, Oracle, Bootstrap, CSS, HTML
- 오늘의 기술 : JSP
- 사용 툴 : Eclipse
안녕하세요 하모예입니다.
오늘은 클라이언트가 보낸 정보들을 받아오는 방법을 소개하겠습니다.
아주 기본적으로 클라이언트의 정보를 받아오는 방법은 크게 두가지가 있습니다.
첫번째, Query String, 쿼리 스트링 사용하기
흔히 쇼핑몰에서 상품의 일련번호로 해당 상품 상세 페이지를 이동할때 많이 쓰입니다.
그러나 사용자의 아이디, 비밀번호는 중요한 개인정보이고,
쿼리스트링 사용시 url을 통해 개인정보가 노출될 가능성이 있으므로 오늘은 이 방법을 사용하지 않습니다.
두번째, form 태그로 input 태그에 name값을 지정하여 servlet에서 받아오기
정말 단순화 시키면 아래와 같은 방식으로 정보를 보낼 수 있습니다.
백문이 불여일견이라고 한번 보는게 백번 듣는거 보다 나으니 바로 설명 시작하겠습니다.
<form action="">
<input type="" name="">
</form>1-1과 1-2를 모두 보고 오신 분들이라면 login.jsp의 코드는 아래와 같을 것입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세상에서 가장 간단한 로그인 </title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style>
body {font-family: "Lato", sans-serif;}
.main-head{height: 150px;background: #FFF;}
.sidenav {height: 100%;background-color: #000;overflow-x: hidden;padding-top: 20px;}
.main {padding: 0px 10px;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}}
@media screen and (max-width: 450px) {
.login-form{margin-top: 10%;}
.register-form{margin-top: 10%;}
}
@media screen and (min-width: 768px){
.main{margin-left: 40%;}
.sidenav{width: 40%;position: fixed;z-index: 1;top: 0;left: 0;}
.login-form{margin-top: 80%;}
.register-form{margin-top: 20%;}
}
.login-main-text{margin-top: 20%;padding: 60px;color: #fff;}
.login-main-text h2{font-weight: 300;}
.btn-black{background-color: #000 !important;color: #fff;}
</style>
</head>
<body>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
<h2>Application<br> Login Page</h2>
<p>Login or register from here to access.</p>
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-black">Login</button>
<button type="submit" class="btn btn-secondary">Register</button>
</form>
</div>
</div>
</div>
</body>
</html>잘보시면 부트스트랩 템플릿을 만드신 분이 친절하게도 form태그와 input 태그를 만들어 두셨네요.
여기에 form 태그에는 action과 method 그리고 input 태그에는 name 속성만 추가해주면 JSP는 준비완료가 됩니다.
<form action="<%=request.getContextPath()%>/login" method="post">
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="User Name" name="userId">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" name="userPw">
</div>
<button type="submit" class="btn btn-black">Login</button>
<button type="submit" class="btn btn-secondary">Register</button>
</form>form태그의 Attribute, 속성중에 action에는 해당 form태그 안에 정보들을 받을 매핑값을 적어주고,
method는 get방식으로 보낼지, post방식으로 보낼지를 지정합니다.
get과 post는 근본적으로 데이터의 위치가 헤더(Header)인지, 바디(Body)인지에 의해서 차이가 생깁니다.
get방식은 헤더에 데이터가 위치하기 때문에 상대적으로 보안에 취약하고, 데이터 길이에 제약이 있습니다.
그러나 post는 바디에 데이터가 위치하기 때문에 get에 비해서는 보안에 있어 우위를 선점하고 있으며,
데이터 길이와 크기에 제약이 덜합니다.
그렇기 때문에 일반적으로 보안이 필요한 데이터를 전송할때는 method를 post로 지정해줍니다.
여기까지 만들었다면 이제 [Java Resources] - [src] 아래에 서블릿, 인코딩, JDBC를 활용하여 기능을 만들어줘야 합니다.
길이가 다소 짧지만 JSP와 JAVA를 함께 작성할 수는 없어서 여기서 마치겠습니다.
'개발 > 세상에서 가장 간단한 로그인' 카테고리의 다른 글
| 2-3. 클라이언트가 입력한 정보 Servlet에 불러오기 (0) | 2020.10.22 |
|---|---|
| 2-2. 비밀번호 단방향 암호화하기(SHA-512) (0) | 2020.10.21 |
| 2-1. utf-8로 인코딩 필터 씌우기 (0) | 2020.10.20 |
| 1-2.Boostrap써서 로그인 페이지 디자인하기 (0) | 2020.10.18 |
| 1-1.Eclipse에 JSP로 시작화면 만들기 (0) | 2020.10.17 |
댓글