마카로닉스

1325 No

jsp model2 이해 - 74

2017-09-28 23:56:48 By 라이트 0 1863 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>동영상과 다르게  부트스트랩 적용 Head 부분만 붙이면 됩니다.</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

LoginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="Header.jsp"/>
</head>
<body>
<div style="margin-top: 50px;"></div>
<div class="row">
	<div class="col-xs-4 col-sm-4"></div>
	 <div class="col-xs-4 col-sm-4">
	   <form action="LoginProc" method="post">
	   <table class="table">
	    <thead>
	       <tr>
	       	<td colspan="2" class="text-center"><h2>로그인</h2></td>
	       </tr>
	    </thead>
	     <tr>
	       <td>아이디</td>
	       <td><input type="text" name="id" id="id" class="form-control"></td>
	     </tr>
	     
	     <tr>
	       <td>패스워드</td>
	       <td><input type="password" name="password" id="password" class="form-control"> 
	       </td>
	     </tr>
	     
	     <tr>     
	       <td colspan="2" class="text-center"><input type="submit" value="로그인" class="form-control"
	       			style="background-color:orange;"></td>
	     </tr>
	   </table>
	   </form>
	 </div>

</div>



</body>
</html>

LoginProc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="Header.jsp"/>
</head>
<body>
   
   <div class="text-center">
     <h3>당신의 아이디는  ${param.id} 와  패스워드는 ${param.password} 입니다.</h3>
    </div>
   
</body>
</html>

동영상 강좌와 다르게 모바일 적용이 가능한 반응형 부트스트랩을 사용하였다.

여기서는 jsp 를 배우는 강좌 이기 때문에 html 적 요소에는 비중있게 생각 하지 않아도 될 것이다.

또한, 일부 자바 코드는 제 입맛에 맞게 변경 하였습니다.

혹시, 이 강의를 들으면서 제 글을 읽고 소스코드를 참조하는 수강생이 있다면 동영상의 코드와 다르다고 생각지 마세요. 대부분 동여상 내용과 같으니 학습에 도움이 될거라 생각 합니다.

소스 : https://github.com/braverokmc79/jsp_sin

유튜브 동영상 출처 :

소프트캠퍼스

강사 : 신형섭(잭임연구원)