ファッション Eコマース ウェブサイト プロジェクト

主な機能

ホームページ

• 最新商品、特集コレクション、魅力的なプロモーションを視覚的に表示。
• 目を引く商品画像を含む大きなバナーと**「今すぐ購入」**ボタンで、特集アイテムに簡単にアクセス。
• **「新着アイテム」および「コレクション」**セクションが整理されており、ユーザーが簡単に商品を見つけられるように設計。

登録/ログイン

• ログインによって管理者と顧客がアカウントにアクセス可能。
• インターフェース機能:
  • ユーザー名/メールアドレスとパスワード入力フォーム。
  • **「パスワードをお忘れですか」**リンクでアカウント回復（登録済みメールにOTP送信）。
• ワークフロー:
  1. ユーザーが資格情報を入力。
  2. 検証後のリダイレクト先：
     • 管理者：管理者パネル。
     • 顧客：ホームページ（登録アカウントはすべて自動的に「顧客」ロールが割り当てられる）。
     • 無効な詳細：**「無効なログイン資格情報」**と表示。
• セキュリティ: NodeのBcryptを使用した暗号化パスワード。

商品カテゴリと検索

• シャツ、パンツ、フットウェア、アクセサリーなどの明確な分類。
• 水平ナビゲーションバーと検索バーで商品アクセスと検索が直感的に。
  • 名前で商品をすばやく検索。
  • 検索バーは入力内容に基づいて結果をフィルタリング。

商品詳細ページ

• 高品質の画像、商品名、価格、説明、サイズ、ユーザーレビューを表示。
• 「カートに追加」ボタンで商品をカートに追加可能（未ログインの場合はログインページにリダイレクト）。

ショッピングカート

• アイテムの追加、数量調整、削除、合計金額の確認が可能。
• ポップアップでカート内アイテムの詳細情報をすばやく確認。

チェックアウト

• 簡潔で迅速かつ安全なチェックアウトプロセス。
• 現金およびZaloPayを含む複数の支払い方法に対応。
• 支払い完了後に注文詳細を含む確認メールを送信。

商品および注文管理 (管理者)

• 管理者は商品を追加、編集、削除し、注文ステータスを更新可能。
• 直感的なインターフェースで効率的なシステム管理。
• 管理者ダッシュボードで配達済み注文数、総収益、顧客アカウント、データベース内の商品数を表示。

ロジックテスト

• 未認証アカウントや「顧客」アカウントが「管理者」ページにアクセスしようとすると404ページにリダイレクト。
• **「カートに追加」および「ショッピングバッグ」**ボタンは未認証ユーザーをログインページにリダイレクト。
• アカウント回復にはメールでOTPが必要。無効なメールではアラートを表示。
• 注文完了後、ショッピングバッグは自動的にクリア。

製品購入の手順ガイド

Demo.Final.Product.mp4

---

使用技術

フロントエンド

• HTML, CSS, JavaScript: ユーザーフレンドリーでデバイス間互換性のあるインターフェースを構築。
• EJS (Embedded JavaScript): 動的なウェブページを作成し、バックエンドデータをフロントエンドに統合。

バックエンド

• Node.js: 柔軟で高性能なサーバーを開発。
• Express.js: API構築とHTTPリクエスト処理用フレームワーク。

その他のライブラリおよびツール

• Axios: API呼び出し用のHTTPクライアント。
• Bcrypt/Bcryptjs: セキュリティ向上のためのパスワードハッシュ化。
• Nodemailer: OTP送信や購入確認メール送信用。

データベース

• MySQL: 商品、ユーザー、注文、その他関連情報の保存。ORMツールとしてSequelizeを使用。

---

インストールガイド

1. 開発環境を設定

• Node.jsおよび**npm (Node Package Manager)**をインストール。
• MySQLおよびXAMPPをインストールしてデータベースを管理。

2. ソースコードをダウンロード

• GitHubリポジトリからローカルマシンにソースコードをクローン。

3. 依存関係をインストール

npm install

4. データベースを構成

• MySQLデータベース (shopping_web_db) を作成します。
• プロジェクトの設定ファイルで接続情報を構成します。

5. アプリケーションを実行

• サーバーを起動するには以下を実行します:

  npm start

• ウェブブラウザで次のURLにアクセスします: localhost:8000

---

ディレクトリ構造

backend/
├── env/
│   ├── .env                   # 環境変数と設定ファイル。
│   ├── .env.example           # 環境変数の例。
├── node_modules/              # NPMパッケージ。
├── src/
│   ├── config/                # バックエンド設定ファイル。
│   ├── controllers/           # アプリケーションロジックを処理するコントローラー。
│   ├── middlewares/           # ミドルウェア関数。
│   ├── migrations/            # データベーススキーマを進化させるマイグレーションファイル。
│   ├── models/                # データモデル。
│   ├── routes/                # アプリケーションルート。
│   ├── seeders/               # 初期データ投入用ファイル。
│   ├── services/              # ビジネスロジック。
│   ├── utils/                 # 再利用可能なユーティリティ関数。
│   ├── server.js              # アプリケーションサーバーの設定と起動。

docs/
├── gifs/                      # ドキュメント用GIFファイル。
├── videos/                    # ドキュメント用動画ファイル。

frontend/
├── public/                    # フロントエンドの公開アセット。
│   ├── fonts/                 # フォントファイル。
│   ├── icons/                 # アイコンファイル。
│   ├── images/                # 画像。
│   ├── scripts/               # JavaScriptファイル。
│   ├── styles/                # CSSファイル。
├── src/                       # フロントエンドのソースコード。
│   ├── pages/                 # 全体ページ。
│   ├── partials/              # ページ部分のコンポーネント。

---

Fashion E-commerce Website Project

Key Features

Homepage

• Visually displays the latest products, featured collections, and attractive promotions.
• Large banner with eye-catching product images and a "Buy Now" button for easy access to featured items.
• "New Arrivals" and "Collections" sections are organized to help users quickly find suitable products.

Registration/Login

• Login grants Admins and Customers access to their accounts.
• Interface Features:
  • Login form with fields for Username/Email and Password.
  • "Forgot Password" link for account recovery (send OTP via registered Email)
• Workflow:
  1. User inputs credentials.
  2. Verified credentials redirect:
     • Admins to the admin panel.
     • Customers to the homepage (Every registered account will automatically be assigned the "Customer" role)
     • Invalid details show "Invalid login credentials."
• Security: Encrypted passwords using Node's Bcrypt.

Product Categories and Searching

• Clear classification into categories like Shirts, Pants, Footwear, and Accessories.
• Horizontal navigation bar along with the Search bar makes accessing and searching for products intuitive.
  • Quickly search for products by name.
  • Search bar supports filtering results based on user input.

Product Detail Page

• Displays detailed product information: high-quality images, name, price, description, size, and user reviews.
• User can add the item to cart via "Add to Cart" Button. If user is not logged in then the button will redirect to the Login page

Shopping Cart

• Allows users to add, adjust quantity, remove items, and view the total price.
• Pop-up displays detailed information about items in the cart for quick review.

Checkout

• Simplified, fast, and secure checkout process.
• Supports multiple payment methods, including cash and ZaloPay.
• Sends a confirmation email with order details after successful payment.

Product and Order Management (Admin)

• Admin can add, edit, delete products, and update order statuses.
• Efficient system control through an intuitive interface.
• Admin dashboard displays the number of delivered orders, total revenue, customer accounts, and products in the database.

Logic Testing

• Unauthenticated or "Customer" accounts are redirected to a 404 page when attempting to access "Admin" pages.
• "Add to Cart" and "Shopping Bag" buttons redirect unauthenticated users to the login page.
• Recovering an account requires an email for OTP; invalid emails show an alert.
• After completing an order, the Shopping Bag is automatically cleared of previous items.

A Step-by-Step Guide to Purchasing a Product

Demo.Final.Product.mp4

---

Technologies Used

Frontend

• HTML, CSS, JavaScript: Build a user-friendly, cross-device compatible interface.
• EJS (Embedded JavaScript): Create dynamic web pages and integrate backend data into the frontend.

Backend

• Node.js: Develop a flexible and high-performance server.
• Express.js: Framework for building APIs and handling HTTP requests.

Additional Libraries and Tools

• Axios: HTTP client for API calls.
• Bcrypt/Bcryptjs: Password hashing for security.
• Body-Parser: Parse incoming request bodies.
• Cookie-Parser: Handle cookies.
• CORS: Enable Cross-Origin Resource Sharing.
• Crypto-JS: Data encryption.
• Dotenv: Manage environment variables.
• Express-Session: Manage user sessions.
• Moment.js: Format and manipulate dates.
• Nodemailer: Send emails (e.g., OTP for password reset or Confirmation after a purchase).
• OTP-Generator: Generate one-time passwords.

Database

• MySQL: Store product, user, order, and related information. ORM tools like Sequelize was used

Project Management Tools

• Google Drive: Document storage and sharing.
• Microsoft Planner: Task assignment and progress tracking.
• Microsoft Teams: Online communication and meetings.
• Git/GitHub: Source code management.

Design and Development Tools

• Figma: Design website interfaces.
• VSCode (Visual Studio Code): Code editor.
• XAMPP: Development and testing environment setup.

---

Installation Guide

1. Set up the Development Environment

• Install Node.js and npm (Node Package Manager).
• Install MySQL and XAMPP to manage the database.

2. Download the Source Code

• Clone the source code from the GitHub repository to your local machine.

3. Install Dependencies

• Open a terminal or command prompt.
• Navigate to the project directory and run:

  npm install

4. Configure the Database

• Create a MySQL database ( shopping_web_db ).
• Configure connection details in the project’s configuration file.

5. Run the Application

• Start the server using:

  npm start

• Access the website via a web browser( localhost:8000 ).

---

Directory Structure

backend/
├── env/                       
│   ├── .env                   # Contains sensitive environment variables and configurations.
│   ├── .env.example           # Provides an example of the environment variables.
├── node_modules/              # NPM packages (not tracked by Git).
├── src/                       # Contains all backend source code.
│   ├── config/                # Stores backend configuration files.
│   ├── controllers/           # Contains controllers, which are functions that handle logic for application routes.
│   ├── middlewares/           # Contains application middleware. Middleware are functions that handle requests in the HTTP request pipeline.
│   ├── migrations/            # Stores migration files used to evolve the database schema over time.
│   ├── models/                # Contains data models. These models are classes that represent data from the database.
│   ├── routes/                # Stores files that define application routes.
│   ├── seeders/               # Contains data seeding files, which populate the database with initial data for testing or setup.
│   ├── services/              # Contains business logic of the application.
│   ├── utils/                 # Contains reusable utility functions.
│   ├── server.js              # Configures and starts the application server.
├── .babelrc                   # Configuration for Babel.
├── .gitignore                 # Specifies intentionally untracked files to ignore by Git.
├── .sequelizerc               # Configuration for Sequelize ORM.
├── package-lock.json          # Records exact versions of all installed NPM packages.
├── package.json               # Node.js project configuration, including dependencies and scripts.
├── README.md                  # Provides documentation for the project, installation, and usage instructions.

docs/
├── gifs/                      # GIF files for documentation.
├── videos/                    # Video files for documentation.

frontend/
├── public/                    # Public assets folder.
│   ├── fonts/                 # Font files.
│   ├── icons/                 # Icon files.
│   ├── images/                # Images used in the frontend.
│   ├── scripts/               # JavaScript files.
│   ├── styles/                # CSS files.
├── src/                       # Source code for the frontend.
│   ├── pages/                 # All pages.
│   ├── partials/              # Components for parts of pages.
├── .gitignore                 # Specifies files to be ignored by Git.
├── README.md                  # Documentation for the frontend part of the project.

---