読者です 読者をやめる 読者になる 読者になる

nigoblog

スタートアップのCMOブログ

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

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

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

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

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

  1. ローカル環境の構築 ~MAMP編~
  2. ローカル環境の使い方
  3. 課題が終わって出来ること
  4. 1. フォームの作成 HTML
  5. 2. フォームの値を取得 PHP
  6. 3. フォームの値をDBにセット PHP+MySQL
  7. 4. DBの値を取得 PHP+MySQL
  8. 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」と表示されます。

簡単にまとめると

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

という感じです。

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

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

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

  1. DBから値を取得
  2. 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とします。
そこでフィールド名をそれぞれ

  • id
  • name
  • address

とします。
種別はそれぞれ

  • int
  • varchar
  • text

とし、nameのみ長さを20に設定します。
またidのみ
インデックスをprimary、A_Iにチェックを付けます。
f:id:nigohiroki:20121224231633p:plain
これでDBのセッテイングは完了!

あとは課題であるようにフォームからの値をDBに挿入するだけ。
最終的にフォームに入力し、phpMyAdminで見た時、
f:id:nigohiroki:20121224232143p:plain
となればOK!

4. DBの値を取得 PHP+MySQL

次は挿入したDBの値を取得します。
表示で次のようになればOK!
f:id:nigohiroki:20121224232839p:plain

5. viewとcontrollerの分割 MVC

これまでは表示させるファイルと処理をするファイルを共通のものにしました。
次は表示させるファイルと処理をするファイルを別々のものにします。
具体的にはフォルダ内が次のようになればOK!

test/
  index.php
  controller.php

理由としてはデザイナーがわかりやすくなるため。
だったり、あとすっきりします。

以上、こんな感じの課題をこなしていけば、そこそこプログラミングが出来るようになっていくと思います!!
それから懇切丁寧に書かなかったのは、調べる能力も一つのプログラミング能力
やりたいことがはっきりしている場合は調べることもそんな難しいもんじゃないので。

というわけで頑張ってやってみてください!!