Laravel에서 블레이드 템플릿을 구성하는 초보자 가이드

19655 단어 webdevlaravelcodequalityphp
Larvel은 모델-뷰-컨트롤러(MVC) 아키텍처를 따르는 PHP 기반 웹 프레임워크입니다.
MVC 3부작의 핵심 부분은 뷰입니다.사용자가 웹 브라우저에서 보고 상호작용하는 모든 UI 태그는 Laravel 프로젝트를 초기화할 때 자동으로 만들어지는 보기 폴더에 들어갑니다.
블레이드 템플릿을 사용하여 뷰를 구성할 수 있습니다.Blade는 templating language입니다. Laravel은 기본적으로 웹 사이트의 HTML 레이아웃을 만듭니다.
Laravel에서 당신의 전체 창고 사이트에 표시를 만들 때, 몇 가지 최선의 실천을 따라야 합니다.많은 페이지와 UI 기능을 포함하는 사이트를 구축하고 있다면, 이 규칙을 따르는 것이 특히 중요하다.
이 글에서 우리는 우리가 템플릿을 구축할 수 있는 몇 가지 방법을 보고 그것들이 더욱 깨끗하고 세련되며 읽을 수 있도록 할 것이다.

폴더에서 뷰 구성


추천하는 방법은 보기를 폴더로 구성하는 것입니다.폴더를 사용하면 코드 라이브러리를 더욱 깨끗하게 할 수 있으며, 특히 대형 사이트에서는 더욱 깨끗하게 할 수 있다.예를 들어, 웹 사이트에 다음과 같은 다섯 개의 홈 페이지가 있다고 가정합니다.
  • /home
  • /faqs
  • /about
  • /blog
  • /contact
    • 그 중 일부 페이지에는 다른 하위 페이지가 있을 수 있습니다.
    예를 들어 블로그 페이지에는 다른 하위 페이지가 블로그 글을 만들고 삭제하며 업데이트할 수 있다.create 페이지에는 블로그 게시물을 제출하는 양식이 포함됩니다.delete 페이지에는 삭제 여부를 묻는 확인 질문이 있을 수 있습니다.update 보기에서 전송된 게시물의 본문을 포함하는 폼을 되돌려줄 수 있습니다.
    즉, 블로그 페이지는 다음 보기로 구성됩니다.

    색인칼날.php


    블로그 게시물 목록 표시

    창조칼날.php


    새 블로그 게시물의 양식 작성 및 게시

    편집자칼날.php


    기존 블로그 게시물 편집 및 업데이트를 위한 양식

    독신칼날.php


    개별 블로그 게시물의 페이지 표시
    매우 간결한 조직 방식은 모든 페이지에 단독 폴더를 만드는 것이다.그런 다음 보기를 다음과 같이 폴더에 저장합니다.
    └── views

    └── about // About views

    ├── index.blade.php // homepage for /about

    └── faqs // FAQ views

    ├── index.blade.php // homepage for /faqs

    └── blog // Blog views

        ├── index.blade.php 

        ├── create.blade.php 

        ├── edit.blade.php 

        ├── single.blade.php
    그런 다음 컨트롤러에서 이러한 뷰를 일관되게 반환할 수 있습니다.app/Http/Controllers/FaqController.php :
    class FaqController extends Controller
{

    public function index()
    {
        return view('faq.index');
    }

}
    app/Http/Controllers/AboutController.php :
    class AboutController extends Controller
{

    public function index()
    {
        return view('about.index');
    }

}
    app/Http/Controllers/BlogController.php :
    <?php

class BlogController extends Controller
{

    public function index()
    {
        // get blog posts from database
        return view('blog.index', compact('blogs'));
    }


    public function create()
    {
        return view('blog.create');
    }


    public function store(Request $request)
    {

        // validate request 

        // add blog post to blog table for user

        return back()->withMessage('Post Created!');
    }


    public function show(Blog $blog)
    {
        return view('blog.single', compact('blog'));
    }


    public function edit(Blog $blog)
    {
        return view('blog.edit', compact('blog'));
    }


    public function update(Request $request, Blog $blog)
    {

        // validate form data

       // update current post

        return redirect()->route('blog.show', $blog->id);
    }


    public function destroy(Blog $blog)
    {

        // authenticate

        $blog->delete();

        return redirect()->route('blog.index');
    }
}
    코드를 너무 걱정하지 마세요.
    대신 우리가 view()에서 되돌아온 내용을 주목한다.그것들의 일치성을 알 수 있다. (그것들은 모두 자신의 폴더 이름을 가지고 있다.)모든 보기 파일은 페이지 이름에 따라 분류됩니다.
    이렇게 하면 컨트롤러에 보기 이름을 입력한 다음 폴더 이름을 입력할 수 있습니다.
    이것은 전체 과정을 간소화하여 이해를 더욱 직관적으로 한다.

    확장 레이아웃


    Laravel 응용 프로그램에서 여러 페이지에서 특정 UI 요소와 UI 스타일을 공유해야 하는 경우가 있습니다.이것은 레이아웃 파일을 통해 쉽게 실현할 수 있다.
    이 파일에서 여러 페이지에서 공유할 요소를 정의할 수 있습니다.네비게이션 메뉴와 꼬리 부분이 좋은 예다.
    기본적으로 Laravel에는 기본 레이아웃 파일welcome.blade.php이 포함됩니다.
    모든 레이아웃에 독립된 폴더를 만드는 것이 좋습니다.따라서, 우리는 welcome.blade.phplayouts 폴더로 이동할 수 있습니다.
    └── views

    └── layouts 

    ├── welcome.blade.php // layout page

    // ... Other layouts go inside the layouts folder
    이 파일에서 레이아웃(탐색 모음, 바닥글, 사이드바)을 정의한 다음 @yield 문을 사용하여 페이지의 일부를 다른 페이지로 전달합니다.views/layouts/welcome.blade.php :
    
<body>
        <div class="contain">
            <div class="navbar">
                  <h1>Navigation</h1>
            </div>

        <div class="flex">
            <div class="sidebar">
                 <h1>Sidebar</h1>
            </div>

        <div class="content">
           <h2> @yield('heading') </h2>

            @yield('content')
        </div>
        </div>
            <div class="footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>
    그리고 다른 페이지 내부에서 다음 페이지와 같이 레이아웃을 확장하고 (유일한) 내용 부분을 제공할 수 있습니다.views/about/index.blade.php :
    @extends('layouts.welcome')

@section('content')
<p>This is a content for the about page</p>
@endsection

@section('heading', "About Me")
    views/about/index.blade.php :
    @extends('layouts.welcome')

@section('content')
<p>This is a content for the FAQ page</p>
@endsection

@section('heading', "Frequently Asked Questions")
    이제 세 개의 모든 페이지에서 배치가 변경되지 않습니다.


    현재 일부 페이지는 레이아웃이 필요하지 않을 수도 있습니다.예를 들어, 우리는 login와 register 페이지의 내비게이션 표시줄과 사이드바를 확장하고 싶지 않을 수도 있습니다.반대로 우리는 바닥글만 원한다.
    auth와 관련된 페이지에 대해, 우리는 단독 레이아웃 파일을 만들 수 있으며, 그 중에서 바닥글만 포함할 수 있다.views/layouts/auth.blade.php :
    
<body>
        <div class="contain">
            <div class="content">
                <h1> @yield('heading') </h1>

                @yield('content')
            </div>

            <div class="footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>
    그런 다음 auth 뷰에서 배치를 확장할 수 있습니다.views/auth/login.blade.php :
    @extends('layouts.auth')

@section('content')
<p>This is a content for the Login page. This extends the auth layout</p>
@endsection

@section('heading', "Login")
    이것이 바로 로그인 페이지의 모습입니다.

    Notice how the auth-related pages were grouped inside the auth folder.


    partials를 사용하여 모듈화되고 재사용 가능한 UI 구성 요소 만들기


    보기를 구축할 때 우리는 더욱 모듈화된 방법을 채택할 수 있다.이것은 여러 섹션과 페이지에서 재사용할 UI 또는 기능을 만들 때 유용합니다.
    예를 들면 다음과 같습니다.
  • 탐색 메뉴
  • 블로그 게시물을 만들고 업데이트할 때 이 게시물을 다시 사용하고자 하는 폼입니다.
  • 서로 다른 위치에서 다시 사용하고자 하는 모드 사용자 인터페이스
    • Partials는 기본적으로 모든 페이지에 포함할 수 있는 UI 모듈입니다.React 배경에서 온 경우 UI 구성 요소로 간주할 수 있습니다.
    탐색 부분, 사이드바 및 바닥글 부분을 별도의 부분으로 이동하여 레이아웃 파일(welcome.blade.php)을 재구성합니다.views/partials/navbar.blade.php
    <div class="navbar">
    <h1>Navigation</h1>
</div>
    views/partials/sidebar.blade.php
    <div class="sidebar">
    <h1>Sidebar</h1>
</div>
    views/partials/footer.blade.php
    <div class="footer">
    <h1>Footer</h1>
</div>
    그런 다음 레이아웃의 일부를 포함합니다.views/layouts/welcome.blade.php :
    <body>
        <div class="contain">
        @include('layouts.partials.navbar')

        <div class="flex">
        @include('layouts.partials.sidebar')

        <div class="content">
           <h2> @yield('heading') </h2>

            @yield('content')
        </div>
        </div>
            @include('layouts.partials.footer')
        </div>
    </body>
    이것은 우리가 레이아웃 파일에서 작성한 코드의 양을 감소시켰다.

    결론


    보기 폴더는 Laravel 프레임워크의 가장 중요한 부분 중 하나이며 MVC 3부작의 중요한 부분이기도 하다.
    보기 템플릿을 정확하게 조직하면 코드를 이해하기 쉬울 뿐만 아니라 개발자 동료도 코드를 이해하기 쉽다.
    이 문서에서 Laravel에서 보기를 구성하는 다양한 방법을 보았습니다.여기에는 폴더 기반 조직, 올바른 레이아웃 사용, UI를 재사용 가능한 부분으로 분해하는 작업이 포함됩니다.
    읽어주셔서 감사합니다.
    너도 인터넷에서 나를 찾을 수 있다.
    공통 Git 명령 목록
    Kubernetes 클러스터 설치 metrics-server

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage