這是系列文章的開頭，是創(chuàng)建網(wǎng)站的第一步，這部分的內(nèi)容我們將下載并配置 Laravel 本地開發(fā)環(huán)境。創(chuàng)建博客應(yīng)用，它會包含主要的 HTML 結(jié)構(gòu)，我們可以通過本地進行瀏覽訪問。
配置開發(fā)環(huán)境
集成開發(fā)環(huán)境 XAMPP
開發(fā)環(huán)境的搭建方式有很多，比如 Homestead 開發(fā)環(huán)境，為了讓新手能快速搭建開發(fā)環(huán)境，我們選擇了集成開發(fā)環(huán)境這種容易快速上手使用的方案，如果你已經(jīng)了解其它的方式或有精力去研究，歡迎查閱其它文章，這里不過多闡述。
XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包。它可以在 Windows、Linux、Solaris、Mac OS X 等多種操作系統(tǒng)下安裝使用，支持多語言：英文、簡體中文、繁體中文、韓文、俄文、日文等。
Windows 下還可以用 WAMP 集成開發(fā)包，和 XAMPP 類似，有需要話也可以進行了解
你可以在這里下載適合你系統(tǒng)的版本：
https://www.apachefriends.org/zh_cn/download.html
安裝完成后，你可以通過控制面板啟動相應(yīng)的服務(wù)，控制面板如下：
Mac 系統(tǒng)中控制面板如下，Windows 系統(tǒng)與之大同小異。
在你啟動這 MySQL, Apache 這 2 個服務(wù)后，你就可以通過下面的地址來訪問數(shù)據(jù)庫：
http://localhost/phpmyadmin/
phpMyAdmin 是一個以PHP為基礎(chǔ)，以Web-Base方式架構(gòu)在網(wǎng)站主機上的MySQL的數(shù)據(jù)庫管理工具，讓管理者可用Web接口管理MySQL數(shù)據(jù)庫。
你通過頁面登錄即可訪問并管理數(shù)據(jù)庫
注意：XAMPP 默認安裝時設(shè)定的 MySQL 賬戶 root 密碼為空
數(shù)據(jù)庫配置
由于項目中需要用到數(shù)據(jù)庫，這里我們先創(chuàng)建項目的數(shù)據(jù)庫 larablog：
構(gòu)建應(yīng)用
創(chuàng)建應(yīng)用
首先，通過命令行工具進入你的 Web 目錄下：
Web 目錄即 XAMPP 安裝目錄下的 htdocs 目錄
我們這里通過 Composer 創(chuàng)建項目，執(zhí)行如下命令：
composer create-project laravel/laravel larablog --prefer-dist "5.1.*"
Laravel 5.1 LTS 是 Laravel 歷史上第一個提供 LTS（長期支持 － long-time support） 支持的版本。由于不同版本特性之間的區(qū)別這里無法詳細講解，所以我們這里選用了 LTS 版，了解一個長期穩(wěn)定的版本相對來說很有必要。
配置項目的數(shù)據(jù)信息
Laravel 安裝后會在目錄下生成名為 .env 的配置文件，通常我們不會該文件納入版本管理工具（比如 git），我們在本地開發(fā)和生產(chǎn)服務(wù)器上不同環(huán)境的配置信息也是區(qū)別于此。在項目目錄下還有一個 .env.example 文件，是作為配置模板而存在。
讓我們來編輯 .env 文件，設(shè)置數(shù)據(jù)庫信息：
這個文件里羅列的很多已經(jīng)設(shè)定好的配置，默認用于本地開發(fā)環(huán)境，如果是生產(chǎn)環(huán)境，有些配置需要調(diào)整，這里我們主要是設(shè)置數(shù)據(jù)相關(guān)的配置。
找到如下部分，對內(nèi)容進行更改：
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=
這里，數(shù)據(jù)庫的名稱使用的是開頭創(chuàng)建的 larablog，同時數(shù)據(jù)庫密碼為空。
默認結(jié)構(gòu)說明
一個新安裝的 Laravel 根目錄包含許多個文件夾：
app 目錄，如你所料，這里面包含應(yīng)用程序的核心代碼。
bootstrap 目錄包含了幾個框架啟動跟自動加載設(shè)置的文件。以及在 cache 文件夾中包含著一些框架在啟動性能優(yōu)化時所生成的文件。
config 目錄，顧名思義，包含所有應(yīng)用程序的配置文件。
database 目錄包含數(shù)據(jù)庫遷移與數(shù)據(jù)填充文件。如果你愿意的話，你也可以在此文件夾存放 SQLite 數(shù)據(jù)庫。
public 目錄包含了前端控制器和資源文件（圖片、JavaScript、CSS，等等）。
resources 目錄包含了視圖、原始的資源文件 (LESS、SASS、CoffeeScript) ，以及語言包。
storage 目錄包含編譯后的 Blade 模板、基于文件的 session、文件緩存和其它框架生成的文件。此文件夾分格成 app、framework，及 logs 目錄：
-
app目錄可用于存儲應(yīng)用程序使用的任何文件。 -
framework目錄被用于保存框架生成的文件及緩存。 -
logs目錄包含了應(yīng)用程序的日志文件。
tests 目錄包含自動化測試。這有一個現(xiàn)成的 PHPUnit 例子。
vendor 目錄包含你的 Composer 依賴模塊。
路由
在項目中 app/Http/routes.php 是用用程序的路由文件，請求的處理都通過這里進行進行配置。
默認如下：
<?php
Route::get('/', function () {
return view('welcome');
});
這里配置的路由信息是，訪問網(wǎng)站根路徑是，顯示視圖 welcome 的內(nèi)容。
視圖 welcome 位于 resources/views/welcome.blade.php。
運行項目
在項目所在目錄下，通過命令行執(zhí)行 php artisan serve 啟動應(yīng)用，操作如下：
? larablog php artisan serve
Laravel development server started on http://localhost:8000/
Laravel 的控制臺命令啟動了 PHP 內(nèi)置服務(wù)器，讓我們可以不需要單獨設(shè)立虛擬站點也可以訪問應(yīng)用。是一種很快速便捷的運行辦法。
說明一下，本身我們通過 XAMPP 內(nèi)置的 Apache 也可以配置虛擬站點進行訪問，因為這種運行 PHP 內(nèi)置服務(wù)器的方式相對更方便，所以就沒有提及它。這里主要為了避免新手學習重要的內(nèi)容時被一些細枝末節(jié)的問題所干擾，后期自己可以了解如何配置虛擬站點來運行應(yīng)用，尤其是當使用了 Homestead 這樣的開發(fā)環(huán)境。
好了，如果你通過瀏覽器打開頁面 http://localhost:8000/ 將會看到如下頁面：
嘗試增加一些內(nèi)容
接下來，我們嘗試增加一些簡單的內(nèi)容，感受一下。
在 app/Http/routes.php 中添加一個路由配置：
Route::get('/hello/{name}', function($name) {
return 'Hello '. $name;
});
我們配置了一個路由用于輸出歡迎內(nèi)容。
訪問 http://localhost:8000/hello/larablog 即可看到如下內(nèi)容：
Hello larablog
模板引擎
在我們對 Laravel 構(gòu)建應(yīng)用有個基礎(chǔ)了解后，我們先從模版開始構(gòu)建站點的結(jié)構(gòu)。Laravel 使用了 Blade 作為模板引擎。
Blade 是 Laravel 所提供的一個簡單且強大的模板引擎。相較于其它知名的 PHP 模板引擎，Blade 并不會限制你必須得在視圖中使用 PHP 代碼。所有 Blade 視圖都會被編譯緩存成普通的 PHP 代碼，一直到它們被更改為止。這代表 Blade 基本不會對你的應(yīng)用程序生成負擔。
Blade 視圖文件使用
.blade.php做為擴展名，通常保存于resources/views文件夾內(nèi)。
基礎(chǔ)布局
首先，我們要為整個博客站點建立一個基礎(chǔ)視圖模板，整個站點視圖基于這個模板，繼承該視圖并顯示。
在項目錄下新建文件 resources/layouts/app.blade.php ，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>@yield('title') - larablog</title>
@section('stylesheets')
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
@show
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<section id="wrapper">
<header id="header">
<div class="top">
@section('navigation')
<nav>
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
@show
</div>
<hgroup>
<h2>@yield('blog_title', '<a href="/">larablog</a>')</h2>
<h3>@yield('blog_tagline', '<a href="/">creating a blog in Laravel</a>')</h3>
</hgroup>
</header>
<section class="main-col">
@yield('body')
</section>
<aside class="sidebar">
@include('partials.sidebar')
</aside>
<div id="footer">
@section('footer')
Laravel blog tutorial
@show
</div>
</section>
@yield('javascripts')
</body>
</html>
如果你仔細看，會發(fā)現(xiàn) @include('partials.sidebar') 這段代碼，我們額外引入了一個局部視圖。
所以，還需要建立一個局部頁面 resources/views/partials/sidebar.blade.php，內(nèi)容如下：
@section('sidebar')
Sidebar content
@show
在 app.blade.php 文件中包含了傳統(tǒng)的 HTML 語法。不過，請注意 @section 與 @yield 命令。正如其名，@section 命令定義一個內(nèi)容區(qū)塊，而 @yield 命令被用來 “顯示指定區(qū)塊” 的內(nèi)容。
在默認情況下，Blade 模板中的 {{ }} 表達式將會自動調(diào)用 PHP 的 htmlentities 函數(shù)，以避免 XSS 攻擊。如果你不希望你的數(shù)據(jù)被轉(zhuǎn)義，可以使用下列的語法：
Hello, {!! $name !!}.
更多模板相關(guān)的信息請查看文檔 Blade Templates ，Blade 模板
在 stylesheets 內(nèi)容區(qū)塊中，我們引入了一個樣式表：
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
我們使用 asset 幫助函數(shù)來生成樣式資源所在的路徑，其函數(shù)作用如下：
// 根據(jù)目前請求的協(xié)定（HTTP 或 HTTPS）產(chǎn)生資源文件網(wǎng)址
asset('img/photo.jpg', $title, $attributes);
而 public/css/screen.css 的內(nèi)容如下：
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }
#wrapper { margin: 10px auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #F48A00; }
#wrapper span.highlight { color: #F48A00; }
#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }
.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 239px; padding: 10px; display: inline-block; }
.main-col a { color: #F48A00; }
.main-col h1,
.main-col h2
{ line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }
#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }
首頁視圖
我們已經(jīng)建立好了基礎(chǔ)的布局模板。之后我們基于布局視圖建立的頁面通常和控制器方法有關(guān)，比如博客顯示頁面會有對應(yīng)的博客顯示模板。
讓我們來建立首頁的控制器方法和與之相應(yīng)的模板。
首先，建立控制器。在命令行中進入項目所在目錄，執(zhí)行如下命令：
php artisan make:controller PageController --plain
該命令會幫助我們新建控制器文件 app/Http/Controllers/PageController.php，將其內(nèi)容更改如下：
<?php
namespace App\Http\Controllers;
class PageController extends Controller
{
public function index()
{
return view('pages.index');
}
}
接下來，為這個控制器方法創(chuàng)建視圖，新建 resources/views/pages/index.blade.php，內(nèi)容如下:
@extends('layouts.app')
@section('title', 'larablog')
@section('body')
Blog homepage
@endsection
我們完成了首頁視圖，它繼承自基礎(chǔ)布局。接下來讓我們?yōu)槭醉撆渲寐酚尚畔ⅲ庉?app/Http/routes.php，將首頁的路由更改如下：
Route::get('/', 'PageController@index')->name('homepage');
此時，我們已為首頁定義了控制器方法，利用模板繼承構(gòu)建了首頁的視圖，并配置了路由。
接下來便可以通過訪問 http://localhost:8000/ 查看首頁的實際顯示效果。
關(guān)于頁面
這個部分的最后任務(wù)是創(chuàng)建一個靜態(tài)頁面。將演示如何將其它頁面聯(lián)系在一起，同時進一步了解模板繼承相關(guān)的用法。
路由
當我們要創(chuàng)建一個頁面的時候，首先都會考慮該給它建立怎么樣的路由信息。這里，我們打開 app/Http/routes.php，添加如下內(nèi)容：
Route::get('/about', 'PageController@about')->name('about');
控制器
打開新建的文件 app/Http/Controllers/PageController.php，添加新的控制器方法：
public function about()
{
return view('pages.about');
}
視圖
至于視圖，我們創(chuàng)建一個新的文件位于 resources/views/pages/about.blade.php，內(nèi)容如下：
@extends('layouts.app')
@section('title', 'About')
@section('body')
<header>
<h1>About larablog</h1>
</header>
<article>
<p>Donec imperdiet ante sed diam consequat et dictum erat faucibus. Aliquam sit
amet vehicula leo. Morbi urna dui, tempor ac posuere et, rutrum at dui.
Curabitur neque quam, ultricies ut imperdiet id, ornare varius arcu. Ut congue
urna sit amet tellus malesuada nec elementum risus molestie. Donec gravida
tellus sed tortor adipiscing fringilla. Donec nulla mauris, mollis egestas
condimentum laoreet, lacinia vel lorem. Morbi vitae justo sit amet felis
vehicula commodo a placerat lacus. Mauris at est elit, nec vehicula urna. Duis a
lacus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae.</p>
</article>
@endsection
這個頁面并沒有特殊的地方，我們只是模擬了一些頁面文字內(nèi)容，通過控制器方法渲染了它。
頁面鏈接
我們現(xiàn)在的關(guān)于頁面可以正常訪問了，你可以通過 http://localhost:8000/about 訪問。
目前來說，我們沒有在博客上添加任何跟它有關(guān)的訪問鏈接，用戶還得想我們一樣輸入完整的網(wǎng)址。
接下來讓我們添加訪問這個頁面鏈接，同時了解如何通過路由來生成 URL。盡量不去使用如下的方式去鏈接頁面：
<a href="/contact">Contact</a>
這是通過硬連接的方式與其它頁面聯(lián)系在一起。這很常見，但這樣的做法存在一個問題就是，
如果您想在任何時候更改聯(lián)系人頁面的位置，您將必須找到所有對硬鏈接的引用并更改它們。
比較好的做法是利用 Laravel 中提供的方法來生成路徑和 URL：
// 產(chǎn)生給定路由名稱網(wǎng)址
route($route, $parameters, $absolute = true);
// 產(chǎn)生給定路徑的完整網(wǎng)址
url('path', $parameters = array(), $secure = null);
知道這一點之后，讓我們找到布局模板 resources/views/app.blade.php 頁面。
將導航 navigation 內(nèi)容區(qū)塊的內(nèi)容更改如下：
<nav>
<ul class="navigation">
<li><a href="{{ route('homepage') }}">Home</a></li>
<li><a href="{{ route('about') }}">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
最后，更新 logo 的跳轉(zhuǎn)鏈接，同樣還是位于 resources/views/app.blade.php 文件中：
<hgroup>
<h2>@section('blog_title')<a href="{{ route('homepage') }}">larablog</a>@show</h2>
<h3>@section('blog_tagline')<a href="{{ route('homepage') }}">creating a blog in Laravel</a>@show</h3>
</hgroup>
現(xiàn)在刷新你的瀏覽器頁面，將會看到首頁和關(guān)于頁面如你所期望的鏈接在一起，并正常顯示。
總結(jié)
我們已經(jīng)介紹了 Laravel 應(yīng)用程序的基本內(nèi)容，包括配置和啟動應(yīng)用程序。同時也探索了 Laravel 程序背后的基本構(gòu)件原理，包括路由、控制器、模板引擎的使用。
接下來我們將關(guān)注如何創(chuàng)建聯(lián)系人頁面。該頁面比“關(guān)于”頁面要稍微深入一些，因為它允許用戶提交表單與服務(wù)器交互。下一章講介紹包括表單提交、驗證、處理在內(nèi)的相關(guān)內(nèi)容。
