후니훈의 모바일 세상

class 위쪽 부분에 @WebServlet("/login") 이라는 어노테이션 코드이다. 

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}
}

이미지 업로드 전 미리보기 방법을 알아 보도록 하겠습니다.

구현하려고 했던 기능은 사진을 클릭하면 프로필 사진이 바뀌는 것을 구현하려고 했습니다.

문제점:

1. <Input tag> type=file 에 Image 를 넣지 못하는 문제

2. 파일 load 시에 파일경로가 보안상의 이유로 fake path 로 표기되어 Image 를 보여줄 수 없는 문제  

해결 :

1번  

Input 태그를 2개 만들고 type=file 부분은 보이지 않게 처리 합니다.

Input 태그 type=image 부분을 클릭하면 type=file 부분이 열리도록 처리 하면 됩니다.

2번 

File 의 value 값이 변경을 감지하는  jquery event 중 change 함수를 이용합니다.

그리고 readURL() 함수를 구현 하고 값을 type=image 에 넣어주면 완성

아래는 결과물입니다.

도움이 되셨다면 댓글 부탁드립니다 ^^.

참조:  http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

DIV 태그에서 값을 가져 올 때는  $('#receiver').text();

Input 태그에서 가져 올 때는       $('#title').val();

   $.ajax({

url:"xxxxxxxxxxxxxxxxxxx"

type:'POST',

dataType:'json',

data:JSON.stringify(sendObject),

contentType: 'text/html;charset=UTF-8',

mimeType: 'application/json',

success:function(data) {

if(data.MESSAGE) {

alert("로그인성공");

window.location.href = "main.html";

} else {

alert("로그인실패");

}

},

error:function(data,status,er) {

alert("error: "+data+" status: "+status+" er:"+er);

}

});  

[a.html] => 이동 전 페이지

[b.html] => a.html에서 이동할 페이지

[실행화면]

a.html

1번 버튼으로 이동

2번 버튼으로 이동

잡다한 내용은 다 빼고.. 여기서 중요한 것은 unescape(location.href) 이 부분이다
저 구문을 출력해 보면 아래와 같이 나온다

현재 주소창에 띄워져 있는 문자들을 그대로 가져온다

그런데 여기서 필요한것은 tab = 2 라는 부분이므로 

이런식으로 "2" 를 가져올수 있다

그냥 써줘도 되는데 굳이 조건식을 사용한 것은.. 
a.html을 거쳐서 b.html로 갈수도 있지만 바로 b.html을 실행했을때는 1번 페이지를 보여주려고 했기 때문이다

출저 : http://ggoreb.tistory.com/162

결론:

SELECT * FROM tb_b1 WHERE b_index > 10 ORDER BY b_index ASC LIMIT 1;  [이전글]

SELECT * FROM tb_b1 WHERE b_index < 23 ORDER BY b_index DESC LIMIT 1; [다음글]

참조:

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=19972&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%C0%C0%B4%E4%C7%FC+%B0%D4%BD%C3%C6%C7&sop=and

시판에서 글보기를 했을시 하단에 전체 글목록을 보여주는 방법도 있지만

현재 보는글과 관련된글(답글)을 보여주면서 동시에 이전글, 다음글로 바로 이동하게 하는 방법도 있습니다.

이전글, 다음글로 바로 이동할때는 글을 보는 페이지(view.php)에서 이전글, 다음글에 해당하는 데이터를 알아야 합니다.

우선 묻지마보드의 경우에는 글보기를 할때 키값이 글번호입니다.

그럼 현재 보는글에서 다음글, 이전글에 대한 글번호를 구할수가 있어야 합니다.

예전에 초기버전의 묻지마보드의 경우에는 디비에 저장되는 글번호의 형식이 auto_increment 형식이 아닌

일반 int 형식으로 글을 작성할때마다 직접적인 번호조작에 의해서 1부터 차례대로 디비에 저장이 되게 됩니다.

그래서 이전글, 다음글을 불러올때는 아주 간편하게 해결이 됩니다.

예전 게시판처럼 글번호가 1,2,3,4 이렇게 무조건 순차적으로 저장이 될경우에는

이전글은 현재보는 글번호 + 1

다음글은 현재보는 글번호 - 1

이런식으로 되게됩니다. 그렇다면 이렇게 간편한데.. 왜 그런 방식을 채택하지 않냐는 의문이 생깁니다.

바로 효율성때문입니다. 현재는 글번호 필드가 auto_increment로 저장이 되며 글삭제시 그 삭제된부분의 

번호는 뻥뚤리게 됩니다. 그러면 글목록을 불러올때 글번호가 차례대로 출력되는건 가상번호때문입니다.

이 가상번호란 디비에 저장되어있는것이 아니라 리스팅할때 list.php 파일속에서 자체적으로 번호를 순차적으로 만들어 줍니다.

현재 묻지마보드의 경우 이러한 가상번호로 리스팅할때 순차적으로 번호가 주어지게 되며, 실제로 디비에 저장되는

글번호(no)는 아래 그림처럼 글이 삭제된경우에는 순차적인게 아니라 삭제된 부분의 번호는 비어있게 됩니다.

<그림 1>

답글이 달려도 그러하고 글이 삭제된 경우에도 그부분에 해당하는 글번호는 비게됩니다.

이러한 경우에는 이전글, 다음글을 가져올때 위의 방법처럼 1을 더하고 1을 뺀다고해서 해결될 문제가 아닙니다.

운이 좋다면 1을 더했을때 이전글을 추출할수 있을것이고 운이 나쁘다면 못할것입니다. 근데 우리는 운을 믿어서는 안되죠..^^

이제 본격적으로 이전글, 다음글을 구하는 Logic에 대해서 알아보도록 하겠습니다.

기본 원리는 시간을 이용한것입니다.

<그림 2>

이전글은 현재 보고있는 글보다 분명 먼저 작성된 글이다. (즉, date 값이 작음)

다음글은 현재 보고있는 글보다 분명 이후에 작성된 글이다. (즉, date 값이 큼)

여기서 말하는 date값이란 디비에 저장되는 글쓴시간의 타임스탬프 값입니다.

<그림 2>에서 현재 보고있는글은 503번 글이라고 한다면 우리에게 필요한것은 504번글과 502번글의 글 고유번호입니다.

이것을 구하기 위해서 503번글이 작성된 시간을 바탕으로 쿼리를 날리게 됩니다.

<그림 3>

이 쿼리에서 que1은 다음글을 구해오는 쿼리이며 que2는 이전글을 구하는 쿼리입니다.

que1을 보면 디비에서 date가 현재 우리가 보는 글이 쓰여진 날짜($row[date])보다 작은걸 가져옵니다.

즉, <그림2>에서 503번글 밑으로의 글들을 말하는거죠.

근데 이때 문제는 502번, 501번, 500번 즉, 503번 밑으로 모든 글들은 날짜가 $row[date]보다 작습니다.

그래서 뒤에 따라오는게 바로 "order by no desc limit 1" 입니다.

즉, 날짜가 작은것 중에서 역순으로 딱 한개만 쿼리하는거죠. 결과적으로 말하면 이 쿼리가 바로 <그림2>에서 502번을 가져오는거죠.

이전글을 구하는 쿼리 역시 같습니다. 위에서 설명한대로 하지만 단 한가지 다른점은 이번에는 역순(desc)으로 가져오는게 

아니라 정순(asc)로 가져와야합니다. 잘 생각해보시면 이해가 될겁니다. <그림2>에서 503번 위쪽에서 딱 하나를 가져올때는

가장 밑에 글을 가져와야만 그게 504번글이 되기때문이죠.

이해가 되셨나요??

이부분이 이전글, 다음글을 구하는 알고리즘의 가장 핵심부분입니다.

이것만 view.php 파일속에 제대로 삽입했다면 그다음에는 여러분이 원하시는데로 만들수 있습니다.

저같은 경우에는 다음 그림처럼 보이게 만들었습니다.

<그림 4>

위 그림에서 아래쪽 화살표를 클릭하면 다음글을.. 위쪽 화살표를 클릭하면 이전글을 보게 됩니다.

근데 저는 여기에 약간의 기능을 더 추가했습니다.

이전글이나 다음글이 없다면, 즉, 현재 보는글이 가장 첨의 글이거나 가장 나중의 글이라면

이전글, 다음글 버튼을 회색으로 처리했습니다. 그리고 그 버튼을 눌르면 "존재하지 않는 글을 선택하셨습니다." 라는

경고창을 띄우고 되돌려 보내게 했습니다.

이부분의 구현방법은 <그림 3>과 아래 그림을 잘 비교해보시면 이해가 갈겁니다.

<그림 3>은 게시판 자체 view.php 파일이며, 아래 그림은 스킨폴더속의 view_foot.php파일의 한 부분입니다.

<그림 5>

이제 구현하시겠습니까??

사실 간단해 보이지만 이 부분을 구현해내기위해서 혼자서 데이터베이스의 필드를 조작해보기도 하고

새로운 필드(prev_no, next_no)를 추가해보기도 했습니다. 근데 너무 일이 복잡해질듯해서 생각해본 결과

이렇게 간단하게 해결이 되더군요. 한번 해보시기 바랍니다.

출저: http://theeye.pe.kr/entry/%EA%B2%8C%EC%8B%9C%ED%8C%90%EC%9A%A9-%ED%8E%98%EC%9D%B4%EC%A7%95-%ED%81%B4%EB%9E%98%EC%8A%A4[아이군블로그]

게시판에서 쓸만한 페이징 클래스를 제작해 보았다. 문제 발견시 피드백 부탁드립니다^^

 guide.txt

---------------------------------------------------------------------------------------
페이징 클래스 소스코드 :
---------------------------------------------------------------------------------------

public class PageNavigation {
    
    private        boolean        isPrevPage;
    private        boolean        isNextPage;
    protected    int            nowPage;
    protected    int            rowTotal;
    protected    int            blockList;
    protected    int            blockPage;
    private        int            totalPage;
    private        int            startPage;
    private        int            endPage;
    private        int            startRow;
    private        int            endRow;
    
    // 페이지를 계산하는 생성자
    public PageNavigation(int nowPage, int rowTotal, int blockList, int blockPage) {
        super();
        
        // 각종 플래그를 초기화
        isPrevPage = false;
        isNextPage = false;
        
        // 입력된 전체 열의 수를 통해 전체 페이지 수를 계산한다
        this.totalPage    = (int) Math.ceil((double)rowTotal / (double)blockList);
        
        // 현재 페이지가 전체 페이지수보다 클경우 전체 페이지수로 강제로 조정한다
        if(nowPage > this.totalPage)
        {
            nowPage = this.totalPage;
        }
        
        // DB입력을 위한 시작과 종료값을 구한다
        this.startRow    = (int) (nowPage - 1) * blockList;
        this.endRow        = (int) this.startRow + blockList - 1;
        
        // 시작페이지와 종료페이지의 값을 구한다
        this.startPage    = (int) ((nowPage - 1) / blockPage) * blockPage + 1;
        this.endPage    = (int) this.startPage + blockPage - 1;
        
        // 마지막 페이지값이 전체 페이지값보다 클 경우 강제 조정
        if(this.endPage > this.totalPage)
        {
            this.endPage = totalPage;
        }
        
        // 시작 페이지가 1보다 클 경우 이전 페이징이 가능한것으로 간주한다
        if(this.startPage > 1)
        {
            this.isPrevPage = true;
        }
        
        // 종료페이지가 전체페이지보다 작을경우 다음 페이징이 가능한것으로 간주한다
        if(this.endPage < this.totalPage)
        {
            this.isNextPage = true;
        }
        
        // 기타 값을 저장한다
        this.nowPage = nowPage;
        this.rowTotal = rowTotal;
        this.blockList = blockList;
        this.blockPage = blockPage;
    }
    
    public void Debug()
    {
        System.out.println("Total Page : " + this.totalPage + " / Start Page : " + this.startPage + " / End Page : " + this.endPage);
        System.out.println("Total Row : " + this.rowTotal + " / Start Row : " + this.startRow + " / End Row : " + this.endRow);
    }
    
    // 전체 페이지 수를 알아온다
    public int getTotalPage() 
    {
        return totalPage;
    }
    
    // 시작 Row값을 가져온다
    public int getStartRow()
    {
        return startRow;
    }
    
    // 마지막 Row값을 가져온다
    public int getEndRow()
    {
        return endRow;
    }
    
    // Block Row 크기를 가져온다
    public int getBlockSize()
    {
        return blockSize;
    }
    
    // 시작페이지값을 가져온다
    public int getStartPage()
    {
        return startPage;
    }

    // 마지막 페이지값을 가져온다
    public int getEndPage()
    {
        return endPage;
    }
    
    // 이전페이지의 존재유무를 가져온다
    public boolean isPrevPage()
    {
        return isPrevPage;
    }
    
    // 다음페이지의 존재유무를 가져온다
    public boolean isNextPage()
    {
        return isNextPage;
    }
}

---------------------------------------------------------------------------------------
서블릿(Controller) 소스코드 :
---------------------------------------------------------------------------------------

// 리스트를 가져온다
if(request.getParameter("page") == null)
{
    nowPage = 1;
}
else
{
    nowPage = Integer.parseInt(request.getParameter("page"));
    
    if(nowPage < 1)
    {
        nowPage = 1;
    }
}

// 객체를 생성한다 (현재페이지, 전체글수, 페이지당표시할 글의수, 한번에 표시할 페이징블록수)    
PageNavigation pageNav = new PageNavigation(nowPage, rowTotal, 10, 5);

// 디버깅이 필요할시 사용한다. 안써도 됨
pageNav.Debug();

// 시작Row값과 종료Row값을 넣어 쿼리문을 작성한다
sql = "SELECT * FROM TableName ORDER BY no DESC LIMIT " + pageNav.getStartRow() + ", " + pageNav.getBlockSize();

// 뷰에게 넘길 값을 지정한다
request.setAttribute("pageIsPrev",    pageNav.isPrevPage());    // 이전페이지 블록의 존재유무
request.setAttribute("pageIsNext",    pageNav.isNextPage());    // 다음페이지 블록의 존재유무
request.setAttribute("pageStart",    pageNav.getStartPage());// 시작페이지 번호
request.setAttribute("pageEnd",        pageNav.getEndPage());    // 종료페이지 번호

---------------------------------------------------------------------------------------
jsp(View) 소스코드(EL표기법, JSTL사용) :
---------------------------------------------------------------------------------------

<div>
    <center>
        <c:if test="${pageIsPrev}">
            <a href="index.do?page=${pageStart - 1}">prev</a>
        </c:if>
        <c:forEach var="page" begin="${pageStart}" end="${pageEnd}">
            <a href="index.do?page=${page}">[${page}] </a>
        </c:forEach>
        <c:if test="${pageIsNext}">
            <a href="index.do?page=${pageEnd + 1}">next</a>
        </c:if>
    </center>
</div>

---------------------------------------------------------------------------------------
결과 :
---------------------------------------------------------------------------------------
prev [11] [12] [13] [14] [15] next

오늘 페이징 관련 코딩을하다가 할때마다 헷갈려서 정리를 해봤습니다.

로컬에 있는 파일을 게시판 처럼 보여주게 했는데 DB에서 긁어오는거나 어차피 기본 로직은 같을 거라 생각되네요

제일 헷갈리는게 변수값 구하는거라 해당 부분만 정리해봤습니다.

참고로 pageNo / groupSize + (pageNo % groupSize == 0 ? 0 : 1) 같은 코드는

(int)Math.ceil((double)pageNo/groupSize) 로도 바꿀 수 있습니다. (올림)

아래는 PageNo가 '5'일때 해당 화면입니다.

그럼 수고하세요~

출저:http://cafe.naver.com/javachobostudy/28097