從今天開始，要進入 PHP 搭配前端程式或框架，玩轉程式碼，今日從 index.php 開始。
如果你是第一次看本系列的邦友，可以先點擊下方 Day01 文章，內含 30 秒的 Demo 短片跟原始碼下載。
Day01 以終為始PHP學習之路
<!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 - Home</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>
<?php
if (isset($_GET["logout"])) {
if ($_GET["logout"] == "true") { ?>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>You have been logged out .</strong>
</div>
<?php
}
}
?>
<!-- Navigation -->
<?php require_once 'nav.php'; ?>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">The Perfect Cup</h1>
<hr class="tagline-divider">
<h2>
<small>By Sean666</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">HOW TO MAKE
<strong>THE PERFECT CUP OF COFFEE</strong>
</h2>
<hr>
<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>Making the perfect cup of coffee can be challenging! With so many unique flavours and recipes to choose from, where do you begin? Our website provides you with the best recipes from around the world. Whether you prefer your coffee hot and mild or bracingly cold and strong - we are sure to have what you are looking for. For access to unlimited recipes you must register! Registration is free. Click here to get started!</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<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>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
* Navigation 導覽列
<?php require_once 'nav.php'; ?>
因為三個選單分頁都有導覽列，所以提取出來成一個php程式
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
今天開始 Show me the code系列，不知道幫友們看程式碼，有沒有覺得熟悉的麥香感呢!
改程式碼有沒有變成你想要的結果呢?不用怕弄壞，ctrl+Z 大法跟遊戲S ava & Load 相同。
搭配 Day03 Sublime 祕技可以快速找不同，祝你玩得愉快，我們明天見!
iThome鐵人賽
看影片追技術