This tutorial shows how you can convert multiple pages of HTML template into Laravel by adding other methods in the controller. To start this tutorial you have to complete the Part 1 of this tutorial to know how to start template conversion in Laravel.
Steps:
1. Start Apache and MySQL server. Check laravelproject that is created in the previous tutorial is working properly or not.
2. Header and Footer section in each page of the HTML template are same here. Create a file named header.blade.php for header section and footer.blade.php for footer section.
3. Open index.blade.php file and select and cut the common part from the beginning that is using in every page and paste the content in header.blade.php. According to my template, the content of header.blade.php is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stayhome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/animate.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/owl.theme.default.min.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/magnific-popup.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/aos.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/ionicons.min.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/flaticon.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/icomoon.css">
<link rel="stylesheet" href="<?php echo url('/'); ?>/css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="py-1 bg-black top">
<div class="container">
<div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
<div class="col-lg-12 d-block">
<div class="row d-flex">
<div class="col-md pr-4 d-flex topper align-items-center">
<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-phone2"></span></div>
<span class="text">+ 1235 2355 98</span>
</div>
<div class="col-md pr-4 d-flex topper align-items-center">
<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-paper-plane"></span></div>
<span class="text">youremail@email.com</span>
</div>
<div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right justify-content-end">
<p class="mb-0 register-link"><a href="#" class="mr-3">Sign Up</a><a href="#">Sign In</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index">Stayhome</a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="<?php echo url('/'); ?>" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#services-section" class="nav-link"><span>Services</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#properties-section" class="nav-link"><span>Listing</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#about-section" class="nav-link"><span>About</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#workflow-section" class="nav-link"><span>How it works</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#agent-section" class="nav-link"><span>Agent</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#blog-section" class="nav-link"><span>Blog</span></a></li>
<li class="nav-item"><a href="<?php echo url('/'); ?>#contact-section" class="nav-link"><span>Contact</span></a></li>
</ul>
</div>
</div>
</nav>
4. Add the following line at the top of index.blade.php file.
@include('header')5. Open index.blade.php file and select and cut the common part from the bottom of the page that is using in every page and paste the content in footer.blade.php. According to my template, the content of footer.blade.php is given below.
<footer class="ftco-footer ftco-section">
<div class="container-fluid px-md-5">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Stayhome</h2>
<p>Far far away, behind the word mountains, far from the countries.</p>
<ul class="ftco-footer-social list-unstyled mt-5">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">Community</h2>
<ul class="list-unstyled">
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Search Properties</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>For Agents</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Reviews</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>FAQs</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">About Us</h2>
<ul class="list-unstyled">
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Our Story</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Meet the team</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Careers</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Company</h2>
<ul class="list-unstyled">
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>About Us</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Press</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Contact</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Careers</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
<li><a href="#"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
<li><a href="#"><span class="icon icon-envelope pr-4"></span><span class="text">info@yourdomain.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart color-danger" 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>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="<?php echo url('/'); ?>/js/jquery.min.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery-migrate-3.0.1.min.js"></script>
<script src="<?php echo url('/'); ?>/js/popper.min.js"></script>
<script src="<?php echo url('/'); ?>/js/bootstrap.min.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery.easing.1.3.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery.waypoints.min.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery.stellar.min.js"></script>
<script src="<?php echo url('/'); ?>/js/owl.carousel.min.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery.magnific-popup.min.js"></script>
<script src="<?php echo url('/'); ?>/js/aos.js"></script>
<script src="<?php echo url('/'); ?>/js/jquery.animateNumber.min.js"></script>
<script src="<?php echo url('/'); ?>/js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="<?php echo url('/'); ?>/js/google-map.js"></script>
<script src="<?php echo url('/'); ?>/js/main.js"></script>
6. Add the following line at the bottom of index.blade.php file.
@include('footer')7. Now, modify the controller to make properties.blade.php file dynamic. Open PropertyController and add the following method to read and display all records of properties table.
public function properties()
{
$pro = Property::all();
return view('properties')->with('pros', $pro);
}8. Open index.blade.php file and go to the property section. Add the following anchor element.
<a href="properties">Our Property</a>9. Open properties.blade.php and modify the header and footer section like index.blade.php file. Go to the section where static property information is displaying and modify the code with the following code to make the section dynamic.
@foreach ($pros as $pro)
<div class="col-md-6 col-lg-4">
<div class="properties ftco-animate">
<div class="img">
<img src="images/p{{ $pro->id }}.jpg" class="img-fluid" alt="Colorlib Template">
</div>
<div class="desc">
<div class="text bg-primary d-flex text-center align-items-center justify-content-center">
<span>Sale</span>
</div>
<div class="d-flex pt-5">
<div>
<h3><a href="properties-single/{{ $pro->id }}">{{ $pro->name }}</a></h3>
</div>
<div class="pl-md-4">
<h4 class="price">{{ $pro->price }}</h4>
</div>
</div>
<p class="h-info"><span class="location">{{ $pro->location }} - </span> <span class="details">{{ $pro->bedroom }} beds & {{ $pro->bathroom }} baths></p>
</div>
</div>
</div>
@endforeach10. Add the following route in web.php. Run the project and check the link is working or not.
Route::get('properties','PropertyController@properties');11. Next, open properties-single.blade.php and modify the header and footer section like index.blade.php file.
12. Add the following method in PropertyController for displaying property details.
public function pro_details($id)
{
$details = Property::where('id', '=', $id)->get();
return view('properties-single')->with('details', $details);
}13. Add the following lines after Property Details section in properties-single.blade.php file to display details of the particular property.
@foreach ($details as $detail)
<section class="ftco-section ftco-services-2">
<div class="container">
<div class="row">
<div class="col-md-12 property-wrap mb-5">
<div class="row">
<div class="col-md-6 d-flex ftco-animate">
<div class="img align-self-stretch" style="background-image: url(images/work-2.jpg);"></div>
</div>
<div class="col-md-6 ftco-animate py-5">
<div class="text py-5 pl-md-5">
<div class="d-flex">
<div>
<h3><a href="properties-single.html">{{ $detail->name }}</a></h3>
</div>
<div class="pl-md-4">
<h4 class="price">{{ $detail->price }}</h4>
</div>
</div>
<p>{{ $detail->others }}</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 tour-wrap">
<table class="table">
<tbody>
<tr>
<th scope="row">Lot area</th>
<td>
<p>{{ $detail->lotarea }}</p>
</td>
<td></td>
</tr><!-- END TR-->
<tr>
<th scope="row">Floor Area</th>
<td>
<p>{{ $detail->floorarea }}</p>
</td>
<td></td>
</tr><!-- END TR-->
<tr>
<th scope="row">Bedroom</th>
<td>
<p>{{ $detail->bedroom }}</p>
</td>
<td></td>
</tr><!-- END TR-->
<tr>
<th scope="row">Bathroom</th>
<td>
<p>{{ $detail->bathroom }}</p>
</td>
<td></td>
</tr><!-- END TR-->
<tr>
<th scope="row">Garage</th>
<td>
<p>{{ $detail->garage }}</p>
</td>
<td></td>
</tr><!-- END TR-->
<tr>
<th scope="row">Maps</th>
<td>
<div id="map"></div>
</td>
</tr><!-- END TR-->
<tr>
<th scope="row">Take A Tour</th>
<td>
<!-- <div id="map"></div> -->
<div class="block-16">
<figure>
<div class="img" style="background-image: url(images/work-2.jpg);"></div>
<a href="https://vimeo.com/45830194" class="play-button popup-vimeo"><span class="icon-play"></span></a>
</figure>
</div>
</td>
</tr><!-- END TR-->
</tbody>
</table>
</div>
@endforeach14. Add the following route in web.php file.
Route::get('properties-single/{id}','PropertyController@pro_details');15. Run the project and check property and property details pages are working or not.