اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

لاراول یک framework زبان PHP با syntax بسیار خوب است. این فریم ورک دارای یک کتابخانه بزرگ از پکیج ها بوده و بخش اعظم کارهای سخت و تکراری در برنامه نویسی را انجام می دهد، بنابراین شما می توانید روی خلاقیت خود تمرکز کنید. یکی از کاربردهای خلاقانه Laravel، ساخت وبلاگ شخصی است. در این مقاله نحوه ایجاد وبلاگ در لاراول توضیح داده می شود.

پیش نیازهای ایجاد وبلاگ در لاراول

برای درک بهتر این آموزش، مطمئن شوید که موارد زیر را در اختیار دارید:

• استفاده از XAMPP به عنوان وب سرور برای اجرای پروژه
• یک حساب کاربری در GitHub، GitLab یا Bitbucket برای انتشار کد برنامه.
• نصب لاراول
• یک هاست جهت انتشار بلاگ

اطمینان حاصل کنید که ماژول های Apache و MySQL در کنترل پنل XAMPP فعال شده اند. اگر اینطور نیست، روی دکمه "Start" در مقابل هر سرویس و ستون "Actions" کلیک کنید.

تصویر(1)

به طور پیش‌فرض، MySQL یا MariaDB روی پورت 3306 اجرا می‌شوند. اگر پورت را تغییر داده اید، این مورد را در نظر داشته باشید. اگر وب سروری غیر از XAMPP دارید، مطمئن شوید که Apache یا وب سرور دیگری اجرا شده و MariaDB نیز نصب است.

شروع سریع با phpMyAdmin

1. بعد از فعال کردن MySQL و Apache، وارد مرورگر خود شوید.
2. برای دسترسی به phpMyAdmin، در مرورگر http://localhost/phpmyadmin/ را تایپ کنید. صفحه ای مانند تصویر زیر به شما نمایش داده می شود:

تصویر(2)

phpMyAdmin یک ابزار مدیریت پایگاه داده برای MySQL و MariaDB است.

نکته: می‌توانید از هر سیستم مدیریت پایگاه داده‌ای که می‌خواهید در پروژه لاراول خود استفاده کنید اما در این آموزش از MariaDB استفاده می‌ شود زیرا اتصال آن به Laravel مشابه MySQL است. پیکربندی Laravel در هر دو پایگاه داده یکسان می باشد، بنابراین اگر می‌خواهید از MySQL استفاده کنید، باید تنظیمات پایگاه داده خود را مطابق با تنظیمات MariaDB در این آموزش، تغییر دهید.

یک پروژه جدید لاراول ایجاد کنید

اکنون می توانید شروع به ایجاد وبلاگ در لاراول کنید. برای این آموزش از کامپیوتری تحت ویندوز استفاده شده است.

1. به ترمینال یا رابط خط فرمان (CLI) دستگاه خود مراجعه نمایید.
2. با استفاده از دستور laravel new blog یک پروژه لاراول به نام blog ایجاد کنید.
3. دایرکتوری وبلاگ پروژه خود را با دستور cd blog باز نمایید.
4. سپس دایرکتوری را در ویرایشگر کد باز کنید.
5. برای بررسی اینکه آیا پروژه را با موفقیت ایجاد کرده اید، php artisan serve را در ترمینال یا CMD خود اجرا نمایید.
6. پس از اجرای دستور php artisan serve، آدرس محلی در کنسول نمایش داده می‌شود. برای مشاهده صفحه خوش آمدگویی پیش فرض Laravel، روی این آدرس کلیک کنید. در ادامه مرورگر باید صفحه خوش‌آمدگویی پیش‌فرض لاراول را مانند تصویر زیر نشان دهد:

تصویر(3)

پایگاه داده را پیکربندی کنید

با بازگشت به phpMyAdmin در مرورگر خود و ایجاد پایگاه داده ای به نام blog، آن را پیکربندی نمایید.

برای ایجاد پایگاه داده، در تب "Databases" و بخش "Create database"، عبارت "blog" را تایپ کنید. سپس روی "Create" کلیک نمایید.

تصویر(4)

سپس، اطلاعات اتصال پایگاه داده را در فایل 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. بروز کنید.

جدول پست ها برای ایجاد وبلاگ در لاراول

سپس یک مدل پایگاه داده ایجاد و تغییرات را اعمال کنید.

1. در ترمینال خود، php artisan make:model Post -mc را اجرا کنید تا یک مدل به نام Post، یک جدول به نام posts، یک فایل مهاجرت (migration) و یک کنترلر ایجاد شود.

تصویر(5)

2. در مسیر دایرکتوری database/migrations فایل مهاجرت با فرمت زیر را باز کنید.

YYYY_MM_DD_ID_create_posts_table.php

3. برای ایجاد یک جدول جدید برای مدل Post، در متد ()up فایل مهاجرتی، یک طرح با ویژگی‌های عنوان، توضیحات و تصویر ایجاد کنید.

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();
  });
}

برای اعمال تغییرات در پایگاه داده، دستور php artisan migrate را در ترمینال خود اجرا کنید. همانطور که در تصویر زیر نشان داده شده است:

تصویر(6)

برای مشاهده جدول posts، به phpMyAdmin در مرورگر خود مراجعه نمایید.

تصویر(7)

نحوه ساخت کنترلر جهت ایجاد وبلاگ در لاراول

controller ها و view ها منطق تجاری شما را برای پایگاه داده پیاده‌سازی می‌کنند. view ها رابط‌های کاربری هستند که داده‌های model را نمایش می‌دهند. کنترلرها تبادل داده بین model و view ها را مدیریت می‌کنند.

1. برای ایجاد وبلاگ در لاراول و ساخت فایل‌های Blade، ابتدا باید پکیج های npm مورد نیاز را نصب کنید. سپس می‌توانید با اجرای دستور npm run dev در ترمینال خود، یک سرور توسعه Vite را راه اندازی نمایید. سرور توسعه Vite به شما امکان می‌دهد تا تغییرات خود را در فایل‌های Blade بدون نیاز به لود مجدد صفحه وب مشاهده کنید.

2. به دایرکتوری app/Http/Controllers مراجعه نمایید. فایل PostController.php را باز کرده و یک متد کنترلر index ایجاد کنید. متد کنترلر یک متن ساده را در مرورگر رندر می‌کند. برای انجام این کار، کد زیر را به کلاس PostController اضافه نمایید:

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

این متد، $post را به عنوان یک متغیر context به بخش view از قالب Blade index ارسال می‌کند. post$ حاوی متنی است که باید در مرورگر نمایش داده شود. در این مثال، متن “!Laravel Tutorial Series One” می باشد. بعداً این متن را با یک حلقه از پست‌ها جایگزین خواهید کرد.

3. دو دایرکتوری جدید با نام های layouts و posts در مسیر resources/views ایجاد کنید.

4. درون دایرکتوری layouts، یک فایل با نام app.blade.php ایجاد نمایید. سایر فایل های Blade زیر مجموعه این فایل خواهند بود.

5. این کد را در app.blade.php کپی کنید:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
  <!-- Styles →
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<!-- Navbar →
<header>
  <nav class="navbar bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('posts.index') }}">Mini-Blog</a>
    </div>
  </nav>
</header>
<!-- Body -->
<body>
  @yield('content')
</body>
<!-- Footer -->
<footer class="footer mt-auto py-3 bg-dark">
  <div class="container d-lg-flex justify-content-between">
    <span class="text-light">Mini-Blog © 2023</span>
  </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>

کد HTML بالا، Bootstrap نسخه 5.2.3 و Vite را برای ایجاد پکیج های JavaScript و CSS فراخوانی می‌کند. صفحه‌ای که تولید می‌شود، شامل Header به همراه navbar و footer با اسکریپت‌هایی که در زیر آن فراخوانی شده، خواهد بود. محتوای پویا  به کمک yield('content')@، از سایر فایل‌های Blade لود می گردد.

دایرکتوری posts، فایل‌های Blade را برای پیاده‌سازی عملیات ایجاد و خواندن نگه می‌دارد.

6. در دایرکتوری posts، یک فایل Blade به نام index.blade.php ایجاد نموده و کد زیر را اضافه کنید:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <h1>Blog list</h1>
  </div>
  <hr>
  <p>The Blog 1 - {{ $post }}</p>
</div>
@endsection

این کد از فایل app.blade.php در صفحه layouts ارث می‌برد. وقتی در مرورگر رندر می‌شود، محتوای پست وبلاگ لاراول، نوار پیمایش و فوتر را که از فایل app.blade.php در پوشه layouts فراخوانی کرده و نشان می‌دهد. بین تگ‌های section، محتوا از کنترلر منتقل می‌شود تا هنگام اجرای برنامه در مرورگر، رندر گردد.

7. مسیر اصلی را روی دایرکتوری routes تنظیم کنید. تنظیم route امکان لود خودکار توسط RouteServiceProvider در دایرکتوری App/Providers را فراهم می‌کند. RouteServiceProvider کلاسی است که مسئول لود فایل‌های route اپلیکیشن می باشد.

8. در فایل routes/web.php، کنترلر PostController را با استفاده از کد زیر اضافه کنید.

 use AppHttpControllersPostController

9. سپس، با افزودن قطعه کد زیر به فایل routes/web.php، می توانید route را تنظیم کنید:

Route::resource('posts', PostController::class);

10. در حالی که سرور توسعه Vite هنوز در حال اجرا است، از php artisan serve برای اجرای اپلیکیشن در ترمینال خود استفاده کنید.

11. در مرورگر خود، http://127.0.0.1:8000/posts را باز نمایید تا لیست پست های وبلاگ جدید خود را مشاهده کنید.

صفحه شما باید به شکل زیر باشد:

تصویر(8)

در بخش بعدی، روش‌های کنترلر برای نمایش همه پست‌ها، ایجاد یک پست و ذخیره یک پست تعریف می‌ شود. سپس مسیرهای آنها اضافه و فایل‌های Blade در بخش‌های مربوطه ایجاد خواهند شد.

ساخت صفحه پست جهت ایجاد وبلاگ در لاراول

برای ایجاد پست‌های وبلاگ، عنوان، توضیح و تصویر را اضافه کنید. سپس پست‌های خود را به ترتیب زمانی نمایش دهید.

1. در پوشه app/Models، فایل Post.php را باز کنید.

2. در کلاس Post، زیر کدهای ;use HasFactory، مقدار زیرا را اضافه نمایید.

protected $fillable = ['title', 'description', 'image'];

این کد از ورود داده‌های غیرمجاز به model شما جلوگیری می‌کند.

3. در فایل app/Http/Controllers/PostController.php خود، مدل Post را با استفاده از ;use AppModelsPost اضافه کنید.

4. متدهای index و create کنترلر را که قبلاً در کلاس PostController ایجاد شده‌اند، با کد زیر جایگزین کنید.

// 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 تمام پست‌ها را از پایگاه داده بازیابی و آنها را به ترتیب زمانی مرتب می‌کند. سپس، این پست‌ها را در یک متغیر posts ذخیره می‌نماید. این متغیر posts، سپس به فایل index.blade.php منتقل می‌شود. فایل ذکر شده، Blade HTML را برای نمایش فهرستی از همه پست‌ها ایجاد می‌کند. متد create یک فایل جدید create.blade.php را ایجاد می‌ نماید. این فایل Blade HTML را برای نمایش فرم ایجاد پست، می سازد.

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، درخواست‌های مشتری در مورد داده‌های موجود در بدنه (body) آن را مدیریت می‌کند، بنابراین request را به عنوان یک آرگومان می‌گیرد. سپس فیلدهای استفاده شده هنگام ایجاد یک پست اعتبارسنجی شده و یک نمونه پست از مدل Post ایجاد می‌ شود. سپس داده‌های وارد شده، به آن اختصاص یافته و ذخیره می‌گردند. سپس به صفحه ای با متن "Post created successfully" هدایت می‌شوید.

Routes را جهت ایجاد وبلاگ در لاراول به پست های خود اضافه کنید

برای ثبت routes در فایل web.php خود به صورت زیر اقدام نمایید:

1. در دایرکتوری routes در ریشه پروژه خود، فایل web.php را باز کنید.

2. مسیر متدهای کنترلر را با جایگزین کردن کد موجود با کدهای زیر، ثبت نمایید:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::resource('/', PostController::class)->names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

کنترلر از این routes برای ایجاد، ذخیره و نمایش اشیاء داده شما استفاده می کند.

فایل های Blade را بسازید

برای ایجاد view ها، به کلاس PostController برگردید:

1. در دایرکتوری resources/views/posts، یک فایل Blade به نام create.blade.php ایجاد و کد زیر را به آن اضافه کنید:

@extends('layouts.app')
@section('content')
<div class="container">
  <h1>Add Post</h1>
  <section class="mt-3">
    <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
      @csrf
      <!-- Error message when data is not inputted -->
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <div class="card p-3">
        <label for="floatingInput">Title</label>
        <input class="form-control" type="text" name="title">
        <label for="floatingTextArea">Description</label>
        <textarea class="form-control" name="description" id="floatingTextarea" cols="30" rows="10"></textarea>
        <label for="formFile" class="form-label">Add Image</label>
        <img src="" alt="" class="img-blog">
        <input class="form-control" type="file" name="image">
      </div>
      <button class="btn btn-secondary m-3">Save</button>
    </form>
  </section>    
</div>
@endsection

در این کد، create.blade.php از محتویات app.blade.php در دایرکتوری layouts توسط extends('layouts.app')@ استفاده می کند. این محتویات شامل یک Header، نوار ناوبری و Footer است. پس از افزودن متن "Add Post" در تگ h1، یک فرم با متد post ایجاد می گردد که حاوی دستور زیر می باشد.

{{route('posts.store')}} action

کد "enctype="multipart/form-data امکان آپلود تصویر را فراهم می‌کند و csrf از فرم شما در برابر حملات جاوا اسکریپت cross-site محافظت می‌ نماید. سپس، پیام‌های خطا ورودی‌های فیلد نامعتبر را نمایش می‌دهند و از ویژگی‌های فیلد برای ایجاد برچسب‌ها و ورودی‌ها برای فرم، استفاده می‌کنند.

2. اکنون، برای نمایش همه پست‌های وبلاگ، کد موجود در فایل index.blade.php را با کد زیر جایگزین کنید:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <a class="btn btn-secondary float-end mt-3" href="{{ route('posts.create') }}" role="button">Add Post</a>
    <h1>Mini post list</h1>
  </div> 
  <hr>
  <!-- Message if a post is posted successfully -->
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-2">
              <img class="img-fluid" style="max-width:50%;" src="{{ asset('images/'.$post->image)}}" alt="">
            </div>
            <div class="col-10">
              <h4>{{$post->title}}</h4>
            </div>
          </div>
          <p>{{$post->description}}</p>
          <hr>
        </div>
      </div>
    @endforeach
  @else
    <p>No Posts found</p>
  @endif
</div>
@endsection

 

این کد یک دکمه "Add Post" اضافه می نماید که هنگام کلیک روی آن، یک پست ایجاد و داده‌ ها را به body صفحه منتقل می‌کند. شرط if بررسی خواهد کرد که آیا داده‌ای در پایگاه داده وجود دارد. اگر داده‌ای وجود داشته باشد، آن را نمایش می دهد. در غیر این صورت، "No Posts found" نشان داده می شود.

ساختار صفحات

اکنون می توانید اپلیکیشن خود را با استفاده از php artisan serve برای ایجاد و نمایش پست های وبلاگ اجرا کنید. <a http://127.0.0.1:8000 را باز نمایید، صفحه بلاگ باید به این شکل باشد:

تصویر(9)

اگر پستی را اضافه کنید، به صورت زیر ظاهر می شود:

تصویر(10)

هم اکنون می توانید از بلاگ خود خروجی تهیه کرده و به هاستی که در میهن وب هاست خریداری نموده اید منتقل نمایید تا در دسترس همه کاربران سراسر جهان، قرار گیرد.

سخن پایانی

Laravel را می‌توان برای ایجاد وبلاگ در لاراول استفاده کرد. بارگذاری سریع صفحه، معماری کنترل‌کننده قدرتمند و امنیت مناسب آن، بهبود عملکرد یک اپلیکیشن را آسان می‌کند. با استفاده از راهنمای قدم به قدم این مقاله، به راحتی می توانید صفحه بلاگ اختصاصی خود را طراحی نمایید.