フルスタック構成の解説

HTML / CSS / JavaScript + PHP + MySQL によるWebアプリ構成

① フロントエンド

使用技術
  • HTML（構造）
  • CSS（デザイン）
  • JavaScript（動作）
  • jQuery + Ajax（非同期通信）
  • Bootstrap（UIフレームワーク）
👉 UI・操作・非同期通信まで実装済み

② バックエンド

使用技術
  • PHP
  • session_start()（セッション管理）
  • CSRFトークン（不正送信防止）
  • htmlspecialchars（XSS対策）
👉 セキュリティ対策を意識した設計

③ データ層

データ処理
  • save_data.php（データ保存API）
  • MySQLデータベース
👉 フロント → PHP → DB のデータフローが成立

全体のデータの流れ

ユーザー入力
   ↓
JavaScript（Ajax）
   ↓
PHP（save_data.php）
   ↓
MySQL（保存）
   ↓
（取得API）
   ↓
画面に表示

まとめ

👉 フロントエンド + バックエンド + データ層 = フルスタック構成