Laravel 자습서 - 새 페이지를 만들고 데이터베이스에 있는 사용자를 Livewire로 나열합니다.

이 강좌에서는 Laravel 관리 대시보드와 최신 버전의 Livewire를 사용하여 대화식 웹 응용 프로그램을 처음부터 구축하는 방법을 보여 드리겠습니다.마지막으로, 페이지를 만들고, Laravel 구성 요소를 사용하고, 프로그램의 외관을 사용자 정의하는 방법을 알게 될 것입니다.

이 설명서에서 사용할 두 가지 주요 기술에 대해 간략하게 살펴보겠습니다.

라빌

Laravel은 웹 응용 프로그램 프레임워크로 풍부하고 우아한 문법을 가지고 있다.웹 프레임워크는 응용 프로그램을 만드는 데 구조와 출발점을 제공합니다. 디테일에 주목하면서 놀라운 것을 만드는 데 전념할 수 있습니다.
Laravel은 주입에 철저하게 의존하고 표현력이 강한 데이터베이스 추상층, 대기열과 계획된 작업, 단원과 통합 테스트 등 놀라운 개발자 체험을 제공하기 위해 노력한다.

생방송

Livewire는 Laravel의 전체 창고 프레임워크로 동적 인터페이스를 간단하게 구축하고 Laravel의 편안함을 벗어날 필요가 없다.
다음은 이 자습서의 카탈로그입니다.
프로젝트를 설정하는 시간을 절약하기 위해서, 우리는 Themesberg에서 만든 무료 소스 오픈 Laravel 관리 계기판 인터페이스를 사용할 것입니다.Bootstrap 5 CSS 프레임워크를 기반으로 하고 Laravel 및 Livewire를 사용합니다.

Volt Laravel 대시보드 다운로드 및 설치

개인 취향에 따라 Volt Laravel 대시보드를 Themesberg for free에서 직접 다운로드하거나 public repository on Github에서 항목을 복제할 수 있습니다.

다운로드한 파일의 압축을 풀면 터미널을 사용하여 루트 프로젝트 폴더로 이동하고 설명에 따라 조작합니다.

프로젝트의 zip 파일을 다운로드한 다음volt dashboard 메인 폴더를 복사하여 프로젝트 폴더에 붙여넣습니다.폴더의 이름을 프로젝트 이름으로 바꾸기;

Node 및 Composer가 로컬에 설치되어 있는지 확인합니다.

다음 명령을 실행하여 모든 프로젝트 의존항을 다운로드한다: composer install.

단말기에서 운행npm install;

.env.example를 .env로 복제하고 설정을 업데이트한다(주로 데이터베이스 설정이다).

단말기에서 운행php artisan key:generate;

실행php artisan migrate --seed에 데이터베이스 테이블을 만들고 역할과 사용자 테이블 피드를 생성한다.

마지막으로 실행 php artisan storage:link 메모리 기호 링크를 만듭니다 (Vagrant with Homestead를 사용하여 개발하고 있다면 ssh를 사용하여 가상 컴퓨터에 연결하고 명령을 실행하는 것을 기억하십시오.)

프로젝트 구조 이해

코드를 작성하기 전에 폴더 구조에 대한 좋은 개술과 이해를 하는 것이 좋다.일부 폴더와 용도를 설명할 수 있도록 허락해 주십시오.

public/: 이 폴더에는 컴파일된 Javascript와 CSS 파일이 포함되어 있습니다.당신은 여기에 이미지 등 자산을 추가할 수 있습니다.

resources/: 이 폴더는 컴파일되지 않은 칼날 파일,SCS,CSS와Javascript 파일을 포함한다.

node_modules/: 이것은 폴더로 npm 설치를 실행한 후 모든 의존항이 설치됩니다.

.gitignore:git버전 제어시스템에서 무시할 파일이나 폴더, 예를 들어 node modules 폴더를 추가할 수 있습니다.

app/Http/: 다음은 블레이드 파일에 해당하는 모든 Laravel 클래스입니다.

이제 폴더 구조를 분해하여 새로 설치된 항목에서 사용할 수 있는 UI 구성 요소를 탐색할 수 있습니다.

부트 UI 구성 요소 탐색

Volt Laravel Dashboard를 선택한 이유는 대량의 UI 구성 요소, 부분과 페이지를 선택할 수 있고 좋은 사용자 인터페이스를 사용자 정의하고 구축하여 사용자에게 데이터와 조작을 표시할 수 있기 때문이다.

online documentation로 이동하여 버튼, 아코디언, 경보, 모드, 네비게이션 표시줄 등 구성 요소를 선택하면 프로젝트의 구성 요소를 탐색할 수 있습니다.
독특한 도전과 기능에 직면했을 때, 이 UI 요소들은 매우 유용할 것이다. 이 도전과 기능을 응용 프로그램에 통합시키고 싶지만, 이미 만들어진 비슷한 페이지를 찾을 수 없다.

라빌에 새로운 페이지를 만들다

UI 구성 요소를 탐색한 후에는 새 페이지를 만들고 새 구성 요소를 추가하고 라우팅으로 등록하고 사이드바에 추가하는 방법을 보여 줍니다.사용자 목록을 표시하는 페이지를 만들 것입니다.

1단계: 새 페이지 만들기

첫 번째 단계는 Livewire를 사용하여 새 페이지를 만드는 것입니다. 이것은 일을 더욱 간단하게 할 수 있습니다.명령을 입력하면 Livewire는 Blade 파일과 Laravel 클래스로 이동하는 데 필요한 모든 것을 만들 수 있습니다.

2단계: 노선 설명 및 등록

이제 php artisan make:livewire UserManagement 디렉토리의 web.php로 이동하여 새 페이지를 라우팅으로 등록합니다.

Route::get('/user-management', Users::class)->name('user-management');

그리고 /routes 파일에 들어가서 첫 번째 그룹에 루트의 이름을 입력하십시오.

@if(in_array(request()->route()->getName(), ['dashboard','user-management', etc]))

만약 네가 지금 app.blade.php 페이지로 돌아간다면, 사이드바, 네비게이션, 꼬리표가 있는 공백의 새 페이지를 볼 수 있을 것이다.

3단계: Bootstrap 5 어셈블리를 사용하여 페이지 구성

잘했어!Volt Laravel Dashboard 프로젝트에서 제공하는 UI 요소를 사용하여 자유롭게 구성할 수 있는 새 페이지가 만들어졌습니다.페이지에는 제목, 설명, 그리고 빵 부스러기 요소가 필요합니다.
빵 부스러기 구성 요소를 만들기 위해 다음 코드 블록을 추가합니다.

<div class="d-block mb-4 mb-md-0">
    <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
        <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
            <li class="breadcrumb-item">
                <a href="#">
                    <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                        </path>
                    </svg>
                </a>
            </li>
            <li class="breadcrumb-item"><a href="#">Volt</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('Users List')}}</li>
        </ol>
    </nav>
    <h2 class="h4">{{__('User Management')}}</h2>
    <p class="mb-0">{{__('Your user management dashboard template.')}}</p>
</div>

브라우저로 돌아가면, 페이지에 빵 부스러기 구성 요소, 제목, 설명이 추가된 것을 볼 수 있습니다.
계속해서 요소를 추가하여 검색, 업데이트 또는 목록에 새 사용자를 추가할 수 있습니다.
빵 부스러기 구성 요소를 만들기 위해 다음 코드 블록을 추가합니다.

<div class="table-settings mb-4">
    <div class="row justify-content-between align-items-center">
        <div class="col-9 col-lg-8 d-md-flex">
            <div class="input-group me-2 me-lg-3 fmxw-300">
                <span class="input-group-text"><svg class="icon icon-xs"
                        x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                            clip-rule="evenodd"></path>
                    </svg></span></span>
                <input wire:model="search" type="text" class="form-control" placeholder="Search users">
            </div>
            <div class="col-3 d-flex">
                <select wire:model="entries" class="form-select fmxw-100 d-none d-md-inline" id="entries"
                    aria-label="Entries per page">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
    </div>
</div>

잘했어!현재, 페이지 맨 위에 모든 기본 요소를 추가했습니다.결과는 브라우저의 다음 그림과 유사해야 합니다.

4단계: Laravel 및 Livewire 활용

우리의 다음 단계는 실현표입니다. 이것은 매우 간단한 작업입니다. 이미 만들어진 Livewire 구성 요소를 사용하여 표를 실현하는 것입니다.다음 테이블 제목을 추가합니다.
빵 부스러기 구성 요소를 만들기 위해 다음 코드 블록을 추가합니다.

<x-slot name="head">
    <x-table.heading sortable wire:click="sortBy('first_name')"
        :direction="$sortField === 'first_name' ? $sortDirection : null">{{__('Name')}}
    </x-table.heading>
    <x-table.heading sortable wire:click="sortBy('role_id')"
        :direction="$sortField === 'role_id' ? $sortDirection : null">{{__('Role')}}
    </x-table.heading>
    <x-table.heading sortable wire:click="sortBy('created_at')"
        :direction="$sortField === 'created_at' ? $sortDirection : null">{{__('Date created')}}
    </x-table.heading>
    <x-table.heading sortable wire:click="sortBy('status')"
        :direction="$sortField === 'status' ? $sortDirection : null">{{__('Status')}}
    </x-table.heading>
    @can('manage-users', auth()->user())
    <x-table.heading>{{__('Action')}}</x-table.heading>
    @endcan
</x-slot>

정렬 기능은 http://localhost:3000/#/user-management류가 책임진다.
표의 주체 부분에서, 우리는 데이터베이스에서users표의 모든 항목을 보고, 하드코딩이 아닌 동적 방식으로 데이터를 표시할 것이다.

<x-slot name="body">
    @foreach ($users as $user)
    <x-table.row>
        <x-table.cell>
            <a href="#" class="d-flex align-items-center">
                <img src="{{$user->avatarUrl()}}" class="avatar rounded-circle me-3" alt="Avatar">
                <div class="d-block">
                    <span class="fw-bold">{{ $user->first_name . ' ' . $user->last_name }}</span>
                    <div class="small text-gray">{{ $user->email }}</div>
                </div>
            </a>
        </x-table.cell>
        <x-table.cell>{{ $user->role->name }}</x-table.cell>
        <x-table.cell>{{ $user->date_for_humans }}</x-table.cell>
        <x-table.cell><span class="fw-normal text-{{ $user->status_color }}"> {{ $user->status }} </span>
        </x-table.cell>
        @can('manage-users', auth()->user())
        <x-table.cell>
            @can('update', $user)
            @if($user->id !=1 && auth()->user()->can('update', $user) || auth()->user()->can('delete',
            $user))
            @if($user->id != auth()->user()->id)
            <x-button.link>
                @can('update', $user)
                <a class="dropdown-item d-flex align-items-center"
                    href="{{ route('edit-user', ['id' => $user->id]) }}"><span
                        class="fas fa-user-shield me-2"></span> {{__('Edit user')}}</a>
                @endcan
                @can('delete', $user)
                <a onclick="confirm('Are you sure you want to remove the user from this group?') || event.stopImmediatePropagation()"
                    wire:click="delete({{ $user->id }})"
                    class="dropdown-item text-danger rounded-bottom"><span
                        class="fas fa-user-times me-2"></span>{{__('Delete user')}}</a>
                @endcan
            </x-button.link>
            @endif
            @endif
            @endcan
        </x-table.cell>
        @endcan
    </x-table.row>
    @endforeach
</x-slot>

결과는 다음과 같아야 한다.

축하합니다!현재, 새로운 페이지 구축, 데이터 원본 구축, Laravel 구성 요소 사용, 데이터 원본에서 여러 사용자에게 표시하는 방법에 대해 알고 있습니다.
다음 절에서는 Sass 변수를 사용하여 대시보드의 모양을 바꾸는 것이 얼마나 쉬운지 보여 드리겠습니다.

Sass 변수를 사용하여 사용자 정의

이 대시보드의 또 다른 유용한 기능은 색상, 글꼴, 간격, 그림자, 용기 등의 Sass 변수를 변경하여 사용자 인터페이스의 외관을 쉽게 사용자 정의할 수 있다는 것이다.
예를 들어, Users.php로 이동하여 다음 값을 업데이트할 수 있습니다.

$primary : #1F2937 !default;
$secondary: #fb503b !default;

그리고 npm run scss 명령을 실행해야 합니다. 모든 scss 파일을 새로운 css 파일로 컴파일하고 프로젝트를 설계할 수 있습니다.

결론

Laravel 프로젝트를 설치하고 새 페이지를 구축하며 Sass 변수를 사용하여 외관을 사용자 정의하고 최종 생산 파일을 구축하는 방법을 배웠습니다.나는 네가 많은 것을 배웠으면 좋겠다. 계기판이 너의 프로젝트와 직업 생활을 도울 것이다.
떠나기 전에 Volt Laravel Dashboard의 고급 버전을 소개하고 싶습니다. 구성 요소, 페이지, 플러그인, 기타 일부 기능은 소스 버전의 두 배입니다.

Volt Dashboard PRO Laravel는 모든 어플리케이션에서 가장 많이 사용되는 때: #사용자, #역할, #프로젝트, #범주 및 #레이블을 포함하는 강력한 용도의 대시보드입니다.800여 개의 수동으로 제작된 UI 구성 요소의 간결한 디자인을 더하면 웹 응용 프로그램을 구축하는 데 아주 좋은 입문 패키지를 만들 수 있다.

Live Preview

Free version

Pro version