※弊社の新人教育の資料を公開しております。
WEBページは「HTML」「JavaScript」「CSS」でできています。なので、まずはそれぞれがどういうものなのか?しっかり捉えましょう。
どういうものか理解できたら下記の実習を行ってください。
①下記の2つのWEBページをパソコンのデスクトップ上にでも作成してください。作成する際は適当なフォルダを作成してその中に置いてください。作成後はブラウザで表示して確認してください。
見出し:入力画面 段落:入力項目に入力して送信ボタンを押してください。 入力項目1: ラベル:お名前 / タイプ:text 入力項目2: ラベル:年代 / タイプ:select / プルダウンリスト:10代、20代、30代、40代以上 入力項目3: ラベル:性別 / タイプ:radio / 選択値:男性、女性 入力項目4: ラベル:問題なければチェック / タイプ:checkbox 入力項目5: ラベル:備考 / タイプ:textarea ボタン: ラベル:送信 / タイプ:submit
見出し:完了画面 divタグ:受信しました。
学習ポイント
・HTMLの記述方法を把握しましょう。
②上の①ができたら下記の変更を行ってください。
見出し:入力画面 ← 赤色 段落:入力項目に入力して送信ボタンを押してください。 ← 下の余白を1文字の高さ分とる 入力項目1: ← ラベルを青色 ラベル:お名前 / タイプ:text 入力項目2: ← ラベルを青色 ラベル:年代 / タイプ:select / プルダウンリスト:10代、20代、30代、40代以上 入力項目3: ← ラベルを青色 ラベル:性別 / タイプ:radio / 選択値:男性、女性 入力項目4: ← ラベルを青色 ラベル:問題なければチェック / タイプ:checkbox 入力項目5: ← ラベルを青色 ラベル:備考 / タイプ:textarea
学習ポイント
・CSSの記述方法を把握しましょう。
③上の②ができたら下記の変更を行ってください。
ボタン: ラベル:送信 / タイプ:submit → ボタンを押したときに「送信しますか?」のメッセージを表示して OK:end.htmlへ NG:そのまま
下記を追加 ボタン: ラベル:戻る / タイプ:button → 押すとindex.htmlに戻る
学習ポイント
・JavaScriptの記述方法を把握しましょう。
③までできたら下記の点も把握してください。
・index.htmlの送信ボタンを押す → end.htmlのときのアドレスの変化 ・end.htmlの戻るボタンを押す → index.htmlのときのアドレスの変化 ・index.htmlはスタートページという扱いになる
上記で記述した「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の配列に格納されている」です。
新人教育(初級編)は以上です。小さいとは言え実習によってWEBシステムの一連の動きを構築しました。WEBシステムがどういうしくみで動いているのかしっかりと把握してください。