Laravel Theme

By | October 12th 2018 04:07:10 PM | viewed 87 times

How to create laravel theme?

Step-1:First create master layout

Add the following code in the location resources/views/layouts/admin.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">
    <link rel="shortcut icon" href="{{asset('public/images/favicon.ico')}}" type="image/x-icon">
	<title>Admin Dashboard</title>

        <link href="{{URL::asset('public/bootstrap-3.3.7/dist/css/bootstrap.css')}}" rel="stylesheet" type="text/css" >
        <link href="{{asset('public/css/admin.css')}}" rel="stylesheet" type="text/css" >

        <link href="{{asset('public/font-awesome-4.7.0/css/font-awesome.css')}}" rel="stylesheet" type="text/css" >

        <link href="{{asset('public/css/jquery.smartmenus.bootstrap.css')}}" rel="stylesheet" type="text/css" >

        <script src="{{asset('public/js/jquery-3.2.1.js')}}"></script>
	    <script src="{{asset('public/bootstrap-3.3.7/dist/js/bootstrap.js')}}"> </script>

        <script src="{{asset('public/js/jquery.smartmenus.js')}}"> </script> 
        <script src="{{asset('public/js/jquery.smartmenus.bootstrap.js')}}"> </script>

         <script src="{{asset('public/js/ukm_admin.js')}}"> </script>

         <link href="{{asset('public/css/zebra_front.css')}}" rel="stylesheet" type="text/css" /> 
         <script src="{{asset('public/js/zebra_datepicker.js')}}"></script>
         
         <script src="{{ asset('public/vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
         <script src="{{ asset('public/vendor/unisharp/laravel-ckeditor/adapters/jquery.js') }}"></script>  
  
<script>
            
        jQuery(window).load(function() {
            jQuery("#loading").fadeOut("slow");

        });

    jQuery(document).ready(function() {

        jQuery('.datePic').Zebra_DatePicker({
            format: 'd/m/Y'

        });

    });

</script>
           
 </head>

<body class="bg">
 <div id="loading">
    <img src="{{ asset('public/images/loading.gif')}}"/>
</div>
 
    <div class="workingArea">
        
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 cls paddingLeftRightzero">
            <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 paddingLeftRightzero" align="center">
                <div class="img-responsive">
                    <a href="{{URL::to('/')}}">
					<img class="logo img-responsive" src="{{ asset('public/images/uklogo.png') }}">
					</a>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 paddingLeftRightzero mediaClear">
                        @include('admin_template.admin_banner')
            </div>
                       
        </div>

         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 cls paddingLeftRightzero">
                     @include('admin_template.admin_top_menu')
         </div>
        
      
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 cls paddingLeftRightzero">              
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 paddingLeftRightzero">
                    @yield('content')
                </div>                            
          </div>
    </div>
   
    <div class="footerWorkingArea">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 cls paddingLeftRightzero ">
                      @include('public_template.footer')
        </div>  
    </div>
   
</body>
</html>

Step-2:Create template folder

Add the following code in the location resources/views/admin_template/admin_banner.blade.php

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mediaClear">
    <ul class="nav navbar-nav navbar-right">
					@if (Auth::guest())
                                         
						<li><a  href="{{ route('auth/login') }}"><span class="glyphicon glyphicon-log-in" </span> Log in</a></li>
						<li><a href="{{ route('auth/regi') }}"><span class="glyphicon glyphicon-user"></span> Sign up<span></span></a></li>
                                                
                                                 
					@else
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Welcome {{ Auth::user()->user_name }} <span class="caret"></a>
								<ul class="dropdown-menu" role="menu">
										<li><a href="{{route('auth/logout') }}"><span class="glyphicon glyphicon-log-out">  Log out<span<>/a></li>
										<li><a href="{{route('admin/dashboard') }}"><span class="glyphicon glyphicon-dashboard"></span>  My Account</a></li>
								</ul>
						</li>
					@endif
   </ul>
</div>

Add the following code in the location resources/views/admin_template/admin_top_menu.blade.php

<div class="topmenu">
    <div class="navbar navbar-default navbar-static-top navbarMarginBottomOmmit" role="navigation">
  <div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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 class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
           add menu  here
      </ul> 
    </div>
  </div>
</div>
</div>

Add the following code in the location resources/views/admin_template/footer.blade.php

<div class="footer fbg">
    <p>
     <a href="#">Copyright 2018</a> by modak. All Rights Reserved.
     <a href="#">| Powered by modak</a>
    </p>
</div>

Step-3:Use form component to user buit-in form facility

Run the following command to add script in composer.js file

  d/xampp/htdocs/projectname>composer require "laravelcollective/html":"^5.*"
 

Or manually add the following code in composer.js file

  "require": {
       "php": ">=5.5.9",
	   "laravel/framework": "5.2.*",
       "laravelcollective/html": "5.*"
	   },
 

Then run the command

   d/xampp/htdocs/projectname>composer update
  

Then add the following code in the location config/app.php

  'providers'=> ['Collective\Html\HtmlServiceProvider',],

   'aliases'=> [
                'Form'=> 'Collective\Html\FormFacade',
                'Html'=> ‘Collective\Html\HtmlFacade’,
				],

 

Step-4:Create content files

Add the following code in the location resources/views/auth/user_create.blade.php

@extends('layouts.admin')
@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
     <div class="panel panel-success">
              <div class="panel-heading">New User</div>
              
              <div class="panel-body">
                   <form class="form-horizontal" role="form" method="POST" action="{{route('user/store/ct/uk',['ct'=>csrf_token()])}}">
						<input type="hidden" name="_token" value="{{ csrf_token()}}">

						<div class="form-group col-md-4">
							<label>First Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z\s]{0,20}" class="form-control" name="first_name" value="{{ old('first_name') }}">
							</div>
						</div>
                        <div class="form-group col-md-4">
							<label>Last Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z\s]{0,20}" class="form-control" name="last_name" value="{{ old('last_name') }}">
							</div>
						</div>
                                                
                        <div class="form-group col-md-4">
							<label>User Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z0-9_-]{5,20}" class="form-control" name="user_name" value="{{ old('user_name') }}">
							</div>
						</div>

						<div class="form-group col-md-4">
							<label>E-Mail</label>
							<div>
								<input type="email" class="form-control" name="email" value="{{ old('email') }}">
							</div>
						</div>
                                                
                        <div class="form-group col-md-4">
							<label>Mobile</label>
							<div>
								<input type="text" pattern="^[(017)|(018)|(016)||(015)]{3}[0-9]{8}" required="required"  class="form-control" name="mobile" value="{{ old('mobile') }}">
							</div>
						</div>
                                                
                        <div class="form-group col-md-4">
							<label>Password</label>
							<div>
								<input type="password" required="required"  class="form-control" name="password">
							</div>
						</div>

						<div class="form-group col-md-4">
							<label>Confirm Password</label>
							<div>
								<input type="password" required="required"  class="form-control" name="password_confirmation">
							</div>
						</div>

						

						<div class="form-group">
							<div class="col-md-12" align="center">
								<button type="submit" class="btn btn-primary">
									Register
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
    
@endsection

Add the following code in the location resources/views/auth/user_index.blade.php

@extends('layouts.admin')

@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
    
			
            <div class="panel panel-success">
              <div class="panel-heading">
                  User List
                  <ul class="listOnTitle pull-right">
                      <li><a href="{{route('user/addUserRole')}}" class="btn pull-right btn-xs btn-warning">user role</a></li>
                      <li><a href="{{route('user/create')}}" class="btn pull-right btn-xs btn-warning">user</a></li>
                  </ul>
              </div>
              <div class="panel-body">
                  
                  <div class="search">
                      
                       <div class="panel panel-info">                         
                            <div class="panel-body">
                                
                              <form action="{{URL::to('user/index')}}" method="GET">
                                    <div class="form-group col-md-4">
                                         <label>User Name</label>
                                          <div>
                                          
                                           <input type="text"  class="form-control"   name="un" value="{{ old('un') }}">

                                          </div>
                                   </div>

                                  <div class="form-group col-md-4">
                                         <label>Email</label>
                                         <div>
                                         <input type="text"  class="form-control"   name="em" value="{{ old('em') }}">
                                         </div>
                                   </div>
                                  
                                   <div class="form-group col-md-4">
                                         <label>Is Published</label>
                                         <div>
                                         {!! Form::select('ac',[null=>'Select One',1=>'Published',0=>'Un Published'],$ac,['class'=>'form_control']) !!}
                                         </div>
                                   </div>

                                    <div class="form-group">
                                                  <div class="col-md-12" align="center">
                                                          <button type="submit" class="btn btn-primary">
                                                                  Search
                                                          </button>
                                                  </div>
                                    </div>
                                </form> 
                                
                            </div>
                         </div>
                      
                  </div>
                  
                  
                  <div class="table-responsive">  
                      
                            <table class="table table-hover table-bordered">
                              <thead>
                                <tr>
                                  <th>Sl No.</th>
                                  <th>Action</th>
                                  <th>First Name</th>
                                  <th>Last Name</th>
                                  <th>User Name</th>
                                  <th>Email</th>
                                  <th>Is Active</th>
                                  <th>Role</th>
                                  <th>Create Date</th>
                                  <th>Update Date</th>
                                  <th>Action</th>
                                </tr>
                              </thead>
                              <tbody>
                                  <?php $i=0;?>
                                 @foreach ($users as $key => $post)
                                <tr>
                                   <td>{{$i+1}}</td>
                                   <td>
                                       <ul class="list">
                                           <li><a href="{{route('user/edit/id',['id'=>$post->id])}}" class="btn btn-xs btn-primary"> </a></li>
                            
                                            <li><a href="{{route('user/delete/id',['id'=>$post->id])}}" class="btn btn-xs btn-danger"></a></li>
                                       </ul>
                                   </td>
                                  <td>{{$post->first_name}}</td>
                                  <td>{{$post->last_name}}</td>
                                  <td>{{$post->user_name}}</td>
                                  <td>{{$post->email}}</td>
                                  <td>
                                                         
                                      <input type="hidden" name="userId" value="{{$post->id}}"/>
                                      <input type="text" class="orderSize" name="active" value="{{$post->active}}"/>
                                      <a href="#" return="false" onclick="updateUserActivity(jQuery('[name=userId]').val(),jQuery('[name=active]').val())"></a>
                                 </td>
                                   <td>
                                       @foreach($post->roles()->get() as $role)
                                       {{$role->role_name}}
                                       @endforeach
                                   </td>
                                  <td>
                                      @if($post->create_date)
                                      {{\Carbon\Carbon::parse($post->create_date)->format('d/m/Y h:i A')}}
                                      @endif
                                  </td>
                                  <td>
                                      @if($post->update_date)
                                      {{\Carbon\Carbon::parse($post->update_date)->format('d/m/Y h:i A')}}
                                      @endif
                                 </td>
                                  
                                   <td>
                                        <ul class="list">
                                           <li><a href="{{route('user/edit/id',['id'=>$post->id])}}" class="btn btn-xs btn-primary"> </a></li>
                            
                                            <li><a href="{{route('user/delete/id',['id'=>$post->id])}}" class="btn btn-xs btn-danger"></a></li>
                                       </ul>
                                      
                                    </td>
                                </tr>
                                  <?php $i++; ?>
                                @endforeach
                                
                              </tbody>
                            </table>
                          </div>
                      <div>show: {{$users->count()}} of total {{$totalCount}}</div>
					  
							  {!! $users->appends(Input::except('page'))->render() !!}
							  
              </div>
            </div>
		
	</div>
</div>
   </div>
@endsection

Add the following code in the location resources/views/auth/user_edit.blade.php

@extends('layouts.admin')
@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
     <div class="panel panel-success">
              <div class="panel-heading">
			    Update User
                  <a href="{{route('user/index')}}" class="btn pull-right btn-xs btn-warning">List</a>
			  </div>
              
              <div class="panel-body">
                   <form class="form-horizontal" role="form" method="POST" action="{{route('user/update/id',['id'=>$id])}}">
						<input type="hidden" name="_token" value="{{ csrf_token()}}">

						<div class="form-group col-md-4">
							<label>First Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z\s]{0,20}" class="form-control" name="first_name" value="{{ $users->first_name }}">
							</div>
						</div>
                        <div class="form-group col-md-4">
							<label>Last Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z\s]{0,20}" class="form-control" name="last_name" value="{{ $users->last_name }}">
							</div>
						</div>
                                                
                        <div class="form-group col-md-4">
							<label>User Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z0-9_-]{5,20}" class="form-control" name="user_name" value="{{ $users->user_name }}">
							</div>
						</div>

						<div class="form-group col-md-4">
							<label>E-Mail</label>
							<div>
								<input type="email" class="form-control" name="email" value="{{ $users->email }}">
							</div>
						</div>
                                                
                        <div class="form-group col-md-4">
							<label>Mobile</label>
							<div>
								<input type="text" pattern="^[(017)|(018)|(016)||(015)]{3}[0-9]{8}" required="required"  class="form-control" name="mobile" value="{{ $users->mobile }}">
							</div>
						</div>
                                                
                        

						

						<div class="form-group">
							<div class="col-md-12" align="center">
								<button type="submit" class="btn btn-primary">
									Update
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
    
@endsection

Add the following code in the location resources/views/auth/role_create.blade.php


@extends('layouts.admin')
@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
     <div class="panel panel-success">
        <div class="panel-heading">New Role</div>
           <div class="panel-body">
              <form class="form-horizontal" role="form" method="POST" action="{{route('role/store/ct/uk',['ct'=>csrf_token()])}}">
						<input type="hidden" name="_token" value="{{ csrf_token()}}">

						<div class="form-group col-md-4">
							<label>Role Name</label>
							<div>
								<input type="text" pattern="^[A-Za-z_-]{0,20}" class="form-control" name="role_name" value="{{ old('role_name') }}">
							</div>
						</div>
                                                
						

						<div class="form-group">
							<div class="col-md-12" align="center">
								<button type="submit" class="btn btn-primary">
									Submit
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
    
@endsection

Add the following code in the location resources/views/auth/role_index.blade.php

@extends('layouts.admin')
@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
		
			
            <div class="panel panel-success">
              <div class="panel-heading">Role List
                  <a href="{{route('role/create')}}" class="btn pull-right btn-xs btn-warning">New</a>
              </div>
              <div class="panel-body">
                  <div class="table-responsive">
                      
                            <table class="table table-hover">
                              <thead>
                                <tr>
                                  <th>Sl No.</th>
                                 <th>Role Name</th>
                                  
                                  <th>Action</th>
                                </tr>
                               </thead >
                               <tbody >
                                   <?php $i=0;? >
                                 @foreach ($roles as $key => $post)
                                 <tr >
                                    <td >{{$i+1}} </td >
                                  <td >{{$post->role_name}}                          
                                  <td >   
                                       <a href="{{route('role/delete/id',['id'=>$post->id])}}" class="btn btn-xs btn-danger">Delete</a>
                                    </td >
                               </tr >
                                  <?php $i++; ?>
                                @endforeach
                                
                              </tbody>
                            </table>
                          </div>
                      <div>show: {{$roles->count()}} of total {{$totalCount}}</div>
							 {!! $roles->appends(Input::except('page'))->render() !!}
              </div>
            </div>
		
	</div>
</div>
</div>
@endsection

Add the following code in the location resources/views/auth/user_role.blade.php

@extends('layouts.admin')
@section('content')
<div class="content contentPadding contentBg">
<div class="container-fluid">
	<div class="row">

                                @if(session('success'))
                                <div class="alert alert-success alert-dismissable">
                                 <p>{{{ session('success') }}}</p>
                                </div>
                                @endif
                                @if(session('fail'))
                                <div class="alert alert-success alert-dismissable">    
                                  <p>{{{ session('fail') }}}</p>
                                 </div>
                                @endif
                               
				
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
     <div class="panel panel-success">
              <div class="panel-heading">New User Role</div>
              
              <div class="panel-body">
                   <form class="form-horizontal" role="form" method="POST" action="{{route('user/userRoleStore')}}">
						<input type="hidden" name="_token" value="{{ csrf_token()}}">

						<div class="form-group col-md-4">
							 {!!  Form::label('cat','User:'); !!} 
							<div>
								 {!! Form::select('user_id',($usersList), null, ['class' => 'form-control margin']) !!}
							</div>
						</div>
                           <div class="form-group col-md-4">
							<label>Last Role</label>
							<div>                                                              
                                {!! Form::select('role_id[]', ($rolesList),  null, ['multiple'=>true,'class' => 'form-control margin']) !!}                                                                                          
							</div>
						</div>                                               
						<div class="form-group">
							<div class="col-md-12" align="center">
								<button type="submit" class="btn btn-primary">
									Add
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
    
@endsection

bONEandALL