Laravel 5 系列入門教程(四)【最適合中國人的 Laravel 教程】【完結】
本文是本系列教程的完結篇,我們將一起給 Page 加入評論功能,讓遊客在前臺頁面可以檢視、提交、回覆評論,同時我們將在後臺完善評論管理功能,可以刪除、編輯評論。Page 和評論將使用 Eloquent 提供的“一對多關係”。最終,我們將得到一個個人部落格系統的雛形,並佈置一個大作業,供大家實戰練習。
1. 初識 Eloquent
Laravel Eloquent ORM 是 Laravel 中非常重要的部分,也是 Laravel 能如此流行的原因之一。中文文件在:
在前面的教程中已經建立好的 learnlaravel5/app/Page.php 就是一個 Eloquent Model 類:
<?php namespace App;
use Illuminate\Database\Eloquent\Model;
class Page extends Model {
//
}
2. 建立 Comment 模型
首先我們要新建一張表來儲存 Comment,命令列執行:
php artisan make:model Comment
成功以後,修改 migration 檔案 learnlaravel5/database/migrations/***_create_comments_table.php 的相應位置為:
Schema::create('comments', function(Blueprint $table) { $table->increments('id'); $table->string('nickname'); $table->string('email')->nullable(); $table->string('website')->nullable(); $table->text('content')->nullable(); $table->integer('page_id'); $table->timestamps(); });
之後執行:
php artisan migrate
去資料庫裡瞧瞧,comments 表已經躺在那兒啦。
3. 建立“一對多關係”
修改 Page 模型:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Page extends Model { public function hasManyComments() { return $this->hasMany('App\Comment', 'page_id', 'id'); } }
搞定啦~ Eloquent 中模型間關係就是這麼簡單。
4. 前臺提交功能
修改 Comment 模型:
<?php namespace App;
use Illuminate\Database\Eloquent\Model;
class Comment extends Model {
protected $fillable = ['nickname', 'email', 'website', 'content', 'page_id'];
}
增加一行路由:
Route::post('comment/store', '[email protected]');
執行以下命令建立 CommentsController 控制器:
php artisan make:controller CommentsController
修改 CommentsController:
<?php namespace App\Http\Controllers; use App\Http\Requests; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use Redirect, Input; use App\Comment; class CommentsController extends Controller { public function store() { if (Comment::create(Input::all())) { return Redirect::back(); } else { return Redirect::back()->withInput()->withErrors('評論發表失敗!'); } } }
修改檢視 learnlaravel5/resources/views/pages/show.blade.php:
@extends('_layouts.default')
@section('content')
<h4>
<a href="/">⬅️返回首頁</a>
</h4>
<h1 style="text-align: center; margin-top: 50px;">{{ $page->title }}</h1>
<hr>
<div id="date" style="text-align: right;">
{{ $page->updated_at }}
</div>
<div id="content" style="padding: 50px;">
<p>
{{ $page->body }}
</p>
</div>
<div id="comments" style="margin-bottom: 100px;">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div id="new">
<form action="{{ URL('comment/store') }}" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="page_id" value="{{ $page->id }}">
<div class="form-group">
<label>Nickname</label>
<input type="text" name="nickname" class="form-control" style="width: 300px;" required="required">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" name="email" class="form-control" style="width: 300px;">
</div>
<div class="form-group">
<label>Home page</label>
<input type="text" name="website" class="form-control" style="width: 300px;">
</div>
<div class="form-group">
<label>Content</label>
<textarea name="content" id="newFormContent" class="form-control" rows="10" required="required"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success col-lg-12">Submit</button>
</form>
</div>
<script>
function reply(a) {
var nickname = a.parentNode.parentNode.firstChild.nextSibling.getAttribute('data');
var textArea = document.getElementById('newFormContent');
textArea.innerHTML = '@'+nickname+' ';
}
</script>
<div class="conmments" style="margin-top: 100px;">
@foreach ($page->hasManyComments as $comment)
<div class="one" style="border-top: solid 20px #efefef; padding: 5px 20px;">
<div class="nickname" data="{{ $comment->nickname }}">
@if ($comment->website)
<a href="{{ $comment->website }}">
<h3>{{ $comment->nickname }}</h3>
</a>
@else
<h3>{{ $comment->nickname }}</h3>
@endif
<h6>{{ $comment->created_at }}</h6>
</div>
<div class="content">
<p style="padding: 20px;">
{{ $comment->content }}
</p>
</div>
<div class="reply" style="text-align: right; padding: 5px;">
<a href="#new" onclick="reply(this);">回覆</a>
</div>
</div>
@endforeach
</div>
</div>
@endsection
前臺評論功能完成。
檢視效果:
5. 後臺管理功能
修改基礎檢視 learnlaravel5/resources/views/app.blade.php 為:
<!DOCTYPE html> <html lang="en"> <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> <link href="/css/app.css" rel="stylesheet"> <!-- Fonts --> <link href='http://fonts.useso.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Learn Laravel 5</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/admin">後臺首頁</a></li> </ul> <ul class="nav navbar-nav"> <li><a href="/admin/comments">管理評論</a></li> </ul> <ul class="nav navbar-nav navbar-right"> @if (Auth::guest()) <li><a href="/auth/login">Login</a></li> <li><a href="/auth/register">Register</a></li> @else <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/auth/logout">Logout</a></li> </ul> </li> @endif </ul> </div> </div> </nav> @yield('content') <!-- Scripts --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
修改後臺路由組(增加了一行):
Route::group(['prefix' => 'admin', 'namespace' => 'Admin', 'middleware' => 'auth'], function() { Route::get('/', '[email protected]'); Route::resource('pages', 'PagesController'); Route::resource('comments', 'CommentsController'); });
建立 Admin\CommentsController :
php artisan make:controller Admin/CommentsController
Admin/CommentsController 要有 檢視所有、檢視單個、POST更改、刪除四個介面:
<?php namespace App\Http\Controllers\Admin;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Comment;
use Redirect, Input;
class CommentsController extends Controller {
public function index()
{
return view('admin.comments.index')->withComments(Comment::all());
}
public function edit($id)
{
return view('admin.comments.edit')->withComment(Comment::find($id));
}
public function update(Request $request, $id)
{
$this->validate($request, [
'nickname' => 'required',
'content' => 'required',
]);
if (Comment::where('id', $id)->update(Input::except(['_method', '_token']))) {
return Redirect::to('admin/comments');
} else {
return Redirect::back()->withInput()->withErrors('更新失敗!');
}
}
public function destroy($id)
{
$comment = Comment::find($id);
$comment->delete();
return Redirect::to('admin/comments');
}
}
接下來建立兩個檢視:
learnlaravel5/resources/views/admin/comments/index.blade.php:
@extends('app') @section('content') <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default"> <div class="panel-heading">管理評論</div> <div class="panel-body"> <table class="table table-striped"> <tr class="row"> <th class="col-lg-4">Content</th> <th class="col-lg-2">User</th> <th class="col-lg-4">Page</th> <th class="col-lg-1">編輯</th> <th class="col-lg-1">刪除</th> </tr> @foreach ($comments as $comment) <tr class="row"> <td class="col-lg-6"> {{ $comment->content }} </td> <td class="col-lg-2"> @if ($comment->website) <a href="{{ $comment->website }}"> <h4>{{ $comment->nickname }}</h4> </a> @else <h3>{{ $comment->nickname }}</h3> @endif {{ $comment->email }} </td> <td class="col-lg-4"> <a href="{{ URL('pages/'.$comment->page_id) }}" target="_blank"> {{ App\Page::find($comment->page_id)->title }} </a> </td> <td class="col-lg-1"> <a href="{{ URL('admin/comments/'.$comment->id.'/edit') }}" class="btn btn-success">編輯</a> </td> <td class="col-lg-1"> <form action="{{ URL('admin/comments/'.$comment->id) }}" method="POST" style="display: inline;"> <input name="_method" type="hidden" value="DELETE"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <button type="submit" class="btn btn-danger">刪除</button> </form> </td> </tr> @endforeach </table> </div> </div> </div> </div> </div> @endsection
learnlaravel5/resources/views/admin/comments/edit.blade.php:
@extends('app') @section('content') <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default"> <div class="panel-heading">編輯評論</div> <div class="panel-body"> @if (count($errors) > 0) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ URL('admin/comments/'.$comment->id) }}" method="POST"> <input name="_method" type="hidden" value="PUT"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <input type="hidden" name="page_id" value="{{ $comment->page_id }}"> Nickname: <input type="text" name="nickname" class="form-control" required="required" value="{{ $comment->nickname }}"> <br> Email: <input type="text" name="email" class="form-control" required="required" value="{{ $comment->email }}"> <br> Website: <input type="text" name="website" class="form-control" required="required" value="{{ $comment->website }}"> <br> Content: <textarea name="content" rows="10" class="form-control" required="required">{{ $comment->content }}</textarea> <br> <button class="btn btn-lg btn-info">提交修改</button> </form> </div> </div> </div> </div> </div> @endsection
後臺管理功能完成,檢視效果:
6. 大作業
依賴於 Page 的評論功能已經全部完成,個人部落格系統雛形誕生。在本系列教程的最後,佈置一個大作業:構建出 Article 的前後臺,並且加上 Article 與 Comment 的一對多關係,加入評論和評論管理功能。在做這個大作業的過程中,你將會反覆地回頭去看前面的教程,反覆地閱讀中文文件,會仔細閱讀我的程式碼,等你完成大作業的時候,Laravel 5 就真正入門啦~~
Laravel 5 系列入門教程【最適合中國人的 Laravel 教程】到此結束,謝謝大家!
相關推薦
Laravel 5 系列入門教程(四)【最適合中國人的 Laravel 教程】【完結】
本文是本系列教程的完結篇,我們將一起給 Page 加入評論功能,讓遊客在前臺頁面可以檢視、提交、回覆評論,同時我們將在後臺完善評論管理功能,可以刪除、編輯評論。Page 和評論將使用 Eloquent 提供的“一對多關係”。最終,我們將得到一個個人部落格系統的雛形,並佈
Laravel 系列入門教程(三)【最適合中國人的 Laravel 教程】
在本篇文章中,我們將嘗試構建一個帶後臺的簡單部落格系統。我們將會使用到 路由、MVC、Eloquent ORM 和 blade 檢視系統。 簡單部落格系統規劃 我們在教程一中已經新建了一個繼承自 Eloquent Model 類的 Article 類,使用 migration 建立了資料表並使用 seed
2016 版 Laravel 系列入門教程(三)【最適合中國人的 Laravel 教程】
在本篇文章中,我們將嘗試構建一個帶後臺的簡單部落格系統。我們將會使用到 路由、MVC、Eloquent ORM 和 blade 檢視系統。 原文地址:http://www.cnblogs.com/grimm/p/5627004.html 簡單部落格系統規劃 我們在教程一中已經新建了一個 Eloquent
Laravel 4 系列入門教程(一)【最適合中國人的Laravel教程】
每一個教程完成,我將會git commit一次。 大家在任何地方卡住,最快捷的解決方式就是去看我的示例程式碼。 0. 預設條件 本文預設你已經有配置完善的PHP+MySQL執行環境,懂得PHP網站執行的基礎知識。跟隨本教程走完一遍,你將會得到一個基礎的包含
2016 版 Laravel 系列入門教程(二)【最適合中國人的 Laravel 教程】
本篇文章中,我將跟寶寶們一起學習 Laravel 框架最重要的部分——路由系統。 如果你讀過舊的基於 Laravel 5.0 版本的此教程,你會發現那篇文章裡大書特書的 Auth 系統構建已經被 Laravel 捎帶手給解決了。在更早的 Laravel 4 版本的教程中,
資料探勘入門系列教程(四)之基於scikit-lean實現決策樹
資料探勘入門系列教程(四)之基於scikit-lean決策樹處理Iris載入資料集資料特徵訓練隨機森林調參工程師結尾 資料探勘入門系列教程(四)之基於scikit-lean決策樹處理Iris 在上一篇部落格,我們介紹了決策樹的一些知識。如果對決策樹還不是很瞭解的話,建議先閱讀上一篇部落格,在來學習這
Unreal Engine 4(虛幻UE4)GameplayAbilities 插件入門教程(四)技能屏蔽和簡單的Buff等
網絡 important any time sim sed exe triggers 進入 本節內容繼續上一節教程的內容(如果沒有看過前面的教程,請前往學習),不會講太難的新東西,而是繼續探究技能標簽(Abiilty Tags)的內容。先來一道開胃菜。 第1.1步: 將
JXLS 2.4.0系列教程(四)——多sheet是怎麽做到的
while director write 教程 == 模板 phy sheet ack 註:本文代碼在第一篇文章基礎上修改而成,請務必先閱讀第一篇文章。 http://www.cnblogs.com/foxlee1024/p/7616987.html 本文也不會過多的講解模
JXLS 2.4.0系列教程(四)——拾遺 如何做頁面小計
進行 line http spa shee shel nes 默認 閱讀 註:閱讀本文前,請先閱讀第四篇文章。 http://www.cnblogs.com/foxlee1024/p/7619845.html 前面寫了第四篇教程,發現有些東西忘了講了,這裏補
零基礎快速入門SpringBoot2.0教程 (四)
trace ssh ket files frame ali serialize fis 系統服務 一、JMS介紹和使用場景及基礎編程模型簡介:講解什麽是小寫隊列,JMS的基礎知識和使用場景 1、什麽是JMS: Java消息服務(Java Message Service),J
Docker入門教程(四)Docker Registry
【編者的話】DockerOne組織翻譯了Flux7的Docker入門教程,本文是系列入門教程的第四篇,介紹了Docker Registry,它是Docker中的重要元件。本文通過情景演繹的方式對其進行了介紹,圖文並茂,強烈推薦讀者閱讀。 在Docker系列教程的上一篇文章中,我們討論了Docke
Golang入門基礎教程(四)Hello World
剛開始接觸一門語言,首先要做的肯定是最經典的Hello World 了,現在,讓我們通過golang來實現一些列印helloworld。 編輯一個檔名為main.go的golang檔案,檔案內容如下: package main import "fmt" func main(){
Elastic Job 入門教程(四)— 事件追蹤
Elastic-Job提供了事件追蹤功能,用於查詢、統計和監控作業執行歷史和執行狀態。Elastic-Job-Lite在配置中提供了JobEventConfiguration,目前支援資料庫方式配置。事
Python-matplotlib-入門教程(四)-顏色管理
0.摘要 本文主要介紹使用matplotlib繪圖過程中的顏色管理,使得圖表更具表現力。 1.顏色 顏色的配置方式有三種:字母、十六進位制、RGB(或RGBA) (1)常用顏色配置: 顏色-字母對照表 顏色
Java NIO系列教程(四) Scatter/Gather
作者:Jakob Jenkov 譯者:郭蕾 Java NIO開始支援scatter/gather,scatter/gather用於描述從Channel(譯者注:Channel在中文經常翻譯為通道)中讀取或者寫入到Channel的操作。 分散(scatter)從Channel中讀取是
OAuth 2.0系列教程(四) 客戶端型別
作者:Jakob Jenkov 譯者:林浩 校對:郭蕾 OAuth 2.0客戶端角色被細分為一系列型別和配置,本節將闡述這些型別和配置。 OAuth 2.0規範定義了兩種客戶端型別: 保密的 公有的 保密的客戶端能夠對外部保持客戶端密碼保密。該客戶端密碼是由授權伺服器分配給客戶
[譯]MVC網站教程(四):MVC4網站中整合jqGrid表格外掛(系列完結)
目錄 1.介紹 2.軟體環境 介紹 “MVC網站教程”系列的目的是教你如何使用 ASP.NET MVC 建立一個基本的、可擴充套件的網站。 4)MVC網站教程(四):MVC4網站中整合jqGrid表格外掛(涉及技術:AJAX,JSON,jQue
webpack4系列教程(四):處理專案中的資原始檔(一)
傳送門: webpack4系列教程(一):初識webpack webpack4系列教程(二):建立專案,打包第一個JS檔案 webpack4系列教程(三):自動生成專案中的HTML檔案 1. Loader的使用 之前的博文已經介紹了Loader的
Spring Boot 初級入門教程(四) —— 程式碼測試配置(附原始碼)
在專案開發中,測試環節是非常重要的,所以選擇好的程式碼測試工具也顯得尤為重要。 首先,基於前三篇的程式碼,先修改一些 Jar 包的版本,都用目前最新版本(強迫症!!!)。 junit 版本修改:3.8.1 -》 4.12 spring boot 版本修改:1.4.2.R
網頁播放器系列教程(四)--功能開發
(三)功能開發 接上文,我們現在開始編寫Javascript程式碼,前文我們主檔案已經引入了js檔案,只需在js檔案中編寫程式碼。 1.播放音訊; 怎樣才能讓頁面播放音訊呢?這需要“audio”標籤,但是我們不是在頁面總插入改標籤,而是用JS實現,只需編寫如下程式碼: var Musicaudi