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

دسته بندی: لاراول
زمان مطالعه: 59 دقیقه
۲۳ فروردین ۱۳۹۹

طراحی صفحه‌ی اصلی و جزییات نمونه کار:

در آموزش ویرایش و حذف نمونه کار (portfolio) در لاراول - آموزش طراحی سایت شخصی با لاراول قسمت سوم، در مورد حذف و ویرایش مدل نمونه کار صحبت کردیم. Viewها را ساختیم و فیلدهای موردنظر برای ویرایش را قرار دادیم. همچنین روش ویرایش نمونه کار در controller را نیز بررسی کردیم.

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

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

فهرست محتوای این مقاله

فایل‌های ایستا قالب:

برای ظاهر اصلی سایت ما از قالب Steve استفاده کردیم که به صورت رایگان می‌توانید دانلود کنید.

در مرحله‌ی اول نیاز داریم فایل‌های ایستا قالب را در مسیر public کپی کنیم و از آنها در فایل‌های View استفاده کنیم.

بعد از دانلود قالب پوشه‌های css, fonts, js, img, vendors را در مسیر public در پروژه‌ی لاراول کپی کنید و اگر با گزینه‌ای رو به رو شدید replace را انتخاب کنید.

فایل‌های View:

حالا برای صفحات اصلی سایت باید صفحات خود را در فایل‌های View بنویسیم و در لاراول مدیریت کنیم.

لایه‌بندی صفحات:

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

یک پوشه در مسیر resources/views/site به نام layouts می‌سازیم.

یک فایل app.blade.php ایجاد می‌کنیم تا لایه‌بندی اصلی سایت را در آن قرار دهیم.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="{{ asset('img/favicon.png') }}" type="image/png">
    <title>7Learn Resume Site with Laravel</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/linericon/style.css"') }}">
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/owl-carousel/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/magnific-popup.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/nice-select/css/nice-select.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/animate-css/animate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/flaticon/flaticon.css') }}">
    <!-- main css -->
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    @yield('styles')
</head>

<body>

@yield('content')

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('js/popper.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/stellar.js') }}"></script>
<script src="{{ asset('js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('vendors/nice-select/js/jquery.nice-select.min.js') }}"></script>
<script src="{{ asset('vendors/isotope/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ asset('vendors/isotope/isotope-min.js') }}"></script>
<script src="{{ asset('vendors/owl-carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('js/jquery.ajaxchimp.min.js') }}"></script>
<script src="{{ asset('js/mail-script.js') }}"></script>
<!--gmaps Js-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
<script src="{{ asset('js/gmaps.min.js') }}"></script>
<script src="{{ asset('js/theme.js') }}"></script>
@yield('scripts')
</body>

</html>

از تابع asset در لاراول برای بارگذاری فایل‌های ایستا استفاده کردیم که در قسمت‌های قبل توضیح داده بودیم.

یک yield برای content و یکی برای styles و همچنین برای scripts، ساختیم که اگر در صفحات دیگر، به بارگذاری استایل‌ها یا فایل‌های جاوا اسکریپت نیاز داشتیم، به راحتی بتوانیم این کار را انجام دهیم.

از yield با نام content هم برای محتوا اصلی صفحه استفاده می‌کنیم.

یک فایل با نام header.blade.php در همین مسیر ایجاد می‌کنیم.

<!--================Header Menu Area =================-->
<header class="header_area">
    <div class="main_menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                    <ul class="nav navbar-nav menu_nav justify-content-end">
                        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>
<!--================Header Menu Area =================-->

این کدهای سربرگ صفحات ما هستند که در تمامی صفحات وجود دارند و ما برای کمتر تکرار شدن کدها آنها را در یک فایل جدا اضافه کردیم و در فایل app.blade.php این فایل را فقط include می‌کنیم.

یک فایل با نام footer.blade.php نیز در همین مسیر ایجاد کنید.

<!--================ Start Footer Area =================-->
<footer class="footer_area section_gap">
    <div class="container">
        <div class="row footer_inner justify-content-center">
            <div class="col-lg-6 text-center">
                <aside class="f_widget social_widget">
                    <div class="f_logo">
                        <img src="{{ asset('img/logo.png') }}" alt="">
                    </div>
                    <div class="f_title">
                        <h4>Follow Me</h4>
                    </div>
                    <ul class="list">
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </aside>
                <div class="copyright">
                    <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                        Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
                        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!--================End Footer Area =================-->

در این فایل نیز شبیه به فایل header.blade.php کار کردیم.

کد زیر را در فایل app.blade.php و در بالای @yield('content') اضافه کنید.

@include('site.layouts.header')

همچنین کد زیر را پایین‌تر از @yield('content') قرار دهید.

@include('site.layouts.footer')

ساخت فایل View صفحه‌ی اصلی:

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

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

@extends('site.layouts.app')

@section('content')
    <!--================Home Banner Area =================-->
    <section class="banner-area owl-carousel" id="home">
        <div class="single_slide_banner slide_bg1">
            <div class="container">
                <div class="row fullscreen d-flex align-items-center">
                    <div class="banner-content col-lg-12 justify-content-center">
                        <h1>Steve Henriques</h1>
                        <h3>Personal portfolio Website</h3>
                        <a href="#" class="primary-btn">Hire Me</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="single_slide_banner slide_bg2">
            <div class="container">
                <div class="row fullscreen d-flex align-items-center">
                    <div class="banner-content col-lg-12 justify-content-center">
                        <h1>Steve Henriques</h1>
                        <h3>Personal portfolio Website</h3>
                        <a href="#" class="primary-btn">Hire Me</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="single_slide_banner slide_bg3">
            <div class="container">
                <div class="row fullscreen justify-content-endd-flex align-items-center">
                    <div class="banner-content col-lg-12 justify-content-center">
                        <h1>Steve Henriques</h1>
                        <h3>Personal portfolio Website</h3>
                        <a href="#" class="primary-btn">Hire Me</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================End Home Banner Area =================-->

    <!--================ Start Portfolio Area =================-->
    <section class="section_gap portfolio_area" id="work">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="main-title">
                        <h1>Latest Works</h1>
                        <p>If you are looking at blank cassettes on the web, you may be very confused at the difference in price. You may
                            see some for as low as $.17 each.</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="projects_fillter">
                        <ul class="filter list">
                            <li class="active" data-filter="*">All Categories</li>
                            <li data-filter=".brand">Branding</li>
                            <li data-filter=".work">Creative Work </li>
                            <li data-filter=".web">Web Design</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="projects_inner row grid">
                <div class="grid-sizer col-sm-6 col-md-3 col-lg-3"></div>
                <div class="col-lg-6 col-sm-6 col-sm-12 brand web grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work1.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-sm-12 brand work grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work2.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 work grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work3.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 brand work grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work5.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 brand web grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work4.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 brand work web grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work8.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 brand work web grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work6.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 brand work web grid-item">
                    <div class="projects_item">
                        <img class="img-fluid w-100" src="img/works/work7.jpg" alt="">
                        <div class="projects_text">
                            <a href="portfolio-details.html">
                                <h4>2D Vinyl Design</h4>
                            </a>
                            <p>Client Project</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End Portfolio Area =================-->

    <!--================ 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/about-img.png" alt="">
                </div>
                <div class="col-lg-6 col-md-12 about-right">
                    <div class="main-title text-left">
                        <h1>about myselt</h1>
                    </div>
                    <div class="mb-50 wow fadeIn" data-wow-duration=".8s">
                        <p>
                            inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards
                            especially in the
                            workplace. That’s why it’s crucial that, as women, our behavior on the job is beyond reproach. inappropriate
                            behavior
                            is often laughed. inappropriate behavior is often laughed off as “boys will be boys,” women face higher.
                        </p>
                        <p>That’s why it’s crucial that, as women, our behavior on the job is beyond reproach. inappropriate behavior is
                            often
                            laughed.
                        </p>
                    </div>
                    <a href="#" class="primary-btn">More Info</a>
                </div>
            </div>
        </div>
    </section>
    <!--================ End About Area =================-->

    <!--================ Start Testimonial Area =================-->
    <div class="section_gap testimonial_area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7 text-left">
                    <div class="active_testimonial owl-carousel" data-slider-id="1">
                        <!-- single testimonial -->
                        <div class="single_testimonial">
                            <div class="testimonial_head">
                                <img src="img/quote.png" alt="">
                                <h4>Fanny Spencer</h4>
                                <div class="review">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="testimonial_content">
                                <p>As conscious traveling Paup ers we must always be oncerned about our dear Mother Earth. If you think about
                                    it, you travel across her face</p>
                            </div>
                        </div>

                        <div class="single_testimonial">
                            <div class="testimonial_head">
                                <img src="img/quote.png" alt="">
                                <h4>Fanny Spencer</h4>
                                <div class="review">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="testimonial_content">
                                <p>As conscious traveling Paup ers we must always be oncerned about our dear Mother Earth. If you think about
                                    it, you travel across her face</p>
                            </div>
                        </div>

                        <div class="single_testimonial">
                            <div class="testimonial_head">
                                <img src="img/quote.png" alt="">
                                <h4>Fanny Spencer</h4>
                                <div class="review">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="testimonial_content">
                                <p>As conscious traveling Paup ers we must always be oncerned about our dear Mother Earth. If you think about
                                    it, you travel across her face</p>
                            </div>
                        </div>

                        <div class="single_testimonial">
                            <div class="testimonial_head">
                                <img src="img/quote.png" alt="">
                                <h4>Fanny Spencer</h4>
                                <div class="review">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="testimonial_content">
                                <p>As conscious traveling Paup ers we must always be oncerned about our dear Mother Earth. If you think about
                                    it, you travel across her face</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-1">
                    <div class="testimonial_logos">
                        <div class="top_logos">
                            <img src="img/brands/logo1.png" alt="">
                            <img src="img/brands/logo2.png" alt="">
                        </div>
                        <div class="mid_logo">
                            <img src="img/brands/logo3.png" alt="">
                        </div>
                        <div class="bottom_logos jus">
                            <img src="img/brands/logo4.png" alt="">
                            <img src="img/brands/logo5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--================ End Testimonial Area =================-->

    <!--================ Start Newsletter Area =================-->
    <section class="section_gap newsletter-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="main-title">
                        <h1>Join Our Newsletter</h1>
                        <p>If you are looking at blank cassettes on the web, you may be very confused at the difference in price. You may
                            see some for as low as $.17 each.</p>
                    </div>
                </div>
            </div>
            <div class="row newsletter_form justify-content-center">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="d-flex flex-row" id="mc_embed_signup">
                        <form class="w-100" novalidate="true" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
                              method="get">
                            <div class="navbar-form">
                                <div class="input-group add-on">
                                    <input class="form-control" name="EMAIL" placeholder="Your email address" onfocus="this.placeholder = ''"
                                           onblur="this.placeholder = 'Your email address'" required="" type="email">
                                    <div style="position: absolute; left: -5000px;">
                                        <input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
                                    </div>
                                    <div class="input-group-btn">
                                        <button class="genric-btn text-uppercase">
                                            Subscribe
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="info mt-20"></div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End Newsletter Area =================-->
@stop

توجه: به کامنت گذاری قبل از هر قسمت در فایل‌ها دقت کنید، که بعد نیاز داریم بعضی از قسمت‌ها را تغییر دهیم.

تا اینجا فایل‌های View ما برای صفحه‌ی اصلی تکمیل شد.

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

اضافه کردن Route ها:

برای قسمت اصلی سایت نیازی به گروه‌بندی نداریم زیرا از controllerهای اصلی و همچنین بدون هیچ پیشوندی، استفاده می‌کنیم.

کدهای زیر را در فایل web.php بعد از گروه آدرس پنل مدیریت اضافه کنید.

Route::get('/', 'SiteController@home')->name('homePage');
Route::get('/contact', 'SiteController@contact')->name('viewContactPage');
Route::get('/portfolio/{portfolio}', 'SiteController@portfolio_detail')->name('viewPortfolioPage');

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

توابع Controller ها:

یک controllerبرای مدیریت سایت اصلی می‌سازیم و تمامی توابع مورد نیاز را در آن می‌نویسیم.

controller SiteController را با اجرای دستور زیر ایجاد می‌کنیم.

php artisan make:controller SiteController

تابع صفحه‌ی اصلی:

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

تابع برای صفحه‌ی اصلی به صورت زیر می‌باشد.

public function home()
    {
        $portfolios = Portfolio::query()->orderBy('created_at', 'desc')->get();
        
        return view('site.home', ['portfolios' => $portfolios]);
    }

در تابع بالا ما نمونه کارها را بر اساس جدیدترین به قدیمی‌ترین به صفحه‌ی اصلی یعنی فایل home.blade.php فرستادیم.

در ادامه نمایش نمونه کارها را توضیح خواهیم داد.

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

نمایش نمونه کارها در صفحه‌ی اصلی:

در مرحله‌ی قبل ما نمونه کارها را در controller به View فرستادیم. حالا برای نمایش نمونه کارها در صفحه‌ی اصلی، قسمت نمونه کارها در فایل home.blade.php را به صورت زیر تغییر دهید. به کامنت‌های صفحه دقت کنید و کد را در جای مناسب خودش قرار دهید.

    <!--================ Start Portfolio Area =================-->
    <section class="section_gap portfolio_area" id="work">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="main-title">
                        <h1>Latest Works</h1>
                        <p>If you are looking at blank cassettes on the web, you may be very confused at the difference
                            in price. You may
                            see some for as low as $.17 each.</p>
                    </div>
                </div>
            </div>
            <div class="projects_inner row grid">
                <div class="grid-sizer col-sm-6 col-md-3 col-lg-3"></div>
                @foreach($portfolios as $portfolio)
                    <div class="col-lg-6 col-sm-6 col-sm-12 brand web grid-item">
                        <div class="projects_item">
                            <img class="img-fluid w-100" src="{{ asset('portfolios/'.$portfolio->image) }}" alt="">
                            <div class="projects_text">
                                <a href="{{ route('viewPortfolioPage', ['portfolio' => $portfolio]) }}">
                                    <h4>{{ $portfolio->title }}</h4>
                                </a>
                                <p>{{ $portfolio->client }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    <!--================ End Portfolio Area =================-->

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

 

صفحه‌ی جزییات نمونه کار:

برای اضافه کردن و ساخت صفحه‌ی جزییات نمونه کار نیز باید سه قسمت ‌Route, View, Controller را بسازیم. ما از قبل قسمت Route را ساختیم و آدرس صفحه‌ی جزییات نمونه کار را ایجاد کردیم.

ایجاد View:

فایلی با نام portfolio.blade.php در مسیر resources/views/site بسازید.

@extends('site.layouts.app')

@section('content')
    <!--================ Start portfolio 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>{{ $portfolio->title }}</h1>
                    <div class="page_link">
                        <a href="{{ route('homePage') }}">Home</a>
                        <a href="#">{{ $portfolio->title }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End Portfolio Banner Area =================-->

    <!--================ Start Portfolio Details Area =================-->
    <section class="portfolio_details_area section_gap">
        <div class="container">
            <div class="portfolio_details_inner">
                <div class="row">
                    <div class="col-md-6">
                        <div class="left_img">
                            <img class="img-fluid" src="{{ asset('portfolios/'.$portfolio->image) }}" alt="">
                        </div>
                    </div>
                    <div class="offset-md-1 col-md-5">
                        <div class="portfolio_right_text mt-30">
                            <h4>{{ $portfolio->title }}</h4>
                            <p>{{ $portfolio->description }}</p>
                            <ul class="list">
                                <li><span>Rating</span>:
                                    @for($i=0;$i<$portfolio->rank;$i++)
                                        <i class="fa fa-star"></i>
                                    @endfor
                                </li>
                                <li><span>Client</span>: {{ $portfolio->client }}</li>
                                <li><span>Website</span>: {{ $portfolio->link }}</li>
                                <li><span>Completed</span>: {{ jdate($portfolio->completion_date)->format('Y/m/d') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <p>{!! $portfolio->content !!}</p>
            </div>
        </div>
    </section>
    <!--================ Start Portfolio Details Area =================-->
@stop

در بالا از متغیری به نام portfolio استفاده کردیم که در controller آن را به این صفحه ارسال می‌کنیم.

ایجاد تابع Controller:

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

تابع ساده‌ی زیر را در فایل SiteController.php و بعد از تابع home قرار دهید.

public function portfolio_detail(Portfolio $portfolio)
    {
        return view('site.portfolio', ['portfolio' => $portfolio]);
    }

حالا زمانی که در صفحه‌ی اصلی بر روی عنوان یک نمونه کار کلیک کنید باید با صفحه‌ای مشابه به زیر مواجه شوید.

جمع‌بندی:

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

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

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

 

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

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

مهدی احمدی

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

وحید حسنی

سلام خیلی ممنون از نظر خوبتون
در رابطه با بردکرمب میتونین از پکیج هایی استفاده کنید و کار مشکلی نیست..پکیج davejamesmiller/laravel-breadcrumbs یه پکیج خوب برای توسعه بردکرمب هست.
موفق باشید

مهدی احمدی

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

وحید حسنی

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

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