728x90 반응형 SMALL ajax12 프로젝트(5)-게시글 수정 및 기타작업 앞서 말한것과 같이 수정은 사실상 첨부파일의 등록 작업과 유사하다... 첨부파일이라는게 개념 자체가 수정이 아닌 기존 파일을 삭제하고, 새로운파일을 추가하고 등등 그러니 기존의 게시물등록과 비슷하게 작업을 해보자 그리고 해당 업로드할때 좀 이쁘장하게 나오도록 css파일을 따로 놓았다.. 프로젝트 막바지에는 js파일을 따로 또 분리해서 정리하겠다... 화면에서 첨부파일 수정 게시물의 조회화면과 유사하지만 첨부파일 데이터를 보여주면서 삭제가 되도록, 첨부가 되도록해야한다. 은근 까다로왔다 나에겐; 천천히 해보자 우선 modify.jsp 파일일부에 첨부파일 폼을 넣어준다 첨부파일을 수정하기 위해서 게시물을 등록할 때 사용했던 버튼과 파일을 교체하기 위한 이 필요하니 추가해준다. Files 126번 게시글을 지.. 2021. 10. 15. 파일업로드(6)-첨부파일삭제 첨부파일 삭제 첨부파일 삭제는 생각보다 많은 고민을 해야한다. 1. 이미지 파일의 경우에는 썸네일까지 같이 삭제되어야 한다. 2. 파일을 삭제한 후에는 브라우저에서도 썸네일이나 파일 아이콘이 삭제되도록 처리해야한다. 3. 비정상적으로 브라우저의 종료 시 업로드된 파일의 처리 우선은 일반 파일과 이미지 파일의 삭제에 대해 다뤄보겠다. 업로드된 첨부파일 삭제는 Ajax를 이용하거나 태그를 이용하는 방식 모두를 적용 할 수 있다. 이미 업로드된 첨부파일의 삭제는 일반파일의 경우에는 업로드된 파일만을 삭제하면 되지만, 이미지의 경우 썸네일과 파일과 원본파일을 같이 삭제해주어야 한다. 서버 측에서는 삭제하려는 파일의 화장자를 검사해서 일반 파일인지 이미지 파일인지를 파악하거나, 파라미터로 파일의 종류를 파악하고,.. 2021. 10. 14. 파일업로드(5)-원본 이미지 보여주기 일반 첨부파일과 달리 썸네일이 보여지는 이미지 파일의 경우 썸네일을 클리하면 원본 이미지를 볼 수 있게 한다. 썸네일의 이미지가 업로드 된 경로 + /thumb + UUID 파일이름이었다면, 원본 이미지의 이름은 중간에 /thumb_ 가 /로 순수하게 바뀌는 점이 달라진다. 원본 이미지를 화면에서 보기위해서는 태그를 생성하고 해당 에 이미지 태그를 작성해서 넣어주는 작업과 이를 화면상에서 절대 위치를 이용해서 보여주어야 한다. 원본 이미지를 보여줄 처리 이미지의 겨우 일반 파일과 달리 이미 이미지 파일 데이터는 썸네일과 동일한 방식으로 처리 될 수 있기에 사실상 핵심적인 부분은 이미지를 보여주는 를 처리하는 부분이다. 썸네일을 클릭할때 이루어지도록 JS함수를 작성한다. function showImage(.. 2021. 10. 14. 파일업로드(4)-첨부파일의 다운로드 첨부파일의 업로드가 처리되는 과정도 복잡하지만, 이를 사용자가 사용하는 과정 역시 신경 써야한다. 브라우저에 보이는 첨부파일은 1. 이미지 종류, 2. 일반파일 로 구분되므로 사용자의 첨부파일관련된 행위도 종류에 따라 다르게 처리 되어야 한다. 만약 이미지인 경우에는 썸넬 이미지를 클릭했을 때 화면에 크게 원본 파일을 보여주는 형태로 처리되어야 한다. 이 경우 브라우저에서 새로운태그를 생성해서 처리하는 방식을 이용한다. 이걸 light-box라고 한다. light-box는 제이쿼리를 이용하는 많은 플로그인들이 있다. 이를 이용하거나 직접 구현할 수있다. 한번 직접 구현해보겠다. 첨부파일이 이미지가 아닌 경우 , 기본값은 다운로드로 설정하겠다. 첨부파일의 다운로드 이미지를 처리하기 전 간단한 첨부파일의 다.. 2021. 10. 13. 파일업로드(3)-업로드데이터변환 첨부파일 데이터의 업로드가 완료되었지만, 아직도 많은 작업이 남아있다... Ajax로 파일을 업로드해도 아직 브라우저 쪽에서 아무런 데이터도 전달하지 않았기 때문에 브라우저는 과 같은 오류만나오고 응답을 얻을 수 가 없다. 또는 파일을 올려놓아도 와같은 간단한 형식으로 "아 첨부가 되긴했구나"까지만 알뿐이다. 이것을 시각적으로나 정보를 포함시켜야한다. 그렇다면 브라우저로 전송해야하는 데이터는 어느것이 있을까? 1. 업로드 된 파일의 이름과 원본 파일의 이름 2. 파일이 저장된 경로 3. 업로드된 파일이 이미지인지 아닌지에 대한 정보 이에 대한 정보를 처리하는 방법은 1. 업로드된 경로가 포함된 파일이름을 반환하는 방식 2. 별도의 객체를 생성해서 처리하는 방법 이렇게 2가지가 있다. 1번의 방식은 브라우.. 2021. 10. 13. 파일업로드(2) 파일업로드 전 고려 해야할 사항 4가지가 있다 이 4가지를 처리하는 것을 위주로 공부해보겠다. 파일의 확장자나 크기 사전처리 중복이름처리 이미지파일과 일반파일을 구별 이렇게 있다. 최근 포털에서도 특정한 확장자를 제외한 파일들의 업로드를 제한 하는 경우가 많다. 이는 첨부파일을 이용하는 웹 공격을 막기위해 행해지는 조치라고 한다. 첨부파일의 확장자가 exe, sh, zip 등일 경우에는 업로드를 제한하고, 특정 크기 이상의 파일은 업로드 할 수 없도록 제한하는 처리를 JS로 해보자 확장자의 경우는 정규표현식으로 처리가능하다. upload.jsp일부에 아래와 같은 것을 추가하자 var regex = new RegExp("(.*?)\.(exe|sh|zip|html|jsp)$"); var maxSize = 5.. 2021. 10. 13. 파일 업로드(1) 첨부파일을 처리하고자.. 첨부파일을 서버에 전송하는 방식은 크게 태그를 이용해서 업로드 하는 방식과 Ajax를 이용하는 방식으로 나눠 볼 수있다. 태그를 이용하는 방식 브라우저의 제한이 없어야 하는 경웨 사용 -일반적으로 페이지 이동과 동시에 첨부파일을 업로드하는 방식 - 을 이용해서 화면의 이동없이 첨부파일을 처리하는 방식 Ajax를 이용하는 방식 첨부파일을 별도로 처리하는 방식 -을 이용하고 Ajax로 처리하는 방식 -HTML5 의 Drag and Drop기능이나 jQuery라이브러리를 이용해서 처리하는 방식 브라우저 상에서 첨부파일 처리하는 방식은 다양하지만, 서버쪽에서의 처리는 거으 ㅣ비슷하다. 지금의 프로젝트는 Ajax를 위주로 처리할 것이다. 시작전 새로운 브랜치생성 새로운 과정을 공부, 기능.. 2021. 10. 12. REST방식(9)-댓글페이징처리 댓글의 화면 처리는 다음과 같은 방식으로 처리한다. 1. 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여준다. 2. 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력한다. 3. 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동 4. 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출 댓글 페이지 계산과 출력 Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정한다. //function getList(param, callback, error) { // //var bno = param.bno; //var pa.. 2021. 10. 11. REST방식(9)-이벤트처리 앞의 과정을 이상없이 진행했다. 이미 Ajax 처리까지는 완료되는 것을 확인했다. 남은 작업은 화면에서 버튼 등에서 발생하는 이벤트를 감지하고 Ajax호출의 결과를 화면에 반영하는 것이 남았다. 요구사항 1. 조회페이지가 열리면 댓글을 가져온다. 2. 댓글은 원글 아래쪽에 배치한다. 3. 댓글에 대한 처리는 모달창으로 처리한다. 댓글 목록 처리 댓글 목록을 위해서 별도의 태그를 생성한다. 게시글과 관련된 화면 아래쪽에 추가한다. Reply New Reply 안에는 나중에 댓글들을 위치시켜야하니 대략적인 위치를 잡는 식으로 작성한다. 그럼 위와같이 나타난다. 댓글의 목록은 태그 내에 태그를 이용해서 처리할 것이다. 각 태그는 하나의 댓글을 의미하므로 수정이나 삭제시 이를 클릭하게 되고 그 를 위한 정보들을.. 2021. 10. 8. REST방식(8)-Ajax JavaScript 준비 jsp내에서 댓글에 대한 처리는 하나으 ㅣ페이지 내에서 모든 작업이 이루어지기 때문에 조금 복잡하게 느껴질수 있다. (CRUD + 페이징) 앞으로 계속사용될 JS를 모듈화 Ajax를 이용하는 경우에는 jQuery의 함수를 이용해서 너무나 쉽게 처리할 수 있기 때문에 많이 사용함. 그런데 이곳저곳 많이쓰다보니 이벤트처리, DOM처리 등등 마구섞여 유지보수가 힘들 수 있음. 그래서 하나의 모듈처럼 구성하는 방식을 이용한다. webapp 내 resource 폴더 에 js폴더 내 reply.js 파일을 작성 지금은 아무기능없이 간단히 동작하는 코드만을 넣어 확인해보자 console.log("확인"); var relyService= {}; 그리고 기존에 만들었던 jsp 파일이있는데 거기와.. 2021. 10. 8. REST방식(7)-Ajax댓글처리 @Param어노테이션과 댓글 목록 댓글도 일반 게시판 조회할때 처럼 페이징기능이 있는것을 볼 수가 있다. 기존의 게시물 페이징 처리와 유사하지만, 추가적으로 특정한 게시물의 댓글들만을 대상으로 하기 때문에 추가로 게시물의 번호가 필요하게 된다. 즉, 게시글고유번호를 통해 댓글들을 쭈욱 불러오고 그걸 페이징한다는 개념! MyBatis는 두개 이상이 데이터를 파라미터로 전달하기 위해서 1. 별도의 객체로 구성 2. Map을 이용하는 방식 3. @Param을 이용해서 이름을 사용하는 방식이 있다. 여러 방식중 간단하게 사용할 수 있는 방식이 @Param을 이용하는 방식이다. 페이징 처리를 하기 위해서 Criteria를 이용한다. 여기에 추가적으로 해당 게시물의 번호는 파라미터를 전달하도록 ReplyMapper.. 2021. 10. 7. REST방식(6)-Ajax댓글처리 Ajax호출을 가정하고 웹페이지에서 사용하는 댓글 기능을 작성해 보겠다. DB 상에서 댓글은 전형적인 1:N 관계로 구성하고있다. 하나의 게시물에 여러 개의 댓글을 추가하는 형태로 구성하고, 화면은 조회 화면상에서 별도의 화면 이동 없이 처리해야 하기때문에 Ajax를 이용해서 호출하겠다. 댓글을 추가하기 위해서 댓글 주고에 맞는 테이블을 설계해야 한다. 댓글 테이블은 tbl_reply라는 이름으 ㅣ테이블로 지정해서 생성한다. 댓글 자체는 단독으로 CRUD가 가능하므로, 별도의 pk를 부여고 외래키FK설정을 통해 tbl_board 테이블을 참조하도록 해야한다. 댓글을 위한 RelyVO 클래스의 추가 tbl_reply 테이블을 참고해서 org.study.domain 패키지 아래 RelyVO 클래스를 추가한다.. 2021. 10. 7. 이전 1 다음 728x90 반응형 LIST
