現在我們有基本的 HTML 頁面布局,接下來我們將從最簡單的頁面(聯系頁面)開始。在完成本章內容后,將會有一個聯系頁面,用戶可以向管理員提交聯系信息,這些聯系信息將會通過電子郵件發送給管理員。
聯系頁面
配置路由
與我們第一章最后關于頁面一樣,我們先從定義路由信息開始。打開位于 app/Http/routes.php
,附加以下內容:
Route::get('/contact', 'PageController@contact')->name('contact');
和之前的配置沒什么區別,它將匹配通過 HTTP GET 請求的 /contact
路徑,執行 Page 控制的 contact 方法。
控制器
接下來給位于 app/Htpp/Controllers/PageController.php
添加處理聯系頁的控制器方法。
public function contact()
{
return view('pages.contact');
}
這個控制器方法目前比較簡單,僅僅是渲染聯系頁面的視圖。稍后我們將回到控制器再做調整。
視圖
創建的聯系頁面,文件位于 resources/views/pages/contact.blade.php
,并附加如下內容:
@extends('layouts.app')
@section('title', 'Contact')
@section('body')
<header>
<h1>Contact larablog</h1>
</header>
<p>Want to contact larablog?</p>
@endsection
這是一個簡單的模板,它繼承基礎視圖,重新覆蓋了標題和內容塊。
頁面鏈接
接下來,我們將修改基礎布局,好通過頁面上的入口訪問到該頁面。
@section('navigation')
<nav>
<ul class="navigation">
<li><a href="{{ route('homepage') }}">Home</a></li>
<li><a href="{{ route('about') }}">About</a></li>
<li><a href="{{ route('contact') }}">Contact</a></li>
</ul>
</nav>
@show
你如果你通過瀏覽器訪問 http://localhost:8000/
點擊導航上的 Contact
的鏈接,這個簡單的頁面就會呈現在你的眼前。
現在我們應該更進一步,我們將為這個頁面添加一個提交聯系信息的表單。分為兩個部分來完成,提交表單請求和處理表單。在此之前我們需要先考慮如何正確處理聯系人的信息。
表單
接下來我們將創建表單相關的內容。
表單視圖
打開基礎視圖 resources/views/layouts/app.blade.php
,更改 stylesheets
部分的內容:
@section('stylesheets')
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('css/blog.css') }}" type="text/css" rel="stylesheet" />
@show
在 stylesheets
內容塊可以看到,我們引入了新的 CSS 樣式表,blog.css
位于 public/css/blog.css
。其內容如下:
.blogger-notice { text-align: center; padding: 10px; background: #DFF2BF; border: 1px solid; color: #4F8A10; margin-bottom: 10px; }
form.blogger { font-size: 16px; }
form.blogger div { clear: left; margin-bottom: 10px; }
form.blogger label { float: left; margin-right: 10px; text-align: right; width: 100px; font-weight: bold; vertical-align: top; padding-top: 10px; }
form.blogger input[type="text"],
form.blogger input[type="email"]
{ width: 500px; line-height: 26px; font-size: 20px; min-height: 26px; }
form.blogger textarea { width: 500px; height: 150px; line-height: 26px; font-size: 20px; }
form.blogger input[type="submit"] { margin-left: 110px; width: 508px; line-height: 26px; font-size: 20px; min-height: 26px; }
form.blogger ul li { color: #ff0000; margin-bottom: 5px; }
接下來,我們要更改 resources/views/pages/contact.blade.php
文件,將其內容替換為:
@extends('layouts.app')
@section('title', 'Contact')
@section('body')
<header>
<h1>Contact larablog</h1>
</header>
<p>Want to contact larablog?</p>
<p>
@include('partials.success')
@include('partials.errors')
</p>
<form action="/contact" method="post" class="blogger">
{!! csrf_field() !!}
<div><label for="contact_name" class="required">Name</label><input type="text" id="name" name="name" required="required" /></div>
<div><label for="contact_email" class="required">Email</label><input type="email" id="email" name="email" required="required" /></div>
<div><label for="contact_subject" class="required">Subject</label><input type="text" id="subject" name="subject" required="required" /></div>
<div><label for="contact_body" class="required">Body</label><textarea id="body" name="body" required="required"></textarea></div>
<input type="submit" value="Submit" />
</form>
@endsection
另外,我們通過 @include('partials.errors')
和 @include('partials.success')
嵌入了一個局部視圖片段,用于顯示表單提交出現錯誤或成功時的提示信息。
文件 resources/views/partials/errors.blade.php
的內容如下:
@if (count($errors) > 0)
<div class="alert alert-danger">
@if (count($errors) > 1)
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@else
{{ $errors->all()[0] }}
@endif
</div>
@endif
而文件 resources/views/partials/success.blade.php
的內容如下:
@if (Session::has('message'))
<div class="alert alert-success">
{{ Session::get('message') }}
</div>
@endif
打開瀏覽器訪問 http://localhost:8000/contact
頁面,就可以看到我們構建好的表單頁面。
我們只是構建并顯示表單,接下來我們要進行表單請求驗證和處理表單了。
處理表單請求
命令行下進入項目所在目錄,執行如下命令:
php artisan make:request EnquiryRequest
該命令會創建一個表單請求類 EnquiryRequest.php
,新生成的類文件會被放在 app/Http/Requests
目錄下。
你可以看到表單請求類中包含了 authorize
和 rules
方法。前者的作用是確認用戶是否真的通過了授權,以便更新指定數據。
后者則是通過添加驗證規則驗證表單提交的數據。
如果 authorize 方法返回 false,則會自動返回一個 HTTP 響應,其中包含 403 狀態碼,而你的控制器方法也將不會被運行。
如果你打算在應用程序的其它部分處理授權邏輯,只需從 authorize 方法返回 true。
更多內容可以查閱文檔 表單請求驗證
編輯這個文件 app/Http/Requests/EnquiryRequest.php
,修改內容為如下:
<?php
namespace App\Http\Requests;
use App\Http\Requests\Request;
class EnquiryRequest extends Request
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'name' => 'required',
'email' => 'required|email',
'subject' => 'required|max:50',
'body' => 'required|min:50'
];
}
}
我們在 rules
方法中給提交的表單數據定義了驗證規則,我想這些規則已經很直觀的表達了驗證內容,required
要求為內容為必填,
email
要求內容符合 Email 的格式,max
和 min
分別要求內容長度不得超過和少于某個長度。
更多可用的驗證規則可用查閱這里 可用的驗證規則
為了能處理表單提交過來的 POST
請求,接下來我們需要修改路由配置,打開 app/Http/routes.php
,添加如下內容:
Route::post('/contact', 'PageController@postContact');
緊接著,打開 app/Http/Controllers/PageController.php
增加新的控制器方法 postContact
:
<?php
namespace App\Http\Controllers;
use App\Http\Requests\EnquiryRequest;
class PageController extends Controller
{
public function index()
{
return view('pages.index');
}
public function about()
{
return view('pages.about');
}
public function contact()
{
return view('pages.contact');
}
public function postContact(EnquiryRequest $request)
{
// ...
}
}
現在訪問 http://localhost:8000/contact
提交表單,如果填寫的內容不符合驗證要求將會顯示錯誤信息。
由于我們暫時還未對提交的表單數據做最終的處理,所以就算用戶提交的表單有效暫時也不會發生什么。
發送電子郵件
雖然我們的聯系表單允許用戶提交表單,但實際上還沒有發生任何事情。讓我們更新控制器,讓用戶提交表單后向博客網站管理員發送一封電子郵件。
配置郵件服務
Laravel 基于熱門的 SwiftMailer 函數庫提供了一套簡潔的 API。Laravel 為 SMTP、Mailgun、Mandrill、Amazon SES、PHP 的 mail 函數及 sendmail 提供驅動,讓你可以從本地或云端服務自由地發送郵件。
雖然支持這么多郵件驅動,但是我們這里會用能夠容易實現的辦法,會基于 SMTP 驅動,使用 126 的郵箱的來演示。
并非你一定得用 126 的郵箱,只要你能夠獲得郵箱提供商的 SMTP 配置參數(服務器、端口、認證方式)進行設置即可。
打開項目目錄下的 .env
文件,找到這部分的內容修改如下:
MAIL_DRIVER=smtp
MAIL_HOST=smtp.126.com
MAIL_PORT=25
MAIL_USERNAME=126郵箱賬號
MAIL_PASSWORD=郵箱密碼
MAIL_ENCRYPTION=null
回到控制器 app/Http/Controllers/PageController.php
中,修改 postContact
方法:
$flag = Mail::send('emails.enquiry', [
'name'=> $request->get('name'),
'email' => $request->get('email'),
'subject' => $request->get('subject'),
'body' => $request->get('body')
], function($message){
$message->from('{126郵箱地址}', 'larablog');
$message->to('{想要收信的郵箱地址}')->subject('Enquiry');
});
if ($flag) {
return redirect()->back()->with('message', 'Mail sent successfully. Thank you!');
} else {
return redirect()->back()->withErrors('Sending mail failed, please try again.');
}
注意:這里需要用到你自己的郵箱
另外這里的 emails.enquiry
是郵件內容的模板,文件位于 resources/views/emails/enquiry.blade.php
。
內容如下:
A contact enquiry was made by {{ $name }} at {{ \Carbon\Carbon::now()->format('Y-m-d H:i:s') }}.
Reply-To: {{ $email }}
Subject: {{ $subject }}
Body:
{{ $body }}
我們提供了模板的方式來編排郵件的內容,這看上去能更好的組織內容。
如果你想了解更多的關于 Laravel 當中發送郵件的信息可以查閱這里 郵件
至此,我們可以通過瀏覽器訪問 http://localhost:8000/contact
。你可以嘗試提交表單信息并接收郵件,體會我們實踐的每個過程。
總結
我們已經展示了創建網站最基本內容一的表單功能。通過這個部分的內容可以看到,Laravel 提供了很好的處理表單請求的方案,包括認證和數據驗證。這讓我們在控制器中的代碼顯得比較干凈利落。我們還提到了怎么通過 Laravel 內置的郵件驅動對接你所需要的郵件功能,并發送郵件。
接下來,我們將探討“模型”這個部分,將介紹如何運用 ORM 來進行數據庫的存儲和讀取以及建立模型之間的關系。還將構建顯示博客的頁面,并探索數據填充的意義。