Webエンジニアに仕上げる
目標
実際にWebアプリケーションを書いてみるのが一番早い。
- Webに関係する基本的なソフトウェア構成を知る
- Webアプリケーションの仕組みを理解する
- Web周辺のテクニカルな要素を知る
Webに関係する基本的なソフトウェア構成を知る
- Webサーバ、APサーバ、DBサーバ
Webに関係するソフトウェアとしてWebサーバ、APサーバ、DBサーバがあることを知る。Webアプリケーションとしてコラボレートするそれぞれのソフトウェアの役割を理解する。
Webアプリケーションの仕組みを理解する
- ステートレスな応答: リクエスト、レスポンス
リクエストとレスポンスからなるステートレスな応答シーケンスを理解する。その中でデータベース操作のトランザクションが閉じることを知る。
Web周辺のテクニカルな要素を知る
- パラメータ、セッション、HTML/JavaScript
パラメータによって擬似的なステートを実現できることを実験する。セッションによってステートフルに画面遷移できることを実験する。フォームを使ったパラメータの送信とJavaScriptによる(少し)リッチクライアントを実装する。
課題
逐次課題を実施することで上記目標の達成を目指す。
環境構築
XAMPPインストール
| 事前条件 | Windows端末の環境が整っていること。 |
| 課題内容 | PHPとMySQLが動作する環境を作成する。 下記のサイトからインストーラXAMPP for Windowsをダウンロードして実行する。 何をインストールしてるかを(調べるなどして)知っておくこと。 |
| 事後条件 | ApacheとMySQLをサービスとして登録していること。 |
疎通確認: Webサーバ
| 事前条件 | XAMPPをインストール済みであること。 |
| 課題内容 | apacheが正常に動作していることを確認する。 apacheの公開ディレクトリにindex.htmlを保存する。 ブラウザからindex.htmlにアクセスして表示を確認する。 ファイルの内容は以下のようにする。 |
| 事後条件 | ブラウザにindex.htmlの内容を表示していること。 |
- index.html
Hello HTML
疎通確認: APサーバ(PHP)
| 事前条件 | XAMPPをインストール済みであること。 |
| 課題内容 | apacheが正常に動作していることを確認する。 apacheの公開ディレクトリにindex.phpを保存する。 ブラウザからindex.phpにアクセスして表示を確認する。 ファイルの内容は以下のようにする。 |
| 事後条件 | ブラウザにindex.phpの出力内容を表示していること。 |
- index.php
<?php
print("Hello PHP");
?>
疎通確認: MySQL
| 事前条件 | XAMPPをインストール済みであること。 |
| 課題内容 | MySQLが正常に動作していることを確認する。 XAMPP管理ページにてMySQLアカウントrootのパスワードを設定する。 ターミナル(cmd)から設定したrootのパスワードでMySQLにログインする。 |
| 事後条件 | MySQLのコマンド待ち状態を表示すること。 |
基礎: MySQL
rootパスワードを設定する(XAMPP管理ページにて)
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
アカウントを作成する(XAMPP管理ページにて)
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
テーブルを作成する(XAMPP管理ページにて)
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
DMLを書く(select, insert, update, delete)
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
基礎: PHP
echo, printを使って文字列を出力する
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
関数を定義してコールする
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
関数を別ファイルに定義してコールする
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
PHPからMySQLに接続する
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
基礎: Web
HTMLの基本構成を書く
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
アンカーを使って別のPHPページにリンクする
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
GETパラメータを渡す
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
POSTパラメータを渡す
| 事前条件 | |
| 課題内容 | |
| 事後条件 |
Webアプリケーション: データベース
Webアプリケーション: セッション
Webアプリケーション: リッチクライアント
作成日 2014-06-10