larablog 系列文章 02 - 聯系頁面:表單請求和發送郵件

現在我們有基本的 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 目錄下。

你可以看到表單請求類中包含了 authorizerules 方法。前者的作用是確認用戶是否真的通過了授權,以便更新指定數據。
后者則是通過添加驗證規則驗證表單提交的數據。

如果 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 的格式,maxmin 分別要求內容長度不得超過和少于某個長度。

更多可用的驗證規則可用查閱這里 可用的驗證規則

為了能處理表單提交過來的 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 來進行數據庫的存儲和讀取以及建立模型之間的關系。還將構建顯示博客的頁面,并探索數據填充的意義。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,237評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,957評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,248評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,356評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,081評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,485評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,534評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,720評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,263評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,025評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,204評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,787評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,461評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,874評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,105評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,945評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,205評論 2 375

推薦閱讀更多精彩內容

  • 這是系列文章的開頭,是創建網站的第一步,這部分的內容我們將下載并配置 Laravel 本地開發環境。創建博客應用,...
    chansey閱讀 489評論 0 0
  • HTML表單 在HTML中,表單是 ... 之間元素的集合,它們允許訪問者輸入文本、選擇選項、操作對象等等,然后將...
    蘭山小亭閱讀 3,434評論 2 14
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,806評論 18 139
  • 文章分類 后臺文章分類列表頁模板導的詳細步驟建立數據表blog_category,并添加相應的文章字段使用php ...
    JoyceZhao閱讀 1,742評論 0 13
  • 今天的天氣和路況都很好,就是中途有遇到野狗和地鼠,小平還特地去拍地鼠而掉隊了,我們在前面等了好久都沒有等到人,嚇得...
    淺眠啊閱讀 144評論 0 1