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と比べて余計な色付けが少なく、とても使いやすいのでおすすめです。