※弊社の新人教育の資料を公開しております。

WEBページがどうできているかを把握する

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

利用するツール
WEBページ(htmlファイル)を作成する際はテキストエディタを利用します。メモ帳でも可能ですがTeraPadなどのフリーソフトを利用すると便利です。

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

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

index.html
見出し:入力画面
段落:入力項目に入力して送信ボタンを押してください。
入力項目1:
 ラベル:お名前 / タイプ:text
入力項目2:
 ラベル:年代 / タイプ:select / プルダウンリスト:10代、20代、30代、40代以上
入力項目3:
 ラベル:性別 / タイプ:radio / 選択値:男性、女性
入力項目4:
 ラベル:問題なければチェック / タイプ:checkbox
入力項目5:
 ラベル:備考 / タイプ:textarea
ボタン:
 ラベル:送信 / タイプ:submit
end.html
見出し:完了画面
divタグ:受信しました。

学習ポイント

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

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

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

学習ポイント

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

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

index.html
ボタン:
 ラベル:送信 / タイプ:submit
 → ボタンを押したときに「送信しますか?」のメッセージを表示して
   OK:end.htmlへ
   NG:そのまま
end.html
下記を追加
ボタン:
 ラベル:戻る / タイプ:button
 → 押すとindex.htmlに戻る

学習ポイント

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

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

・index.htmlの送信ボタンを押す → end.htmlのときのアドレスの変化
・end.htmlの戻るボタンを押す → index.htmlのときのアドレスの変化
・index.htmlはスタートページという扱いになる
余談
システム開発の中で出てくる画面遷移とは上記のことで、それを示したドキュメントが画面遷移図となります。

WEBサーバーにWEBページを公開する

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

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

利用するツール
WEBページ(htmlファイル)をWEBサーバーへアップロードするためにはファイル転送ソフト(FFFTPやWinSCPなど)を利用します。

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

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

サーバーで動くプログラムとブラウザで動くプログラムの違いを把握する

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

PHPやJavaなど
WEBページに入力されたデータを受け取って処理したり、データベースからデータを受け取って処理したりします。
SQL
データベースにデータを登録、変更(更新)、削除、または抽出(セレクト)するためのプログラムです。

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

index.html
ボタン:
 ラベル:送信 / タイプ:submit
 → ボタンを押したときに「送信しますか?」のメッセージを表示して
   OK:end.phpへ
   NG:そのまま
end.php
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システムがどういうしくみで動いているのかしっかりと把握してください。

当ホームページはフレームワークで有名なCakePHP(ver.2.x)をベースに独自のホームページ管理システム(CMS)を開発して公開しています。データベースとして顧客管理(CRM)や営業支援(SFA)で有名なセールスフォース(Salesforce)を利用しています。
CakePHPのロゴ
Google+ ページ
社内親睦会などの近況を公開しています。
Google+
特定労働者派遣事業許可
(特)47-300328
QRコード