# Laravel教學 2023/2/23 ## 先進入官網, 搜尋文件時注意版本. (https://laravel.com/) ## 台灣工程師當志工製作的說明網站, 版本比較舊,建議看官網 https://laravel.tw/ ## 官方的教學影片 laracasts.com ## laravel是MVC架構, 為什麼要用laravel? 因為好維護(前提是開發者按照規範,將程式放在適當的地方), 可分工=資料庫在Model, 視覺CSS/html等在Views, 邏輯(程式中實際執行的計算、判斷、控制流程等)在Control. 後面要維護的人知道要去哪裡找需要的東西.所以好維護. ## laravel運作流程: ![](https://i.imgur.com/oQoQ7xj.png) ## 老師分享chrome 好用翻譯套件:Language Reactor ## 流程:我們使用composer安裝laravel.進入composer: ![](https://i.imgur.com/TMjaZi6.png) ## 下載適合版本的composer. 並安裝. 可以進入cmd, 輸入composer -v確認詳細資料或composer -V看版本.(v就是version) ![](https://i.imgur.com/9ojzDKz.png) ## 開始我們第一個laravel專案, copy以下指令,於cmd輸入 ![](https://i.imgur.com/zlT0EDL.png) ## 安裝成功: ![](https://i.imgur.com/ZNpZQhd.png) ## 輸入以下: ![](https://i.imgur.com/CxBTcVr.png) ## 然後在瀏覽器上輸入http://localhost:8000 ![](https://i.imgur.com/LtxQPme.png) ## 如果出現以下畫面表示成功: ![](https://i.imgur.com/f2II4Dk.png) ## 找到example-app資料夾, 用vscode開啟 ## 在resources資料夾的views資料夾,找到welcome.blade.php 搜尋documentation,將字樣改掉, 然後再cmd 重新輸入php artisan serve. 讓伺服器跑起來. 重新進入localhost:8000就會看到字樣不一樣了. 或是copy一份, 將原來的檔案內容刪掉, 另外貼一段網頁程式碼, 他也會跑. ## 如何用xampp 開啟laravel? 進入xampp, 去修改documentroot路徑. ![](https://i.imgur.com/atlzxF6.png) ## 路徑在laravel的public的資料夾的index.php, 將此路徑設定給xampp就可以. ## 用vs code打開,不要有其他上層. ![](https://i.imgur.com/XPZGL8f.png) ## 設定好 ![](https://i.imgur.com/UKQWOTr.png) ## 在routers資料夾裡面的web.php可以設定多個路徑: ## 可以設定連到resources的views裡面的網頁. ## get裡面的第一個參數是網址, return view(檔名),這個檔名在views資料夾的xx.blade.php,xx就是你的檔名. 網址的參數如果像29行檔名是f1的話,views資料夾裡面就要有一個fi.blade.php的檔案用來讀取. 24行的'/', 就是根目錄的意思(好像預設讀取index.php). ![](https://i.imgur.com/3yhucQy.png) ## 練習製作網頁 ## 注意第19行的語法糖衣連結寫法.也是可以的, 以及第12行我的檔案名稱是f1.blade.php,這裡只要寫./f1. 這種我們稱為helper ![](https://i.imgur.com/cdy6zA8.png) ## 可以安裝laravel balde snippets套件(打功能跳出提示) ![](https://i.imgur.com/43R1vsH.png) ## 也可以在網頁上打php語法, 但是上下要用@php+@endphp包起來,也會有作用 ![](https://i.imgur.com/tRlomoj.png) ## 插入背景圖片,可以用asset產生相對路徑, 圖片要放到public資料夾裡面. ## 下面的例子是將圖片放在public資料夾裡面的image資料夾中. ![](https://i.imgur.com/Y96fvNK.png) ## helper url('')寫法: ## 網頁連結如同22行的寫法, ![](https://i.imgur.com/fWfSkBP.png) ## web.php那邊的get路徑要跟網頁上的依樣,才有作用. 如果更換網域時,兩邊都要更換才行.但是這樣很不方便, 所以多了一個route寫法. ![](https://i.imgur.com/h4pl9z7.png) ## 另一個helper寫法: route(''). 這是連接網頁的"小名"的概念. ## view的f3,代表f3.blade.php,後面用箭頭打name('自己命名'). ![](https://i.imgur.com/q4obnFn.png) ## 然後在網頁上的a tag裡面打第32行. 這樣如果網域有變更, 只要改web.php的get路徑就好. ![](https://i.imgur.com/PU38xiD.png) # 2023/3/3 ## 複習 建立新的專案 car ## routes/web.php 建立新的route, cars這個複數是有意義的. 連到view的car. ## 注意21行網域為'/cars'. 所以在瀏覽器網頁上輸入:localhost/cars可以顯示views的car.blade.php. ## resources/views 建立car.blade.php ![](https://i.imgur.com/htRLeFb.png) ## OOP 物件導向: - 就是class - ex:我們常用的class DB{} - 在變數跟函式在OOP裡面稱呼的差異: 參考圖8 - 宣告的方式: public/protected/private | 關鍵字 | 說明 | 自身類別 | 子類別 | 實體物件(ex:new DB) | | --------- | --------------------------------------------------------------------- | -------- | ------ | -------- | | public | 可在任何地方存取 | ok | ok | ok | | protected | 可在自己class裡面用, 繼承的也可以,ex:class fruit(繼承)class apple. 在apple可以用. | ok | ok | not ok | |private | 只能在自己的class裡面用|ok|not ok |not ok| | 圖8 | OOP | 一般 | | ---- | -------- | -------- | | 變數 | property | variable | | 函式 | method | function | ## 來教controllers /參考官網的basic裡面的controllers. ![](https://i.imgur.com/9dGmYIQ.png) ## 在專案car底下, 用cmd, 輸入指令:php artisan make:controller CarController ## 注意 CarController的Car的C是大寫. ## 會在專案資料夾的/app/Http/Controllers資料夾裡面生成Controller.php檔案. ## 如果檔案生成錯誤,可以將錯誤的檔案刪掉, 再重新生成一次. 然後在檔案裏面寫入function sayHello 如下: ![](https://i.imgur.com/J5Y4UAN.png) ## 然後要來定義route(vs code裡面打 ctrl+p 可以打檔案名稱快速尋找檔案), 在web.php檔案裡面輸入: ![](https://i.imgur.com/oxXzCka.png) ## 注意現在是CarController, 不是UserController, 修改一下: ![](https://i.imgur.com/TOazvcW.png) ## 因為現在路徑改為/sayHello. 所以在瀏覽器輸入localhost:sayHello. 會顯示CarController.php裡面我們設定的function sayHello. 會顯示如下: ![](https://i.imgur.com/TTwTwJa.png) ## Resource Controllers ## 新建立一個resource ![](https://i.imgur.com/8TU6iYc.png) ## 以下複製到web.php 讓新的Controller可以用 ![](https://i.imgur.com/e74vaaM.png) ## 下圖的action就是laravel的增刪改查. ![](https://i.imgur.com/I5IaShx.png) ## cmd指令:php artisan route:list ## 可以將路徑都show出來 ![](https://i.imgur.com/iar7MHm.png) # 2023/3/8 建立project students ## 建立project cmd 輸入:composer create-project laravel/laravel 你要建立的專案名稱 ## 進入project cmd 輸入: cd 你的專案名稱 (進入你的專案資料夾) php artisan serve (啟動artisan) (XAMPP的documetnroot記得修改到:專案名稱/public) ## 建立resource controller & route 官網的basics/controllers cmd 輸入: 在laravel要注意單複數, 按照官網的寫法. php artisan make:controller UserController --resource(官網範例) php artisan make:controller StudentController --resource(實際輸入) ![](https://i.imgur.com/S7mmA38.png) 搞定route 在web.php 輸入指令: 官網範例 use App\Http\Controllers\PhotoController; Route::resource('photos', PhotoController::class); 實際修改 use App\Http\Controllers\專案名稱Controller; Route::resource('官網複數', 專案名稱Controller::class); ## view 在view建立student資料夾. 在裡面建立index.blade.php 可以透過web.php的students, 從網址列輸入localhost/students, 連到StudentController. ![](https://i.imgur.com/yWQrkZK.png) # 傳遞變數的方式 ![](https://i.imgur.com/VHqN8CX.png) ![](https://i.imgur.com/Gsm60q8.png) ## 清除暫存頁面指令(at cmd): php artisan view:cache php artisan view:clear ## 官網basics/blade templates ## 官網範例 child.blade.php要放在views資料夾. ## 建立一個layout資料夾,放入app.blade.php. ## child 希望顯示的內容, app.blade=>網頁的模板. ## 如果有很多個版面是一樣的, 只有內容不一樣, 就可以快速完成. ![](https://i.imgur.com/vXUNNCj.png) # 資料庫連線 ## ctrl+p 快速找到.env檔 ## dbname修改成你要的 ex:db20 ![](https://i.imgur.com/g6TnayH.png) ## 在phpmyadmin 建立資料庫 ex: db20. 不建立也沒關係. ## cmd輸入指令php artisan migrate. 即可建立完成. # 2023/3/9 上傳的Laravel專案如何下載後重新啟動教學 ## 專案上傳的時候要注意的:1.私人帳號密碼不要上傳. 2.composer不用上傳. ## 上傳參考文章, 將laravel專案clone下來(clone下來的檔案應該只有幾百k)之後, 要執行composer install(安裝後檔案就會很大約50mb) ## 因為現在沒有.env檔, 因此輸入:cp .env.example .env(將.env.example檔案複製為.env檔案) ## 再到新增的.env檔去設定database的名字(已經設定的資料庫名子)跟登入用帳號密碼: ![](https://i.imgur.com/PdIx52W.png) ## 產生key,輸入:php artisan key:generate ## ``` https://stackoverflow.com/questions/38602321/cloning-laravel-project-from-github ``` - Clone your project - Go to the folder application using cd command on your cmd or terminal - Run composer install on your cmd or terminal - Copy .env.example file to .env on the root folder. You can type copy - - - .env.example .env if using command prompt Windows or cp .env.example .env if using terminal, Ubuntu - Open your .env file and change the database name (DB_DATABASE) to whatever you have, username (DB_USERNAME) and password (DB_PASSWORD) field - correspond to your configuration. - Run php artisan key:generate - Run php artisan migrate - Run php artisan serve - Go to http://localhost:8000/ # 新專案要建立什麼? 處理增改刪查~~ ## controller/db/view/model/migration ## 建立controller, web.php那裏建立controller的連線(xampp的documetnroot記得調整),測試是否連到(可以用dd()). ## 建立view php artisan make:controller MemberController --resource composer create-project laravel/laravel member php artisan make:migration create_student_table