公司導入 Laravel 分享 - 6. 基礎實作 - 文章

1. 建立 Route

路徑：routes/web.php 
Route::resource('post', 'PostController');

2. 建立 Model、Controller 和 Migration

artisan command 
php artisan make:model Post -m -r

3. 撰寫資料庫 schema

路徑：database/migrations/2017_05_08_080254_create_posts_table.php 
  1. public function up()
  2. {
  3.     Schema::create('posts', function (Blueprint $table) {
  4.         $table->increments('id');
  5.         $table->string('title');
  6.         $table->text('content');
  7.         $table->timestamps();
  8.     });
  9. }

4. 執行 migrate 建立資料表

artisan command 
php artisan migrate

5. create

5.1. 製作 create 頁的 controller

路徑：app/Http/Controllers/PostController.php 
  1. public function create()
  2. {
  3.     return view('post.create');
  4. }

5.2. 製作 create 頁的 view

路徑：resources/views/post/create.blade.php 
  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div class="container">
  5.     <div class="page-header">
  6.         <h1>新增文章</h1>
  7.     </div>
  8.     <form class="form-horizontal" action="{{ route('post.store') }}" method="post">
  9.         {{ csrf_field() }}
  10.         <div class="form-group">
  11.             <label for="title" class="col-sm-2 control-label">標題</label>
  12.             <div class="col-sm-10">
  13.                 <input type="text" class="form-control" id="title" name="title">
  14.             </div>
  15.         </div>
  16.         <div class="form-group">
  17.             <label for="content" class="col-sm-2 control-label">內容</label>
  18.             <div class="col-sm-10">
  19.                 <textarea class="form-control" id="content" name="content"></textarea>
  20.             </div>
  21.         </div>
  22.         <div class="form-group">
  23.             <div class="col-sm-offset-2 col-sm-10">
  24.                 <button type="submit" class="btn btn-primary">新增</button>
  25.             </div>
  26.         </div>
  27.     </form>
  28. </div>
  29. @endsection

5.3. 製作 store

路徑：app/Http/Controllers/PostController.php 
  1. public function store(Request $request)
  2. {
  3.     $post = new Post();
  4.  
  5.     $post->title = $request->title;
  6.     $post->content = $request->content;
  7.  
  8.     $post->save();
  9.  
  10.     return redirect()->route('post.index');
  11. }

6. index

6.1. 製作 index 頁的 controller

路徑：app/Http/Controllers/PostController.php 
  1. public function index()
  2. {
  3.     $posts = Post::all();
  4.  
  5.     return view('post.index', compact('posts'));
  6. }

6.2. 製作 index 頁的 view

路徑：resources/views/post/index.blade.php 
  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div class="container">
  5.     <div class="page-header">
  6.         <h1>文章</h1>
  7.     </div>
  8.     <a class="btn btn-primary" href="{{ route('post.create') }}">新增</a>
  9.     <div class="table-responsive">
  10.         <table class="table table-hover">
  11.             <thead>
  12.                 <tr>
  13.                     <th>標題</th>
  14.                     <th>內容</th>
  15.                     <th colspan="2">操作</th>
  16.                 </tr>
  17.             </thead>
  18.             <tbody>
  19.                 @foreach($posts as $post)
  20.                     <tr>
  21.                         <td><a href="{{ route('post.show', $post->id) }}">{{ $post->title }}</a></td>
  22.                         <td>{{ $post->content }}</td>
  23.                         <td>
  24.                             <a class="btn btn-primary" href="{{ route('post.edit', $post->id) }}">編輯</a>
  25.                         </td>
  26.                         <td>
  27.                             <form action="{{ route('post.destroy', $post->id) }}" method="POST">
  28.                                 {{ csrf_field() }}
  29.                                 {{ method_field('DELETE') }}
  30.                                 <input class="btn btn-danger" type="submit" name="submit" value="刪除">
  31.                             </form>
  32.                         </td>
  33.                     </tr>
  34.                 @endforeach
  35.             </tbody>
  36.         </table>
  37.     </div>
  38. </div>
  39. @endsection

7. show

7.1. 製作 show 頁的 controller

路徑：app/Http/Controllers/PostController.php 
  1. public function show(Post $post)
  2. {
  3.     return view('post.show', compact('post'));
  4. }

7.2. 製作 show 頁的 view

路徑：resources/views/post/show.blade.php 
  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div class="container">
  5.     <div class="page-header">
  6.         <h1>{{ $post->title }}</h1>
  7.     </div>
  8.     <p>
  9.         {{ $post->content }}
  10.     </p>
  11. </div>
  12. @endsection

8. edit

8.1. 製作 edit 頁的 controller

路徑：app/Http/Controllers/PostController.php 
  1. public function edit(Post $post)
  2. {
  3.     return view('post.edit', compact('post'));
  4. }

8.2. 製作 edit 頁的 view

路徑：resources/views/post/edit.blade.php 
  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div class="container">
  5.     <div class="page-header">
  6.         <h1>編輯文章</h1>
  7.     </div>
  8.     <form class="form-horizontal" action="{{ route('post.update', $post->id) }}" method="post">
  9.         {{ csrf_field() }}
  10.         {{ method_field('PUT') }}
  11.         <div class="form-group">
  12.             <label for="title" class="col-sm-2 control-label">標題</label>
  13.             <div class="col-sm-10">
  14.                 <input type="text" class="form-control" id="title" name="title" value="{{ $post->title }}">
  15.             </div>
  16.         </div>
  17.         <div class="form-group">
  18.             <label for="content" class="col-sm-2 control-label">內容</label>
  19.             <div class="col-sm-10">
  20.                 <textarea class="form-control" id="content" name="content">{{ $post->content }}</textarea>
  21.             </div>
  22.         </div>
  23.         <div class="form-group">
  24.             <div class="col-sm-offset-2 col-sm-10">
  25.                 <button type="submit" class="btn btn-primary">更新</button>
  26.             </div>
  27.         </div>
  28.     </form>
  29. </div>
  30. @endsection

8.3. 製作 update

路徑：app/Http/Controllers/PostController.php 
  1. public function update(Request $request, Post $post)
  2. {
  3.     $post->title = $request->title;
  4.     $post->content = $request->content;
  5.  
  6.     $post->save();
  7.  
  8.     return redirect()->route('post.index');
  9. }

9. 製作 destroy

路徑：app/Http/Controllers/PostController.php 
  1. public function destroy(Post $post)
  2. {
  3.     $post->delete();
  4.  
  5.     return redirect()->route('post.index');
  6. }
目前為止真的寫到程式的只有 migration、route、controller、view。

延伸閱讀

留言

張貼留言