iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

Laravel學習系列 第 8

LARAVEL學習 DAY 8 CRUD(續)BLADE?

LARAVEL學習 DAY 8 CRUD(續)BLADE?

抱歉 讓我卡一下 最近會把進度補完 但是我還要先把新手任務做完才能回范大大的留言...

前言

會補進度什麼的都是豪洨...現在看一看已經拖超久的了

正文

這次呢先來講blade 這個不講 之後很難進行下去(雖然超久沒寫blade了 都在那邊前後分離)

基本上呢blade就是一個把前後端混合到一個極
平常都是寫HTML JavaScript CSS PHP混得機八亂 給鬼看啊
如果寫Laravel還是這樣子 就真的是笑話了

我們先把crud的index拿來用
app/Http/Controllers/Web/CRUDController.php
直接把第17行改成return view('crud.index');
return view只是一種用來指向view的方法 其中還有return redirect等
詳細看這邊

好 剛剛打的那行會指向這個地方resources/views/crud/index.blade.php
return view會吃所有的.php .blade.php
檔名中的blade就是精華 沒有這個blade就不能用blade了(幹話)

先建個基本的html吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    
</body>
</html>

其實長怎樣都沒差啦 html那麼自由
然後對應的網址在http://ironman.local/crud
然後你還是會看到白的 隨便打個東西再重整就有了

然後接下來的東西要套個Bootstrap比較好看一點
其實Laravel內建就有了 只是看要不要引入而已

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>

在meta的部分進行引入
至於這個{{ asset('css/app.css') }}就是blade的方法之一
asset()是Laravel helpers函數 其功能就是導向專案資料夾public
{{}}就是讓你不用在那邊打一些有的沒的PHP標籤 不然原本應該要長這樣的

<link rel="stylesheet" href="<?php echo asset('css/app.css') ?>">

另外也可以定義變數之後這樣子使用{{ $var }}

那個 幫我貼在body一下 當自己家就好 隨便貼

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">IRONMAN</a>
        </div>
    </div>
</nav>

那問題來了 這段不算多 在每個檔案都貼也是還好
問題是檔案一多 真的會貼到煩 所以我們接下來要使用blade的一個功能 就是嵌套

我們來建檔吧 resources/views/layouts/app.blade.php
裡面要打什麼呢 把剛剛那個檔案整個剪下貼上吧
你沒有看錯 就是剪下貼上 不要留念
我貼一下 避免有人長得不一樣

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <script src="{{ asset('js/app.js') }}"></script>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">IRONMAN</a>
            </div>
        </div>
    </nav>
</body>

</html>

我們先把title的部分改成這個

@yield('title')

接下來在nav的下面打上這個

<div class="container-fluid">
    @section('put-something-inside')
        <div>媽</div>
    @show
    @yield('content')
</div>

再來就是重點了 crud.index的本體

@extends('layouts.app')
@section('title', 'CRUD首頁')
@section('put-something-inside')
    
    <div>我在這</div>
@endsection
@section('content')
    <div>我是內容</div>
@endsection

長得一副鳥樣 但是簡潔有力

crud.index第一行的@extends部分就是宣告這個檔案應該以哪一個檔案為基底
再來就是@section('title', 'CRUD首頁')會尋找基底檔案的@yield('title')部分來進行填入
@section('content')也是同理

至於這個@section @show是選用嵌套的部分 在基底會有一些預設輸入
然而可以在本體這邊選擇要不要使用它 就是的部分
若不使用parent則只會把"我在這"的部分填入

另外關於blade註解的部分則是{{-- 我是註解 --}}

還有一種方式跟@yield很像 有興趣的可以自己看一下
https://laravel.com/docs/5.5/blade#components-and-slots
我不常用到 不過或許有人會用到

還有 可以利用return view的時候帶參數過來 這個之後就會用到了 這次先不講

Blade 的 {{ }} 語法會自動使用 PHP htmlspecialchars 函數來避免 XSS 攻擊。

所以你打一些奇奇怪怪的東西 比如說

<?php $var = '<span>my span</span>' ?>
{{ $var }}<br>
{!! $var !!}

{{}}的部分就會被轉譯
所以說 要跳脫的話就要用這個{!! $var !!}
其他方式就各自延伸吧 官方寫了不少

啊 糟糕 忘記講邏輯 來講一下好了

其中包含了

if elseif else
unless
foreach
isset

諸如此類
不過有些東西目前沒辦法測 我只先帶過

@if ()

@elseif ()

@else

@endif
@unless ()

@endunless

unless(false)時才會進入 等於是if的反向

@isset ()

@endisset
@empty ()

@endempty
@auth

@endauth

反向的就是

@guest

@endguest

另外auth還有guest也可以使用Auth的Guard一詳細用法一樣是看官方

@switch(...)
    @case(...)

        @break

    @case(...)

        @break

    @default

@endswitch

以下是官方有關loop的範例

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

@while (true)
    <p>I'm looping forever.</p>
@endwhile

另外 不知道大家有沒有聽過PHP短標籤 也就是<? ?>
不過這個要去PHP設定那邊另外開
Blade有提供另一種短標籤

@php
    echo '說短也不短...';
@endphp

另外還有一種sub-view的方法 這邊也不多說了 就是一個view塞另一個view的概念

其他零零總總一堆 Blade也是Laravel的一門學問啊

結語

這次的內容是為了銜接下一次的內容
雖然不是很有誠意... 不過還是可以加減看啦
畢竟Blade不是必要的東西...
(期末東西一堆啊 快炸掉惹)


上一篇
LARAVEL學習 DAY7 CRUD(續) 關於路由與CONTROLLER建立
下一篇
LARAVEL學習 DAY 9 CRUD FOR WEB (一)
系列文
Laravel學習30

尚未有邦友留言

立即登入留言