댓글 목록

상담 게시판 만들기 #4

페이지 정보

작성자 운영자 작성일 18-01-23 11:53 조회 1,711 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

상담 게시판중 글내용 보기 화면을 구현하겠습니다.


해당 파일 : view.skin.php


43281f6cdad1eec44c1d83bb9e9dabdd_1516675431_1574.png
 

글내용 보기 화면에서는 상담글쓰기에 등록된 내용을 모두 표현해 주어야 합니다.

여기서는 상담구분, 성명, 연락처를 보여주고

상단에는 특별히 상태를 그래픽으로 표현해 보았습니다.


목록에서 표현한 '접수', '상담중', '완료'와 같은 색을 갖고 진행상태에 대한 10%, 70%, 100%로 구현했습니다.

이 부분은 css부분에 코드가 조금 추가되었습니다.


입력한 정보를 목록으로 보여주는 코드 :

<span>상담구분</span> <?php echo $view['wr_1'] ?><br>
<span>작성자</span> <strong><?php echo $view['name'] ?><?php if ($is_ip_view) { echo "&nbsp;($ip)"; } ?></strong><br>
<span>연락처</span> <?php echo $view['wr_subject'] ?><br>
<span>댓글</span><strong><a href="#bo_vc"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <?php echo number_format($view['wr_comment']) ?>건</a></strong><br>
<span>조회</span><strong><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($view['wr_hit']) ?>회</strong><br>
<strong><span>작성일</span><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></strong>


진행상태를 구현하기 위한 php 코드 :

if($view['wr_10'] == '접수'){
  $stat_i = "stat_1";
  $stat_text1 = '10%';
  $stat_text2 = '접수';
} else if($view['wr_10'] == '상담중'){
  $stat_i = "stat_2";
  $stat_text1 = "70%";
  $stat_text2 = "상담중";
} else {
  $stat_i = "stat_3";
  $stat_text1 = "100%";
  $stat_text2 = "완료";
}


상태 화면 구현을 위한 코드 :

<div id="bo_v_title">
  <div class="stat_percent <?php echo $stat_i;?>"><span><?php echo $stat_text1;?></span><?php echo $stat_text2;?></div>
</div>


아래는 view.skin.php 반영을 위한 css 코드입니다.

#bo_v_title {background-color:#ddd;}
#bo_v_title .stat_percent{
  text-align:right;
  padding-right:20px;
  line-height:40px;
  color:white;
}

#bo_v_title span{
  position:absolute;
  left:30px;
  line-height:40px;
  color:white;
}

#bo_v_title .stat_1 {width:20%;background-color:#4caf50;}
#bo_v_title .stat_2 {width:70%;background-color:#2196f3;}
#bo_v_title .stat_3 {width:100%;background-color:#f44336;}



첨부파일

댓글목록 0

등록된 댓글이 없습니다.