這是系列文章的開頭，是創建網站的第一步，這部分的內容我們將下載并配置 Laravel 本地開發環境。創建博客應用，它會包含主要的 HTML 結構，我們可以通過本地進行瀏覽訪問。
配置開發環境
集成開發環境 XAMPP
開發環境的搭建方式有很多，比如 Homestead 開發環境，為了讓新手能快速搭建開發環境，我們選擇了集成開發環境這種容易快速上手使用的方案，如果你已經了解其它的方式或有精力去研究，歡迎查閱其它文章，這里不過多闡述。
XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包。它可以在 Windows、Linux、Solaris、Mac OS X 等多種操作系統下安裝使用，支持多語言：英文、簡體中文、繁體中文、韓文、俄文、日文等。
Windows 下還可以用 WAMP 集成開發包，和 XAMPP 類似，有需要話也可以進行了解
你可以在這里下載適合你系統的版本：
https://www.apachefriends.org/zh_cn/download.html
安裝完成后，你可以通過控制面板啟動相應的服務，控制面板如下：
Mac 系統中控制面板如下，Windows 系統與之大同小異。
在你啟動這 MySQL, Apache 這 2 個服務后，你就可以通過下面的地址來訪問數據庫：
http://localhost/phpmyadmin/
phpMyAdmin 是一個以PHP為基礎，以Web-Base方式架構在網站主機上的MySQL的數據庫管理工具，讓管理者可用Web接口管理MySQL數據庫。
你通過頁面登錄即可訪問并管理數據庫
注意：XAMPP 默認安裝時設定的 MySQL 賬戶 root 密碼為空
數據庫配置
由于項目中需要用到數據庫，這里我們先創建項目的數據庫 larablog：
構建應用
創建應用
首先，通過命令行工具進入你的 Web 目錄下：
Web 目錄即 XAMPP 安裝目錄下的 htdocs 目錄
我們這里通過 Composer 創建項目，執行如下命令：
composer create-project laravel/laravel larablog --prefer-dist "5.1.*"
Laravel 5.1 LTS 是 Laravel 歷史上第一個提供 LTS（長期支持 － long-time support） 支持的版本。由于不同版本特性之間的區別這里無法詳細講解，所以我們這里選用了 LTS 版，了解一個長期穩定的版本相對來說很有必要。
配置項目的數據信息
Laravel 安裝后會在目錄下生成名為 .env 的配置文件，通常我們不會該文件納入版本管理工具（比如 git），我們在本地開發和生產服務器上不同環境的配置信息也是區別于此。在項目目錄下還有一個 .env.example 文件，是作為配置模板而存在。
讓我們來編輯 .env 文件，設置數據庫信息：
這個文件里羅列的很多已經設定好的配置，默認用于本地開發環境，如果是生產環境，有些配置需要調整，這里我們主要是設置數據相關的配置。
找到如下部分，對內容進行更改：
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=
這里，數據庫的名稱使用的是開頭創建的 larablog，同時數據庫密碼為空。
默認結構說明
一個新安裝的 Laravel 根目錄包含許多個文件夾：
app 目錄，如你所料，這里面包含應用程序的核心代碼。
bootstrap 目錄包含了幾個框架啟動跟自動加載設置的文件。以及在 cache 文件夾中包含著一些框架在啟動性能優化時所生成的文件。
config 目錄，顧名思義，包含所有應用程序的配置文件。
database 目錄包含數據庫遷移與數據填充文件。如果你愿意的話，你也可以在此文件夾存放 SQLite 數據庫。
public 目錄包含了前端控制器和資源文件（圖片、JavaScript、CSS，等等）。
resources 目錄包含了視圖、原始的資源文件 (LESS、SASS、CoffeeScript) ，以及語言包。
storage 目錄包含編譯后的 Blade 模板、基于文件的 session、文件緩存和其它框架生成的文件。此文件夾分格成 app、framework，及 logs 目錄：
-
app目錄可用于存儲應用程序使用的任何文件。 -
framework目錄被用于保存框架生成的文件及緩存。 -
logs目錄包含了應用程序的日志文件。
tests 目錄包含自動化測試。這有一個現成的 PHPUnit 例子。
vendor 目錄包含你的 Composer 依賴模塊。
路由
在項目中 app/Http/routes.php 是用用程序的路由文件，請求的處理都通過這里進行進行配置。
默認如下：
<?php
Route::get('/', function () {
return view('welcome');
});
這里配置的路由信息是，訪問網站根路徑是，顯示視圖 welcome 的內容。
視圖 welcome 位于 resources/views/welcome.blade.php。
運行項目
在項目所在目錄下，通過命令行執行 php artisan serve 啟動應用，操作如下：
? larablog php artisan serve
Laravel development server started on http://localhost:8000/
Laravel 的控制臺命令啟動了 PHP 內置服務器，讓我們可以不需要單獨設立虛擬站點也可以訪問應用。是一種很快速便捷的運行辦法。
說明一下，本身我們通過 XAMPP 內置的 Apache 也可以配置虛擬站點進行訪問，因為這種運行 PHP 內置服務器的方式相對更方便，所以就沒有提及它。這里主要為了避免新手學習重要的內容時被一些細枝末節的問題所干擾，后期自己可以了解如何配置虛擬站點來運行應用，尤其是當使用了 Homestead 這樣的開發環境。
好了，如果你通過瀏覽器打開頁面 http://localhost:8000/ 將會看到如下頁面：
嘗試增加一些內容
接下來，我們嘗試增加一些簡單的內容，感受一下。
在 app/Http/routes.php 中添加一個路由配置：
Route::get('/hello/{name}', function($name) {
return 'Hello '. $name;
});
我們配置了一個路由用于輸出歡迎內容。
訪問 http://localhost:8000/hello/larablog 即可看到如下內容：
Hello larablog
模板引擎
在我們對 Laravel 構建應用有個基礎了解后，我們先從模版開始構建站點的結構。Laravel 使用了 Blade 作為模板引擎。
Blade 是 Laravel 所提供的一個簡單且強大的模板引擎。相較于其它知名的 PHP 模板引擎，Blade 并不會限制你必須得在視圖中使用 PHP 代碼。所有 Blade 視圖都會被編譯緩存成普通的 PHP 代碼，一直到它們被更改為止。這代表 Blade 基本不會對你的應用程序生成負擔。
Blade 視圖文件使用
.blade.php做為擴展名，通常保存于resources/views文件夾內。
基礎布局
首先，我們要為整個博客站點建立一個基礎視圖模板，整個站點視圖基于這個模板，繼承該視圖并顯示。
在項目錄下新建文件 resources/layouts/app.blade.php ，內容如下：
<!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>
如果你仔細看，會發現 @include('partials.sidebar') 這段代碼，我們額外引入了一個局部視圖。
所以，還需要建立一個局部頁面 resources/views/partials/sidebar.blade.php，內容如下：
@section('sidebar')
Sidebar content
@show
在 app.blade.php 文件中包含了傳統的 HTML 語法。不過，請注意 @section 與 @yield 命令。正如其名，@section 命令定義一個內容區塊，而 @yield 命令被用來 “顯示指定區塊” 的內容。
在默認情況下，Blade 模板中的 {{ }} 表達式將會自動調用 PHP 的 htmlentities 函數，以避免 XSS 攻擊。如果你不希望你的數據被轉義，可以使用下列的語法：
Hello, {!! $name !!}.
更多模板相關的信息請查看文檔 Blade Templates ，Blade 模板
在 stylesheets 內容區塊中，我們引入了一個樣式表：
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
我們使用 asset 幫助函數來生成樣式資源所在的路徑，其函數作用如下：
// 根據目前請求的協定（HTTP 或 HTTPS）產生資源文件網址
asset('img/photo.jpg', $title, $attributes);
而 public/css/screen.css 的內容如下：
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; }
首頁視圖
我們已經建立好了基礎的布局模板。之后我們基于布局視圖建立的頁面通常和控制器方法有關，比如博客顯示頁面會有對應的博客顯示模板。
讓我們來建立首頁的控制器方法和與之相應的模板。
首先，建立控制器。在命令行中進入項目所在目錄，執行如下命令：
php artisan make:controller PageController --plain
該命令會幫助我們新建控制器文件 app/Http/Controllers/PageController.php，將其內容更改如下：
<?php
namespace App\Http\Controllers;
class PageController extends Controller
{
public function index()
{
return view('pages.index');
}
}
接下來，為這個控制器方法創建視圖，新建 resources/views/pages/index.blade.php，內容如下:
@extends('layouts.app')
@section('title', 'larablog')
@section('body')
Blog homepage
@endsection
我們完成了首頁視圖，它繼承自基礎布局。接下來讓我們為首頁配置路由信息，編輯 app/Http/routes.php，將首頁的路由更改如下：
Route::get('/', 'PageController@index')->name('homepage');
此時，我們已為首頁定義了控制器方法，利用模板繼承構建了首頁的視圖，并配置了路由。
接下來便可以通過訪問 http://localhost:8000/ 查看首頁的實際顯示效果。
關于頁面
這個部分的最后任務是創建一個靜態頁面。將演示如何將其它頁面聯系在一起，同時進一步了解模板繼承相關的用法。
路由
當我們要創建一個頁面的時候，首先都會考慮該給它建立怎么樣的路由信息。這里，我們打開 app/Http/routes.php，添加如下內容：
Route::get('/about', 'PageController@about')->name('about');
控制器
打開新建的文件 app/Http/Controllers/PageController.php，添加新的控制器方法：
public function about()
{
return view('pages.about');
}
視圖
至于視圖，我們創建一個新的文件位于 resources/views/pages/about.blade.php，內容如下：
@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
這個頁面并沒有特殊的地方，我們只是模擬了一些頁面文字內容，通過控制器方法渲染了它。
頁面鏈接
我們現在的關于頁面可以正常訪問了，你可以通過 http://localhost:8000/about 訪問。
目前來說，我們沒有在博客上添加任何跟它有關的訪問鏈接，用戶還得想我們一樣輸入完整的網址。
接下來讓我們添加訪問這個頁面鏈接，同時了解如何通過路由來生成 URL。盡量不去使用如下的方式去鏈接頁面：
<a href="/contact">Contact</a>
這是通過硬連接的方式與其它頁面聯系在一起。這很常見，但這樣的做法存在一個問題就是，
如果您想在任何時候更改聯系人頁面的位置，您將必須找到所有對硬鏈接的引用并更改它們。
比較好的做法是利用 Laravel 中提供的方法來生成路徑和 URL：
// 產生給定路由名稱網址
route($route, $parameters, $absolute = true);
// 產生給定路徑的完整網址
url('path', $parameters = array(), $secure = null);
知道這一點之后，讓我們找到布局模板 resources/views/app.blade.php 頁面。
將導航 navigation 內容區塊的內容更改如下：
<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 的跳轉鏈接，同樣還是位于 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>
現在刷新你的瀏覽器頁面，將會看到首頁和關于頁面如你所期望的鏈接在一起，并正常顯示。
總結
我們已經介紹了 Laravel 應用程序的基本內容，包括配置和啟動應用程序。同時也探索了 Laravel 程序背后的基本構件原理，包括路由、控制器、模板引擎的使用。
接下來我們將關注如何創建聯系人頁面。該頁面比“關于”頁面要稍微深入一些，因為它允許用戶提交表單與服務器交互。下一章講介紹包括表單提交、驗證、處理在內的相關內容。
