PHPは簡単に動かせるのがいいところですね。
その良さを生かしつつ、薄いフレームワークの組み合わせで掲示板を作ってみたいと思います。

経緯

Node.js + Express使いだが、実際のところNode.jsをサーバで動かしていい案件はまれ
PHP案件はいっぱいだし、動くレンタルサーバも多いぞ
動作環境としてのPHPは魅力なので触っておきたい
PHPにあまり詳しくないし、コードを書いている時間よりも調べ物に時間の方が長くなるのが辛い
PHPフレームワークも分厚いものが多く、調べ物に時間が取られてやはり辛い
何でも屋になりたいわけではないので、PHPのことは詳しく知らない自分のままでいたい

作りたいもの

とりあえず一行掲示板。

考えた構成

SPA（PHPを書く量を最低限にするため）
PHP5.5 + ビルトインサーバ
Slim Framework2 (3も気になるがとりあえず)
Vue.js
Sqlite（mysqlを使うのがかったるい）

また、Sqliteなら、さくらインターネットの最下位プランでも動作するだろうという目論見。

SlimでJSONサーバを書く

Slimはsinatraライクに書ける。
JSONを吐くだけなら下記のようにする。

$app->get("/items/", function() (){
    echo '{"message" : "Hello, World"}';
}

とりあえず上記のように、適当なJSONを返すようにしておいて、先にフロントエンドを作るのが楽。

JSONを返す設定

JSONしか扱わないのであれば、ルーティング処理全体にContent-Typeを設定できる。下記のようにする。

$app = new \Slim\Slim();
$app->response->headers->set('Content-Type', 'application/json');

テーブルの作成

普通にPDOからSQLiteを使う。
１テーブル程度の小規模アプリなので、わざわざORMを使わなくても良さそう。

$db = new PDO('sqlite:bbs.db');
$db->exec('CREATE TABLE IF NOT EXISTS bbs(id INTEGER PRIMARY KEY, contents TEXT)');

記事一覧の取得

json_encodeを使って、DBからfetchしたものをそのままjsonに変換する。

$app->get("/items/", function() use ($app, $db){
    echo json_encode($db->query('SELECT id, contents FROM bbs ORDER by ID DESC')->fetchAll(PDO::FETCH_ASSOC));
}

記事の投稿

$app->post("/items/", function() use ($app, $db){
    $text = $app->request->post('text');
    $db->prepare('INSERT INTO bbs(contents) VALUES(?)')->execute([$text]);
    $result["status"] = "success";
    $result["text"] = $text;
    echo json_encode($result);
});

フロントエンドを作る

ビューのフレームワークとしてVue.js、Ajaxにはsuperagentを採用する。requireはbrowserifyで解決した。
フレームワークは別にVue.jsでなくても構わない。AngularでもReactでもjQueryでも素JSでも出来る事をやっている。

main.js

var Vue = require("vue");
var request = require("superagent");

new Vue({
    el: "#main",
    data: {
        text: "",
        items: []
    },
    methods: {
        fetchPosts: function(){
            var self = this;
            request
                .get("./api.php/items/")
                .end(function(err, res){
                    self.items = res.body;
                })
        },
        createPost: function(text){
            var self = this;
            request
                .post("./api.php/items/")
                .type('form')
                .send({text: text})
                .end(function(err, res){
                    if(err){
                        console.error(err);
                    }
                    self.text = "";
                    self.fetchPosts();
                });
        }
    },
    ready: function(){
        this.fetchPosts();
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBS</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/mblode/marx/master/css/marx.min.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <main id="main">
        <h1>BBS</h1>
        <textarea v-model="text" class="bbs__textarea"></textarea>
        <button v-on="click: createPost(text)">投稿</button>  
        <div class="bbs__item" v-repeat="item: items">
            <p>
                {{item.contents}}
            </p>
            <p class="bbs__item__id">
                No: {{item.id}}
            </p>
            <small></small>
        </div>

    </main>
    <script src="dist/bundle.js"></script>
</body>
</html>

リクエスト先のURLが./api.php/〜などとなっている。たいていは.htaccessでapi.phpを削除するなどして、綺麗なURLに直すところ。

だが、SPAにしてしまえば、URLの遷移はJavaScript側に任せることができる。APIのURLが汚い分には、見ている人にはわからないので、このままでいいことにする。

Vue.jsでルーティングを行なう場合は、vue-routerやdirectorを使うことになるが、今回はやらない。

余談だが、.htaccessに依存するということは、IISやnginxにデプロイしたり、ビルトインサーバで動作させることができなくなるので、いずれバッドノウハウになるのではと思う。

完成品

とりあえずPHPのビルトインサーバで動作させる。

php -S localhost:8000

レポジトリはこちら：GitHub

終わりに

ちゃんとするなら、ユーザ管理とか削除編集、ページネーションなんかも入れないとですね。
あと、今回marxというCSSフレームワークを使ってますが、Bootstrapと比べて余計な色付けが少なく、とても使いやすいのでおすすめです。

PHPになるべく詳しくならずにWebアプリを作る (Slim + Vue.js)

経緯