專題製作一-上課補充教材

會員表單的建立
  1. 建立資料表的基本語法： 
    create table 表格名 (
	欄位名  資料類型 (長度),
	欄位名  資料類型 (長度),
	欄位名  資料類型 (長度),
	...
	primary key (欄位名)
);
  2. 資本的資料類型
    • TEXT (文字)：主要有底下幾種類型：
      • character：固定長度字元，最大到 255
      • varchar：可變長度字元，最大到 255
      • text：不限長度字元
      • longtext：超長字元
    • 數值方面的類型主要有底下這幾種：
      • tinyint：從 -128~127 或 0~255
      • samllint：從 -32768~3277
      • integer (int)：整數型態，從 -2147483648~2147483647
      • float：單精確浮點數：
      • double：倍精確度浮點數
    • 可儲存特別資料類型：(例如圖片、聲音、影片等資料！)
      • blob：最大佔用 64K 大小左右
      • longblob：最大佔 4G 大小左右
    • 日期格式：
      • date：YYYY-MM-DD的格式
      • datetime：YYYY-MM-DD hh:mm:ss的格式
      • timestamp(number)，其中 number 代表的意義如下：
        • timestamp(14): YYYYMMDDhhmmss
        • timestamp(12): YYMMDDhhmmss
        • timestamp(10): YYMMDDhhmm
        • timestamp(8): YYYYMMDD
        • timestamp(6): YYMMDD
        • timestamp(4): YYMM
        • timestamp(2): YY
    • 其他的類型：
      • datetime：日期時間
      • 座標資料等
  3. 另外，在建立資料表內的各個欄位時，每個欄位的資料類型還能加上某些特別的屬性，包括要不要有空值？是否要自動累加數值等等：
    • signed, unsigned：是否允許負值？signed 為允許負值的存在。
    • auto_increment：該欄位的數值會自動的增加，通常用在整數類型！
    • null, no null：是否允許欄位中不填入資料，null 為允許。
    • default 'value'：若沒有指定，則填入此預設值。
    • primarykey：可以加強索引功能的主鍵
  4. 設定會員資料表，假設會員資料表的表格名稱為 userinfo：
    • 使用者代碼： uid int，自動增加，且不可以為空，且為主鍵
    • 登入帳號： login_name character(40) ，假設僅允許英文與數字，且不可為空
    • 登入密碼： login_pass character(64)，假設使用 sha256 [hash('sha256',$pw)] 所需要的長度，且不可為空
    • 真實姓名： realname character(40)，不可為空
    • 電子郵件： u_email varchar(100)，可以為空值
    • 生日： u_bday date，不可為空值
    • 性別： u_sex tinyint，只有 0 與 1，0 為女性 1 為男性，不可以為空值
    • 啟動： u_active tinyint，只有 0 與 1，0 為尚未開啟，1 為已經啟動，預設為 0
    • 註冊日期： u_regd timestamp(8)，預設為當日數值
  5. 依據上表所需要建立的指令應該是這樣的： 
    # mysql -u username -p
Mariadb > use userdb;

Mariadb [userdb]> create table `userinfo` (
 `uid` int auto_increment not null,
 `login_name` varchar(40) not null,
 `login_pass` varchar(64) not null,
 `realname` varchar(40) not null,
 `u_email` varchar(100) null,
 `u_bday` date not null,
 `u_sex` tinyint not null default 0,
 `u_active` tinyint not null default 0,
 `u_regd` timestamp(6) not null,
 primary key (uid)
 ) character set utf8 collate utf8_unicode_ci ;

Mariadb [userdb]> show tables;
Mariadb [userdb]> describe userinfo;
  6. 開始加入帳號看看！可以這樣加入的(自動增加的、有預設值的，都可以事先略過的) 
    # mysql -u username -p
Mariadb > use userdb;

Mariadb [userdb]> insert into userinfo (login_name,login_pass,realname,u_bday,u_sex) values ('a030cxxx','1234','鳥哥','197101',1);
Mariadb [userdb]> insert into userinfo (login_name,login_pass,realname,u_bday,u_sex) values ('a030c101','1234','曾崇勝','199101',1);
Mariadb [userdb]> select * from userinfo;
+-----+------------+------------+-----------+---------+------------+-------+----------+----------------------------+
| uid | login_name | login_pass | realname  | u_email | u_bday     | u_sex | u_active | u_regd                     |
+-----+------------+------------+-----------+---------+------------+-------+----------+----------------------------+
|   1 | a030cxxx   | 1234       | 鳥哥      | NULL    | 0000-00-00 |     1 |        0 | 2017-03-13 17:04:50.964400 |
|   2 | a030c101   | 1234       | 曾崇勝    | NULL    | 0000-00-00 |     1 |        0 | 2017-03-13 17:06:21.609723 |
+-----+------------+------------+-----------+---------+------------+-------+----------+----------------------------+
  7. 開始處理 PHP 的相關網頁製作！首先就是來測試一下這些資料能不能被抓出來？
    1. 先到你的家目錄，然後建立名為 www 的子目錄，在這個目錄內建立底下所需要的網頁來測試！ 
      $ vim index.php

<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $db_link = mysql_connect('localhost', 'username', 'userpw');

        if ( ! $db_link ) {
                echo "資料連結失敗了！\n";
        } else {
                echo "資料連結OK\n";
        }

?>

</body>
</html>
      然後來到你的瀏覽器，直接輸入： http://your_hostname/~yourname 看看執行的成果是否為 OK！如果不是的話， 請到 /var/log/httpd/error_log 查看原因為何！相當重要！
    2. 如果上面的連結是正常的，接下來則開始搜尋能否使用資料庫。而且，因為登入已經正常，因此可以將正常登入的連結取消，然後失敗時加上 die 結束！ 
      $ vim index.php

<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $db_link = mysql_connect('localhost', 'username', 'userpw');

        if ( ! $db_link ) {
                echo "資料連結失敗了！\n";
		die;
        }

        $db_sel = mysql_select_db ('userdb', $db_link);
        if ( ! $db_sel ) {
                echo "資料庫選取失敗了！\n";
        } else {
                echo "資料庫選取OK\n";
        }
?>

</body>
</html>
      再次到瀏覽去去檢查看看，是否出現了資料庫選取正常的字樣！？相當重要！
    3. 再來，先來檢查一下全部的資料有幾筆，並將筆數記錄下來： 
      $ vim index.php

<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $db_link = mysql_connect('localhost', 'username', 'userpw');

        if ( ! $db_link ) {
                echo "資料連結失敗了！\n";
		die;
        }

        $db_sel = mysql_select_db ('userdb', $db_link);
        if ( ! $db_sel ) {
                echo "資料庫選取失敗了！\n";
		die;
        } 

        $result = mysql_query ('select * from userinfo', $db_link );

        $db_line = mysql_num_rows($result);
        echo "總資料數：" . $db_line ;

?>

</body>
</html>
      同樣的，透過瀏覽器去瞧一瞧是否有正確的輸出資料數量？
    4. 一般來說，在程式撰寫的設計上，會被反覆使用的程式碼，應該要獨立出來作為一個 function 給大家呼叫使用才合理。 因此，請將上面的程式碼當中，那個資料庫連結的部份寫入到 include/config.php 檔案中，然後將 index.php 更改成類似這樣的情況來處理： 
      $ vim index.php

<?php
	include ('include/config.php');
?>
<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $result = mysql_query ('select * from userinfo', $db_link );

        $db_line = mysql_num_rows($result);
        echo "總資料數：" . $db_line ;
?>

</body>
</html>
  8. 會員資料的顯示
    • 既然有多筆資料，那如何列出用戶的資訊呢？可以使用 mysql_fetch_row($result) 來處理！ 
      $ vim listuser.php

<?php include ('include/config.php'); ?>
<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $result = mysql_query ('select uid, login_name, realname, u_email, u_bday, u_sex, u_regd, u_active from userinfo', $db_link );

        $db_line = mysql_num_rows($result);
        echo "總資料數：" . $db_line ;
        echo "<br /><br />";

        while ( $row = mysql_fetch_row($result) ) {
                echo $row[0] . $row[1] . $row[2] . $row[3] . $row[4] . $row[5] . $row[6] . $row[7] . "<br />";
        }

?>

</body>
</html>
    • 如果懶的一個一個數值處理，可以使用 mysql_fetch_row($result) ，搭配 foreach 這個迴圈來處理即可。 
      $ vim listuser2.php

<?php include ('include/config.php'); ?>
<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
</head>
<body>
<?php
        $result = mysql_query ('select uid, login_name, realname, u_email, u_bday, u_sex, u_regd, u_active from userinfo', $db_link );

        $db_line = mysql_num_rows($result);
        echo "總資料數：" . $db_line ;
        echo "<br /><br />";

        while ( $row_res = mysql_fetch_row($result) ) {
		foreach ( $row_res as $row ){
			echo $row;
		}
		echo "<br />";
        }

?>

</body>
</html>
  9. 作業一：請將會員輸出的結果，製作成為表格～然後格式輸出！
  10. 作業二：加入 bootstrap 的相關套件功能，一開始網頁製作就加入這些功能，準備未來的應用：
    1. 先從 google 找關鍵字 bootstrap 之後，找到 W3C school 的介紹，連結如下：
      https://www.w3schools.com/bootstrap/
      之後在該版面從 Start learning bootstrap 找到可以下載的官網，如下連結：
      http://getbootstrap.com/getting-started/
      建議將上述的連結下載到你的 WWW 首頁目錄下的 include 子目錄中，再予以解壓縮。我這裡以 2017/03 時的版本作為範例， 相關的動作你可以自己處理 (假設 WWW 個人首頁的目錄在 /home/student/www 裡面)： 
      $ cd ~/www
$ mkdir include
$ cd ~/www/include
$ wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
$ unzip bootstrap-3.3.7-dist.zip
$ vim ../listuser.php

<!doctype html>
<html>
<head>
        <meta charset='utf-8' />
	<link rel="stylesheet" href="/~student/include/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="/~student/include/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    2. 其他相關動作，請參考上述的 W3C school 網頁，透過 <div class="???"> 找到相關的 ？？？名稱，帶入 class 當中， 就可以直接取用相關的 CSS 格式表！同時也能夠使用 bootstrap 提供的相關 javascript 特效了。
    3. 例如作業一的內容，將 table 加入成為底下的樣式，應該就有辦法處理表格的樣式了： 
      <table class='table table-bordered table-striped table-hover' style='width: 800px; '>
Top
HOME