[Video Note] [Laravel] [Livewire] Laravel 9 Ecommerce Project

# 資源 [Ecommerce Navbar design using Html CSS and Bootstrap](https://www.fundaofwebit.com/ecommerce-template/ecommerce-navbar-design-using-html-css-bootstrap) [Ecommerce category design using Html CSS and Bootstrap 5](https://www.fundaofwebit.com/ecommerce-template/ecommerce-category-design-using-html-css-bootstrap) --- [Livewire](https://laravel-livewire.com/) ``` composer require livewire/livewire ``` [Laravel UI](https://github.com/laravel/ui) ``` composer require laravel/ui php artisan ui:auth ``` --- [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) * [bootstrap.min.css](https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css) * [bootstrap.bundle.min.js](https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js) * [Modal](https://getbootstrap.com/docs/5.0/components/modal/) * [Spinners](https://getbootstrap.com/docs/5.0/components/spinners/) * [Navs and tabs](https://getbootstrap.com/docs/5.0/components/navs-tabs/) * [Carousel](https://getbootstrap.com/docs/5.0/components/carousel/#slides-only) --- [jQuery](https://releases.jquery.com/) * [jquery-3.7.1.min.js](https://code.jquery.com/jquery-3.7.1.min.js) [BootstrapDash](https://www.bootstrapdash.com/) * [BootstrapDash Majestic](https://www.bootstrapdash.com/product/majestic) * [BootstrapDash/MajesticAdmin-Free-Bootstrap-Admin-Template](https://github.com/BootstrapDash/MajesticAdmin-Free-Bootstrap-Admin-Template) # Part 1: Laravel 9 & Livewire Installation and file setup with DB connection ## 1. Laravel 9 安裝 - 透過Composer創建一個新的Laravel專案，使用Laravel文件中的指令。 - 使用指令 `composer create-project --prefer-dist laravel/laravel laraecommerce` 來建立專案。 - 安裝完成後，將專案開啟在VS Code編輯器中進行進一步的配置。 ## 2. 啟動Laravel應用程式 - 使用指令 `php artisan serve` 啟動Laravel應用程式。 - 伺服器啟動後，應用程式可在 `localhost:8000` 上訪問。 - 示範使用的是Laravel 9版本，並確認安裝成功。 ## 3. Livewire安裝 - 根據Livewire文件中的安裝步驟，將Livewire 2整合到Laravel專案中。 - 使用指令 `composer require livewire/livewire` 來在Laravel專案中安裝Livewire。 - Livewire現在已成功整合到Laravel應用程式中。 ## 4. Livewire設定 - Livewire設定需要在主要專案檔案中包含所需的Livewire腳本和樣式表。 - 通常在使用Livewire元件的主要Blade檔案中進行此設定。 - 在這個影片中，並未在歡迎Blade中演示Livewire設定，但提到在下一個影片中在驗證設定期間將進行此設定。 ## 5. 資料庫連線 - 資料庫連線在`.env`檔案中進行配置。 - 教學使用名為"e-commerce"的資料庫，使用root使用者且無密碼。 - 資料庫配置設定為 `DB_DATABASE=e-commerce`，`DB_USERNAME=root`，和 `DB_PASSWORD=`。 # Part 2 : Make login & registration system & integrate bootstrap 5 & Livewire Setup ## Laravel 9 Authentication Setup - 影片開始進入Laravel 9電子商務教學的第二部分，著重在建立登入和註冊系統，即身份驗證（Authentication）。 - 強調不使用Bootstrap UI、View React或Breeze登入驗證套件，而是使用純粹的Laravel身份驗證架構。 ## 安裝 Laravel UI - 使用Composer執行 `composer require laravel/ui` 安裝Laravel UI套件。 - 使用 `php artisan ui:auth` 生成身份驗證的架構。 ## 設計登入頁面 - 指出在這步驟中，登入表單已經生成，但缺少設計，即CSS樣式。 - 避免使用Breeze套件等，改採用Bootstrap 5。 ## 整合 Bootstrap 5 - 前往getbootstrap.com取得Bootstrap 5的CDN連結。 - 在public目錄中建立assets/css資料夾，將Bootstrap 5樣式和JavaScript文件儲存其中。 - 運用jQuery依賴，需額外包含jQuery的CDN連結。 ## 整合 Livewire - 回顧之前的Livewire安裝，並在Blade檔案中引入Livewire相關樣式和腳本。 - 強調需要在`<head>`前和`<body>`前分別引入Livewire相關檔案。 ## 註冊和登入 - 在遷移前，先確認資料庫連線和Laravel E-commerce資料表的建立。 - 使用 `php artisan migrate` 將資料表遷移至資料庫。 - 展示註冊和登入的實際操作，強調驗證註冊和登入功能。 # Part 3: How to setup Admin Panel for ecommerce in laravel 9 ## 下載 Admin Panel Template - 影片開始進入Laravel 9電子商務教學的第三部分，重點在於建立一個後台管理面板或管理儀表板，用於管理電子商務網站。 - 示範下載了一個免費的管理面板模板，名為Majestic Admin Free Bootstrap Admin Panel。 ## 整合 Admin Panel 到 Laravel 專案 - 在 [getbootstrap.com](https://getbootstrap.com/) 下載並解壓了管理面板模板。 - 在VS Code中開啟Laravel專案，創建`admin.blade.php`和`admin`資料夾，分別存放管理面板的Blade檔案和相關資源。 - 將模板的CSS樣式和JavaScript文件複製到Laravel的`public`資料夾下。 ## 設定 Admin Panel 頁面 - 在`admin.blade.php`中，使用`@include`指令引入`navbar`和`sidebar`，並建立`yield`區域，準備放置後續內容。 - 創建了`navbar.blade.php`和`sidebar.blade.php`，將模板的相應部分複製到這兩個Blade檔案中。 ## 設定 Dashboard Route 和 Controller - 在`web.php`中使用`Route::prefix`創建一個`/admin`的群組路由，並在其中建立`/dashboard`的路由，指向`DashboardController`的`index`方法。 - 使用`php artisan make:controller`命令在`Admin`資料夾中創建了`DashboardController`，並在`index`方法中返回了`admin.dashboard`視圖。 ## 建立 Dashboard Blade 檔案 - 在`resources/views/admin`資料夾中建立了`dashboard.blade.php`，並使用`@extends`和`@section`指令擴展了`admin.blade.php`的佈局。 - 在`dashboard.blade.php`中加入了一些測試文字，以確保路由和視圖的正確設定。 ## 顯示 Admin Dashboard 內容 - 在`dashboard.blade.php`中，將測試文字替換為模板提供的內容，以顯示整個管理儀表板的樣式。 --- # Part 4: How to make Admin Middleware in laravel | redirect admin login to dashboard ## Middleware 創建及資料庫欄位設置 - 在這個教學的第四部分中，要實現一個 Admin Middleware，目的是讓特定的使用者只能登入到他的管理儀表板，而隨機用戶不能登入管理儀表板。 - 開始前，先在 users 資料表中添加一個 `role` 欄位，用以區分一般使用者和管理員。透過 `php artisan make:migration` 創建一個 migration，並在該 migration 中添加 `role` 欄位，默認值為 0。 - Migration 創建完成後，執行 `php artisan migrate` 以將變更套用到資料庫。 ``` php artisan make:migration add_details_to_users_table ``` ## 創建 Admin Middleware - 使用 `php artisan make:middleware` 創建 Admin Middleware，該 Middleware 的主要作用是檢查使用者的 `role` 是否為管理員（1）。 - 在 Middleware 的 `handle` 方法中，透過條件判斷，如果使用者不是管理員，則導向首頁並顯示「Access Denied」的訊息。 ``` php artisan make:middleware AdminMiddleware ``` ## 登入後的 Redirect 設定 - 在登入後，使用者如果是管理員，將會被導向管理儀表板，如果是一般使用者，則導向首頁。 - 在 LoginController 的 `authenticated` 方法中進行判斷，如果使用者的 `role` 是 1，表示是管理員，將導向管理儀表板；否則將導向首頁。 - 此外，將原先的 `redirect` 設定改為 `redirect_back` 以提供更好的使用者體驗。 ## Middleware 註冊及使用 - 在 `kernel.php` 檔案中，將剛剛創建的 Admin Middleware 註冊為一個 Route Middleware。 - 在 `web.php` 中使用 Middleware 來保護管理儀表板的訪問，只有經過驗證的管理員才能進入。 ## 運行測試 - 進行登入、登出和管理員權限設置的測試，確保 Middleware 正確運作。 - 透過註冊一個管理員帳號，手動將其 `role` 設置為 1，以驗證管理員登入後是否能正確導向管理儀表板。 # Part 5: How to make admin logout system in laravel 9 for ecommerce ## Admin Logout Integration - 在這個教學的一部分，我們學習如何在 Laravel 9 的電子商務專案中實現管理員登出功能。 - 在 `layouts/app.blade.php` 文件中的 Navbar 中有一個登出按鈕，我們希望在管理員儀表板中也有這個功能。 - 將 Navbar 中的登出按鈕複製到 `admin.blade.php` 文件的相應位置，確保樣式和類別名稱一致。 ## 登出按鈕與樣式 - 在管理員的 Navbar 中添加登出按鈕，保持樣式和原始登入按鈕相同。 - 透過 Laravel 的 `auth` 語法，顯示當前登入的使用者名稱。 ## 整合登出功能 - 當使用者點擊登出按鈕時，呼叫 Laravel 的登出功能，實現用戶登出。 - 在 Navbar 中的登出按鈕處，透過 Laravel 的 `auth` 指令，執行登出操作。 ## 測試登出功能 - 使用測試帳號進行登入，並確保在管理員儀表板中看到管理員的歡迎消息。 - 點擊登出按鈕，確保成功登出，然後再次測試登入。 # Part 6: Add Category in ecommerce with creating migration, model, controller ## Migration 與 Model 建立 - 使用 `php artisan` 指令建立 migration，創建 `categories` 資料表，包含 `name`, `slug`, `description`, `image`, `meta` 相關欄位，以及 `status` 作為可見性的欄位。 - 使用 `php artisan make:model` 指令建立 Category model，並設定 `$table` 與 `$fillable` 屬性。 ``` php artisan make:migration create_categories_table ``` ``` php artisan make:model Category ``` ## Controller 與 Route 設定 - 使用 `php artisan make:controller` 指令在 `Admin` 目錄下創建 `CategoryController`。 - 在 `CategoryController` 中，建立 `index` 函數以返回類別管理的首頁。 - 在 `web.php` 中設定路由，呼叫 `CategoryController` 的 `index` 函數。 ``` php artisan make:controller CategoryController ``` ## Blade 模板設計 - 在 `resources/views/admin/category` 目錄下建立 `index.blade.php` 檔案，以 Bootstrap 卡片 (`card`) 的形式顯示類別管理頁面。 - 在類別管理頁面中，使用 `row` 與 `column` 搭配 Bootstrap 樣式，設計清晰的表單排版。 ## 新增類別的表單 - 使用 `form` 標籤設計新增類別的表單，包含 `name`, `slug`, `description`, `image`, `meta` 相關欄位，以及 `status` 的勾選框。 - 透過 `meta` 欄位，分別輸入 `meta title`, `meta keyword`, `meta description`，並設計 SEO 標籤的顯示區域。 ## 資料驗證 - 使用 `php artisan make:request` 指令建立 `CategoryFormRequest`，並在其中設定資料驗證的規則。 - 在 `CategoryController` 中使用這個 request 進行資料驗證，避免無效的資料輸入。 ``` php artisan make:request CategoryFormRequest impl CategoryFormRequest ``` ## 新增類別的儲存邏輯 - 在 `CategoryController` 的 `store` 函數中，接收表單提交的資料，進行資料驗證後，將資料儲存至資料庫。 - 若有上傳圖片，則進行檔案處理、上傳與保存。 ## 表單提交錯誤處理 - 在 `create.blade.php` 中加入對表單提交錯誤的訊息顯示，讓使用者能清楚看到錯誤的原因。 # Part 7: Category View, edit update, confirm delete using Livewire in Laravel ## 基本操作 - 此視頻是 Laravel 中使用 Livewire 實現電子商務項目的第 9 篇文章，專注於類別的功能。 - 創建了 Livewire 組件，用來處理類別的頁面。 - 在 Blade 文件中引入 Livewire 組件。 ``` php artisan make:livewire Admin/Category/Index ``` ## 類別列表頁面 - 使用 Livewire 組件的 `render` 方法從資料庫中獲取所有類別的記錄。 - 利用 Livewire 的分頁功能，實現分頁顯示類別列表。 ## 編輯與更新類別 - 創建編輯頁面，並將原類別資料填入表單。 - 實現更新類別的功能，包括更新類別資料以及更新類別圖片。 - 使用 Laravel 的 Route Model Binding 簡化編輯頁面的路由。 [Route Groups](https://laravel.com/docs/10.x/routing#route-groups) ## 刪除類別 - 使用 Bootstrap Modal 實現確認刪除的彈出窗口。 - 利用 Livewire 的 `wire:click` 處理刪除操作，包括刪除類別記錄和相應的圖片。 - 通過 Livewire 的事件機制，實現在刪除後關閉 Modal 並重新載入頁面。 ## 額外補充 - 使用 Laravel 的 Route Group Controller 簡化路由設定。 - 優雅地處理 Livewire 的分頁和 Bootstrap 分頁樣式。 - 處理圖片上傳，以及在更新時判斷是否需要刪除舊圖片。 - 利用 Livewire 提供的實時更新特性，實現刪除後不刷新整個頁面的效果。 # Part 8: Brands Insert and fetch data using Livewire in laravel w/ pop up modal ## 設置路由和 LiveWire 元件： - 繼續 Level 9 電子商務系列，重點放在實現品牌部分。 - 初始步驟包括為類別、新增類別和品牌設置 URL，品牌的 URL 目前導致 404 錯誤。 - 創建 LiveWire 元件來處理品牌，並將其連接到相應的路由。 ## 品牌數據庫設置： - 為 'brands' 表創建遷移和模型，包含名稱、slug 和狀態等字段。 - 使用 `php artisan migrate` 遷移創建的表。 ## LiveWire 元件創建： - LiveWire 元件用於處理品牌功能，如添加、編輯和刪除品牌。 - 在元件中擴展佈局和部分以匹配管理員儀表板。 Livewire Component ``` class Index extends Component { public function render() { return view('livewire.admin.brand.index') ->extends('layouts.admin') ->section('content'); } } ``` 確保 Livewire 組件的內容被嵌套到指定的佈局中的特定區塊。這樣可以實現整個應用中一致的佈局結構，同時允許 Livewire 組件定制其內容。 dashboard.blade.php ``` @extends('layouts.admin') @section('content') @endsection ``` ## 添加品牌界面： - 在 Bootstrap 卡片中初始設計品牌部分界面。 - 創建具有 ID、名稱、slug 和狀態等列的表格，以及一個操作按鈕。 - 整合 Bootstrap modal 用於添加品牌。 ## 表單設計和模型整合： - 為添加品牌創建 Livewire 模型表單，包含名稱、slug 和狀態的輸入字段。 - 將 Bootstrap modal 元素與 Livewire 模型功能整合。 ## 品牌驗證和插入： - 使用 Laravel 驗證規則對品牌名稱和 slug 進行表單驗證。 - 處理表單提交、驗證和將數據插入 'brands' 表中。 - 使用 Illuminate Str 類生成 slug。 ## 顯示品牌和分頁： - 從數據庫中使用 Eloquent 檢索品牌數據。 - 使用 Bootstrap 樣式實現分頁。 - 遍歷品牌數據並在表格中顯示，包含編輯和刪除操作。 ## 額外的樣式優化： - 進行樣式優化，包括按鈕、對齊和 Bootstrap 樣式，使界面更具視覺吸引力。 # Part 9: Brands - Edit & Update & Confirm Delete w/ pop up using livewire in laravel ## 設置環境： - 延續 Laravel 電子商務系列，這一篇將處理品牌數據的編輯、更新以及刪除功能。 - 使用 LiveWire 元件來實現交互和實時更新，為品牌建立完整的 CRUD 功能。 ## 編輯和更新品牌： - 新增一個 "Edit" 按鈕，當用戶點擊時會彈出一個彈出式窗口，顯示該品牌的詳細信息。 - 利用 LiveWire 元件的優勢，簡化了編輯和更新的實現，並使用 Bootstrap modal 進行視覺優化。 ## 彈出式窗口設計： - 使用 Bootstrap modal 來實現編輯、更新和刪除功能的彈出窗口。 - 添加合適的樣式和按鈕，以確保用戶體驗流暢。 ## 更新表單和提交： - 在編輯彈出窗口中，使用相同的表單模板進行更新。 - 利用 LiveWire 的功能，當用戶提交表單時，進行品牌的更新操作，並在成功後關閉彈出窗口。 ## 刪除確認和實現： - 新增 "Delete" 按鈕，彈出確認刪除的彈出式窗口。 - 使用 LiveWire 元件中的事件處理，實現品牌的安全刪除，同時提供視覺提示和用戶友好的操作。 ## 彈出窗口的優化： - 在彈出窗口中加入加載動畫，以提高用戶體驗，確保在數據操作時給予適當的反饋。 - 透過 Bootstrap 提供的 Spinner（加載指示器）實現動畫效果，使用戶能夠清晰地感知數據操作的進度。 ## 完整的 CRUD 操作： - 通過實現編輯、更新和刪除功能，實現了對品牌數據的完整 CRUD 操作。 - LiveWire 的優勢在於減少了前端和後端的耦合，提高了代碼的可讀性和可維護性。 --- # Part 10: Add Product w/ multiple Images using relationship & validation in laravel ## 設置環境： - 在 Laravel 9 電子商務系列中，這一篇開始介紹商品的添加功能，包含多張圖片的上傳。 - 通過建立關聯性和驗證來實現，並使用 Laravel 提供的 Eloquent ORM（對象關係映射）來處理數據庫操作。 ## 建立商品添加頁面： - 在 admin 的 sidebar 中新增一個 "Add Product" 鏈結，連結到 `admin/products/create` 的 URL。 - 通過 Laravel 的路由和控制器，建立了添加商品的頁面。 ## 前端表單設計： - 使用 Laravel 提供的 Blade 模板引擎，構建了包含分類、SEO標籤、商品詳情和圖片上傳的表單。 - 利用 Bootstrap 框架實現了一個具有分頁標籤的交互式表單，提高了用戶體驗。 ## 後端驗證： - 創建了一個 Request Form 來處理後端的驗證，確保用戶輸入的數據符合要求。 - 驗證涉及商品名稱、分類、價格、SEO 標籤等多個方面，確保數據的完整性和合法性。 ## 商品添加和圖片上傳： - 在後端控制器中，處理商品和圖片的添加。 - 使用 Laravel Eloquent ORM 建立了商品和商品圖片的模型關聯。 - 實現了多圖片上傳的功能，並確保文件名的唯一性，最終將圖片存儲在指定的目錄中。 ## 錯誤處理與提示： - 在前端頁面增加了錯誤信息的顯示，以便用戶在輸入錯誤時能夠清楚地看到並進行修改。 - 通過 Laravel 的 `session` 來傳遞錯誤或成功信息，提高了用戶的反饋。 ## 數據庫操作確認： - 在數據庫中查看新增的商品數據和商品圖片數據，確保添加功能正確運作。 - 運用 Laravel 的 Eloquent 提供的模型關聯，方便地處理商品和商品圖片之間的操作。 --- # Part 11: Product read, edit update and delete with images in laravel ## 1. 建立表格以顯示產品資訊： - 使用 Laravel Blade 模板引擎建立表格，顯示產品的各種資訊，如產品 ID、類別、名稱、價格、數量、狀態等。 ## 2. 處理關聯模型顯示類別名稱： - 在 Blade 模板中，使用 Eloquent ORM 的 `belongsTo` 關聯，以顯示產品所屬的類別名稱而非類別 ID。 ## 3. 編輯與更新產品資料： - 實現編輯功能，允許用戶更新產品資訊，包括類別、名稱、價格、數量、狀態等。 - 透過 Blade 模板設計編輯表單，使用 HTTP PUT 方法更新資料。 ## 4. 處理產品圖片： - 透過關聯模型設計，顯示並允許更新產品的多張圖片。 - 在編輯頁面中，使用 `foreach` 迴圈顯示已上傳的圖片，並提供刪除功能。 ## 5. 圖片刪除功能的實現： - 透過確認框提示用戶，確保他們確實要刪除該產品及其相關的所有圖片。 - 設定 Laravel 路由和控制器方法，以便刪除產品及其相關的圖片。 # Part 12: Color CRUD with confirm delete in laravel 9 ## 準備工作 - 影片內容主要講解 Laravel 9 中的電商系統，這一部分將專注在顏色的 CRUD（Create, Read, Update, Delete）操作。 - 開始前，先建立了 Colors 資料表的 migration，包括顏色名稱（name）、顏色代碼（code）和狀態（status）。 - 透過 Artisan 指令產生了 ColorsController 以及相對應的視圖檔案。 ## 顏色列表頁 - 創建了顏色列表頁面（index.blade.php），展示所有顏色的詳細資訊，並提供新增和刪除操作。 - 使用 Laravel 的 Blade 模板引擎來呈現資料。 ## 顏色新增頁 - 建立了顏色新增頁面（create.blade.php），使用了 Laravel 的表單功能，並進行了表單驗證。 - 表單提交後，資料會存入資料庫中，並顯示相應的成功訊息。 ## 顏色編輯頁 - 實作了顏色編輯頁面（edit.blade.php），同樣使用了 Laravel 表單，並處理了表單驗證。 - 提供了編輯和刪除功能，編輯功能允許修改顏色名稱、代碼和狀態。 ## 刪除確認功能 - 在顏色列表頁加入了確認刪除的 JavaScript 彈窗，使用者點擊刪除時會彈出確認視窗。 ## 刪除操作 - 實作了顏色刪除操作，當使用者確認後，刪除相應的顏色記錄。 - 透過 Laravel 的 ORM（Eloquent）來執行資料庫操作。 ## 未來展望 - 影片提到下一步將介紹如何在新增產品時加入顏色的功能，這部分預計在下一個影片中完成。 # Part 13: Add Colors to Product with Quantity in Laravel 9 - 主題：在 Laravel 9 電子商務系列中，正在進行第 9 級的教學。 - 先前進度：在前一個影片中介紹了「顏色清單」的應用。 ## 新增商品顏色選項 - 在商品新增或編輯時，需要為商品添加顏色選項。 - 不同商品類別可能有不同的顏色，因此針對每個商品進行設定。 ## 調整程式碼 - 在 `web.php` 中，前往 `product/create` 的控制器方法，以開始修改商品新增表單。 - 在新增表單中新增一個選項卡，稱之為「product color」，並在此處進行相關的顏色設定。 - 透過 Bootstrap Toggle 設定，將每個顏色以多選框的形式顯示。 ## 動態生成顏色選項 - 在控制器中，為了動態生成顏色選項，需要取得之前製作的顏色清單。 - 透過 `product/create` 的 `create` 方法，將顏色資料傳遞至新增商品的視圖中。 ## 新增數量選項 - 在新增商品顏色的部分，也新增了數量的選項。 - 使用 Bootstrap 样式設定數量輸入框，並與顏色選項一起顯示。 ## 資料庫及模型的設定 - 在 `Product` 模型中建立了 `product_colors` 的一對多關係，用以關聯商品與商品顏色的資料表。 - 建立了 `product_colors` 資料表，並包含商品 id、顏色 id、及數量等欄位。 ## 資料插入與關聯 - 在商品新增完成後，透過 `product_colors` 表格將商品與顏色數量相關聯並插入資料庫。 ## 教學結論 - 示範如何在 Laravel 9 中動態添加商品顏色選項及數量選項。 - 強調商品與商品顏色的關聯，以及如何在資料庫中存儲相應的數據。 # Part 14: Edit, Update, Delete Product Color with Quantity using Ajax Laravel 9 這段程式碼主要是在一個 e-commerce 系統的 Level 9 系列中，介紹如何在商品編輯頁面實現顏色的新增、編輯、刪除功能。以下是主要的步驟與重點： ## 編輯頁面新增顏色標籤 - 在商品編輯頁面中，新增一個標籤（tab）用於顯示商品的顏色。這個標籤的內容將用於新增、編輯、刪除商品的顏色。 - 使用 Blade 模板引擎，建立一個標籤（tab）並指定其 ID 為 "colors"，同時在該標籤中建立一個表單，用於新增、編輯、刪除商品的顏色。 ## 後端控制器處理 - 在控制器的 `edit` 方法中，取得商品資訊以及該商品已有的顏色資訊。 - 使用 Eloquent 的關聯（relationship）機制，取得商品對應的所有顏色的 ID。 - 透過比對商品顏色表（`colors` 表）中已存在的顏色 ID，找出尚未加入的顏色，用於顯示在編輯頁面供使用者選擇。 ## 編輯頁面顯示已有顏色 - 在編輯頁面中，使用迴圈遍歷所有已存在的商品顏色，顯示出這些顏色的名稱及數量。 - 提供編輯數量的輸入框，以及更新（update）和刪除（delete）按鈕。 ## 使用 AJAX 實現顏色數量的即時更新 - 使用 jQuery AJAX，在點擊更新按鈕時，取得所選商品顏色的 ID 和新的數量。 - 發送 AJAX 請求到後端，進行商品顏色數量的更新。 - 在成功更新後，使用 jQuery 刪除該行，實現即時的介面反應。 ## 使用 AJAX 實現商品顏色的刪除 - 在點擊刪除按鈕時，同樣使用 jQuery AJAX，取得所選商品顏色的 ID。 - 發送 AJAX 請求到後端，進行商品顏色的刪除。 - 在成功刪除後，使用 jQuery 刪除該行，實現即時的介面反應。 --- # Part 15: Slider Create with Form Request validation & display data in Laravel9 ## 建立資料庫和模型： - 使用 `php artisan` 工具建立 migration，以便建立 sliders 資料表。 - 在 migration 中定義 sliders 資料表的欄位，包括標題、描述、圖片和狀態。 - 使用 `php artisan make:model` 命令建立 Slider 模型，定義資料表名稱和可填充的欄位。 ## 建立控制器和視圖： - 使用 `php artisan make:controller` 命令建立 SliderController 控制器。 - 在控制器中定義路由，設定路由組和相應的方法（如 index 和 create）。 - 建立對應的視圖，包括 index.blade.php 和 create.blade.php，並設計相應的表單和畫面結構。 ## 表單驗證和資料儲存： - 建立 SliderFormRequest 請求類別，定義資料驗證規則。 - 在控制器中實現資料驗證和資料儲存的邏輯。 - 使用 Laravel 的表單請求驗證，驗證標題、描述、圖片和狀態欄位。 - 如果表單驗證通過，則將資料存入資料庫中的 sliders 資料表。 ## 顯示資料： - 從資料庫中檢索 sliders 資料表中的記錄。 - 在視圖中遍歷並顯示每個 slider 的標題、描述、圖片和狀態。 - 使用 Laravel 的 Blade 模板引擎來呈現資料，並添加編輯和刪除功能按鈕。 # Part 16: Slider - Edit Update w/ Image, FormRequest & Delete data w/ Image ## 背景介紹：這一部分主要著重於 Laravel 電子商務項目中輪播圖片的編輯、更新，以及刪除相關資料的實現。詳細解釋了在 Laravel 框架下，如何處理圖片上傳、數據庫更新，以及相關的前端和後端操作。 ## 編輯與更新輪播圖片功能： - 教學始於設置編輯按鈕，創建相對應的路由和控制器方法，將編輯頁面關聯至數據庫中的輪播圖片詳細信息。 - 展示了如何在編輯視圖中呈現輪播圖片的相關信息，同時提供了用於更新的表單。 - 在更新過程中，介紹了處理圖片上傳和刪除的方法，確保更新操作不會影響到圖片資源的完整性。 ## 刪除輪播圖片及相關資源： - 涵蓋了設置刪除按鈕的步驟，並在刪除操作中處理了與輪播圖片相關聯的圖片資源的刪除。 - 介紹了如何使用 JavaScript 的確認對話框確認刪除操作，以及如何處理刪除的路由和控制器方法。 ## 圖片上傳與處理： - 詳細解釋了如何處理圖片的上傳和更新，包括對圖片路徑的管理以及舊圖片的刪除。 - 在更新輪播圖片時，作者還討論了處理圖片數據的有效方法，以確保應用程序的穩健性和性能。 ## 總結：本教學全面涵蓋了在 Laravel 電子商務項目中實現輪播圖片管理的步驟，從編輯、更新到刪除操作，以及與圖片相關的處理，都得到詳細解釋和演示。這使得學習者能夠全面理解如何有效地管理和操作輪播圖片資源。 # Part 17: How to make dynamic slider carousel in laravel using Bootstrap 5 ## 背景介紹：本文介紹如何在 Laravel 框架中使用 Bootstrap 5 建立動態輪播圖片輪播。作者提供了詳細的步驟和代碼範例，讓讀者能夠快速了解並實現動態輪播功能。 ## 設定路由與控制器： - 教學開始於設定路由和控制器，將輪播圖片的數據與前端頁面關聯起來。作者展示如何使用 Laravel 的路由和控制器功能來處理用戶的請求，並將資料傳遞到前端視圖。 ## 整合 Bootstrap 5 輪播組件： - 文中介紹了 Bootstrap 5 的輪播組件，並提供了在 Laravel 應用中整合該組件的方法。透過導航至 Bootstrap 官方網站並尋找輪播相關文檔，讀者可以了解如何使用 Bootstrap 5 創建具有動態效果的輪播。 ## 處理動態資料與範本： - 作者示範如何從資料庫中獲取動態的輪播圖片數據，並將其傳遞到前端視圖中。透過在 Laravel 控制器中處理數據，讀者可以學習如何有效地組織和管理動態數據。 ## 前端設計與響應式佈局： - 教學還涵蓋如何設計輪播的前端頁面，包括標題、描述和圖片等元素的佈局和設計。透過將 Bootstrap 5 的輪播組件與 Laravel 應用程式結合，讀者可以輕鬆實現具有吸引力的前端設計。 ## 關於響應式設計與自訂樣式： - 作者提供了一些關於響應式設計和自定義樣式的技巧，以確保輪播在不同設備上都能夠正常顯示並具有良好的外觀。透過調整 CSS 樣式和佈局，讀者可以根據自己的需求自訂輪播的外觀和行為。 # Part 18: Make Ecommerce Navbar Design using Html, CSS, Bootstrap 5 in laravel ## 導覽欄設計背景：本文介紹了如何在 Laravel 框架中使用 HTML、CSS 和 Bootstrap 5 製作電子商務導覽欄設計。作者提供了詳細的步驟和代碼示例，以幫助讀者了解並實現具有吸引力和功能性的導覽欄。 ## 設計導覽欄組件：作者展示了如何在 Laravel 應用程序中設計導覽欄組件，包括使用 Bootstrap 5 的元件和自定義 CSS 樣式。導覽欄是網站的核心組件之一，用於導航到不同的頁面和功能。 ## 導覽欄功能設置： - 教學中涵蓋了導覽欄的功能設置，包括用戶登錄、註冊和登出功能的實現。作者演示了如何根據用戶的登錄狀態來動態顯示導覽欄中的不同選項，以提供更好的用戶體驗。 ## 添加圖標和下拉菜單： - 文中介紹了如何在導覽欄中添加圖標和下拉菜單，以增強導覽欄的功能性和可用性。作者使用了 Font Awesome 圖標庫來添加各種圖標，並通過下拉菜單提供了更多選項。 ## 響應式設計和自定義樣式： - 教學還包括了對導覽欄進行響應式設計和自定義樣式的說明。通過優化 CSS 樣式和布局，讀者可以確保導覽欄在不同設備上都能夠正常顯示並具有良好的外觀。 # Part 19: How to display Categories List in Laravel 9 ## 設定路由及頁面結構： - 本文開始介紹在 Level 9 的電子商務系列中，如何顯示所有類別（categories）的列表。首先，在 `web.php` 檔案中設定了一個路由，使得當使用者訪問 `/collections` 時，會呈現所有類別的卡片視圖。同時，講解了去除導覽欄中一個不必要的 class 以調整畫面。 ## 建立類別列表頁面： - 在 `front-end` 控制器中，新增了一個方法來處理 `/collections` 的請求。該方法取得所有類別的資料，然後將其傳遞給 `index.blade.php` 檔案，該檔案位於 `resources/views/front-end/collections/category/` 中。 ## 設計類別卡片視圖： - 透過簡單的卡片視圖設計，作者提供了一個簡單而具有吸引力的類別列表頁面。該設計包括使用 Bootstrap 5 的樣式和 CSS 調整，以呈現清晰且易於閱讀的介面。 ## 修正圖片路徑： - 针对之前存在的问题，更新了類別控制器中的圖片路徑。原本僅儲存圖片名稱，現在透過設定一個 `upload path` 變數，組合圖片路徑並進行更新。這使得可以直接在 Blade 檔案中使用正確的圖片路徑。 ## 查看結果： - 最後，通過刷新頁面，展示了成功獲取並顯示「Mobile」、「Laptop」和「Men's」等類別的功能。點擊類別後，URL 會動態顯示 `/collections/{category-slug}` 的形式。 # Part 20: How to display products by category with Title & Meta tags w/ relationship ## 建立路由與控制器方法： - 前端控制器中建立了處理商品顯示的方法，根據類別的 Slug 查詢相應的類別，然後透過關聯取得該類別下的所有商品。 - 在 `web.php` 中設置相應的路由，以便當用戶點擊類別時，系統可以導向相應的控制器方法進行處理。 ## 建立商品顯示頁面： - 在 Blade 模板中設計了清晰的商品展示頁面，包括商品名稱、品牌、價格、庫存等信息。 - 使用 Bootstrap 框架來設計商品頁面，使其具有良好的響應式設計和可讀性。 ## 處理商品圖片與連結： - 處理了商品圖片的顯示以及點擊圖片跳轉到詳細商品頁面的功能，以增強用戶體驗。 - 在商品頁面上，顯示商品的庫存情況，若商品庫存為零則顯示為“缺貨”。 ## 設定網頁標題與 Meta 標籤： - 為了改善網站的搜索引擎優化（SEO），設置了每個商品頁面的標題和 Meta 標籤，使其具有獨特的標題和描述，有助於提高網站在搜索引擎中的排名和可見性。 # 快捷鍵移行 : alt + up/down ``` table.table.table-bordered.table-striped ``` ``` <table class="table table-bordered table-striped"> </table> ``` ``` jqaja ``` ``` ``` # 建立 Seeder & Factory Category ``` php artisan db:seed --class=CategoriesTableSeeder ``` Brand ``` php artisan db:seed --class=BrandsTableSeeder ``` # 待讀 [Events in Alpine](https://livewire.laravel.com/docs/events#events-in-alpine) # Issue ## Error saving ``` Error saving category: SQLSTATE[HY000]: General error: 1364 Field 'meta_description' doesn't have a default value (Connection: mysql, SQL: insert into `categories` (`name`, `slug`, `description`, `image`, `meta_title`, `meta_keyword`, `status`, `updated_at`, `created_at`) values (Planting, planting, Planting Description, 1705590671.jpg, Planting Meta Title, Planting Meta Keyword, 0, 2024-01-18 15:11:11, 2024-01-18 15:11:11)) ``` CategoryController store 少了 ``` $category->meta_description = $valid['meta_description']; ``` ## Modal ``` <a type="button" wire:click="deleteCategory({{ $category->id }})" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger">Delete</a> ``` 當我加了下述程式碼，按下 Delete Button，而 Modal 閃了一下就消失了，但畫面是呈現有 Modal 的狀態。 ``` wire:click="deleteCategory({{ $category->id }})" ``` 在 Modal 加上下述程式碼就解決了 ``` wire:ignore.self ``` ``` {{-- Delete Modal --}} <div wire:ignore.self class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true"> ... </div> ``` ChatGPT: `wire:ignore.self` 是 Livewire 的一個指令，它告訴 Livewire 在處理頁面更新時忽略掉指定的元素，以避免與 Livewire 的 AJAX 請求發生衝突。在你的情況下，當你點擊 Delete 按鈕時，Livewire 發送一個 AJAX 請求來執行 `deleteCategory` 方法，這也會觸發 Livewire 的重新渲染過程。在這個重新渲染的過程中，原本應該處於顯示狀態的 Modal 因為 Livewire 的重新渲染而導致消失。透過在 Modal 上添加 `wire:ignore.self`，你告訴 Livewire 忽略這個元素，不要對它進行重新渲染。這樣，即使 Livewire 在執行動作後重新渲染頁面，Modal 仍然保持打開的狀態，而不會因為 Livewire 的 AJAX 請求而被隱藏。總結來說，這個指令有助於防止 Livewire 與 Modal 的 JavaScript 行為發生衝突，確保 Modal 在 Livewire 操作後正常顯示。 --- --- # 關鍵字 1. Composer:Composer是用於PHP的相依性管理器，用於在Laravel專案中安裝和管理套件或庫。 2. Livewire:Livewire是Laravel的全棧框架，使構建動態介面變得簡單，無需編寫JavaScript。 3. VS Code:Visual Studio Code是由Microsoft開發的源代碼編輯器，廣泛用於Laravel開發。 4. .env檔案:Laravel中包含特定環境配置設置的`.env`檔案，包括資料庫連線詳細資訊。 5. 資料庫連線:在`.env`檔案中配置設定以建立對資料庫的連線，包括資料庫名稱、使用者名稱和密碼。 6. Livewire設定:Livewire設定涉及在主要專案檔案中包含必要的JavaScript和樣式表，以啟用Livewire功能。 7. 驗證設定:影片提到下一部分的教學將涵蓋Laravel 9電子商務中的驗證設定，重點在註冊和登入模組。 8. Git Bash:Git Bash是用於Windows上運行Git命令和其他命令行任務的命令行界面。 9. PHP Artisan Serve:`php artisan serve`是用於啟動Laravel開發伺服器的指令。 10. Livewire元件:Livewire元件是網頁的可重複使用的、自包含的單元，封裝了前端和後端邏輯。 11. Resource Views:在Laravel中，資源視圖是定義應用程式HTML頁面的Blade模板。 12. localhost:8000:本地伺服的Laravel應用程式的預設URL。 13. Livewire文件:Livewire的官方文件，包含有關安裝、使用和配置的詳細信息。 14. Livewire 2:Livewire的第2版，可能引入新功能或改進相較於之前的版本。 15. Welcome Blade:Laravel中的預設Blade檔案，通常用於歡迎用戶或提供應用程式介紹。 16. Livewire腳本和樣式:Livewire提供的JavaScript和樣式表檔案，需要包含在主要Blade檔案中，以使Livewire正常運作。 17. 動態介面:能夠在不需完全重新載入頁面的情況下動態更改或更新的介面，Livewire在Laravel中實現這一能力。 18. Livewire快速入門:Livewire文件中提供的一節，提供有關在Laravel專案中安裝和使用Livewire的快速指南。 1. 身份驗證 (Authentication):在網站或應用程式中確認使用者身份的過程，通常涉及登入和註冊系統。 2. Laravel UI:Laravel的套件，用於生成預製的用戶介面（UI）元件，如登入和註冊頁面。 3. Composer:PHP的相依性管理器，用於在Laravel專案中安裝和管理套件。 4. Bootstrap 5:最新版本的Bootstrap前端框架，提供許多預製的樣式和元件，用於美化和設計網頁。 5. CDN (Content Delivery Network):內容傳遞網路，一種用於提供檔案和內容的分散式系統，可提高網站的載入速度。 6. Livewire:Laravel框架的全棧框架，用於實現動態Web應用程式的組件化。 7. Blade檔案:Laravel中的模板引擎檔案，用於定義和呈現應用程式的視圖。 8. 遷移 (Migration):Laravel中的機制，用於管理資料庫結構的變更，包括新增、修改和刪除表格等。 9. jQuery:輕量且功能豐富的JavaScript函式庫，用於簡化HTML文檔的遍歷、操作和事件處理。 10. CDN連結:在網頁中引入外部資源，如樣式表或JavaScript文件，通常使用CDN來提供這些文件。 11. UI元件:用於構建使用者介面的可重複使用的部分或元素，旨在提高開發效率和一致性。 12. 資料表 (Table):在資料庫中用於儲存特定資料的結構化表格。 13. 訂閱、按讚和分享:社交媒體平台上觀眾對於內容的互動行為，有助於擴大內容的影響範圍和可見性。 1. Admin Panel:後台管理面板，用於管理和監控網站或應用程式的專業界面。 2. Majestic Admin Free Bootstrap Admin Panel:免費的Bootstrap管理面板模板，用於快速搭建後台管理界面。 3. Blade 檔案:Laravel中的模板引擎檔案，用於定義和呈現應用程式的視圖。 4. @include 指令:在Blade檔案中，用於引入其他Blade檔案的指令。 5. @yield 指令:在Blade檔案中，用於定義一個可被子視圖替換內容的區域。 6. Route Prefix:Laravel中的路由群組設定，用於給一組路由加上相同的前綴。 7. Controller:Laravel中處理應用程式邏輯的類別，接收請求，執行操作，然後返回視圖或數據。 8. php artisan make:controller:使用Artisan命令創建新的Laravel控制器。 9. @extends 指令:在Blade檔案中，用於指定該檔案將擴展哪個佈局檔案。 10. @section 指令:在Blade檔案中，用於定義一個區域，該區域可在擴展的佈局檔案中被替換。 11. Route:Laravel中定義URL和控制器之間關係的機制。 12. CSS (Cascading Style Sheets):一種用於描述文檔樣式和外觀的樣式表語言。 13. JavaScript:一種用於網頁交互和動態效果的腳本語言。 14. Bootstrap:一個流行的開源前端框架，用於加速網站和應用程式的開發。 15. CDN (Content Delivery Network):內容傳遞網路，一種用於提供檔案和內容的分散式系統，可提高網站的載入速度。 1. Middleware: 在 Laravel 中，Middleware 是用於處理 HTTP 請求的機制，允許在請求到達應用程式之前或之後執行自定義代碼。 2. Migration: 在 Laravel 中，Migration 是用於管理資料庫架構的工具，可以通過 Artisan 命令創建和應用資料庫變更。 3. Route Middleware: 在 Laravel 中，Route Middleware 是指在處理 HTTP 請求的過程中，對特定路由或路由群組應用的中間件。 4. Redirect: 在網頁開發中，Redirect 是指將用戶導向到另一個 URL 或頁面的行為，通常用於處理登入、登出和權限驗證等情況。 5. Handle 方法: Middleware 中的 `handle` 方法是用於執行中間件功能的主要方法，其中包含了對請求的處理邏輯。 6. Session: 在 Web 開發中，Session 是一種用於在多個請求之間保留用戶狀態的機制，通常用於存儲用戶登入信息和其他數據。 7. Route Prefix: Laravel 中的一種路由群組設置，允許對一組路由應用相同的前綴。 8. Auth: Laravel 中的身份驗證（Authentication）機制，提供了用於處理登入、登出和使用者權限的功能。 9. Admin Dashboard: 管理員儀表板，是一個專門供管理員使用的界面，用於監視、管理和操作網站或應用程式。 10. Route:Laravel 中定義 URL 和控制器之間關係的機制，用於處理請求路由。 11. Artisan:Laravel 中的命令行工具，用於執行各種開發任務，例如創建控制器、模型、migration 等。 12. Authenticated:在 Laravel 中，`authenticated` 是一個用於處理用戶身份驗證後操作的預定義方法，通常用於自定義登入後的跳轉行為。 13. Status Message:在 Web 開發中，Status Message 是指在操作完成後向用戶顯示的狀態訊息，例如「登入成功」、「註冊完成」等。 14. User Role:在許多 Web 應用程式中，User Role 是指用戶的角色或權限，用於區分不同用戶的功能和訪問權限。 1. Navbar:在 Web 開發中，Navbar 是一種用於顯示網站或應用程式頂部導航欄的元素，通常包含標誌、連結和操作按鈕。 2. Logout Button:登出按鈕是指在 Web 應用程式中提供用戶登出功能的按鈕，通常用於結束用戶會話並返回登入頁面 3. Blade Template:Blade 是 Laravel 中的模板引擎，用於在 PHP 中定義動態內容的模板文件。`.blade.php` 是 Blade 模板的擴展名。 4. Authentication (Auth):在 Web 開發中，Authentication 是指確認使用者身份的過程，通常包括登入和登出功能 5. Icon:Icon 是小型的圖示，用於增強用戶界面的視覺效果。在這個情境中，使用了一個表示登出的 Icon。 6. Alert:在 Web 開發中，Alert 是一種用於顯示簡短消息或通知的 UI 元素，通常用於提醒用戶某些事件的發生。 7. Success Message:成功消息是指在操作成功完成後向用戶顯示的消息，通常用於確認某些操作的成功執行。 8. Dashboard:儀表板是一個提供概觀、統計和操作選項的界面，通常用於管理員或用戶查看應用程式的主要資訊。 9. Routing:在 Web 開發中，Routing 是指將 URL 與應用程式中的控制器方法相映射，以處理特定的 HTTP 請求。 10. Session:在 Web 開發中，Session 是用於在多個請求之間保留用戶狀態的機制，通常用於存儲用戶登入信息和其他數據。 1. Migration:Migration 是 Laravel 中用於定義資料庫結構的機制，通過 artisan 指令來建立資料表。 2. Model:Model 是 MVC 架構中的 M（模型），用於與資料庫交互，定義了資料表的操作和關聯。 3. Controller:Controller 是 MVC 架構中的 C（控制器），用於處理 HTTP 請求，協調模型和視圖之間的交互。 4. Blade 模板:Blade 是 Laravel 的模板引擎，用於在 PHP 中編寫動態內容的模板文件。 5. Bootstrap:Bootstrap 是一個前端框架，提供了一套簡單易用的 CSS 和 JavaScript 組件，用於快速搭建漂亮的網頁介面。 6. Form Request Validation:在 Laravel 中使用 Form Request Validation 進行資料驗證，可以簡化控制器的程式碼，將驗證邏輯單獨存放在 request 類別中。 7. CSRF Token:CSRF Token 是一種安全機制，用於防止跨站請求偽造攻擊。在 Laravel 中，使用 `{ csrf_field() }` 來生成 CSRF Token。 8. File Upload:文件上傳是指將檔案從客戶端（通常是使用者的電腦）上傳到伺服器。在這裡使用 `hasFile` 和 `move` 函數進行文件上傳。 9. SEO Tags:SEO Tags 是指在網頁中用於搜索引擎優化（SEO）的標籤，包括 meta title, meta keyword, meta description 等。 10. Session Message:Session Message 是將訊息儲存在 session 中，以便在不同請求之間共享。在這裡用於顯示新增類別成功的提示訊息。 11. CRUD:CRUD 是指資料庫操作的四個基本功能：Create（創建）、Read（讀取）、Update（更新）和Delete（刪除）。 12. Artisan:Artisan 是 Laravel 的命令行工具，用於執行各種開發任務，包括建立 migration、model、controller 等。 1. Livewire: Laravel 框架的一個工具，用於實現實時 Web 功能，無需使用 JavaScript。 2. Blade 文件: Laravel 中的模板引擎，用於構建前端視圖。 3. Route Model Binding: Laravel 提供的一種路由模型綁定方式，簡化根據模型的 ID 獲取資料的操作。 4. Bootstrap Modal: 使用 Bootstrap 前端框架實現的彈出窗口，用於顯示確認刪除等信息。 5. Route Group Controller: Laravel 中的一種路由組織方式，將相關的控制器集中在一個路由群組中，提高代碼組織性。 6. 分頁 (Pagination): 一種將大量數據分成多個頁面顯示的技術，提高用戶體驗。 7. 圖片上傳: 在 Web 項目中將圖片從客戶端上傳到伺服器的過程。 8. 實時更新 (Real-time Updates): 使用 Livewire 或其他實時技術，實現在不刷新整個頁面的情況下更新部分內容。 9. [Route Groups](https://laravel.com/docs/10.x/routing#route-groups) 1. Livewire 元件： Livewire 是 Laravel 的一個全棧框架，通過處理實時更新而無需 JavaScript，使動態界面構建更加簡單。 1. 遷移：在 Laravel 中，遷移是一種版本控制數據庫模式並隨時間應用更改的方法。`php artisan make:migration` 用於創建新的遷移文件。 1. Eloquent： Eloquent 是 Laravel 附帶的 ORM（對象關係映射），通過允許開發人員將數據庫表視為對象，簡化了數據庫交互。 1. Bootstrap Modal： Modal 是顯示在當前頁面頂部的對話框或彈出窗口。Bootstrap 提供了一個 modal 元件，用於創建交互和視覺上令人愉悅的彈出窗。 1. 驗證規則： Laravel 提供了一組驗證規則，可以應用於表單數據，以確保其滿足某些標準，如必填字段、字符串長度等。 1. Str 類： Laravel 的 `Illuminate\Support\Str` 類包含各種字符串操作方法。在這裡的上下文中，用於從品牌名稱生成 slug。 1. 分頁：一種將大量數據劃分為較小、可管理的部分的技術，通常用於在每個頁面上顯示子集記錄。 1. For-Each 循環：一種編程結構，允許對項目集合（如數組或列表）進行迭代。在 Laravel 的 Blade 模板引擎中，常常使用 `@foreach`。 1. Livewire 模型： Livewire 允許創建具有自己數據模型的組件，增強代碼的組織和可重用性。 1. 瀏覽器事件： Livewire 組件可以發送瀏覽器事件，以與前端進行通信。這在成功提交後關閉 modal 之類的操作中非常有用。 1. 會話閃存： Laravel 的會話閃存功能允許在會話中臨時存儲數據，在下一個請求上可用於顯示成功或錯誤消息。 1. 分頁鏈接：在 Laravel 中，分頁鏈接用於生成不同頁面之間的輕松導航的連結。 1. Bootstrap 樣式：指應用 Bootstrap 框架的樣式和設計原則，實現一致且具有視覺吸引力的用戶界面。 1. LiveWire 元件： Laravel 框架提供的一種工具，用於實現實時的 Web 交互，無需使用 JavaScript。 1. CRUD：表示創建（Create）、讀取（Read）、更新（Update）和刪除（Delete）這四個基本數據操作。 1. Bootstrap Modal： Bootstrap 框架提供的彈出式窗口元件，用於實現更好的用戶交互和視覺效果。 1. 彈出窗口：在前端設計中常見的交互元素，用於顯示額外的信息、確認操作或進行數據輸入。 1. 事件處理：使用 LiveWire 元件中的事件機制，能夠有效地處理前端和後端的交互操作。 1. Spinner：用於顯示操作正在進行中的小型動畫圖標，提供用戶視覺上的反饋。 1. 優化用戶體驗：通過添加加載動畫、確認窗口等元素，提升用戶在編輯、更新和刪除時的整體體驗。 1. 動態更新：使用 LiveWire 實現的實時 Web 更新，無需刷新頁面即可同步數據操作結果。 1. Eloquent ORM： Laravel 提供的對象關係映射工具，用於簡化數據庫操作和模型之間的關聯。 1. Blade 模板引擎： Laravel 中的模板引擎，用於簡化和美化 PHP 視圖層的代碼。 1. Bootstrap 框架：前端框架，用於實現響應式和美觀的設計，提供了許多組件和樣式。 1. Request Form： Laravel 中用於處理表單請求的類，用於定義後端的驗證規則。 1. Eloquent 模型關聯： Laravel 中的一種功能，用於建立數據表之間的關係，簡化數據庫查詢。 1. Session： Laravel 中的一種機制，用於在不同請求之間儲存數據，包括錯誤信息和成功信息。 1. 多圖片上傳：實現一次上傳多張圖片的功能，通常涉及文件名的處理和存儲位置的設定。 1. Blade 模板引擎：Laravel 框架中的模板引擎，用於在 PHP 中撰寫模板，將動態資料注入到 HTML 中。 2. Eloquent ORM：Laravel 中的 ORM（Object-Relational Mapping）實現，用於與資料庫交互，使開發者能夠使用物件來操作資料庫。 3. 關聯模型：在 Eloquent ORM 中，指不同資料表之間的關係，例如一對一、一對多、多對多等。 4. HTTP PUT 方法：HyperText Transfer Protocol 中的 PUT 方法，用於更新指定 URI 的資源，常用於更新資料。 5. Eloquent 關聯中的 `belongsTo`：Eloquent 提供的一種關聯方法，用於指定模型間的「屬於」關係，通常用於外鍵的關聯。 6. 表單驗證：使用 Laravel 的表單請求類，對用戶提交的表單數據進行驗證，以確保資料的合法性。 7. HTTP DELETE 方法：HyperText Transfer Protocol 中的 DELETE 方法，用於刪除指定 URI 的資源。 8. Eloquent 關聯中的 `hasMany`：Eloquent 提供的一種關聯方法，用於指定模型間的「有多個」關係，通常用於一對多的關聯。 9. ORM（Object-Relational Mapping）：一種編程技術，用於將物件模型映射到關聯式資料庫中，使得開發者可以使用物件的方式操作資料。 10. 確認框：網頁上的一種對話框，通常用於要求用戶確認執行某個敏感操作，例如刪除資料。 1. CRUD：代表資料操作的四個基本功能，分別是 Create（建立）、Read（讀取）、Update（更新）和Delete（刪除）。 1. Migration：在 Laravel 中是用來定義資料庫結構的工具，開發者可以透過 migration 來創建、修改或刪除資料表。 1. Blade 模板引擎： Laravel 內建的模板引擎，用於在 PHP 程式碼中簡化 HTML 模板的輸出。 1. ORM（Eloquent）： Object-Relational Mapping，Laravel 中的資料庫操作工具，將資料庫表映射成物件，使得操作資料更直觀。 1. JavaScript 彈窗：使用 JavaScript 的 `confirm` 函數實現的彈窗，用來確認是否執行某個操作。 1. Form Request Validation： Laravel 中一種方便的表單驗證方法，可以將驗證邏輯獨立到 Form Request 類別中，提高代碼可讀性。 1. CSRF Token：跨站請求偽造（Cross-Site Request Forgery）的簡寫，是一種攻擊手法，Laravel 使用 CSRF token 來防範這種攻擊。 1. Compact 函數： Laravel 中的一個助手函數，用於建立傳遞給視圖的資料。 1. Bootstrap Toggle：一種基於 Bootstrap 框架的元件，用於實現開關切換的效果，常用於製作可切換的開關按鈕。 2. 一對多關係（One-to-Many Relationship）：在資料庫中，指的是一個資料表的每一筆記錄對應到另一個資料表中的多筆記錄。在這裡是指商品和商品顏色的關係。 3. 資料庫遷移（Database Migration）：Laravel 提供的一種機制，用於管理資料庫結構的變更。透過指令 `php artisan migrate`，可以將定義好的資料庫遷移應用到實際資料庫。 4. fillable 屬性：在 Laravel 模型中，fillable 屬性用於指定哪些欄位允許被賦值。這在批量賦值時非常重要，以確保只有指定的欄位受到允許。 5. 一對多（hasMany）：在 Eloquent ORM 中，用於定義模型之間的一對多關係。在這裡是指商品有多個商品顏色。 6. nullable 屬性：在資料庫遷移中使用，表示該欄位允許為 NULL 值。這在外鍵關聯時常用來表示可選的關聯。 7. 動態生成（Dynamic Generation）：在這裡指的是根據先前建立的顏色清單，動態生成相應的顏色選項。 8. 一對多儲存（hasMany Relationship Storage）：指的是透過 Eloquent ORM 的 `hasMany` 關係，將商品與商品顏色的關聯儲存至資料庫。 9. 批量賦值（Mass Assignment）：在 Laravel 中，指的是一次性賦值多個屬性的操作。使用 `fillable` 屬性可以確保只有指定的欄位能夠被批量賦值，提高安全性。 1. Blade 模板引擎: Laravel 框架內建的模板引擎，用於簡化 PHP 與 HTML 的混合編寫，提供更簡潔且可讀性較高的模板語法。 1. Eloquent 關聯（relationship）: Laravel 中的 ORM（Object-Relational Mapping）功能，允許開發者透過定義模型之間的關聯，輕鬆地查詢相關聯的資料庫記錄。 1. AJAX: Asynchronous JavaScript and XML 的簡稱，是一種透過 JavaScript 在不重新載入整個網頁的情況下與伺服器進行通信的技術。用於實現網頁的非同步請求，提升使用者體驗。 1. CSRF Token: 跨站請求偽造（Cross-Site Request Forgery）的簡稱，是一種網站安全機制。在 Laravel 中，CSRF Token 是一個隨機生成的值，用於確保發送請求的使用者是合法的，防範 CSRF 攻擊。 1. Eloquent Update 方法: Laravel Eloquent 模型的一個方法，用於更新資料庫中的記錄。透過傳遞包含要更新的欄位及值的關聯數組，可以方便地進行更新操作。 1. Ajax 請求: 使用 JavaScript 發送的非同步請求，通常用於與伺服器進行資料的交換，而無需重新載入整個網頁。 1. Migration（遷移）：在 Laravel 中，Migration 是一種用於定義資料庫結構變化的方式。它允許你使用 PHP 代碼來創建、修改和刪除資料庫表格，並使這些變化易於管理和跟蹤。 1. 模型（Model）：在 Laravel 中，模型代表了應用程序中的資料。它是一個與資料庫表格對應的類別，可以通過模型來執行各種資料庫操作，如查詢、插入、更新和刪除。 1. 控制器（Controller）：在 MVC（Model-View-Controller）架構中，控制器是處理用戶輸入和相應操作的組件。在 Laravel 中，控制器是一個類別，包含各種方法，每個方法對應一個特定的路由動作。 1. 請求類別（Request Class）：在 Laravel 中，請求類別用於對請求進行驗證和授權。它可以包含一組規則，用於驗證輸入數據的格式和內容。 1. Blade 模板引擎：Blade 是 Laravel 的模板引擎，允許你在視圖中使用 PHP 代碼和一些特定的 Blade 語法來動態生成 HTML。它提供了許多有用的功能，如模板繼承、條件語句和循環。 1. 填充（Fillable）：在 Laravel 中，填充屬性用於指定哪些模型屬性可以賦值。通常，填充屬性用於保護模型的安全性，防止惡意用戶通過請求注入未預期的屬性。 1. 資料庫遷移（Database Migration）：資料庫遷移是一種跟蹤和管理資料庫結構變化的技術。通過遷移，開發者可以使用版本控制系統跟蹤資料庫結構的變化，並使這些變化能夠被應用到其他開發環境中。 1. Laravel框架：一個開源的 PHP Web 應用程式框架，用於開發 Web 應用程式和簡化相關的任務。提供了強大的工具和功能，使開發者能夠更快速、更有效地構建 Web 應用程式。 1. 路由（Route）：在 Web 開發中，路由是指確定應用程序如何響應特定請求的機制。Laravel 的路由系統允許開發者定義應用程序的所有路由，並指定相應的控制器方法。 1. 控制器方法（Controller Method）：在 MVC 架構中，控制器方法是處理特定請求的功能代碼。在 Laravel 中，控制器方法被映射到路由，當該路由被訪問時，相應的控制器方法將被執行。 1. 數據庫遷移（Database Migration）： Laravel 提供的一種機制，用於管理數據庫結構的版本控制。遷移允許開發者定義和修改數據庫表結構，使其更容易與應用程序代碼一同升級。 1. 表單請求（FormRequest）： Laravel 中的一種機制，用於處理和驗證 HTTP 表單提交的數據。FormRequest 類允許開發者定義規則和邏輯，確保表單數據符合預期的要求。 1. JavaScript 確認對話框：在前端開發中使用的一種 JavaScript 提示框，常用於確認用戶是否確定執行某個操作。在本文中，作者使用確認對話框確認刪除操作。 1. 穩健性和性能：軟體工程中常用的兩個詞語，穩健性指的是系統能夠在面對異常或錯誤情況時保持穩定運行的能力，性能則關注系統處理請求的速度和效率。在代碼開發中，需要平衡這兩個方面，以確保應用程序的可靠性和效能。 1. Laravel框架： Laravel 是一個開源的 PHP Web 應用程式框架，它提供了許多內置的功能和工具，用於加速 Web 應用程式的開發和部署過程。 1. Bootstrap 5： Bootstrap 是一個開源的前端框架，用於快速構建現代化的網站和 Web 應用程式。Bootstrap 5 是 Bootstrap 框架的最新版本，具有更多的新功能和改進。 1. 輪播圖片（Carousel）：輪播是一種在網頁上顯示多個圖片或內容輪播的交互式元素。通常用於展示產品、新聞、廣告等內容。 1. 路由（Route）：在 Laravel 框架中，路由用於將 URL 請求映射到相應的控制器方法，從而處理用戶的請求和返回相應的響應。 1. 控制器（Controller）：控制器是 MVC（Model-View-Controller）架構中的一部分，負責處理用戶的請求、執行業務邏輯並返回響應。 1. 動態數據（Dynamic Data）：在網頁開發中，動態數據是指根據用戶的請求或其他條件而生成的數據，通常從數據庫或其他來源動態加載和顯示。 1. CSS（Cascading Style Sheets）： CSS 是一種用於定義網頁或應用程式的外觀和布局的樣式表語言，用於指定文本、圖片、元素位置、尺寸等方面的樣式和設計。 1. 響應式設計（Responsive Design）：響應式設計是一種網頁設計方法，旨在使網頁在不同的設備和螢幕尺寸下都能夠良好地顯示和適應，以提供更好的用戶體驗。 1. 導覽欄（Navbar）：導覽欄是網頁的一部分，通常位於頁面的頂部，用於顯示頁面的標題、連結和其他導航元素，以幫助用戶快速訪問網站的不同部分和功能。 1. Bootstrap 5： Bootstrap 是一個流行的開源前端框架，用於快速構建具有吸引力和響應式設計的網站和 Web 應用程序。Bootstrap 5 是 Bootstrap 框架的最新版本，具有更多的新功能和改進。 1. HTML（Hypertext Markup Language）： HTML 是一種用於創建網頁結構的標記語言，它使用標籤來定義網頁上的不同元素和內容。 1. CSS（Cascading Style Sheets）： CSS 是一種用於定義網頁或應用程序的外觀和布局的樣式表語言，用於指定文本、圖片、元素位置、尺寸等方面的樣式和設計。 1. Font Awesome： Font Awesome 是一個流行的圖標庫，提供了各種矢量圖標，可用於網站和應用程序的設計和開發中，以增強用戶界面的視覺效果和功能性。 1. 響應式設計（Responsive Design）：響應式設計是一種網頁設計方法，旨在使網頁在不同的設備和螢幕尺寸下都能夠良好地顯示和適應，以提供更好的用戶體驗。 1. 路由（Route）：在 Laravel 中，路由定義了 URL 請求應該如何被應用程序處理，並將其指向相應的控制器方法或視圖。 1. Blade 模板（Blade Template）： Laravel 中的模板引擎，提供了簡單的語法以及方便的控制結構，用於生成視圖。 1. Bootstrap 5： Bootstrap 是一個流行的前端框架，用於快速構建具有響應式設計的網站和應用程序。Bootstrap 5 是其最新版本，具有更多功能和改進。 1. 卡片視圖（Card View）：一種使用卡片（Card）元素呈現信息的設計風格，通常包括標題、描述和可能的圖像等元素。 1. Slug： Slug 是 URL 中的一部分，通常是與某個資源相關的字串，為了提高可讀性，常使用簡短、有意義的字詞，例如用於標題或類別的名稱。 1. CSS 調整（CSS Styling）：使用 Cascading Style Sheets（CSS）進行網頁樣式設計，以確保頁面具有所需的外觀和佈局。 1. 圖片路徑（Image Path）：在網站中，指向圖片位置的路徑，確保圖片能夠正確載入和顯示在網頁中。 1. 類別控制器（Category Controller）：在 Laravel 中，控制器是 MVC（Model-View-Controller）架構的一部分，負責處理應用程序的 HTTP 請求，進行資料處理和邏輯操作。 1. For Each 迴圈：一種編程語言中的迴圈結構，用於遍歷集合或列表中的每一個元素。 1. 區段（Section）：在 Laravel Blade 模板中，區段是用來定義視圖中可被填充內容的一個區域。通過使用 `@section` 和 `@endsection` 標籤，可以將內容區分為不同的區段。 1. 資料庫表（Database Table）：用於存儲特定資料類型的資料庫中的一個結構化表格。在 Laravel 中，使用 Eloquent ORM 可以方便地與資料庫表進行交互。 1. Slug（標識符）：在網址中用於識別特定資源的字串，通常是由 URL 安全字符組成的，常用於代表標題或類別等。 1. Blade 模板（Blade Template）： Laravel 中的模板引擎，提供了用於生成 HTML 的簡潔語法和結構，使得視圖的設計更加方便和直觀。 1. Meta 標籤（Meta Tags）：用於定義網頁的元資訊，如標題、關鍵字、描述等，通常用於 SEO（搜索引擎優化）和用戶體驗的改善。 1. Livewire： Laravel 的即時組件框架，用於簡化在 PHP 中構建互動式 Web 界面的過程，通過 Livewire 可以實現即時更新和動態內容載入等功能。 1. 模型關係（Model Relationships）：在 Laravel 中，模型關係用於定義數據庫表之間的關聯性，包括一對一、一對多、多對多等關係，以實現數據的組織和操作。 1. CSS 調整（CSS Styling）：使用 CSS（層疊樣式表）來設計和美化網頁的外觀和佈局，以確保頁面具有所需的視覺效果和風格。 1. 控制器（Controller）： MVC 架構中的一部分，負責處理用戶的請求，從模型中檢索數據，並將其傳遞給視圖進行顯示。在 Laravel 中，控制器通常處理路由定義的動作。 1. 資料庫表（Database Table）：在關聯式數據庫中的結構化數據存儲單位，每個表代表著特定類型的實體或資源，並通過列和行組織數據。 1. SEO（搜索引擎優化）：一系列技術和方法，用於提高網站在搜索引擎中的排名和曝光度，從而吸引更多的流量和用戶訪問。 Meta 標籤和頁面標題等因素在 SEO 中起著重要作用。