Ornamental Nursery Project

觀賞苗圃項目

歡迎來到觀賞苗圃項目，這是位於智利的觀賞植物苗圃線上商店。這個專案是我第一次正式涉足網頁開發，為當地的苗圃企業提供一個動態的、用戶友好的網站。

項目概況

該計畫展示了智利的一個觀賞植物苗圃，提供了一個線上平台，客戶可以在其中探索和購買各種觀賞植物。該網站是使用 PHP 作為後端、Vanilla JavaScript 用於互動、SCSS 用於樣式以及 Gulp 用於任務自動化而建立的。此架構遵循模型-視圖-控制器 (MVC) 模式，以確保乾淨且有組織的程式碼庫。

特徵

• 使用者身份驗證：客戶的安全登入和註冊。
• 產品目錄：瀏覽各種觀賞植物，並附有詳細說明和圖像。
• 購物車：將植物加入購物車並在結帳前管理購物車。
• 訂單管理：客戶可以查看其訂單歷史記錄並追蹤當前訂單。
• 響應式設計：針對桌面和行動裝置進行了最佳化，以提供無縫的使用者體驗。

使用的技術

• 後端： PHP
• 前端：普通 JavaScript
• 樣式： SCSS
• 任務運行器： Gulp
• 架構：模型-視圖-控制器 (MVC)

專案結構

• controllers/ - 包含管理應用程式邏輯的控制器。
• models/ - 包含表示資料和業務邏輯的模型。
• views/ - 包含負責顯示使用者介面的視圖。
• public/ - 包含可公開存取的文件，例如 CSS、JavaScript 和圖片。
• src/scss/ - SCSS 樣式的來源檔案。
• gulpfile.js - Gulp 任務的設定。

安裝

若要在本機設定項目，請依照下列步驟操作：

1. 克隆儲存庫：

   git clone https://github.com/yourusername/ornamental-nursery-project.git

2. 導航到專案目錄：

    cd ornamental-nursery-project

3. 安裝依賴項：

   npm install

4. 編譯 SCSS 並觀察變化：

   gulp

5. 設定資料庫：

   • 建立 MySQL 資料庫並匯入提供的 SQL 檔案。
   • 在config.php檔案中設定資料庫連線。

6. 啟動開發伺服器：

   • 使用本機開發伺服器（例如，XAMPP、WAMP、MAMP）來提供專案文件。

用法

1. 造訪網站：

   • 開啟 Web 瀏覽器並導覽至http://localhost/ornamental-nursery-project 。

2. 探索功能：

   • 瀏覽目錄，將商品加入購物車，然後繼續結帳。

3. 管理訂單：

   • 登入查看您的訂單歷史記錄並追蹤當前訂單。

貢獻

歡迎貢獻！如果您有改進或新功能的建議，請隨時提出問題或提交拉取請求。

執照

該項目已獲得 MIT 許可證的許可。有關詳細信息，請參閱許可證文件。

致謝

• 特別感謝當地托兒所對此計畫的合作。
• 感謝開源社群提供的工具和資源，使這個計畫成為可能。