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