今天要來瞧瞧部落格頁面，目前測試沒辦法登入觀看是正常的喔，稍後改登入頁面設定就 OK 了!
如果你是第一次看本系列的邦友，可以先點擊下方 Day01 文章，內含 30 秒的 Demo 短片跟原始碼下載。
<?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 ");
}
?>
<?php require_once 'nav.php'; ?>
因為三個選單分頁都有導覽列，所以提取出來成一個php程式
進階資料:
先開啟iTCafe 網頁與用 Sublime 開啟 blog.php
用 Sublime 開啟 pcheck.php，root 後面加上密碼
//Open a new connection to the MySQL server
$mysqli = new mysqli('localhost', 'root', '123456', 'perfectcup');
<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，關於隱私與瀏覽安全，從駭客的角度來作思考，能更好地做好事先防護。
關於資料庫帳號密碼，是我們接下來幾天的主題，明天讓我們繼續看下去!
iThome鐵人賽
看影片追技術