background img
Oca 27, 2018
518 Views
0 Yorumlar
0 0

PHP Laravel 5.5 – Bootstrap Admin Tema Karıştırma örneği

Yazar :

Bugün Bu yazıda, size sıfırdan Laravel 5 uygulamasında bootstrap admin şablonunu nasıl yükleyeceğinizi paylaşacağım. Bu örnekte, Laravel’de 5.0, 5.1, 5.2, 5.3 ve 5.4 gibi farklı versiyonların nasıl yükleneceğini öğrenebilirsiniz.

Bu örnekte SB Yönetici temasını laravel uygulamasına entegre edeceğiz. Bu örnek sayesinde diğer bootstrap temalarını laravel uygulamasına nasıl entegre edebileceğinizi kolayca anlayabilirsiniz. İşte çok temel bir örnek form başlangıç ​​ve adım adım yönetim temasının entegre edilmesi. Yönetici teması, herhangi bir web uygulaması için çok temel bir gerekliliktir. Yönetici paneli olmadan web sitemizi yönetemiyoruz.

Yani, bu örnekte temanın entegrasyonundan sonra iki sayfa oluşturacağım. Bu iki sayfada entegre temamızı kullanacağız. bu sayfa şu şekilde olacaktır:

1) my-home

2) my-users

Tamam, bu örneği tamamladıktan sonra, ana sayfanın düzenini aşağıdaki ekran görüntüsü gibi görürsünüz.

1. Adım: Laravel’in Yeni Uygulamasını Yükleyin

biz sıfırdan gideceğiz, bu yüzden yeni komutu kullanarak Laravel uygulamasını almamız gerekiyor, terminalini VEYA komut istemini aç ve şu komutu çalıştır:

composer create-project --prefer-dist laravel/laravel blog

 

Bu adımda, buradan sb admin temasını indireceğiz: Download SB Admin Tema . İndirdikten sonra ayıklayın.

Tamam şimdi js, css ve ikonları alıp laravel uygulamamıza koymalıyız. Bu yüzden iki noktayı takip et.

Nokta 1: Laravel uygulamasının public klasöründe yeni theme klasörü oluşturun .

Nokta 2: İndirdiğiniz Dosyanın içindeki  dist ve vendor klasörlerini kopyalayıp “theme” dizinine koyun.

 

3. Adım: Rota Oluşturun

İlk önce sıfırdan bir örnek oluşturacağız. Önce, “my-home” ve “my-users” olmak üzere iki yol daha ekledik. Dolayısıyla, rota dosyanızı açın ve feryat rota ekleyin:

routes/web.php

Route::get('my-home', 'HomeController@myHome');

Route::get('my-users', 'HomeController@myUsers');

 

Adım 4: Kontrol Cihazı Ekle

Bu adımda, yeni HomeController oluşturacak ve ön panel sayfası ve kullanıcılarım sayfası için iki yöntem ekleyeceğiz. Dolayısıyla, HomeController programımıza aşağıdaki kodu koymamız gerekiyor:

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Item;

class HomeController extends Controller

{

/**

* Create a new controller instance.

*

* @return void

*/

public function __construct()

{

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function myHome()

{

return view('myHome');

}

/**

* Show the my users page.

*

* @return \Illuminate\Http\Response

*/

public function myUsers()

{

return view('myUsers');

}

}

 

 

5. Adım: Tema Blade Dosyalarını Ayarlayın

Bu adımda, tema bıçağı dosyalarını kurmamız gerekiyor. SB Yönetici için üç dosya yarattım. Başka bir temanız varsa ve o zaman büyük dosyaları yönetiyorsanız, daha fazla dosya var. İlk olarak , görünümler klasörü üzerinde tema klasörü oluşturacağız . Tema klasöründe aşağıdaki gibi üç dosya oluşturacağız:

1) default.blade.php

2) header.blade.php

3) sidebar.blade.php

Tamam, şimdi bu üç dosya için kod eklemeliyiz. aşağıdaki listede gösterildiği gibi:

resources/views/theme/default.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">

<meta name="description" content="">

<meta name="author" content="">

<title>SB Admin 2 - Bootstrap Admin Theme</title>

<!-- Bootstrap Core CSS -->

<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">

<!-- MetisMenu CSS -->

<link href="{!! asset('theme/vendor/metisMenu/metisMenu.min.css') !!}" rel="stylesheet">

<!-- Custom CSS -->

<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">

<!-- Morris Charts CSS -->

<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">

<!-- Custom Fonts -->

<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">

</head>

<body>

<div id="wrapper">

<!-- Navigation -->

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

@include('theme.header')

@include('theme.sidebar')

</nav>

<div id="page-wrapper">

@yield('content')

</div>

<!-- /#page-wrapper -->

</div>

<!-- /#wrapper -->

<!-- jQuery -->

<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>

<!-- Bootstrap Core JavaScript -->

<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>

<!-- Metis Menu Plugin JavaScript -->

<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>

<!-- Morris Charts JavaScript -->

<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>

<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>

<script src="{!! asset('theme/data/morris-data.js') !!}"></script>

<!-- Custom Theme JavaScript -->

<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>

</body>

</html>

 

 

resources/views/theme/header.blade.php

<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>

<a class="navbar-brand" href="index.html">SB Admin v2.0</a>

</div>

<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-messages">

<li>

<a href="#">

<div>

<strong>John Smith</strong>

<span class="pull-right text-muted">

<em>Yesterday</em>

</span>

</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>Read All Messages</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-messages -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-tasks">

<li>

<a href="#">

<div>

<p>

<strong>Task 4</strong>

<span class="pull-right text-muted">80% Complete</span>

</p>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

<span class="sr-only">80% Complete (danger)</span>

</div>

</div>

</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>See All Tasks</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-tasks -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-alerts">

<li>

<a href="#">

<div>

<i class="fa fa-upload fa-fw"></i> Server Rebooted

<span class="pull-right text-muted small">4 minutes ago</span>

</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>See All Alerts</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-alerts -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-user">

<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>

</li>

<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>

</li>

<li class="divider"></li>

<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>

</li>

</ul>

<!-- /.dropdown-user -->

</li>

<!-- /.dropdown -->

</ul>

<!-- /.navbar-top-links -->

 

 

resources/views/theme/sidebar.blade.php

<div class="navbar-default sidebar" role="navigation">

<div class="sidebar-nav navbar-collapse">

<ul class="nav" id="side-menu">

<li class="sidebar-search">

<div class="input-group custom-search-form">

<input type="text" class="form-control" placeholder="Search...">

<span class="input-group-btn">

<button class="btn btn-default" type="button">

<i class="fa fa-search"></i>

</button>

</span>

</div>

<!-- /input-group -->

</li>

<li>

<a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

</li>

<li>

<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="flot.html">Flot Charts</a>

</li>

<li>

<a href="morris.html">Morris.js Charts</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

<li>

<a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>

</li>

<li>

<a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>

</li>

<li>

<a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="panels-wells.html">Panels and Wells</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

<li>

<a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="blank.html">Blank Page</a>

</li>

<li>

<a href="login.html">Login Page</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

</ul>

</div>

<!-- /.sidebar-collapse -->

</div>

<!-- /.navbar-static-side -->

 

 

6. Adım: Temayı Kullanın

Bu adımda, entegre tema düzenimizi kullanarak iki yeni blade dosyası oluşturacağız. Evet, ev için iki rota ekledik ve kullanıcılar için bir tane daha ekledik. Bu yüzden iki dosya oluşturalım ve entegre temayı nasıl kullanacağımıza göz atalım.

resources/views/myHome.blade.php

@extends('theme.default')

@section('content')

<div class="row">

<div class="col-lg-12">

<h1 class="page-header">Dashboard</h1>

</div>

<!-- /.col-lg-12 -->

</div>

<!-- /.row -->

<div class="row">

<div class="col-lg-3 col-md-6">

<div class="panel panel-primary">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-comments fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">26</div>

<div>New Comments!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-green">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-tasks fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">12</div>

<div>New Tasks!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-yellow">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-shopping-cart fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">124</div>

<div>New Orders!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-red">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-support fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">13</div>

<div>Support Tickets!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

</div>

@endsection

 

resources/views/myUsers.blade.php

@extends('theme.default')

@section('content')

<div class="row">

<div class="col-lg-12">

<h1 class="page-header">My Users</h1>

</div>

<!-- /.col-lg-12 -->

</div>

<!-- /.row -->

<table class="table table-striped table-bordered table-hover">

<thead>

<tr>

<th>#</th>

<th>First Name</th>

<th>Last Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Hardik</td>

<td>Savani</td>

<td>@mdo</td>

</tr>

<tr>

<td>2</td>

<td>Kashiyani</td>

<td>Vimal</td>

<td>@fat</td>

</tr>

<tr>

<td>3</td>

<td>Harshad</td>

<td>Pathak</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

@endsection

 

Tamam, diğer dosyalar olarak entegre temayı kullandık ve onu tekrar tekrar diğer sayfalarla nasıl kullanabileceğimizi anlayabiliyorsunuz.

Şimdi, örneğimizi çalıştırmaya hazırız, böylece hızlı çalıştırma için komutu çalıştıralım:

php artisan serve

 

Artık tarayıcınızda fotokopi sayfasını açabilirsiniz:

http://localhost:8000/my-home

 

Umarım en iyi çözümü bulmuşsundur ….

Son Makaleler

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

The maximum upload file size: 50 MB. You can upload: image, audio, video, document, text, other. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here