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

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

 

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에서 userIDuserPassword

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

 

 

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

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

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

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

 

사진

 

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

 

사진

 

사진

 

사진

 

완료!

+ Recent posts