iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 13
1
自我挑戰組

30天翻玩動態網站-會員需驗證才能看到部落格文章 系列 第 13 篇

Day13 翻玩 Blog.php -session & cokie

11th鐵人賽
1455 瀏覽

  • 分享至 

  • xImage
    •  

今天要來瞧瞧部落格頁面，目前測試沒辦法登入觀看是正常的喔，稍後改登入頁面設定就 OK 了!

如果你是第一次看本系列的邦友，可以先點擊下方 Day01 文章，內含 30 秒的 Demo 短片跟原始碼下載。

玩轉 Blog.php

  • 先快速瀏覽一下程式碼，重點看有 .php 或 <?php?> 的部分
<?php
//Initialize Session
session_start();

if (isset($_SESSION['login'])) {

    $fname = $_SESSION['fname'];
    $lname = $_SESSION['lname'];

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>The Perfect Cup - Blog</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/business-casual.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="brand">The Perfect Cup</div>

    <!-- Navigation -->
    <?php require_once 'nav.php'; ?>

    <div class="container">

        <div class="row">
            <div class="box">
                <div class="col-lg-12">
                
                <h2 class="text-center">Welcome <?php echo $fname; echo " "; echo $lname; ?> - <a href="logout.php">Logout</a></h2>
                
                    <hr>
                    <h2 class="intro-text text-center">The Perfect Cup
                        <strong>Member Only</strong>
                    </h2>
                    <hr>
                </div>
                <div class="col-lg-12 text-center">
                    <img class="img-responsive img-border img-full" src="img/slide-1.jpg" alt="">
                    <h2>COCONUT OIL COFFEE
                        <br>
                        <small>OCTOBER 13, 2016</small>
                    </h2>
                    <p>Start your morning off with this great recipe for hot coffee with coconut oil and butter.</p>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
                    <hr>
                </div>
                <div class="col-lg-12 text-center">
                    <img class="img-responsive img-border img-full" src="img/slide-2.jpg" alt="">
                    <h2>IRISH COFFEE 
                        <br>
                        <small>SEPTEMBER, 2014</small>
                    </h2>
                    <p>Take the edge off with a Fresh hot cup of coffee made with Irish whiskey and Irish Cream.</p>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button>
                    <hr>
                </div>
                <div class="col-lg-12 text-center">
                    <img class="img-responsive img-border img-full" src="img/slide-3.jpg" alt="">
                    <h2>FROZEN CARAMEL LATTE 
                        <br>
                        <small>JULY 18, 2012</small>
                    </h2>
                    <p>Sweetened with caramel sauce and topped with whipped cream, this will make you happy any time of day.</p>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Read More</button>
                    <hr>
                </div>
                <div class="col-lg-12 text-center">
                    <ul class="pager">
                        <li class="previous"><a href="#">← Older</a>
                        </li>
                        <li class="next"><a href="#">Newer →</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

    <!-- Modal 1 -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Coconut Oil Coffee</h4>
          </div>
          <div class="modal-body">
            <p>Sample Text.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Modal 2 -->
    <div id="myModal2" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Irish Coffee</h4>
          </div>
          <div class="modal-body">
            <p>Sample Text.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Modal 3 -->
    <div id="myModal3" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Frozen Caramel Latte</h4>
          </div>
          <div class="modal-body">
            <p>Sample Text.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
    
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright © The Perfect Cup 2019</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

<?php

} else {
    header("location:login.php ");
}
?>

內容架構說明

  • Navigation　導覽列　
<?php require_once 'nav.php'; ?>

因為三個選單分頁都有導覽列，所以提取出來成一個php程式

Session 和 Cookie 餅干?

  • Http是無狀態協議．如果要做一個登入系統
    要怎麼知道使用者是否已經登入？ Session 和 Cookie 可以解決需要存資料的問題
  • 兩者比較
    • Session:
      Session 存在於 Server 端，Session 會將我們想要儲存的資料存在於伺服器端
    • cookie:
      cookie 存放在client 端，cookie 會將我們想要儲存的資料存在於使用者端

補充資料:竊取 Cookies 和指令碼攻擊 /images/emoticon/emoticon77.gif

  • Cookies仍包含了一些敏感訊息：用戶名稱、電腦名、使用的瀏覽器和曾經存取的網站。
  • 跨網站指令碼XSS（Cross site scripting）可以達到此目的。在受到跨網站指令碼攻擊時，Cookie盜賊和Cookie毒藥將竊取內容和指令碼攻擊。
    • Cookie盜賊：
      搜集用戶Cookie，攻擊者利用Cookie訊息通過進入他人帳戶。
    • Cookie毒藥：
      攻擊者會在Cookie送回伺服器之前對其進行修改，達到自己的目的。
      例如，在一個購物網站的Cookie中包含了顧客應付的款項，攻擊者將該值改小，達到少付款的目的。

進階資料:

動手改程式碼

  • 先開啟iTCafe 網頁與用 Sublime 開啟 blog.php

    • 試著將所有 The Perfet Cup 改成你的咖啡店名: iTCafe

  • 用 Sublime 開啟 pcheck.php，root 後面加上密碼

//Open a new connection to the MySQL server
$mysqli = new mysqli('localhost', 'root', '123456', 'perfectcup');
  • 用 Sublime 開啟 login.php
    • 找到表單，將註冊新帳按鈕功能，移到表單外，才能自動跳轉網頁
<form role="form">
                        <div class="row">
                            <div class="form-group col-lg-4">
                                <label>Email Address</label>
                                <input type="email" id="email" name="email" maxlength="25" class="form-control">
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group col-lg-12">
                                <label>Password</label>
                                <input type="password" id="password" name="password" maxlength="10" class="form-control">
                            </div>
                            <div class="form-group col-lg-12">
                                <button type="submit" id="login" class="btn btn-default">Login</button>
                            </div>
                            
                        </div>
                    </form>
                    
                    <div class="form-group col-lg-12">
                        <a href="register.php"><button type="submit" class="btn btn-default">Not a Member? Register here</button></a>
                    </div>

總結

今天的資料與實作更改的程式碼比較多，不知道各位邦友有實作成功嗎?有任何問題歡迎留言。
而關於帳號密碼，認識 Session 和 Cookie，關於隱私與瀏覽安全，從駭客的角度來作思考，能更好地做好事先防護。
關於資料庫帳號密碼，是我們接下來幾天的主題，明天讓我們繼續看下去!


上一篇
Day12 翻玩 About.php -Show me the code
下一篇
Day14 翻玩register.php
系列文
30天翻玩動態網站-會員需驗證才能看到部落格文章 共 30 篇
  1. 26
    Day26 聯絡表單，Siteground 主機更新與還原，SSL 與加 SG Optimizer
  2. 27
    Day27 WordPress 重要的備分還原工具 時間停止器
  3. 28
    Day28 WordPress 終極網站規劃清單 與一頁式網站！
  4. 29
    Day29 將靜態網頁轉成 WordPress 自製主題
  5. 30
    Day30 PHP 鐵人大補帖與心得分享
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙