WEBページは「HTML」「JavaScript」「CSS」でできています。なので、まずはそれぞれがどういうものなのか？しっかり捉えましょう。

どういうものか理解できたら下記の実習を行ってください。

①下記の２つのWEBページをパソコンのデスクトップ上にでも作成してください。作成する際は適当なフォルダを作成してその中に置いてください。作成後はブラウザで表示して確認してください。

見出し：入力画面
段落：入力項目に入力して送信ボタンを押してください。
入力項目１：
　ラベル：お名前　／　タイプ：text
入力項目２：
　ラベル：年代　／　タイプ：select　／　プルダウンリスト：10代、20代、30代、40代以上
入力項目３：
　ラベル：性別　／　タイプ：radio　／　選択値：男性、女性
入力項目４：
　ラベル：問題なければチェック　／　タイプ：checkbox
入力項目５：
　ラベル：備考　／　タイプ：textarea
ボタン：
　ラベル：送信　／　タイプ：submit

見出し：完了画面
divタグ：受信しました。

学習ポイント

・HTMLの記述方法を把握しましょう。

②上の①ができたら下記の変更を行ってください。

見出し：入力画面　←　赤色
段落：入力項目に入力して送信ボタンを押してください。　←　下の余白を１文字の高さ分とる
入力項目１：　←　ラベルを青色
　ラベル：お名前　／　タイプ：text
入力項目２：　←　ラベルを青色
　ラベル：年代　／　タイプ：select　／　プルダウンリスト：10代、20代、30代、40代以上
入力項目３：　←　ラベルを青色
　ラベル：性別　／　タイプ：radio　／　選択値：男性、女性
入力項目４：　←　ラベルを青色
　ラベル：問題なければチェック　／　タイプ：checkbox
入力項目５：　←　ラベルを青色
　ラベル：備考　／　タイプ：textarea

学習ポイント

・CSSの記述方法を把握しましょう。

③上の②ができたら下記の変更を行ってください。

ボタン：
　ラベル：送信　／　タイプ：submit
　→　ボタンを押したときに「送信しますか？」のメッセージを表示して
　　　OK：end.htmlへ
　　　NG：そのまま

下記を追加
ボタン：
　ラベル：戻る　／　タイプ：button
　→　押すとindex.htmlに戻る

学習ポイント

・JavaScriptの記述方法を把握しましょう。

③までできたら下記の点も把握してください。

・index.htmlの送信ボタンを押す → end.htmlのときのアドレスの変化
・end.htmlの戻るボタンを押す → index.htmlのときのアドレスの変化
・index.htmlはスタートページという扱いになる

まずはWEBサーバーってどんなものなのかを把握してください。書籍やWEBからの情報を見て自分なりにまとめて把握してください。

把握ができたら、上記で作成したindex.htmlとend.htmlを公開してみましょう。XREA.COMでは無料でお試しができるサービスがあるのでそれを利用して公開してみましょう。

公開できたら下記の点も把握してください。

・パソコン上で作成したときとWEBサーバーで公開したときの違い

上記で記述した「HTML」「JavaScript」「CSS」はブラウザで動くプログラムになります。逆にサーバー側で動くプログラムは下記になります。

XREA.COMではPHPプログラムを動かすことができるので、実際に下記のコーディングをPHPで行ってサーバープログラムの動きを確認しましょう。コーディングに際して抑えておくべきことは「PHPでは送信されたデータをどうやって受け取るか」と「受け取ったデータをどうやって出力するか」です。

ボタン：
　ラベル：送信　／　タイプ：submit
　→　ボタンを押したときに「送信しますか？」のメッセージを表示して
　　　OK：end.phpへ
　　　NG：そのまま

end.htmlをend.phpに変更
index.htmlで入力された情報(お名前、年代など)をend.phpで表示

コーディングがうまくできたら下記の点も把握してください。

・データを送信する形式：GET、POST
・データを受信するオブジェクト：$_REQUEST、$_GET、$_POST

XREA.COMではMySQLのデータベースも利用できるので、データベースにデータを登録する方法を把握しましょう。

1.適当なデータベースを作成して下記のCREATE TABLEを実行してください。データベースを作成する際は文字コードをUTF-8としてください。

create table aaa (
  id INT AUTO_INCREMENT comment 'ID'
  , name VARCHAR(255) not null comment 'お名前'
  , nendai VARCHAR(16) not null comment '年代'
  , seibetsu VARCHAR(8) not null comment '性別'
  , kakunin VARCHAR(8) not null comment '確認チェック'
  , biko TEXT comment '備考'
  , constraint aaa_contents_PKC primary key (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 comment 'aaaテーブル' ;

2.データベースの中にテーブルが作成できたらindex.htmlから送信されてきたデータをデータベースに登録(保存)してみましょう。コーディングに際して抑えておくべきことは「PHPからSQLを実行するにはどうするか」です。

3.データを登録することに成功したら、index.htmlをindex.phpに変更して「登録されたデータを抽出(セレクト)して表示」し「表示されたデータを更新」する動きをコーディングしましょう。コーディングに際して抑えておくべきことは「データベースから取得したデータはPHPの配列に格納されている」です。