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

整體網站的風格規劃與相關流程規定
  1. 整體網站的風格規劃與流程規定注意事項：
    1. 一開始最好就處理整體網站的風格規範，這邊我將都以 bootstrap 的 W3C 官網的相關風格來做所有的元件
    2. 一開始最好就處理好整體網站的版面配置，這邊我以較陽春的 bootstrap grid (網格) 來處置
    3. 整體網站使用的流程：
      1. 先判斷是否登入 (以 $_SESSION 來判斷)，如果沒有登入， navbar 就不予提供連結，且需要登入的資料均連回 index.php
      2. 判斷用戶是否為管理員，若不是管理員，則為一般用戶，將一般用戶可登入的權限啟用 (navbar)
      3. 若為管理員，則啟用管理員的 navbar 功能
  2. 使用 Bootstrap 的 Affix 功能
    1. 先到 這裡 了解一下 Affix 的相關說明， 該頁面也有相關的 Demo 測試碼能夠直接取用，請直接取用吧！
    2. 不過如果頁面需要有 dropdown 的功能，就應該要查看 這裡 的說明來處理了！可以有快速下拉式選單的功能！
    3. 再加上使用 grid 的功能來配置版面，可以查看底下兩個連結的說明：
      • 自動網格的大小 (注意，總數需要在 12 個以上，且 container 最好可以指定最小寬度)：這裡瞧瞧
      • 使用 bootstrap 提供的板塊 (Templates) 的範例直接改也是很 OK 的！然後再加上上面提到的 navbar 的功能即可： 這裡
    4. 開始一個實做題，建置一個名為 index_demo.php 的網頁來處理看看
      1. 透過 W3C 的 Fixed navbar 範本，建立如下的網頁結果： 
        # vim index_demo.php
<?php
        // 提示目前主要是那一個項目在啟用中！
        $pagenu = "page1";
?>
<!doctype html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .affix {
      top: 0;
      width: 100%;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
  }
  .affix-top {
      position: static;
      top: -35px;
  }
  .affix + .container-fluid {
      padding-top: 70px;
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:150px;">
  <h1>隨便寫寫東西，主要的目的是在建立標頭頁面，也可以貼圖片來處理這個項目！</h1>
  <p>這個地方可以寫寫下標之類的！注意，可以更改這個 div 內的 height 高度項目喔！</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li <?php if ( $pagenu == "page0" ) echo 'class="active"'  ?>><a href="#">首頁，也能用圖片</a></li>
    <li <?php if ( $pagenu == "page1" ) echo 'class="active"'  ?> class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
    <li <?php if ( $pagenu == "page2" ) echo 'class="active"'  ?>><a href="#">Page 2</a></li>
    <li <?php if ( $pagenu == "page3" ) echo 'class="active"'  ?>><a href="#">Page 3</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right" style="margin-right: 5px">
    <li <?php if ( $pagenu == "sign" ) echo 'class="active"'  ?>><a href="#"><span class="glyphicon glyphicon-user"></span> 去註冊</a></li>
    <li <?php if ( $pagenu == "login" ) echo 'class="active"'  ?>><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li>
  </ul>
</nav>

<div class="container-fluid" >
<!--div class="container" style="min-height:500px"-->
  <div class="row">

    <!--左側資料-->
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">本站的資料</div>
        <div class="panel-body">
            這裡放置一些本專題的圖片連結
        </div>
      </div>
   </div>
    <!--左側資料結束-->

    <!--中間資料-->
    <div class="col-md-8">
      <div class="panel panel-primary">
        <div class="panel-heading">實際的標題內容</div>
        <div class="panel-body" style="min-height:400px;">
            <p>開始就是一堆文字說明！看看你要展示什麼內容，請寫在這邊囉！</p>
        </div>
      </div>
    </div>
    <!--中間資料結束-->

    <!--右側資料-->
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">本站的資料</div>
        <div class="panel-body">
            這裡放置一些本專題的圖片連結
        </div>
      </div>
    </div>
    <!--右側資料結束-->

  </div>

  <div class="row">
    <div class="col-md-12 well well-sm" style="text-align: right">VBird@dic.ksu 2017...</div>
  </div>
</div>

</body>
</html>
        做完之後一定要到網站上面去瞧一瞧是否正常處理！未來要修改的項目就會少之又少了！你要改的項目僅有中間 row 的網格規範而已！
  3. 處理網站使用的流程：
    1. 你應該做出一個類似名為 function.php 的檔案，然後將大部分的 PHP 程式碼都放在裡面
    2. 再根據是否有 $_SESSION['username'] 相關的設定值，決定是否能夠讀取某些頁面的功能
    3. 可以將大部分的 header 比較不變動的內容 (所有頁面均相同的內容) 放置於 include/header.php 裡面
    4. 可以將大部分的 footer 比較不變動的內容，放置於 include/footer.php 裡面
    5. 實際的頁面呼叫流程可能會是：(例如主檔案名稱為 login.php 時)
      1. 呼叫 include/header.php
        1. 最好宣告一個 root_file (檔案系統目錄) 以及一個 root_web (網頁系統 URL) 的變數來指定相關的訊息
        2. 由 header.php 去統一宣告 session_start(); 開始
        3. 再由 header.php 去呼叫 config.php
        4. 再由 header.php 去呼叫 function.php
        5. 開始宣告 bootstrap 的所有相關資料等等訊息
        6. 開始載入一些 bootstrap 的版面設計資料
        7. 再由 header.php 去呼叫 nav.php (就是 navbar 的內容)
        8. 其他有關固定的版面的設計！
      2. 載入 login.php 自身的資料
      3. 呼叫 include/footer.php 的資料
    6. 確實建議從 lisuser.php 或者是 register.php 或者是 login.php 等檔案來修改成為 index.php 之後，再進一步處理為宜！
  4. 實做練習
    1. 宣告路徑變數
      依據上述的建議，我們先在 index_demo.php 當中，先去定義兩個資料：
      • root_web：是網頁的絕對路徑，就是 http://your.hostname/ 的位置，例如本案例中的 /~student
      • root_file：就是 server 的絕對路徑，例如本例中的 /home/student/www 目錄囉！
      所以，我們應該要將該檔案的內容增加如下的部份來測試有沒有成功！ 
      # vim index_demo.php

<?php
        // 開始 session 了！
        session_start();

        // 設定檔案的絕對路徑
        $root_file = '/home/student/www/';
        $root_web  = '/~student/';

        // 提示目前主要是那一個項目在啟用中！
        $pagenu = "page1";

        // 開始載入需要的資訊，包括 config.php 以及 function.php 等特別的檔案
        include ( $root_file . '/include/config.php' );
        include ( $root_file . '/include/function.php' );
?>
      請前往系統測試一下有沒有成功的將網頁顯示出來？
    2. 測試登入頁面-function 處理
      接下來處理登入的頁面，因為有沒有登入，預計會展示的項目可能有不同～因此，我們現在可以這樣做！ 
      # vim index_demo.php
<?php
	....
        // 提示目前主要是那一個項目在啟用中！
        $pagenu = "login";
?>


      
# vim include/function.php (這是新的檔案！)

<?php

	// 如果需要進行任何行為的情況下才開始處理的項目
        if ( isset ( $_REQUEST['action'] ) ) {

		// 如果需要進行『登入』才需要處理的項目
                if ( $_REQUEST['action'] == 'login' ) {
                        // 先取得所有的參數
                        $checking = $_REQUEST['checking'];
                        $login_name  = trim($_REQUEST['login_name']);
                        $login_pass  = trim( hash ('sha256', $_REQUEST['login_pass']));

                        // 先設定一個名為 msg 的變數，這個變數內容如果是空的，代表沒有錯誤，若非為空，則是有錯誤！
                        $msg = '';

                        // 先確認是否取得正確的註冊驗證碼
                        if ( $_SESSION['CAPTCHA'] != $checking ) {
                                $msg = '驗證碼錯誤！請重新取得正確的驗證碼資訊';
                        } else {
                                // 開始取得帳號與密碼
                                $sql = "select login_name, realname from userinfo where login_name = '$login_name' and login_pass = '$login_pass'";
                                $result = mysql_query ($sql, $db_link );
                                if ( ! $result ) {
                                        // 找不到資料的結果，就是給予錯誤訊息
                                        $msg = '查不到這個帳號或密碼錯誤';
                                } else {
                                        $row = mysql_fetch_row($result);
                                        $_SESSION['username'] = $row[1];
                                        $_SESSION['userlevel'] = 'user';
                                }
                        }
                }

		// 如果需要『登出』才需要進行的項目
                if ( $_REQUEST['action'] == 'logout' ) {
                        unset($_SESSION['username']);
                        unset($_SESSION['userlevel']);
                        $urltmp = explode('?',$_SERVER['PHP_SELF']);
                        $url    = $urltmp[0];
                        echo "<script>window.location = '$url'</script>";
                        die;
                }
        }

	// 如果是在『登入』頁面，且還沒有『登入』的情況下，才需要處理的項目
        if ( $pagenu == "login" && ! isset( $_SESSION['username'] ) ) {
                include ( $root_file . 'include/captcha.php');
        }
?>


      
# vim include/captcha.php  (可以使用之前設定好的，但是底下的檔名部份需要更新！)

<?php

// 開始驗證碼 https://gnehcic.azurewebsites.net/php建立圖形驗證碼/
$CaptchaString = "";    //驗證碼文字
$CaptchaLength = 5;             //驗證碼長度

//產生數字驗證碼
for($i=0; $i < $CaptchaLength; $i++)
        $CaptchaString = $CaptchaString.rand(0,9);

$_SESSION['CAPTCHA'] = $CaptchaString;  //驗證碼存入SESSION內

$CaptchaWidth = 70;                                     //驗證碼影像寬度
$CaptchaHeight = 20;                            //驗證碼影像高度

//建立影像
$Captcha = ImageCreate($CaptchaWidth, $CaptchaHeight);
//設定背景顏色，範例是紅色
$BackgroundColor = ImageColorAllocate($Captcha, 255, 0, 0);
//設定文字顏色，範例是黑色
$FontColor = ImageColorAllocate($Captcha, 0, 0, 0);
//影像填滿背景顏色
ImageFill($Captcha, 0, 0, $BackgroundColor);
//影像畫上驗證碼
ImageString($Captcha, 6, 14, 3, $_SESSION['CAPTCHA'] , $FontColor);
//imagettftext($Captcha, 20, 0, 0, 0, $FontColor, 'Times', $_SESSION['CAPTCHA'] );
//隨機畫上200個點，做為雜訊用
for($i = 0; $i < 100; $i++) {
        Imagesetpixel($Captcha, rand() % $CaptchaWidth , rand() % $CaptchaHeight , $FontColor);
}
//輸出驗證碼影像
$filename = sprintf( $root_file . "/images/check.png", time());
ImagePNG($Captcha, $filename);
ImageDestroy($Captcha);

?>


      
# mkdir images
# rm images/check.png
# touch images/check.png
# chmod 666 images/check.png
      接下來，請先到網頁去瀏覽一下，然後查閱一下 images/check.png 有沒有實際更新了？應該是要更新的！因為我們還沒有登入的緣故！ 同時檢查一下 tail /var/log/httpd/error_log 的項目，看看有沒有出現任何錯誤訊息喔！
    3. 測試登入頁面 - 主畫面整理！
      接下來當然是要顯示出登入畫面了！同樣的，你可以抓之前 login.php 的內容來改寫即可～同樣編輯 index_demo.php 檔案內容： 
      # vim index_demo.php

    <!--中間資料-->
    <div class="col-md-8">
      <div class="panel panel-primary">
        <div class="panel-heading">實際的標題內容</div>
        <div class="panel-body" style="min-height:400px;">
            <p>開始就是一堆文字說明！看看你要展示什麼內容，請寫在這邊囉！</p>
        </div>
        <div class="panel-heading">登入本站</div>
        <div class="panel-body" style="min-height:400px;">
<?php
        if ( ! isset ( $_SESSION['username'] ) ) {
?>
<form id="loginform" onsubmit="return checkinput()" method="post"
        style="width: 270px; border: padding: 5px; text-align: center;">
<table style="text-align: left;">
        <tr>
                <td>登入帳號：</td>
                <td><input type="text" name="login_name" required="required" id='login_name' style="width: 150px"
                        <?php if ( isset ($login_name) ) echo "value='$login_name'" ?> /></td>
        </tr>
        <tr>
                <td>登入密碼：</td>
                <td><input type="password" name="login_pass" required="required" id='login_pass' style="width: 150px"  /></td>
        </tr>
        <tr>
                <td>驗證碼：</td>
                <td>
                        <img src="images/check.png" style="vertical-align: middle; "/>
                        <input type="text" name="checking" style="width: 75px" />
                </td>
        </tr>
        <tr><td colspan="2" ><?php if ( isset ( $msg) && $msg != '' ) echo $msg ?></td></tr>
        <tr>
                <td colspan="3" style="text-align:center; ">
                        <input type="hidden" name="action" value="login" />
                        <input type="submit" value="登入" />
                </td>
        </tr>
</table>
</form>
<?php   } else { ?>
<div style="width: 270px; border: 1px solid gray; padding: 5px; text-align: center;">
        親愛的<?php echo $_SESSION['username'] ?>！歡迎光臨！<br />
                <a style="text-decoration: none; color: blue;" href="<?php echo $_SERVER['PHP_SELF']; ?>?action=logout">按我登出</a>
</div>

<?php   } ?>

<script>
        function checkinput() {
                // 檢查登入帳號是否有特殊字元
                var re = /[^a-zA-Z0-9.-_]/;
                var okname = re.exec ( document.getElementById("login_name").value);
                if ( okname ) {
                        window.alert ( "只允許英文、數字、底線、小數點與減號" );
                        document.getElementById("login_name").focus();
                        return false;
                }

                // 開始檢查密碼長度是否正確？
                var pw = document.getElementById("login_pass");
                if ( pw.value.length < 5 ) {
                        window.alert ( "密碼長度必須要大於 5 個字元以上" );
                        document.getElementById("login_pass").focus();
                        return false;
                }
        }

</script>
        </div>

      </div>
    </div>
    <!--中間資料結束-->
      這時請再次的使用網頁處理一下，測試能否登入、能否登出！這個是很重要的項目喔！
    4. 測試登入頁面 - 已登入者的導覽列，以及登出的測試
      如果已經是登入的用戶，那當然導覽列最右側的項目要不同才對！就是要取消註冊與登入頁面，然後增加『登出』與『個人資料』的項目才對！ 
      # vim index_demo.php

  <ul class="nav navbar-nav navbar-right" style="margin-right: 5px">

<?php
    if ( ! isset ( $_SESSION['username'] ) ) {
?>
    <li <?php if ( $pagenu == "sign" ) echo 'class="active"'  ?>><a href="#"><span class="glyphicon glyphicon-user"></span> 去註冊</a></li>
    <li <?php if ( $pagenu == "login" ) echo 'class="active"'  ?>><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li>
<?php } else { ?>
    <li <?php if ( $pagenu == "person" ) echo 'class="active"'  ?>><a href="#"><span class="glyphicon glyphicon-user"></span> 會員資料</a></li>
    <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?action=logout"><span class="glyphicon glyphicon-log-out"></span> 登出</a></li>
<?php } ?>
  </ul>
      同樣的，做完之後，到網頁去查一查，到底有沒有任何錯誤這樣！
    5. 測試登入頁面 - 不同權限的畫面
      總是有需要用戶登入才能夠查閱的畫面，這時就用是否有設定 $_SESSION['userlevel'] 來判斷了！ 
      # vim index_demo.php

    <li <?php if ( $pagenu == "page3" ) echo 'class="active"'  ?>><a href="#">Page 3</a></li>

<?php
    if ( isset ( $_SESSION['userlevel'] ) ) {
?>
    <li <?php if ( $pagenu == "page4" ) echo 'class="active"'  ?>><a href="#">使用者功能</a></li>

<?php
        if ( $_SESSION['userlevel'] == "admin" ) {
?>
    <li <?php if ( $pagenu == "page5" ) echo 'class="active"'  ?>><a href="#">管理員功能</a></li>

<?php
        }
    }
?>
  </ul>
  5. 實際彙整資料
    1. 網頁的拆裝：
      先來處理一個最新消息 (當然，還沒有最新消息！)，那就是 index.php 的內容。請注意，在此檔案中，所有的項目都只保留『中間資料』而已！ 其他的就通通放在頭、尾兩部份即可～ 
      # vim index.php


# cd include
# cp ../index_demo.php header.php
# cp ../index_demo.php footer.php
# vim header.php
<?php
        // 開始 session 了！
        session_start();

        // 設定檔案的絕對路徑
        $root_file = '/home/student/www/';
        $root_web  = '/~student/';

        // 提示目前主要是那一個項目在啟用中！
        $pagenu = "login";

        // 開始載入需要的資訊，包括 config.php 以及 function.php 等特別的檔案
        include ( $root_file . '/include/config.php' );
        include ( $root_file . '/include/function.php' );
?>
	......
	......
    <!--中間資料-->
    <div class="col-md-8">
      <div class="panel panel-primary">
	......
	......
      </div>
    </div>
    <!--中間資料結束-->
	......
	......
</body>
</html>


      
# vim footer.php
<?php
        // 開始 session 了！
        session_start();

	......
	......
      </div>
    </div>
    <!--中間資料結束-->

    <!--右側資料-->
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">本站的資料</div>
        <div class="panel-body">
            這裡放置一些本專題的圖片連結
        </div>
      </div>
    </div>
    <!--右側資料結束-->

  </div>

  <div class="row">
    <div class="col-md-12 well well-sm" style="text-align: right">VBird@dic.ksu 2017...</div>
  </div>
</div>

</body>
</html>
      之後，請在網址列輸入你的最上層首頁看看，就會知道有沒有出問題了！順利的話，應該就會出現全部的資訊 (當然，有沒有登入還是有差別的！)
    2. 建立登入頁面
      好了，現在來直接修訂導覽列功能，並且重新處理好你的登入頁面吧！ 
      # vim include/header.php
	......
    <li <?php if ( $pagenu == "page0" ) echo 'class="active"' ?>><a href="<?php echo $root_web; ?>">首頁，也能用圖片</a></li>
	......
    <li <?php if ( $pagenu == "login" ) echo 'class="active"' ?>><a href="<?php echo $root_web; ?>/login.php"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li>
	......


      
# vim login.php
<?php
        $pagenu = 'login';

        include ('include/header.php');
?>

    <!--中間資料-->
    <div class="col-md-8">
      <div class="panel panel-primary">
        <div class="panel-heading">登入本站</div>
        <div class="panel-body" style="min-height:400px;">


<?php
        if ( ! isset ( $_SESSION['username'] ) ) {
?>
<form id="loginform" onsubmit="return checkinput()" method="post"
        style="width: 270px; border: padding: 5px; text-align: center;">
<table style="text-align: left;">
        <tr>
                <td>登入帳號：</td>
                <td><input type="text" name="login_name" required="required" id='login_name' style="width: 150px"
                        <?php if ( isset ($login_name) ) echo "value='$login_name'" ?> /></td>
        </tr>
        <tr>
                <td>登入密碼：</td>
                <td><input type="password" name="login_pass" required="required" id='login_pass' style="width: 150px"  /></td>
        </tr>
        <tr>
                <td>驗證碼：</td>
                <td>
                        <img src="images/check.png" style="vertical-align: middle; "/>
                        <input type="text" name="checking" style="width: 75px" />
                </td>
        </tr>
        <tr><td colspan="2" ><?php if ( isset ( $msg) && $msg != '' ) echo $msg ?></td></tr>
        <tr>
                <td colspan="3" style="text-align:center; ">
                        <input type="hidden" name="action" value="login" />
                        <input type="submit" value="登入" />
                </td>
        </tr>
</table>
</form>
<?php   } else { ?>
<div style="width: 270px; border: 1px solid gray; padding: 5px; text-align: center;">
        親愛的<?php echo $_SESSION['username'] ?>！歡迎光臨！<br />
                <a style="text-decoration: none; color: blue;" href="<?php echo $_SERVER['PHP_SELF']; ?>?action=logout">按我登出</a>
</div>

<?php   } ?>

<script>
        function checkinput() {
                // 檢查登入帳號是否有特殊字元
                var re = /[^a-zA-Z0-9.-_]/;
                var okname = re.exec ( document.getElementById("login_name").value);
                if ( okname ) {
                        window.alert ( "只允許英文、數字、底線、小數點與減號" );
                        document.getElementById("login_name").focus();
                        return false;
                }

                // 開始檢查密碼長度是否正確？
                var pw = document.getElementById("login_pass");
                if ( pw.value.length < 5 ) {
                        window.alert ( "密碼長度必須要大於 5 個字元以上" );
                        document.getElementById("login_pass").focus();
                        return false;
                }
        }

</script>


        </div>
      </div>
    </div>
    <!--中間資料結束-->

<?php
        include ('include/footer.php');
?>
      同樣的，處理完畢之後，立即到網頁看看有沒有順利的建置成功？
    3. 建立註冊頁面
      註冊同樣使用之前做過的 register.php 來修訂即可～依據之前談到的『所有的 action 動作全部做成函數，然後放在 function.php 裡面等待呼叫』的模樣！ 因此，要實做出我們所需要的註冊畫面，應該需要這樣進行的： 
      # vim include/function.php
<?php

        // 有設定 action 才需要整理的項目
        if ( isset ( $_REQUEST['action'] ) ) {
                if ( $_REQUEST['action'] == 'login' ) {
			......
                }

                // 如果需要『登出』才需要進行的項目
                if ( $_REQUEST['action'] == 'logout' ) {
			......
                }

                // 有需要註冊才需要的項目！
                if ( $_REQUEST['action'] == 'reg' ) {
                        // 先確認是否取得正確的註冊驗證碼
                        $checking    = $_REQUEST['checking'];
                        if ( $_SESSION['CAPTCHA'] != $checking ) {
                                echo "<script>alert('驗證碼設定錯誤，請重新填寫註冊資料');history.go(-1);</script>";
                                die;
                        }

                        // 先取得所需要的變數資料
                        $login_name  = trim($_REQUEST['login_name']);
                        $login_pass1 = trim($_REQUEST['login_pass1']);
                        $login_pass2 = trim($_REQUEST['login_pass2']);
                        $realname    = trim($_REQUEST['realname']);
                        $u_email     = trim($_REQUEST['u_email']);
                        $u_bday      = trim($_REQUEST['u_bday']);
                        $u_sex       = trim($_REQUEST['u_sex']);

                        // 檢查登入者的帳號長度
                        if ( strlen($login_name) < 5 ) {
                                echo "<script>alert('登入帳號字元不足 5 個字元');history.go(-1);</script>";
                                die;
                        }
                        if ( $login_pass1 != $login_pass2 ) {
                                echo "<script>alert('兩次密碼輸入不相同');history.go(-1);</script>";
                                die;
                        }

                        // 先查一下有沒有這個帳號存在了？
                        $sql = "select * from userinfo where login_name = '$login_name'";
                        $result = mysql_query ($sql, $db_link );
                        $db_line = mysql_num_rows($result);
                        if ( $db_line >= 1 ) {
                                echo "<script>alert('這個帳號已經存在了！請使用其他帳號註冊');history.go(-1);</script>";
                                die;
                        }

                        $login_pass = hash ('sha256', $login_pass1);
                        $sql = "insert into userinfo (login_name,login_pass,realname,u_email, u_bday,u_sex) values (" .
                                "'$login_name', "   .
                                "'$login_pass', "  .
                                "'$realname', "  .
                                "'$u_email', "  .
                                "'$u_bday', "  .
                                "'$u_sex' ) " ;
                        $result = mysql_query ($sql, $db_link );
                        if ( $result ) {
                                header("Location: login.php");
                        } else {
                                echo "<script>alert('無法註冊！');history.go(-1);</script>";
                                die;
                        }

                }

        }

        if ( $pagenu == "login" && ! isset( $_SESSION['username'] ) ) {
                include ( $root_file . 'include/captcha.php');
        }

        if ( $pagenu == "register" && ! isset( $_SESSION['username'] ) ) {
                include ( $root_file . 'include/captcha.php');
        }
?>


      
# vim include/header.php
    <li <?php if ( $pagenu == "register" ) echo 'class="active"'  ?>><a href="<?php echo $root_web; ?>/register.php"><span class="glyphicon glyphicon-user"></span> 去註冊</a></li>


      
# vim register.php
<?php
        $pagenu = 'register';

        include ('include/header.php');
?>

    <!--中間資料-->
    <div class="col-md-8">
      <div class="panel panel-primary">
        <div class="panel-heading">註冊成為本站會員</div>
        <div class="panel-body" style="min-height:400px;">

<?php if ( ! isset ( $_SESSION['username'] ) ) { ?>

<form id="regform" onsubmit="return checkinput()" >
<table>
        <tr>
                <td>登入帳號：</td>
                <td><input type="text" name="login_name" required="required" id='login_name' /></td>
                <td>帳號只能是英文、數字、底線、減號與小數點，其餘字元均不接受</td>
        </tr>
        <tr>
                <td>登入密碼：</td>
                <td><input type="password" name="login_pass1" required="required" id='login_pass1' /></td>
                <td>至少 5 個位數以上的密碼長度</td>
        </tr>
        <tr>
                <td>確認密碼：</td>
                <td><input type="password" name="login_pass2" required="required" id='login_pass2' /></td>
                <td>再輸入一次密碼，確認沒有打錯字</td>
        </tr>
        <tr>
                <td>真實姓名：</td>
                <td><input type="text" name="realname" required="required" /></td>
                <td>填寫註冊者的姓名</td>
        </tr>
        <tr>
                <td>電子郵件：</td>
                <td><input type="email" name="u_email" /></td>
                <td>請填慣用的電子郵件</td>
        </tr>
        <tr>
                <td>生日：</td>
                <td><input type="date" name="u_bday" required="required" id='bday' /></td>
                <td>請務必使用 YYYY-MM-DD 的格式，如 1990-01-20</td>
        </tr>
        <tr>
                <td>性別：</td>
                <td><select name="u_sex">
                        <option value="0">女性</option>
                        <option value="1">男性</option>
                </select></td>
                <td>選擇性別</td>
        </tr>
        <tr>
                <td colspan="3" style="text-align:center; ">
                        <img src="images/check.png" /><br />
                        <input type="text" name="checking" /><br />
                        <input type="hidden" name="action" value="reg" />
                        <input type="submit" value="送出註冊" />
                </td>
        </tr>

</table>
</form>
<?php } else { ?>

        歡迎！您已經是本站的會員了！無須重複註冊喔！

<?php } ?>
<script>
        function checkinput() {
                // 檢查登入帳號是否有特殊字元
                var re = /[^a-zA-Z0-9.-_]/;
                var okname = re.exec ( document.getElementById("login_name").value);
                if ( okname ) {
                        window.alert ( "指允許英文、數字、底線、小數點與減號" );
                        document.getElementById("login_name").focus();
                        return false;
                }

                // 開始檢查密碼長度是否正確？
                var pw1 = document.getElementById("login_pass1");
                if ( pw1.value.length < 5 ) {
                        window.alert ( "密碼長度必須要大於 5 個字元以上" );
                        document.getElementById("login_pass1").focus();
                        return false;
                }

                // 看看兩次密碼是否相同？
                var pw2 = document.getElementById("login_pass2");
                if ( pw1.value != pw2.value ) {
                        window.alert ( "兩次密碼並不相同！" );
                        document.getElementById("login_pass1").focus();
                        return false;
                }

                // 檢查生日的格式正確與否
                re = /^[0-9]{4}[./-][0-9]{2}[./-][0-9]{2}$/;
                var okday = re.exec ( document.getElementById("bday").value);
                if ( ! okday ) {
                        window.alert ( "日期格式為 2011-11-11" );
                        document.getElementById("bday").focus();
                        return false;
                }
        }

</script>

        </div>
      </div>
    </div>
    <!--中間資料結束-->

<?php
        include ('include/footer.php');
?>
      同樣的，完成之後，記得需要重新在網頁上面檢視結果喔！
Top
HOME