STUDY/programing

JSP 기초 : 게시판 만들기 2. 디자인, 로그인, 회원 DB

NightOwl 2018. 10. 16. 13:56
728x90

이전 글 보기 ☞ 

2018/10/15 - [ 컴알못/Web] - JSP 기초 : 게시판 만들기 1. JSP 개발환경 구축하기



1. 디자인 프레임워크 부트스트랩 설치



 부트스트랩을 알고나서 부트스트랩 없이 html 코딩할때를 생각하면 눈물이 날 것 같다. html, css, js 를 제공하는 디자인 프레임 워크로 반응형으로 되어있어 스마트폰이나 웹이나 모든 기기에서 작동 하여 디자인적 감각이 없다고 하더라도 쉽게 웹사이트를 제작 할 수 있게 해준다.


 

부트스트랩 최신버전 다운로드 페이지 링크



강의에서 사용한 버전↓

bootstrap-3.3.7-dist.zip



Workspace의 Webcontent에 부트스트랩 css, js 폴더를 통채로 넣는다.


2. Login Form



 <%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 뷰포트 -->

<meta name="viewport" content="width=device-width" initial-scale="1">

<!-- 스타일시트 참조  -->

<link rel="stylesheet" href="css/bootstrap.min.css">

<title>jsp 게시판 웹사이트</title>

</head>

<body>

 <!-- 네비게이션  -->

 <nav class="navbar navbar-default">

  <div class="navbar-header">

   <button type="button" class="navbar-toggle collapsed" 

    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

    aria-expaned="false">

     <span class="icon-bar"></span>

     <span class="icon-bar"></span>

     <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand" href="main.jsp">JSP 게시판</a>

  </div>

  <div class="collapse navbar-collapse" id="#bs-example-navbar-collapse-1">

   <ul class="nav navbar-nav">

    <li><a href="main.jsp">메인</a></li>

    <li><a href="bbs.jsp">게시판</a></li>

   </ul>

    

   <ul class="nav navbar-nav navbar-right">

    <li class="dropdown">

     <a href="#" class="dropdown-toggle"

      data-toggle="dropdown" role="button" aria-haspopup="true"

      aria-expanded="false">접속하기<span class="caret"></span></a>

     <ul class="dropdown-menu">

      <li class="active"><a href="login.jsp">로그인</a></li>

      <li><a href="join.jsp">회원가입</a></li>

      

     </ul>

    </li>

   </ul>

  </div> 

 </nav>

 <!-- 로긴폼 -->

 <div class="container">

  <div class="col-lg-4"></div>

  <div class="col-lg-4">

  <!-- 점보트론 -->

   <div class="jumbotron" style="padding-top: 20px;">

   <!-- 로그인 정보를 숨기면서 전송post -->

   <form method="post" action="loginAction.jsp">

    <h3 style="text-align: center;"> 로그인화면 </h3>

    <div class="form-group">

     <input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">

    </div>

       

    <div class="form-group">

     <input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">

    </div>

    <input type="submit" class="btn btn-primary form-control" value="로그인">

    

    

   </form>

  </div>

 </div>

</div>

 

 

 <!-- 애니매이션 담당 JQUERY -->

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

 <!-- 부트스트랩 JS  -->

 <script src="js/bootstrap.js"></script>

 

</body>

</html>


우측 상단에 로그인 및 회원가입 버튼을 만들고 dropdown 서랍에 넣어준다.




3. 회원 DB 구축

 

 한명의 회원에 대한 정보를 관리 할 수 있는 데이터베이스를 구축할 것 이며 가장 대표적인 mysql을 이용한다. 커뮤니티 서버를 설치한다.


MySQL 5.7.23 인스톨러 다운로드


두개의 MSI 중 용량이 조금 더 큰 것으로 설치



설치가 완료되었다.



MySQL COMMAND LINE 에서 패스워드를 입력하고 데이터베이스를 만든다.

CREATE DATABASE BBS;





테이블을 생성한다. 강의엔 잘 입력되지만

나는 charset을 utf8로 설정하지 않으면 한글입력이 안되었다.


CREATE TABEL USER (

userID VARCHAR(20),

userPassword VARCHAR(20),

userName VARCHAR(20),

userGender VARCHAR(20),

userEmail VARCHAR(50),

PRIMARY KEY (userID) 

) DEFAULT CHARSET=utf8 COLLATE utf8_general_ci; 




이제 이렇게 만들어진 회원데이터를

jsp서버에서 담고 처리 할 수 있어야 한다.



자바 리소스의 소스의 user라는 패키지와 클래스를 생성한다.

위에서 만들었던 필드명과 동일하게 변수를 만든다.




JSP 서버에서 사용할 수 있는 형태로 만들기 위해

Generate getters and Setters를 눌러 전부 다 함수를 만들어 준다.

회원 데이터베이스 및 자바빈즈가 완성 되어있다.


User.java

 package user;


public class User {

private String userID;

private String userPassword;

private String userName;

private String userGender;

private String userEmail;

public String getUserID() {

return userID;

}

public void setUserID(String userID) {

this.userID = userID;

}

public String getUserPassword() {

return userPassword;

}

public void setUserPassword(String userPassword) {

this.userPassword = userPassword;

}

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

public String getUserGender() {

return userGender;

}

public void setUserGender(String userGender) {

this.userGender = userGender;

}

public String getUserEmail() {

return userEmail;

}

public void setUserEmail(String userEmail) {

this.userEmail = userEmail;

}

}





728x90
저작자표시 비영리 변경금지

'STUDY > programing' 카테고리의 다른 글

JSP 기초 : 게시판 만들기 5. 게시판 DB 생성  (753) 2018.10.22
JSP 기초 : 게시판 만들기 4. 회원가입 / 세션 처리  (20) 2018.10.19
JSP 기초 : 게시판 만들기 3. 로그인 처리 (mysql)  (23) 2018.10.18
JSP 기초 : 게시판 만들기 1. JSP 개발환경 구축하기  (3) 2018.10.15
자바 기초 문제, 소수 구하기 (백준 알고리즘 2581번 문제)  (0) 2018.10.09
자바 기초, 왕초보 문제 풀이 - 1 (백준 알고리즘 2557, 1000, 11718, 10430, 2839, 2739, 2439, 1924, 11720)  (0) 2018.09.21

'STUDY/programing'의 다른글

  • 현재글JSP 기초 : 게시판 만들기 2. 디자인, 로그인, 회원 DB

관련글

티스토리툴바