Setup Menus in Admin Panel

  • No products in the cart.

  • LOGIN

Front-end integration

FrontEnd

Step 1:
Download the template for the front end.

Step 2:
Delete the following section from web.php:

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

Then add a route for front end

Route::get('/', [ 'as'=> 'home', 'uses' => 'Front\[email protected]']);

Step 3:
Create a controller for front-end
HomeController.php

<?php
namespace App\Http\Controllers\Front;

use App\Http\Controllers\Controller;

class HomeController extends Controller
{
public function index()
{
return view('front.home.index');
}
}

Step 4.
Create a view for front end section:
Open the index.php code which you have downloaded the template for the front-end section and copy the index.php part from the front end section and paste it into the newly created front-end directory(i.e resources/views/front/home/index.blade.php) and make the path dynamic as we have done in the admin section(i.e defining the path dynamically):

Demo:

<link href="{{ asset('front_panel/assets/css/bootstrap.css') }}

Note:
Make sure you have created the front_panel directory inside the public directory.
Don’t forget to provide the path for js and css also.

You can optimize the code to improve code quality and efficiency by dividing into the different section.

Final front-end code:

index.blade.php

@extends('front.layout.master')

@section('content')
<div class="banner">
<div class="container">
<h2>Welcome to our News Channel</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#">READ ARTICLE</a>
</div>
</div>

<!-- technology -->
<div class="technology">
<div class="container">
@include('front.home.index.all_news_left')
@include('front.includes.right_sidebar')
<div class="clearfix"></div>
<!-- technology-right -->
</div>
</div>
<!-- technology -->

@endsection

all_news_left.blade.php

<!-- technology-left -->
@if (isset($data['news']) && count($data['news']) > 0)
<div class="col-md-9 technology-left">

<div class="tech-no">
<!-- technology-top -->
@foreach($data['news'] as $key => $row)
<div class="{{ $key == 0?'tc-ch':'tc-ch' }}">

<div class="tch-img">
<a href="{{ route('news.detail', $row->slug) }}"><img src="{{ asset('front_panel/assets/images/1.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<a class="blog blue" href="{{ route('news.detail', $row->slug) }}">Technology</a>
<h3><a href="{{ route('news.detail', $row->slug) }}">{{ $row->title }}</a></h3>
{!! $row->short_des !!}
{{-- <p>Ut enim ad minim veniam, quis nostrud eiusmod tempor incididunt ut labore et dolore magna aliqua exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>--}}
<a class="" href="{{ route('news.detail', $row->slug) }}">Read more<span class="glyphicon"></span> </a>
<div class="blog-poast-info">
<ul>
<li><i class="glyphicon glyphicon-user"> </i><a class="admin" href="#"> Admin </a></li>
<li><i class="glyphicon glyphicon-calendar"> </i>30-12-2015</li>
<li><i class="glyphicon glyphicon-comment"> </i><a class="p-blog" href="#">3 Comments </a></li>
<li><i class="glyphicon glyphicon-heart"> </i><a class="admin" href="#">5 favourites </a></li>
<li><i class="glyphicon glyphicon-eye-open"> </i>1.128 views</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<!-- technology-top -->
<!-- technology-top -->

@endforeach
<!-- technology-top -->
</div>
</div>

@endif

 

Create a directory for head, header and right sidebar:
includes/head.blade.php

<head>
<title>News Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Business_Blog Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="applijewelleryion/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="{{ asset('front_panel/assets/css/bootstrap.css') }}" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="{{ asset('front_panel/assets/css/style.css') }}" rel='stylesheet' type='text/css' />
<script src="{{ asset('front_panel/assets/js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ asset('front_panel/assets/js/bootstrap.min.js') }}"></script>
</head>

 

 

header.blade.php

<div class="header">
<div class="header-top">
<div class="container">
<div class="logo">
<a href="index.html"><h1>News Blog</h1></a>
</div>
<div class="search">
<form>
<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
<input type="submit" value="">
</form>
</div>
<div class="social">
<ul>
<li><a href="#" class="facebook"> </a></li>
<li><a href="#" class="facebook twitter"> </a></li>
<li><a href="#" class="facebook chrome"> </a></li>
<li><a href="#" class="facebook in"> </a></li>
<li><a href="#" class="facebook beh"> </a></li>
<li><a href="#" class="facebook vem"> </a></li>
<li><a href="#" class="facebook yout"> </a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>

<!--head-bottom-->
<div class="head-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tech <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="tech.html">Action</a></li>
<li><a href="tech.html">Action</a></li>
<li><a href="tech.html">Action</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Culture <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="singlepage.html">Action</a></li>
<li><a href="singlepage.html">Action</a></li>
<li><a href="singlepage.html">Action</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Science <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="singlepage.html">Action</a></li>
<li><a href="singlepage.html">Action</a></li>
<li><a href="singlepage.html">Action</a></li>
</ul>
</li>
<li><a href="design.html">Design</a></li>
<li><a href="business.html">Business</a></li>
<li><a href="world.html">World</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!--head-bottom-->
</div>

 

 

right_sidebar.blade.php

<!-- technology-right -->
<div class="col-md-3 technology-right">
<div class="blo-top">
<div class="tech-btm">
<img src="{{ asset('front_panel/assets/images/banner1.jpg') }}" class="img-responsive" alt=""/>
</div>
</div>
<div class="blo-top">
<div class="tech-btm">
<h4>Sign up to our newsletter</h4>
<p>Pellentesque dui, non felis. Maecenas male</p>
<div class="name">
<form>
<input type="text" placeholder="Email" required="">
</form>
</div>
<div class="button">
<form>
<input type="submit" value="Subscribe">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="blo-top1">
<div class="tech-btm">
<h4>Top stories of the week </h4>
<div class="blog-grids">
<div class="blog-grid-left">
<a href="singlepage.html"><img src="{{ asset('front_panel/assets/images/6.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<div class="blog-grid-right">

<h5><a href="singlepage.html">Pellentesque dui, non felis. Maecenas male</a> </h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grids">
<div class="blog-grid-left">
<a href="singlepage.html"><img src="{{ asset('front_panel/assets/images/7.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<div class="blog-grid-right">

<h5><a href="singlepage.html">Pellentesque dui, non felis. Maecenas male</a> </h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grids">
<div class="blog-grid-left">
<a href="singlepage.html"><img src="{{ asset('front_panel/assets/images/11.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<div class="blog-grid-right">

<h5><a href="singlepage.html">Pellentesque dui, non felis. Maecenas male</a> </h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grids">
<div class="blog-grid-left">
<a href="singlepage.html"><img src="{{ asset('front_panel/assets/images/9.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<div class="blog-grid-right">

<h5><a href="singlepage.html">Pellentesque dui, non felis. Maecenas male</a> </h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grids">
<div class="blog-grid-left">
<a href="singlepage.html"><img src="{{ asset('front_panel/assets/images/10.jpg') }}" class="img-responsive" alt=""/></a>
</div>
<div class="blog-grid-right">

<h5><a href="singlepage.html">Pellentesque dui, non felis. Maecenas male</a> </h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>

</div>

 

Then create a layout for master blade:

master.blade.php

<!DOCTYPE HTML>
<html>
@include('front.includes.head')
<body>
<!--start-main-->
@include('front.includes.header')
<!-- banner -->
@yield('content')
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-4 footer-left">
<h6>THIS LOOKS GREAT</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt consectetur adipisicing elit,</p>
</div>
<div class="col-md-4 footer-middle">
<h4>Twitter Feed</h4>
<div class="mid-btm">
<p>Consectetur adipisicing</p>
<p>Sed do eiusmod tempor</p>
<a href="http://eagle-i-tech.com/">http://eagle-i-tech.com/</a>
</div>

<p>Consectetur adipisicing</p>
<p>Sed do eiusmod tempor</p>
<a href="http://eagle-i-tech.com/">http://eagle-i-tech.com/</a>

</div>
<div class="col-md-4 footer-right">
<h4>Quick Links</h4>
<li><a href="#">Eiusmod tempor</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Adipisicing elit</a></li>
<li><a href="#">Eiusmod tempor</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Adipisicing elit</a></li>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- footer -->
<!-- footer-bottom -->
<div class="foot-nav">
<div class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="tech.html">Tech</a></li>
<li><a href="singlepage.html">Culture</a></li>
<li><a href="singlepage.html">Science</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="business.html">Business</a></li>
<li><a href="world.html">World</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<!-- footer-bottom -->
<div class="copyright">
<div class="container">
<p>© 2018 Eagle Eye Technology. All rights reserved | <a href="http://eagle-i-tech.com/">Eagle Eye Technolgy</a></p>
</div>
</div>

</body>
</html>

 

Controller for front-end

Create a directory for the front end(i.e Front)
Similar to the admin panel create a controller for the front-end
Final code for the front controller:

FrontBaseController.php

<?php
namespace App\Http\Controllers\Front;

use App\Http\Controllers\Controller;
use View;

class FrontBaseController extends Controller
{
protected function loadDataToView($view_path)
{
View::composer($view_path, function($view){

});
return $view_path;
}
}

 

HomeController.php

<?php
namespace App\Http\Controllers\Front;

use App\Models\News;

class HomeController extends FrontBaseController
{
public function index()
{
$data = [];
$data['news'] = News::select('title', 'slug', 'writer', 'short_des')
->get();
return view(parent::loadDataToView('front.home.index'), compact('data'));
}
}

 

NewsController.php

<?php
namespace App\Http\Controllers\Front;

use Illuminate\Http\Request;

class NewsController extends FrontBaseController
{
public function detail(Request $request, $slug)
{
}
}

 

HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}

/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('home');
}
}

Note:
Don’t forget to add the route path:

Route::get('news/{slug}', [ 'as'=> 'news.detail', 'uses' => 'Front\[email protected]']);
SEE ALL Add a note
YOU
Add your Comment
 

Advanced Course Search Widget

Popular Courses

Course Categories

© PHPhelp. 2002 - 2018 All rights reserved.
X