HTML5 기반으로 MySQL 과 연동하여 테이블을 구성하는 것 연습삼아 작성해봤다.
테이블은 Csharp 연동시 샘플 테이블을 가지고 작성했다.
AutoSet9 은 MySQLi 방식으로 연동된다.
dbconnect.php 파일을 통해서 MySQLi DB와 연동하고 dbClass.php 파일을 연결하여 dbClass 함수를 호출하여 코드를 간결하게 작성했으며, 게시판 Class(boardClass) 에서 만든 코드를 이용하여 실제 코드는 몇줄 안되는 것처럼 보인다.
<?php
require_once 'dbconnect.php'; // db접속 성공
require_once 'phpclass/dbClass.php';
require_once 'phpclass/boardClass.php';
$c = new MySQLiDbClass();
$link_url = $_SERVER['PHP_SELF']; // 현재 실행중인 파일명 가져오기
$rowsPage = 12;
// 화면에 출력할 칼럼 발췌
$flddata ="uid,ItemName,Price,Quantity";
$where ="";
$curPage = isset($_GET['p']) ? $_GET['p'] : 1;
$result = $c->getDbArray('items',$where,$flddata,'',$rowsPage,$curPage);
$totalcnt = $c->getDbRows('items',$where);
$d = new boardClass();
?>
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="../css/table.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="../js/display.js"></script>
</head>
<body>
<div class="container">
<table class="table" width="800">
<thead>
<tr>
<th class="header" width="100">No</th>
<th class="header" width="250">아이템</th>
<th class="header" width="250">가격</th>
<th class="header" width="200">수량</th>
</tr>
</thead>
<?php
// 테이블 리스트
$d->tablelistView($result);
?>
</table>
</div>
<?php $d->PageLinkView($link_url,$totalcnt,$rowsPage,$curPage);?>
</body>
</html>
아래 코드는 위의 HTML 파일과 연관된 내용을 작성한다.
=== dbinfo.php ===
<?php
$db['host'] = "localhost";
$db['name'] = "csharp";
$db['user'] = "root"; // 원래는 root 사용자를 사용하면 안되는데 연습용인지라...
$db['pass'] = "autoset";
$db['port'] = "3306";
?>
=== dbconnect.php ===
<?php
include_once 'phpclass/dbinfo.php';
$DB_CONNECT = isConnectDb($db);
function isConnectDb($db)
{
$conn = mysqli_connect($db['host'],$db['user'],$db['pass'],$db['name'],$db['port']);
mysqli_set_charset($conn, "utf8"); // DB설정이 잘못되어 euc-kr 로 되어 있으면 문제가 됨
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit;
} else {
return $conn;
}
}
?>
=== dbClass.php ===
이 파일은 일부만 발췌하여 적는다.
본 코드에 사용된 함수는 http://link2me.tistory.com/1110 게시글에 올린 첨부파일을 받으면 된다.
class MySQLiDbClass {
//DB데이터 ARRAY -> 테이블에 출력할 데이터 배열
function getDbArray($table,$where,$flddata,$orderby,$rowsPage,$curPage){
global $DB_CONNECT;
$sql = 'select '.$flddata.' from '.$table.($where?' where '.$this->getSqlFilter($where):'').($orderby?' order by '.$orderby:'').($rowsPage?' limit '.(($curPage-1)*$rowsPage).', '.$rowsPage:'');
if($result = mysqli_query($DB_CONNECT,$sql)){
return $result;
}
}
//DB데이터 레코드 총 개수
function getDbRows($table,$where){
global $DB_CONNECT;
$sql = 'select count(*) from '.$table.($where?' where '.$this->getSqlFilter($where):'');
if($result = mysqli_query($DB_CONNECT,$sql)){
$rows = mysqli_fetch_row($result);
return $rows[0] ? $rows[0] : 0;
}
}
//SQL필터링
function getSqlFilter($sql)
{
return $sql;
}
}
=== boardClass.php ===
테이블 리스트를 보여주는 함수는 MySQL 접속인지, MySQLi 접속인지 자동으로 판단하는 함수 로직을 구현하여 코드의 확장성을 고려했다.
게시판에 주로 사용되는 사항을 함수화하여 코드를 간략화하였으나, 개발자 취향에 따라 코드를 함수화해서 사용하든 전부 나열식으로 코딩하든 개발자의 몫이다.
아울러 페이지 링크 부분은 세심하게 테스트까지 마친 코드이다.
class boardClass {
// column 개수, 게시물 총개수 만큼 자동으로 화면 출력
function tablelistView($result){
global $DB_CONNECT;
if(is_object($DB_CONNECT) && get_class($DB_CONNECT)=='mysqli'){
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$view='<tr class="tr1">';
foreach($row as $column => $value) {
$view.='<td class="td2">'.$value.'</td>';
}
$view.='</tr>';
echo $view;
}
} else {
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$view='<tr class="tr1">';
foreach($row as $column => $value) {
$view.='<td class="td2">'.$value.'</td>';
}
$view.='</tr>';
echo $view;
}
}
}
function PageLinkView($link_url,$totalcnt,$rowsPage,$curPage){
echo '<div style="position:relative;vertical-align:top;padding-top:0;margin-top:0">';
echo "<span style='position:absolute;top:10px;'>[총 자료수:".$totalcnt."]</span>";
echo '<div class="pagelink">';
$Info = $this->PageList($totalcnt,$rowsPage,$curPage,'');
if($Info['current_block'] > 2){
echo "<a href='".$link_url."?p=1'>◀</a> ";
}
if($Info['current_block'] > 1){
echo "<a href='".$link_url."?p=".$Info['prev']."'>◁</a> ";
}
foreach($Info['current'] as $w) {
if($curPage == $w){
echo "<a href='".$link_url."?p=".$w."'><span style='color:red;font-size:22pt'>".$w."</span></a> ";
} else {
echo "<a href='".$link_url."?p=".$w."'>".$w."</a> ";
}
}
if($Info['current_block'] < ($Info['total_block'])){
echo "<a href='".$link_url."?p=".$Info['next']."'>▷</a> ";
}
if($Info['current_block'] < ($Info['total_block']-1)){
echo "<a href='".$link_url."?p=".$Info['totalPage']."'>▶</a> ";
}
echo '</div>';
echo '</div>';
}
// $curPage : 현재 페이지, $totalcnt : 총 게시물수
// $block_limit : 한 화면에 뿌려질 게시글 개수
function PageList($totalcnt,$rowsPage,$curPage,$block_limit) {
$block_limit = $block_limit ? $block_limit : 10; // 한 화면에 보여줄 개수 기본 10으로 설정
// 총 페이지수 구하기
$totalPage = ceil($totalcnt/$rowsPage);
if($totalPage == 0) {
++$totalPage;
}
$total_block = ceil($totalPage / $block_limit); //전체 블록 갯수
$curPage = $curPage ? $curPage : 1; // 현재 페이지
// 현재 블럭 : 화면에 표시될 페이지 리스트
$current_block=ceil($curPage/$block_limit);
// 현재 블럭에서 시작페이지
$fstPage = (((ceil($curPage/$block_limit)-1)*$block_limit)+1);
// 현재 블럭에서 마지막 페이지
$endPage = $fstPage + $block_limit -1;
if($totalPage < $endPage) {
$endPage = $totalPage;
}
// 시작 바로 전 페이지
$prev_page = $fstPage - 1;
// 마지막 다음 페이지
$next_page = $endPage + 1;
foreach(range($fstPage, $endPage) as $val) {
$row[] = $val;
}
// 배열로 결과를 돌려준다.
return array(
'total_block' => $total_block,
'current_block' => $current_block,
'totalPage' => $totalPage,
'fstPage' => $fstPage,
'endPage' => $endPage,
'prev' => $prev_page,
'next' => $next_page,
'current' => $row
);
}
}
'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글
| 부트스트랩 버튼 (0) | 2017.01.31 |
|---|---|
| HTML5 테이블 만들기 (체크박스, MySQL 연동) (0) | 2016.11.28 |
| PHP 페이징 처리 (0) | 2016.11.01 |
| 테이블 게시글 순서 변경(tableDnD 활용) (0) | 2016.07.10 |
| [jQuery] 테이블 게시물 순서 바꾸기 (DB 저장처리) (0) | 2016.07.09 |
Link2Me