이미지 게시판 구현하려 하는데요

362 views

Skip to first unread message

이영재

unread,

Jun 18, 2012, 5:01:48 AM6/18/12

to appspr...@googlegroups.com

인터넷 서치해서 아래 소스를 찾긴 했는데요...

제가 프로그래머가 아니라서 아래의 소스가 맞는건지, 어떤 원리로 반응하는지를 모르겠습니다 ㅠ

아래 소스는 jsp 게시판에 연동 된거 같은데요... php에도 적용 가능한 소스 일까요?

도와주세요...

<!DOCTYPE html>

<html>

<head>

<style>

.portrait div[data-role=content]

{

background-color: #FFFFFF;

}

#addlist { background:yellow; }

</style>

$(document).ready(function() {

$("#lee").bind('click' , function() {

alert("고객이 등록한 분실물 내용을 보고 분실자에게 연락하여 물건을 보관 하고 있으니 택배비와 사례비를 요구하고 돈을 받은 후 자취를 감추는 사기 행위가 발생하고 있습니다. 고객여러분께서는 잃어버린 물건을 보관하고 있다는 전화를 받을 경우 먼저 돈을 입금하는 일이 없도록 유의하시기 바랍니다.");

});

var j = 1;

var i = 10;

var search_compare=0;

var compare = 0;

init()

function init()

{

if (compare == 0)

{

jQuery("#findme li").remove();

}

if(compare == 1)

{

$('li').remove('#addlist');

}

compare = 0;

var url = "http://61.85.36.148:8089/leeboard/boardInfoListXML.jsp";

if(search_compare == 0)

{

ax.ext.net.post(url ,{'start' : j , 'end' : i }, on_Success ,on_Error );

}

if(search_compare == 1)

{

var aa = "titleText";

var asdf = $("#search").val();

ax.ext.net.post(url ,{'keyfield' : aa , 'keyword': asdf}, on_Success ,on_Error );

}

search_compare = 0;

function on_Success(result) {

$("#home").unbind("click");

$("#search_button").unbind("click");

xml = $.parseXML( result.data );

var articleCnt = $(xml).find("articles").find("articleCnt").text();

$(xml).find("articles").find("article").each(function(){

var title = $(this).find("title").text();

var boardIdx = $(this).find("boardIdx").text();

var write_user = $(this).find("write_user").text();

var reg_date = $(this).find("reg_date").text();

var brdCmtCnt = $(this).find("brdCmtCnt").text();

var li = $('<li id = '+boardIdx+'><a rel=external href=#board_show><h1>'+ title + '</h1><span class="ui-li-count">댓글 [' + brdCmtCnt + ']</span><p> '+ write_user +'</p><p>' + reg_date + '</p></a></li>');

$('#findme').append(li);

$('#findme').listview('refresh');

$("#"+boardIdx+"").bind('click' , function() {

// $("#cntcmt_insert").unbind("click");

page_show(boardIdx )

});

$("#home").one('click' , function() {

j = 1;

i = 10;

jQuery("#findme li").remove();

init();

});

$("#search_button").one('click' , function() {

search_compare=1;

init();

});

//게시판목록추가해서보기

if (articleCnt > 10)

{

if(i > articleCnt)

{

return 0;

}

var li = $('<li id="addlist"><h3>-이전 게시물 10개 더 보기 </h3></li>');

$('#findme').append(li);

$("#addlist").unbind("click");

$("#addlist").one('click' , function() {

i = i + 10 ;

j = j + 10 ;

compare = 1;

init();

});

}

if (articleCnt <= 10)

{

i = 10;

}

}}

function page_show (boardIdx )

{

jQuery("#cntcmt li").remove();

$("#edit_board").unbind("click");

$("#del").unbind("click");

$("#board_reply").unbind("click");

$("#cntcmt_insert").unbind("click");

$("#cntcmt li").unbind("click");

ax.ext.net.get('http://61.85.36.148:8089/leeboard/boardgoXML.jsp?boardIdx='+boardIdx+'',on_Success, on_Error);

function on_Success(result) {

xml = $.parseXML( result.data );

var title = $(xml).find("article").find("title").text();

var write_user = $(xml).find("article").find("write_user").text();

var write_Email = $(xml).find("article").find("write_Email").text();

var txt = $(xml).find("article").find("content").text();

var getGrpDep = $(xml).find("article").find("getGrpDep").text();

var getIdxGrp = $(xml).find("article").find("getIdxGrp").text();

var getOrderNo = $(xml).find("article").find("getOrderNo").text();

var preview = "제목 : " + title + "<br/> 작성자 : " + write_user + "<br/> " + txt + "<br/><br/>";

$("#sdjfksd").html(preview);

// });

////////////////////////////////////////////////////////////////////////////////

//댓글

var count = 1;

$("#cntcmt li").unbind("click");

$(xml).find("article").find("art").each(function(){

var getCmtIdx = $(this).find("getCmtIdx").text();

var getContentText = $(this).find("getContentText").text();

var li = $('<li id = '+getCmtIdx+'><h1>'+ getContentText + '</h1></li>');

$('#cntcmt').undelegate("#"+getCmtIdx+"", "click");

$('#cntcmt').append(li);

$('#cntcmt').delegate("#"+getCmtIdx+"", "click", function (e) {

// $(this).parent('li').remove();

// $(this).children().remove();

// $(this).parent("#cntcmt li").detach();

// $("#cntcmt li").empty();

// $(this).unbind("click");

// $("#"+getCmtIdx+"").unbind("click");

$("#cntcmt li").unbind("click");

var successCB = function(o){

// $("#"+getCmtIdx+"").unbind("click");

// $(this).unbind("click");

// $(this).undelegate("#cntcmt li");

// $('#li').die();

// $(this).parent().remove();

page_show(boardIdx);

// return false;

};

var errorCB = function(e){

alert("error");

};

// $("#"+getCmtIdx+"").unbind("click");

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardCmtDelete";

ax.ext.net.post(url ,{'cmtIdx' : getCmtIdx , 'boardIdx': boardIdx}, successCB ,errorCB );

// $("#"+getCmtIdx+"").unbind("click");

// return false;

// $(this).parent().remove();

// $("#cntcmt li").empty();

// $(this).unbind("click");

});

$(this).closest('li');

$('#cntcmt').listview('refresh');

//////////////////////////////////////////////////////////////////////////////////

//댓글삭제//////////

/* $("#cntcmt li").bind('click' , function() {

alert("asdf");

var successCB = function(o){

page_show(boardIdx);

};

var errorCB = function(e){

alert("error");

};

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardCmtDelete";

ax.ext.net.post(url ,{'cmtIdx' : getCmtIdx , 'boardIdx': boardIdx}, successCB ,errorCB );

});*/

/////////////////////////////////////////////////////////////////////////////////////

count++;

});

//댓글등록

$("#cntcmt_insert").bind('click' , function() {

var successCB = function(o){

page_show(boardIdx);

};

var errorCB = function(e){

alert("error");

}; //&contentText=이경원바보

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardCmtInsert";

var cntcmt_text = $("#cntcmt_text").val();

ax.ext.net.post(url ,{'contentText' : cntcmt_text ,'boardIdx' : boardIdx}, successCB ,errorCB );

$("#cntcmt_text").val("");

});

////////////////////////////////////////////////////////////////////////////////

//답글

$("#board_reply").one('click' , function() {

var successCB = function(o){

i = 10;

j = 1;

init();

};

var errorCB = function(e){

alert("error");

};

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardReply&boardIdx="+boardIdx+"&idxGrp="+getIdxGrp+"&grpDep="+getGrpDep+"&orderNo="+getOrderNo+"";

var BoardContent_reply = $("#BoardContent_reply").val();

var title_reply = " " + " └re " + $("#title_reply").val();

var username_reply = $("#username_reply").val();

var email_reply = $("#email_reply").val();

ax.ext.net.post(url ,{'boardContent' : BoardContent_reply , 'titleText': title_reply , 'regUserName' : username_reply , 'regUserEmail' : email_reply}, successCB ,errorCB );

$("#BoardContent_reply").val("");

$("#title_reply").val("");

$("#username_reply").val("");

$("#email_reply").val("");

});

//답글

////////////////////////////////////////////////////////////////

//수정

$("#BoardContent").val("");

$("#titleText").val("");

$("#regUserName").val("");

$("#regUserEmail").val("");

edit_init(title , write_user , txt , write_Email)

function edit_init(title , write_user , txt , write_Email)

{

txt = txt.replace(/<.*?>/g,'');

$("#titleText").val($("#titleText").val()+title);

$("#regUserName").val($("#regUserName").val()+write_user);

$("#BoardContent").val($("#BoardContent").val()+txt);

$("#regUserEmail").val($("#regUserEmail").val()+write_Email);

}

$("#edit_board").one('click' , function() {

var successCB = function(o){

i = 10;

j = 1;

init();

};

var errorCB = function(e){

alert("error");

ax.ext.ui.alert(e, function(){});

};

var aa = 1;

aa = boardIdx;

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardModify";

var BoardContent = $("#BoardContent").val();

var titleText = $("#titleText").val();

var regUserName = $("#regUserName").val();

var regUserEmail =$("#regUserEmail").val();

ax.ext.net.post(url ,{'boardIdx' : aa , 'boardContent' : BoardContent , 'titleText': titleText ,'regUserEmail' : regUserEmail , 'regUserName' : regUserName}, successCB ,errorCB );

});

//수정

///////////////////////////////////////////////////////

}

//삭제

$("#del").one('click' , function() {

var successCB = function(o){

i = 10;

j = 1;

init();

};

var errorCB = function(e){

alert("error");

ax.ext.ui.alert(e, function(){});

};

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardDeletePermanent";

ax.ext.net.post(url ,{'boardIdx' : boardIdx}, successCB ,errorCB );

});

//삭제

/////////////////////////////////////////////////////////

}

function on_Error(error)

{

alert(error.message);

}

$("#board_insert").click(function() {

var successCB = function(o){

init();

};

var errorCB = function(e){

alert("error");

};

var url = "http://61.85.36.148:8089/leeboard/siteMng/testList.do?mode=boardInsert";

var BoardContent_insert = $("#BoardContent_insert").val();

var titleText_insert = $("#titleText_insert").val();

var username_insert = $("#username_insert").val();

var useremail_insert = $("#useremail_insert").val();

ax.ext.net.post(url ,{'boardContent' : BoardContent_insert , 'titleText': titleText_insert , 'regUserName' : username_insert , 'regUserEmail' : useremail_insert}, successCB ,errorCB );

$("#BoardContent_insert").val("");

$("#titleText_insert").val("");

$("#username_insert").val("");

$("#useremail_insert").val("");

});

</script>

</head>

<body>

<!--

<a id = "insert_board" data-role="button" href=#insert_board>게시물등록</a>

-->

</div>

</div>

</ul>

<p></p>

</div>

<p>게시물댓글...</p>

<div>

</ul></div>

<p></p>

<a id = "edit_page" href="#edit_show" class="button orange">게시물수정</a>

<a id = "reply_page" href="reply_show" class="button orange">게시물답글</a>

</div>

</div>

<li id = "edit_board"><a id = "edit_board" onclick='history.go(-2) ; return false;' rel="external" data-role="button" data-direction="reverse">게시물수정</a></li>

<li id = "del"><a id = "del" onclick='history.go(-2) ; return false;' rel="external" data-role="button" data-direction="reverse">게시물삭제</a></li>

<!-- <a href='#' onclick='history.go(-2) ; return false;'>history.back(-1)</a>

<li id = "del"><a id = "del" onclick='history.go(-2) ; return false;' rel="external" data-role="button" href="#" data-rel="back" data-direction="reverse">게시물삭제</a></li> -->

</div>

<!--

style="overflow:scroll; border:1px solid #ff0000;" cols="40" rows="8"

-->

</div>

</body>

</html>

<!--

// $("input[name=USERID]").val(""); //입력했던 아이디 초기화

-->

[출처] 앱스프레소를 이용한 게시판|작성자 lkw

Geunwoo Shim

unread,

Jun 19, 2012, 9:34:24 AM6/19/12

to appspr...@googlegroups.com

소스를 다 읽어본 건 아니고 훑어봤는데요, 앱스프레소로 만들어진 클라이언트단의 소스입니다.

해당 소스는 게시판이 PHP냐 JSP냐에 영향을 받는 것은 아니구요.

앱스프레소의 CURL API 를 이용해서 게시판에 접속한 이후에 그 내용에서 필요한 변수나 내용을 파싱해서

JQUERY 와 CSS 를 이용해 게시판 형태로 보여주고 그걸 앱스프레소로 앱의 형태로 감싸주는 소스입니다.

해당 게시판을 어떻게 쨔느냐는 PHP로 짜거나 JSP로 짜거나 설사 ASP로 짜더라도 위의 소스와는 무관합니다.

위의 소스가 원하는 형식대로 게시판 구조와 내용을 구성하시기만 하면 됩니다.

2012년 6월 18일 월요일 오후 6시 1분 48초 UTC+9, 이영재 님의 말:

깊은생각

unread,

Jun 19, 2012, 10:55:12 PM6/19/12

to appspr...@googlegroups.com

Geunwoo Shim 님께서 거의 완벽한 답변을 해 주셨지만 약간만 첨언한다면,

게시판을 만들려면 서버와 클라이언트 양쪽을 모두 고려해야합니다.

}; //&contentText=이경원바보

첨부하신 코드는 위와 같은 부분도 있는 것으로 보아 아직 테스트 단계로 추정됩니다.

참고는 할 수 있지만, 이 코드를 그대로 사용하는건 좀 어려울 것으로 보입니다.

코드상에서 61.85.36.148:8089 서버와 이런 저런 메시지를 주고 받고 있는데, 이때 사용하는

메시지 포맷은 이 앱스프레소 앱의 클라이언트 코드에 맞게 정의되어 있을 것이기 때문입니다.

즉.. 만드시려는 게시판이 이 앱스프레소 앱과 동일하고, php 서버쪽에서 메시지 내려주는 부분도

61.85.36.148:8089 서버에서 내려줄 메시지와 동일하지 않는 이상 이 코드를 그대로 사용할 수는

없습니다.

이 코드에서 게시판의 기본적인 동작 (create, read, update, delete) 을 포함하고 있으니..

먼저, 만드시려는 게시판의 형태에 따라 앱스프레소 클라이언트 앱과 php 서버 사이의 메시지 형태를

정의하시고, 그에 따른 클라이언트 구현을 할 때 이 코드를 참고해서 진행하면 될 것 같습니다.

2012년 6월 19일 화요일 오후 10시 34분 24초 UTC+9, Geunwoo Shim 님의 말:

Reply all

Reply to author

Forward

0 new messages