PHP의 Laravel 프레임워크에서 AdminLTE 템플릿을 사용하여 웹사이트 백엔드 인터페이스

집

백엔드 개발

PHP 튜토리얼

PHP의 Laravel 프레임워크에서 AdminLTE 템플릿을 사용하여 웹사이트 백엔드 인터페이스_php 기술 작성

PHP中文网

May 16, 2016 pm 07:56 PM

adminltelaravelphp

AdminLTE는 Bootstrap 3.x를 기반으로 하는 무료 고급 관리자 제어판 테마로, 완벽하게 반응하는 관리 기능을 갖추고 있으며 소형 모바일 장치에서 대형 데스크톱 컴퓨터에 이르기까지 다양한 화면 해상도에 적합합니다.

AdminLTE 기능:

완전 반응형
정렬 가능한 대시보드
플러그인 18개와 사용자 정의 플러그인 3개
가벼움과 빠름
대부분의 호환 주요 브라우저와 호환
Glyphicons, Fontawesome 및 아이콘 완벽 지원

사용하는 도구

Laravel
AdminLTE 2.3.2
Bower
작곡가

새로운 Laravel을 다운로드하세요
확실하지 않다면 공식 웹사이트에서 문서 링크
를 확인하세요. 명령줄을 직접 사용할 수 있습니다.

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

이 명령을 사용하여 myapp Laravel 프로젝트라는 새 이름을 만듭니다. 성공하면 아래 그림을 볼 수 있습니다.

PHP의 Laravel 프레임워크에서 AdminLTE 템플릿을 사용하여 웹사이트 백엔드 인터페이스_php 기술 작성

Bower를 통해 AdminLTE 다운로드
myapp/공용 폴더 입력

 cd myapp/public

이 폴더에서 다음 명령을 실행하세요.

 bower install admin-lte

완료되면 추가 bower_componets 폴더를 찾을 수 있으며 이 폴더에는 AdminLTE

AdminLTE starter.html을 블레이드 템플릿으로 변환
이 표시됩니다. Laravel은 여기에서 좋은 템플릿 엔진인 Blade를 사용합니다. Blade를 최대한 활용하려면 몇 가지 일반적인 HTML 시작 페이지를 Blade 템플릿에 적용하려면 먼저 resources/views 폴더에 뷰를 생성하고 이름을 지정해야 합니다. admin_template.blade.php이고 이 페이지에 해당하는 경로를 만듭니다. 아래와 같이

 Route::get(&#39;admin&#39;, function () {
  return view(&#39;admin_template&#39;);
 });

을 생성한 후 bower_comComponents/admin-lte를 변경합니다. /starter.html의 콘텐츠를 뷰 템플릿에 추가하고 관련 링크를 AdminLTE의 해당 디렉토리로 지정합니다. 다음은 나의 예비 설정입니다.

<script src="{{ asset("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")}}"></script>
<!-- Bootstrap 3.3.5 -->
<script src="{{ asset("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js")}}"></script>
<!-- AdminLTE App -->
<script src="{{ asset("/bower_components/AdminLTE/dist/js/app.min.js")}}"></script>

이와 마찬가지로 CSS 관련 링크도 변경합니다. js가 해당 디렉터리를 가리키도록 한 후 localhost:8000/admin을 통해 페이지 변경 사항을 확인합니다. 이때 페이지는 다음과 같습니다.

PHP의 Laravel 프레임워크에서 AdminLTE 템플릿을 사용하여 웹사이트 백엔드 인터페이스_php 기술 작성

Now Now. AdminLTE를 사용할 수 있는 모든 리소스가 있으므로 이 템플릿을 sidebar.blade.php, header.blade.php 및 footer의 세 가지 파일로 분리하겠습니다. >이 세 파일의 내용은 각각 admin_template.blade.php 헤더 부분, 옆 부분, 바닥글 부분입니다. 이 세 부분을 잘라내어 순서대로 세 개의 파일에 넣습니다.

마지막 작업이제 템플릿을 개별화했으므로 초기 admin_template.blade.php
템플릿을 설정해야 합니다.

<!DOCTYPE html>
<html>
head>
<meta charset="UTF-8">
<title>{{ $page_title or "AdminLTE Dashboard" }}</title>
<meta content=&#39;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&#39; name=&#39;viewport&#39;>
<!-- Bootstrap 3.3.2 -->
<link href="{{ asset("/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" 
type="text/css" />
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" 
type="text/css" />
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" 
type="text/css" />
<!-- Theme style -->
<link href="{{ asset("/bower_components/AdminLTE/dist/css/AdminLTE.min.css")}}" rel="stylesheet" 
type="text/css" />
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  page. However, you can choose any other skin. Make sure you
  apply the skin class to the body tag so the changes take effect.
-->
<link href="{{ asset("/bower_components/AdminLTE/dist/css/skins/skin-blue.min.css")}}" rel="stylesheet" 
type="text/css" />
 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
 
<!-- Header -->
@include(&#39;header&#39;)
 
<!-- Sidebar -->
@include(&#39;sidebar&#39;)
 
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
 <!-- Content Header (Page header) -->
 <section class="content-header">
  <h1>
   {{ $page_title or "Page Title" }}
   <small>{{ $page_description or null }}</small>
  </h1>
  <!-- You can dynamically generate breadcrumbs here -->
  <ol class="breadcrumb">
   <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
   <li class="active">Here</li>
  </ol>
 </section>
 
 <!-- Main content -->
 <section class="content">
  <!-- Your Page Content Here -->
  @yield(&#39;content&#39;)
 </section><!-- /.content -->
</div><!-- /.content-wrapper -->
 
<!-- Footer -->
@include(&#39;footer&#39;)
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
 <!-- Home tab content -->
 <div class="tab-pane active" id="control-sidebar-home-tab">
 <h3 id="Recent-nbsp-Activity">Recent Activity</h3>
 <ul class="control-sidebar-menu">
  <li>
  <a href="javascript::;">
   <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 
   <div class="menu-info">
   <h4 id="Langdon-s-nbsp-Birthday">Langdon&#39;s Birthday</h4>
 
   <p>Will be 23 on April 24th</p>
   </div>
  </a>
  </li>
 </ul>
 <!-- /.control-sidebar-menu -->
 
 <h3 id="Tasks-nbsp-Progress">Tasks Progress</h3>
 <ul class="control-sidebar-menu">
  <li>
  <a href="javascript::;">
   <h4 class="control-sidebar-subheading">
   Custom Template Design
   <span class="label label-danger pull-right">70%</span>
   </h4>
 
   <div class="progress progress-xxs">
   <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
   </div>
  </a>
  </li>
 </ul>
 <!-- /.control-sidebar-menu -->
 
 </div>
 <!-- /.tab-pane -->
 <!-- Stats tab content -->
 <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 <!-- /.tab-pane -->
 <!-- Settings tab content -->
 <div class="tab-pane" id="control-sidebar-settings-tab">
 <form method="post">
  <h3 id="General-nbsp-Settings">General Settings</h3>
 
  <div class="form-group">
  <label class="control-sidebar-subheading">
   Report panel usage
   <input type="checkbox" class="pull-right" checked>
  </label>
 
  <p>
   Some information about this general settings option
  </p>
  </div>
  <!-- /.form-group -->
 </form>
 </div>
 <!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar&#39;s background. This div must be placed
 immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
 
<!-- REQUIRED JS SCRIPTS -->
 
<!-- jQuery 2.1.3 -->
<script src="{{ asset ("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.3.min.js") }}"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="{{ asset ("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js") }}" 
type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="{{ asset ("/bower_components/AdminLTE/dist/js/app.min.js") }}" type="text/javascript">
</script>
 
<!-- Optionally, you can add Slimscroll and FastClick plugins.
 Both of these plugins are recommended to enhance the
 user experience -->
</body>
</html>

위 코드에서 기본 콘텐츠가 포함된 contentn을 추가하고 페이지를 추가했습니다. 다른 페이지의 제목을 다음으로 이름을 바꿉니다. Dashboard.blade.php 이제 템플릿을 사용할 준비가 되었습니다.

테스트 페이지

이전에 수행한 작업을 확인하기 위해 간단한 페이지를 생성하겠습니다.

1. test.blade.php 생성

@extends(&#39;dashboard&#39;)
@section(&#39;content&#39;)
<div class=&#39;row&#39;>
 <div class=&#39;col-md-6&#39;>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 id="Randomly-nbsp-Generated-nbsp-Tasks">Randomly Generated Tasks</h3>
    <div class="box-tools pull-right">
     <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
     <i class="fa fa-minus"></i></button>
     <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
     <i class="fa fa-times"></i></button>
    </div>
   </div>
   <div class="box-body">
    @foreach($tasks as $task)
     <h5>
      {{ $task[&#39;name&#39;] }}
      <small class="label label-{{$task[&#39;color&#39;]}} pull-right">{{$task[&#39;progress&#39;]}}%</small>
     </h5>
     <div class="progress progress-xxs">
      <div class="progress-bar progress-bar-{{$task[&#39;color&#39;]}}" style="width: {{$task[&#39;progress&#39;]}}%">
      </div>
     </div>
    @endforeach
 
   </div><!-- /.box-body -->
   <div class="box-footer">
    <form action=&#39;#&#39;>
     <input type=&#39;text&#39; placeholder=&#39;New task&#39; class=&#39;form-control input-sm&#39; />
    </form>
   </div><!-- /.box-footer-->
  </div><!-- /.box -->
 </div><!-- /.col -->
 <div class=&#39;col-md-6&#39;>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 id="Second-nbsp-Box">Second Box</h3>
    <div class="box-tools pull-right">
     <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
     <i class="fa fa-minus"></i></button>
     <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
     <i class="fa fa-times"></i></button>
    </div>
   </div>
   <div class="box-body">
    A separate section to add any kind of widget. Feel free
    to explore all of AdminLTE widgets by visiting the demo page
    on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>.
   </div><!-- /.box-body -->
  </div><!-- /.box -->
 </div><!-- /.col -->
 
</div><!-- /.row -->
@endsection

2. TestController.php

php artisan make:controller TestController --plain

다음은 이 컨트롤러의 코드 부분입니다.

<?php
 
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
 use App\Http\Requests;
 use App\Http\Controllers\Controller;
 
 class TestController extends Controller
 {
  public function index() {
  $data[&#39;tasks&#39;] = [
    [
     &#39;name&#39; => &#39;Design New Dashboard&#39;,
     &#39;progress&#39; => &#39;87&#39;,
     &#39;color&#39; => &#39;danger&#39;
    ],
    [
     &#39;name&#39; => &#39;Create Home Page&#39;,
     &#39;progress&#39; => &#39;76&#39;,
     &#39;color&#39; => &#39;warning&#39;
    ],
    [
     &#39;name&#39; => &#39;Some Other Task&#39;,
     &#39;progress&#39; => &#39;32&#39;,
     &#39;color&#39; => &#39;success&#39;
    ],
    [
     &#39;name&#39; => &#39;Start Building Website&#39;,
     &#39;progress&#39; => &#39;56&#39;,
     &#39;color&#39; => &#39;info&#39;
    ],
    [
     &#39;name&#39; => &#39;Develop an Awesome Algorithm&#39;,
     &#39;progress&#39; => &#39;10&#39;,
     &#39;color&#39; => &#39;success&#39;
    ]
  ];
  return view(&#39;test&#39;)->with($data);
 }
 
}

Route::get(&#39;test&#39;, &#39;TestController@index&#39;);

4. 해당 페이지를 열어보시면 아래와 같습니다.

PHP의 Laravel 프레임워크에서 AdminLTE 템플릿을 사용하여 웹사이트 백엔드 인터페이스_php 기술 작성 위 내용은 AdminLTE 템플릿을 사용해 PHP의 Laravel 프레임워크에서 웹사이트 백엔드 인터페이스_php 스킬을 작성하는 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

PHP : 많은 웹 사이트의 기초Apr 13, 2025 am 12:07 AM

PHP가 많은 웹 사이트에서 선호되는 기술 스택 인 이유에는 사용 편의성, 강력한 커뮤니티 지원 및 광범위한 사용이 포함됩니다. 1) 배우고 사용하기 쉽고 초보자에게 적합합니다. 2) 거대한 개발자 커뮤니티와 풍부한 자원이 있습니다. 3) WordPress, Drupal 및 기타 플랫폼에서 널리 사용됩니다. 4) 웹 서버와 밀접하게 통합하여 개발 배포를 단순화합니다.

과대 광고 : 오늘 PHP의 역할을 평가합니다Apr 12, 2025 am 12:17 AM

PHP는 현대적인 프로그래밍, 특히 웹 개발 분야에서 강력하고 널리 사용되는 도구로 남아 있습니다. 1) PHP는 사용하기 쉽고 데이터베이스와 완벽하게 통합되며 많은 개발자에게 가장 먼저 선택됩니다. 2) 동적 컨텐츠 생성 및 객체 지향 프로그래밍을 지원하여 웹 사이트를 신속하게 작성하고 유지 관리하는 데 적합합니다. 3) 데이터베이스 쿼리를 캐싱하고 최적화함으로써 PHP의 성능을 향상시킬 수 있으며, 광범위한 커뮤니티와 풍부한 생태계는 오늘날의 기술 스택에 여전히 중요합니다.

PHP의 약한 참고 자료는 무엇이며 언제 유용합니까?Apr 12, 2025 am 12:13 AM

PHP에서는 약한 참조가 약한 회의 클래스를 통해 구현되며 쓰레기 수집가가 물체를 되 찾는 것을 방해하지 않습니다. 약한 참조는 캐싱 시스템 및 이벤트 리스너와 같은 시나리오에 적합합니다. 물체의 생존을 보장 할 수 없으며 쓰레기 수집이 지연 될 수 있음에 주목해야합니다.

PHP의 __invoke 마법 방법을 설명하십시오.Apr 12, 2025 am 12:07 AM

\ _ \ _ 호출 메소드를 사용하면 객체를 함수처럼 호출 할 수 있습니다. 1. 객체를 호출 할 수 있도록 메소드를 호출하는 \ _ \ _ 정의하십시오. 2. $ obj (...) 구문을 사용할 때 PHP는 \ _ \ _ invoke 메소드를 실행합니다. 3. 로깅 및 계산기, 코드 유연성 및 가독성 향상과 같은 시나리오에 적합합니다.

동시성에 대해 PHP 8.1의 섬유를 설명하십시오.Apr 12, 2025 am 12:05 AM

섬유는 PHP8.1에 도입되어 동시 처리 기능을 향상시켰다. 1) 섬유는 코 루틴과 유사한 가벼운 동시성 모델입니다. 2) 개발자는 작업의 실행 흐름을 수동으로 제어 할 수 있으며 I/O 집약적 작업을 처리하는 데 적합합니다. 3) 섬유를 사용하면보다 효율적이고 반응이 좋은 코드를 작성할 수 있습니다.

PHP 커뮤니티 : 자원, 지원 및 개발Apr 12, 2025 am 12:04 AM

PHP 커뮤니티는 개발자 성장을 돕기 위해 풍부한 자원과 지원을 제공합니다. 1) 자료에는 공식 문서, 튜토리얼, 블로그 및 Laravel 및 Symfony와 같은 오픈 소스 프로젝트가 포함됩니다. 2) 지원은 StackoverFlow, Reddit 및 Slack 채널을 통해 얻을 수 있습니다. 3) RFC에 따라 개발 동향을 배울 수 있습니다. 4) 적극적인 참여, 코드에 대한 기여 및 학습 공유를 통해 커뮤니티에 통합 될 수 있습니다.

PHP vs. Python : 차이점 이해Apr 11, 2025 am 12:15 AM

PHP와 Python은 각각 고유 한 장점이 있으며 선택은 프로젝트 요구 사항을 기반으로해야합니다. 1.PHP는 간단한 구문과 높은 실행 효율로 웹 개발에 적합합니다. 2. Python은 간결한 구문 및 풍부한 라이브러리를 갖춘 데이터 과학 및 기계 학습에 적합합니다.

PHP : 죽어 가거나 단순히 적응하고 있습니까?Apr 11, 2025 am 12:13 AM

PHP는 죽지 않고 끊임없이 적응하고 진화합니다. 1) PHP는 1994 년부터 새로운 기술 트렌드에 적응하기 위해 여러 버전 반복을 겪었습니다. 2) 현재 전자 상거래, 컨텐츠 관리 시스템 및 기타 분야에서 널리 사용됩니다. 3) PHP8은 성능과 현대화를 개선하기 위해 JIT 컴파일러 및 기타 기능을 소개합니다. 4) Opcache를 사용하고 PSR-12 표준을 따라 성능 및 코드 품질을 최적화하십시오.

See all articles