iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 5
1
Software Development

PHP新手30天實戰金流系列 第 5 篇

[Day5] FRONTEND(blade) + Route name

11th鐵人賽
1914 瀏覽
tags: PHP新手30天實戰金流, Laravel

前言

簡單做個有購物車的 UI。參考 纯手工打造一个简单的电子商务网站（一） —— 後台新增商品及前台显示來實作。(https://xueyuanjun.com/post/5075.html)

先來一點可愛又輕鬆的內容XD

Icons 資源

  1. 使用 fontawesome

    1. 填寫 email 註冊，完成後會得到一個套件碼，將它貼在 resources/views/welcome.blade.php 的 <head> 中

    2. 搜尋在 fontawesome 的 icons 頁面中搜尋 shopping cart

    3. 點擊圖片之後可以看到程式碼：

    <i class="fas fa-shopping-cart"></i>
    1. 將 icon的程式碼貼在文字前面：
    <a href="#"><i class="fas fa-shopping-cart"></i>Shopping cart</a>

前端處理

目前主要分成三個部分：

  1. master.blade.php - 畫面模板基底(外部資源載入、導覽列)
  2. admin/ - 店家管理頁面
  3. customer/ - 顧客操作頁面

模板基底 master.blade.php

```=
@if (Request::is('customer/*'))
    <div style="padding-top:16px;padding-right:16px"><a href="#" ><i class="fas fa-shopping-cart"></i>Shopping cart</a></div>    
@endif
```

  1. 在 resource/views 下 新增 master.blade.php

    
<html>

<head>
    <title>Laravel 商店</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/aa6119cf15.js"></script>
</head>

<body>
    @section('sidebar')
    <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Laravel 商店</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <a href="{{ route('logout') }}" onclick="event.preventDefault();
                                            document.getElementById('logout-form').submit();">
                        {{ __('Logout') }}
                    </a>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                    @if (Request::is('customer/*'))
                    <div style="padding-top:16px;padding-right:16px"><a href="#"><i class="fas fa-shopping-cart"></i>Shopping cart</a></div>
                    @endif
                    @if (Route::has('login'))
                    @auth
                    <a href="{{ url('/home') }}">Home</a>
                    @else
                    <a href="{{ route('login') }}">Login</a>

                    @if (Route::has('register'))
                    <a href="{{ route('register') }}">Register</a>
                    @endif
                    @endauth
                    @endif
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    @show

    <div class="container">
        @yield('content')
    </div>
</body>

</html>

admin/ - 店家管理頁面

  1. 在 views 下建立 admin/products_list.blade.php 和 admin/new_object.blade.php

    1. products_list.blade.php 
    @extends('master')

@section('商品列表', 'Page Title')

@section('sidebar')
@parent
@endsection

@section('content')
    <div class="container" style="padding-top:70px">
        <div class="row">
            <div class="col-md-6">
                <a href="/admin/product/new"><button class="btn btn-success">新增商品</button></a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                        <td>名稱</td>
                        <td>價格</td>
                        <td>描述</td>
                        <td>操作</td>
                    </thead>
                    <tbody>
                        <tr>
                            <td>名稱</td>
                            <td>價格</td>
                            <td>描述</td>
                            <td>操作</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

    1. new_object.blade.php 
    @extends('master')

@section('商品列表', 'Page Title')

@section('sidebar')
@parent
@endsection

@section('content')
<div class="container" style="padding-top:70px">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">新增商品</div>
        </div>
        <div class="panel-body">
            <form method="POST" action="save" class="form-horizontal" enctype="multipart/form-data" role="form">
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">名稱</label>
                        <div class="col-md-9">
                            <input id="name" name="name" type="text" placeholder="商品名稱" class="form-control input-md" required="">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="textarea">描述</label>
                        <div class="col-md-9">
                            <textarea class="form-control" id="textarea" name="description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="price">價格</label>
                        <div class="col-md-9">
                            <input id="price" name="price" type="text" placeholder="商品價格" class="form-control input-md" required="">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="imageurl">圖片URL</label>
                        <div class="col-md-9">
                            <input id="imageurl" name="imageurl" type="text" placeholder="商品圖片URL" class="form-control input-md">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="file">文件</label>
                        <div class="col-md-9">
                            <input id="file" name="file" class="input-file" type="file">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="submit"></label>
                        <div class="col-md-9">
                            <button id="submit" name="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>

                </fieldset>

            </form>
        </div>
    </div>
</div>
@endsection

customer/ - 顧客操作頁面

  • resources/views/customer/shopping_mall.blade.php 單純貼簡單的模板
@extends('master')

@section('顧客', 'Page Title')

@section('sidebar')
@parent
@endsection

@section('content')
<div class="container" style="padding-top:70px">
    <div class="row">
    </div>
</div>
@endsection

為路由命名

在 routes/web.php 中

  • 當我們要為一個路由命名時，可以這樣做：
Route::get('/customer/shopping_mall', function () {
    return view('customer/shopping');
})->name('customer');

  • 若是要為一個群組的路由命名時，這樣是行不通的：

    Route::group(function(){
    Route::get('/shopping_mall', function () {
        return view('customer/shopping');
    });
})->name('customer');

    用 namespace 雖然不會出現錯誤，不過沒有命名作用：

    Route::group(['prefix'=>'customer','namespace'=>'customer'], function(){
    Route::get('/shopping_mall', function () {
        return view('customer/shopping');
    });
});

    要用 as

    Route::group(['prefix'=>'customer','as'=>'customer'], function(){
    Route::get('/shopping_mall', function () {
        return view('customer/shopping');
    });
});
    • php artisan route:list 查看，成功命名：
    Domain Method URI Name Action Middleware

    | | GET|HEAD | master | | Closure | api |
    | | GET|HEAD | customer/shopping_mall | customer | Closure | api |
    | | GET|HEAD | test_shop/new_object | | Closure | api |

OK 今天先到這裡！Copy/Paste即將告一段落！接下來要深入了解一下 Laravel 的架站要件

晚生學習分享所學經驗，若內容有誤或不清楚，煩請不吝指教！更是歡迎各位大神多多補充，感謝萬分！


上一篇
[Day4] Laravel 6 API Versioning + Email Verification
下一篇
[Day6] Shopping Cart - Views - Controller - DB
系列文
PHP新手30天實戰金流 共 34 篇
  1. 30
    [Day30]檔案權限, www-data,SUID, SGID, SBIT
  2. 31
    [GCP] Ubuntu 18 部署 Nginx server, Laravel 專案
  3. 32
    [GCP] Nginx server 之 HTTPS(SSL) 設定
  4. 33
    [ Laravel ] Event
  5. 34
    [ Laravel ] 客製 Auth::guard()
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙