آموزش ساخت اپلیکیشن مدیریت وظایف با لاراول : قسمت سوم

دسته بندی: برنامه نویسی
سطح مقاله: متوسط
زمان مطالعه: ۳۲ دقیقه
۲۴ خرداد ۱۳۹۸

در سری آموزشی که پیش رو دارید یک اپلیکیشن مدیریت وظایف را به صورت قدم به قدم ایجاد می کنیم. در قسمت پیش از سری آموزشی "آموزش ساخت اپلیکیشن مدیریت وظیفه با لاراول" مراحل آماده سازی لاراول میکس و آموزش استفاده از آن را پشت سر گذاشتیم. در این قسمت می خواهیم ویو های (View) پروژه را آماده سازی و ساختاربندی کنیم. پس در ادامه این سری با ما همراه باشید تا مراحل ساخت فرانت اند پروژه را با هم به پایان برسانیم.

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

آموزش لاراول

در ادامه این قسمت به ساختاربندی ویوهای پروژه اپلیکیشن مدیریت وظایف می پردازیم. اما ویو چیست؟ به طور خلاصه ویو لایه ای از معماری MVC است که حاوی کدهای HTML شما است. لایه ویو منطق لایه کنترلر را از بخش نمایشی سایتتان جدا می کند. ویوها در لاراول در مسیر resources>views ذخیره می شوند. در لاراول برای کار با قالب های View از موتور قالب Blade استفاده می کنیم. بنابراین پسوند همه فایل های View با فرمت blade.php ذخیره می شوند.

آموزش ساخت View پروژه و ساختاربندی آن

اپلیکیشن مدیریت وظایف ما یک اپلیکیشن تک صفحه ای ساده است. بنابراین در این پروژه با ساختاربندی پیچیده ای رو به رو نیستیم. در واقع فقط با یک View اصلی با نام app.blade.php سر و کار داریم. برای راحتی کارتان فرانت اند پروژه به صورت آماده در پایان مقاله در اختیارتان قرار گرفته است. آن را دانلود کرده و محتویات فایل index.html در پوشه اصلی پروژه را از آن کپی کنید. در پروژه لاراول به مسیر resources>views بروید و یک فایل با نام master.blade.php ایجاد کرده و محتویات index.html را به آن منتقل کنید.

لازم است بدانید که موتور مدیریت قالب Blade از سیستم ارباب برده یا Master/Slave پشتیبانی می کند. یعنی شما می توانید یک قالب اصلی به عنوان Master تعریف کرده و با این کار از تکرار بی مورد کدهای قالب جلوگیری کنید. همچنین با استفاده از موتور Blade می توانید قالب ها را بخش بندی کرده و هر بخش را در قسمت مورد نیاز خود فراخوانی کنید.

فایل Master باید حاوی محتویاتی باشد که قرار است در صفحات متعدد در پروژه تکرار شود. اما اگر دقت کنید محتویات div با کلاس  task-area تکرار شونده نیست. بنابراین این div را از فایل master پاک کنید. در همین مسیر یک فایل با نام app.blade.php بسازید و div با کلاس task-area را به آن منتقل کنید. حال فایل app.blade.php باید حاوی محتویات زیر باشد:

<div class="tasks-area">
            <form action="" class="form-horizontal">
                <div class="form-group">
                    <div class="col-md-12">
                        <input type="text" id="title" class="form-control" placeholder="نام تسک را وارد کنید"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <textarea name="" id="description" class="form-control" cols="30" rows="5" placeholder="توضیحات تسک را وارد کنید"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button class="btn btn-primary" id="add-btn" type="submit">ذخیره کردن</button>
                    </div>
                </div>
            </form>

            <ul class="tasks">
                <li class="task undone">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">وظیفه مهم اول</h3>
                        </div>
                        <div class="panel-body">
                            <div class="panel-content">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                            </div>
                            <form action="" class="form-horizontal hidden-form">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control hidden-title" value="وظیفه مهم اول" placeholder="نام تسک را وارد کنید"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <textarea name="" class="form-control hidden-description" cols="30" rows="5" placeholder="توضیحات تسک را وارد کنید">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                                        </textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <button class="btn btn-primary" id="edit-btn" type="submit">ذخیره کردن</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer task-links">
                            <form action="">
                                وضعیت:
                                <span class="task-status undone">انجام نشده</span> / 
                                <span class="edit">ویرایش</span> / 
                                <button type="submit" class="remove">حذف</button>
                            </form>
                        </div>
                    </div>
                </li>
                <li class="task success">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">وظیفه مهم اول</h3>
                        </div>
                        <div class="panel-body">
                            <div class="panel-content">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                            </div>
                            <form action="" class="form-horizontal hidden-form">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control hidden-title" value="وظیفه مهم اول" placeholder="نام تسک را وارد کنید"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <textarea name="" class="form-control hidden-description" cols="30" rows="5" placeholder="توضیحات تسک را وارد کنید">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                                        </textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <button class="btn btn-primary" id="edit-btn" type="submit">ذخیره کردن</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer task-links">
                            <form action="">
                                وضعیت:
                                <span class="task-status done">انجام شده</span> / 
                                <span class="edit">ویرایش</span> / 
                                <button type="submit" class="remove">حذف</button>
                            </form>
                        </div>
                    </div>
                </li>  
            </ul>
        </div>

اما لاراول باید از کجا متوجه شود که فایل app.blade.php باید از کدام مستر فایل ارث بری کند؟ موتور قالب Blade یک سری از دستورات مخصوص این کار دارد. برای استفاده از این دستورات، در فایل master.blade.php و درست در جایی که div با کلاس task-area را پاک کرده بودید این کد را وارد کنید:

@yield('content')

سپس به فایل app.blade.php بروید و کد زیر را در بالای همه کدهای دیگر وارد کنید:

@extends('master')

در کد اول دستور yield به فایل Master می گوید که باید بخشی با نام content را از یک فایل blade دیگر دریافت کند. در کد دوم دستور extends به فایل app.blade.php اطلاع می دهد که باید از فایل master.blade.php به عنوان فایل Master استفاده کند. در ادامه div با کلاس task-area را بین این دو دستور قرار دهید:

@section('content')
...
@endsection('content')

دستورات section و endsection به فایل master.blade.php می گوید که بخش محصور بین این دو دستور را به عنوان محتویات بخش content در نظر بگیرد. به این ترتیب div با کلاس task-area به عنوان بخش content در جای مناسب در فایل master.blade.php بارگذاری می شود.

برای ساختار بندی بهتر پروژه خوب است که فایل های شلوغ ویو را کمی بیشتر به قطعات کوچک تقسیم کنیم. این کار باعث می شود ایجاد تغییرات در فایل های View به شدت آسان شود. در مسیر resources>vies یک پوشه با نام sections بسازید. در این پوشه دو فایل با نام های header.blade.php و footer.blade.php بسازید. حال به سراغ فایل master.blade.php بروید. این بخش از کد را از این فایل پاک کرده و به فایل header.blade.php منتقل کنید:

    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">مدیریت وظایف</a>
        </div>
      </div>
    </nav>
    <div class="container theme-showcase" role="main">

دوباره به سراغ فایل master.blade.php بروید. این بخش از پایان فایل را به فایل footer.blade.php منتقل کنید. اما دوباره با مشکل اطلاع دادن به Blade برای دریافت اطلاعات از مسیر درست مواجه هستیم. برای فراخوانی محتویات فایل header.blade.php این دستور را به جای کدهای آن در فایل master.blade.php وارد نمایید:

@include('section.header')

و برای فراخوانی محتویات footer.blade.php این دستور را به جای کدهای منتقل شده فوتر وارد کنید:

@include('section.footer')

دستور include به راحتی فایل های مورد نظرتان را در فایل فعلی فراخوانی می کند. در واقع این دستور معادل Blade همان دستور include در php است. در پایان کار فایل master.blade.php به این صورت در آمده است:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>اپلیکیشن مدیریت وظایف</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    @include('section.header')
        @yield('content')
    @include('section.footer')
</body>
</html>

برای مشاهده نتیجه کار باید روت (Route) لازم برای دسترسی به صفحه اصلی را ایجاد کنیم. به مسیر routes بروید و فایل web.php را باز کنید. محتویات آن را پاک کرده و به جای آن این خط کد را وارد کنید:

Route::get('/', 'HomeController@index');

این کد به لاراول می گوید که در صورت باز کردن مسیر اصلی پروژه ()  توسط کاربر، به کنترلر HomeController  رفته و متد index این کنترلر را فراخوانی کند. به مسیر app>Http>Controllers بروید و فایل کنترلر HomeController.php را باز کنید. کد متد index را پاک کرده و به جای آن این خط کد را وارد نمایید:

return view('app');

این کد به لاراول می گوید که در هنگام فراخوانی متد index، باید ویو با نام app در پوشه resources>views را فراخوانی کند. حال دستورات زیر را در خط فرمان پروژه اجرا کرده و مسیر localhost:8000 را در مرورگر خود باز کنید:

Php artisan serve
Npm run watch

اگر همه مراحل را به درستی انجام داده باشید فرانت اند پروژه با موفقیت بالا می آید. اما ظاهر آن به هم ریخته و نامرتب است. زیرا فایل های js و css آن به درستی آدرس دهی نشده اند. به فایل master.blade.php رفته و المنت های link را پاک کنید. به جای همه آن ها این خط کد را وارد نمایید:

<link rel="stylesheet" href="css/app.css">

این کد فایل app.css در مسیر public>css را که حاوی همه css های ترجمه شده توسط لاراول میکس فراخوانی می کند. به فایل footer.blade.php بروید و به جای تمام المنت های script کد زیر را وارد کنید:

<script src="js/app.js"></script>

درست مانند خط کد قبل، این کد فایل app.js در مسیر public>js  را که حاوی همه کدهای js ترجمه و فشرده شده توسط لاراول میکس است فراخوانی می کند.

حال دوباره مسیر localhost:8000 را در مرورگر خود باز کنید. همانطور که مشاهده می کنید، حالا تمامی کدهای css و js پروژه به درسته فراخوانی شده اند.

جمع بندی

در این قسمت از سری آموزشی " آموزش ساخت اپلیکیشن مدیریت وظیفه با لاراول"   آماده سازی و ساختار بندی ویوهای پروژه را به پایان رساندیم. فرانت پروژه ما اکنون آماده شده است. از قسمت های بعد این سری به آماده سازی و تکمیل بک اند پروژه می پردازیم. اگر در هریک از مراحل این سری به مشکلی برخوردید، کافی است آن را در قسمت نظرات اعلام کنید. ما همیشه از کمک کردن به شما لذت خواهیم برد!

 

بیشتر مطالعه کنید : 

نویسنده

نظرات کاربران

محمدرضا

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

امین

سلام
لطفا فایل فرانت اند پروژه رو که گفتید قرار بدین
ممنونم

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل