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

 

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개내의 글의 수만 있다면 다음페이지가 보이지 않게 한다.

-booleantry 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)위의 DAOarraylist를 가져오기 위한 jsp 설정

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

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

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

바꾸어준다.

 

사진

 

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

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

 

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

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

 

 

다음버튼

 

이전버튼

세션관리를 해본다

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

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

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

 

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. 화면출력

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

 

 

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

 

 

2. 화면 출력

 

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

다른형태의 표기

 

 

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

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

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

 

설치중1

 

설치중2

 

설치중3

 

설치중4

 

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

 

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

-Java Resourcessrcuser라는 이름으로 패키지 만든다.

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

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

 

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

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

 

사진1

사진2

 

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

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

 

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

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

'신입개발자로 취업하기까지 > JSP게시판' 카테고리의 다른 글

6. 회원가입기능 구축  (0) 2020.08.19
5. 로그인 화면  (0) 2020.08.19
4. 로그인 기능 구현하기  (0) 2020.08.19
2. 홈화면 및 로그인 화면 구축  (0) 2020.08.19
20200707 1.환경설정  (0) 2020.07.08

index.jsp

모든 웹사이트의 기본이 되는 첫 시작페이지는 index페이지라고 한다.

네이버에서도 www.naver.com/index.html 에 실제로 접속한 것이라고 볼 수 있다.

 

1. index.jsp에서 로그인 화면으로 이동해라라는 구문을 작성

-location.href = 'login'.jsp; 를 작성 후 실행

-http 404 메시지 나옴(아직 옮겨갈 페이지 login.jsp가 없다는 의미)

-일단 최근에 많이 쓰이는 인코딩언어를 UTF-8로 바꾼다.

 

*link를 간단하게 설명하면 말 그대로 '외부에 있는 문서를 연결해준다.' 라는 뜻

*<link rel="stylesheet"> 스타일 시트로 css파일을 불러오기 위한 연결설정

 

2. loin.jsp 파일을 만든다.

-index.jsp 안에 기본구문을 같게 한다.

-로그인 디자인부터 만든다.

 

*부트스트랩은 bootstrap-3.3.7버전으로 다운 받았다.

압축풀기 및 폴더를 WEB CONTENT 안으로 폴더를 옮긴다.

 

*부트스트랩은 컴퓨터/핸드폰 등 어느 것으로 접속을 해도 해상도에 맞게 알아서

디자인이 환경에 맞게 변경된다. 그래서 하기처럼 meta구문작성

 

-반응형 웹에 사용 되는 메타택 즉 <meta>구문 추가

 

 

3. 애니메이션을 담당할 자바스크립트를 작성한다.

-제이쿼리를 특정 홈페이지에서 가져오도록 작성한다.

(jquery를 특정 홈페이지에서 가져오고 자바스크립트 참조하겠다는 구문작성)

 

-부트스트랩 안에 자바스크립트파일을 참조하겠다라고 작성을 한다.

(stylesheet를 참조 및 css안에 bootstrap.css를 참조하겠다는 구문 작성)

 

자바스크립트 및 부트스트랩 참조 구문 사진출력

 

4. 네비게이션 구성 및 버튼 구성

nav bar default 클래스를 작성한다. 하나의 웹사이트에 전반적인 구성을 보여 주는 개념이다. 그리고 홈페이지에 로고를 담는 영역 header구문에 속하는 버튼영역구문을 작성한다.

 

 

헤드 버튼영역구문 코드 사진

 

화면을 줄이면 아이콘 세 개 적용한 메뉴바 출력

 

5. 탑메뉴에 최신이야기 및 커뮤니티추천 그리고 우측상단버튼에 접속하기만 있도록 할 것

   접속하기 버튼에 로그인 및 회원가입 버튼 있도록 설정하기

 

탑메뉴 및 접속하기 버튼 코드변경

#바꿔본 것

다음과 같이 화면이 안줄어들어도 우측상단 버튼이 보이도록 코드를 수정했다.

 

홈화면출력

 

6. 로그인 페이지 작성

-로그인화면

-아이디/비밀번호 폼

-로그인버튼(submit버튼)

-로그인 아이디/비번 입력란

 

 

로그인버튼을 누르면 아직 내용이 없기 때문에 다음과 같은 화면이 나온다. 입력후 loginAction페이지 까지 확인

 

 

'신입개발자로 취업하기까지 > JSP게시판' 카테고리의 다른 글

6. 회원가입기능 구축  (0) 2020.08.19
5. 로그인 화면  (0) 2020.08.19
4. 로그인 기능 구현하기  (0) 2020.08.19
3. 회원 데이터베이스 구축  (0) 2020.08.19
20200707 1.환경설정  (0) 2020.07.08

JSP 게시판 프로젝트를 위한 환경설정

 

JSP란

-Java Server Page

<위키백과 참조>

자바 서버 페이지는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다. Java EE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다.

 

1. JDK 설치

-다운로드 및 설치

 

-자바프로그램 작동을 위해서 환경변수 설정

-운영체제에 맞는 윈도우64bit jdk 다운로드(미리 다운로드)

-자바로 작성된 jsp를 작동할 수 있는 jsp용 웹서버인 tomcat 설치를 한다.

 

2. tomcat설치 및 구동

-tomcat 다운로드 및 압축풀기

 

-tomcat 수동으로 구동 

*설치된 tomcat안에 bin 폴더안에 restart 배치파일(startup)

cmd에서 해당경로에서 startup.bat 명령어를 엔터후 실행시킴으로

 

localhost로 웹서버 작동확인

사진

 

일일이 구동하기 힘드니 웹사이트개발환경

즉 전반적인 것을 관리하는 통합개발환경 이클립스를 설치한다.

 

3. 이클립스 설치(미리다운로드함)

-이클립스 다운로드

-Java EE로 설치

*자바 EE는 자바 SE 플랫폼을 기반으로 되어 있다. 

 자바 EE에서 대규모, 다계층, 확장성, 신뢰성, 보안 네트워킹 어플리케이션의 개발과 실행을 위한 API 그리고 환경을 제 

 공한다.

 

4. 프로젝트(Dynamic web project) 생성 및 tomcat 연동

-new->Dynamic web project 클릭

-New runtime에서 tomcat 버전 설정 및 tomcat설치된 경로 설정

 

 

5. web content

-다양한 웹페이지 저장/브라우저를 통해 페이지에 접속해서 내용을 볼 수 있다.

-new -> index.jsp 파일을 만든다.

 

-index.jsp파일을 구동한다. (finish클릭)

-hello world 출력

 

기본환경설정 완료

+ Recent posts