自動再生
自動的にで完了済みにする
前のステップに戻る
完了して次のステップへ
PHP・MySQLでつくるカレンダー開発講座
はじめに
はじめに
この講座の使い方、エラーが出た時は？
開発するカレンダーアプリの紹介 (2:13)
【ステージ０】開発環境
開発環境について
キャッシュの削除方法（Chrome / Firefox / Edge / Safari）
開発者ツールについて（Chrome / Firefox / Edge / Safari）
【ステージ１】プロジェクトの準備（2023年6月更新）
プロジェクトフォルダとファイルの作成
フレームワーク（Bootstrap）
プラグイン（Datetimepicker）
ライブラリ（jQuery, Moment.js）
アイコン（Font Awesome）
プロジェクトフォルダの確認
【ステージ２】 レイアウトの作成（2023年6月更新）
HTML の準備
【補足】CDN を使う場合
カレンダー画面の作成 ①ナビゲーションとフッター
カレンダー画面の作成 ②カレンダー
予定追加画面の作成
予定編集画面の作成
予定詳細画面の作成
検索画面の作成
【ステージ３】コードの共通化（2023年6月更新）
コードの共通化 ① head タグ
コードの共通化 ② ナビゲーションバー
コードの共通化 ③ フッター
config ファイルの作成
【補足】require 関数と include 関数の違い
【ステージ４】MySQL データベースの用意（2023年6月更新）
データベースを作成する
データベースに接続する
データベース接続を関数にする
データを保存する
【ステージ５】PHPで機能を実装
予定の追加 ①予定を保存する
予定の追加 ②入力チェック
予定の追加 ③エラーメッセージの表示
予定の追加 ④予定詳細画面に移動する
【補足】サンプルデータを追加するコード（2022年6月追加）
カレンダー画面 ①カレンダー作成の準備
カレンダー画面 ②カレンダーを作成する
カレンダー画面 ③予定を表示する
詳細画面 ①予定を表示する
詳細画面 ②予定を削除する
予定を編集する
予定を検索する
クロスサイトスクリプティング(XSS) 対策
【補足】カレンダーを日曜日始まりにする方法
【補足】Datetimepicker を月曜日始まりにする方法
【ステージ６】タブレット・スマートフォン対応
Datetimepicker を無効にする
日付の初期値を表示する
レイアウトの修正
ラベルの表示とプレースホルダーの作成
datetime-local の動作確認と修正
JavaScript ファイルの作成
【ボーナス】CSVデータから祝日を取得・表示する
はじめに
テーブルを作成する
CSV ファイルからデータを保存する
カレンダーに祝日を表示する
詳細画面に祝日を表示する
【ボーナス②】ウェブ開発の基礎知識
はじめに
HTMLの基本ルール
HTMLの基本構造
CSSの基礎知識 ① CSSを書く場所
CSSの基礎知識 ② セレクタの書き方
CSSの基礎知識 ③ CSSの優先順位（スコア）
予定の追加 ②入力チェック
ロックされています。
すでに登録していたら、
ログインが必要です
.
講座に参加してロックを解除する