laravel frontend

We'll do the same for the frontend view files and associates as we did for the backend view files and associates. First, we'll move all the frontend view files to a new folder named frontend in resources/views/ directory and change their extension to .blade.php while the associated css, fonts and js files will be placed in a new folder named frontend in public directory.

FRONTCONTROLLER

We'll create a new controller named frontController where we'll add all the methods to return view files and the data from database.

php artisan make:controller frontController  

Now the frontController is created we can move the route to view the frontend index blade to the controller itself rather than keeping it in the web.php file.

public function index(){
  return view('frontend.index');
}  

Now, let's redefine the route.

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

Now, we need to relocate the links of all the frontend css file and the sources of all the frontend js files as we did for the dashboard view files. Don't worry about the images except logo as we'll retrieve them all from the database. For the logo image, we can define it's location as we did for the associated files.

<link rel="stylesheet" href="{{url('public/frontend/css/style.css')}}" type='text/css'>
<script type='text/javascript' src="{{url('public/frontend/js/jquery.js')}}"></script>  

MASTER LAYOUT

We'll create a master blade for frontend too and that'll reduce the need to add repetitive blocks of codes in each view pages and their methods in frontController for sections such as menus.

@yield('meta')
<title>Digital Printing Press</title>  

Since we've got meta title and description values in post table, we'll create a section to retrieve meta properties in the head section. We won't have any meta values for the index page, so, we'll add a default title that'll be displayed if there's no such values.

SHARED DATA IN VIEWS

view()->share allows us to share common data from database in each of the view files from a single method that'll be the magic method. Initially, we'll add the data from tbl_menus in this method. Before that, we'll need to add use DB; before the class block starts to be able to get connected with database.

public function __construct(){
  $menus = DB::table('tbl_menus')->where('status','=','on')->get();
  view()->share([
    'menus' => $menus,
  ]);
}  

Lets display it in the view file master layout then.

<ul>
  <li><a href="{{url('/')}}">Home</a></li>
  @foreach($menus as $menu)
    <li><a href="{{url('post')}}/{{$menu->slug}}">{{$menu->title}}</a></li>
  @endforeach
  <li><a href="{{url('contact-us')}}">Contact Us</a></li>
</ul>  

We'll keep the home title static that redirects us to the index page while all other titles will be retrieved from the database. We added the route for those titles as posts/slug as we can't pass the parameter in method without a name defined for the method while the slug will keep the url clean and defines the content to be displayed as well. We'll keep the contact-us page also static as it'll contain a form that can be filled up and submitted by visitors. Since, this form should be accessible to all visitors we won't process this data from adminController but from the frontController instead.

POST PAGE

Let's have a look at the method to display single page then. Since, we created posts to act as pages in this project where two posts won't have the same category, we'll retrieve the data using first() method otherwise we'd use the get() method and display the data in loop in the category page while single page would be required to display single data and the method of single page would use the first() method to display single data.

public function post($slug){
  $data = DB::table('tbl_posts')->where('category',$slug)->first();
  return view ('frontend.category',['data'=>$data]);
}  

Let's have a look at the post page then. That'll retrieve the slug from the url and display the content it belongs from database posts table.

@extends('frontend.master')

@section('meta')
<title>{{$data->meta_title}}</title>
<meta name="description" content="{{$data->metadescription}}">  
@stop

@section('content')
<div class="container">
  <h1>{{$data->title}}</h1>
  <img src="{{url('public/Uploads')}}/{{$data->image}}" width="100%"> 
  {!!$data->description!!}
</div>  
@stop  

Now the single post page is done, we can head back to our index page where we'll display some data from the posts table. We can add a few variables in the method index and display them as we want in the frontend.

Here, We'll display a little information from each posts data row in loop and add links to those pages too.

<div class="row">
  @foreach($posts as $post)
    <div class="col-sm-4">
      <h1><a href="{{url('posts')}}/{{$post->slug}}" >{{$post->title}}</a></h1>
      <a href="{{url('posts')}}/{{$post->slug}}"><img src="{{url('public/Uploads')}}/{{$post->image}}"></a>
      {!! $post->description !!}
      <a href="{{url('posts')}}/{{$post->slug}}">Read More...</a>                             
    </div>
  @endforeach  
</div>  

CONTACTS PAGE

Since this page is a static one, we'll define the route for it to point to the frontController that'll return the view file.

// route from web.php 
Route::get('contact-us','frontController@contacts');

// method from frontController.php
public function contacts(){
  return view ('frontend.contacts');
}

---

0 Like 0 Dislike 0 Comment Share Tweet