어제보다 성장하기

게시글 목록에서 게시글을 눌러서 게시글이 보이도록 구현해보려 한다.

1. LatestDAO에서 특정 게시글을 불러오는 함수를 만든다.

-위의 해당 데이터를 받아와서 위의 함수를 불러내는 곳으로 반환하도록 한다.

-해당 게시글이 없다면 null을 반환한다.

사진

2. view.jsp 클래스를 만든다.

-java.io.writer, latest.Latest, latest.LatestDAO 세팅을 한다.

-세션관리 구문 작성한다.

-글의 넘버가 0이 아니라 1이상일 경우에 하기의 인스턴스에 latestID가 담기게 한다.

-latestID(게시글의 넘버)가 0이면 유효하지 않은 글 메시지가 뜨도록 한다.

-작성된 글을 DAO에서 불러와서 출력하는 구문을 작성한다.

-글제목/내용작성시 특수문자 및 공백을 출력이 되지 않고 작성한 글과는 다른 내용이

나오므로 내용출력시 특수문자도 인식할 수 있도록 작성한다.

*크로스 사이트 스크립트 공격방어가 가능하다.

<script> alert(Hello World'); </script>

=> 게시글에 제목은 보이지 않고 들어가면 메시지가 뜨지 않게 된다.

-글목록으로 돌아가기, 수정, 삭제 버튼을 만든다.

출력화면

mysql 데이터베이스에 저장

글 작성후 게시판 메인화면에 글목록이 출력이 되도록 하려고 한다.

1. 데이터베이스에서 글의 목록을 가져오는 소스코드를 작성하고

   LatestDAO클래스에 리스트를 담아 반환해주는 ArrayList<Latest>함수를 작성한다.

1)특정한 리스트를 담아서 반환할 수 있도록 한다.

게시판은 페이지를 넘어가면서 글들을 읽을 수 있게 한다.

2)ArrayList 작성후 외부라이브러리에서 가져올 수 있도록 한다. shift + ctrl + o

public AarrayList<Bbs> getList(int pageNumber) {

ArrayList<Latest> list = new ArrayList<Latest>();

}

3)특정한 페이지에 따른 총 10개의 게시글을 가져올 수 있도록 한다.

(10개까지의 데이터만 가져올 수 있도록 쿼리문 작성한다.)

String SQL = "SELECT * FROM LATEST WHERE latestID < ? AND latestAvailable =1 ORDER BY latestID DESC LIMIT 10";

3) try catch문에서 try 내에 SQL문을 연결하는 구문 작성한다.

다음게시글의 순서를 가져와서 번호를 예상하게 해서 페이지를 설정하는 구문작성한다.

쿼리를 실행하는 구문작성한다.

4)while문 내에 latest인스턴스를 생성해서 set을 해주고 결과를 get으로 가져와서

list에 해당 리스트를 받아와서 add를 통해 반환할 수있도록 한다.

PreparedStatement pstmt = conn.prepareStatement(SQL);

pstmt.setInt(1, getNext() -(pageNumber -1) * 10);

rs = pstmt.executeQuery();

while (rs.next()) {

Latest latest = new Latest();

latest.setLatestID(rs.getInt(1));

latest.setLatestTitle(rs.getString(2));

latest.setUserID(rs.getString(3));

lateest.setLatestContent(rs.getString(4));

latest.setLatestAvailable(rs.getInt(6));

list.add(latest);

}

}catch (Exception e) {

e.printStackTrace();

}

return list;

5)그리고 try catch문에서 catch문 밖에 return으로 list를 최종적으로 반환할 수 잇게 해준다.

2. 페이징처리를 위해 함수를 작성한다.

-게시글이 10개라면 다음페이지가 존재하지 않으니

 10개글 또는 10개내의 글의 수만 있다면 다음페이지가 보이지 않게 한다.

-boolean과 try catch문의 적용

public boolean nextPage(int pageNumber) {

String SQL = "SELECT * FROM LATEST WHERE latestID < ? AND latestAvailable = 1";

try{

PreparedStatement pstmt = conn.preparedStatement(SQL);

pstmt.setInt(1, getNext() * (pageNumber-1) * 10);

rs = pstmt.executeQuery();

if(rs.next()) {

return true;

}

} catch (Exception e) {

e.printStackTrace();

}

return false;

}

}

1번 2번 작성내용

3. 위의 두가지 함수를 이용해서 커뮤니티발견(게시판)화면에서 게시글을 볼 수있도록한다.

  latest.jsp 에서 작업

1)위의 DAO와 arraylist를 가져오기 위한 jsp 설정

게시글 누를때에 밑에 밑줄 친 부분이 안보이도록 style로 수정해주기

user아이디 세션관리 할 수 있도록 구문 작성

pageNumber를 request로 받아와서 해당 Parameter의 값을 넣어주어 정수형으로

바꾸어준다.

사진

2)userID가 없다면 로그인 회원가입 페이지 보여주기 그대로 유지

-아니라면 회원관리 페이지 보여주기

3)게시글을 뽑아 올 수 있도록 인스턴스 생성 및 arraylist로 페이지 넘버 얻기

* <% } %> ->으로 위의 구문내용의 끝맺음을 해준다.

다음버튼

이전버튼

글작성기능을 만들어볼 것이다.

1. write.jsp를 생성한다.

내용은 latest.jsp내용 기반에서 수정을 하면서 만들 것이다.

2. 게시판 글쓰기 양식을 작성한다.

1) 글쓰기 양식을 form틀 안에 두게 한다. submit시 writeAction으로 갈 수 있도록..

2) 테이블 테두리를 디자인 한다.

3) 글쓰기 양식 제일 윗부분을 디자인한다.

4) 제목을 넣는 줄을 디자인하고 입력할 수 있도록 한다.

5) 글내용을 넣는 줄을 디자인하고 입력할 수 있도록 한다.

6) 글작성완료 버튼을 누름으로서 제출을 할 수 있도록 작성한다.

사진

화면 출력

3. LatestDAO 클래스(데이터베이스 접근객체)를 생성하고, 데이터베이스에 접근할 수 있도록 구문    을 작성한다.

4. LatestDAO클래스에 함수를 3개를 작성해 준다.

1)게시글 작성시 현재 서버시간을 가져오는 함수

여러개 함수가 필요하므로, 각각 함수끼리 데이터베이스에 접근하는데 있어서

마찰이 일어나지 않도록 pstmt를 함수 내에 작성한다.

-String SQL = "SELECT NOW(); ->현재의 시간을 가져오는 mysql문장이다.

-현재 연결되어 있는 conn.객체를 이용해서 SQL문장을 실행준비단계로 만들어준다.

PreparedStatement pstmt = conn.prepareStatement(SQL);

-실제로 사용했을 때 나오는 결과가 나오도록 작성

rs = pstmt.executeQuery();

-결과가 있는 경우에 1이 있도록 해서 현재의 날짜를 반환해줄 수 있도록 한다.

if (rs.next()) {

return rs.getString(1);

}

사진

2)게시글 작성시 게시글 번호를 가져오는 함수

여러개 함수가 필요하므로, 각각 함수끼리 데이터베이스에 접근하는데 있어서

마찰이 일어나지 않도록 pstmt를 함수 내에 작성한다.

-String SQL = "SELECT latestID FROM FROM LATEST ORDER BY latestID DISC;

->가장 내림차순으로 제일 마지막에 작성한 게시글ID를 가져오도록 하는 SQL문

-현재 연결되어 있는 conn.객체를 이용해서 SQL문장을 실행준비단계로 만들어준다.

PreparedStatement pstmt = conn.prepareStatement(SQL);

-실제로 사용했을 때 나오는 결과가 나오도록 작성

rs = pstmt.executeQuery();

-나온 결과에 1을 더해서 다음 게시글에 번호에 들어가질 수 있도록 한다.

if (rs.next()) {

return rs.getString(1) + 1;

}

-쓰이는 게시글이 없을 경우 결과가 나오지 않으니 첫 번째 게시물이라는 것을 1로 표기한다.

return 1;

-데이터베이스 오류가 발생했을 때 -1이 나오도록 한다.

사진

3) 게시글을 작성하는 write라는 함수를 작성한다.

5. writeAction.jsp를 만든다.

1)LatestDAO에서 데이터베이스에 접근할 수 있도록 한다.

2)게시글 제목 및 게시글 내용을 받아오는 설정을 한다.

사진

3)로그인 된 사람만 글작성 할 수 있는 구문을 작성한다.

4)제목과 내용을 작성하지 않았다면 메시지가 나오도록 한다.

5)작성한 제목 및 내용 그리고 userID를 받아오지 못할 경우 메시지가 나오도록 한다.

6)작성한 제목 및 내용 그리고 userID를 받아올 경우 main.jsp로 넘어가게 한다.

7)마주한 에러(글작성을 실패했습니다.)

java.sql.SQLSyntaxErrorException: Table 'jsp.latest' doesn't exist

사진

확인해본것

-writeAction페이지에서 나와주어야 할 메시지가 나오는지 확인. 나온다.

-LatestDAO내에 관련 함수에서 작성한 쿼리문 등 이상이 없는지 확인. 이상이 없다.

문제해결

JSP 데이터베이스 안에 테이블을 생성해 주었어야 했는데 밖에 따로 테이블을 만들어놓았기 때문에

jsp.table이 존재하지 않는다는 에러메세지가 나온 것이었다.

문제를 알게 된 이유

mysql내에 데이터베이스를 건너건너 다니다보니 에러메세지에서 힌트를 얻었다.

8)게시글이 데이터베이스 입력이 되었다.

아직까진 목록에 작성된 글이 보이지 않는다. 목록글을 보이도록 해주어야 한다.

글을 작성하고 글작성하기 버튼을 누른다.

작성한 게시글이 데이터베이스에 저장이 되었다.

아직까지는 작성한 글 목록 및 내용이 보이지 않는다.

다음에는 이 작업을 할 것이다.

게시판(커뮤니티발견)에 사용될 글들을 저장하고 관리할 수 있는 데이터베이스 구축을 해볼 것이다.

1. mysql에 접속해서 latest(커뮤니티발견/게시판)데이터베이스 테이블을 만들어준다.

사진

*latestAvailable INT에서

Available 이 1 이면 현재 삭제 되지 않은 글

0이면 삭제 된 글 로 관리하도록 한다.

primary key id를 넣어줌으로서

게시글 번호로 각각 게시글 데이터를 관리할 수 있도록 한다.

사진

2. latest 패키지를 생성하고 javabeans 클래스를 만들어준다.

-하나의 게시글 정보를 담을 수 있는 인스턴스를 만들기 위한 틀이다.

-데이터베이스 테이블과 흡사한 구조를 가짐으로서 전반적인 게시글을 하나를 관리할 수 있는 자바프로그램 개념이다.

3. 데이터베이스에서 만들었던 이름과 동일하게 만든 클래스내에 코드를 작성한다.

- 각각의 회원 정보들이 자바안에 담길 수 있게 된다.

4. jsp서버에서 사용할 수 있는 형태로 만들기 위해 getters setters를 선택한다.

-하나의 데이터를 관리하고 처리할 수 있는 기법을 jsp에서 구현하는 것을 자바beans 이다.

-회원가입 기능을 관리하기 위해 javabeans 클래스 만들고, DAO클래스를 만들었던 것과 같은 개념이다.

2,3,4번 사진

데이터베이스 구축 완료! 쉽다!

커뮤니티발견 페이지를 디자인 해보려고 한다.

하나의 표형태로 테이블을 만들어준다.

1. <table></table>

-> 테이블테두리부분을 작성한다.

->테이블자체는글의목록을보여주는기능만한다.

2. <thead></thead>

-> 테이블의제목가장윗부분

3. <tr></tr>

-> 하나의행 하나의줄

4. <th></th>

-> 속성

5.<tbody></tbody>

-> 글작성시실제로보이게될디자인을미리예상할수있도록만드는작업

6.<td> </td>

->내용작성

7.<a href="write.jsp" class="btn btn-primary pull-right"></a>

-> 글을쓸수있는화면으로넘어가게한다. -->

사진1

사진2

커뮤니티발견(게시판) 화면 완료

세션관리를 해본다

세션이라함은 현재 접속한 회원에게 할당하는 고유의 아이디이다.

웹서버는 한명의 회원을 세션아이디로 구분한다.

로그인이 성공했을 때 세션아이디를 부여해주는으로부터 세션관리가 시작된다.

1. loginAction 그리고 joinAction 페이지에 각각 로그인에 성공한 회원에게 세션아이디를 부여해보도록 한다.

joinAction.jsp에서

loginAction.jsp에서

2. 반대로 세션아이디 해지할 때는 로그아웃을 할 때에 세션아이디 해지를 한다.

3. 로그인 된 회원은 세션아이디를 부여받고 로그인여부를 확인할 수 있다.

   로그인한 회원은 로그인 페이지에 들어갈 수 없도록 회원관리/로그아웃이 보이도록 해주어야 한다.

4. 다시 접속하기가 우측상단으로 가지 않아 다시 html, css를 수정함.

-loginAction.jsp 및 joinAction.jsp 에 각각 작성한다.

 null 값을 지정하여 null이 아닐 경우에 로그인이 이미 되어 있습니다라는 형태의 코드를

 작성한다.

-Community based Project(main.jsp)로 각각 상황에 맞는 버튼이 보이도록 하기

 세션아이디를 부여 받지 않았을 때(로그인이 아닐 때)

 userID == null을 주어 로그인 회원가입 버튼을 누를 수 있게

 세션아이디를 부여 받았을 때(로그인인 상태일 때)

 userID != null을 줌으로 로그아웃만 누를 수 있게

5.마주한 문제

로그아웃을 해도 다시 로그인/회원가입이 보이는 접속하기버튼이 보이지 않는다.

로그아웃 부분을 logoutAction.jsp로 바꾸어주었다.

로그아웃 구문 위로 </div>로 되어 있어 로그아웃 구문까지 적용이 되지 않은 것 같아,

로그아웃 밑까지 </div>로 바꾸어 주었더니 해결 되었다.

6. 화면출력

이번에는 회원가입기능을 구축해 볼 것 이다.

DAO(Database Access Object)에서 mysql에 접근하는 try catch문이 있으며

로그인을 시도하는 함수코드를 작성해놓았다. 바로 밑에 회원가입 함수코드를 작성한다.

1. userDAO클래스에 추가적으로 회원가입을 시도하는

   join(회원가입)함수코드를 작성할 것이다. 함수를 작동하도록 user매개변수를 넣어둔다.

사진

2. 회원가입 양식에서 작성완료후 회원가입 버튼을 누르면 다음처럼 화면이 뜬다.

  아직 joinAction.jsp를 만들지 않았기 때문이다.

joinAction.jsp 페이지

3. joinAction.jsp에서 loginAction에서 jsp.Property에서 userID와 userPassword

  설정해주었던 것을 이번에는 회원가입양식에서 받아오는 데이터를 JPS로 설정해주기로 한다.

4. joinAction페이지에서 입력받은 아이디를 아이디, 비번, 이름, 성별, 이메일주소가

   입력이 안되었을 경우에 각각 입력이 안되었다는 메시지가 뜨도록 작성하고,

   userDAO 인스턴스를 생성하여 받은 데이터를 userDAO클래스를 통해 데이터베이스

   정보와 비교해서 아이디 중복인지를 확인하고 아닐 경우 회원가입이 완료되도록 만든다.

사진

5. 회원가입 화면 출력 및 각각의 상황에 맞는 메시지 출력확인

사진

사진

사진

완료!

로그인 기능을 구축해보았고 이젠 회원가입 join.jsp를 만들어볼 것이다.

1. 회원가입페이지 코드 작성

2. 화면 출력

이메일주소 잘못 입력시 메시지 및 표기

다른형태의 표기

다음은 게시판 데이터베이스 구축을 해 볼 것이다.

데이터베이스 설치 및 회원정보를 담을 수 있는 유저테이블을 구축하고 자바빈스로 유저클래스를 만들어주었다.

이제 실제로 로그인 기능을 구현해보려고 한다.

1. DAO 클래스를 만들어준다.

*DAO(Database Access Object)

jsp에서 회원 데이터베이스 테이블에 접근할 수 있도록 dao를 만들어주어야 한다.

데이터베이스접근객체의 약자이다.

실질적으로 데이터베이스에서 회원정보를 불러오거나

데이터베이스에 회원데이터베이스를 넣고자할 때에 넣을 때 사용한다.

2. java sql.connection 외부라이브러리를 추가 및 mysql 접속하도록 객체생성 한다.

사진

-Connection은 데이터베이스에 접근할 수 있는 객체를 의미한다.

-해킹기법으로부터 방어하기 위한 코드

-정보를 담을 수 있는 객체

3. conn 객체 안에 mysql 접속url, 아이디 비번 담기게 해주는 코드 작성을 한다.

4. 실제로 로그인을 시도하는 하나의 함수를 만든다.

-하나의 계정에 대한 로그인 함수를 만든다.

-유저아이디와 비밀번호를 처리할 수 있는 함수를 만든다.

-실제로 데이터베이스에 입력할 명령어를 sql 문장으로 만들어준다.

-try catch문장을 넣어서 예외처리를 할수 있도록 한다.

 예외가 발생한 경우 해당 예외를 return -2(데이터베이스 오류)로 출력할 수 있도록 한다.

사진

-sql 인젝션 해킹을 방어하기 위해 수단으로서 하나의 문장을 미리준비해서 ?를 넣음으로서

pstmt = conn.preparestatement에 정해진 sql을 문장을 데이터베이스에 삽입하는 형식으로 인스턴스를 가져온다.

pstmt.setstring(1, userID);

그 물음표에 해당하는 내용을 USERID를 물음표에 들어가게 한다.

매개변수로 들어오는 USERID를 물음표에 들어갈 수 있게 한다.

데이터베이스에 사용자 아이디를 입력받아서 실제 존재하는지 비밀번호는 무엇인지를 파악하고 가져온다.

rs.next(결과를 담는 객체)에 결과가 데이터베이스에 아이디가 없으면 -1

아이디가 있으면 로그인 성공의 return 값인 1에 해당하는 메세지 출력이 된다.

사진

5. loginAction.jsp 페이지를 만든다. (사용자 로그인 처리 페이지를 만든다.)

-<%@ page import="user.UserDAO" %>

(작성한UserDAO 클래스를 가져오기 위해서 작성)

-<%@ page import="java.io.PrintWriter" %>

(java io에잇는자바스크립트를작성하기위해서작성)

-<% request.setCharacterEncoding("UTF-8"); %>

(건너오는데이터를UTF-8로받게하기위해작성)

JavaBeans를 활용해서 한명의 회원 정보를 담는 유저라는 클래스를 JavaBeans로 사용한다.

<jsp:useBean id="user" class="user.User" scope="page"/>

-> 현재페이지내에서자바beans가사용되도록한다.

<jsp:setProperty name="user" property="userID" />

-> 한명의사용자의userID를로그인페이지에서받아서넘겨주는역할

<jsp:setProperty name="user" property="userPassword" />

-> 한명의사용자의비번을로그인페이지에서받아서넘겨주는역할

*공부를 하다 보니 객체와 인스턴스의 차이가 애매한 것 같아 찾아 보았다.

객체(Object) 및 인스턴스(Instance) 클래스의 타입으로 선언되었을 때 객체라고 부른다

그 객체가 메모리에 넘어가서(할당될때에) 사용될 때 인스턴스라고 부를 수 있다.

객체는 실제적인 실체, 인스턴스는 넘어가서 받아서 사용된다는 연결/관계에 초점을 맞춘다.

객체를 클래스의 인스턴스라고 불리기도 한다.

6. mysql에 접속하기 위한 드라이버를 프로젝트에 추가 해준다.

msql jdbc driver = mysql과 jsp를 연결할 수 있는 드라이버

사진1 다운로드

사진2(mysql 커넥터 압축풀기 및 복사하여 붙여넣기)

사진3 (mysql 드라이버 정상연결 과정)

7. 로그인 시도시 자꾸 -2 데이터베이스 에러가 난다.

아이디와 비번을 다시 맞추어서 작성했는데도 불구하고 데이터베이스에러가 보인다.

에러내용

Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value '????α is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the 'serverTimezone' configuration property) to use a more specifc time zone value if you want to utilize time zone support.

찾아보니 하기의 것으로 서버 타임존 과 관련된 dbURL을 해주어야 한다고 나옴

타임존이 별도로 지정 되어 있지 않아서 설정을 해주어야 한다고 함.

1) JDBC URL의 문자열에 서버타임존 정보를 추가한다.

->String dbURL = "jdbc:mysql://localhost:3306/JSP?serverTimezone=UTC";

나는 첫 번째 방법을 사용했다.

2) 서버에서 직접 기본설정을 하기 해준다.

[mysqld]

default-time-zone='+8:00'

수정내용

8.로그인 성공 그리고 각각의 상황에 맞는 메시지가 나온다.

사진

사진2

회원데이터베이스 구축을 위해 mysql설치를 한다.

1. MYSQL설치 (다운로드의 커뮤니티서버를 운영체제에 맞는 인스톨러를 설치한다)

설치중1

설치중2

설치중3

설치중4

2. 회원데이터베이스구축

3. 만들어진 회원 데이터를 jsp서버에서 담고 처리할 수 있도록 한다.

-Java Resources로 src에 user라는 이름으로 패키지 만든다.

-user 패키지내에 User라는 이름으로 클래스를 만든다.

-데이터베이스에서 만들었던 이름과 동일하게 만든 클래스내에 코드를 작성한다.

=> 각각의 회원 정보들이 자바안에 담길 수 있게 된다.

jsp서버에서 사용할 수 있는 형태로 만들기 위해 getters setters를 선택한다.

사진1

사진2

*getters setters를 눌러 함수를 만들었다.

한명의 데이터를 다룰 수 있는 데이터베이스 및 자바beans가 완성이 됨

하나의 데이터를 관리하고 처리할 수 있는 기법을

jsp에서 구현하는 것을 자바beans라고 한다.