Project制作実例と説明
Docs_canape_save_b2_navbars-offcanvas
▶ save_b/Offcanvas.php | 簡略化した画面
▶ save_b2/navbars-offcanvas/main_n.php| 簡略化した画面
▶ save_b2/navbars-offcanvas/index.php | 簡略化した画面
友人の会員制バーWeb制作実例
ログインして利用開始時に認証するBootstrap + PHP で作成されています
PHP部分、Bootstrap 5.3.2 部分、jQuery + Ajax部分に分けて説明します。PHP部分は、ログイン、会員登録、会員専用ページの3ファイルで構成されており、データベースにはmembersテーブルが作成されています。
Bootstrap 5.3.2 部分
Navbar（ナビゲーションバー）
Offcanvas （隠しサイドバー）
Modal （ポップアップダイアログ）
Dropdown （ドロップダウンメニュー）
- login.php: ▶ ログインファイル作成
- signup.php : 新規ユーザー登録ファイル作成
- member.php : 会員専用ページファイル作成
- データベース作る: テーブル: members作成
| カラム | 型 | 備考 |
|---|---|---|
| id | int(5) | |
| name | varchar(50) | |
| varchar(200) | ||
| password | varchar(225) | |
| created | DATE | 入力日 |
Bootstrap 5.3.2 部分
Navbar（ナビゲーションバー）
Offcanvas （隠しサイドバー）
Modal （ポップアップダイアログ）
Dropdown （ドロップダウンメニュー）
隠しサイドバーをプロジェクトに組み込む
Launch demo modal ボタン有効化
データベース作る
現在のSQLの改善| 項目 | 変更前 | 変更後 | 理由 |
|---|---|---|---|
IF NOT EXISTS |
なし | あり | 重複実行でエラーにならない |
NOT NULL |
なし | あり | 空データの混入防止 |
ENGINE=InnoDB |
なし | あり | トランザクション対応 |
文字コード |
utf8 | utf8mb4 | 絵文字・特殊文字に対応 |
さらに m_date テーブルを改善するSQL
-- m_dateをNOT NULLに改善
ALTER TABLE m_date
MODIFY data1 VARCHAR(255) NOT NULL,
MODIFY data2 VARCHAR(255) NOT NULL;