プログラミング入門者のためにこれをやれば初級者になれる課題5選(開発環境の構築から)

本日はプログラミングができない!けどやりたい!という友人のためにこれをやればそこそこ出来るようになるという課題を5選用意しました。

その前に入門者がつまづく開発環境について説明します。

前回のブログVagrantとchefで簡単お手軽ローカル環境構築 - nigoblogにローカル環境開発環境のことを書いたんだけど、
あれは中級者以上向けの話。最初はMAMP or XAMPPからやっとくべき。

というわけで次の流れで説明します。

ローカル環境の構築 ~MAMP編~
ローカル環境の使い方
課題が終わって出来ること
1. フォームの作成 HTML
2. フォームの値を取得 PHP
3. フォームの値をDBにセット PHP+MySQL
4. DBの値を取得 PHP+MySQL
5. viewとcontrollerの分割 MVC

以上の流れで書いていきます。

ローカル環境の構築 ~MAMP編~

ローカル環境という言い方をしているけど、ざっくりいうと自分のPCでPHP+MySQLを使ったアプリケーションを作れる環境のこと。
大抵の初心者はここで挫折。スタートラインにも立てずに挫折する人が多い。
MAMPとは
M : Mac
A : Apache
M : MySQL
P : PHP
の略称で、それらを自分のMacにインストールし、さらには面倒臭い設定も全部やったるという粋なアプリケーション。
ちなみにwindowsの場合はXAMPP、linuxの場合はLAMPなどがあります。

とりあえずこちらMAMP: Mac, Apache, MySQL, PHPからダウンロード。
フリーの方でも構いません。
ダウンロードしたらインストーラーを起動。
従っていけばインストールされ、ブラウザで次の画面が表示されます。
f:id:nigohiroki:20121224223943p:plain
※画像は画面の一部を切り取ったものです。
もし表示されなければ検索バーに

http://localhost:8888/MAMP/?language=Japanese

と打ち込みます。

それでもダメならサーバーが起動していない可能性があります。
LaunchpadなどからMAMPを起動します。
すると次のようなウィンドウが表示されます。
f:id:nigohiroki:20121224224521p:plain
ここで左のランプがどちらも緑になっていればOK。
なっていなければ、「サーバーを起動」ボタンを押します。

それで「スタートページを開く」を押せば、ブラウザに「MAMPへようこそ」と表示されます。

これで開発環境は完了。
すごく簡単。
ただし、インストールにかなり時間がかかるので途中で心が折れないように。

ローカル環境の使い方

Macの場合であればFinderもしくはターミナルから色々操作します。

Finderの場合

アプリケーション > MAMP > htdocs
の中にディレクトリを作成します。
アプリケーション > MAMP > htdocs > 作成したプロジェクト名
に「index.html」というファイルを作成し、

<h1>Hello World</h1>

と入力します。

ターミナルの場合

cd ../../Applications/MAMP/htdocs

と入力し,

mkdir プロジェクト名

でプロジェクトを作成

vim index.html

でファイルを作成

<h1>Hello World</h1>

とでも入力し、保存。

Finderの場合もターミナルの場合も
結果、あるプロジェクトに「Hello World」と表示させるファイルを作成しました。

次にブラウザの検索バーに
「localhost:8888」
と入力します。
すると先ほど作成したプロジェクト名のリンクがあり、
クリックすると「Hello World」と表示されます。

簡単にまとめると

MAMP内のhtdocsにプロジェクトを置く
localhost:8888でアクセス

という感じです。

これでスタートラインに立った状態。
というわけで次から課題へ!!

課題が終わって出来ること

今回提示する課題が終わればひと通りwebアプリケーションを作る基礎が出来ます。
はっきりいうとプログラミングであるPHPの役割は2つしかありません。

DBから値を取得
DBの値を書き換える

複雑そうに見えても結局やることはこの2つ。
そのブラックボックスを今回の課題を解くことによって知ることが出来ます。

早速スタート!!

1. フォームの作成 HTML

最初の課題はHTMLでフォームを作成すること。
結果として次の画像の感じになればOK
f:id:nigohiroki:20121224230200p:plain
ちなみに課題に関しては懇切丁寧に教えるつもりはありません。
勝手にググって解決してください。
ただし、一つ言えるのはこの課題が終われば完璧にwebアプリケーションを理解できるってこと!

2. フォームの値を取得 PHP

次はフォームからの値をPHPで取得すること。
結果はフォームにそれぞれtestと入力した時に、
f:id:nigohiroki:20121224230602p:plain
となればOK!

3. フォームの値をDBにセット PHP+MySQL

次は実際に取得した値をDBにセットするまで。
初めてDBを使うので、phpMyAdminと呼ばれるMySQLを激使いやすくするツールをつかいます。
MAMPに最初っから入っています。
スタートページのグローバルメニューのphpMyAdminをクリック
f:id:nigohiroki:20121224230841p:plain
phpmyadminの画面になったらまずはデータベースを作成。
f:id:nigohiroki:20121224231202p:plain
適当に名前は付けて良いですが、右のプルダウンは「utf8_general_ci」を選択したください。意味は知らなくて良いです。
次はテーブルの作成
ここも名前は適当で良いですが、
フィールド数は3とします。
そこでフィールド名をそれぞれ