[教學] PHP & MySQL 學習筆記第11堂（資料庫建置：資料庫排序並於網頁呈現） ~ PJCHENder<br>那些沒告訴你的小細節

非常抱歉，關於部落格內 PHP 的部分目前已經停止維護，因本人已經很久沒有寫 PHP ，且文章中所使用的 PHP 版本偏舊，希望有心學習 PHP 的朋友們，可以參考 Codecademy 的課程，或近一步嘗試 Laravel 這個 PHP 框架（可透過 laracasts 學習），若有找不到錯的學習資源也歡迎在留言串分享，方便有需要的人能夠有更多學習的管道！

在這一堂課我們同樣會沿用「 PHP & MySQL 學習筆記第八堂（phpMyAdmin資料庫建置並呈現於網頁）」所使用的資料庫，這次則是練習將資料庫作排序的動作。

點這裡可以看到這堂課的結果。

本次會學習到的函數共包含：

mysql_query("select * from 資料表名稱 order by 欄位名稱 desc)：依據欄位名稱排序，預設是asc（遞增排序），若想改成遞減則在最後加上desc

if( ){ } else if( ){ }：

按照欄位名稱排序

若希望資料檔根據欄位名稱加以排序，只需要使用 order by 這個指令就可以了，這個指令的預設值（不打的話）會是遞增排列（asc），如果我們希望是遞減排列的話，可以在最後面加上desc。

但是我們很重要的是希望能夠讓網友自己選擇它要針對那個欄位排序，而不是我已經幫它排好序了，所以我們需要透過更多的語法來達到這個目的。

首先，我們將第八堂（phpMyAdmin資料庫建置並呈現於網頁）的表格再次拿出來，然後在姓名的地方利用DW加上超連結，這裡的超連結需要設定一下，不是直接連到自己，而是建立兩個變數，一個叫c（放欄位名稱），一個叫s。如果是性別的話就設c=memSex，所以其中一個會連到s=1，另一個會連到s=2

設定好了後s=1的部分後，我們到程式碼的地方，直接把超連結的部分複製，在後面再貼上一遍，然後把後面的那個s改成2，這個s是方便我們之後做遞增遞減排列用的。

這時候，會看到有兩個性別，他們分別會連到不同的網站，接下來，我們就要把兩個性別變成一個性別。

做的方法一樣要用php的if指令

先把兩個連結排好

這裡很巧妙的用s這個變數，如果s不等於1，則顯示會連結到s=2的性別，相反地，如果s=1，則顯示會連結到s=1的那個性別連結。

記得如果我們想要擷取網頁上的變數，可以用$_GET['變數名稱']這個指令

這時候，性別就為合而為一了，點點看，會發現點的時候後面的網址會跟著變。

為了接下來方便操作，我把$_GET['s']這個變數，取名叫做$s

所以原本的地方，也要改成$s

把$_GET['c']這個變數，取名叫做$c

再來，為了要能夠達到排序的目的，同樣會用到很巧妙的一段if語法。
這裡的意思是，如果c沒有東西（一開始點進網頁的時候c沒有東西的），則顯示所有的資料；如果c有東西而且s=1的話，那請你幫我根據性別來最遞增排列（遞增是預設值）；如果c有東西，而且不是s=1的話，那請你幫我根據性別來做遞減排列。

可是，上面這樣的語法，使會按照性別這個變項排列，為了讓網友也可以根據不同的變項排序，我們把memSex的地方，改成根據網址來抓取變數c的值。

這時候，其實就大功告成了，知道了這樣的方法，我們就可以繼續讓其他的按鈕，也變成可以遞增或遞減排列。

只要把同樣的語法，利用複製貼上，然後把變項名稱改掉，就可以了

在欄位旁加入三角形

為了讓網友可以知道現在是遞增排列或遞減排列，我們也可以在表格的標題中，插入三角形的CSS（CSS三角形產生器），我把它寫成如下的CSS

接著，把它插進內文當中，這裡要注意的是，我們又多了一個if的指令。

這時候點下去，就可以多一個三角形的符號了！

完整的程式碼如下：

<?php
require("connect.php");

$s=$_GET['s'];
$c=$_GET['c'];
if($c==''){
 $data=mysql_query("select * from member");
}else if($s=='1'){
 $data=mysql_query("select * from member order by $c");
}else{
 $data=mysql_query("select * from member order by $c desc");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>資料排序</title>
<style>
.show table, td{
 border: 2px darkgray solid;
 border-collapse:collapse;
}
.show th{
 text-align:center;
 color:white;
 background-color:gray;
}
.show th a:link{
 text-align:center;
 color:white;
 background-color:gray;
 text-decoration:none;
}
.show th a:visited{
 text-align:center;
 color:white;
 background-color:gray;
}
.show th a:hover{
 text-align:center;
 color:white;
 background-color:darygray;
}
.tri_up{
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent white transparent;
position: relative;
left:3px;
top:-13px;
}
.tri_down{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: white transparent transparent transparent;
position: relative;
left:3px;
top:15px;
}
</style>
</head>

<body>
<div class="show" align="center">
<table border="1" width="700px">
   <tr>
    <th >
  <?php
      if($s!=1 and $c == 'memID'){
   echo '<a href="p10.php?c=memID&amp;s=1">編號</a><span class="tri_up"></span>';
   }else if($s!=2 and $c == 'memID'){
   echo '<a href="p10.php?c=memID&amp;s=2">編號</a><span class="tri_down"></span>';
   }else{
   echo '<a href="p10.php?c=memID&amp;s=1">編號</a>';
   }
  ?>
    </th>
    <th >姓名</th>
    <th >
     <?php
      if($s!=1 and $c == 'memSex'){
   echo '<a href="p10.php?c=memSex&amp;s=1">性別</a><span class="tri_up"></span>';
   }else if($s!=2 and $c == 'memSex'){
   echo '<a href="p10.php?c=memSex&amp;s=2">性別</a><span class="tri_down"></span>';
   }else{
   echo '<a href="p10.php?c=memSex&amp;s=1">性別</a>';
   }
  ?>
 </th>
    <th >
     <?php
      if($s!=1 and $c == 'memBirthday'){
   echo '<a href="p10.php?c=memBirthday&amp;s=1">生日</a><span class="tri_up"></span>';
   }else if($s!=2 and $c == 'memBirthday'){
   echo '<a href="p10.php?c=memBirthday&amp;s=2">生日</a><span class="tri_down"></span>';
   }else{
   echo '<a href="p10.php?c=memBirthday&amp;s=1">生日</a>';
   }
  ?>
    </th>
    <th >地址</th>
    <th >
     <?php
      if($s!=1 and $c == 'memCity'){
   echo '<a href="p10.php?c=memCity&amp;s=1">城市</a><span class="tri_up"></span>';
   }else if($s!=2 and $c == 'memCity'){
   echo '<a href="p10.php?c=memCity&amp;s=2">城市</a><span class="tri_down"></span>';
   }else{
   echo '<a href="p10.php?c=memCity&amp;s=1">城市</a>';
   }
  ?>
    </th>
    <th >國籍</th>
    <th >郵遞區號</th>
    <th >電話</th>
    <th>備註</th>
  </tr>
  <?php
  for($i=1;$i<=mysql_num_rows($data);$i++){
$rs=mysql_fetch_row($data);
?>
  <tr>
    <td><?php echo $rs[0]?></td>
    <td><?php echo $rs[1]?></td>
    <td><?php echo $rs[2]?></td>
    <td><?php echo $rs[3]?></td>
    <td><?php echo $rs[4]?></td>
    <td><?php echo $rs[5]?></td>
    <td><?php echo $rs[6]?></td>
    <td><?php echo $rs[7]?></td>
    <td><?php echo $rs[8]?></td>
    <td><?php echo $rs[9]?></td>
  </tr>
  
  <?php
}
?>
</table>
</div>
<p>&nbsp;</p>
</body>
</html>

結果

來看看結果吧，在這個結果當中，我設定「編號」、「性別」、「生日」和「城市」是可以排序的。

以上內容均為本人在馬老師雲端研究室學習所整理之筆記

PJCHENder
那些沒告訴你的小細節

—不怕面對改變，敢於挑戰不熟悉的事物—

2015年4月3日

[教學] PHP & MySQL 學習筆記第11堂（資料庫建置：資料庫排序並於網頁呈現）

按照欄位名稱排序

在欄位旁加入三角形

結果

0 意見:

張貼留言