2014.01.04 09:55
JSP 어노테이션

JSP 2.2 는 서블릿 설정을 web.xml 보다는 어노테이션 기반을 우선 제공 하고 있다.


어노테이션(Annotaion)

Java 5.0 부터 지원되는 기술로, 기존 설정 파일 (web.xml 등) 에서 제공 하는 설정 내용들을 설정 파일에서 설정하지 않아도 해당 소스 내에 설정할 수 있는 방법을 제공함으로써 설정 파일의 크기를 줄이거나 설정 파일 자체를 없앨 수 있는 역할을 하는 기능이다. 


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

http://localhost:8080/JspProject/login  로그인 서블릿과 매핑되어 아래 servlet 이 호출된다.


@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
	}
}


신고
Posted by hoonihoon85 hoonihoon
2013.12.24 11:48

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

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


문제점:

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

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


해결 :

1번  

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

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

<body>

<input id="realfile" type="file" style="position:absolute;visibility:hidden;">

<input id="pictureId" type="image" onclick="document.getElementById('realfile').click()"> 

</body>


2번 

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

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

<script type="text/javascript">

         $('#realfile').change(function () {

  readURL(this);

});


function readURL(input) {

   if (input.files && input.files[0]) {

       var reader = new FileReader();


       reader.onload = function (e) {

           $('#pictureId').attr('src', e.target.result);

       }

       reader.readAsDataURL(input.files[0]);

   }

}

</script>


아래는 결과물입니다.




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



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

신고
Posted by hoonihoon85 hoonihoon
2013.12.11 17:17

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

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




신고
Posted by hoonihoon85 hoonihoon
2013.12.02 15:10
로그인 성공시 메인페이지로 이동 하는 방법

로그인 성공시 원하는 URL 로 이동 할 수 있습니다. 


   $.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);

}

});  

신고
Posted by hoonihoon85 hoonihoon
2013.11.29 16:29

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

<HTML>
<HEAD>
<TITLE>Get 방식의 주소 파라미터를 받아서 처리</TITLE>
<script type="text/javascript">
var move = function(number) {
location.href = "b.html?tab=" + number;
};

</script>
</HEAD>

<BODY>
<input type="button" value="1번 탭으로 이동" onClick="move(1)" />
<br />
<input type="button" value="2번 탭으로 이동" onClick="move(2)" />
</BODY>
</HTML>



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

<HTML>
<HEAD>
<TITLE>Get 방식의 주소 파라미터를 받아서 처리</TITLE>

<script type="text/javascript" src="jquery-1.6.4.js"></script>

<script type="text/javascript">
var displayTab = function(number) {
$('div > div').css('display', 'none');
$('#tab_' + number).css('display', 'block');
};

$(document).ready(function() {
var address = unescape(location.href);
var param = "";
if(address.indexOf("tab", 0) != -1) {
param = address.substring(address.indexOf("tab", 0) + 4);
} else {
param = "1";
}
displayTab(param);
});

</script>

<style type="text/css">
div#tab_1 {display:none; position:absolute; top:50px; left:50px; width:100px; height:100px; background:red;}
div#tab_2 {display:none; position:absolute; top:150px; left:50px; width:200px; height:200px; background:blue;}
</style>

</HEAD>

<BODY>
<div id="tab_menu">
<input type="button" value="1번 탭 보이기" onClick="displayTab(1)" />
<input type="button" value="2번 탭 보이기" onClick="displayTab(2)" />
</div>
<div id="tab">
<div id="tab_1">
</div>

<div id="tab_2">
</div>
</div>
</BODY>
</HTML>


[실행화면]

a.html


1번 버튼으로 이동


2번 버튼으로 이동



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


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

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

var address = unescape(location.href);
var param = "";
if(address.indexOf("tab", 0) != -1) {
        param = address.substring(address.indexOf("tab", 0) + 4);
} else {
        param = "1";
}


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

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


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

신고
Posted by hoonihoon85 hoonihoon
2013.11.22 11:00

결론:

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)를 추가해보기도 했습니다. 근데 너무 일이 복잡해질듯해서 생각해본 결과

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

신고
Posted by hoonihoon85 hoonihoon
2013.11.22 10:42

출저: 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[아이군블로그]


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


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

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

신고
Posted by hoonihoon85 hoonihoon
2013.11.20 12:29

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

 

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

 

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

 

 변수명설명Logic
1pageNo현재 페이지 번호 디폴트 값 : 1하단의 [1][2][3] 이나 [prev] [next] 클릭시 QueryString으로 입력받음
2pageSize한페이지에 보이는 게시물 수 (fix)내맘 (5)
3groupSize게시판 하단에 나오는 [1][2][3][4][5] 의 페이지 수 (fix)내맘 (3)
4totCnt게시물의 총 CountDB Query로 조회
5groupNo현재 그룹 번호. groupSize가 3인경우 
 [1][2][3]이면 '1' [4][5][6]이면 '2' [7][8][9]면 '3' ....
pageNo / groupSize + (pageNo % groupSize == 0 ? 0 : 1)
6startRow현재 페이지의 시작 번호(pageNo - 1) * pageSize + 1
7endRow현재 페이지의 끝 번호pageNo * pageSize
8startPage현재 그룹의 시작 페이지 번호(groupNo - 1 ) * groupSize + 1
9endPage현재 그룹의 마지막 페이지 번호startPage + groupSize - 1
if(endPage > totalPageCnt) endPage = totalPageCnt;
10totalPageCnt총 페이지 Count(totCnt / pageSize) +  (totCnt % pageSize == 0 ? 0 : 1)
11totalPageGroupCnt총 그룹 CounttotalPageCnt / groupSize + ( totalPageCnt % groupSize == 0 ? 0 : 1 )
12prevGroupPage이전 그룹으로 이동하는 페이지 번호(groupNo - 2 ) * groupSize + 1
13nextGroupPage다음 그룹으로 이동하는 페이지 번호groupNo * groupSize + 1

 

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

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

 

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

 

 

그럼 수고하세요~


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

신고

'프로그래밍 > JavaScript & Jqeury & Ajax & JSP' 카테고리의 다른 글

게시판 이전글 다음글 쿼리문  (0) 2013.11.22
페이징처리 4 [클래스코드]  (0) 2013.11.22
페이징처리 2  (0) 2013.11.20
게시판 페이징 처리  (0) 2013.11.19
Check if inputs are empty using jQuery  (0) 2013.10.24
Javascript 문법검사  (0) 2013.10.22
Posted by hoonihoon85 hoonihoon
2013.11.19 15:44

위와 같이 구현해보려고 합니다. 게시판만들때 좀 까다로운 부분이긴 알고보면 원리는 간단합니다. 최대한 이해하기 쉽고 짧게 써볼려고 합니다.

ASP, PHP, JSP로 게시판을 만들보려는분들에게 많은 도움이 되었으면 합니다. 그럼 시작하겠습니다.

 

먼저 알아야 할건 페이징 알고리즘의 개념입니다. 페이지와 블록이라는것이 있는데요 천천히 알아보겠습니다.

 

 

1. 게시판에 저장된 총 글의 개수를 구한다.

 

conn = dbMgr.getConnection("mydb");

stmt = conn.createStatement();

rs = stmt.executeQuery("select count(*) from " + tableName);

if (rs.next()) rowCount = rs.getInt(1);

pageCount = rowCount / 15;

if (rowCount%15 > 0) pageCount++;

 

일단 위코드는 모르셔도 되구여 위에서 몇개만 보면됩니다.

rs = select count(*) from tableName;

위 쿼리에 보시면 현재 게시판 테이블에 저장된 글의 총 개수를 구하고 있습니다.

만약 게시판에 글이 100개가 저장되어있다면 100값을 리턴하겠죠... 52개가 저장되어있다면 52를 리턴하겠죠

 

위 코드에서 rs는 ResultSet를 의미하는 변수인데요.. 이곳에 쿼리의 결과가 저장됩니다. 당연히 여기에는 게시판의 총 글 개수가 저장되어있겠죠.

rowCount = rs.getInt(1);

rs에서 값을 뽑아와서 변수 rowCount에 저장합니다

rowCount에는 이제 게시판의 총 글개수가 저장되어있습니다.

이제 이것을 가지고 약간 잔머리를 굴려고 페이지를 나누고 하면됩니다.

 

여기에서는 한 페이지에 글이 15개가 보여진다고 하겠습니다.

만약 총 글의 개수가 100개가 저장되어있다면 한 페이지에 100개나 되는 글을 보여줄수도 있지만

한 페이지에 게시글 15개를 보여주고 페이지를 나눠야 보기 편하겠지요.

1 2 3 4 5 6

이런식으로요

1페이지에 글 15개, 2페이지 클릭하면 글 15개 보여지고 3페이지에 글 15개 4페이지에 글 15개, 5페이지에 글 15개, 6페이지에 글 15개

15*6 = 90    글10개가 남네요 글 10개를 위해서 페이지를 하나더 만들어야겠지요 그건 밑에서 알아보겠습니다. 

 

 

위 코드에 보시면

pageCount = rowCount / 15;

 

rowCount는 게시판의 총 글 개수가 저장되어있구여

여기에 15를 나누면 총 몇 페이지로 나눌지 알수 있겠습니다.

게시판의 총 글 개수가 100개있다고 가정하고 15를 나누면 pageCount에 6이라는 값이 저장되겠습니다.

pageCount값이 6이 니깐 이 값을 이용하여

 

게시판 밑에 페이지를 만들면 되겠지요

1 2 3 4 5 6

이렇게요

자 이렇게 페이지를 나누는 방법을 알아봤습니다. 하지만 아직 중요한게 남아있습니다.

100에서 15를 나누면 6 페이지가 나옵니다. 한 페이지당 15개씩 게시글이 보여지구여

하지만 계산해보니 나머지가 10개가 있군요 이 말은 10개의 게시물이 남는다는겁니다.

이 10개의 게시물을 보여주기 위해 하나의 페이지를 더 만들어야겠지요.

1 2 3 4 5 6 7

이렇게요.

 

6까지는 90개의 글이 보여지고 7을 클릭하면 나머지 10개의 글을 보여줍니다.

 

젤 위 코드를 보시면

if (rowCount%15 > 0) pageCount++;

위 내용을 이렇게 구현하고 있습니다.

총 게시물에서 나머지가 0이 아니구 1개 이상있으면 pageCount++를 해서 페이지 하나를 더 할당해주는겁니다.

 

만약 총 게시물이 90개라면 나머지가 0이지요. 이러면 페이지가 딱 6개만 있으면 됩니다.

하지만 만약 총 게시물이 91이라면 나머지가 1이 남습니다. 이 말은 1개의 게시물이 남습니다.

이 게시물도 보여줘야 하기때문에 pageCount++를 해서 페이지 하나를 더 만들어서 나머지 1개의 게시물을 보여주면 되겠지요.

 

최종적으로 pageCount에 페이지 개수가 저장되겠습니다.

 

만약 총 게시물이 1000개라면 ;;; 위 알고리즘이 알아서 페이지 개수를 계산해서 pageCount에 저장하겠지요

만약 총 게시물이 10000개라면 ;;;; 역시 위 알고리즘이 간단히 페이지 개수를 계산해서 pageCount에 저장합니다. 

 

 

지금까지 배운건 총 게시물을 몇 페이지로 나누는지 계산한 거였습니다.

계속 잘못된건 수정하겠구여 잘못된거나 만약 제 글이 너무 애매하게 써져있어서 이해하기 어렵다면 댓글 남겨주시기 바랍니다.

다음에는 이 페이지를 실제로 어떻게 구현할것인지와 블럭이라는 개념에 대해서 알아보겠습니다.

 

 

게시판 페이징 알고리즘 2번째 시간입니다...

 

uniqitem.com

위 사이트는 현재 강좌에 맞춰 만들어진 게시판이 있는곳입니다 참조하시면 됩니다 ^ ^

 

아 깜빡한게 있는데요 다음은 페이지번호를 이용하여 글 15개를 뽑아내는 SQL입니다.

"select no,name,title,registerDate, readno from "
   +tableName+ " order by no desc limit " +((pageNo-1)*15) + ",15"

 

쿼리 보시면 대충 어떤건지 이해가 가실겁니다.

tableName은 해당 게시판테이블명이며, pageNo는 페이지번호입니다. 해당테이블에서 페이지번호에 해당하는 글 15개를 뽑아서 리턴해줍니다.

예를 들어 아래그림에서 2페이지를 클릭했다면 2페이지에 해당하는 글 15개가 보여져야겠죠.. 만약 6페이지를 클릭했다면 6페이지에 해당하는 글 15개가 보여줘야 겠습니다. 위 쿼리가 저렇게 해당 페이지번호(pageNo)를 입력받으면 해당페이지 글 15개를 알아서 뽑아줍니다.

getBoardList(String tableName, int pageNo) {

         

        // 기타코드

"select no,name,title,registerDate, readno from "
   +
tableName+ " order by no desc limit " +((pageNo-1)*15) + ",15"

        // 기타코드

}

위와 같이 함수를 만들어서 사용하면 되겠습니다.

예)getBoardList("bbs", 2);

위 함수는 bbs테이블에서 2페이지에 해당하는 글 15개를 뽑아옵니다.

이방법 말구두 여러가지 방법이 있습니다.

 

 

 

전에 1에 이어 계속 써보겠습니다.

전 시간에는 페이지를 나누는 법을 배웠습니다. 이번에는 전 시간에 말씀드렸습니다 블록이라는 개념을 알아보겠습니다.. 블록이 무엇이냐 함은 다음 그림을 보시면

 

 

 

 

위 그림을 보시면 1부터 10

11부터 20

 

이렇게 페이지를 10개씩 해놨습니다..

저는 한블럭당 페이지를 10개씩 나눴는데요...

이렇게 페이지를 10개씩 나눠서 한 덩어리를 블럭이라고 합니다.

 

위에는 페이지가 24개가 있는데 3개의 블럭으로 나눴네요 ^ ^

 

앞에서 페이징알고리즘의 계산을 통해 페이지가 100개가 나왔다고 치면 한 화면에 100개의 링크를 만들면 좀 복잡하겠죠... 이렇게 위처럼 각 블럭마다 10개 씩 페이지를 출력하게 하고 다음 버튼이나 이전 버튼을 사용하여 블럭을 이동하면 편리하겠죠...

아마 대부분 게시판 사용해보셨으니 무슨 이야기인줄 아실겁니다.

 

이제 블럭을 계산해야 합니다. 게시판 페이징 알고리즘1에서 전체 페이지가 몇개인지 구했었죠...

인제 이 전체 페이지를 이용하여 블럭을 구해야 합니다. 공식은

 

block = (전체페이지/10);

 

if (전체페이지%10 != 0) block++;

 

 

공식을 보시면 저는 블럭마다 페이지를 10개로 설정했습니다.

만약 블럭마다 15개 페이지를 보여주고싶다면 15로 나누면 되겠지요.

공식은 전체글의 개수에서 전체페이지 구하는 공식과 같습니다.

 

전체페이지에서 10으로 나눴구여 만약 전체페이지가 24개라면 10으로 나누면

블록이 2개가 됩니다... 그런데 나머지 4개의 페이지도 보여줘야 겠지요

 

그래서 위에서 밑의 공식이 필요합니다.

if (전체페이지%10 != 0) block++;

 

위 공식은 만약에 전체페이지에서 10으로 나눈후 나머지가 0이 아니면 나머지가 있다는 이야기 이므로 나머지 페이지들을 보여주기 위한 블럭을 하나 더 만들어 줘야 합니다.

 

그래서 block++을 해줘서 블럭을 하나 더 만들어줍니다.

이렇게 하면 위 공식대로라면 전체페이지24개라면 3개의 블럭이 만들어지겠지요...

 

 

흠 지금까지 전체 페이지와 전체 블럭을 구하는 방법을 배웠습니다.

이제 거의다 한거 같네요 ^ ^

이제 전체페이지와 전체 블록을 이용하기만 하면 됩니다.

 

 

어려운 내용이나 애매모호한 내용이 있다면 댓글주세요. ㅎ

내용이 너무 길어졌네요 다음강좌로 넘어가겠습니다.

 

 

게시판 페이징 알고리즘1과 게시판 페이징 알고리즘2 에서

전체 게시글에서 전체페이지과 전체 블럭을 구하는 방법을 배웠습니다.

 

이제 전체페이지와 전체블럭을 구했으니 이걸 이용하면 됩니다.

 

 

보통 list.jsp에서 글 목록을 보여주지요... 글작성자, 글제목,글작성날짜

게시판 밑에는 위 그림처럼 페이지를 왔다갔다 할수 있는 링크들이 있구요...

 

list.jsp에서 전체페이지와 전체블록을 구하는 공식이 있어서 전체게시글이 100개든 1000개든 10000개든 총 몇개의 페이지가있고 몇개의 블럭이 있는지 계산이 됩니다.

 

잠깐 위 그림을 보시면

1부터 10까지를 블럭1이라 하고

11부터 20까지를 블럭2라 하고

21부터 24까지를 블럭3이라 하겠습니다.

이렇게 하는게 맞겠지요

 

보통 list.jsp를 주소창에 입력할때 파라미터도 같이 보내야 합니다.

list.jsp?block=1&page=3

 

위와 같이 파라미터와 같이 보냅니다. block과 page 파라미터입니다.

이 파라미터들을 list.jsp에서 받아서 사용하면 됩니다.

 

php의 경우

$currentBlock = $_GET["block"];

$currnetPage = $_GET["page"];

 

jsp의 경우

int currentBlock = Integer.parseInt( request.getParameter("block") );

int currentPage = Integer.parseInt( request.getParameter("page") );

 

위와 같이 파라미터를 받아서 해당 게시물을 DB에서 뽑아오면 되겠습니다.

 

 

출처 : http://blog.naver.com/leon1983?Redirect=Log&logNo=140066494563


신고
Posted by hoonihoon85 hoonihoon
2013.10.24 14:04

  if($('input#b_write_title').is(":empty")) {

alert('제목을 입력 해주세요');

return;

}

if($('textarea#b_write_content').is(":empty")) {

alert('본문을 입력해주세요');

return;

}



194down voteaccepted
$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

And you don't necessarily need .length or see if its >0 since an empty string evaluates to false anyway but if you'd like to for readability purposes:

$('#apply-form input').blur(function()
{
    if( $(this).val().length == 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

If you're sure it will always operate on a textfield element then you can just use this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

Also you should take note that $('input:text') grabs multiple elements, specify a context or use thethis keyword if you just want a reference to a lone element ( provided theres one textfield in the context's descendants/children ).


신고
Posted by hoonihoon85 hoonihoon