# 第2節 Laravel-靜態資源管理及模板布局 #
2.1 創建控制器
2.2 創建列表頁
2.3 創建首頁視圖
2.4 靜態資源管理
## 2.1 創建控制器 ##
使用Artisan命令行工具創建 `StudentController`:
php artisan make:controller StudentController
控制器路徑 `app\Http\Controllers\StudentController.php`
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class StudentController extends Controller
{
//
}
## 2.2 創建列表頁 ##
創建 `index()` 方法，輸出字符串"Hello Laravel"：
**添加路由：**
在路由文件 `app\Http\routes.php` 中添加路由，訪問 `index()` 方法
把默認的路由：
Route::get('/', function () {
return view('welcome');
});
修改為：
Route::get('/', ['uses' => 'StudentController@index']);
**測試是否可以訪問**
## 2.3 創建首頁視圖 ##
創建文件 `resources\views\student\index.blade.php` 隨便輸入點內容。
**顯示視圖：**
class StudentController extends Controller
{
public function index()
{
return view('student/index');
}
}
**效果如下：**
**下載靜態模板文件**
靜態模板文件: [下載地址](https://github.com/webjust/laravel_form_step/blob/master/doc/html.zip)
創建模板文件：`resources\views\layout\student.blade.php`
復制文件 `\html\form\layout-index.html` 內容到 `student.blade.php`：
~~~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>輕松學會Laravel</title>
<!-- Bootstrap CSS 文件 -->
<link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 頭部 -->
<div class="jumbotron">
<div class="container">
<h2>輕松學會Laravel</h2>
<p> - 玩轉Laravel表單</p>
</div>
</div>
<!-- 中間內容區局 -->
<div class="container">
<div class="row">
<!-- 左側菜單區域 -->
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">學生列表</a>
<a href="#" class="list-group-item">新增學生</a>
</div>
</div>
<!-- 右側內容區域 -->
<div class="col-md-9">
<!-- 成功提示框 -->
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>成功!</strong> 操作成功提示！
</div>
<!-- 失敗提示框 -->
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>失敗!</strong> 操作失敗提示！
</div>
<!-- 自定義內容區域 -->
<div class="panel panel-default">
<div class="panel-heading">學生列表</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>添加時間</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分頁 -->
<div>
<ul class="pagination pull-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 尾部 -->
<div class="jumbotron" style="margin:0;">
<div class="container">
<span> @2016 webjust</span>
</div>
</div>
<!-- jQuery 文件 -->
<script src="./static/jquery/jquery.min.js"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="./static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
~~~
**使用模板繼承：**
在 `resources\views\student\index.blade.php` 文件內容中輸入：
@extends('layout/student')
現在刷新 `http://example.com/` 效果如圖：
接下來，修改主模板文件 `layout/student`：
~~~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title', '用戶列表頁面') - 輕松學會Laravel</title>
<!-- Bootstrap CSS 文件 -->
<link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
</head>
<body>
@section('header')
<!-- 頭部 -->
<div class="jumbotron">
<div class="container">
<h2>輕松學會Laravel</h2>
<p> - 玩轉Laravel表單</p>
</div>
</div>
@show
<!-- 中間內容區局 -->
<div class="container">
<div class="row">
<!-- 左側菜單區域 -->
@include('shared/siderbar')
<!-- 右側內容區域 -->
<div class="col-md-9">
@yield('content')
</div>
</div>
</div>
@section('footer')
<!-- 尾部 -->
<div class="jumbotron" style="margin:0;">
<div class="container">
<span> @2016 webjust</span>
</div>
</div>
@show
<!-- jQuery 文件 -->
<script src="./static/jquery/jquery.min.js"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="./static/bootstrap/js/bootstrap.min.js"></script>
@section('javascript')
@show
</body>
</html>
~~~
創建文件：`resources\views\shared\siderbar.blade.php` 把左邊導航的內容分離出來
~~~
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">學生列表</a>
<a href="#" class="list-group-item">新增學生</a>
</div>
</div>
~~~
同理，內容主體部分復制到 `resources\views\student\index.blade.php`
~~~
@extends('layout/student')
@section('content')
<!-- 成功提示框 -->
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>成功!</strong> 操作成功提示！
</div>
<!-- 失敗提示框 -->
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>失敗!</strong> 操作失敗提示！
</div>
<!-- 自定義內容區域 -->
<div class="panel panel-default">
<div class="panel-heading">學生列表</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>添加時間</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分頁 -->
<div>
<ul class="pagination pull-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
@endsection
~~~
## 2.4 靜態資源管理 ##
將 `\html\form\static` 文件夾復制到 `public` 目錄下。
顯示靜態資源則需要修改主模板文件中的 css, js 的路徑即可。
~~~
<link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
~~~
修改為
~~~
<link rel="stylesheet" href="{{ asset('static/bootstrap/css/bootstrap.min.css') }}">
~~~
同理：
~~~
<!-- jQuery 文件 -->
<script src="./static/jquery/jquery.min.js"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="./static/bootstrap/js/bootstrap.min.js"></script>
~~~
修改為
~~~
<!-- jQuery 文件 -->
<script src="{{ asset('static/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="{{ asset('static/bootstrap/js/bootstrap.min.js') }}"></script>
~~~
現在的首頁顯示效果：
先別急！我們繼續修改模板文件。
我們把消息提示的內容也提取到公共的模板文件中。
**成功提示框的內容復制到： `resources\views\shared\success.blade.php`**
~~~
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>成功!</strong> 操作成功提示！
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>失敗!</strong> 操作失敗提示！
</div>
~~~
目前，首頁的視圖文件內容引入這些公共模板文件，視圖文件為：
~~~
@extends('layout/student')
@section('content')
<!-- 自定義內容區域 -->
<div class="panel panel-default">
<div class="panel-heading">學生列表</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>添加時間</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">詳情</a>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分頁 -->
<div>
<ul class="pagination pull-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
@endsection
~~~
主視圖中引入消息內公共視圖文件，則修改一下：
~~~
...
<!-- 中間內容區局 -->
<div class="container">
<div class="row">
<!-- 左側菜單區域 -->
@include('shared/siderbar')
<!-- 右側內容區域 -->
<div class="col-md-9">
<!-- 成功提示框 -->
@include('shared/success')
@yield('content')
</div>
</div>
</div>
...
~~~
