哈！伸港創作者！哈: 2025

一、Controller 控制器
1.指令建立控制器
php artisan make:controller StudentController

2.在app/Http/Controllers/StudentController.php

新增一個函式

    public function index() {
        return "hello from controller.";
    }

可以看到

3.在routes/web.php

Route::get('students',[StudentController::class,'index']); 

可以看到

4.網址列打上http://127.0.0.1:8000/StudentController

就可以看到

二、兩個同樣控制器的Route，該如何合併成一個Route
1.在app/Http/Controllers/StudentController.php
新增一個函式

    public function aboutus(){
        return 'Code with Mark.';
    }

2.在routes/web.php

新增一條規則

Route::get('aboutus', [StudentController::class, 'aboutus']);

3.網址列打上http://127.0.0.1:8000/aboutus
就可以看到

4.兩個同樣控制器的Route，合併成一個Route

在routes/web.php 合併成一個Route

Route::controller(StudentController::class)->group(function () {
    Route::get('student', 'index');
    Route::get('aboutus', 'aboutus');
});

5.網址列打上http://127.0.0.1:8000/aboutus、http://127.0.0.1:8000/student

三、傳送資料到控制器
1.在routes/web.php |
修改

    Route::get('aboutus/{id}/{name}','aboutus');

2.在app/Http/Controllers/StudentController.php

修改

    public function aboutus($id,$name){
        return 'ID No ' . $id .' Name ' . $name;
    }

3.網址列打上http://127.0.0.1:8000/aboutus/1/Mark

四、傳送資料到視圖View
1.在routes/web.php |
修改

Route::controller(StudentController::class)->group(function () {
    Route::get('student', 'index');
    Route::get('aboutus/{id}/{name}','aboutus');
});

2.在app/Http/Controllers/StudentController.php

修改

    public function aboutus($id,$name){
        return view('aboutus', compact('id', 'name'));
    }

3.在resources/aboutus.blade.php

修改

                <section>
                    <h2>About Us</h2>
                    <p>This is simple HTML and CSS template to start your project.</p>
                    <p>Name:{{$name}}</p>
                    <p>ID:{{$id}}</p>
                </section>

其中resources/layouts/app.blade.php

resources/aboutus.blade.php

4.網址列打上http://127.0.0.1:8000/aboutus/1/Mark

資料來源：
1.Laravel 12 – Creating Your First Controller Step by Step
2.Laravel 12 – Passing Route Data to Controllers Explained

一、網頁模版

建立網頁模版指令：

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>

@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>

資料來源：
1.Laravel 12 View Explained – Introduction to Blade Templates
2.Laravel 12 – Passing Data from Route to View Explained
3.Blade 模板

4.Laravel 12 – Creating Layouts with Blade for Reusable Templates

哈！伸港創作者！哈

標籤

2025年6月6日星期五

laravel 12 Controller 控制器

2025年5月30日星期五

laravel 12 Blade Templates 網頁模版

laravel 12 Controller 控制器

標籤

2025年6月6日 星期五

laravel 12 Controller 控制器

2025年5月30日 星期五

laravel 12 Blade Templates 網頁模版

laravel 12 Controller 控制器

2025年6月6日星期五

2025年5月30日星期五