طراحی صفحه‌ درباره من و تماس با من - آموزش طراحی سایت شخصی با لاراول قسمت آخر

در قسمت چهارم آموزش طراحی سایت شخصی با لاراول، به طراحی سایت اصلی و همچنین صفحه‌ی نمونه کار پرداختیم و حالا ما یک صفحه برای سایت اصلی خودمان داریم. از قالب Steve برای ظاهر سایت خود استفاده کردیم و فایل‌های HTML آن را وارد پروژه‌ی لاراول خود کردیم. در این قسمت که قسمت آخر آموزش طراحی سایت شخصی با لاراول است، می‌خواهیم طراحی صفحه‌ درباره من و تماس با من را انجام دهیم، در ادامه ابتدا صفحه درباره من را توضیح خواهیم داد و بعد بخش تماس با من را می‌نویسیم.

بخش درباره من

در این بخش مقاله‌ی طراحی صفحه‌ درباره من و تماس با من، به طراحی صفحه‌ درباره من می‌پردازیم.

برای ذخیره‌ی اطلاعات درباره من که شامل یک عنوان، متن و تصویر است، به روش‌های مختلفی می‌توانیم این‌کار را انجام دهیم. روشی که ما برای این‌کار پیشنهاد می‌کنیم ذخیره‌ی اطلاعات در یک فایل است چرا که ما برای گرفتن و نشان دادن اطلاعات نیازی به کوئری (Query) زدن به دیتابیس نداریم و یک مقدار بیشتر نمی‌تواند داشته باشد.

پکیج Valuestore

برای ذخیره‌ی این نوع اطلاعات و بیشتر مواردی که مربوط به تنظیمات کلی سایت می‌باشند، همان‌طور که بالاتر توضیح دادیم از ذخیره در فایل استفاده می‌کنیم. پکیج spatie/valuestore برای ما این‌کار را انجام می‌دهد و ما فقط از توابع آن استفاده می‌کنیم. این پکیج اطلاعات را در فایل جیسون (Json) ذخیره می‌کند.

برای نصب این پکیج دستور زیر را وارد کنید.

composer require spatie/valuestore

بعد از نصب پکیج نیاز داریم برای آن یک تابع کمک کننده (Helper Function) بنویسیم. این تابع برای خواندن و نوشتن بر روی فایل به ما کمک می‌کند.

ایجاد تابع کمک کننده (‌Helper Function)

توابع کمک کننده به ما این امکان را می‌دهد تا با تعریف یک تابع بتوانیم به آن در تمام فایل‌های پروژه دسترسی داشته باشیم. برای این‌کار یک فایل در مسیر app/Http/Helpers با نام main.php بسازید.

یک فایل به اسم composer.json در مسیر اصلی پروژه وجود دارد. آن را باز کنید و قسمت autoload را به صورت زیر تغییر دهید.

"autoload": {
        "files": [
            "app/Http/Helpers/main.php"
        ],
        "psr-4": {
            "App\\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },

دقت کنید در قسمت autoload فقط بخش file اضافه شده است و به بقیه بخش‌ها کاری نداشته باشید.

حال ما فایل main.php را به پروژه معرفی کرده‌ایم و از حالا هر تابعی در این فایل به صورت سراسری قابل استفاده است.

تابع زیر را در فایل main.php بنویسید.

<?php

use Spatie\Valuestore\Valuestore;

function settings($key)
{
    $settings = Valuestore::make(storage_path('settings.json'));

    return $settings->get($key);
}

حالا در هر قسمت از پروژه می‌توانید از تابع settings استفاده کنید و با یک key به عنوان ورودی تنظیمات ذخیره شده را بگیرید یا حتی اطلاعات را ذخیره کنید.

فرم ذخیره اطلاعات

برای ذخیره‌ اطلاعات درباره من نیاز به یک فرم در پنل مدیریت داریم. در مرحله‌ی اول به سایدبار پنل مدیریت یک لینک اضافه می‌کنیم که به بخش درباره من لینک شده باشد و فرم اطلاعات را نمایش دهد. در فایل resources/views/admin/layouts/sidebar.blade.php قسمت کدهای لیست را به صورت زیر تغییر دهید.

<ul>
            <li><a href="{{ route('admin') }}">Dashboard</a></li>
            <li><a href="{{ route('viewListPortfolios') }}">Portfolios</a></li>
            <li><a href="{{ route('viewAboutMe') }}">About Me</a></li>
</ul>

در مرحله‌ی بعد باید یک فایل View برای فرم بسازیم. در مسیر resources/views/admin فایلی با نام about_me.blade.php بسازید و کدهای زیر را درون آن قرار دهید.

@extends('admin.layouts.panel')

@section('content')
    <div class="card">
        <div class="card-header">Add Portfolio</div>

        <div class="card-body">
            @if (count($errors))
                <div class="alert alert-danger" role="alert">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @include('flash::message')

            <form action="{{ route('saveAboutMe') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" class="form-control" id="title" name="title" value="{{ settings('title') }}" aria-describedby="titleHelp">
                    <small id="titleHelp" class="form-text text-muted">Choose a title</small>
                </div>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="image" name="image">
                    <label class="custom-file-label" for="image">Choose image</label>
                </div>

                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="10">{{ settings('description') }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
@stop

در فایل View بالا عنوان، تصویر و توضیحات را قرار دادیم و برای مقدار value آن‌ها از تابع setting استفاده کردیم که اگر وارد این صفحه شدیم و از قبل مقادیری ذخیره بود، آن‌ها را در فرم نشان دهد.

ایجاد Controller برای نمایش و ذخیره اطلاعات

برای نمایش فایل View باید یک تابع در فایل app/Http/Controller/Admin/DashboardController.php بسازیم و همچنین یک تابع برای ذخیره اطلاعات در این فایل نیاز داریم. کد زیر را در فایل ذکر شده در بدنه‌ی کلاس بنویسید.

public function view_about_me()
    {
        return view('admin.about_me');
    }

    public function save_about_me(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'image' => 'required',
            'description' => 'required',
        ]);

        $valuestore = Valuestore::make(storage_path('settings.json'));
        $valuestore->put('title', $request->title);
        $valuestore->put('description', $request->description);

        //save image
        $image = $request->file('image');
        $filename = 'about-img.' . $image->getClientOriginalExtension();
        $image->move('img/', $filename);
        $valuestore->put('image', $filename);

        flash('اطلاعات با موفقیت ذخیره شدند.')->success();
        return redirect(route('viewAboutMe'));
    }

تابع اول برای نمایش فرم اطلاعات است و تابع دوم درخواستی که از سمت فرانت اند به آن ارسال می‌شود را در فایلی ( از طریق پکیج valuestore ) ذخیره می‌کند. همچنین تصویر را در مسیر public/img با نام about-img و پسوند تصویر ارسالی ذخیره می‌کنیم.

ایجاد مسیرها (Route)

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

Route::get('/about_me', '[email protected]_about_me')->name('viewAboutMe');
Route::post('/about_me', '[email protected]_about_me')->name('saveAboutMe');

حالا پنل مدیریت را باز کنید و از سایدبار گزینه‌ی About Me را بزنید و با تصویری شبیه به تصویر زیر مواجه خواهید شد.

نمایش اطلاعات در صفحه اصلی

برای بخش اطلاعات درباره من در صفحه اصلی نیز باید از تابع settings استفاده کنیم و اطلاعات ذخیره شده در فایل را نمایش دهیم.

فایل resources/views/site/home.blade.php را باز کنید و با توجه به کامنت گذاری قسمت درباره من را به صورت زیر تغییر دهید.

    <!--================ Start About Area =================-->
    <section class="about-area section_gap gray-bg">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 about-left">
                    <img class="img-fluid" src="img/{{ settings('image') }}" alt="">
                </div>
                <div class="col-lg-6 col-md-12 about-right">
                    <div class="main-title text-left">
                        <h1>{{ settings('title') }}</h1>
                    </div>
                    <div class="mb-50 wow fadeIn" data-wow-duration=".8s">
                        <p>
                            {{ settings('description') }}
                        </p>
                    </div>
                    <a href="#" class="primary-btn">More Info</a>
                </div>
            </div>
        </div>
    </section>
    <!--================ End About Area =================-->

حال در صفحه اصلی قسمت درباره من باید شبیه به تصویر زیر باشد.

بخش تماس با من

در این بخش مقاله‌ی طراحی صفحه‌ درباره من و تماس با من، به طراحی صفحه‌ تماس با من می‌پردازیم.

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

ایجاد مدل تماس با من

برای ایجاد مدل دستور زیر را در خط فرمان خود اجرا کنید.

php artisan make:model Contact -mc

حال در فایل app/Contact.php کد زیر را در کلاس Contact اضافه کنید.

protected $fillable = [
        'name', 'email', 'subject', 'message'
    ];

در هنگام ساختن یک نمونه از مدل مورد نظر می‌توان از دستور create استفاده کرد. در ادامه برای شما توضیح خواهیم داد.

فایل Migration دیتابیس

فایل database/migrations/.....create_contacts_table.php را باز کنید و در تابع up کد زیر را قرار دهید.

Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('subject');
            $table->text('message');
            $table->timestamps();
        });

چهار ستون برای بخش تماس با من قرار دادیم، نام، ایمیل، عنوان و متن پیام، به‌غیر از id و timestamps که به‌طور پیش‌فرض وجود دارند.

حال با اجرای دستور زیر می‌توانید دیتابیس مربوط به بخش تماس با من را بسازید.

php artisan migrate

بخش ظاهری فرم تماس با من در سایت اصلی

در این مرحله باید فرمی در سایت اصلی قرار دهیم تا کاربران بتوانند از طریق آن پیامی برای شما ارسال کنند.

یک فایل در مسیر resources/views/site به نام contact.blade.php بسازید و کدهای زیر را در آن قرار دهید.

@extends('site.layouts.app')

@section('content')
    <!--================ Start Contact Banner Area =================-->
    <section class="banner_area">
        <div class="banner_inner d-flex align-items-center">
            <div class="container">
                <div class="banner_content text-right">
                    <h1>Contact Me</h1>
                    <div class="page_link">
                        <a href="{{ route('homePage') }}">Home</a>
                        <a href="">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End Contact Banner Area =================-->

    <!--================Contact Area =================-->
    <section class="contact_area section_gap">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="contact_info">
                        <div class="info_item">
                            <i class="lnr lnr-home"></i>
                            <h6>California, United States</h6>
                            <p>Santa monica bullevard</p>
                        </div>
                        <div class="info_item">
                            <i class="lnr lnr-phone-handset"></i>
                            <h6><a href="#">00 (440) 9865 562</a></h6>
                            <p>Mon to Fri 9am to 6 pm</p>
                        </div>
                        <div class="info_item">
                            <i class="lnr lnr-envelope"></i>
                            <h6><a href="#">[email protected]</a></h6>
                            <p>Send us your query anytime!</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
               @if (count($errors))
                 <div class="alert alert-danger" role="alert">
                     <ul>
                         @foreach($errors->all() as $error)
                             <li>{{ $error }}</li>
                         @endforeach
                     </ul>
                 </div>
                @endif
                    @include('flash::message')
                    <form class="row contact_form" action="{{ route('submitContactMessage') }}" method="post" id="contactForm"
                          novalidate="novalidate">
                        @csrf
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Enter email address">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <textarea class="form-control" name="message" id="message" rows="1" placeholder="Enter Message"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12 text-right">
                            <button type="submit" value="submit" class="primary-btn"><span>Send Message</span></button>
                        </div>
                    </form>
                </div>
            </div>
            <div id="mapBox" class="mapBox" data-lat="40.701083" data-lon="-74.1522848" data-zoom="13" data-info="PO Box CT16122 Collins Street West, Victoria 8007, Australia."
                 data-mlat="40.701083" data-mlon="-74.1522848">
            </div>
        </div>
    </section>
    <!--================Contact Area =================-->
@stop

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

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

آدرس‌های بخش تماس با من

در قسمت قبل آدرسی برای نمایش صفحه تماس با من ساختیم و در این قسمت یک آدرس برای ثبت پیام ایجاد می‌کنیم. کد زیر را در فایل routes/web.php قرار دهید.

Route::post('/contact', '[email protected]_contact')->name('submitContactMessage');

از متد POST برای ثبت پیام استفاده کردیم زیرا قرار است اطلاعاتی که از یک فرم ارسال می‌شود را در دیتابیس ثبت کند.

توابع Controller ها:

برای قسمت سایت اصلی به دو تابع نیاز داریم، یکی برای نمایش صفحه و دیگری برای ثبت پیام است. فایل app/Http/Controllers/SiteController.php را باز کنید و دو تابع زیر را در کلاس SiteController.php وارد کنید.

public function contact()
    {
        return view('site.contact');
    }

    public function submit_contact(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required',
            'subject' => 'required',
            'message' => 'required'
        ]);

        Contact::create($request->except('_token'));

        flash('پیام شما با موفقیت ارسال شد.')->success();
        return redirect(route('viewContactPage'));
    }

در تابع اول فقط فایل View که قبل‌تر ساختیم را نمایش می‌دهیم. در تابع بعد درخواست به صورت مدل Request از طریق فرم View برای ما ارسال می‌شود و بعد از آن یک نمونه از مدل Contact را در دیتابیس می‌سازیم.

حال با وارد کردن آدرس http://localhost:8000/contact در مرورگر باید با تصویری شبیه به زیر مواجه شوید.

زمانی که در فرم بالا اطلاعات را وارد کنید و دکمه‌ی Send Message را بزنید باید با تصویری شبیه به زیر مواجه شوید.

اگر خطایی داشته باشید و یا یکی از فیلدها را وارد نکنید در قسمت سبز رنگ خطاها را مشاهده خواهید کرد که شبیه به تصویر زیر است.

نمایش پیام‌ها در پنل مدیریت

حال باید در قسمت پنل مدیریت یک بخش اضافه کنیم تا بتوانیم پیام‌های ارسالی کاربران را ببینیم. در مرحله‌ی اول نیاز به دو آدرس داریم. بعد از آن طبق روال، بخش View را تکمیل می‌کنیم و در آخر نیز بخش Controller را بررسی می‌کنیم.

ایجاد Route ها

برای نمایش لیست پیام‌ها به یک آدرس و برای نمایش کامل اطلاعات یک پیام به یک آدرس دیگر نیاز داریم. در فایل routes/web.php آدرس‌های زیر را در گروه‌بندی آدرس‌های پنل مدیریت قرار دهید.

Route::get('/messages', '[email protected]_messages')->name('viewMessages');
Route::get('/message/{contact}', '[email protected]_single_message')->name('viewSingleMessage');

در Route دوم ما یک پارامتر به عنوان contact قرار دادیم که کلید اصلی (Primary Key) مدل Contact را می‌پذیرد و در ورودی تابع Controller آن، مدل Contact را خواهیم داشت.

ایجاد View ها

به دو View برای لیست پیام‌ها و همچنین نمایش اطلاعات کامل پیام نیاز داریم. یک فایل در مسیر resources/views/admin به نام messages.blade.php بسازید و کد زیر را در آن قرار دهید.

@extends('admin.layouts.panel')

@section('content')
    <div class="card">
        <div class="card-header">Messages</div>

        <div class="card-body">
            @include('flash::message')

            <table class="table table-hover">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Subject</th>
                    <th scope="col">Email</th>
                    <th scope="col">Created At</th>
                    <th scope="col">Message</th>
                    <th scope="col">Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach($messages as $message)
                    <tr>
                        <th scope="row">{{ $message->id }}</th>
                        <td>{{ $message->name }}</td>
                        <td>{{ $message->subject }}</td>
                        <td>{{ $message->email }}</td>
                        <td>{{ jdate($message->created_at)->format('Y/m/d') }}</td>
                        <td>{{ substr($message->message,0,40).'...' }}</td>
                        <td>
                            <a href="{{ route('viewSingleMessage', ['contact' => $message]) }}" class="btn btn-success">
                                <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.5 8a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z" clip-rule="evenodd"/>
                                </svg>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@stop

در این فایل لیستی از خلاصه پیام‌های ارسالی را نمایش خواهیم داد.

در ادامه یک فایل در مسیر resources/views/admin به نام message_single.blade.php برای نمایش اطلاعات کامل پیام بسازید و کد‌های زیر را در آن قرار دهید.

@extends('admin.layouts.panel')

@section('content')
    <div class="card">
        <div class="card-header">Message</div>
        <div class="card-body">
            @include('flash::message')

            <h3>
                {{ $message->subject }}
                <small class="text-muted">from {{ $message->name }}</small>
            </h3>
            
            <h5>{{ $message->email }}</h5>
            <p class="lead">
                {{ $message->message }}
            </p>
        </div>
    </div>
@stop

توابع Controller ها

در مسیر app/Http/Controllers/Admin به فایل DashboardController.php و کلاس DashboardController دو تابع زیر را اضافه کنید.

public function view_messages()
    {
        $messages = Contact::query()->orderBy('created_at', 'desc')->get();
        return view('admin.messages', ['messages' => $messages]);
    }

    public function view_single_message(Contact $message)
    {
        return view('admin.message_single', ['message' => $message]);
    }

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

در تابع بعد همان نمونه از مدل Contact که در ورودی تابع قرار دارد را به View نمایش اطلاعات کامل پیام، ارسال کردیم.

حال با وارد کردن آدرس http://localhost:8000/admin/messages با تصویری شبیه به تصویر پایین مواجه شده و لیستی از پیام‌های ارسالی را مشاهده خواهید کرد.

اگر در لیست بر روی دکمه‌ی سبز رنگ با آیکون چشم کلیک کنید، اطلاعات کامل پیام را مشاهده می‌کنید.

موارد تکمیلی

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

سایت اصلی

در سایت اصلی باید به فرم تماس با من در سربرگ (Header) لینک بدهیم. در فایل resources/views/site/layouts/header.blade.php و در قسمت آیتم‌های لیست بالا، بخش تماس با من را به صورت زیر تغییر دهید.

<li class="nav-item"><a class="nav-link" href="{{ route('viewContactPage') }}">Contact</a></li>

از تابع route در لاراول برای نمایش لینک Route مورد نظر استفاده کردیم که ورودی آن نام Route است.

پنل مدیریت

در پنل مدیریت نیز یک لینک به بخش لیست پیام‌های ارسالی باید قرار دهیم که این‌کار را در قسمت سایدبار انجام می‌دهیم. در فایل resources/views/admin/layouts/sidebar.blade.php و در لیست مربوط به لینک‌ها، آیتم زیر را قرار دهید.

<li><a href="{{ route('viewMessages') }}">Messages</a></li>

جمع‌بندی:

در این قسمت به‌طور کامل قسمت‌های درباره من و قسمت تماس با من، که یک فرم در صفحه‌ی اصلی است. و همچنین بخش نمایش پیام‌ها در پنل مدیریت را توضیح دادیم. و تمامی موارد فنی از جمله View ها، Route‌ها و همچنین توابع Controller‌ها را مورد بررسی قرار دادیم. در صورتی که پس از مطالعه‌ی آموزش طراحی سایت شخصی با لاراول، هرگونه سوالی داشتید در قسمت نظرات سوال خود را مطرح کنید، تا شما را راهنمایی کنیم.

اگر به یادگیری بیشتر لاراول علاقه داری می‌تونی در دوره آموزشی لاراول کاربردی (بسته پروژه محور) شرکت کنی، این دوره شامل ۱۲ پروژه کاربردی و پر استفاده در دنیای واقعی است، که تمامی پروژه‌ها به صورت کامل برنامه‌ نویسی خواهند شد، تا دانشجو بتواند با روند ایجاد و تکمیل پروژه به صورت کامل آشنا شود.

نویسنده

وحید حسنی

از دوست داران دنیای تکنولوژی مخصوصا دنیای وب از توسعه دهندگان وب مخصوصا بک اند از عاشقان پی اچ پی مخصوصا لاراول از دیوانگان کار کردن مخصوصا در آی ویرا ;-)