초보자도 가능한 XE타운 처럼 레이아웃에 경험치바 만들기
이 강좌(팁)는 이런 사람에게 적극적으로 추천합니다.
스킨단에 경험치바를 넣고 싶은 사람, 도전 정신이 있는 사람, 심심한 사람
@보고님의 요청으로 해당 팁을 적었습니다.
이 강좌의 목표는 가능한 쉽게 서술하는 데 있습니다. 따라서 쓸데없는 설명으로 길어질 겁니다.
네, XE타운 우측 상단에 있는 경험치바를 간단하게 만들어봅시다.
일단 소스를 따로따로 분리했지만.. 하나의 문서로 통합해주세요. (쉽게 이해 시키기 위해서 분리한겁니다)
그럼 시작합니다.
일단은 경로는 ../layouts/사용 중인 레이아웃/layout.html에 삽입하시면 됩니다.
$oModuleModel = &getModel('module');
$config = $oModuleModel->getModuleConfig('point');
$oPointModel = &getModel('point');
$point = $oPointModel->getPoint($logged_info->member_srl);
$level = $oPointModel->getLevel($point, $config->level_step);
$next = $config->level_step[$level+1];
$perc = round(($point-$now)/($next-$now)*100, 2);
}
그리고 이제 CSS을 입혀봅시다. 이번에도 그냥 복사하면 됩니다. (Ctrl+c)
/* 경험치바 베이스*/
#bar{border:1px solid #ccc; background:#e9e9e9;}
#bar{height:14px; width:250px;}
/* 경험치 비율 출력 */
.perc{display:inline-block;border:1px solid #8c9bac; background:#332f2e;}
.perc{height:14px; width:{$perc}%; margin:-1px;}
</style>
이제 출력을 해보죠. 아래 소스도 Ctrl+c로 복사해서 적용하시면 됩니다.
잘 따라 오셨다면 다음 처럼 출력됩니다. 오오오!! 신기해라..!!(효과) 흐이잌..
하지만 나는 검정색이 싫다.. 아니면 더욱 꾸미고 싶다 하시는 분들..!!
자, 이번에는 (초보자에게)고급 설정을 알려드릴게요. 이번에는 못 따라오시는 분이 있을지는 모르겠지만.. (설마..)
도전 정신이 강한 분들을 위해 남겨놓을게요.
1. 이것 저것 정보를 출력을 하고 싶어요 뷁에엙!!
레벨 - {$level}
포인트 - {$point}
다음 레벨의 최소 포인트 - {$next}
레벨 퍼센스 출력 - {$perc}
+보너스 (Bonus)
나도 XE타운 처럼 레벨 아이콘도 출력하고 싶다고요..!!! 붸에에엙!!
<img src="{sprintf('%smodules/point/icons/%s/%d.gif', Context::getRequestUri(), $config->level_icon, $level)}" />
그냥 레이아웃에 해당 코드를 삽입하면 출력합니다.
2. 레이아웃바를 원하는대로 수정하고 싶어요 뷁에엙!!
<style> CSS 부분만 수정하면 됩니다. 수정하면 되는 부분에 대해 설명할게요.
#bar 부분의 background의 #e9e9e9부분은 밑색입니다. 원하시는 걸로 변경해도 좋아요.
#bar height는 높이를 width는 길이를 의미합니다. 숫자를 변경하면 원하시는 높이나 길이로 조정 가능합니다.
.perc 부분의 background의 #332f2e부분은 그래프(바)색입니다. 원하시는 걸로 변경해도 좋아요.
.perc 부분의 width는 건드리지 마시고 만약 #bar의 height을 수정하셨다면 .perc의 height 부분도 똑같이 수정해야 합니다.
수고하셨습니다.(여러분 말고 글쓴이 본인에게요)
추천도 좋지만 사실 댓글이 더 보기 좋습니다 ~_~
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
끝입니다. 두근?
![3_00001.jpg [File Size:3.2KB/Download:5]](/files/download/link/686082/ecfdc48262c833ce2316aa2a792c2e76/3_00001.jpg){kind=link}
댓글 44
혹시 코노리님 경험치 시스템 모듈 사용 중이신가요?
위 팁은 포인트를 이용해서 경험치로 재 활용한겁니다 :)
글쎄요.. 코노리님의 경험치 모듈은 사용해본 적이 없어서..
나중에 시간되면 한 번 확인해볼게요 ㅎㅎ..
도전 정신이 있는 사람, 심심한 사람 매우 중요!! ㅋㅋ
[알림] 죄송합니다. <출력> 부분에 수정된 부분이 있으니 해당 소스로 다시 변경해주시면 좋을 것 같습니다.
따라해도 되지만 모험을 떠나고 싶은 사람에게만 추천합니다.
적용해봤는데
퍼센테이지에 문제가 조금 있는거같아요
5렙에서6렙이 되었다고 가정했을때
5렙에서 6렙까지의 포인트를 퍼센트로 계산하지 않아서
6렙 막 찍었더라도 퍼센트는 50%로 나오네요 ㅎㅎ
이렇게하면 될것같네요 ㅎㅎ
다시 고친게 이거였네요. 이제보니 원소스가 저부분이네요. 죄송합니다.
추가로 혹시 만렙을 달성한 사람에게는 만렙으로 표시하는 선언을 알 수 있을런지요?
감사합니다.!
고급 설정에서 {$level} 추가하면 레벨이 출력된다고 했었죠? 그거를 아래처럼 교체합니다.
<!--@if($level >= Max레벨)-->만렙이다!<!--@else-->{$level}<!--@end--> 이렇게 해보세요.
{@
$oModuleModel = &getModel('module');
$config = $oModuleModel->getModuleConfig('point');
$oPointModel = &getModel('point');
$point = $oPointModel->getPoint($logged_info->member_srl);
$level = $oPointModel->getLevel($point, $config->level_step);
$next = $config->level_step[$level+1];
$perc = round(($point-$now)/($next-$now)*100, 2);
}
이거 대신에
{@
$oExperienceModel = getModel('experience');
$experience = $oExperienceModel->getExperience($logged_info->member_srl);
$config = $oExperienceModel->getModuleConfig();
$level = $oExperienceModel->getLevel($experience, $config->level_step);
$level_per = $oExperienceModel->getLevelPer($experience, $config);
$next = $config->level_step[$level+1];
}
이걸 양념해서 쓰시면 됩니다.
좋은 자료 감사합니다.
선언문에 하나가 빠진것 같습니다. 아래처럼 선언문에 추가하면 정확할 것 같아요.
$now = $config->level_step[$level];
이걸 추가하지 않으면, 그냥 단순히 "현재포인트/다음레벨 포인트" 로 퍼센트를 계산하게 되네요
센스쟁이 팀워크님! 감사합니다 ㅎ