← プロジェクトに戻る ウェブサイト・レシピ

Cuisinea

分かりやすいコンテンツ表示と簡単な閲覧に重点を置いたレシピプラットフォーム。

Cuisinea
プロジェクト

プロジェクト

Cuisineaは、シンプルで視覚的、かつ分かりやすい方法でレシピを紹介することを目的として設計されており、料理コンテンツを簡単に探索できるような構造になっています。

システムアーキテクチャ & 料理プラットフォーム

PHPとMySQLで構築された、レシピの発見・調理・共有に特化したWebアプリケーション。Fetch APIによる非同期リアルタイム検索、Bcryptハッシュ化によるセキュアな会員エリア、厳格な画像MIME検証機能を備えています。

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Cuisinea Full-Stack Web Architecture                     │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │
           ┌───────────────────────────┼───────────────────────────┐
           ▼                           ▼                           ▼
  🔍 Moteur Asynchrone (AJAX)   👤 Espace Membre & Sécurité  🍲 Modèle de Données (SQL)
  • Fetch API en temps réel    • Hash Bcrypt / Argon2       • Tables categories & recipes
  • Requête SQL LIKE préparée  • Sessions PHP & Rôles       • Clés étrangères & Contraintes
  • Filtrage par catégories    • Envois SMTP (PHPMailer)    • Validation MIME binaire
  • Injection DOM sans reload  • Protection XSS & Uploads   • Chargement différé (Lazy)
            

瞬時の非同期検索

ページを再読み込みすることなく、JavaScript ES6 Fetch APIを用いてMySQLデータベースをリアルタイムに検索。

会員エリア & セキュリティ

パスワードの暗号化ハッシュとPHPMailerによるSMTP自動通知を備えたユーザー登録・認証システム。

厳格なアップロード検証

getimagesize()による画像のバイナリ検証と、slugify()およびuniqid()を用いた安全なファイル名生成。

1. 機能モジュール & ユーザー体験

レシピの閲覧とコミュニティへの投稿をシンプルかつ快適にするための設計:

動的なホームページ

訪問ごとにランダムに3つのレシピを表示し、料理のインスピレーションを継続的に提供。

RAND() SQLCartes dynamiquesBootstrap 5

詳細なレシピシート

材料を行ごとに整理して表示し、番号付きの手順で調理プロセスをわかりやすく解説。

IngrédientsÉtapes pas-à-pasnl2br

レシピの投稿 & 管理

ログイン会員専用のセキュアな投稿フォームで、カテゴリー選択と画像アップロードに対応。

Upload MIMEslugify()uniqid()

2. 非同期検索 & SQLセキュリティ

search.phpバックエンドは複数条件のプリペアドステートメントを実行し、SQLインジェクション攻撃を完全に防御:

// Requête préparée multi-critères sécurisée (search.php)
$sql = "SELECT * FROM recipes
        WHERE (? = '' OR title LIKE ? 
               OR description LIKE ? 
               OR ingredients LIKE ?)
        AND (? = '' OR category_id = ?)";

$stmt = $pdo->prepare($sql);
$stmt->execute([
    $searchTerm, "%$searchTerm%", "%$searchTerm%", "%$searchTerm%",
    $category, $category
]);
            
  • 全項目テキスト検索: SQLのLIKE演算子を使用して、レシピ名、説明文、材料を一括で同時に検索。
  • カテゴリー絞り込み: 前菜、主菜、デザートなどの料理区分ごとにAPI経由で即座にフィルタリング。
  • 該当なし時のフィードバック: 検索条件に一致するレシピが存在しない場合に、分かりやすい案内メッセージを表示。

3. MySQLデータモデル & リレーショナルスキーマ

レシピ、カテゴリー、ユーザー間の整合性を維持する正規化されたデータベース設計:

テーブル 主要カラム SQL型 説明 & 制約
categories id, name INT, VARCHAR(255) 自動採番主キーを持つ料理カテゴリー。
recipes id, category_id, title, description, ingredients, instructions, image INT, TEXT, VARCHAR(255) 外部キーでカテゴリーと紐づけられたレシピデータ(材料リスト・調理手順)。
users id, first_name, last_name, email, password, role INT, VARCHAR(255) 一意性制約付きメールアドレスと安全にハッシュ化されたパスワードを持つユーザー情報。

4. 技術コンポーネントマトリクス

コンポーネント 技術的実装 ユーザー & パフォーマンス上の利点
非同期検索 JavaScript ES6 Fetch API + search.php スムーズな操作感 ページリロード不要の動的リアルタイム検索
PDOプリペアドステートメント PHP PDO Prepared Statements 最高水準の安全性 SQLインジェクション脆弱性からの完全防御
アップロードサニタイズ getimagesize() + slugify() + uniqid() ファイル整合性 偽装実行ファイルを遮断し、上書きを防止
パスワード暗号化 password_hash() & password_verify() (Bcrypt) データ保護 Bcryptを用いた業界標準の認証情報保護

Cuisineaをオンラインで体験する

レシピを閲覧し、非同期リアルタイム検索をお試しください。

Cuisineaアプリを見る ↗