Laddy in

Programming & Technology!!

NEW ARTICLE
windows11拡張機能で画像文字読み込み

MicroFramework Flightで簡易掲示板を作成する




目次

前回の続きFlightを進める

Flight Frameworkの勉強がてら簡易的な掲示板を作成してみました。
名前とメールアドレスと内容をMySQLに保存して表示を行います。

BootStrapでちょいちょいとフォームを作ってこんな感じに仕上げる

index.php

DBは全くセキュリティ等は考慮せずに保存しています。

FlightにはMySQLの操作を直接便利にするようなものは用意されていないようで、
Flight::registerに対してDBの設定はできるんですが、これって結局PDOなのですね・・・

フォームに記入してそれを表示させるだけなので、
POSTを受ける部分と、それ以外のときには表示をおこなう二つの部分に分けました。
あってんのかなこの書き方・・・

<?php
require 'flight/Flight.php';
Flight::register('db', 'PDO', array('mysql:host=127.0.0.1;dbname=flight_test', 'root', 'root'));

// POSTであればここに入る
Flight::route('POST /', function(){
    $db = Flight::db();
    $stmt = $db->prepare("insert into bbs(content, mail, name) values('{$_POST['content']}', '{$_POST['mail']}', '{$_POST['name']}')");
    $stmt->execute();

    Flight::redirect('./');
});

// 通常のアクセスはここ
Flight::route('/', function(){
    $db = Flight::db();
    $stmt = $db->prepare('select * from bbs order by created DESC limit 20');
    $stmt->execute();
    $a = $stmt->fetchAll(PDO::FETCH_ASSOC);

    Flight::render('top.php', array('hoge' => $a));
});

Flight::start();

Flight::render(‘top.php’, array(‘hoge’ => $a));

この部分でtop.phpを呼び出していますが、Flightのviewはデフォルトでviews以下を読み込みます。
ダウンロードして展開したFlightにはなぜかviewsのディレクトリがないので作成して、
その下にtop.phpを編集します。

views/top.php

Bootstrapで書いているのでview部分がちょいと長いです。




<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">

<!-- http://todc.github.io/todc-bootstrap/components/#panels-heading -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
<h1>flight test 掲示板</h1>
</div>

<div class="container">
<form method="post" action="./" class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input_name" class="col-sm-1 control-label">名前</label>
    <div class="col-sm-2">
      <input type="text" name="name" class="form-control" id="input_name" value="" placeholder="名前">
    </div>
  </div>
  <div class="form-group">
    <label for="input_mail" class="col-sm-1 control-label">メール</label>
    <div class="col-sm-4">
      <input type="mail" name="mail" class="form-control" id="input_mail" value="" placeholder="hoge@hogehoge.com">
    </div>
  </div>
  <div class="form-group">
    <label for="input_text" class="col-sm-1 control-label">内容</label>
    <div class="col-sm-4">
      <textarea name="content" class="form-control" id="input_text"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-1 col-sm-4">
      <input type="submit" class="btn btn-primary">
    </div>
  </div>
</form>
</div>

<div class="container">

<hr>

<? foreach ($hoge as $c) { ?>
<div class="panel panel-default">
  <div class="panel-heading">
    <span class="label label-primary"><?=$c['name'];?></span>
    <a href="mailto:<?=$c['mail'];?>"><?=$c['mail'];?></a>
    <span class="label label-default"><?=$c['created'];?></span>
  </div>
  <div class="panel-body">
    <?=$c['content'];?>
  </div>
</div>
<? } ?>

</div>
</body>
</html>

動作解説とSQLスキーマ

作成したデータベースの構造
[sql]
CREATE TABLE bbs (
id int(11) unsigned NOT NULL AUTO_INCREMENT,
content text,
mail varchar(50) DEFAULT NULL,
name varchar(50) DEFAULT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
[/sql]

formからデータが投げられたときにはindex.phpのPOSTに入ります。
そのときにMySQLへデータが投げられてすぐにトップへリダイレクト。
トップはデータを表示するだけなので書き込んだ内容がすぐに反映されるような動きになります。

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js