webinoly + Laravel + AdminLTE 安裝

安裝webinoly部分省略,從安裝完成後開始

開設網站

把laravel-admin.com 換成自己的網域

# site  laravel-admin.com -php

安裝完成後, 移除預設的主目錄

# cd /var/www/laravel-admin.com
# rm -rf htdocs

安裝Laravel
# composer create-project laravel/laravel htdocs

設定權限

# chown -R www-data:www-data .
# chmod -R 755 .
# chmod -R 775 storage bootstrap/cache

修改nginx網站設定根目錄

# vi /etc/nginx/sites-available/laravel-admin.com
修改以下
把
root /var/www/laravel-admin.com/htdocs;
改為
root /var/www/laravel-admin.com/htdocs/public;

存檔後

# nginx -t &&  service nginx reload

設定 .env 檔案並連接資料庫(選填)

# vi .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=密碼

建立資料庫

# sudo mysql -u root -p
CREATE DATABASE laravel;
EXIT;

可以使用 webinoly -dbpass 找到 root 密碼

執行 migration

# php artisan migrate

安裝 Laravel AdminLTE

# composer require jeroennoten/laravel-adminlte
# php artisan adminlte:install --force

建立首頁測試

#vi routes/web.php
內容如下
Route::get('/', function () {
    return view('home');
});

建立視圖檔案 
# vi resources/views/home.blade.php
內容如下
@extends('adminlte::page')

@section('title', '首頁')

@section('content_header')
    <h1>管理後台</h1>
@endsection

@section('content')
    <p>這是 Laravel + AdminLTE 整合的頁面!</p>
@endsection

設定資料夾權限(再次確認用)

# chown -R www-data:www-data *
# chmod -R 775 storage  bootstrap/cache

到這邊打開瀏覽器看應該是正常了

以上基本上告一個段落。往下是看需求弄了。

再來是追加”註冊/登入”等功能

安裝 Laravel Breeze

# cd /var/www/laravel-admin.com/htdocs  確認是在專案目錄內
# composer require laravel/breeze --dev
# php artisan breeze:install

這邊會遇到選擇題,可以用左右鍵跟 enter 處理

等跑完後,執行

# php artisan migrate
# chown -R www-data:www-data *
# chmod -R 775 storage  bootstrap/cache

這樣基本上已經完工了。

備註:

如果不需要 Tailwind 或 Vite,也可以先停用 Vite,改用 Laravel 傳統的 asset 載入方式。

# vi resources/views/layouts/guest.blade.php
跟
# vi resources/views/layouts/app.blade.php
把 
@vite(['resources/css/app.css', 'resources/js/app.js'])
改成註解為
{{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

刪掉 Tailwind / Alpine / Vite 前端檔案(可選)

可以移除這些 Breeze 自帶的前端資源:

# rm -rf resources/css resources/js vite.config.js



到目前應該完成了

登入頁:/login

註冊頁:/register

登入後首頁:/dashboard

追加功能: 註冊使用者需要經過最高管理者審核過才能登入

修改資料表:加入「狀態」與「是否為管理員」

# php artisan make:migration add_status_and_is_admin_to_users_table

會產出一個
database/migrations/xxxx_add_status_and_is_admin_to_users_table.php 的檔案

修改後內容如下:

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('status')->default('pending'); // 新增帳號狀態
        $table->boolean('is_admin')->default(false);  // 是否是管理者
    });
}

public function down()
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('status');
        $table->dropColumn('is_admin');
    });
}

存檔案執行
# php artisan migrate

建立最高管理員帳號

# php artisan tinker

然後在 tinker 裡輸入:

$user = new \App\Models\User;
$user->name = '最高管理員';
$user->email = '[email protected]';
$user->password = bcrypt('密碼打這邊');
$user->is_admin = true;
$user->status = 'active';
$user->save();

打exit 離開 tinker

這時候應該能用網址 /login 以上面的email跟密碼登入

加入樣式方便修改

# mkdir -p public/adminlte
下載 AdminLTE v3.2.0 原始碼。
網址 https://sourceforge.net/projects/adminlte/files/v3.2.0/AdminLTE%20v3.2.0.zip/download

將 dist 和 plugins 資料夾複製到 public/adminlte 資料夾中


在 Laravel 的 Blade 模板中引入資源

在 resources/views/layouts/app.blade.php 的 <head> 區塊中加入:
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/all.min.css') }}">
<!-- AdminLTE CSS -->
<link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}">

在 </body> 標籤前加入:
<!-- jQuery -->
<script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script>

替換 Breeze 登入畫面樣式,套用 AdminLTE v3 風格

# vi  resources/views/auth/login.blade.php

清空原內容,改成以下 AdminLTE v3 的樣式範本:

@extends('layouts.app')

@section('content')
<div class="login-box">
  <div class="login-logo">
    <a href="#"><b>Admin</b>LTE</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">登入以開始您的工作階段</p>

      <form method="POST" action="{{ route('login') }}">
        @csrf

        <div class="input-group mb-3">
          <input type="email" name="email" class="form-control" placeholder="Email" required autofocus>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>

        <div class="input-group mb-3">
          <input type="password" name="password" class="form-control" placeholder="密碼" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-8">
            <!-- 你可以加 remember me 或連結 -->
          </div>
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block">登入</button>
          </div>
        </div>
      </form>

    </div>
    <!-- /.login-card-body -->
  </div>
</div>
@endsection

修改登入判斷

# vi resources/views/layouts/navigation.blade.php
找到
{{ Auth::user()->name }}
改成
@if(Auth::check())
    {{ Auth::user()->name }}
@endif
整個檔案內有看到 Auth::user()->  的上下都要這樣包住

修改

# vi resources/views/layouts/app.blade.php
全部刪除換成
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', '管理後台')</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}">

    <!-- 可選:自訂樣式 -->
    @stack('styles')
</head>
<body class="hold-transition login-page">

    @yield('content')

    <!-- jQuery -->
    <script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap 4 -->
    <script src="{{ asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- AdminLTE -->
    <script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script>

    @stack('scripts')
</body>
</html>

後面任何畫面大概這樣用就會自動套用 AdminLTE 样式

@extends('layouts.app')

@section('content')
    <div class="login-box"> ... </div>
@endsection

到這邊完成 /login 了。