Laravel E-Commerce Application Development( 27 Lessons )

來源:Laravel E-Commerce Application Development( 27 Lessons )

這個教學是一個完整建立一個EC網站教學,使用Laravel 5.8 與 Vue (前端),共有27個教學,根據裏面的教學可能作者沒有交待完整或建置過程有疏漏,使得無法建立的應用程式無法正常運作,此時可以使用作者提供的源碼先建立一個參考範例,再閱讀作者的教學。

這個電子商務要大致滿足以下的需求:

  • A catalog page where all products will be displayed to buyers. 買家觀看的產品目錄頁
  • A product details page where buyers can find more information about the product. 產品細節頁面,買家可以透過這個頁面發現商品更多的資訊。
  • A checkout system, where buyers can enter the shipping address and pay. 結帳系統,買家可以輸入送貨地址並且進行付款。
  • Login and registration pages so buyers can register or login to their account. 供買家登入與註冊的頁面。
  • Account dashboard for customers where they can see recent orders placed, or can change their account details. 帳號資訊與管理頁面,買家可以用來檢視訂單,或者修改帳號資料。
  • An admin area where shop owner can log in and manage followings: 後台管理介面,供商品管理者登入並且管理下列事項
    • Manage store settings. 管理商店設定
    • Manage products, categories, brands, product attributes. 管理產品、目錄、品牌、產品資料
    • Manage sales orders and can generate reports. 管理銷售訂單,並產生各式報表
    • Manage payment methods available to customers. 管理客戶的可用付款方法
    • Manage Shipping methods available to customers.  管理客戶的可用貨物物流方法
    • Manage admin users so other staff members use the admin area. 管理使用者帳號,讓其他職員/店員也能使用後台管理介面。

這個系統使用  Bootstrap E-commerce UI Kit 作為前端工具, Vali Admin 為後端管理介面範本,這2個工具都是使用Bootstrap 4為基底所開發出來的?

 

直接run作者提供的源碼 (20200622)

  • 下載並解開在 github上的源碼
  • 執行 composer install
  • 依照.env上的資料庫設定新增一個資料庫(homestead,並設置資料庫帳號與密碼)
  • 執行 php artisan migrate,建立專案的表格,不過注意,在這個步驟建立連外鍵時會出現許多錯誤,必須依照發生的錯誤訊息至Database\migrations目錄找相關的表格schema,把連外鍵的unsignedInteger改成unsignedBigInteger,例:
    • $table->unsignedBigInteger(‘attribute_id’);
      $table->foreign(‘attribute_id’)->references(‘id’)->on(‘attributes’);
    • 每次修改完要把已建立的資料表格完全刪除再重覆migrate執行
    • 若不想俢改,請下載已完成的修改 (下載解開至database\migrations):migration   或下載整個完整的專案 載點
  • 執行 php artisan migrate – -seed (2個橫線)
  • 執行 npm install  (需先安裝Nodejs)
  • 執行 npm run watch (這個步驟會將需要用到的前端套件複製到public目錄)
  • php artisan serve
  • 成功執行出現的畫面:

 

  1. Laravel E-Commerce Application Development – Introduction
  2. Laravel E-Commerce Application Development – Initial Project Setup
  3. Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
  4. Laravel E-Commerce Application Development – Admin Model and Migration
  5. Laravel E-Commerce Application Development – Backend Admin Authentication

筆記:admin.php

<?php

Route::group(['prefix'  =>  'admin'], function () {

    Route::get('login', 'Admin\LoginController@showLoginForm')->name('admin.login');
    Route::post('login', 'Admin\LoginController@login')->name('admin.login.post');
    Route::get('logout', 'Admin\LoginController@logout')->name('admin.logout');

    // Route::get('/', function () {
    //     return view('admin.dashboard.index');
    // });
    Route::group(['middleware' => ['auth:admin']], function () {

        Route::get('/', function () {
            return view('admin.dashboard.index');
        })->name('admin.dashboard');

    });

});

// Route::group(['middleware' => ['auth:admin']], function () {
//
//     Route::get('/', function () {
//         return view('admin.dashboard.index');
//     })->name('admin.dashboard');
//
// });

 

  1. Laravel E-Commerce Application Development – Base Controller and Repository
  2. Laravel E-Commerce Application Development – Settings Section Part 1
  3. Laravel E-Commerce Application Development – Settings Section Part 2
  4. Laravel E-Commerce Application Development – Categories Section Part 1
  5. Laravel E-Commerce Application Development – Categories Section Part 2
  6. Laravel E-Commerce Application Development – Attributes Section Part 1
  7. Laravel E-Commerce Application Development – Attributes Section Part 2
  8. Laravel E-Commerce Application Development – Attributes Section Part 3
  9. Laravel E-Commerce Application Development – Brands Section
  10. Laravel E-Commerce Application Development – Products Section Part 1
  11. Laravel E-Commerce Application Development – Products Section Part 2
  12. Laravel E-Commerce Application Development – Products Section Part 3
  13. Laravel E-Commerce Application Development – Products Section Part 4
  14. Laravel E-Commerce Application Development – Frontend Login & Registration
  15. Laravel E-Commerce Application Development – Categories Navigation
  16. Laravel E-Commerce Application Development – Catalog Listing
  17. Laravel E-Commerce Application Development – Product Details Page
  18. Laravel E-Commerce Application Development – Shopping Cart
  19. Laravel E-Commerce Application Development – Checkout
  20. Laravel E-Commerce Application Development – Payment Processing
  21. Laravel E-Commerce Application Development – Order Management
  22. Laravel E-Commerce Application Development – Wrap Up

 

 

 

【筆記-Laravel】Laravel的使用者驗證Auth

 

【筆記-Laravel】整合sb-admin後台的Laravel專案

SB Admin 2

Aleckrh laravel-sb-admin-2

我的實作案例

安裝:

  • Clone the repo and cd into it
  • Run composer install
  • Rename or copy .env.example file to .env
  • Run php artisan key:generate
  • Set your database credentials in your .env file
  • Run php artisan migrate ->將系統需要的資料表格建出來。

 

 

【筆記-SQL】使用MySQL Workbench建立資料庫的E-R圖

在開發一個系統時,先行將系統所要處理的資料模型建立出來是一個必要的關鍵動作,ER模型的繪製在很多設計工具都有支援,但MySQL Workbench提供了一個設計圖與資料庫直接連接的解決方案,ER圖設計好之後,資料庫那邊的資料表格及相關的關聯也建立起來。

【筆記-Laravel】Laravel專案的執行

初入此坑,大部份的教學都教php artisa serve來啟動新專案的服務…,這是在沒有執行引擎的環境下必須這樣測試開發的專案,只是,這樣好累,特別是在虛擬主機上,還要…

其實不用這麼累的,如果我們有架設網頁的執行環境,像是在Windows下的XAMPP,或在我主機上的虛擬主機,都可以直接透過瀏覽器來運行開發的專案,作法是:

1.將public目錄下的.htaccess與index.php移至根目錄

2.修改index.php,將2個require敘述裏的路徑刪除 “../”

(略)
require __DIR__.'/vendor/autoload.php';
(略)
$app = require_once __DIR__.'/bootstrap/app.php';

 

改完後就可以直接下url,http://localhost/projects/layout_example/

這是使用xampp在Windows上開發的方式,虛擬主機也是一樣的做法。

 

問題:如果在Windows下,務必要把avast這個防毒軟體關掉,這個防毒軟體會把根目錄裏的server.php當成病毒刪除,若發生刪除的現象,可以從別的專案複製server.php過來,並且再次執行 (關掉avast)。

 

 

【筆記-Laravel】Laravel pivot tables: 簡單到進階的資料表格多對多關係建立

這個學習主要在講解應用Laravel樞紐表實作資料表格的多對多關係,這邊用專案與參與者的多對多關係:一個專案可以有多位的參與者,一個參與者可以參與多個專案,多對多的關係要分解成二個一對多的關係:   專案基本資料  —-< 專案與參與者 >—- 參與者基本資料。

學習來源:Laravel Pivot Tables: Simple to Advanced Many-to-Many