웹페이지 제작 연습 하기.
>>
1) 로그인 하기.
2) 사용자가 써놓은 글을 출력 하는 게시판.
3) 로그인을 해야지만 글 작성 가능 하도록.
4) 그 외에 이것저것 추가 해보기.
(Controller 파트 분리 하지 않음)
1.
a.jsp
1)
해당 페이지에서, ArrayList 가 사용될 예정이라, import 한 모습 이다.
1)
로그인 하고 나서, session이 "mid"의 값을 get 하는 상황.
2)
session이 "mid" 속성의 값을 get 할건데, 그게 null 이면,
로그인이 되어있는 상태가 아니니까,
로그인을 진행하도록 사용자에게 창을 보여주기.
사용자가 로그인 버튼을 누르면 (submit) post 방식으로, b.jsp 로
사용자가 입력한 데이터들이 전송 된다.
b.jsp 에서는 session 주체가
a.jsp 에서 form 태그 내부에 input 태그에서
사용자로부터 입력받은 속성값을 session이 set 할 예정 이다.
3)
session이 "mid" 속성의 값을 get 할건데, 그게 null 이 아니라면,
즉, 로그인이 되어있는 상태 라면,
로그인 하라고 창을 보여줄 필요가 없다.
그래서, 프론트 로직이,
if - else 문으로 구성 되어 있다.
로그인이 되어있는 상황이면,
oo님 환영 합니다. 라고 보여주기 위해서,
표현식을 사용해서 "name" 속성의 값을 사용하는 모습이다.
이게 가능한 이유는, b.jsp 에서,
mVO 객체를 인자로 넣어서, selectOne() 을 하고,
유효하다면 (중복 검사를 통해)
일치하는 회원의 데이터를 mVO 객체로 return 한다.
그러면, 해당 페이지에서는,
mVO 객체가 가지고 있는 모든 멤버변수 (속성) 을 get 할 수 있게 되니까,
session 주체가 mVO.getName() 을, set 함으로써,
a.jsp 에서 name 속성의 값을 get 할 수 있는 것이다.
4)
또한, 로그인이 된 상황이면, 로그아웃도 할 수 있어야 하니까,
로그아웃을 할 수 있는 페이지를 a태그로 해놓은 모습이다.
d.jsp 는 로그아웃 페이지 이다.
5)
로그인이 된 상황이여야, 글을 작성할 수 있으니까,
else문 안에 글 작성을 할 수 있도록 form 태그가 있는 모습이다.
글 작성 페이지는 c.jsp 로 해놓았고,
c.jsp 에서 사용자가 입력한 값 (글) 을 get 해야 하기 때문에,
name 속성의 값을 "letter" 로 지정해서 보내는 모습 이다.
c.jsp 에서 "letter" 속성을 get 할 예정이다.
1)
content 라는 id 값을 가진 div 태그 내부 이다.
스크립트 릿 내부에, if - else if 문이 있는 모습 이다.
사용자도 글을 삭제할 수 있는 기능을 만들으려 했지만,
그냥, 관리자만 글을 삭제할 수 있도록 기능을 만들 었다.
-----------------------------------
사용자가 글을 삭제할 수 있는 기능을 만들으려면,
다른 사용자의 글을 삭제하면 안되니까,
작성된 글이 로그인한 회원의 글이라면 !
해당 글을 삭제할 수 있도록 로직을 구현 해야 할듯 하다.
생각을 좀 해봐야 할듯 ?
1)
설계상, 글은 VO 클래스를 따로 구현해서 만들진 않고,
jsp 내부에서 구현해 놓았다.
2)
application 주체가 get 하는 모습이다. "datas" 라는 속성의 값을.
get 한 값은 object 타입의 데이터 이기 때문에,
ArrayList<String> 배열리스트에 넣기 위해서,
형변환을 해주는 모습 이다.
(request.getParameter() 한 데이터는 String 타입인데,
getAttribute()는 데이터 타입이 object 타입이다.)
(잘 모르겠으면, ctrl + space 눌러서 확인하면서 하면 된다.)
3)
해서 datas 즉, 글이 없으면, for문을 못돌리니까,
datas == null 이야 ?
그러면 글이 없습니다. 라고 보여주고,
글이 있으면,
글을 보여주게 된다.
2.
b.jsp
1)
1번 라인은 왜 import 된지 모르겠음..
2)
b.jsp 페이지는 로그인 페이지 이므로,
a.jsp 페이지에서 보내준 데이터를 사용해서,
DB에 존재하는 회원 정보와 중복검사를 진행해서,
유효한 회원 이면 로그인 OK
유효하지 않은 회원이거나, 비밀번호가 다르면 로그인 X 이다.
그래서, 객체를 사용하기 위해 useBean 액션태그를 사용한 모습을 볼 수 있다.
또한, useBean 액션태그는 객체 선언만 된 상황이기에,
객체를 사용하려면 setter을 호출 해야 하고, setter을 호출 해주도록 하는 액션태그가,
setProperty 액션 태그 이다.
1)
유효하지 않은 회원 이거나,
비밀번호가 다르면,
selectOne()은 null을 보내 준다.
그러면 mVO 참조변수가 null을 받았기 때문에,
mVO == null 이야 ?
그러면, 로그인 실패라고 alert 해줘 ~ 이다.
2)
로그인에 성공하던, 실패하던 a.jsp로 다시 페이지 이동을 해야 하기에,
처음에 response.sendRedirect를 했는데,
얘를 하니까,
이렇게 유효하지 않는 아이디를 입력했는데,
로그인 버튼을 누르면, alert가 뜨지 않는 현상이 발생 했다.
왜 그런가 하고 보니까,
response.sendRedirect("a.jsp") 를 하면,
브라우저가 b.jsp를 읽기도 전에,
a.jsp로 보내버려서 발생하는 이슈 였다.
이 개념은 아래와 같다.
out.println으로 작성되는 모든 페이지들은 (모든 프론트들은),
브라우저에서 실행된다. 왜 ?
주체가 브라우저 (크롬, 엣지, ..) 이다.
결론은, a.jsp 페이지로 보내기 위해서,
location.href 를 사용 했다..
3)
mVO가 null 이 아니였다면, 즉, 유효한 회원이고 올바른 비밀번호 였다면 ~
session 주체는 mid와 name 속성을 set 한다.
로그인한 회원의 정보를 session이 가지고 있어야 하니까 ~
mid와 name 속성을 set 한 모습이고,
만약에 마이페이지 같은 것을 만들어서,
비밀번호 변경 같은 기능을 만든다 하면,
mpw 속성도 set 해서 사용 하면 될듯 하다.
3.
c.jsp
해당 페이지는 글 작성 페이지 이다.
1)
8번째 라인은 다음과 같다.
application 주체가 datas 라는 속성의 값을 get 할거야 ~
그리고 그 데이터를 ArrayList<String> datas 에 넣을 거야 ~
설계상,, 글을 DB에 저장해놓진 않았고,
JSP 에서 ArrayList가 가지고 있게 했다.
근데,
로그인과 다르게,
글은 로그아웃을 하던, 로그인을 하던 계속 유지되어야 하니까,
주체를 session 이 아니라, application 으로 한 개념이다.
8번째 라인을 이해 하려면,
17번째 라인 쪽을 봐야 한다.
일단,
datas가 null 이야 ?
즉, 글을 담아놓는 DB역할을 하는 배열리스트가 없어 ?
그러면 새로운 배열리스트를 생성해줘 ~ 라는 코드 이고,
그리고 나서,
application 주체가 set을 한다.
어떤 것을 ?
datas 라는 속성의 속성값을 ~
datas라는 속성은 글 목록을 담아놓는 배열리스트 이고,
속성의 값은 datas 라고 주었다.
즉, application 주체가 글의 목록을 set 한다는 의미 이다.
이 c.jsp 페이지에 들어올 때마다,
8번째 라인의 ArrayList<String> datas는
application이 가지고 있는 글 목록 데이터를 받게 된다.
이렇게 할 수 밖에 없는 이유가,
application 주체 특성상, 서버가 종료되기 전까지 데이터를 들고 있기 때문이다.
2)
11번째 라인은 다음과 같다.
a.jsp 에서 사용자가 form 태그 내부에서 input 태그 안에서 작성한 글의
데이터가 전송 되어 c.jsp에 도착 하는데,
form 태그로 보낸 데이터 이기에,
request.getParameter() 로 받는다.
데이터를 name = "letter" 로 보냈기 때문에, "letter" 을 get 할 수 있다.
누가 작성한 어떤 글인지를 표현하기 위해서
session 주체가 가지고 있는 name 속성을 사용한 모습이다.
얘네를 모두 String 타입의 letter 변수에 대입한다.
왜냐하면 이것을 아래서 사용하려고 ~
3)
배열리스트 datas에 add() 한다.
무엇을 ?
String 타입의 letter 을 ~
add(0,letter) 은 사용자가 입력한 글을 항상 맨 위에 보여주기 위함 이다.
(배열리스트 특성상, 0번째 인덱스에 값을 밀어 넣으면, 기존에 있었던 아이들은
알아서 한칸씩 밀리게 된다.)
4)
글 작성이 성공 했다면,
alert를 해주는 모습이다.
5)
마찬가지로, location.href 로 페이지 이동을 진행한다.
4.
d.jsp
로그아웃 페이지 이다.
1)
로그아웃 기능만 실행 하면 되니까,
== 사용자에게 무언가 보여주는 일이 없으니까.
<html> </html> 영역은 필요 없다.
2)
로그아웃은 session 주체가 "mid" 속성의 값을 remove 하면 된다.
또는,
session.setAttribute("mid",null) 로 작성 해도 된다.
3)
response.sendRedirect 로 a.jsp (메인화면) 으로 보내주는 것을 확인 할 수 있다.
여기도, alert 를 통해 로그아웃 되었습니다 !
등을 보여주고 싶으면,
<script> 태그로 감싸서,
location.href 를 사용했을 것이다.
5.
e.jsp
해당 페이지는 모든 글을 삭제하는 페이지로 만들어 보았다.
사용자에게 무언가 보여줄게 없어서, 글 삭제를 할 수 있는 기능만 구현되어 있는 모습 이다.
1)
application 주체가 datas 라는 속성의 값 을 가지고 있다.
datas가 뭐냐면, String 타입의 배열리스트.
== 글을 담아놓은 배열리스트 (DB 역할을 하고 있는 배열리스트)
2)
datas 라는 속성의 값을 remove 하면 글을 모두 지우겠다는 의미 이다.
3)
alert 를 사용 하기 위해서, location.href 를 사용한 모습도 볼 수 있다.
해보니까, 저렇게 사용하지 않고,
아래와 같이 해도 된다.
9번째 라인 처럼 ~~~
out.println("<script>location.href = 'a.jsp'</script>");
6.
f.jsp
해당 페이지는 원하는 글을 삭제할 수 있는 페이지 이다.
기능을 구현한 페이지가 아니라,
관리자로부터 삭제할 글을 입력받아서,
g.jsp 로 데이터를 전송 하는 페이지 이다.
1)
관리자로부터 삭제할 글의 번호를 입력 받는다.
g.jsp 에서, 관리자가 입력한 번호를 get 하기 위해서,
name = "letterNum" 이라고 지정해 주었다.
2)
관리자가 submit을 하면 (글 삭제 하기 버튼), "letterNum" 의 값이 전송 된다.
3)
application 주체가 들고 있는 글 목록을 관리자에게 보여주기 위해서,
구현한 로직 이다.
a.jsp 에 있는 글목록 출력 로직과 동일 하다.
7.
g.jsp
1)
기능만 구현하면 되는 페이지 이기 때문에,
마찬가지로 <html> </html> 영역이 없다.
2)
application이 들고 있는, datas를 get 해서,
ArrayList<String> datas에 넣는다.
앞에서도 계속 이런식으로 코드를 작성했었다.
왜 ?
application 특성상, 서버가 꺼지기 전까지 데이터를 가지고 있으니까, 페이지 마다의
ArrayList<String> datas 에 데이터를 저장 해주는 것.
자바의 문법을 사용하기 위해서라도,,
3)
관리자가 보내준 letterNum 값을 형변환을 해야 한다.
왜냐하면 전송된 데이터는 String 타입이니까 ~
형변환을 해서, Integer 타입의 letterNum 이라는 변수에 저장 해주고,
datas.remove(letterNum - 1); 을 통해 해당 글을 삭제 한다.
-1을 하는 이유는 인덱스는 0번 부터 시작하니까 그런것 이다.
4)
글 삭제에 성공하면, alert 를 해주는 모습이고,
메인 페이지로 돌아갈 수 있도록 location.href 를 사용 했다.
//
여기서 글 1개 삭제 하고, 메인 페이지로 안가고 또 삭제 하고 싶으면,
if 문 등으로 조건을 주던지,
프론트 코드를 선택지를 주는 식으로 해야 할듯 하다
생각을 해봐야 할듯..?
글 전체삭제 | 글 한개 삭제 가 보인다.
'Front-end (국비) > 이론' 카테고리의 다른 글
| JSTL 이란 ? (0) | 2023.07.04 |
|---|---|
| 23.06.29 수업 정리 3 (JSP / Java Server Pages) (0) | 2023.06.29 |
| 23.06.29 수업 정리 (JSP / Java Server Pages) (0) | 2023.06.29 |
| 내장 객체 (0) | 2023.06.29 |
| 23.06.28 수업 정리 2 (JSP / Java Server Pages) (3) | 2023.06.28 |