이전글 보기
->
2019/12/03 - [나만의 미니프로젝트/JSP게시판 웹사이트] - JSP 게시판 만들기 NO.1 JSP 개발 환경 구축 하기
JSP 게시판 만들기 NO.1 JSP 개발 환경 구축 하기
1. JDK 설치 JAVA 개발환경 세팅을 위한 JDK 설치방법 2019/12/03 - [프로그램언어 뽀각/JAVA] - JAVA - 자바 시작하기 (자바설치, 개발환경 설정) JAVA - 자바 시작하기 (자바설치, 개발환경 설정) 2019년 취업..
s205203.tistory.com
1. 디자인 프레임워크 부트스트랩 설치
부트스트랩을 알고나서 부트스트랩 없이 html 코딩할때를 생각하면 눈물이 날 것 같다. html, css, js 를 제공하는 디자인 프레임 워크로 반응형으로 되어있어 스마트폰이나 웹이나 모든 기기에서 작동 하여 디자인적 감각이 없다고 하더라도 쉽게 웹사이트를 제작 할 수 있게 해준다.
http://bootstrapk.com/getting-started/#download
부트스트랩 최신버전 다운로드
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치하기 Grunt 를 설치하려면, 당신은 먼저 node.js 를 다운로드하고 설치 해야합니다 (npm 포함). npm 은 node packaged modules 이며 node.js 상에서 개발 의존성을 관리하는 방법입니다. 그리고나서 다음의 명령줄: npm inst
bootstrapk.com
workspace의 webcontent에 부트스트랩 css,js폴더를 복사해 통채로 투입!
2.Login.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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을 쓰지않고 오라클을 써서 해보았다.
오라클 11설치방법
->
2019/12/07 - [프로그램언어 뽀각/└Oracle] - 윈도우 10 오라클11G 설치하기
윈도우 10 오라클11G 설치하기
1. 데이터 베이스 설치파일 다운로드 1) 다음 경로 접속 https://www.oracle.com/kr/index.html 2) 다음과 같이 이동하여 설치파일 2개 다운로드 ( 또는 다음 경로로 이동하여 설치파일 다운로드 ) https://www.o..
s205203.tistory.com
SQLDeveloper 설치하기
->
2019/12/07 - [프로그램언어 뽀각/└Oracle] - 오라클 SQL Developer 설치 및 접속하는 방법
오라클 SQL Developer 설치 및 접속하는 방법
보통 오라클 사용을 할 때 SQL Gate를 많이 사용했다. 그런데 어느 순간부터 무료 버전이 사라져버렸다. 그리고 생긴 것이 30일 무료 평가판이다. 30일간은 SQL Gate를 사용할 수 있지만, 그 이후로는 사용이 불가..
s205203.tistory.com
테이블을 생성한다.
여기서 sql문을 보고싶을땐
여기 들어가서 보면된다.
테이블 생성시 CMD창으로 들어가서 만들어도 되지만 좀 귀찮았던 관계로 ...ㅠ
디벨로퍼를 사용하였다.
이제 이렇게 만들어진 회원 데이터를
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;
}
}
'나만의 미니프로젝트 > JSP게시판 웹사이트' 카테고리의 다른 글
| JSP 게시판 만들기 NO.6 글 등록 기능 (0) | 2019.12.07 |
|---|---|
| JSP 게시판 만들기 NO.5 메인 화면/ 게시판 DB생성 (0) | 2019.12.07 |
| JSP 게시판 만들기 NO.4 회원 가입/ 세션 처리 (0) | 2019.12.07 |
| JSP 게시판 만들기 NO.3 로그인 처리(oracle) (0) | 2019.12.07 |
| JSP 게시판 만들기 NO.1 JSP 개발 환경 구축 하기 (0) | 2019.12.03 |