20220316 laravel I

1. Laravel Ⅰ
GDSC NCU Core Team Member
@Ming-Yu Ku

2. 柚子、顧哥... 都可以啦無所謂
中央資管 大二
管院電算中心 網管
教學發展中心 網管
GDSC 21-22 Core Team Member (NCU)
About Me

3. Agenda
• 確認電腦環境
• MVC架構
• Route的設定
• blade.php
• Basic CRUD

4. Prerequisite
1. 開啟「命令提示字元」，輸入「php –v」
錯誤!!!
安裝教學：
https://hackmd.io/@songchiu/BkjoSMhW9

5. Prerequisite
1. 開啟「命令提示字元」，輸入「php –v」
正確!!!

6. Prerequisite
2. 在命令提示字元，輸入「composer –v」
錯誤!

7. Prerequisite
2. 在命令提示字元，輸入「composer –v」
正確!!!

8. Prerequisite
3. 開啟XAMPP Control Panel，開啟Apache、MySQL

9. Prerequisite
3. 開啟Apache、MySQL成功後，會有綠色的框框

10. 介紹一下Laravel的MVC架構
Ref: https://www.infolight.com/news/Images/BOOK113/image001.png

11. 介紹一下Laravel的版本
Ref: https://en.wikipedia.org/wiki/Laravel

12. 安裝Laravel 9!
在命令提示字元輸入 (綠色文字可自訂)：
composer create-project laravel/laravel my-first-laravel9

13. 開啟Laravel 9專案資料夾
用VSCode或其他編輯器開始該資料夾

14. 啟動Laravel 9
開啟VSCode的Terminal，輸入 php artisan serve

15. 檢查是否啟動成功
可以在瀏覽器輸入「http://127.0.0.1:8000/」

16. 開始設定路由表
進到routes資料夾，開啟web.php

17. 先介紹HTTP的GET、POST
它是用來傳遞資料的，只是方式不太一樣
GET:
POST:
空的 沒東西
小結：GET會把資料透過網址傳遞；POST不會

18. 早期的網頁路徑
一個網址會對應到一個檔案
ref: https://i.stack.imgur.com/Lgldj.png
例如：
http://網址/wordpress/wp-load.php
http://網址/wordpress/wp-login.php
http://網址/wordpress/wp-mail.php

19. Laravel的網頁路徑
都可以在routes/web.php進行設定

20. 改改看web.php
都可以在routes/web.php進行設定

21. 來看看view的運作方式
可以去resources/views查看
應該會看到 xxx.blade.php
所有的view都會放在這裡
在呼叫view時
直接呼叫名字即可
可省略 .blade.php

22. 點開welcome.blade.php
可以看到滿滿的HTML，網頁前端的code(tag)都寫在這

23. 新增看看一個blade
在views的資料夾上按右鍵，點選New File

24. 幫自己的blade定一個名字
輸入blade的名字，格式：xxx.blade.php (xxx為自訂)

25. 先介紹最基本的HTML Tag

26. 一些在blade常用的語法
如果要建立一套系統…有好幾個頁面…

27. 一些在blade常用的語法
可以先寫好yield，待會就可以快速的部署網頁

28. 設定好yield後，再去新增一個blade
以下圖為例，新增了 choose.blade.php

29. 開始設定剛新增的blade
home.blade.php
choose.blade.php

30. 開始設定剛新增的blade

31. 回到web.php設定路徑

32. 去瀏覽器輸入該網址
就可以看到網頁呈現出剛剛設定的東西了

33. 新增一個Controller
在vscode裡開一個新的終端機，輸入：
php artisan make:controller CourseController --resource

34. 查看剛新增的Controller
可以在 app/Http/Controllers 找到 CourseController.php
會看到
好幾個 function

35. Controller的function對應到的功能
查看course的清單
取得某個course的資訊
刪除某個course
儲存course的資料
更新某個course的資訊
註：有底色的會動到資料庫

36. 在web.php呼叫Controller
加入這兩行
偷懶用複製的：use AppHttpControllersCourseController;
偷懶用複製的：Route::resource('course', CourseController::class);

37. 新增一個Model
在vscode裡的終端機，輸入：
php artisan make:model Course --migration

38. 查看剛新增的Model
可以在 app/Models 找到 Course.php
可以在這裡指定欄位
是否可以被更動

39. 還有建立的Migration
可以在 database/migrations找到 (略)_courses_table.php

40. 還有建立的Migration
可以在 (略)_courses_table.php 裡看到下面的程式碼
在這邊設定好後，就可以幫資料庫新增資料表

41. 開始為資料表設定欄位
新增三個欄位，分別是「課名」、「學分」、「說明」
懶的打字可以從這裡複製：
$table->string('title');
$table->integer('credit');
$table->string('intro');

42. 準備為資料庫建立資料表
但是在這之前…要先確認一下系統的參數 (.env)

43. 開啟phpmyadmin建立資料庫
請到：http://localhost/phpmyadmin 建立

44. 開啟phpmyadmin建立資料庫
請在紅框處輸入laravel

45. 開啟phpmyadmin建立資料庫
建立完成後會看到這個畫面

46. 正式為資料庫建立資料表
開啟終端機，輸入 php artisan migrate

47. 去phpmyadmin看有沒有建立成功
請到：http://localhost/phpmyadmin 查看

48. 回到剛才新增好的Controller
可以在 app/Http/Controllers 找到 CourseController.php
實作這三個 function

49. 回到剛才新增好的CourseController
先引入Model： use AppModelsCourse;

50. 列出課程清單
指定資料按照學分由小到大排序並傳送到index.blade.php
註：index.blade.php還沒新增，若跳錯誤是正常的
可以直接複製：
return view('index', ['courses' => Course::orderBy('credit', 'asc')->get()]);

51. 列出課程清單在瀏覽器上
在view新增 index.blade.php，可去choose複製程式碼

52. 列出課程清單在瀏覽器上
開始針對 @section('content') 裡的內容進行處理
<h2>NCU課程清單</h2><hr>
@foreach ($courses as $c)
課名：{{ $c->title }}
學分數：{{ $c->credit }}
說明：{{ $c->intro }}<br>
@endforeach

53. 列出課程清單在瀏覽器上
去瀏覽器檢查是否有資料顯示出來
怎麼是空的？！
因為資料庫是空的

54. 新增課程到資料庫
在view新增一個 create.blade.php ，可去choose複製程式碼

55. 新增課程到資料庫
開始針對 @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>

56. Controller的function對應到的功能
查看course的清單
取得某個course的資訊
刪除某個course
儲存course的資料
更新某個course的資訊
註：有底色的會動到資料庫

57. 新增課程到資料庫
記得CourseController.php也要設定

58. 新增課程到資料庫
去瀏覽器檢查是否有正常顯示剛設定的頁面
網址：
http://127.0.0.1:8000/course/create

59. 新增課程到資料庫
回到CourseController.php完成最後的手續
剛在create.blade.php的設定

60. 新增課程到資料庫
回到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');

61. 新增課程到資料庫
回到瀏覽器來測試看看吧~

62. 新增課程到資料庫
也可以去phpmyadmin看看有沒有資料

63. Laravel Ⅰ
GDSC NCU Core Team Member
@Ming-Yu Ku

64. https://forms.gle/G56pcJss4csQwuYo6