آموزش مقدماتی و مفاهیم اولیه فریم ورک لاراول (Laravel Basic)

ما در این آموزش مقدماتی شروع سریع یک مقدمه اولیه برای فریم ورک Laravel را ارائه می دهیم و مفاهیمی مانند مهاجرت پایگاه داده، ORM Eloquent، مسیریابی، اعتبارسنجی، نماها و قالب های Blade است. اگر با فریم ورک لاراول یا به طور کلی فریم ورک های PHP کاملاً تازه کار هستید، این یک نقطه شروع عالی است.

البته، ابتدا به آموزش نصب جدید فریم ورک Laravel نیاز دارید. می توانید از ماشین مجازی Homestead یا محیط محلی PHP مورد نظر خود برای اجرای فریم ورک استفاده کنید. هنگامی که محیط محلی شما آماده شد، می توانید چارچوب لاراول را با استفاده از Composer نصب کنید:

composer create-project laravel/laravel quickstart --prefer-dist

آماده سازی پایگاه داده

برای کار با فریم ورک لاراول ابتدا باید دیتابیس خود را آماده کنید.

مهاجرت دیتابیس

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

بنابراین، در این قسمت آموزش Laravel بیایید یک جدول پایگاه داده بسازیم که تمام تسک های ما را در خود جای دهد. Artisan CLI را می توان برای تولید انواع کلاس ها استفاده کرد و در هنگام ساخت پروژه های لاراول، به مقدار تایپ زیادی نیاز ندارد و زمان را برای شما صرفه جویی می کند. در این مورد، اجازه دهید از دستور make:migration برای ایجاد یک انتقال پایگاه داده جدید برای جدول وظایف خود استفاده کنیم:

php artisan make:migration create_tasks_table --create=tasks

مهاجرت در پوشه database/migrations پروژه شما قرار می گیرد. همانطور که ممکن است متوجه شده باشید، دستور make:migration قبلاً یک شناسه افزایش خودکار و مُهر های زمانی را به فایل مهاجرت اضافه کرده است. بیایید این فایل را ویرایش کنیم و یک ستون String اضافی برای نام وظایف خود به آن اضافه کنیم:

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tasks');
    }
}

برای اجرای مهاجرت دیتابیس خود، از دستور migrate Artisan استفاده می کنیم. اگر از Homestead استفاده می کنید، باید این دستور را از داخل ماشین مجازی خود اجرا کنید، زیرا دستگاه میزبان شما دسترسی مستقیم به پایگاه داده نخواهد داشت:

php artisan migrate

این دستور تمام جداول پایگاه داده ما را ایجاد می کند. اگر جداول پایگاه داده را با استفاده از سرویس گیرنده پایگاه داده انتخابی خود بررسی کنید، باید یک جدول وظایف جدید را مشاهده کنید که حاوی ستون های تعریف شده در مهاجرت داده های ما است. در مرحله بعد، ما آماده هستیم تا یک مدل ORM Eloquent برای وظایف خود تعریف کنیم!

مدل های Eloquent

Eloquent ORM پیش‌فرض لاراول (نقشه‌نگار شی رابطه‌ای) است. Eloquent بازیابی و ذخیره داده ها در پایگاه داده خود را با استفاده از “مدل های” واضح، بدون دردسر می کند. معمولاً هر مدل Eloquent مستقیماً با یک جدول پایگاه داده مطابقت دارد.

بنابراین، بیایید یک مدل Task تعریف کنیم که مطابق با جدول پایگاه داده وظایفی است که ما ایجاد کردیم. باز هم می توانیم از دستور Artisan برای تولید این مدل استفاده کنیم. در این مورد، از دستور make:model استفاده می کنیم:

php artisan make:model Task

این مدل در فهرست برنامه های کاربردی شما قرار می گیرد. به طور پیش فرض، کلاس مدل خالی است. ما مجبور نیستیم به طور صریح به مدل Eloquent بگوییم که با کدام جدول مطابقت دارد زیرا فرض می کند جدول پایگاه داده شکل جمع نام مدل است. بنابراین، در این مورد، مدل Task با جدول پایگاه داده وظایف مطابقت دارد. در اینجا مدل خالی ما باید چیزی شبیه این باشد:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

وقتی مسیرها را به برنامه خود اضافه می کنیم، در مورد نحوه استفاده از مدل های Eloquent بیشتر یاد خواهیم گرفت.

مسیریابی

مرحله بعدی که نیاز به یادگیری در این /اموزش مقدماتی Laravel دارید، مبحث مسیریابی می باشد.

تحلیل مسیرها

در مرحله بعد، ما آماده هستیم تا چند مسیر را به برنامه خود اضافه کنیم. از مسیرها برای نشان دادن URL ها به کنترلر ها یا توابع ناشناس استفاده می شود که باید در هنگام دسترسی کاربر به صفحه مشخصی اجرا شوند. به طور پیش فرض، تمام مسیرهای لاراول در فایل app/Http/routes.php که در هر پروژه جدید گنجانده شده است، تعریف می شوند.

برای این برنامه، ما می دانیم که حداقل به سه مسیر نیاز داریم: یک مسیر برای نمایش لیستی از تمام وظایف ما، یک مسیر برای افزودن کارهای جدید، و یک مسیر برای حذف وظایف موجود. بنابراین، بیایید همه این مسیرها را در فایل app/Http/routes.php قرار دهیم:

<?php

use App\Task;
use Illuminate\Http\Request;

/**
 * Display All Tasks
 */
Route::get('/', function () {
    //
});

/**
 * Add A New Task
 */
Route::post('/task', function (Request $request) {
    //
});

/**
 * Delete An Existing Task
 */
Route::delete('/task/{id}', function ($id) {
    //
});

نمایش یک View

بعد، بیایید مسیر / یا root خود را پر کنیم. از این مسیر، می‌خواهیم یک الگوی HTML را ارائه کنیم که حاوی فرمی برای افزودن وظایف جدید و همچنین فهرستی از تمام وظایف فعلی است.

در لاراول، تمام قالب‌های HTML در فهرست منابع/نمایش‌ها ذخیره می‌شوند و ما می‌توانیم از view helper برای برگرداندن یکی از این قالب‌ها از مسیر خود استفاده کنیم:

Route::get('/', function () {
    return view('tasks');
});

البته، ما باید این دیدگاه را در واقع تعریف کنیم، پس بیایید این کار را در بخش بعدی آموزش Laravel انجام دهیم!

ایجاد طرح‌ بندی و View ها

این برنامه فقط دارای یک نمایش واحد است که حاوی فرمی برای افزودن کارهای جدید و همچنین فهرستی از تمام وظایف فعلی است. برای کمک به تجسم View، در اینجا یک اسکرین شات از برنامه تمام شده با استایل اولیه Bootstrap CSS اعمال شده است:

تعریف طرح بندی

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

همانطور که قبلاً گفتیم، تمام view های لاراول در مسیر resources/views ذخیره می شوند. بنابراین، اجازه دهید یک نمای طرح بندی جدید در resources/views/layouts/app.blade.php تعریف کنیم. پسوند .blade.php به فریم ورک دستور می دهد تا از موتور قالب بندی Blade برای ارائه نما استفاده کند. البته می توانید از قالب های ساده PHP با لاراول استفاده کنید. با این حال، Blade میانبر های مناسبی برای نوشتن الگو های تمیزتر و مختصر فراهم می کند.

نمای app.blade.php ما باید به شکل زیر باشد:

// resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSS And JavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>

به بخش @yield(‘content’) طرح بندی توجه کنید. این یک دستورالعمل ویژه Blade است که مشخص می کند همه صفحات فرزندی که طرح بندی را گسترش می دهند می توانند محتوای خود را در کجا تزریق کنند. در مرحله بعد، بیایید view فرزندی را تعریف کنیم که از این طرح بندی استفاده می کند و محتوای اصلی آن را ارائه می دهد.

تعریف کردن view فرزند

تا این مرحله از آموزش Laravel عالی پیش رفتیم، طرح بندی برنامه ما به پایان رسیده است. در مرحله بعد، باید یک View تعریف کنیم که حاوی فرمی برای ایجاد یک کار جدید و همچنین جدولی است که تمام وظایف موجود را فهرست می کند. بیایید این view را در source/views/tasks.blade.php تعریف کنیم.

ما از برخی از نکته های Bootstrap CSS صرف نظر می کنیم و فقط روی موارد مهم تمرکز می کنیم. به یاد داشته باشید، می توانید منبع کامل این برنامه را در GitHub دانلود کنید:

// resources/views/tasks.blade.php

@extends('layouts.app')

@section('content')

    <!-- Bootstrap Boilerplate... -->

    <div class="panel-body">
        <!-- Display Validation Errors -->
        @include('common.errors')

        <!-- New Task Form -->
        <form action="/task" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- Task Name -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">Task</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- Add Task Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Add Task
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TODO: Current Tasks -->
@endsection

چند نکته:

قبل از ادامه، اجازه دهید کمی در مورد این قالب صحبت کنیم. ابتدا، دستورالعمل @extends به Blade اطلاع می دهد که ما از طرحی که در resources/views/layouts/app.blade.php تعریف کرده ایم استفاده می کنیم. تمام محتوای بین @section(‘content’) و @endsection به محل دستورالعمل @yield(‘content’) در طرح app.blade.php تزریق می شود.

اکنون یک طرح و نمای اولیه برای اپلیکیشن خود تعریف کرده ایم. به یاد داشته باشید، ما این view را از مسیر / یا همان root خود به این صورت برمی گردانیم:

Route::get('/', function () {
    return view('tasks');
});

در مرحله بعد، ما آماده هستیم تا کدی را به مسیر POST/task خود اضافه کنیم تا ورودی فرم را مدیریت کنیم و یک تسک جدید به پایگاه داده اضافه کنیم. دستورالعمل @include(‘common.errors’) الگوی واقع در source/views/common/errors.blade.php را بارگذاری می کند. ما این قالب را تعریف نکرده ایم، اما به زودی تعریف خواهیم کرد!

اضافه کردن وظایف

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

اعتبار سنجی

اکنون که یک فرم در view خود داریم، باید کدی را به مسیر POST/task خود اضافه کنیم تا ورودی فرم ورودی را تأیید کرده و یک کار جدید ایجاد کنیم. ابتدا اجازه دهید ورودی را تأیید کنیم.

برای این فرم، فیلد نام را الزامی می کنیم و می گوییم که باید کمتر از 255 کاراکتر داشته باشد. اگر اعتبارسنجی ناموفق باشد، کاربر را به آدرس / هدایت می کنیم و همچنین ورودی و خطاهای قدیمی را در جلسه فلش می کنیم:

Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    // Create The Task...
});

متغیر $errors

بیایید کمی در مورد بخش ->withErrors($validator) از این مثال صحبت کنیم. فراخوانی ->withErrors($validator) خطاها را از نمونه validator داده شده در جلسه فلش می کند تا از نظر ما از طریق متغیر $errors قابل دسترسی باشد.

به یاد داشته باشید که ما از دستورالعمل @include(‘common.errors’) در نمای خود برای ارائه خطاهای اعتبار سنجی فرم استفاده کردیم. Common.errors به ما این امکان را می دهد که به راحتی خطاهای اعتبارسنجی را در قالب یکسان در تمام صفحات خود نشان دهیم. حال بیایید محتوای این view را تعریف کنیم:

// resources/views/common/errors.blade.php

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Whoops! Something went wrong!</strong>

        <br><br>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

توجه: متغیر $errors در هر view لاراول موجود است. اگر خطای اعتبارسنجی وجود نداشته باشد، به سادگی یک نمونه خالی از ViewErrorBag خواهد بود.

ایجاد تسک

اکنون که اعتبار سنجی ورودی ها انجام می شود، بیایید در واقع یک کار جدید انجام دهیم. هنگامی که تسک جدید ایجاد شد، کاربر را به آدرس / هدایت می کنیم. برای ایجاد کار، ممکن است پس از ایجاد و تنظیم خصوصیات در یک مدل جدید Eloquent از روش ذخیره استفاده کنیم:

Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    $task = new Task;
    $task->name = $request->name;
    $task->save();

    return redirect('/');
});

اکنون می توانیم با موفقیت تسک های خود را ایجاد کنیم. در مرحله بعد، بیایید با ایجاد لیستی از تمام وظایف موجود، به view خود اضافه کنیم.

نمایش تسک های موجود

ابتدا باید مسیر / یا root خود را ویرایش کنیم تا تمام وظایف موجود به view منتقل شود. تابع view آرگومان دوم را می پذیرد که آرایه ای از داده است که در دسترس view قرار می گیرد، جایی که هر کلید در آرایه تبدیل به متغیری در view می شود:

Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('tasks', [
        'tasks' => $tasks
    ]);
});

پس از ارسال داده ها، می توانیم وظایف را در نمای tasks.blade.php خود بچرخانیم و آن ها را در یک جدول نمایش دهیم. ساختار @foreach Blade به ما اجازه می‌دهد تا حلقه‌های مختصری بنویسیم که در کدهای PHP ساده و سریع کامپایل می‌شوند:

@extends('layouts.app')

@section('content')
    <!-- Create Task Form... -->

    <!-- Current Tasks -->
    @if (count($tasks) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
                Current Tasks
            </div>

            <div class="panel-body">
                <table class="table table-striped task-table">

                    <!-- Table Headings -->
                    <thead>
                        <th>Task</th>
                        <th>&nbsp;</th>
                    </thead>

                    <!-- Table Body -->
                    <tbody>
                        @foreach ($tasks as $task)
                            <tr>
                                <!-- Task Name -->
                                <td class="table-text">
                                    <div>{{ $task->name }}</div>
                                </td>

                                <td>
                                    <!-- TODO: Delete Button -->
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection

اپلیکیشن Todo List ما تقریباً کامل شده است. امید.اریم این آموزش Laravel برای شما مفید بوده باشد.

منبع: laravel.com