Laravel Ⅰ
GDSC NCU Core Team Member
@Ming-Yu Ku
柚子、顧哥... 都可以啦無所謂
中央資管 大二
管院電算中心 網管
教學發展中心 網管
GDSC 21-22 Core Team Member (NCU)
About Me
Agenda
• 確認電腦環境
• MVC架構
• Route的設定
• blade.php
• Basic CRUD
Prerequisite
1. 開啟「命令提示字元」,輸入「php –v」
錯誤!!!
安裝教學:
https://hackmd.io/@songchiu/BkjoSMhW9
Prerequisite
1. 開啟「命令提示字元」,輸入「php –v」
正確!!!
Prerequisite
2. 在命令提示字元,輸入「composer –v」
錯誤!
Prerequisite
2. 在命令提示字元,輸入「composer –v」
正確!!!
Prerequisite
3. 開啟XAMPP Control Panel,開啟Apache、MySQL
Prerequisite
3. 開啟Apache、MySQL成功後,會有綠色的框框
介紹一下Laravel的MVC架構
Ref: https://www.infolight.com/news/Images/BOOK113/image001.png
介紹一下Laravel的版本
Ref: https://en.wikipedia.org/wiki/Laravel
安裝Laravel 9!
在命令提示字元輸入 (綠色文字可自訂):
composer create-project laravel/laravel my-first-laravel9
開啟Laravel 9專案資料夾
用VSCode或其他編輯器開始該資料夾
啟動Laravel 9
開啟VSCode的Terminal,輸入 php artisan serve
檢查是否啟動成功
可以在瀏覽器輸入「http://127.0.0.1:8000/」
開始設定路由表
進到routes資料夾,開啟web.php
先介紹HTTP的GET、POST
它是用來傳遞資料的,只是方式不太一樣
GET:
POST:
空的 沒東西
小結:GET會把資料透過網址傳遞;POST不會
早期的網頁路徑
一個網址會對應到一個檔案
ref: https://i.stack.imgur.com/Lgldj.png
例如:
http://網址/wordpress/wp-load.php
http://網址/wordpress/wp-login.php
http://網址/wordpress/wp-mail.php
Laravel的網頁路徑
都可以在routes/web.php進行設定
改改看web.php
都可以在routes/web.php進行設定
來看看view的運作方式
可以去resources/views查看
應該會看到 xxx.blade.php
所有的view都會放在這裡
在呼叫view時
直接呼叫名字即可
可省略 .blade.php
點開welcome.blade.php
可以看到滿滿的HTML,網頁前端的code(tag)都寫在這
新增看看一個blade
在views的資料夾上按右鍵,點選New File
幫自己的blade定一個名字
輸入blade的名字,格式:xxx.blade.php (xxx為自訂)
先介紹最基本的HTML Tag
一些在blade常用的語法
如果要建立一套系統…有好幾個頁面…
一些在blade常用的語法
可以先寫好yield,待會就可以快速的部署網頁
設定好yield後,再去新增一個blade
以下圖為例,新增了 choose.blade.php
開始設定剛新增的blade
home.blade.php
choose.blade.php
開始設定剛新增的blade
回到web.php設定路徑
去瀏覽器輸入該網址
就可以看到網頁呈現出剛剛設定的東西了
新增一個Controller
在vscode裡開一個新的終端機,輸入:
php artisan make:controller CourseController --resource
查看剛新增的Controller
可以在 app/Http/Controllers 找到 CourseController.php
會看到
好幾個 function
Controller的function對應到的功能
查看course的清單
取得某個course的資訊
刪除某個course
儲存course的資料
更新某個course的資訊
註:有底色的會動到資料庫
在web.php呼叫Controller
加入這兩行
偷懶用複製的:use AppHttpControllersCourseController;
偷懶用複製的:Route::resource('course', CourseController::class);
新增一個Model
在vscode裡的終端機,輸入:
php artisan make:model Course --migration
查看剛新增的Model
可以在 app/Models 找到 Course.php
可以在這裡指定欄位
是否可以被更動
還有建立的Migration
可以在 database/migrations找到 (略)_courses_table.php
還有建立的Migration
可以在 (略)_courses_table.php 裡看到下面的程式碼
在這邊設定好後,就可以幫資料庫新增資料表
開始為資料表設定欄位
新增三個欄位,分別是「課名」、「學分」、「說明」
懶的打字可以從這裡複製:
$table->string('title');
$table->integer('credit');
$table->string('intro');
準備為資料庫建立資料表
但是在這之前…要先確認一下系統的參數 (.env)
開啟phpmyadmin建立資料庫
請到:http://localhost/phpmyadmin 建立
開啟phpmyadmin建立資料庫
請在紅框處輸入laravel
開啟phpmyadmin建立資料庫
建立完成後會看到這個畫面
正式為資料庫建立資料表
開啟終端機,輸入 php artisan migrate
去phpmyadmin看有沒有建立成功
請到:http://localhost/phpmyadmin 查看
回到剛才新增好的Controller
可以在 app/Http/Controllers 找到 CourseController.php
實作這三個 function
回到剛才新增好的CourseController
先引入Model: use AppModelsCourse;
列出課程清單
指定資料按照學分由小到大排序並傳送到index.blade.php
註:index.blade.php還沒新增,若跳錯誤是正常的
可以直接複製:
return view('index', ['courses' => Course::orderBy('credit', 'asc')->get()]);
列出課程清單在瀏覽器上
在view新增 index.blade.php,可去choose複製程式碼
列出課程清單在瀏覽器上
開始針對 @section('content') 裡的內容進行處理
<h2>NCU課程清單</h2><hr>
@foreach ($courses as $c)
課名:{{ $c->title }}
學分數:{{ $c->credit }}
說明:{{ $c->intro }}<br>
@endforeach
列出課程清單在瀏覽器上
去瀏覽器檢查是否有資料顯示出來
怎麼是空的?!
因為資料庫是空的
新增課程到資料庫
在view新增一個 create.blade.php ,可去choose複製程式碼
新增課程到資料庫
開始針對 @section('content') 裡的內容進行處理
<h2>NCU課程建立</h2><hr>
<form action="{{ route('course.store') }}"
method="POST">
@csrf
課名:<input type="text" name="title">
學分:<input type="text" name="credit">
說明:<input type="text" name="intro">
<input type="submit" value="確認送出">
</form>
Controller的function對應到的功能
查看course的清單
取得某個course的資訊
刪除某個course
儲存course的資料
更新某個course的資訊
註:有底色的會動到資料庫
新增課程到資料庫
記得CourseController.php也要設定
新增課程到資料庫
去瀏覽器檢查是否有正常顯示剛設定的頁面
網址:
http://127.0.0.1:8000/course/create
新增課程到資料庫
回到CourseController.php完成最後的手續
剛在create.blade.php的設定
新增課程到資料庫
回到CourseController.php完成最後的手續
可以從這裡複製:
$course = new Course();
$course->title = $request->input('title');
$course->credit = $request->input('credit');
$course->intro = $request->input('intro');
$course->save();
return redirect()->route('course.index');
新增課程到資料庫
回到瀏覽器來測試看看吧~
新增課程到資料庫
也可以去phpmyadmin看看有沒有資料
Laravel Ⅰ
GDSC NCU Core Team Member
@Ming-Yu Ku
https://forms.gle/G56pcJss4csQwuYo6
20220316 laravel I

20220316 laravel I