JSP 10일차 - 회원가입, 로그인

2020.10.19(월)

src

Config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
   PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
   "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
  <properties resource="db.properties"/>
  <typeAliases>
    <typeAlias type="com.sist.vo.MovieVO" alias="MovieVO"/>
    <typeAlias type="com.sist.vo.EmpVO" alias="EmpVO"/>
  </typeAliases>
  <environments default="development">
    <environment id="development">
       <transactionManager type="JDBC"/>
       <dataSource type="POOLED">
           <property name="driver" value="${driver}"/>
           <property name="url" value="${url}"/>
           <property name="username" value="${username}"/>
           <property name="password" value="${password}"/>
       </dataSource>
    </environment>
  </environments>
  <mappers>
    <mapper resource="com/sist/mapper/member-mapper.xml"/>
  </mappers>
</configuration>

 

db.properties

driver=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@211.238.142.000:1521:XE
username=hr
password=happy

 

src/com.sist.vo

MemberVO.java

package com.sist.vo;
/*
 *  ID       NOT NULL VARCHAR2(20)   
	PWD      NOT NULL VARCHAR2(10)   
	NAME     NOT NULL VARCHAR2(34)   
	EMAIL             VARCHAR2(1000) 
	BIRTHDAY NOT NULL VARCHAR2(20)   
	POST     NOT NULL VARCHAR2(10)   
	ADDR1    NOT NULL VARCHAR2(200)  
	ADDR2             VARCHAR2(100)  
	TEL               VARCHAR2(20)   
	CONTENT  NOT NULL CLOB           
	ADMIN             CHAR(1)    
 */
public class MemberVO {
    private String id;
    private String pwd;
    private String name;
    private String email;
    private String birthday;
    private String post;
    private String addr1;
    private String addr2;
    private String tel;
    private String content;
    private String admin;
    private String msg;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
	public String getPost() {
		return post;
	}
	public void setPost(String post) {
		this.post = post;
	}
	public String getAddr1() {
		return addr1;
	}
	public void setAddr1(String addr1) {
		this.addr1 = addr1;
	}
	public String getAddr2() {
		return addr2;
	}
	public void setAddr2(String addr2) {
		this.addr2 = addr2;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public String getAdmin() {
		return admin;
	}
	public void setAdmin(String admin) {
		this.admin = admin;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	   
}

 

src/com.sist.mapper

member-mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sist.mapper.member-mapper">
  <select id="memberIdcheck" resultType="int" parameterType="string">
    SELECT COUNT(*) FROM member
    WHERE id=#{id}
  </select>
  <!-- 
        ID       NOT NULL VARCHAR2(20)   
		PWD      NOT NULL VARCHAR2(10)   
		NAME     NOT NULL VARCHAR2(34)   
		EMAIL             VARCHAR2(1000) 
		BIRTHDAY NOT NULL VARCHAR2(20)   
		POST     NOT NULL VARCHAR2(10)   
		ADDR1    NOT NULL VARCHAR2(200)  
		ADDR2             VARCHAR2(100)  
		TEL               VARCHAR2(20)   
		CONTENT  NOT NULL CLOB           
		ADMIN             CHAR(1)
   -->
   <insert id="memberInsert" parameterType="com.sist.vo.MemberVO">
     INSERT INTO member VALUES(
       #{id},
       #{pwd},
       #{name},
       #{email},
       #{birthday},
       #{post},
       #{addr1},
       #{addr2},
       #{tel},
       #{content},
       'n'
     )
   </insert>
   <select id="memberLogin" resultType="com.sist.vo.MemberVO" parameterType="String">
     SELECT id,name,pwd,admin
     FROM member
     WHERE id=#{id}
   </select>
</mapper>

 

src/com.sist.dao

CreateSqlSessionFactory.java

package com.sist.dao;
import java.io.*;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
public class CreateSqlSessionFactory {
    private static SqlSessionFactory ssf;
    static
    {
    	try
    	{
    		Reader reader=Resources.getResourceAsReader("Config.xml");
    		// 파싱
    		ssf=new SqlSessionFactoryBuilder().build(reader);
    	}catch(Exception ex)
    	{
    		System.out.println(ex.getMessage());
    	}
    }
	public static SqlSessionFactory getSsf() {
		return ssf;
	}
}

MemberDAO.java

package com.sist.dao;

import java.nio.channels.SeekableByteChannel;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.sist.vo.MemberVO;

public class MemberDAO {
  private static SqlSessionFactory ssf;
  static
  {
	 ssf=CreateSqlSessionFactory.getSsf();
  }
  /*
   *   <select id="memberIdcheck" resultType="int" parameterType="string">
		    SELECT COUNT(*) FROM member
		    WHERE id=#{id}
		  </select>
   */
  public static int memberIdCheck(String id)
  {
	  SqlSession session=ssf.openSession();
	  int count=session.selectOne("memberIdcheck", id);
	  session.close();
	  return count;
  }
  
  // <insert id="memberInsert" parameterType="com.sist.vo.MemberVO"> ==> MemberModel
  public static void memberInsert(MemberVO vo)
  {
	  SqlSession session=ssf.openSession(true);
	  session.insert("memberInsert", vo);
	  session.close();
  }
  
  /*
   *   <select id="memberLogin" resultType="com.sist.vo.MemberVO" parameterType="String">
	     SELECT id,name,pwd,admin
	     FROM member
	     WHERE id=#{id}
	   </select>
   */
  public static MemberVO memberLogin(String id,String pwd)
  {
	  MemberVO vo=new MemberVO();
	  SqlSession session=ssf.openSession();
	  int count=session.selectOne("memberIdcheck", id);
	  if(count==0)
	  {
		  vo.setMsg("NOID");
	  }
	  else
	  {
		  MemberVO dVO=session.selectOne("memberLogin", id);
		  if(pwd.equals(dVO.getPwd()))
		  {
			  vo.setMsg("OK");
			  vo.setId(dVO.getId());
			  vo.setName(dVO.getName());
			  vo.setAdmin(dVO.getAdmin());
		  }
		  else
		  {
			  vo.setMsg("NOPWD");
		  }
	  }
	  
	  return vo;
  }
}

 

src/com.sist.model

MemberModel.java

package com.sist.model;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import com.sist.controller.RequestMapping;
import com.sist.dao.MemberDAO;
import com.sist.vo.MemberVO;
/*
 *     request ==> main.jsp
 *     ** 파일이 include가 되면 request를 공유
 *     ** request => forward,include
 */
public class MemberModel {
   @RequestMapping("member/join.do")
   public String member_join(HttpServletRequest request)
   {
	   request.setAttribute("main_jsp", "../member/join.jsp");//include(메인에 들어갈 파일 지정)
	   return "../main/main.jsp";//include
   }
   @RequestMapping("member/idcheck.do")
   public String member_idcheck(HttpServletRequest request)
   {
	   return "../member/idcheck.jsp";// 새로운 창을 연다 ==> Ajax 
   }
   @RequestMapping("member/idcheck_ok.do")
   public String member_idcheck_ok(HttpServletRequest request)
   {
	    String id=request.getParameter("id");
	    // DB연동
	    int count=MemberDAO.memberIdCheck(id);
	    request.setAttribute("count", count);
	    return "../member/idcheck_ok.jsp";
   }
   @RequestMapping("member/join_ok.do")
   public String member_join_ok(HttpServletRequest request)
   {
	   System.out.println("join_ok...");
	   try
	   {
		   //한글 변환 
		   request.setCharacterEncoding("UTF-8");
	   }catch(Exception ex){}
	   String id=request.getParameter("id");
	   String pwd=request.getParameter("pwd");
	   String name=request.getParameter("name");
	   String email=request.getParameter("email");
	   String post=request.getParameter("post");
	   String addr1=request.getParameter("addr1");
	   String addr2=request.getParameter("addr2");
	   String tel1=request.getParameter("tel1");
	   String tel2=request.getParameter("tel2");
	   String birthday=request.getParameter("birthday");
	   String content=request.getParameter("content");
	   
	   // MemberVO에 값을 설정 ==> DAO로 전송
	   MemberVO vo=new MemberVO();
	   vo.setId(id);
	   vo.setPwd(pwd);
	   vo.setName(name);
	   vo.setEmail(email);
	   vo.setBirthday(birthday);
	   vo.setPost(post);
	   vo.setAddr1(addr1);
	   vo.setAddr2(addr2);
	   vo.setTel(tel1+"-"+tel2);
	   vo.setContent(content);
	   //Insert문장 실행
	   MemberDAO.memberInsert(vo);
	   
	   return "../member/join_ok.jsp";
   }
   @RequestMapping("member/login.do")
   public String member_login(HttpServletRequest request)
   {
	   // 데이터 받기 
	   String id=request.getParameter("id");
	   String pwd=request.getParameter("pwd");
	   // DAO로 전송 결과값을 가지고 온다 
	   // 받은 결과값을 ==> login.jsp전송 
	   MemberVO vo=MemberDAO.memberLogin(id, pwd);
	   if(vo.getMsg().equals("OK"))
	   {
		   // 세션 저장위치 : 서버에 클라이언트 일부 정보를 저장해서 모든 JSP에 사용이 가능 
		   /*
		    *   서버에 저장 ( session vs cookie )
		    *   저장  setAttribute()
		    *   저장 읽기 getAttribute()
		    *   전체 해제 invalidate()
		    *   default ==> 저장 기간 : 30분
		    *   일부만 해제  => removeAttribute()
		    */
		   HttpSession session=request.getSession();
		   // request ==> Session/Cookie생성이 가능 
		   session.setAttribute("id", vo.getId());
		   session.setAttribute("name", vo.getName());
		   session.setAttribute("admin", vo.getAdmin());
		   
	   }
	   
	   request.setAttribute("msg", vo.getMsg());
	   return "../member/login.jsp";
   }
   @RequestMapping("member/logout.do")
   public String member_logout(HttpServletRequest request)
   {
	   HttpSession session=request.getSession();
	   session.invalidate();
	   return "../member/logout.jsp";
   }
}

 

WebContent/member

join.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 type="text/css">
.row1{
  margin: 0px auto;
  width:700px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
// 대소문자 구분 => 라이브러리 
// $ => jquery첨부
function postfind()
{
	new daum.Postcode({
		oncomplete:function(data)
		{
			// jquery가 들어간 부분
			$('#post').val(data.zonecode);
			// document.getElementById("post").value=data.zonecode
			$('#addr1').val(data.address);
		}
	}).open();
}
function idcheck()
{
	window.open("../member/idcheck.do","idcheck","width=320,height=300,scrollbars=no");
}
/*
 *   function idcheck()
 *   {
              처리 
     }
     var idcheck=function()
     {
    	 
     }
     // 가장 많이 사용하는 방법
         화살표 함수 => function,return  
     var idcheck=()=>{
    	 
     }
     
     return형이 있는 경우
     function func_name()
     {
    	 return 값;
     }
     
         매개변수가 있는 경우
     function func_name(addr,name)
     {
        	 
     }
         
         내장 객체
        window  ==> 새로운 창을 여는 경우
                    open ==> 팝업창
        document ==> 브라우저에 출력 
        location ==> 파일 이동 
        form     ==> 입력값을 가지고 오는 경우에 사용 
               제어문 , 	배열 : 본인이 공부
               배열 => 데이터형이 틀려도 된다  [10,"aaa",10.5] 
 */
$(function(){
	$('#joinBtn').click(function(){
		//alert("aaa");
		let id=$('#id').val();
		if(id.trim()=="")
		{
			$('#id').focus();
			return;
		}
		
		// 비밀번호
		let pwd=$('#pwd').val();
		if(pwd.trim()=="")
		{
			$('#pwd').focus();
			return;
		}
		
		let pwd1=$('#pwd1').val();
		if(pwd1.trim()=="")
		{
			$('#pwd1').focus();
			return;
		}
		
		if(pwd!==pwd1)
		{
			alert("비밀번호를 다시 입력하세요!!");
			$('#pwd1').val("");
			$('#pwd1').focus();
			return;
		}
		
		let name=$('#name').val();
		if(name.trim()=="")
		{
			$('#name').focus();
			return;
		}
		
		let birthday=$('#birthday').val();
		if(birthday.trim()=="")
		{
			$('#birthday').focus();
			return;
		}
		
		let post=$('#post').val();
		if(post.trim()=="")
		{
			$('#post').focus();
			return;
		}
		
		let addr1=$('#addr1').val();
		if(addr1.trim()=="")
		{
			$('#addr1').focus();
			return;
		}
		
		let content=$('#content').val();
		if(content.trim()=="")
		{
			$('#content').focus();
			return;
		}
		
		// 데이어 전송 
		$('#joinFrm').submit();
	});
});
</script>
</head>
<body>
  <div style="height: 30px"></div>
  <div class="row row1">
    <h1 class="text-center">회원가입</h1>
    <form method=post action="../member/join_ok.do" name="joinFrm" id="joinFrm">
    <table class="table">
     <tr>
       <th class="text-right danger" width="15%">아이디</th>
       <td width=85%>
         <input type=text name=id class="input-sm" size=15 readonly id="id">
         <input type=button value="중복체크" class="btn btn-sm btn-primary" onclick="idcheck()">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">비밀번호</th>
       <td width=85%>
         <input type=password name=pwd class="input-sm" size=15 id="pwd">
         &nbsp;재입력:<input type=password name=pwd1 class="input-sm" size=15 id="pwd1">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">이름</th>
       <td width=85%>
         <input type=text name=name class="input-sm" size=15 id="name">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">이메일</th>
       <td width=85%>
         <input type=text name=email class="input-sm" size=45>
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">생년월일</th>
       <td width=85%>
         <input type=data name=birthday class="input-sm" size=25 id="birthday">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">우편번호</th>
       <td width=85%>
         <input type=text name=post class="input-sm" size=7 readonly id="post">
         <input type=button value="우편번호" class="btn btn-sm btn-primary" onclick="postfind()">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">주소</th>
       <td width=85%>
         <input type=text name=addr1 class="input-sm" size=45 readonly id="addr1">
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">상세주소</th>
       <td width=85%>
         <input type=text name=addr2 class="input-sm" size=45>
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">전화번호</th>
       <td width=85%>
         <select name=tel1>
           <option>010</option>
           <option>011</option>
           <option>017</option>
         </select>
         <input type=text name=tel2 class="input-sm" size=15>
       </td>
     </tr>
     <tr>
       <th class="text-right danger" width="15%">소개</th>
       <td width=85%>
         <textarea rows="8" cols="55" name="content" id="content"></textarea>
       </td>
     </tr>
     <tr>
       <td colspan="2" class="text-center">
         <input type=button value="회원가입" class="btn btn-sm btn-danger" id="joinBtn">
         <input type=button value="취소" class="btn btn-sm btn-warning"
           onclick="javascript:history.back()"
         >
       </td>
     </tr>
    </table>
    </form>
  </div>
</body>
</html>

 

idcheck.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
    margin: 0px auto;
    width:300px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// window.onload
$(function(){
	$('#idcheckBtn').click(function(){
		let id=$('#id').val();// <input type=text id=id class="input-sm" size=15>에 입력한값
		// let id=document.getElementById("id").value;
		if(id=="")//id가 입력이 없는 경우
		{
			$('#id').focus();
			return;
		}
		// idcheck_ok.do?id=hong
		$.ajax({
			type:'post',
			url:'../member/idcheck_ok.do',
			data:{"id":id},
			success:function(result)
			{
				let count=result.trim();
				// 0 , 1
				if(count==0)//ID가 없는 상태
				{
					$('#idcheck_result').html("<font color=blue>사용 가능한 아이디입니다</font>");
					$('#ok').html('<input type=button value=확인 onclick="ok()">')
				}
				else // ID가 있는 상태
				{
					$('#idcheck_result').html("<font color=red>이미 사용중인 아이디입니다</font>");
				}
			}
		})
	})
});
function ok()
{
	opener.joinFrm.id.value=$('#id').val();
	self.close();// 팝업 (아이디 중복체크)
}
</script>
</head>
<body>
   <div class="container">
     <div class="row">
       <h3>아이디중복체크</h3>
       <table class="table">
         <tr>
           <td>
            ID:<input type=text id=id class="input-sm" size=15>
            <input type=button value="중복체크" id="idcheckBtn" class="btn btn-sm btn-primary">
           </td>
         </tr>
         <tr>
           <td class="text-center" id="idcheck_result"></td><%-- 결과 --%>
         </tr>
         <tr>
           <td class="text-center" id="ok"></td><%--확인 --%>
         </tr>
       </table>
     </div>
   </div>
</body>
</html>

 

idcheck_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
${count}

 

join_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:redirect url="../main/main.do"/>

 

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:choose>
  <c:when test="${msg=='NOID' }">
    <script>
    alert("ID가 존재하지 않습니다!!");
    history.back();
    </script>
  </c:when>
  <c:when test="${msg=='NOPWD' }">
    <script>
    alert("비밀번호가 틀립니다!");
    history.back();
    </script>
  </c:when>
  <c:otherwise>
    <c:redirect url="../main/main.do"/>
  </c:otherwise>
</c:choose>

 

logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:redirect url="../main/main.do"/>

 

WebContent/main

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
/*
 *   $(document).ready(function(){
	   =============== 생략
	 
     })
     
     $(function(){
	
     });
     window.onload=function()
     {
    	 
     }
 */
$(function(){
	// 태그에 대한 이벤트 (클릭..마우스 오버 ...)
	// onClick="send()"  function send(){}
	$('#logBtn').click(function(){
		// selector => css
		let id=$('#log_id').val();// getter  , $('#log_id').val("admin") setter
		//$('#log_id').val("hong");
		if(id.trim()=="")
		{
			$('#log_id').focus();
			return;
			// <input type="text" class="input-sm" name=id size="15" id="log_id" placeholder="아이디입력"  style="color:black">
		}
		
		let pwd=$('#log_pwd').val();// getter  , $('#log_id').val("admin") setter
		//$('#log_id').val("hong");
		if(pwd.trim()=="")
		{
			$('#log_pwd').focus();
			return;
			// <input type="text" class="input-sm" name=id size="15" id="log_id" placeholder="아이디입력"  style="color:black">
		}
		// id입력
		// pwd입력 ===> login_ok.do ==> 데이터 전송 
		$('#logFrm').submit(); //<form => action="파일명">
		// <input type=submit> ==> 'null'
	});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="../main/main.do">SIST Movie</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../main/main.do">Home</a></li>
        <!-- <li><a href="#" id="login">로그인</a></li> --><%-- 모달 --%>
        <li class="dropdown">
	        <a class="dropdown-toggle" data-toggle="dropdown" href="#">회원관리
	        <span class="caret"></span></a>
	        <ul class="dropdown-menu">
	          <c:if test="${sessionScope.id!=null }">
	           <li><a href="../member/join.do">회원수정</a></li>
	          </c:if>
	          <c:if test="${sessionScope.id==null }">
		           <li><a href="../member/join.do">회원가입</a></li>
		          
		          <%--
		                              회원가입폼
		                                 아이디중복체크 (Ajax)
		                                 우편번호 검색
		           --%>
		          <li><a href="#">아이디찾기</a></li>
		          <li><a href="#">비밀번호찾기</a></li>
	          </c:if>
	        </ul>
        </li>
        <li class="dropdown">
	        <a class="dropdown-toggle" data-toggle="dropdown" href="#">영화
	        <span class="caret"></span></a>
	        <ul class="dropdown-menu">
	          <li><a href="../movie/total.do">전체영화</a></li>
	          <li><a href="../movie/real.do?cateno=1">현재상영영화</a></li>
	          <%-- 상세보기  : 찜하기 , Cookie , 댓글 --%>
	          <li><a href="../movie/sch.do?cateno=2">개봉예정영화</a></li>
	          <li><a href="../movie/box.do?cateno=3">박스오피스</a></li>
	        </ul>
	      </li>
	    <c:if test="${sessionScope.id!=null }">
         <li><a href="../reserve/reserve.do">영화예매</a></li>
        </c:if>
            <%-- Ajax 
                               달력
            --%> 
        <li><a href="../movie/news.do">영화뉴스</a></li>
        <li class="dropdown">
	        <a class="dropdown-toggle" data-toggle="dropdown" href="#">커뮤니티
	        <span class="caret"></span></a>
	        <ul class="dropdown-menu">
	          <%-- 블록별 처리 --%>
	          <li><a href="#">공지사항</a></li>
	          <li><a href="#">자유게시판</a></li>
	          <li><a href="#">묻고답하기</a></li>
	        </ul>
	      </li>
	    <c:if test="${ sessionScope.id!=null}">
	      <c:if test="${ sessionScope.admin=='n'}">
            <li><a href="#">마이페이지</a></li>
          </c:if>
          <c:if test="${ sessionScope.admin=='y'}">
            <li><a href="#">예매현황</a></li>
          </c:if>
        </c:if>
      </ul>
    </div>
  </div>
</nav>

<div class="jumbotron text-center">
  <h1>영화 예매 사이트</h1> 
  <p>영화예매를 위한 MVC사이트입니다 </p> 
  <form>
    <div class="input-group">
      <input type="text" class="form-control" size="50" placeholder="영화명 입력" required>
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger">검색</button>
      </div>
    </div>
  </form>
  <div style="height:30px"></div>
  <c:if test="${sessionScope.id==null }">
	  <form method="post" action="../member/login.do" id="logFrm">
	    <div class="text-right">
	      <input type="text" class="input-sm" name=id size="15" id="log_id" placeholder="아이디입력"  style="color:black">
	      <input type="password" class="input-sm" name=pwd size="15" id="log_pwd" placeholder="비밀번호입력"  style="color:black">
	      <input type="button" class="btn btn-danger btn-sm" id="logBtn" value="로그인">
	      <%--
	            <input type=submit>
	            <button>
	            <input type=image>   ==> submit
	       --%>
	    </div>
	  </form>
  </c:if>
  <%--
       HTML(JSP)=> 처리 요청   ==> .do ==> Model <==> DAO
                               JSP <=== 결과값 전송 
   --%>
  <c:if test="${sessionScope.id!=null }">
	  <form action="../member/logout.do"><%-- get(생략이 가능) --%>
	    <div class="text-right">
	      ${sessionScope.name }(${sessionScope.admin=='y'?'관리자':'일반유저' })님 로그인중입니다...
	      <button class="btn btn-danger btn-sm">로그아웃</button>
	    </div>
	  </form>
  </c:if>
</div>
<div id="dialog" style="display:none">
  <jsp:include page="../member/login.jsp"></jsp:include> 
</div>
</body>
</html>

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <!-- Theme Made By www.w3schools.com -->
  <title>SIST Movie Center</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
  }
  h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
  }  
  .jumbotron {
    background-color: #f4511e;
    color: #fff;
    padding: 100px 25px;
    font-family: Montserrat, sans-serif;
  }
  .container-fluid {
    padding: 60px 50px;
  }
  .bg-grey {
    background-color: #f6f6f6;
  }
  .logo-small {
    color: #f4511e;
    font-size: 50px;
  }
  .logo {
    color: #f4511e;
    font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
  }
  .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
  }
  .carousel-indicators li {
    border-color: #f4511e;
  }
  .carousel-indicators li.active {
    background-color: #f4511e;
  }
  .item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
  }
  .item span {
    font-style: normal;
  }
  .panel {
    border: 1px solid #f4511e; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
  }
  .panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
  }
  .panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .panel-footer {
    background-color: white !important;
  }
  .panel-footer h3 {
    font-size: 32px;
  }
  .panel-footer h4 {
    color: #aaa;
    font-size: 14px;
  }
  .panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
  }
  .navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
  }
  .navbar li a, .navbar .navbar-brand {
    color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
  }
  .navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
  }
  .dropdown-menu li a{
    color:#000 !important;
  }
  footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
  }
  .slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
      width: 100%;
      margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
      font-size: 150px;
    }
  }
  </style>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<%-- header가 들어가는 위치 --%>
<jsp:include page="../main/header.jsp"></jsp:include>

<div class="container-fluid">
  <!-- 화면 변경이 되는 부분 -->
  <jsp:include page="${main_jsp }"></jsp:include>
</div>
<%-- footer가 들어가는 위치 --%>
 <jsp:include page="../main/footer.jsp"></jsp:include>
 
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;
      var winTop = $(window).scrollTop();
        if (pos < winTop + 600) {
          $(this).addClass("slide");
        }
    });
  });
  
  $('#login').click(function(){
	 $('#dialog').show();
	 $('#dialog').dialog(); 
  });
  $('#canBtn').click(function(){
	  $('#dialog').hide(); 
	 $('#dialog').dialog('close');
  }); 
})
</script>

</body>
</html>