PHP お知らせ機能
index.php
-------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample page</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="top">
<h1>Title</h1>
<nav>
<ul>
<li><p><a href="#info">Info</a></p></li>
<li><p><a href="#photo">Photo</a></p></li>
<li><p><a href="#contact">Contact</a></p></li>
</ul>
</nav>
</header>
<section id="info">
<p><img class="bg_image" src="images/about_bg_img.jpg" alt=""></p>
<h1>Info</h1>
<div class="container">
<ul class="info_list">
<?php $template ='
<li>
<p><img src="{{img_path}}" width="340" height="180" alt=""></p>
<p>{{title}}</p>
<p>{{body}}</p>
</li>
';
require_once('cms.php');
$cms = new MyCMS\CMS($template, 2);
$cms->render();
?>
</ul>
</div>
</section>
<section id="photo">
<h1>Photo</h1>
<div class="container">
<ul class="photo_image">
<li>
<p><img src="images/150x150.png" width="150" height="150" alt=""></p>
<p>sample sample sample sample sample sample sample</p>
</li>
<li>
<p><img src="images/150x150.png" width="150" height="150" alt=""></p>
<p>sample sample sample sample sample sample sample</p>
</li>
<li>
<p><img src="images/150x150.png" width="150" height="150" alt=""></p>
<p>sample sample sample sample sample sample sample</p>
</li>
<li>
<p><img src="images/150x150.png" width="150" height="150" alt=""></p>
<p>sample sample sample sample sample sample sample</p>
</li>
</ul>
</div>
</section>
<section id="contact">
<h1>Contact</h1>
<div class="container">
<dl class="contact_list">
<dt>TEL</dt><dd><address>000-0000-0000</address></dd>
<dt>Email</dt><dd><address>email@example.com</address></dd>
</dl>
</div>
</section>
<footer>
<div class="container">
<p>(c) 2015 xxx.</p>
</div>
</footer>
</body>
</html>
--------
<?php
namespace MyCMS;
class CMS
{
private $template; // テンプレート
private $length; // お知らせ件数
private $variables; // テンプレート中の変数名
private $data; // お知らせのデータ
private $password = 'abc123'; // 編集画面パスワード
private $storage = './store.json'; // お知らせのデータの保存場所
public function __construct($template, $length)
{
$this->template = $template;
$this->length = $length;
// {img_path} , {title} , {body}部分 正規表現 処理
if (preg_match_all('/{{([^}]+)}}/', $this->template, $p)) {
$this->variables = $p[1];
}
if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] === 'POST') {
$this->saveData();
}
$this->loadData();
if (isset($_GET['__edit']) && $_GET['__edit'] === $this->password) {
$this->showForm();
}
}
public function render()
{
$body = '';
for ($i = 0; $i < $this->length; $i++) {
$row = $this->template;
foreach ($this->variables as $key) {
$row = str_replace('{{' . $key . '}}', $this->data[$key][$i], $row);
}
$body .= $row;
}
echo $body;
}
public function loadData()
{
if (file_exists($this->storage)) {
$this->data = json_decode(file_get_contents($this->storage), true);
}
}
public function saveData()
{
file_put_contents($this->storage, json_encode($_POST));
}
public function showForm()
{
echo '<form method="post">';
for ($i = 0; $i < $this->length; $i++) {
echo '<div>';
foreach ($this->variables as $key) {
echo $key;
echo '<textarea name="' . $key . '[]">' . $this->data[$key][$i] . '</textarea>';
}
echo '</div>';
}
echo '<input type="submit" value="保存">';
echo '</form>';
}
}
---------
store.json
{"img_path":["images\/340x180.png","images\/340x180.png"],"title":["\u304a\u77e5\u3089\u305b\u30bf\u30a4\u30c8\u30eb\u2460","\u304a\u77e5\u3089\u305b\u30bf\u30a4\u30c8\u30eb\u2461"],"body":["\u304a\u77e5\u3089\u305b\u672c\u6587\u2460","\u304a\u77e5\u3089\u305b\u672c\u6587\u2461"]}
---------
style.css
/* style.css */
body {
width: 100%;
min-width: 960px;
background-color: #fff;
}
div.container {
width: 960px;
margin: 0 auto;
}
header {
width: 100%;
text-align: center;
}
header h1 {
font-size: 64px;
margin-top: 20px;
margin-bottom: 30px;
}
header nav ul {
overflow: hidden;
width: 270px;
margin: 0 auto 20px;
}
header nav li {
float: left;
width: 80px;
margin: 0 5px;
}
section {
text-align: center;
}
section h1 {
font-size: 24px;
margin-top: 40px;
margin-bottom: 60px;
}
ul.photo_image{
width: 680px;
margin: 0 auto;
overflow: hidden;
text-align: left;
}
ul.photo_image li {
width:150px;
word-wrap:break-word;
float: left;
margin: 0 10px;
}
img.bg_image {
width: 100%;
}
ul.info_list li {
margin-bottom: 20px;
}
dl.contact_list {
margin-bottom: 40px;
}
footer {
padding-top: 40px;
padding-bottom: 120px;
text-align: center;
background-color: #eee;
}
