ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 게시판 만들기 - 2. 로그인 폼 만들기
    JAVA/웹 프로그래밍 - JSP 2020. 11. 23. 19:25

    아래의 내용과 이어진다.

    designatedroom87.tistory.com/318?category=901206

     

    게시판 만들기 - 1. 기본 설정

    우선, 아래의 두 파일을 다운 받아서 열어보도록 하자. 아래의 내용을 기반으로 환경 구축을 할 것이다. Dynamic Web Project를 생성해서 프로젝트 이름을 NoticeBoard적고, Next를 클릭한다. Next를 클릭하

    designatedroom87.tistory.com

     

    header.jsp에는 네비게이션 바를 지정했다.
    header에서 controller를 만들자.

     

    web-inf에 member 폴더를 만들어서 loginForm.jsp 파일을 만든다.

    파일에는 로그인에 대한 폼이 들어온다.

     

    header, body, footer는 다 같이 공통으로 쓸 수 있는 내용도 있으므로 이를 WEB-INF폴더의 하위에

    common폴더를 하나 생성해서 body, footer, header jsp 파일들을 넣어둔다.

     

    header.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    
    <div>
    <!--nav 태그에서 메뉴를 만들면 된다.-->
        <nav class="navbar">
            <ul>
                <li><a href="/home">홈</a></li>
                <li><a href="/company">회사소개</a></li>
                <li><a href="/iot">IOT</a></li>
                <li><a href="/board">게시판</a></li>
                <li><a href="/member">로그인</a></li>
            </ul>
        </nav>
    </div>

     

    body.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <div>
    main
    </div>

     

    footer.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <div>
    <!-- Footer -->
    <footer class="w3-container w3-padding-64 w3-center w3-opacity">  
      <div class="w3-xlarge w3-padding-32">
        <i class="fa fa-facebook-official w3-hover-opacity"></i>
        <i class="fa fa-instagram w3-hover-opacity"></i>
        <i class="fa fa-snapchat w3-hover-opacity"></i>
        <i class="fa fa-pinterest-p w3-hover-opacity"></i>
        <i class="fa fa-twitter w3-hover-opacity"></i>
        <i class="fa fa-linkedin w3-hover-opacity"></i>
     </div>
     <p>Powered by <a href="/home" target="_self">IOT WETWORK COMPANY</a></p>
    </footer>
    </div>

     

    지금상태로 index.jsp를 실행시키면 안 된다.

    호출이 안됨(web-inf에 숨겨져 있다.) 그래서 나중에 이 내용을 호출하고자 가짜 index를 만들 것이다.

    WebContent에 우클릭해서 New에서 파일을 선택한다. 이 파일의 이름을 index라고 한다.

    내용은 없다.

    확장자는 절대 붙이지 않는다. 그리고 index파일을 선택하고 우클릭해서 run on server를 한다.
    아무것도 나오지 않는다.

     

    src에 servlet을 하나 만든다. 클래스 네임은 Frontcontroller 이며, 패키지 명은 frontcontroller 라고 한다.

    그리고 url 매핑에서 /index라고 Edit를 선택해서 변경한다. 

    생성자 체크 해제하고 init, service, doPost, doGet 함수를 체크한다. 그리고 Finish를 선택한다.

    Frontcontroller.java

    더보기
    package frontcontroller;
    
    import java.io.IOException;
    
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/index")
    public class Frontcontroller extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
    	public void init(ServletConfig config) 
    			throws ServletException {}
    
    	protected void service(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {
    		
    		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/home/index.jsp");
    		
    		//	페이지로 밀어주는 작업
    		dispatcher.forward(request, response);
    	}
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {}
    }

    그리고, 그냥 index 파일을 실행해보자.

    실행하고 나서, 주소 창을 보면 http://localhost:9090/index 라고 적혀있다.

    /index 는 Frontcontroller의 어노테이션으로, 이 Frontcontroller가 실행되어, /WEB-INF/home/index.jsp가 호출이 된다.

     

    src폴더를 우클릭해서 New를 선택하고 자바 클래스 파일을 선택하고

    아래와 같이 설정한다. member.controller 패키지의 하위로 Controller 클래스를 만든다.

    Controller.java

    더보기
    package member.controller;
    
    import java.io.IOException;
    
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import member.model.Member;
    import member.service.MemberService;
    
    //	member로 들어오는 모든 url에 대해서 해당 컨트로럴가 이에 대한 처리를 하겠다는 의미
    @WebServlet("/member/*")
    public class Controller extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
    	public void init(ServletConfig config) 
    			throws ServletException {}
    
    	protected void service(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {
    		//	1. 페이지를 전송하기 전에 url을 분석하고 분류해서 실행
    		String url = request.getRequestURI();
    		//System.out.println("url : " +url);
    		String contextPath = request.getContextPath();
    		//System.out.println("contextPath : " +contextPath);
    		String path = url.substring(contextPath.length());
    		//System.out.println("path : " +path);
    		String lastPath = url.substring(url.lastIndexOf('/') + 1);	//	마지막 /를 기준으로 분리
    		System.out.println("subPath : " +lastPath);
    		String command = lastPath;
    		
    		if (command.equals("index")) {
    			/*
    			//	2. 분류된 url을 선택하고 전송하는 작업
    			RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/member/index.jsp");
    			
    			//	3. 페이지로 밀어주는 작업
    			dispatcher.forward(request, response);
    			*/
    			request.setAttribute("page", "loginForm.jsp");
    		}
    		else if (command.equals("joinMember")) {
    			request.setAttribute("page", "joinMember.jsp");
    		}
    		else if (command.equals("joinMember.do")) {
    			//	1. DB생성(memberTable.jsp)
    			//	     폼에서 전송할 데이터 처리
    			//	(1). 생성자를 통해 한 번에 담는 방법
    			//	(2). 메소드 set함수를 이용하여 데이터를 저장하는 방법
    			Member member = new Member();
    			member.setId(request.getParameter("id"));
    			member.setPassword(request.getParameter("password"));
    			member.setNickname(request.getParameter("nickname"));
    			member.setEmail(request.getParameter("email"));
    			member.setTel(request.getParameter("tel"));
    			
    			//	2. 서비스 작업, dao작업을 한다.
    			MemberService service = MemberService.getInstance();
    			int result = service.insertMember(member);
    			
    			if (result > 0) request.setAttribute("page", "success.jsp");
    			else 			request.setAttribute("page", "fail.jsp");
    			
    			//	3. data를 객체에 저장
    			//request.setAttribute("page", "joinMember.jsp");
    		}
    		else{
    			//request.setAttribute("page", "body.jsp");
    			request.setAttribute("page", "loginForm.jsp");
    		}
    		//	2. 분류된 url을 선택하고 전송하는 작업
    		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/member/index.jsp");
    				
    		//	3. 페이지로 밀어주는 작업
    		dispatcher.forward(request, response);
    	}
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    			throws ServletException, IOException {}
    }

     

    index파일을 실행하고 http://localhost:9090/member/로 주소를 검색하자. 
    그리고 콘솔 창에서 확인을 한다.
    contextPath는 /이므로 아무것도 나오지 않는다.
    그 이유는 프로젝트의 Tomcat서버의 Context Path의 경로를 /로 설정했기 때문이다.

     

    일단 전반적인 정리를 하도록 한다.

    url을 요청하면 url처리는 컨트롤러(서블릿)에서 한다.

    화면구성을 할 때, header.jsp, body.jsp, footer.jsp가 있다.

    이렇게 화면을 구성하고 나서
    메인 메뉴에 따라 항목을 구성해야 한다. (WEB-INF)
    이 항목은 /home, /iot, /board, /member 가 있다.

    항목 구성 후에 각 항목 안에는 index.jsp가 있다.

    index.jsp에서 처리할 부분은 body.jsp만 처리를 하면 된다.

    웹에서 처리할 소스파일을 구성해야 한다.(src에서)

    1. frontController.FrontController.java파일은 처음에 들어오는 URL분석 처리를 한다.

    2. 각 메뉴마다 처리할 단위를 나눌 때, 폴더 명으로 구분을 한다.
               (home,iot,board,member)

       폴더마다 home/controller, service, dao,model을 구성한다.

    (1). controller는 URL처리 및 전송해오는 데이터를 처리를 한다.(request.getParameter)
    서비스를 이용해 필요한 데이터를 받고, 디스패처를 이용해서 페이지에 데이터를 전달 후, 페이지 처리한다.
    (2). service는 데이터를 단순히 DB연결자로서, 필요한 값을 요청하고
      데이터를 받는 역할
    (3). dao는 실제 DB를 처리하는 작업을 한다. (DB에 접속하고 값을 빼오는 등) 
    (4). model은 데이터를 담아두는 공간이다.

     

    웹 처리 순서
    url을 요청하면 화면이 보여지고 화면 view(폼 구성)는 화면에서 처리하는 작업(button)은 button이 처리한다.
    버튼은 url을 가지고 있기 때문이다. 이 url을 전송하면 이는 서블릿으로 간다. 
    서블릿은 url을 해석해야 하기 때문에 모든 처리는 이 서블릿에 있어야 한다.
    이에 대한 처리는 if ~ else if ~ else로 처리한다.
    요구하는 view를 전달한다.

    (위를 요약하면 url에 대한 처리 명세서 작성을 해야 한다.)
    해당하는 작업에 대해서 이런 작업을 할 것이다라는 명세서가 나와야 한다.
    jsp에서 서블릿 다시 jsp로 왔다갔다 한다.

    로그인 버튼을 누르면 로그인 폼이 나오는데, 여기서 두 가지 선택지가 있다. 
    1. 로그인, 2 회원 가입

    으로 이 두 가지에 대한 처리를 해야 하는데, 
    화원 가입 버튼을 누르면 회원가입에 대한 처리가 나와야 한다. 
    로그인 버튼이 눌리면 로그인 폼이 화면에 나타나야 한다.

    회원가입 예인 경우에 폼을 작성하고 자바스크립트를 통해 폼 내용을 확인하고 전송해야 한다.

    정보가 입력이 되었는지, 비번과 비번확인이 일치 하는 등의 유효성 처리를 해야한다.

     

    데이터를 저장할 model을 만들어보자.

    src폴더의 하위로 member.model 패키지로 Member.java 파일을 만들자.

    Member.java

    더보기
    package member.model;
    
    import java.util.Date;
    
    public class Member 
    {
    	int m_idx;
    	String id;
    	String password;
    	String nickname;
    	String email;
    	String tel;
    	Date m_day; 
    	
    	public Member() {}
    	
    	public Member(int m_idx, String id, String password, 
    			String nickname, String email, String tel, Date m_day) 
    	{
    		this.m_idx = m_idx;
    		this.id = id;
    		this.password = password;
    		this.nickname = nickname;
    		this.email = email;
    		this.tel = tel;
    		this.m_day = m_day;
    	}
    	
    	public int getM_idx() {return m_idx;}
    	public void setM_idx(int m_idx) {this.m_idx = m_idx;}
    	public String getId() {return id;}
    	public void setId(String id) {this.id = id;}
    	public String getPassword() {return password;}
    	public void setPassword(String password) {this.password = password;}
    	public String getNickname() {return nickname;}
    	public void setNickname(String nickname) {this.nickname = nickname;}
    	public String getEmail() {return email;}
    	public void setEmail(String email) {this.email = email;}
    	public String getTel() {return tel;}
    	public void setTel(String tel) {this.tel = tel;}
    	public Date getM_day() {return m_day;}
    	public void setM_day(Date m_day) {this.m_day = m_day;}
    }

    그리고 아래의 memberTable.jsp 파일에는 테이터베이스의 문법적인 내용이 있는 것으로

    내용은 아래와 같다.

    WebContent 폴더에 만든다.

    아래의 내용을 복사해서 테이블을 만들거나, 데이터를 저장할 때 복사해서 쓰기 편하도록 만든 jsp파일이다.

    memberTable.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>
    </head>
    <body>
    create table member
    (
    	m_idx int not null,
    	id varchar(20) not null,
    	password varchar(20) not null,
    	nickname varchar(20) not null,
    	email varchar(35) not null,
    	tel varchar(13) not null,
    	m_day date not null 
    );
    	
    create sequence new_member_idx_seq increment by 1 start with 1;	
    	
    insert into member values (new_member_idx_seq.nextval,'test','1234','iot','a@a.net','010-1111-1111','2020-11-23');
    
    	select * from member;
    
    </body>
    </html>

    DB의 테이블을 만들어 보자.

    위의 창에서 Database Development를 선택한다.

    Data Source Explorer에서 HR-Oracle을 선택하고 우클릭해서 Connect를 한다.

    그리고 다시 Oracle을 선택하고 우클릭해서 Open SQL Scrapbook을 선택하고

    쓰고 있는 DB를 설정한다.

    그리고 위에서 부터 아래로 다음의 문장들을 하나씩 선택해서 실행한다.

     

    create sequence new_member_idx_seq increment by 1 start with 1;

    create table member
    (
    m_idx int not null,
    id varchar(20) not null,
    password varchar(20) not null,
    nickname varchar(20) not null,
    email varchar(35) not null,
    tel varchar(13) not null,
    m_day date not null 
    );

     

    insert into member values (new_member_idx_seq.nextval,'test','1234','iot','a@a.net','010-1111-1111','2020-11-23');

     

    select * from member;

     

    그리고, 서비스 및 DAO(DB Access Object) 를 만들어 보자.

    src폴더에 member.service 패키지의 MemberService.java 로 만들면 된다.

    MemberService.java

    더보기
    package member.service;
    
    import member.dao.MemberDAO;
    import member.model.Member;
    
    public class MemberService {
    	private static MemberService service = new MemberService();
    	public MemberDAO dao = MemberDAO.getInstance();
    	
    	private MemberService() {}
    	
    	public static MemberService getInstance(){return service;}
    
    	public int insertMember(Member member) {
    		return dao.insertMember(member);
    	}
    }

     

     

    src폴더에 member.dao 패키지의 MemberDAO.java 만든다.

    MemberDAO.java

    더보기
    package member.dao;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    import member.model.Member;
    
    public class MemberDAO {
    	private static MemberDAO dao = new MemberDAO();
    	
    	private MemberDAO() {}
    	public static MemberDAO getInstance() {
    		return dao;
    	}
    	
    	public Connection connect()
    	{
    		Connection conn = null;
    		
    		try {
    		Class.forName("oracle.jdbc.driver.OracleDriver");
    		conn=DriverManager.getConnection(
    		"jdbc:oracle:thin:@localhost:1521:xe","hr","1234");
    
    		if(conn==null) {System.out.println("DB접속에 실패");}
    		System.out.println("DB접속 성공");
    		
    		}catch(Exception e) {}
    		
    		return conn;
    	}
    	
    	public void close(Connection conn, PreparedStatement pstmt, ResultSet rs)
    	{
    		if (rs != null) 
    		{
    			try 
    			{
    				rs.close();
    			}
    			catch (SQLException e) {e.printStackTrace();}
    		}
    		this.close(conn,pstmt);
    	}
    	
    	public void close(Connection conn, PreparedStatement pstmt)
    	{
    		try {
    		pstmt.close();
    		conn.close();
    		}
    		catch (SQLException e) {e.printStackTrace();}
    	}
    	
    	//	DB에 접속해서 테이블에 해당 정보를 입력하기
    	public int insertMember(Member member) {
    		String sql = null;
    		Connection conn = null;
    		PreparedStatement pstmt = null;
    		int result = 0;
    		ResultSet rs = null;
    		
    		try 
    		{
    			conn = this.connect();
    			conn.setAutoCommit(false);	//	DB 트랜잭션의 시작
    			
    			//	아이디가 중복이 되는지 여부 확인해서 중복될 경우 0을 리턴해서 처리
    			//	select count(*) from member where id = 'test';
    			sql = "select count(*) from member where id =?";
    			pstmt=conn.prepareStatement(sql);//위의 sql문을 처리하기 위해 객체 생성
    			pstmt.setString(1, member.getId());
    			rs = pstmt.executeQuery();
    			if (rs.next())	result = rs.getInt(1);
    			
    			//	id가 중복이 되면, result에는 1이상의 값이 들어있다. 그러므로 DB에 데이터 저장 불가
    			if (result > 0)	return 0;
    			
    			//	sysdate는 컴퓨터 상의 데이터이다.
    			sql="insert into member values " + "(new_member_idx_seq.nextval," + "?,?,?,?,?,sysdate)";
    			
    			pstmt=conn.prepareStatement(sql);//위의 sql문을 처리하기 위해 객체 생성
    			
    			pstmt.setString(1, member.getId());
    			pstmt.setString(2, member.getPassword());
    			pstmt.setString(3, member.getNickname());
    			pstmt.setString(4, member.getEmail());
    			pstmt.setString(5, member.getTel());
    			
    			result = pstmt.executeUpdate();
    			conn.commit();
    			
    			if (result > 0)	{
    				System.out.println("멤버 입력 성공");
    				conn.commit();
    			}
    			else{
    				System.out.println("멤버 입력 실패");
    				conn.rollback();
    			}
    			this.close(conn, pstmt);
    		}
    		catch(Exception e) 
    		{ 
    			try {
    				conn.rollback();
    			}
    			catch (SQLException e1) {e1.printStackTrace();}
    		}
    		return result;
    	}
    }

     

     

    WEB-INF/home 폴더의 index.jsp

    index.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.min.js"></script>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      
    <title>Insert title here</title>
    </head>
    
    <body>
    	<jsp:include page="/WEB-INF/common/header.jsp"></jsp:include>
    	<jsp:include page="/WEB-INF/common/body.jsp"></jsp:include>
    	<jsp:include page="/WEB-INF/common/footer.jsp"></jsp:include>
    </body>
    </html>

     

    WEB-INF/member 폴더에 body,fail, index, joinMember, loginForm, success jsp파일을 만든다.

    body.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <div>
    member main
    </div>

    fail.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>멤버 입력 성공 여부</title>
    </head>
    <body>
    	가입에 실패하셨습니다.
    </body>
    </html>

    index.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.min.js"></script>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      
    <title>Insert title here</title>
    </head>
    
    <body>
    	<jsp:include page="/WEB-INF/common/header.jsp"></jsp:include>
    	<jsp:include page="/WEB-INF/member/${page}"></jsp:include>
    	<jsp:include page="/WEB-INF/common/footer.jsp"></jsp:include>
    </body>
    </html>

    joinMember.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        
    <div class="container">
      <h2>회원가입</h2>
      <form name=form action=/member/joinMember.do method=post>
        <div class="form-group">
          <label for="id">아이디:</label>
          <input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요">
        </div>
        <div class="form-group">
          <label for="pwd">패스워드:</label>
          <input type="password" class="form-control" id="password" name="password" placeholder="패스워드를 입력하세요">
        </div>
        <div class="form-group">
          <label for="repwd">패스워드 확인:</label>
          <input type="password" class="form-control" id="repassword" name="repassword" placeholder="확인할 패스워드를 입력하세요">
        </div>
        <div class="form-group">
          <label for="nickname">별명:</label>
          <input type="text" class="form-control" id="nickname" name="nickname" placeholder="별명을 입력하세요">
        </div>
        <div class="form-group">
          <label for="email">이메일:</label>
          <input type="text" class="form-control" id="email" name="email" placeholder="이메일 주소를 입력하세요">
        </div>
        <div class="form-group">
          <label for="tel">전화번호:</label>
          <input type="text" class="form-control" id="tel" name="tel" placeholder="전화번호를 입력하세요">
        </div>
        <!-- 가입일은 시스템에서 등록 -->
        <!--  <button type="submit" class="btn btn-default">회원가입</button>	-->
        <button type="button" class="btn btn-default" onclick=dataCheck()>회원가입</button>
        <button class="btn btn-default" onclick="/member/joinMember">취소</button>
      </form>
    </div>
    
    <script>
    function dataCheck()
    {
    	if (document.getElementById("id").value ==""){
    		alert("id를 입력하세요.")
    		document.getElementById("id").focus();
    		return;
    	}
    	if (document.getElementById("password").value ==""){
    		alert("password를 입력하세요.")
    		document.getElementById("password").focus();
    		return;
    	}
    	if (document.getElementById("repassword").value ==""){
    		alert("repassword를 입력하세요.")
    		document.getElementById("repassword").focus();
    		return;
    	}
    	if (document.getElementById("nickname").value ==""){
    		alert("nickname을 입력하세요.")
    		document.getElementById("nickname").focus();
    		return;
    	}
    	if (document.getElementById("email").value ==""){
    		alert("email을 입력하세요.")
    		document.getElementById("email").focus();
    		return;
    	}
    	if (document.getElementById("tel").value ==""){
    		alert("tel을 입력하세요.")
    		document.getElementById("tel").focus();
    		return;
    	}
    	if (document.getElementById("password").value != document.getElementById("repassword").value){
    		alert("비밀번호가 일치하지 않습니다.")
    		document.getElementById("repassword").focus();
    		return;
    	}
    	document.form.submit();
    }
    </script>

    loginForm.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    
    <div class="container">
      <h2>로그인</h2>
      <form action=login.jsp method=post>
        <div class="form-group">
          <label for="id">아이디:</label>
          <input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요">
        </div>
        <div class="form-group">
          <label for="pwd">패스워드:</label>
          <input type="password" class="form-control" id="pwd" name="password" placeholder="패스워드를 입력하세요">
        </div>
        <div class="checkbox">
          <label><input type="checkbox" name="remeber">아이디/패스워드 저장</label>
        </div>
        <button type="submit" class="btn btn-default">로그인</button>
       <button type="button" class="btn btn-default" onclick="location.href='/member/joinMember'">회원가입</button>
    </form>
    </div>

    success.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>멤버 입력 성공 여부</title>
    </head>
    <body>
    	정상적으로 가입 되셨습니다.
    </body>
    </html>

     

    마지막으로, WEB-INF폴더에 각 각 board,company,iot 폴더들을 만들어두자.

    아래는 현재까지 진행한 파일 및 폴더의 계층 구조이다.

     

     

    아래의 내용에서 로그인의 구현에 대해 알아보자.

    designatedroom87.tistory.com/320?category=901206

     

    게시판 만들기 - 3. 로그인 하고 세션 유지 & 로그인 상태에 따라 게시판 보기

    아래의 내용을 이어서 진행한다. designatedroom87.tistory.com/319 게시판 만들기 - 2. 로그인 폼 만들기 아래의 내용과 이어진다. designatedroom87.tistory.com/318?category=901206 게시판 만들기 - 1. 기본..

    designatedroom87.tistory.com

     

    댓글

Designed by Tistory.