Laravel 入門範例

Laravel Coding

完整示範 Laravel 5.1 快速建置網站的威力,運用包含 Node.js 等各種套件花一點時間就把簡單的部落格做完上線。

步驟簡述:

  1. 裝好 Linux、PHP、Web Server (Laravel 5.1 要求 PHP 版本要在 5.5.9 以上[含])。
  2. 安裝 Node.js 以便後面使用 gulp (前端工具,參考 這裡這裡)。
  3. 安裝 gulpbowercomposer。當然,上述工具如果都不會使用到也可以不裝。
  4. 安裝 Laravel 安裝工具 (繞口…)。
    composer global require "laravel/installer=~1.2"
  5. 建立網站的骨架:
    • 切換到 Web docs root 後,用 Laravel 建立
      /html/laravel new topias.im

      Laravel 會自動幫你建立好網站骨架在剛剛輸入的 /html/topias.im/ 這個目錄名稱中。

    • 設定 Web Server,指定網站 root 為剛剛 Laravel 建立好的 /html/topias.im/public 目錄。
    • 建立資料庫。
    • 將剛剛建立好的資料庫資訊,更新到 /html/topias.im/public/.env 這個檔案中。
    • 開啟瀏覽器,輸入網址檢測剛剛的架構是否已經建立好。
      l5-welcome-page (示意圖)
  6. 開始在 Laravel 建立好的骨架底下建置網站:
    • 因為沒打算開放使用者申請、管理,所以刪除預設的 DB Migrate 檔案。
      /html/topias.im/rm database/migrations/2014_10_12_100000_create_password_resets_table.php
    • 建立文章的資料表。
      /html/topias.im/php artisan make:model --migration Post

      這行指令,會新增兩個檔案,一個是在 app 這個目錄底下的 Post.php 這個 Model,另一個是在 database/migrations/ 這個目錄底下產生 年_月_日_時分秒_create_posts_table.php 這個建立資料表的檔案。
      Post.php

      <?php
      namespace App;
      
      use Illuminate\Database\Eloquent\Model;
      class Post extends Model {
        protected $dates = ['published_at'];
      
        public function setTitleAttribute($value) {
          $this->attributes['title'] = $value;
      
          if (! $this->exists) {
            $this->attributes['slug'] = str_slug($value);
          }
        }
      }
    • 利用 Seeder 機制,讓 Laravel 自動幫你建立多筆的亂數資料。
      修改 database/factories/ModelFactory.php 檔案

      $factory->define(App\Post::class, function ($faker) {
        return [
          'title' => $faker->sentence(mt_rand(3, 10)),
          'content' => join("\n\n", $faker->paragraphs(mt_rand(3, 6))),
          'published_at' => $faker->dateTimeBetween('-1 month', '+3 days'),
        ];
      });

      修改 database/seeds/DatabaseSeeder.php 這個檔案

      <?php
      use Illuminate\Database\Seeder;
      use Illuminate\Database\Eloquent\Model;
      
      class DatabaseSeeder extends Seeder {
        /**
         * Run the database seeds.
         */
        public function run() {
          Model::unguard();
          $this->call('PostTableSeeder');
        }
      }
      
      class PostTableSeeder extends Seeder {
        public function run() {
          App\Post::truncate();
          factory(App\Post::class, 20)->create();
        }
      }

      最後在 console 中執行以下命令即可自動產出 20 筆亂數資料

      /html/topias.im/php artisan db:seed
    • 在 config 這個目錄底下建立 site.php 這個檔案。內容:
      <?php
      return [
          'title' => 'My Blog',
          'posts_per_page' => 5
      ];
      

      config 可存放各種設定,取用方式為

      config('site.title');

      config/app.php 這個檔案則是存放網站的預設值,譬如說 timezone。

    • 修改 app/Http/routes.php
      <?php
      get('/', function () {
          return redirect('/blog');
      });
      
      get('blog', 'BlogController@index');
      get('blog/{slug}', 'BlogController@showPost');
    • 建立 Controller
      php artisan make:controller BlogController --plain

      加上 – -plain 參數是指定生成一個空的 Controller,沒有預設的函數。

    • 根據剛剛的 routes.php 設定,修改 app/Http/Controller/BlogController.php 加上 index()、showPost() 這兩個函數。
      <?php
      namespace App\Http\Controllers;
      
      use App\Post;
      use Carbon\Carbon;
      
      class BlogController extends Controller {
          public function index() {
              $posts = Post::where('published_at', '<=', Carbon::now())
                  ->orderBy('published_at', 'desc')
                  ->paginate(config('blog.posts_per_page'));
              return view('blog.index', compact('posts'));
          }
      
          public function showPost($slug) {
              $post = Post::whereSlug($slug)->firstOrFail();
              return view('blog.post')->withPost($post);
          }
      }
    • 在 resources/views 這個目錄底下,建立 blog/index.blade.php、blog/post.blade.php 這兩個檔案。
      index.blade.php

      <html>
      <head>
        <title>{{ config('blog.title') }}</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
              rel="stylesheet">
      </head>
      <body>
        <div class="container">
          <h1>{{ config('blog.title') }}</h1>
          <h5>Page {{ $posts->currentPage() }} of {{ $posts->lastPage() }}</h5>
          <hr>
          <ul>
            @foreach ($posts as $post)
              <li>
                <a href="/blog/{{ $post->slug }}">{{ $post->title }}</a>
                <em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
                <p>
                  {{ str_limit($post->content) }}
                </p>
              </li>
            @endforeach
          </ul>
          <hr>
          {!! $posts->render() !!}
        </div>
      </body>
      </html>

      post.blade.php

      <html>
      <head>
        <title>{{ $post->title }}</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
              rel="stylesheet">
      </head>
      <body>
        <div class="container">
          <h1>{{ $post->title }}</h1>
          <h5>{{ $post->published_at->format('M jS Y g:ia') }}</h5>
          <hr>
          {!! nl2br(e($post->content)) !!}
          <hr>
          <button class="btn btn-primary" onclick="history.go(-1)">
            « Back
          </button>
        </div>
      </body>
      </html>
    • 完成,透過瀏覽器可檢視剛剛建立的成果。