■目的

jQueryでのDOM操作について学びます。

■課題

jQueryのDOM操作を用いて、以下の要素を追加するコードをHTMLファイルに追記、もしくは外部ファイル化しブラウザで表示させて下さい。

• <header>のフォントサイズを30pxに変更
• <p id="msg">の次に<p class="sample">サンプル2です。</p>というタグを追加
• <footer>のコピーライトの年数を2013に置換

■目的

Gitとはどういう仕組みかを理解してもらいます。

■課題

• バージョン管理システムとはどんなシステムか調べて下さい。
• Gitに関連する以下の単語の意味を調べて下さい。
  • repository
  • clone
  • checkout
  • commit
  • push
  • pull
  • merge
  • branch
  • tag
  • conflict

調べた結果はIssueのコメントにまとめて下さい。

■目的

HTML5で新しく定義された文章構造について理解し、実際に作成したフォームに適用します。

■課題1

以下の文章構造タグについて調べて下さい。

• header
• footer
• article
• nav
• aside
• section

■課題2

作成したフォームに対し、文章構造タグを適用して下さい。

■目的

GitHubのワークフローの1つであるWIP PRについて学びます。

■課題

1. WIP PR とは何か調べてください
2. GitHubの課題で作成したリポジトリに対してWIP PRを出してください

Laravelは最近トレンドになっているPHPのフレームワークです。
ここではLaravelを触るのを通じてフレームワークについて学びます。
Laravelを調べる時は公式サイトなどを活用して下さい。

• 公式サイト
• 日本語ドキュメント
• 魔法少女Laravel(Laravelについての発表資料)

なお、研修ではLaravel4.x系を使います。Laravel3.x系とは挙動が異なるため、調べる際には注意して下さい。

■目的

Laravelのインストール(プロジェクト作成)と初期設定について学びます。

■課題

composerコマンドを用いて、$HOME/public_html/直下にlaravel_trainingというフォルダ名でLaravelをインストールして下さい。
(Laravelのインストーラーは設定済みです)
インストールしたらLaravelの公式サイトを参考に初期設定と #36 のVHを設定し、ブラウザで以下ページを確認出来るようにして下さい。

確認出来たら、GitHubでLaravel用のリポジトリを作成しlaravel_trainingをGitHubで管理するように設定して下さい。

■目的

設定ファイルを編集しVirtualHostを設定します。
※すでにApacheのインストール、設定ファイルは対応済みの状態という前提

■課題

Apacheの設定ファイル、補助設定ファイルを編集してVirtualHostを設定して下さい。
設定する際には作業ログを残し、Issueには残さず個別に研修担当者に共有して下さい。

• Apacheの設定ファイル、補助設定ファイルの編集(バックアップを取る事)
• Apacheの起動テスト確認
• Apacheの再起動
• Apacheの動作確認

■目的

jQueryでのイベント操作について学びます。

■課題1

jQueryでのイベントの種類を5つ程度あげてください。

■課題2

jQueryのクリックイベントとDOM操作を用いて文字の変更をして下さい。

• <p id="msg">サンプルです。</p>をクリック
• クリックしたらサンプルです。がテストです。に変更するようにDOM操作をする

■課題3

jQueryのホバーイベントとDOM操作を用いて背景色の変更をして下さい。

• <p class="sample">サンプル2です。</p>(jQueryで追加しているDOM)にマウスをホバー
• ホバーしている間は該当DOMの背景色を変更する(背景色は任意)

■目的

LaravelのControllerを作成してMVCのCについて学びます。

■課題

Controllerを作成し、routing内で行っていた値の取得やアサインを全てControllerで行って下さい。
routingにはRoute::get('user/{id}', 'UserController@showProfile');のようにメソッド、URL、Controllerのみを定義して下さい。
対応したらGitHubのPRで共有して下さい。

■目的

GitHubを使い、Gitとの連携の流れを学びます。

■課題

1. 開発環境の公開鍵をGitHubに登録して下さい
2. GitHubでリポジトリを作成して下さい
3. GitHubで作成したリポジトリを開発環境にcloneして下さい(その際、アカウント、パスワードが聞かれないようにして下さい)
4. ローカルブランチを作成し、リモートで管理出来るようプッシュしGithubで確認出来るようにして下さい
5. ローカルブランチにて課題で作成したファイルをコミット後、リモートブランチにプッシュしてGitHubでコミットを確認出来るようにして下さい
6. GitHub上でリモートブランチからmasterブランチへPRを送って下さい

終わったらGitHubのリポジトリ、およびPRを共有して下さい。

■目的

SQLを用いてレコードの挿入、抽出などについて学びます。

■課題

テーブル作成 > 課題1で作成したテーブルに対し以下レコード操作を行って下さい。
発行したコマンドはIssueに記述して下さい。

• レコードを1件挿入
• レコードを複数挿入(SQLは1文のみ)
• レコードを全件抽出
• IDが2のレコードを抽出
• created_atを降順に並び替えてレコードを全件取得
• IDを降順に並び替えてレコードを2件取得
• レコードの総数を抽出
• 課題4で作成したテーブルを内部結合して全件取得
• IDが1のレコードのeditorをsatoに更新
• editorがsatoのレコードを削除

■目的

Windowsではマウスをクリックするれば大抵のことはできますが、Linuxではコマンドを使って操作していきます。ここではPuTTYを用いて基本的なコマンドを覚えてもらいます。

■アクセス方法

自分のPCからPuTTYを使用して開発環境にリモートアクセスします。

■課題

下記のコマンドを実行しその結果を確認して下さい。入力したコマンドや実行前、実行後の確認や出力結果は、Issueのコメントに記述して下さい。記述する際にはMarkdown記述を用いて見やすいよう工夫して下さい。

1. ホームディレクトリの下にworkディレクトリを作成
2. workディレクトリ内に移動
3. その中にhello.shを作成
4. エディタを使いhello.shを次の通り編集 echo "hello world";
5. hello.shをコマンドで実行
6. 自分以外のユーザーがhello.shを読み書き実行出来ないようパーミッションを変更
7. hello.shをhello_copy.shにコピー
8. hello.shをhello_move.shにリネーム
9. hello_move.shを削除
10. ホームディレクトリに戻る
11. workディレクトリをwork_copyにコピー
12. work_copyディレクトリをwork_moveにリネーム
13. work_moveディレクトリを削除
14. 今まで発行したコマンドの履歴を確認
15. 14からlsコマンドを使用した行だけを表示
16. lsコマンドのヘルプを表示
17. 自分のアカウントのパスワードを変更
18. 自分のsambaアカウントを追加

■目的

jQueryでのAPIやajax通信について学びます。

■課題1

以下について調べて下さい。

• JSON
• XML
• API

■課題2

事前に以下の値のjSONファイルを作成し公開領域に設置して下さい。

jQueryのajax通信を用いてJSONファイルを読み込み、その内容をHTMLで表形式で出力して下さい。
また、ページ下部に「もっと見る」ボタンを設置し、ボタンが押されたら再度上記処理を実行するようにイベント処理をして下さい。

PHPについては必ず公式ドキュメントを参考にして下さい。
http://php.net/manual/ja/index.php

コーディングルールはPEARに基づいて下さい。
http://pear.php.net/manual/ja/standards.php

■目的

PHPでよく使う用語などを理解します。

■課題

以下について調べて下さい。

• 変数
• 配列、連想配列、多次元配列
• 扱えるデータ型の種類と各データ型の意味(5つくらい)
• 演算子の種類と意味(5つくらい)

■目的

LinuxのエディタであるVimは使いこなせればWindowsのエディタより効率的に編集ができ、サーバ内でのファイル編集等が可能となります。ここではVimを用いて入力、コピーペースト、検索等を学びます。

■課題

$ vim /home/xxxx/public_html/training/index.html

上記コマンドからVimを用いてファイルを作成して下さい。 ※xxxxには自分のユーザー名を入れてください
作成の際には以下の項目にならって作成し、実行のコマンド等はIssueのコメントに記載して下さい。

• ノーマルモード、コマンドラインモード、挿入モード
• コマンドラインモード、挿入モードからノーマルモードへ戻る
• 文字を挿入
• ファイルの保存、読み込み
• カーソル移動(矢印キーは使わずHJKLキーを使う)
• 1文字コピー、複数行コピー
• 1文字ペースト、複数行ペースト
• 行の先頭にカーソル移動、行の末尾にカーソル移動、最後の行にカーソル移動、指定行カーソル移動
• 文字列検索
• 文字列置換
• UNDO、REDO
• ウィンドウ分割
• ビジュアルモード
• ビジュアルモードでの範囲削除
• ビジュアルモードでの範囲コピー

■目的

フレームワークについて理解する

■課題

以下について調べて下さい。

• フレームワークとは
• フレームワークのメリット、デメリット
• MVCモデルとは
• M、V、Cそれぞれの役割
• テンプレートエンジン

■目的

GitHubとはどういう仕組みかを理解してもらいます。

■課題

GitHubに関連する以下の単語の意味を調べて下さい。

• fork
• pull request

調べた結果はIssueのコメントにまとめて下さい。

■課題

フォーム画面とは別に、DBに登録した値を一覧で表示する画面を作成して下さい。仕様は以下の通りです。

• 以下の表形式で表示する

• 表示件数は10件
• データが10件以上ある場合はページングナビをつける

tmuxを使うと、1つのスクリーンで複数の端末を作成、アクセス、制御する事が出来ます。
複数のターミナルを起動することなく複数の端末操作が可能なため、効率的に作業が出来ます。
screen同様デタッチアタッチが可能ですが、tmuxはセッションにより予期しない切断やデタッチがあっても再アタッチする事が可能です。

■目的

tmuxで用いる用語を学びます。

■課題

以下用語について調べて下さい。調べた結果はIssueに記述して下さい。

• ウィンドウ
• ペイン
• デタッチ
• アタッチ
• ステータスライン

■目的

Laravelでのフォームバリデーション、CSRF対策について学びます。

■課題

PHP > フォーム作成と同様の対応をLaravelを用いて対応して下さい。
対応したらGitHubのPRで共有して下さい。

■目的

JavaScript、jQueryについて理解してもらいます。

■課題

以下について調べて下さい。

• JavaScriptとは
• jQueryとは
• JavaScriptとjQueryの違い
• オブジェクトとは

合わせて、下記にも一通り目を通してください。
http://dotinstall.com/lessons/basic_chrome_dev_v2

■目的

tmuxを見やすく使いやすくするよう、カスタマイズする方法を学びます。

■課題

.tmux.confを編集し、自分が見やすく使いやすくなるようカスタマイズしてみて下さい。
例えば、以下のカスタマイズ例があります。

• prefix keyの変更
• ステータスラインのレイアウト
• ペインのボーダーライン
• etc

また、他の開発者が公開しているdotfilesなどを参考してみるのもよいと思います。
https://github.com/tokorom/dotfiles/blob/master/.tmux.conf
https://github.com/chocoby/dotfiles/blob/master/.tmux.conf

■目的

WebサーバやApacheについて理解します。

■課題

以下について調べて下さい。

• Apacheの概要
• モジュール
• プロセス
• ポート番号
• VirtualHost
• DocumentRoot
• DirectoryIndex
• MIME
• AddType

■目的

Gitの基本的なコマンドを使い一連のバージョン管理の流れを学びます。

■課題

1. 新たなディレクトリで、リポジトリを作成して下さい
2. 作成したリポジトリに新規ファイルを追加して下さい
3. 現在のリポジトリの状態を確認して下さい(新規ファイル、追加ファイルなど)
4. 追加したファイルを追加対象から外して下さい
5. 再度ファイルを追加後、コミットして下さい
6. 追加したファイルを編集、保存し、差分を表示して下さい
7. 編集した内容をGitコマンドを用いて編集前に戻して下さい
8. ファイルをGit管理から削除してコミットして下さい
9. 直前のコミットを取り消して下さい(ファイルを削除する前の状態に戻す)
10. 今までのGitのログを表示して下さい
11. いづれか1つのファイルをGit管理に含めないように設定して下さい
12. ブランチを作って移動して下さい
13. 作ったブランチで新たな新規ファイルを追加、コミットした後、前のブランチにマージして下さい

調べた結果はこのIssueのコメントにまとめて下さい。
合わせて、下記のサイトで学習してみてください。
http://k.swd.cc/learnGitBranching-ja/

この課題を一通り終えたら、ブランチ運用についても目を通してください。
https://github.com/fact-real/developers_training_public/wiki/Git%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E9%81%8B%E7%94%A8

■目的

SSHの認証方法の1つである鍵交換を学び、セキュリティの高いSSH接続を行います。

■課題

• SSHとは何か
• 鍵交換とは何か
• RSA暗号方式で公開鍵と秘密鍵をコマンドで作成

上記の調べた内容、発行したコマンドと出力結果をIssueのコメントに記述して下さい。

■目的

jQueryでの条件分岐の書き方について学びます。

■課題

以下の要素をHTMLファイルの<article>タグ内に追加して下さい。

<form action="#" method="get">
  <input type="text" name="val"><input type="submit" value="送信">
</form>

送信を押したら、テキストフィールドの値によってアラートを表示する条件分岐を実装して下さい。

• 入力した値が空だったら入力して下さいとアラート表示
• 入力した値が数字だったら数字ですとアラート表示
• 入力した値が上記以外だったら数字以外ですとアラート表示

■目的

SQLを用いてDBを作成、操作します。
発行したコマンドとその結果はIssueに記述して下さい。

■課題1

MySQLコマンドからMySQLサーバに接続し、以下を満たすDBを作成して下さい。DB名はお任せします。
作成後はDB一覧を表示して作成されたかどうかを確認して下さい。

• 文字コード:UTF-8

■課題2

もう1つDBを作成し、作成したDBに切り替え、切り替えられたかどうかまで確認をして下さい。

■課題3

課題2で作成したDBを削除して下さい。

■目的

CSSを用いて作成したフォームのレイアウトを変更します。

■課題

styleタグを用いて以下のレイアウトを対応して下さい。

• ヘッダーの上下に余白を10px付ける
• ヘッダーのフォントサイズを30pxにする
• ヘッダーの背景色を変更する(色は自由)
• フォーム画面の項目名の文字色を変更する(色は自由)
• 確認画面の表組みに線を表示する
• 完了画面の文言を強調表示する

■目的

PHPで簡単なプログラムを書いてみます。

■課題1(演算子)

• 1 + 2の結果を出力
• 上記結果から5を引いた結果を出力
• 10202/243の余りを出力

■課題2(配列)

$array = array('a', 'b', 'c');

• 配列の並び順を逆にして出力
• 配列のうちからランダムに1つ値を取り出して出力
• 配列の並び順をランダムにして出力

■課題3(文字列)

$str = "abcdefgaabbacd";

• 文字列中にaの個数を出力
• 文字列中にabの並び個数を出力
• 文字列の長さを出力

■課題4(制御構造)

$array = array(
    1 => 'first',
    2 => 'second',
    3 => 'third'
);

• forを使って配列の要素を全て出力
• foreachを使って配列のキー、要素を全て出力
• foreach、ifを使って配列のキーが奇数の場合のみ要素を出力

MySQLは世界で一番普及しているオープンソースのデータベース(以下DB)です。
ここではDBの概要やMySQLを用いたDB操作について学びます。

DBはどういう仕組みかを理解してもらいます。

■課題

以下について意味を調べて下さい。

• DB
• RDBMS
• テーブル
• カラム
• レコード
• リレーション
• ストレージエンジン
• プライマリーキー制約
• 外部キー制約
• 内部結合(INNER JOIN)
• 外部結合(LEFT JOIN)
• 内部結合と外部結合の違い
• インデックス

以下のテーブルをDB設計ツールを用いて設計してもらいます。

■ユーザー情報

■都道府県情報

■目的

MySQL Workbench を用いてDB設計、SQL化を学びます。

■課題1

公式サイトからMySQL Workbenchをインストールして下さい。

■課題2

MySQL Workbenchを使って課題のテーブルを持つDBを構築して下さい。
構築する際には正規化、外部キー制約など考慮して構築して下さい。
構築し終えたら以下をIssueのコメントに記載、添付して下さい。

• SQL展開したSQL文
• DB設計のキャプチャ

概要

クラスベースのオブジェクト指向について学びます。

目的

クラスベースのオブジェクト指向を用いてプログラミングができるようになる。

適切にファイルを分割し、ソースコードのメンテナンス性を高めることができる。

■課題

課題1

下記用語について調べてください。

• オブジェクト
• クラス
  • プロパティ
  • メソッド
  • コンストラクタ/デストラクタ
  • カプセル化
• インスタンス化
• アクセス修飾子
• abstract修飾子
• staticキーワード
• getter/setter
• 継承
  • オーバーライド
  • parent

課題2

下記制御構造について調べてください。

• require
• require_once
• include
• include_once

課題3

※ここからは「サーバサイド - PHP - フォーム作成」の課題で作成したフォームを使用します。

例を参考に、制御構造を用いて各画面2ファイル以上に分割してください。

(例

• confirm.php(元ファイル)

<?php
function fullName($last_name, $first_name) {
    return sprintf('%s %s', $last_name, $first_name);
}

$full_name = fullName($_POST['last_name'], $_POST['first_name']);
?>
<html>
～ 省略 ～
名前：<?php echo $full_name ?>
～ 省略 ～
</html>

↓2分割後

• confirm.php(元ファイルからphpのロジック部を切り出したファイル)

<?php
function fullName($last_name, $first_name) {
    return sprintf('%s %s', $last_name, $first_name);
}

$full_name = fullName($_POST['last_name'], $_POST['first_name']);

include 'profile.html.php';

• confirm.html.php(元ファイルからhtml部分を切り出したファイル)

<html>
～ 省略 ～
名前：<?php echo $full_name ?>
～ 省略 ～
</html>

課題4

フォームに入力された項目を保持するクラスを下記ルールに従って設計、実装してください。

• 完全コンストラクタパターンを用いること
• フルネームを取得するメソッドを実装すること
• 1クラス1ファイルに分割すること(クラス名がProfileであれば、profile.phpというファイル名とする)

また、今回作成したクラスを用い表示処理を行ってください。

(例

$profile = new Profile($_POST['mail_address']);

<html>
～ 省略 ～
メールアドレス：<?php echo $profile->getMailAddress() ?>
～ 省略 ～
</html>

サーバの負荷状況、ログファイルからの解析等、コマンドを用いて調査します。
WEBサイトでページが重たい場合や、不具合があって調査をするために負荷状況の把握やログファイルからの解析が必要になります。

■アクセス方法

自分のPCからPuTTYを使用して開発環境にリモートアクセスします。
　

■課題1

開発環境のCPU利用率、load average等を調査し、調査で用いたコマンドの出力結果、およびCPU利用率やload average等の負荷状況をIssueのコメントに記述して下さい。

■課題2

開発環境のメモリ使用量を調査し、調査で用いたコマンドの出力結果、およびメモリの利用率、空きメモリ容量をIssueのコメントに記述して下さい。

■課題3

開発環境で動作中のプロセスを調査し、調査で用いたコマンドの出力結果の一部をIssueのコメントに記述して下さい。

■課題4

開発環境のHDD容量を調査し、調査で用いたコマンドの出力結果とHDDの残り容量をこのissueのコメントに記述して下さい。

■課題5

開発環境のApacheのログから複数のコマンドを用いて以下を出力して下さい。発行したコマンドと出力結果(長い場合は一部のみ)をIssueのコメントに記述して下さい。
Apacheのログファイルは/usr/local/apache2/logs/access_logにあります。

• アクセス日 [01/Jan/2010:22:01:04 +0900]
• アクセスURL /index.html
• アクセスURLごとのPV数を多い順にソート

例)
2 /download/1.html
2 /download/2.html
1 /download/3.html

■目的

HTMLの概念や構文、タグなどを理解します。

■課題

以下について調べてIssueに記述して下さい。

• HTMLとは
• HTMLの基本的な構造を表す要素

■目的

tmuxを起動し、ウインドウやペインの操作方法について学びます。

■課題

以下それぞれの操作を実行して下さい。調べたコマンドやキーはIssueに記述して下さい。

• ウィンドウ
  • ウィンドウのリネーム
  • 新しいウィンドウの作成
  • ウィンドウの移動
  • ウィンドウの入れ替え
  • ウィンドウを終了
• ペイン
  • 横分割・立て分割
  • ペイン間の移動
  • ペインのレイアウト変更
  • ペインのサイズ変更
  • ペインを終了

■目的

文字列のパターンを表現する正規表現を学び、文字列の検索や置換の仕方を学びます。

■準備

課題は全てLinuxのgrepコマンドで行ってもらいます。
あらかじめ以下内容のテキストファイルを作成しておいて下さい。

12345
67890
123456789
abcde
cdeab
test0123
\100
01-1234-5678
012-3456-7890
[email protected]
[email protected]
test@test
[email protected]

■課題1

基本的な正規表現方法としてメタ文字があります。
メタ文字を用いて、テキストファイルから以下の値をそれぞれgrepコマンドを用いて表示して下さい。

• 数字のみの値
• 英字のみの値
• 英数字のみの値
• 先頭が123で始まる値
• 末尾が0で終わる値

■課題2

メタ文字には繰り返し、エスケープなどがあります。
それらを用いて以下の値をそれぞれgrepコマンドを用いて表示して下さい。

• 先頭が\で始まる値
• 5桁の数字のみの値
• 末尾がeもしくはmで終わる値

■課題3

実際に正規表現を使うケースとして、
電話番号やメールアドレスなど、決まったフォーマットの値を正しく入力しているかのチェックで用います。
テキストファイルから以下の値をそれぞれgrepコマンドを用いて表示して下さい。

• 電話番号
• メールアドレス([英数字記号]@[英数字記号]程度の正規表現)

■目的

CSSを外部ファイル化し読み込む方法を学びます。

■課題

作成したCSSを外部ファイル化し、HTML内で読み込むようにして下さい。

■目的

SQLを用いてテーブル作成、操作を学びます。
課題毎に発行したコマンドをIssueに記述して下さい。

■課題1

作成したDBに対し、以下を満たすテーブルを作成して下さい。

• ストレージエンジン:InnoDB
• 文字コード:UTF-8
• テーブル構成

■課題2

作成したテーブルを削除し、IDをプライマリーキーにして再作成して下さい。

■課題3

テーブル削除、再作成をせずに以下のカラム追加、変更、削除をして下さい。

• titleの次に以下のカラムを追加
  • カラム名：editor 型：VARCHAR(16) NULL可：YES
• titleのNULL可をNOに変更
• noteを削除

■課題4

以下のテーブルを別に作成し、課題1で作成したテーブルを親として外部キー制約を追加して下さい。

■課題5

課題4で作成したテーブルを削除して下さい。削除後は次の課題で使うので再度テーブルを作成して下さい。

■目的

jQueryで簡単なプログラムを書いてみます。

■課題

以下のソースを基にHTMLファイルを作成して下さい。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>

<!-- header -->
<header>
  <h1>jQueryサンプル</h1>
</header>

<!-- content -->
<article>
  <p id="msg">サンプルです。</p>
</article>

<!-- footer -->
<footer>
  Copyright 2014
</footer>

</body>
</html>

作成したHTMLファイルをブラウザで開いた時にHello World!とアラートが表示されるようにして下さい。
その際、以下の事を考慮、調べて実装して下さい。

• 出力する文字列を変数に格納
  • 変数や型が何か分からなければ調べて下さい
• 文字列をアラートで表示

■目的

Laravelのroutingとviewを作成してMVCのVについて学びます。

■課題

Laravelのroutingとviewを用いて、HTML/HTML5 > HTMLタグと同様の静的フォーム画面を作成して下さい。

• TOP、フォーム画面はGET
• 確認画面、完了画面はPOST

作成したらGitHubのPRを共有して下さい。

■目的

CSSの概念や記述方法などを理解します。

■課題

以下について調べてIssueに記述して下さい。

• CSSとは
• CSSの記述要素
  • 宣言ブロック
  • セレクタ
  • id
  • class
  • プロパティ
• idとclassの違い

■目的

SQLを用いてアカウントを作成します。

■課題

以下の権限を持つアカウントをSQLを用いて作成して下さい。
アカウント名、パスワードはお任せしますがアカウント名は分かり易い、パスワードは複雑性のあるものにして下さい。
作成の際に発行したコマンドとその結果はIssueに記述して下さい。(パスワードは****と伏せて記述して下さい)

• グローバルレベルで全権限を持つアカウント
• データベースレベルでSELECT権限のみを持つアカウント(DBは先ほど作成したものを指定)
• データベースレベルでCREATE, ALTER, SELECT, DELETE権限を持つアカウント(DBは先ほど作成したものを指定)

■目的

Laravelで採用しているBladeを用いて、テンプレートエンジンについて学びます。

■課題

LaravelではテンプレートエンジンにBladeを採用しています。
前課題で作成した静的HTMLをBladeにし以下を対応して下さい。

• 確認画面でフォームで入力した値を表示
• 確認画面からフォームへ戻ったら入力値を復帰
• <? echo $name; ?>といったPHP構文をviewで使わない
• routingとBladeを用いて値の表示、復帰を対応
• Bladeの書き方に関してはここ辺りを参照

対応したらGitHubのPRを共有して下さい。

■目的

HTMLのタグを理解し、実際に簡単なフォームを作成します。

■規約

• HTML5で作成
• 文字コードはUTF-8
• 改行コードはLF
• インデントはスペース2つ
• 意味を持って改行する
  • ブロック、リスト、テーブル要素は改行し、子要素にはインデントを挿入する
  • ヘッダ、フッタ、ナビ、その他機能が大きく分かれる部分は空行を入れる

例

<blockquote>
  <p><em>developers</em>, training.</p>
</blockquote>
<ul>
  <li>php</li>
  <li>ruby</li>
  <li>smalltalk</li>
</ul>

<footer>
  <p>training</p>
</footer>

■仕様

全体

• 見出しを付ける

トップページ

• 次のフォーム画面へ遷移するリンク

フォーム画面

• 以下のフォーム項目
• 項目名にラベル
• 次の確認画面へ遷移するボタン

確認画面

• フォーム画面で入力した値を表形式で表示(今はあてでよい)
• フォーム画面へ戻るボタン
• 完了画面へ遷移するボタン

完了

• 「応募しました」という文言表示
• トップページへ遷移するリンク

研修サーバ情報にあるURLからブラウザで確認出来るようにして下さい。

■目的

tmuxでのデタッチ・アタッチをしセッション管理を学びます。

■課題

以下操作を実行して下さい。調べたコマンドやキーはIssueに記述して下さい。

• セッションの作成
• セッションのデタッチ
• セッションの確認
• セッションをアタッチ
• セッションの削除
• 全てのセッションを終了

■目的

MySQLコマンドを用いてDBのバックアップ、リストアについて学びます。
課題毎に発行したコマンドをIssueに記述して下さい。

■課題1

MySQLコマンドを用いて作成したDBのバックアップファイルを作成して下さい。

■課題2

MySQLコマンドを用いて課題1で作成したバックアップファイルからDBをリストアして下さい。

■目的

入力値復帰やvalidateなど、フォーム作成に必要な事を学びます。
ページ構成は下記を参照して下さい。
https://github.com/fact-real/developers_training_public/wiki/%E9%96%8B%E7%99%BA%E7%A0%94%E4%BF%AE-html-html5

■課題

以下、仕様を満たすフォームを作成して下さい。

• 確認画面から入力画面から戻ったら入力値がフォームに入っている
• HTMLやSQLを入力された場合のエスケープ処理
• 全項目に対し前後の空白を除く処理
• 確認画面に遷移する際にエラーがあった場合、フォーム画面に戻してエラー文言を表示

■目的

PHPからDBへの接続と操作について学びます。

■課題

完了画面に遷移した際に、DBへ接続しフォームの値を登録して下さい。
フォーム値はPOSTで送信し、DB設計は下記を参考にして下さい。
https://github.com/fact-real/developers_training_public/wiki/%E9%96%8B%E7%99%BA%E7%A0%94%E4%BF%AE-db%E8%A8%AD%E8%A8%88%E3%83%84%E3%83%BC%E3%83%AB#mysql-workbench

PHPからのMySQL接続などはPDOを用いて実装して下さい。
http://www.php.net/manual/ja/pdo.construct.php

■目的

テスティングフレームワークのインストールと簡単なテストコードの記述をおこない、自動ユニットテストの基礎を学びます。
xUnit系、xSpec系の記述の違いについても簡単に触れます。

■課題1

数値の加算を行う簡単なプログラムがある。
RSpecおよびPHPUnitをインストールし、以下のことを検証するテストを記述してください。
※rubyの研修をやっていない場合はPHPUnitのみでよいです

1. 1 + 2 = 3 となること
2. 1 - 2 = -1 となること
   • 1 + (-2) であると考えてください
3. 1 + 1.5 = 2.5 となること

class Adder
{
    public function add($x, $y)
    {
        return $x + $y;
    }
}

class Adder
  def add(x, y)
    x + y
  end
end

■課題2

テスティングフレームワークはxUnit系とxSpec系に大別できます。PHPUnitはxUnit系であり、RSpecはxSpec系です。
両者の違いを調べ、テストコードの可読性やメンテナンス性、テストのドキュメントとしての価値という観点から説明してください。
ヒント: 歴史的にはxUnit系のほうが古いので、主にxSpec系が台頭した理由を考えるという方向性で調べてみてください。

■課題3

作成したフォームに対し必要なテスト項目を考え、実際にテストを記述して下さい。

■目的

JavaScriptでの関数の作り方について学びます。

■課題1

以下について調べて下さい。

• ユーザー定義関数
• 即時関数
• 無名関数
• スコープ

■課題2

前回課題で作成したアラート表示処理を、以下を満たすユーザー定義関数を定義して実行して下さい。

• 引数に文字列を指定
• ローカル変数に文字列を格納
• ローカル変数をアラートで出力

■課題3

前回課題で作成したアラート表示処理を、即時関数で定義して実行して下さい。

■目的

Vimはオプションを設定する事によって、自分の使いやすいようにカスタマイズ出来ます。ここでは必要最低限なVimのカスタマイズを設定します。

■課題

自分のカレントディレクトリにvimrcを設置して下さい。設置し終えたらvimrcに以下を設定して下さい。

• 行番号を表示
• タブを押したらスペースを挿入される
• タブ押下時のスペースを4つに変更
• オートインデントを有効
• オートインデント時のインデントするスペースを4つに変更
• 検索がファイル末尾まで行った場合、ファイル先頭から再び検索するように設定
• 文字エンコーディングはUTF-8
• カーソルキーを無効にする

また、必要に応じてNeoBundleのようなvimプラグイン管理ツールや、NERDTreeのようなツリー表示が可能なプラグインも入れて下さい。

vimなどの設定ファイルは開発者がGitHubに公開していたりするので参考にしてみて下さい。
dotfiles などで検索すれば出てきます。