標籤

bat (54) 作品 (41) python (24) shell (17) windows (11) 虛擬機 (11) php (10) laravel (9) CPP (6) KMS (6) 程式設計 (6) docker (5) xoops (5) 使用教學 (5) 公文 (4) Apache2 (3) Excel (3) juniper (3) 資料庫 (3) 轉檔 (3) mysql (2) 免動手 (2) 資料結構 (2) 軟體廣播 (2) 電腦維修 (2) Android Studio (1) Apple IPAD管理 (1) Arduino (1) CSS (1) LAMP (1) NAS (1) Ubuntu (1) VHD (1) Windows Server (1) 原因 (1) 程式應用 (1) 程式積木 (1) 編輯器 (1) 雲端硬碟 (1)

2025年5月30日 星期五

laravel 12 Blade Templates 網頁模版

一、網頁模版
建立網頁模版指令：
php artisan make:view contactus 
php artisan make:view aboutus

檔案：routes/web.php
內容：
Route::get('about-us',function(){
    return view('aboutus');
});
Route::view('contact-us','contactus');

檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
</div>

測試結果：



二、傳送變數資料到網頁模版
檔案：routes/web.php
內容：
Route::get('about-us',function(){
    $name = 'tester';
    $id = 123456;
    //return view('aboutus')->with('name',$name)->with('id',$id);
    //return view('aboutus',compact($name,$id));
    return view('aboutus',['name'=>$name,'id'=>$id]);
});
Route::view('contact-us','contactus',['name'=>'tester','id'=>123456]);

檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ $name }}</h1>
    <h1>ID:{{ $id }}</h1>
</div>

測試結果：

三、傳送網址資料到網頁模版
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
});
Route::view('contact-us/{name}/{id}','contactus');


檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
</div>


測試結果：

四、網頁模版註解
檔案：resources/views/contactus.blade.php
內容：
<div>
    {{--
        This is a comment
        This is a second comment
    --}}
    <!--
        This is a HTML comment
    -->
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>

</div>
測試結果：


五、網頁模版的for、if的用法
        (一) for 的用法
檔案：routes/web.php
內容：
Route::view('contact-us/{name}/{id}','contactus');

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @for ($i = 0;$i<10;$i++)
        <p>{{ $i }}</p>
    @endfor
</div>

測試結果：
        (二) if 的用法
檔案：routes/web.php
內容：
Route::view('contact-us/{name}/{id}','contactus');

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @for ($i = 4;$i<7;$i++)
        <p>{{ $i }}</p>
        @if ($i == 5)
            <h1> Hi! This is {{ $i }}</h1>
        @endif
    @endfor
</div>

測試結果：
更多的寫法資源在3.Blade 模板

六、網頁子視圖與視圖快取
在resources/views 手動建立一個資料夾Subviews
在resources/views/Subviews 手動建立input.blade.php
或是指令：
mkdir resources/views/Subviews
touch resources/views/Subviews/input.blade.php

   (一)一般情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required>
</div>

檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>

        @include('subviews.input')
    </body>
</html>

測試結果：

   (二)內定變數傳值情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required value="{{ $myName }}" />
</div>

檔案：resources/views/contactus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>

        @include('subviews.input',[
            'myName'=>'this is my name',
        ])
    </body>
</html>

測試結果：

   (三)網頁參數傳值情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required value="{{ $myName }}" />
</div>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @include('subviews.input',[
        'myName'=>request()->name,
    ])

</div>


檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>

        @include('subviews.input',[
            'myName'=>$name,
        ])
    </body>
</html>

測試結果：

七、完成之後，利用指令建立視圖快取與視圖快取清除
指令：php artisan view:cache
指令：php artisan view:clear

八、建立可重複使用的視圖模版
檔案：resources/views/aboutus.blade.php
內容：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Basic HTML5 Template</title>
        <link rel="stylesheet" href="style.css">
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }
            nav ul {
                list-style-type: none;
                padding: 0;
                background: #005bb5;
                overflow: hidden;
                display: flex;
                justify-content: center;
            }
            nav ul li {
                padding: 14px 20px;
            }
            nav ul li a {
                color: white;
                text-decoration: none;
            }
            .container {
                display: flex;
                flex: 1;
            }

            .sidebar {
                width: 250px;
                background: #f4f4f4;
                padding: 15px;
            }
            .main-content {
                flex: 1;
                padding: 20px;
            }
            footer {
                background: #004080;
                color: white;
                text-align: center;
                padding: 10px;
                position: relative;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="container">
            <aside class="sidebar">
                <h2>Sidebar</h2>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </aside>
            <main class="main-content">
                <section>
                    <h2>About Us</h2>
                    <p>This is simple HTML and CSS template to start your project.</p>
                </section>
            </main>
        </div>
        <footer>
            <p>&copy; 2025 My Website. All rights reserved.</p>
        </footer>
    </body>
</html>

(一)、在views 建立子資料夾layouts，在layouts內建立app.blade.php
將aboutus.blade.php的內容複製到app.blade.php
接下來調整app.blade.php的內容如下：
檔案：resources/views/layouts/app.blade.php
內容：
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Basic HTML5 Template</title>
        <link rel="stylesheet" href="style.css">
   </head>
   @yield('style')
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="container">
            <aside class="sidebar">
                <h2>Sidebar</h2>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </aside>
            <main class="main-content">
                @yield('content')
            </main>
        </div>
        <footer>
            <p>&copy; 2025 My Website. All rights reserved.</p>
        </footer>
    </body>
    @yield('scripts')
</html>





於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

laravel 12 Controller 控制器

一、Controller 控制器  1.指令建立控制器 php artisan make:controller StudentController    2.在app/Http/Controllers/StudentController.php 新增一個函式     public...