코멘트 출력 스킨 수정
본문
안녕하세요 위의 이미지와 같이
view_comment_skin.php 파일을 설정하고 싶은데
초보적인 셀렉트 박스 > 이미지 출력 부분부터 막혀서 이걸 해결해도 스크립트 내에 어떻게 넣어야할지 모르겠어서 질문하러 왔습니다ㅠㅠ...
몇몇개 소스 찾아보며 헤딩하고 있는데 익플버전이거나..이것저것 이거다! 싶은게 계속 안나오네요ㅠ
+근데 옵션을 50개 가량 할거 같아서 셀렉트 박스보단 역시 텍스트 박스로 출력하거나
여분필드를 이용해서 텍스트 박스에 링크를 입력하면 이미지가 뜨는 방식을 새로이 생각하고 있습니다.
여분필드 값은 wr_6 을 사용할거 같습니다만...코멘트 부분도 여분 필드 사용이 가능한지요?...
팁이나마 부탁드립니다..ㅠㅠ...
뷰 코멘트 스킨 부분입니다
view_comment_skin.php
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<script type="text/javascript">
// 글자수 제한
var char_min = parseInt(<?=$comment_min?>); // 최소
var char_max = parseInt(<?=$comment_max?>); // 최대
</script>
<? if ($cwin==1) { ?><table width=100% cellpadding=10 align=center><tr><td><?}?>
<!-- 코멘트 리스트 -->
<div id="commentContents">
<?
for ($i=0; $i<count($list); $i++) {
$comment_id = $list[$i][wr_id];
?>
<a name="c_<?=$comment_id?>"></a>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td><? for ($k=0; $k<strlen($list[$i][wr_comment_reply]); $k++) echo " "; ?></td>
<td width='100%'>
<table border=0 cellpadding=0 cellspacing=0 width=100% >
<tr>
<td height=1 colspan=3 bgcolor="#202020"><td>
</tr>
<tr>
<td height=1 colspan=3></td>
</tr>
<tr>
<td valign=top>
<div style="height:28px; background-color: rgba(0, 0, 0, 0.0); clear:both; line-height:28px;">
<div style="float:left; margin:2px 0 0 2px;">
<strong><?=$list[$i][name]?></strong>
<span style="color:#888888; font-size:11px;"><?=$list[$i][datetime]?></span>
</div>
<div style="float:right; margin-top:5px;">
<? if ($is_ip_view) { echo " <span style=\"color:#B2B2B2; font-size:11px;\">{$list[$i][ip]}</span>"; } ?>
<? if ($list[$i][is_reply]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'c');\">답변</a> "; } ?>
<? if ($list[$i][is_edit]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'cu');\">수정</a> "; } ?>
<? if ($list[$i][is_del]) { echo "<a href=\"javascript:comment_delete('{$list[$i][del_link]}');\">삭제</a> "; } ?>
</div>
</div>
<!-- 코멘트 출력 -->
<div style='line-height:20px; padding:7px; word-break:break-all; overflow:hidden; clear:both; color:white;margin-left:50px;'>
<?
if (strstr($list[$i][wr_option], "secret")) echo "<span style='color:#ff6600;'>*</span> ";
$str = nl2br(stripslashes($list[$i]['wr_content']));
if (strstr($list[$i][wr_option], "secret"))
$str = "<span class='small' style='color:#ff6600;'>$str</span>";
$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $str);
// FLASH XSS 공격에 의해 주석 처리 - 110406
//$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(swf)\".*\<\/a\>\]/i", "<script>doc_write(flash_movie('$1://$2.$3'));</script>", $str);
$str = preg_replace("/\[\<a\s*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(gif|png|jpg|jpeg|bmp)\"\s*[^\>]*\>[^\s]*\<\/a\>\]/i", "<img src='$1://$2.$3' id='target_resize_image[]' onclick='image_window(this);' border='0'>", $str);
echo $str;
?>
</div>
<? if ($list[$i][trackback]) { echo "<p>".$list[$i][trackback]."</p>"; } ?>
<span id='edit_<?=$comment_id?>' style='display:none;'></span><!-- 수정 -->
<span id='reply_<?=$comment_id?>' style='display:none;'></span><!-- 답변 -->
</div>
<input type=hidden id='secret_comment_<?=$comment_id?>' value="<?=strstr($list[$i][wr_option],"secret")?>">
<textarea id='save_comment_<?=$comment_id?>' style='display:none;'><?=get_text($list[$i][content1], 0)?></textarea></td>
</tr>
<tr>
<td height=5 colspan=3></td>
</tr>
</table>
</td>
</tr>
</table>
<? } ?>
</div>
<!-- 코멘트 리스트 -->
<? if ($is_comment_write) { ?>
<!-- 코멘트 입력 -->
<div id=comment_write style="display:none;">
<table width=100% style="border-radius: 7px; border: 3px solid #202020;"cellpadding=1 cellspacing=0 bgcolor="Transparent"><tr><td>
<form name="fviewcomment" method="post" action="./write_comment_update.php" onsubmit="return fviewcomment_submit(this);" autocomplete="off" style="margin:0px;">
<input type=hidden name=w id=w value='c'>
<input type=hidden name=bo_table value='<?=$bo_table?>'>
<input type=hidden name=wr_id value='<?=$wr_id?>'>
<input type=hidden name=comment_id id='comment_id' value=''>
<input type=hidden name=sca value='<?=$sca?>' >
<input type=hidden name=sfl value='<?=$sfl?>' >
<input type=hidden name=stx value='<?=$stx?>'>
<input type=hidden name=spt value='<?=$spt?>'>
<input type=hidden name=page value='<?=$page?>'>
<input type=hidden name=cwin value='<?=$cwin?>'>
<input type=hidden name=is_good value=''>
<table width=100% cellpadding=3 height=156 cellspacing=0 bgcolor="Transparent" style="background-color: rgba(0, 0, 0, 0.0); border: 0px; height: auto; padding:15px; padding-bottom:25px;padding-top:25px;">
<tr>
<td colspan="2" style="padding:5px 0 0 5px;">
<? if ($is_guest) { ?>
이름 <INPUT type=text maxLength=20 size=10 name="wr_name" itemname="이름" required class=ed>
패스워드 <INPUT type=password maxLength=20 size=10 name="wr_password" itemname="패스워드" required class=ed>
<? if ($is_guest) { ?>
<img id='kcaptcha_image' />
<input title="왼쪽의 글자를 입력하세요." type="input" name="wr_key" size="10" itemname="자동등록방지" required class=ed>
<?}?>
<? } ?>
<? if ($comment_min || $comment_max) { ?><span id=char_count></span>글자<?}?>
</td>
</tr>
<tr>
<td width=95%>
<textarea id="wr_content" name="wr_content" rows=8 itemname="내용" required
<? if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> style='color:white; width:100%; word-break:break-all; background-color: rgba(0, 0, 0, 0.5); border:1px solid #202020' class=tx></textarea>
<? if ($comment_min || $comment_max) { ?><script type="text/javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
</td>
<td width=85 align=center>
<div><input type="image" src="<?=$board_skin_path?>/img/co_btn_write.png" border=0 accesskey='s'></div>
</td>
</tr>
</table>
</form>
</td></tr></table>
</div>
<script type="text/javascript" src="<?="$g4[path]/js/jquery.kcaptcha.js"?>"></script>
<script type="text/javascript">
var save_before = '';
var save_html = document.getElementById('comment_write').innerHTML;
function good_and_write()
{
var f = document.fviewcomment;
if (fviewcomment_submit(f)) {
f.is_good.value = 1;
f.submit();
} else {
f.is_good.value = 0;
}
}
function fviewcomment_submit(f)
{
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
f.is_good.value = 0;
/*
var s;
if (s = word_filter_check(document.getElementById('wr_content').value))
{
alert("내용에 금지단어('"+s+"')가 포함되어있습니다");
document.getElementById('wr_content').focus();
return false;
}
*/
var subject = "";
var content = "";
$.ajax({
url: "<?=$board_skin_path?>/ajax.filter.php",
type: "POST",
data: {
"subject": "",
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
f.wr_content.focus();
return false;
}
// 양쪽 공백 없애기
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
if (char_min > 0 || char_max > 0)
{
check_byte('wr_content', 'char_count');
var cnt = parseInt(document.getElementById('char_count').innerHTML);
if (char_min > 0 && char_min > cnt)
{
alert("코멘트는 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
} else if (char_max > 0 && char_max < cnt)
{
alert("코멘트는 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
else if (!document.getElementById('wr_content').value)
{
alert("코멘트를 입력하여 주십시오.");
return false;
}
if (typeof(f.wr_name) != 'undefined')
{
f.wr_name.value = f.wr_name.value.replace(pattern, "");
if (f.wr_name.value == '')
{
alert('이름이 입력되지 않았습니다.');
f.wr_name.focus();
return false;
}
}
if (typeof(f.wr_password) != 'undefined')
{
f.wr_password.value = f.wr_password.value.replace(pattern, "");
if (f.wr_password.value == '')
{
alert('패스워드가 입력되지 않았습니다.');
f.wr_password.focus();
return false;
}
}
if (!check_kcaptcha(f.wr_key)) {
return false;
}
return true;
}
/*
jQuery.fn.extend({
kcaptcha_load: function() {
$.ajax({
type: 'POST',
url: g4_path+'/'+g4_bbs+'/kcaptcha_session.php',
cache: false,
async: false,
success: function(text) {
$('#kcaptcha_image')
.attr('src', g4_path+'/'+g4_bbs+'/kcaptcha_image.php?t=' + (new Date).getTime())
.css('cursor', '')
.attr('title', '');
md5_norobot_key = text;
}
});
}
});
*/
function comment_box(comment_id, work)
{
var el_id;
// 코멘트 아이디가 넘어오면 답변, 수정
if (comment_id)
{
if (work == 'c')
el_id = 'reply_' + comment_id;
else
el_id = 'edit_' + comment_id;
}
else
el_id = 'comment_write';
if (save_before != el_id)
{
if (save_before)
{
document.getElementById(save_before).style.display = 'none';
document.getElementById(save_before).innerHTML = '';
}
document.getElementById(el_id).style.display = '';
document.getElementById(el_id).innerHTML = save_html;
// 코멘트 수정
if (work == 'cu')
{
document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
if (typeof char_count != 'undefined')
check_byte('wr_content', 'char_count');
if (document.getElementById('secret_comment_'+comment_id).value)
document.getElementById('wr_secret').checked = true;
else
document.getElementById('wr_secret').checked = false;
}
document.getElementById('comment_id').value = comment_id;
document.getElementById('w').value = work;
save_before = el_id;
}
if (typeof(wrestInitialized) != 'undefined')
wrestInitialized();
//jQuery(this).kcaptcha_load();
if (comment_id && work == 'c')
$.kcaptcha_run();
}
function comment_delete(url)
{
if (confirm("이 코멘트를 삭제하시겠습니까?")) location.href = url;
}
comment_box('', 'c'); // 코멘트 입력폼이 보이도록 처리하기위해서 추가 (root님)
</script>
<? } ?>
<? if($cwin==1) { ?></td><tr></table><p align=center><a href="javascript:window.close();"><img src="<?=$board_skin_path?>/img/btn_close.gif" border="0"></a><br><br><?}?>
답변 1
보통 스킨은
for ($i=0; $i<$cmt_amt; $i++) {
부터가 코멘트를 리스트를 보여주는 부분이다
여기서 보다시피
$comment_id = $list[$i]['wr_id'];
$cmt_depth = ""; // 댓글단계
$cmt_depth = strlen($list[$i]['wr_comment_reply']) * $depth_gap;
$comment = $list[$i]['content'];
$cmt_sv = $cmt_amt - $i + 1; // 댓글 헤더 z-index 재설정 ie8 이하 사이드뷰 겹침 문제 해결
등등의 여러 소스가 있지만
첩부 파일을 가져오기위해서는 데이타 베이스의 g5_board_file 테이블의 구조와 게시판의 구조를 이해해야 한다
하지만 php 소스의 구동 방법이나 함수를 이해햇다해도
<div class="media-body">
<div class="media-heading">
등등의 css 의 class 의 속성을 알아야 보여주는 부분을 만들수 있다
그러므로 질문자가 위작업을 수행하기위해서는
css 파일 즉 style.css 의 내용을 알지 못하고 질문 을 하면 안된다
위부분은 간단하게 디자인 문제를 애기한것이고
보통 이미지를 가져오기위해서는 게시판구조의 필드 wr_id와 g5_board_file 의 wr_id와 의 조인을 통해 가져온다
게시판의 wr_id숫자가 21 라면 g5_board_file 의 구조에도 wr_id 의 번호가 같은 것이 있다 또한 그 필드에는 bf_no 필드가 잇는데 거기의 숫자가 0이면 첫번째 2두번째 파일이다
이러한 것을 간편하기위해 그누보드 기본 소스에는 get_view_thumbnail 로 정의하고있다
또한
get_view_thumbnail 의 정의는 lib 폴더안에 안에 thumbnail.lib.php 의 인터넷 이미지를 만드는 소스가 잇다
우선 코 맨트는 첩부 파일이 없기때문에 만들어줘야한다 그것은
<form name="fviewcomment"
method=
"post"
action=
"./write_comment_update.php"
onsubmit=
"return fviewcomment_submit(this);"
autocomplete=
"off"
style=
"margin:0px;"
>
이안에 써야 한다
-안에 써들어 가는 소스테그들은 write.skin.php 의 페이지 디자인 소스와
write_update.php 의 하다에 보이는 첩부 파일 소스를 참고해서 개발을 해야한다
</form>