ATM Project

https://github.com/vvuru/atm_Final

 

1. 기획

 

 a. 아이디어

 

https://asked.kr/Wuru42

페이스북 익명질문

 

asked라는 익명질문 페이지가 있는데 커뮤니티 기능도 있는 app에 비해 웹사이트는 기능이며 디자인도 조금씩은 부족해보였습니다. 재밌는 웹사이트라 기능들을 조금 보완하여 만들어보기로 하였습니다.

 

 b. 설계

 

사이트 전체적으로 칙칙한 푸른색 => 깔끔한 민트색으로 변경

일러스트레이터를 이용하여 스토리보드 작성

 

 

만들어야 될 페이지 구상

 

 

데이터베이스 설계 ( mariaDB [ MYSQL ] 이용 )

 

 

역할분담

I. 회원가입, 로그인, 이용약관 + 알림

II. 메인 1( 답변완료 ), 메인 2( 새질문 )

III. 나머지

 

 

2. 프로젝트 당시 사용한 기술스택

 

html5 , css3 , non-oop PHP ( legacy )

 

 

수강 한달 뒤쯤 시작했던 프로젝트라 자바스크립트도 배우지 않았습니다. ( 그냥 따라치는 정도? )

프레임워크, 라이브러리 하나 없는 순수 php로 작업하였습니다.

 

 

3. 기능 소개 

 

 

 a. 회원가입

 

 

비밀번호 오기입 방지 차원으로 비밀번호 확인을 넣어 주었습니다.

그리고 이름보다는 닉네임이 익명 사이트 컨셉에 맞다고 생각했습니다.

아이디가 있는 경우엔 ' 돌아가기 ' 버튼을 클릭하여 로그인 페이지로 갈 수 있도록 하였습니다.

닉네임과 이메일, 비밀번호를 기입 후 회원가입을 누르면 DB에 정보가 저장되고 로그인 페이지로 이동됩니다.

 

 

 b. 로그인

 

 

로그인 시 DB 내 유저 데이터와 비교하여, 이메일 및 비밀번호를 체크하는 기능을 도입했습니다.

자바스크립트 alert 기능을 배우기 전이라 이메일이 틀렸을 경우엔

비밀번호가 틀렸을 경우엔

 

echo를 이용하여 메세지를 표시해주었습니다.

로그인 성공 이후, Session을 이용하여 유저 관련 정보가 저장되고 해당 유저 피드( 마이페이지 ) 로 이동합니다.

 

 

 c. 메인페이지( 피드 )

 

 

로그인에 성공하면 자신의 피드로 이동하게 됩니다. 주소 뒷부분 ?i_user='x'에서

'x'의 값을 바꿔서 접속하면 다른 사람의 피드로 이동할 수 있습니다.

 

 

6은 로그인 한 유저의 i_user값이고 localhost/~의 i_user=1은 현재 들어가 있는 피드 주소입니다.

닉네임이 있는게 더 자연스러울 것 같았지만 pk값인 i_user를 띄우는게 낫다고 판단했습니다.

 

i_user=6의 '융2'라는 유저가 i_user=1의 '우루4'라는 유저 피드에 접속한 모습

 

 

로그인하지 않고 남의 피드에 가게되면 이렇게 뜹니다

 

 

좌측 상단엔 atm 기본 프로필 사진과 '익명' 이라는 이름으로 뜨게 됩니다.

그리고 css를 이용하여 하단 푸터의 모든 기능을 사용할 수 없도록 했습니다.

 

로그인을 하지 않아도 질문등록은 됩니다. 하지만 답변완료 탭의 질문이나 답변을 클릭하면 로그인이 필요하다고 뜨게 하였습니다.

 

 

 

 

 

 

질문 작성 후 질문하기를 클릭하면 새질문 탭에 등록이 됩니다.

 

 

질문에 대한 답변은 피드 주인만이 할 수 있습니다. 삭제 또한 마찬가지입니다.

 

i_user=1인 '우루4'로 로그인해서 보면

 

 

우측에 x버튼을 클릭해서 삭제도 가능하고 질문을 클릭하여 답변등록도 가능합니다.

답변등록된 질문은 답변완료 탭으로 이동됩니다.

 

 

css를 이용하여 답변완료 탭과 새질문 탭을 한 페이지에서 모두 볼 수 있게 하였습니다.

 

 

자신의 피드에서 답변완료 탭에서 질문이나 답변을 클릭 시 수정,삭제 할 수 있는 페이지로 갈 수 있습니다. 또한 x버튼을 누르면 디테일 페이지 이동없이 바로 삭제도 가능합니다. ( 디테일 페이지 삭제하기와 메인페이지 x버튼 모두 alert 기능이 없어서 누르자마자 바로 데이터가 삭제됩니다 )

 

 

 

 

 

 

 

Footer의 내질문함은 피드( 마이페이지 ) 이고 알림을 클릭하면 아직 답변하지 않은 질문들이 뜨도록 하였습니다.

 

 

 

알림 페이지에서 뜨는 질문과 새질문 탭의 질문이 같다고 생각할 수 있습니다.

하지만 알림 페이지의 질문은 로그인한 유저(' 융2 ' )에게 온 질문입니다.

그리고 10글자가 넘어가면 ...으로 뜨도록 하였습니다.

마찬가지로 질문을 클릭하면 답변 등록 페이지로 이동하게 됩니다.

 

 

을 클릭하면 프로필 설정 페이지로 이동하게 됩니다

 

사진을 클릭하면 파일을 선택할 수 있는 창이 뜹니다

 

이메일과 주소는 바꿀 수 없어 회색입니다. 민트색 부분과 프로필 사진만 수정이 가능합니다.

기존 프로필사진과 닉네임, 소개가 뜨고 데이터 수정 후 저장하기를 누르면 됩니다.

 

 

비밀번호 변경 페이지입니다.

현재 비밀번호는 세션에 저장된 비밀번호 정보와 일치해야 하고 바꿀 비밀번호와 비밀번호 확인에 입력된 값이 같아야 진행됩니다.

둘 중 하나라도 불만족 시

 

가 뜨게됩니다.

 

 

회원탈퇴 페이지입니다.

DB에 t_board에 i_user가 fk키로 걸려있으므로 t_user의 i_user가 일치하는 데이터만 삭제가 불가능합니다. ( 받은 질문, 답변한 질문이 하나도 없다면 가능 )

그러므로 t_board에서 해당 i_user 관련 데이터를 모두 삭제 후 t_user에서 i_user 데이터를 삭제해야 합니다.

이메일과 비밀번호를 세션에 저장된 값과 동일하게 입력하면 회원탈퇴가 진행됩니다.

 

 

 

4. 시행착오, 어려웠던 점과 해결

 

한 페이지에서 탭 전환하는 기능을 자바스크립트 없이 구현하기 어려웠습니다.

로그인 하지 않았을 때 푸터에 접근하지 못하도록 띄우는 것도 어려웠지만 둘 다 css로 해결했습니다.

 

DB도 답변완료 된 테이블, 안 된 테이블 둘로 나눠서 해야되는 줄 알았습니다.

근데 테이블 하나에 answer 컬럼이 null이냐 아니냐를 기준으로 구분하면 됐었습니다.

 

 

회원탈퇴 부분도 fk키 오류가 계속 발생해서 피드 게시물까지 전부 삭제하는 방향으로 해결했습니다.

 

$item

 

프로필 수정 부분에 데이터 수정 후 저장하면 nm, intro가 없어지는 현상이 있었는데 input에 name=nm, name=intro를 주지 않아서 porst방식으로 받아오지 못해서 일어나는 현상이었습니다.

비밀번호 변경이 적용이 되지 않아서 조건을 바꾸어주었습니다.

세션을 불러오고 세션 비밀번호와 입력한 비밀번호가 같아야 하고 바꿀 비밀번호와 비밀번호 확인이 일치해야만 되도록하니 잘 해결되었습니다.

 

 

 

5. 하고싶었던 기능

 

새로운 질문이 등록되면 알림창에 빨간 점으로 띄우는 기능

한페이지에서 탭전환 가능하게 하는 것

 

이전글, 다음글, 페이징, 친구 검색 등 보류

 

질문했었던 사람이 수정도 할 수 있도록 하고 싶었으나 보류

부적절한 질답 발견 시 신고, 금칙어 기능

조회수, 좋아요

asked 커뮤니티

 

자바스크립트와 부트스트랩, 뷰, 라라벨 등을 배운 지금에서 atm 프로젝트를 고도화하게 되면

위에 적은 기능들을 추가해보고 싶습니다.