如何在Laravel中建立部落格

Laravel 是一種 PHP 網路應用程式框架，語法簡潔明瞭。它有一個龐大的軟體包庫，可以處理程式設計中的許多繁瑣工作，讓你專注於發揮創造力。

Laravel 的一個創造性用途就是建立個人部落格。本教程介紹如何使用 Laravel 建立併發布部落格。

如需預覽專案，請檢視完整的專案程式碼。

先決條件

要學習本教程，請確保您具備以下條件：

• 網路伺服器。本教程使用 XAMPP。
• GitHub、GitLab 或 Bitbucket 賬戶，用於釋出應用程式程式碼。
• 已安裝 Laravel。
• 一個活動的 MyKinsta 賬戶，用於託管應用程式。如果還沒有，請註冊免費試用。

確保 Apache 和 MySQL 模組服務正在 XAMPP 控制面板中執行。如果沒有，請單擊 “Actions” 欄中每個服務的 “Start” 按鈕。您的 XAMPP 控制面板應該如下所示：

XAMPP 控制面板

預設情況下，MySQL/MariaDB 在埠 3306 上執行。如果要更改埠，請記錄下來。

如果您使用的是 XAMPP 以外的網路伺服器，請確保您執行的是 Apache 或其他伺服器軟體，並已在本地計算機上安裝了 MariaDB 伺服器。

快速入門 phpMyAdmin

1. 執行 MySQL 和 Apache 後，開啟瀏覽器。
2. 開啟 phpMyAdmin 並貼上到 http://localhost/phpmyadmin/ 。應該會顯示如下內容：

在瀏覽器中開啟 phpMyAdmin。

phpMyAdmin 是用於 MySQL 和 MariaDB 的資料庫管理工具。

Info 你可以使用任何資料庫管理系統，但本教程使用的是 MariaDB，它與 Laravel 的連線與 MySQL 類似。兩個資料庫的 Laravel 配置是一樣的。

建立新的 Laravel 專案

現在可以開始使用 Laravel 建立部落格了。在本教程中，我們使用的是一臺執行在 Windows 系統上的電腦。

1. 開啟電腦終端或命令列介面（CLI）。
2. 使用 laravel new blog 命令建立一個名為 blog 的 Laravel 專案。
3. 使用 cd blog 命令開啟專案的 blog 目錄。
4. 然後，在程式碼編輯器中開啟該目錄。
5. 在終端或 CMD 中執行 php artisan serve 命令，檢查是否成功建立了專案。
6. 點選本地地址輸出，將其傳送到瀏覽器。瀏覽器應該會顯示預設的 Laravel 歡迎頁面，如下圖所示：

Laravel 歡迎頁面

配置資料庫

返回瀏覽器中的 phpMyAdmin，建立一個名為 blog 的資料庫，從而建立並配置資料庫。

1. 要建立資料庫，請在 “Databases” 選項卡的 “Create database“欄位中輸入 “blog”。
2. 然後點選Create。

在 phpMyAdmin 面板中建立資料庫

3. 接下來，更新部落格專案根目錄下 .env 檔案中的資料庫連線。將 DB_DATABASE 和 DB_PASSWORD 值更改為你建立的值。

連線詳情應如下所示：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

其他資料庫連線細節與 .env 檔案中的相同。如果在配置過程中更改了任何連線值，如將 DB_PORT 從 3306 改為 3307，請確保在 .env 檔案中更新。

製作posts表

接下來，建立資料庫模型並遷移更改。

1. 在終端執行 php artisan make:model Post -mc ，建立一個名為 Post 的模型、一個名為 posts 的表、一個遷移檔案和一個控制器。

通過命令列建立模型、遷移檔案和控制器。

2. 檢查database/migrations，開啟剛剛建立的遷移檔案。檔案格式如下 YYYY_MM_DD_ID_create_posts_table.php 。
3. 在遷移檔案的 up() 方法中，建立一個包含 title, description, 和 image 屬性的模式。

public function up() {
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->string('image')->nullable();
$table->timestamps();
});
}

4. 現在，進入終端，使用 php artisan migrate 遷移更改，如下圖所示：

Laravel 資料庫遷移

5. 在瀏覽器中進入 phpMyAdmin，您將看到 posts 表：

在 phpMyAdmin 中顯示已遷移的文章表

如何建立控制器

新增檢視和控制器可以實現資料庫集的業務邏輯。檢視是顯示模型資料物件的使用者介面。控制器管理模型和檢視之間的資料執行流。

1. 建立 Blade 檔案前，請在終端執行 npm install ，然後執行 npm run dev 。第一條命令安裝所需的 npm 軟體包。第二條命令啟動 Vite 開發伺服器。
2. 前往 app/Http/Controllers 目錄，開啟 PostController.php 檔案，建立一個 index 控制器方法。該控制器方法向瀏覽器渲染一個簡單的文字。為此，請在 PostController 類中新增以下程式碼：

public function index() {
$post = "Laravel Tutorial Series One!";
return view('posts.index', ['post'=>$post]);
}

該方法將 $post 作為上下文變數傳遞給索引 Blade 模板的 views 部分。 $post 包含要顯示的文字，這裡顯示 “Laravel Tutorial Series One!”。稍後你將用文章迴圈來替換它。

3. 在 resources/views 目錄中新建兩個目錄：layouts 和 posts。
4. 在 layouts 目錄下建立 app.blade.php 檔案。其他 Blade 檔案將從該檔案繼承。
5. 將此程式碼複製到 app.blade.php 中：

Blog
@yield('content')
Mini-Blog © 2023

通過使用此 HTML 程式碼，您可以匯入 Bootstrap 5.2.3 版本和 Vite，以捆綁 JavaScript 和 CSS 資產。生成的頁面有一個帶導航欄的頁首和一個帶指令碼的頁尾。在正文中，藉助 @yield('content') ，動態內容會從其他 Blade 檔案渲染而來。

posts 目錄中包含用於執行建立和讀取操作的 Blade 檔案。

6. 在 posts 目錄下建立一個名為 index.blade.php 的 Blade 檔案，並新增以下程式碼：

@extends('layouts.app')
@section('content')
Blog list
The Blog 1 - {{ $post }}
@endsection

該程式碼由佈局頁面上的 app.blade.php 檔案擴充套件而來。在瀏覽器中呈現時，它會顯示每篇部落格文章的內容，以及從 layouts 資料夾中的 app.blade.php 檔案繼承的導航欄和頁尾。在 section 標記之間，您可以傳遞控制器中的內容，以便在執行應用程式時在瀏覽器中呈現。

7. 在 routes 目錄中設定路由。設定路由後，App/Providers 目錄中的 RouteServiceProvider 就能自動載入路由。 RouteServiceProvider 是負責載入應用程式路由檔案的類。
8. 在 routes/web.php 檔案中，使用 AppHttpControllersPostController 匯入 PostController。
9. 然後，在 routes/web.php 檔案中新增 Route::resource('posts', PostController::class); 來設定路由。
10. 在 Vite 開發伺服器仍在執行的情況下，使用 php artisan serve 在終端執行應用程式。
11. 使用瀏覽器開啟 http://127.0.0.1:8000/posts ，檢視新的博文列表。

頁面應如下所示：

在瀏覽器中顯示部落格應用程式

在下一節中，我們將定義用於顯示所有文章、建立文章和儲存文章的控制器方法。然後，在相應部分新增路由並建立刀片檔案。

建立部落格文章頁面

通過輸入標題、新增描述和上傳圖片來製作博文。然後，按順序顯示博文。

1. 在 app/Models 目錄中開啟 Post.php 檔案。
2. 在 post 類的 use HasFactory; 程式碼塊下方，新增 protected $fillable = ['title', 'description', 'image']; 。

這段程式碼將保護您的模型屬性不被大量賦值。

3. 在 app/Http/Controllers/PostController.php 檔案中，使用 use AppModelsPost; 匯入 Post 模型。
4. Replace the index and create controller methods created earlier in the PostController class with the code below:用下面的程式碼替換之前在 PostController 類中建立的 index 和 create 控制器方法：

// Show all posts
public function index() {
$posts = Post::orderBy('created_at', 'desc')->get();
return view('posts.index', ['posts' => $posts]);
}
// Create post
public function create() {
return view('posts.create');
}

在您剛剛建立的 index 方法中，PHP 應用程式會獲取所有文章，按時間順序排列，然後將它們儲存到 posts 變數中。在返回檢視中，文章作為上下文變數傳入 views/posts 目錄中的 index.blade.php 檔案。如果使用者嘗試建立新帖， create 方法會返回 create.blade.php 檔案，並將其放置在 views/posts 目錄中。

5. 使用下面的程式碼建立一個 store 控制器方法（在資料庫中儲存部落格文章）。將此程式碼新增到 PostController 類的 index 和 create 控制器方法下面。

// Store post
public function store(Request $request) {
// validations
$request->validate([
'title' => 'required',
'description' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$post = new Post;
$file_name = time() . '.' . request()->image->getClientOriginalExtension();
request()->image->move(public_path('images'), $file_name);
$post->title = $request->title;
$post->description = $request->description;
$post->image = $file_name;
$post->save();
return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

store 方法會處理客戶端關於其主體中資料的請求，因此它需要將 request 作為引數。下一步是驗證建立 post 時使用的欄位，並從 Post 模型中建立一個文章例項。然後將輸入的欄位資料分配給建立的例項並儲存。頁面將重定向到 index 檢視，並顯示 “Post created successfully” 的 Flash 文字。

為文章新增路由

在 web.php 檔案中註冊路由：

1. 在專案根目錄下的 routes 目錄中，開啟 web.php 檔案。
2. 用以下程式碼替換現有程式碼，註冊控制器方法的路由：

names([
'index' => 'posts.index',
'create' => 'posts.create',
'store' => 'posts.store',
'show' => 'posts.show',
]);

該控制器使用這些路由來建立、儲存和顯示資料物件。

製作Blade檔案

要建立檢視，請回到 PostController 類：

1. 在 resources/views/posts 目錄下建立一個名為 create.blade.php 的 Blade 檔案，並新增以下程式碼：

@extends('layouts.app')
@section('content')
Add Post
@csrf
@if ($errors->any())
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
@endif
Title
Description
Add Image
Save
@endsection

在這段程式碼中，create.blade.php 使用 @extends('layouts.app') 繼承了 layouts 目錄中 app.blade.php 的內容。這些內容包括頁首、導航欄和頁尾。在 h1 標籤中新增 Add Post 文字後，使用包含 {{route('posts.store')}} 操作的 post 方法建立了一個表單。

enctype="multipart/form-data" 程式碼允許上傳圖片，而 csrf 可保護表單免受跨站攻擊。然後，錯誤資訊會顯示無效的欄位條目，並使用 field attributes 為表單建立標籤和輸入。

2. 現在，用下面的程式碼替換 index.blade.php 檔案中的程式碼，以顯示所有部落格文章：

@extends('layouts.app')
@section('content')
Add Post
Mini post list
@if ($message = Session::get('success'))
{{ $message }}
@endif
@if (count($posts) > 0)
@foreach ($posts as $post)
{{$post->title}}
{{$post->description}}
@endforeach
@else
No Posts found
@endif
@endsection

這段程式碼新增了一個 Add Post 按鈕。點選後，它將建立一個文章，並將任何資料傳遞到頁面的正文中。 if 條件檢查資料庫中是否有資料。如果有資料，則通過。如果沒有，則顯示 “No Posts found”。

頁面結構

現在，您可以使用 php artisan serve 執行應用程式，建立並顯示部落格文章。開啟 http://127.0.0.1:8000 ，頁面應如下所示：

部落格應用程式出現在瀏覽器中

如果您新增了一個文章，就會顯示如下內容：

部落格應用程式在瀏覽器中顯示文章

將您的Laravel部落格部署到Kinsta

使用 Kinsta 的應用程式託管服務部署和測試您的 Laravel 應用程式：

1. 建立 .htaccess 檔案。
2. 將程式碼推送到版本庫。
3. 建立資料庫。
4. 在 MyKinsta 上建立一個專案。
5. 構建並部署您的部落格。

建立 .htaccess 檔案

在專案根資料夾中建立名為 .htaccess 的檔案，並新增以下程式碼：

RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]

這段程式碼會將應用程式請求重定向到部署中的 public/index.php。

將程式碼推送到程式碼庫

為您的專案建立一個儲存庫併發布程式碼。您可以使用 GitHub、GitLab 或 Bitbucket 來託管您的程式碼並將其部署到 MyKinsta。

在MyKinsta控制面板中設定資料庫

在 MyKinsta 上建立資料庫：

1. 單擊 Add Service 按鈕並選擇 Database。
2. 輸入資料庫的詳細資訊，如下所示。請注意，要使部署成功，必須將 Database username 保留為預設值。

在 MyKinsta 中建立資料庫

詳細資訊包括 Database name, Display name, Database type, Version, Database username, Data center location, 和 Size。本演示使用 MariaDB 作為資料庫，Size 為 Db3（1CPU/4GB 記憶體/10GB 磁碟空間，65 美元/月）。您可以根據具體需要選擇資料庫型別和大小。

3. 單擊 Continue.
4. 確認每月費用和付款方式，然後單擊 Create database。

在 MyKinsta 上設定專案

將應用程式部署到 MyKinsta：

1. 單擊 Dashboard 面板。
2. 單擊 Add Service 並選擇 Application，如下圖所示：

新增應用程式服務時的 MyKinsta 面板

MyKinsta 會將您重定向到 “Add Application” 頁面。

1. 在 “Select branch” 部分，選擇 GitHub 倉庫，然後選擇 “Add deployment on commit” 覈取方塊。
2. 在 “Basic details” 中，輸入應用程式名稱並選擇應用程式的資料中心位置。
3. 由於 Laravel 在部署過程中需要一個應用程式金鑰，因此在 Environment variables 卡中，新增一個 APP_KEY 作為金鑰 1。你可以使用本地 .env 檔案中定義的 APP_KEY 或使用線上 Laravel 金鑰生成器獲取一個。
4. 點選 “Continue“。
5. 選擇應用程式的構建資源（CPU 和 RAM）。本演示使用標準構建機（1CPU / 4 GB RAM）- 0.02USD / 分鐘。
6. 不要選中 “Set up container image automatically” 單選按鈕。
7. 單擊 Continue。
8. 在 “Set up your processes” 頁面，您可以通過選擇這些框來更改應用程式的 pod 大小和例項。本演示使用預設值。
   單擊繼續。
9. 最後，單擊 Confirm payment method 按鈕，開始部署應用程式。單擊此按鈕還可進入 Deployment details 頁面檢視部署進度。

構建和部署應用程式

資料庫和應用程式託管後，將資料庫連線到應用程式，然後構建並部署。

要連線資料庫，請使用託管資料庫的外部連線。在託管資料庫的 “Info” 選項卡上，可以看到 External connections，如下圖所示：

託管資料庫的外部連線

1. 在已部署應用程式的 “Settings” 頁面上，導航至 “Environment variable” 卡。
2. 單擊 Add environment variable，將託管資料庫的外部連線新增到相應的值中。使用與 .env 檔案中相同的變數。

託管資料庫的環境變數

如果你考慮對手動編輯的 env 變數進行標記，以區別於其他變數，那麼這張截圖就很方便了。

APP_URL 是託管應用程式的 URL，DB_CONNECTION 是 mysql 。

1. 前往應用程式的 “Settings” 頁面。
2. 在 Buildpack 卡中，新增 PHP 和 Node.js 作為構建包。由於這是一個 PHP 應用程式，您必須最後新增 PHP 構建包。
3. 單擊 Deploy now ，重建應用程式。

接下來，新增一個遷移資料庫的程序。

1. 前往託管應用程式頁面上的 “Processes” 選項卡。
2. 在 Runtime processes 卡上選擇 Create process 。
3. 輸入 Migration 作為名稱，Background worker 作為型別， php artisan migrate --force 作為啟動命令。pod 大小和例項可以保留預設值。
4. 選擇 “Continue” 建立程序。此操作將觸發新的構建並重新部署應用程式。
5. 在應用程式的 “Domains” 選項卡上，單擊應用程式連結。你可以看到它現在已經啟動並執行。
6. 請注意，部署到 MyKinsta 的部落格應用程式不會顯示任何文章。輸入標題、新增描述並選擇圖片，建立一個新文章。

小結

Laravel 可以輕鬆快速地開發一個簡單的部落格。其快速的頁面載入、強大的控制器架構和出色的安全性，讓提高應用程式的效能變得輕而易舉。同時，MyKinsta 可讓您快速有效地釋出和交付網路應用程式。MyKinsta 的靈活定價模式基於使用量，消除了隱性成本。