ToDoアプリを作ろうとした話 - ブログ｜生成AIを活用したSaaSサービス提供企業

佐々木です。スマホアプリの開発をしている株式会社バイタリフィという会社に勤務しています。
ベトナムでのオフショア開発もやってるんで、この前ホーチミン市に行ってきたりもしました。楽しかったです。
はい、というわけでですね。今佐々木がはまってるのはPHPのお勉強なのですが、ここいらで何か少しでも役に立ちそうな物を作ってみようということになりました。なりましたって言っても自分で勝手にそうしただけなんですけど。
ただ、本当に初学者なので自分でのまとめも兼ねて、という感じです。基本的に初歩過ぎて誰の訳にも立たないと思います。

佐々木のレベル

PHPを真面目に勉強して1週間くらいです(その前にもかじる程度はしてたんですけど、本当にかじる程度過ぎてカウントしていません)。ビル・ゲイツが60歳くらいだとすると、まだ生後2日くらいです。
そんな人間がアレコレするのもなんか無理があるので、今回はアレです。セッション変数を使った非常に簡易的なToDoツールを作りたいと思います。
ド初学者の人以外役に立たない感じになりそうです。許してください。ぼく営業だもの。

開発環境

MAMPとかでも全然良かったんですけど、どうせならかっこいいものを使いたかったんでVagrantを使っています。
あとは、atomをインストールしてターミナルをatomから操作できたりftp環境をさわれたりするプラグインを入れておきました。

PHPとは

PHPは、PersonalHomePageの略だそうです。ちょっとびっくりするくらいダサい。
HTMLの中に差し込む感じで書き込んでいくのですが、”<?php“と”?>“の間に書いたコードがPHPとして認識されます。あと拡張子は.phpです。.htaccessをいじると.htmlでも中のPHPが動作したりするそうです。

PHPのインストール

多分”sudo yum install php”とかってターミナルで打ってあげればインストールできます。
あと、”sudo yum install httpd”って打つとApacheがインストールできます。ビルトインサーバーっていうPHPそのものが持っているサーバーもあるのですが、せっかくなんでApacheを入れてみましょう。
あとは、/var/www/html/に

<?php echo "Hello world!"; ?>

って書いてindex.phpという名前で保存してあげましょう。そしてブラウザから見ましょう。
「Hello world!」って出てれば無事PHPがインストールできてます。上に書いたコードがそのまま出てれば残念ながらまだ設定がうまくいってないので、そのへんはググってよしなにどうぞ。
環境を作るのが面倒な人はCloud9とか使ってみるのもいいと思います。

とりあえず、名前の入力ページを

今回は、2ページ構成で作ろうと思っています。
1ページ目で名前を入力させて、その名前をセッション変数に保存した後、ToDo登録／閲覧／削除画面に遷移するという形です。
で、その1ページ目のソースコードがこちら。

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){
  setcookie('username', $_POST['username']);
  header( "Location: /main.php" );
}
 ?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Input your name.</h1>
  <form action="" method="post">
    <input type="text" name="username" placeholder="your name.">
    <input type="submit" name="" value="submit">
  </form>
</body>
</html>

基本的にはフォームとボタンがあるただのhtmlですが、<?php — ?>で囲まれた箇所が2つありますね。解説します。

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){
  setcookie('username', $_POST['username']);
  header( "Location: /main.php" );
}
 ?>

この部分ですね。
ここは、

  <form action="" method="post">
    <input type="text" name="username" placeholder="your name.">
    <input type="submit" name="" value="submit">
  </form>

ここ部分と対応しています。
submitと書いてあるボタンが押された際に、$_SERVER[‘REQUEST_METHOD’]というPHPで元々定義されている変数の中の値が’POST’になるので、if文の中が発動します。
そこで発動されている文は、

  setcookie('username', $_POST['username']);
  header( "Location: /main.php" );

というもので、setcookieは、cookieに情報をしまうというものです。
‘username’というラベルの中に変数$_POST[‘username’]の中にある値を格納すると言う命令なのですが、$_POST[‘username’]というのは

<input type="text" name="username" placeholder="your name.">

に入っている値のことなんですね。
ここのname=の名前を$_POST[”]の中に入れると、そこに入力された値を引っ張ってこれます。
というわけで、cookieにテキストボックスの中の値を突っ込んだわけです。
次にheaderと言うものですが、これはhtmlでいうリンクと同じで、ドメイン直下のmain.phpに遷移せよという命令です。

ここまでの動作をまとめると

your name.と書いてあるテキストフィールドに名前を入れてsubmitボタンを押すと、usernameというラベルと入力した名前をセットにしてcookieに保存してくれ、かつmain.phpに遷移するという動作をします。

(多分)だめなとこ

クロスサイトスクリプティングって言うんでしたっけ、ハッキングっぽいことができてしまいます。
遷移先のmain.phpでは、hey, ○○(入力した名前)！的なことを表示させるのですが、例えばusernameに

<a href="//google.com">aaa</a>

とか入れるとaaaというリンク(押すとhttp://google.comに遷移)が表示されてしまいます。
googleのリンクを表示させるとかだと可愛いもんなのですが、多分頭がいい人はサーバー環境を破壊できたりできてしまいます。
というわけで、本当はそういうことができないようにする命令があったりするようなのですが、ちょっと勉強不足でまだそこまではわかりませんので、この記事では性善説で行きます。

まとめ

かなり牛歩ですが、とりあえず名前を入力させてあれやこれやまでは到達できました。
次回は実際にToDoアプリを作っていきます！
こういう時、どうしてもわからないことがあれば質問ができる環境のある開発会社っていいですね。
いつかはサービスを作ってローンチさせたいです。では。

Share on Tumblr