Ornamental Nursery Project

観賞用苗床プロジェクト

チリにある観葉植物苗床のオンライン ショップ、Ornamental Nursery Project へようこそ。このプロジェクトは、Web 開発への私の最初の正式な取り組みであり、地元の保育事業向けのダイナミックでユーザーフレンドリーな Web サイトを特徴としています。

プロジェクト概要

このプロジェクトでは、チリの観賞用植物苗床を紹介し、顧客がさまざまな観賞用植物を探索して購入できるオンライン プラットフォームを提供します。このサイトは、バックエンドに PHP、対話機能に Vanilla JavaScript、スタイルに SCSS、タスクの自動化に Gulp を使用して構築されています。このアーキテクチャは、Model-View-Controller (MVC) パターンに従っており、クリーンで整理されたコードベースを保証します。

特徴

• ユーザー認証:顧客の安全なログインと登録。
• 製品カタログ:詳細な説明と画像付きの幅広い観賞植物を閲覧できます。
• ショッピング カート:植物をショッピング カートに追加し、チェックアウト前にカートを管理します。
• 注文管理:顧客は注文履歴を表示し、現在の注文を追跡できます。
• レスポンシブ デザイン:デスクトップとモバイル デバイス向けに最適化されており、シームレスなユーザー エクスペリエンスを実現します。

使用されている技術

• バックエンド: PHP
• フロントエンド:バニラ JavaScript
• スタイリング: SCSS
• タスクランナー:ガルプ
• アーキテクチャ:モデル-ビュー-コントローラー (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 ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。

謝辞

• このプロジェクトにご協力いただきました地元の保育園に心より感謝いたします。
• このプロジェクトを可能にしたツールとリソースを提供してくれたオープンソース コミュニティに感謝します。チリ