싸이월드 프로젝트 1,2번 기능(자기소개, 메인화면 수정)

먼저.. 이 프로젝트는 미완임을 밝힙니다. (사유 : 실력부족 )

사용한 프로그램은 eclipse jsp 와 MySQL Workbench 입니다.

​

깃허브에 있는 싸이월드를 HTML 과 CSS 로 구현하신 분의 틀을 가져와서

기능만 추가해보는 형식이였습니다.

https://github.com/joseph-106/2021_MINI_HOMEPAGE

joseph-106/2021_MINI_HOMEPAGE

HTML과 CSS로 미니홈피를 구현하는 프로젝트. Contribute to joseph-106/2021_MINI_HOMEPAGE development by creating an account on GitHub.

github.com

(다른 분들이 어떤 기능을 구현했는지에 대한 설명은 없으며, 제가 맡은 기능만 설명하겠습니다.)

​

​

저는 홈 화면을 맡았습니다.

기능해야 했던 구현으로는

1. 사진첨부 수정, 자기소개 수정

2. 메인화면 이름 수정

3. 최신 업데이트 된 항목 보여주기, 총 게시판 수 보여주기

4. 사진첩 사진 보여주기

5. TODAY() TOTAL() 기능

6. 일촌평 댓글 작성 기능

입니다.

1번의 사진첨부와 4번같은 경우는 기능구현을 하지 않았고(다른 팀원과의 연결을 위해서),

1번의 자기소개 수정, 2,3,5,6 번은 완벽하진 않지만 구현하였습니다.

​

[1. 자기소개 수정]

​

※ 설명하기에 앞서 내가 구현한 자기소개 수정 기능의 문제점

제가 구현하고 싶었던 것은 사용자의 userid 에 따라 서로 다른 자기소개 화면을 보여주고 싶었습니다.

그러나, userid 를 parameter로 받아와 set.Attribute를 하는과정에서 디버깅 결과,

계속 null을 가리키는 것을 확인하였고 풀지못했습니다..

​

1. 자기소개 수정하기 Button을 클릭했을 때, 자기소개를 작성하는 화면으로 이동해야 합니다.

1) home.jsp 에 Button 을 추가합니다.

<input type="button" style="float:right" value="자기소개 수정하기"

onclick="location.href='introduceWrite.do'"></span>

home.jsp 자기소개 수정하기 Button 추가

2) Button 을 클릭했을 때, introuduceWrite.do 화면으로 이동해야 하므로 property에 해당 경로를 설정합니다.

/board/introduceWrite.do=main.command.introduceWriteHandler

​

(1) 저는 기능 구현이 목적이였기에 board 밑으로 경로를 두었습니다.

즉 자기소개를 작성하는 화면이 board/introduce.jsp 에 있어야 함을 의미합니다.

또한, 보여주는 화면이 /board/list.do 이므로 /board/introduce.jsp 도 같은 맥락이어야

하지 않을까하여 경로를 선정하였습니다.

WebContent/property/commandHandlerUri.properties 에 introduceWrite.do 경로 추가

Button 생성

2. Button이 만들어졌습니다. 이제 Button을 눌렀을 때 보여지는 자기소개 작성화면인

/board/introduceWrite.do 즉, introduce.jsp를 작성합니다.

1) 자기소개서는 길기때문에 textarea 로 선정하였고, 100글자 미만으로 작성하도록 유도하였습니다.

적을 때마다 몇글자씩 남았는지 숫자를 확인해줘야 하므로(뷰) introduce.jsp의 javascript로 추가하였습니다.

https://smilerici.tistory.com/35

 

[javascript] 글자 수 제한 및 체크하기

javascript로 입력란에 글자 수를 바이트 단위로 세고, 제한하는 방법을 작성하겠다. 아 참고로 바이트가 아닌 글자 수로 제한하고자 한다면 입력 태그에 maxlength 속성을 추가해주면 된다. 영어와 한글은 차지하..

smilerici.tistory.com

2) 자기소개서를 입력하고 DB에 저장될 때는 userid 도 같이 저장되야합니다.

기능구현에는 실패했지만, 유저별로 다르게 보여주기 위함입니다.

그러므로 input type hidden으로 userid를 넘겨줍니다.

구글링해서 가져온 코드입니다. 한글은 2Byte, 영어는 1Byte 이므로 200Byte는 100글자입니다.

글자수를 늘리거나 줄이고 싶다면, MAX_MESSAGE_BYTE 의 숫자를 수정하여 주면 됩니다.

글자수가 넘었다면 경고창이 나옵니다.

자기소개서 작성화면

DB에 잘 들어가는 지 확인

※ 자기소개서를 담는 DB Table 을 생성할 때, ipno 를 auto increment로 해주어야 합니다.

그 이유는 userid 에 따른 자기소개서들을 정렬하여 가장 최근에 작성된 것을 가져올 텐데,

ipno를 기준으로 desc(내림차순)하여 limit 0,1로 가져오기 때문입니다. (introudeDAO 에서 설명)

​

3. m_introduce, introduceDAO, introduceVO 를 하지 않고서는 2번의 결과를 확인할 수 없습니다.

(테이블 만드는 과정은 간단하므로 생략합니다.)

1) introduceVO

(1) m_introduce의 데이터를 set 하고 get 하는 main.dto.introduceVO.java(클래스)입니다.

ㄱ) VO 클래스를 작성 시 DB 에 저장되어있는 칼럼과 동일한 명으로(대소문자까지)하시는 것이 좋습니다.

main.dto.introduceVO.java

2) introduceDAO.java

(1) introduceVO 가 가져온 데이터 값(Value Object)을 다루는 introduceDAO(Data Access Object)

클래스입니다.

제가 만들었던 기능은 자기소개 작성(insert)와 자기소개서 최신 것 가져오기(selectIntroduce)밖에

없으므로 두 가지의 메소드를 추가합니다.

​

※ 제가 구글링하여 정리한 PreparedStatement와 Statement 의 차이입니다. 참고하시면 좋을 듯 합니다.

https://blog.naver.com/tnwnsrla/222383436820

 

JSP, PreparedStatement 와 Statement 의 차이

Statement 와 PreparedStatement 는 SQL을 실행할 수 있는 객체인데, JSP 를 배우면서 어쩔 때는 ...

blog.naver.com

(2) selectIntroduce() 의 sql 문

ㄱ) SELECT introduce form m_introduce order by ipno desc limit 0,1;

- m_introduce 테이블로부터 introduce 속성을 가져오는데, 이 때 ipno(PK)를

내림차순(높은 숫자가 위로) 하여 0번째부터 1개를 가져온다는 의미입니다.

즉, 가장 최신의 introduce 를 가져온다는 의미입니다.

introduceDAO.java

​

4. introduceDAO.java 로부터 선택된 Data 들을 다뤄(Handler) ControllerUsingUrI.java 로

데이터와 uri 를 제공하는 introduceWriteHandler.java 클래스를 생성합니다.

1) Post 메소드를 활용하며, 버튼을 눌렀을 때 싸이월드 미니홈피 메인화면으로 이동해야 하므로

sendRedirect 로 list.do 로 이동하라고 하였습니다.

introduceWriteHandler.java

​

[2. 메인타이틀 이름 수정]

메인타이틀 이름 수정은 자기소개서(1) 과 동일한 과정입니다.

자세한 설명은 생략해도 무방할 정도로 매우 비슷합니다.

1. home.jsp 에 타이틀을 보여주는 코드를 추가합니다.

1) c:forEach 로 mainList(items)를 main(var)라는 이름으로 각 속성(DB 칼럼)의 값을 찍어내는데,

mainTitle 만 필요하므로 main.mainTitle 만 보이게 한 것입니다.

2) main.mainTitle 이 null 일 때 '기본 타이틀'이라는 글씨를 보여주고 싶으므로 c:forEach 문 밖에,

mainList가 null 일 경우의 상황을 <c:if>로 가정합니다.

(1) c:forEach 안에서 main.mainTitle 이 null 인 상황을 가정해보고 코드를 작성하였는데, 안됐었습니다.

해당 이유는 링크를 참고하십시오.

https://blog.naver.com/tnwnsrla/222399013096

mainList가 비었을 때, 즉 Title 이 비었을 때 기본타이틀이 나오는 것을 확인할 수 있습니다.

그러나, 다른 아이디로 로그인하였을 때, 다른 사용자가 입력한 Title이 DB에 저장되어있으므로,

사용자별로 title을 가져오는 작업이 필요합니다. 안그러면 다른 사용자 title이 나오기 때문입니다.(실패한 부분)

2. 기본타이틀을 눌렀을 때 보여주는 화면인 maintitleWrite.jsp,

타이틀의 DB를 다뤄주는 mainDAO, mainVO,

해당 정보를 URI 로 띄우도록 데이터를 다뤄주는 mainWriteHandler.java를 만듭니다.

( 작동원리가 자기소개와 똑같으므로 사진만 첨부하겠습니다.)

maintitleWrite.jsp

mainWriteHandler.java

mainDAO.java

mainVO.java

​