---
# System prepended metadata

title: Laravel 8 框架練習

---

# Laravel 8 框架練習

## 環境

使用Wagon進行網站環境建置。
https://github.com/laravel-dojo/wagon/releases/tag/1.5.0

其功能有：
* cmder
* composer
* git
* laravel
* uwamp
* vcredist

注意事項：
**使用 uwamp 時須讓保持 Apache 在 Offline Mode。
電腦中有存在其他的資料庫，先將功能停用，並將電腦重啟，不然會發生相互衝突而無法使用的情況。**

使用前的設定更改：
1. 預設位置：wagon/uwamp/www/default。
2. 創建後的傳案會在：wagon/uwamp/www的資料夾中，將 Document Root 的位置改到目前所要使    用的專案資料夾中。
3. 打開Apache Config。
4. 點選預設的port。
5. 將預設位置修改到專案內的public。
6. 記得啟動 rewrite module(點選Apache Config，並在Modules啟動。) 

## 專案建置
1. 用 composer 建立 laravel 專案：
```php=
composer create-project laravel/laravel 專案名稱 --prefer-dist
```
2. 移到專案路徑下(用Cmder的目前路徑為wagon/uwamp/www)：
```php=
 cd 專案名稱
```
3. 更新 composer：
```php=
composer update
```
4. 透過artisan產生一組網站專屬密鑰(確保session、password等加密資料安全性)：
```php=
php artisan key:generate
```
5. 執行 Migration：
```php=
php artisan migrate
```
6. 驗證建置是否成功
打開瀏覽器：http://localhost:8000
或是點選UwAmp中點 “Browser www”

# Controller 創建與使用：
1. 新增controller，記得cd到專案底下的public去進行操作，且採用駝峰式命名(ex：TasksController)：
```php=
 php artisan make:controller {Name}Controller
```
2. 將 Route 指向 Controller(routes的web中使用)
```php=
Route::get('/', [TasksContorller::class, 'index']);
Route::post('tasks', [TasksContorller::class, 'store']);
Route::patch('tasks/{task}', [TasksContorller::class, 'update']);
Route::delete('tasks/{task}', [TasksContorller::class, 'destroy']);
```
3. 到新創的Controller中
```php=

class TaskController extends Controller
{
    public function index()
    {
        return view('view要顯示的檔案');
    }
}
```
4. 注意事項
記得引入愈要使用之檔案到各個使用之檔案中，比如說：

![](https://i.imgur.com/0Jbvkcx.png)
```php=
use App\Http\Controllers\{controllername};
```
# Route 參考指令用法
**動作：**
```php=
//接收 GET (讀取)
Route::get('{uri}', function() {/*Closure*/});
//接收 POST (寫入)
Route::post('{uri}', function() {/*Closure*/});
//接收 PATCH (更新)
Route::patch('{uri}', function() {/*Closure*/});
//接收 DELETE (刪除)
Route::delete('{uri}', function(){/*Closure*/});
)
``` 
**反應：**
```php=
//回傳字串
Route::get('{uri}', function() {
 return 'any string';
});
//回傳 view
Route::get('{uri}', function() {
 return view('{view name}');
});
//跳轉⾴⾯
Route::get('{uri}', function() {
 return redirect('{uri}');
});
``` 
**接收參數：**
```php=
//接收必要參數
Route::get('hello/{name}', function($name) {
 return 'hello, '.$name;
});
//接收選擇性參數
Route::get('hello/{name?}', function($name = 'Everybody') {
 return 'hello, '.$name;
});
``` 
# Blade
**新增一個 Blade(VS code版)：**
點選view的資料夾，再點選資料列的右上角的新增檔案，命名須遵守{name}.blade.php。

**迴圈：**
**if：**
```php=
@if
@elseif、
@else
@endif
```
**for：**
```php=
@for($i ; $i ; $++)
@endfor
@foreach($tasks as $task)
@endforeach
```  
**switch：**
```php=
@switch($i)
@case(1)
First case...
@break
@default
Default case...
@endswitch
```
**具有boostrap的簡易靜態介面(練習題)：**
```html=
<!DOCTYPE html>
<html>
<script src="resources\js\app.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 <div class="container-fluid">
  <div class="row">
    <form>
        <input type="text" name="name">
        <input type="text" name="url">
        <input type="text" name="short_url">
    </form>
    <button type="button" class="btn btn-primary btn-sm">新增</button>
    <form>
        <input type="text" name="keyword">
    </form>
    <button type="button" class="btn btn-primary btn-sm">查詢</button>
    </div>
  </div>
  <div class="container">
    <table style="width:100%;border-collapse: collapse;" id="work_table">
        <tbody>
            <tr>
                <th>時間</th>
                <th>短網址</th>
                <th>網站名稱</th>
                <th>關鍵字</th>
                <th></th>
            </tr>
            <tr id="1">
              <td>2022-9-22-10-48-33</td>
              <td id="url"><a href="https://www.instagram.com">https://www.instagram.com</td>
              <td id="url_name">IG</td>
              <td id="keyword">IG</td>
              <td >
                <a href="https://www.instagram.com">
                <input type="button" value="進入" class="btn btn-primary btn-sm">
                </a>
                <input type="button" value="編輯" class="btn btn-primary btn-sm" onclick="edit(this)">
                <input type="button" value="刪除" class="btn btn-primary btn-sm">
              </td>
            </tr>
        </tbody>
    </table>
</div>
</html>
```
**結果：**

![](https://i.imgur.com/fyLmzl0.png)

# 資料庫建置
**連接至資料庫(使用uwamp)：**
1. 打開uwamp並按下PHPMyAdmin(圖1)，點擊後會透過瀏覽器跳轉到資料哭的都入畫面(圖2)。

**圖1：**
![](https://i.imgur.com/J6ndu6K.png)
**圖2：**
![](https://i.imgur.com/ksh3iDU.png)

2. 登入(圖2)：
預設阜號：localhost:33060
預設帳號：root
預設密碼：root

3. 建立要給 Laravel 使⽤的資料庫(專案名稱_環境)，點選建立資料庫：

![](https://i.imgur.com/57eq6f6.png)

**命名，並且儲存就好了：**
![](https://i.imgur.com/ycuumHG.png)

4. 修改env.檔案：
**需修改之內容：**
DB_PORT=33060(要與資料庫的port號一致)
DB_DATABSE=你創建的資料庫名稱
![](https://i.imgur.com/IIEdRxd.png)

# Laravel Migration
**創建一個資料表，記得cd到專案底下的public去進行操作**：
```php=
php artisan make:migration create_名稱_table
```
使用編譯器打開專案資料夾，然後再到database的資料夾當中，找到自己剛剛創建的table，並編輯up裡的內容，改成自己需要的，$table->型態('名稱')。
```php=
 public function up()
    {
        Schema::create('urls', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string('url');
            $table->string('short_url');
            $table->string('name',64);
            $table->string('keyword',64);
            $table->integer('click');
        });
    }
```
**型態參考連結：**
https://laravel.tw/docs/5.0/schema`