# 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. 注意事項
記得引入愈要使用之檔案到各個使用之檔案中，比如說：
```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>
```
**結果：**
# 資料庫建置
**連接至資料庫(使用uwamp)：**
1. 打開uwamp並按下PHPMyAdmin(圖1)，點擊後會透過瀏覽器跳轉到資料哭的都入畫面(圖2)。
**圖1：**
**圖2：**
2. 登入(圖2)：
預設阜號：localhost:33060
預設帳號：root
預設密碼：root
3. 建立要給 Laravel 使⽤的資料庫(專案名稱_環境)，點選建立資料庫：
**命名，並且儲存就好了：**
4. 修改env.檔案：
**需修改之內容：**
DB_PORT=33060(要與資料庫的port號一致)
DB_DATABSE=你創建的資料庫名稱
# 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`
Sign in with Wallet
Connect another wallet