PHP,MySQLで大喜利サイトを作ってみる④お題投稿CMSとトップページの作成

前回、CMSの管理者ログインページ、CMSトップページを作成しました。↓

https://denkenmusic.com/phpmysqlで大喜利サイトを作ってみる③管理者ログイン

　前回はざくっとおおまかなトップページのモックをHTMLで作成しました。↓　これからPHPを埋め込んで動的ページにしていくわけですが、簡単なCMSを作って毎週更新するお題や結果発表等を管理したいと思っているので、今回はそれの権限を証明する「管理者ログイン」ページを作成したいと思います。で、今更ですがローカルの環境開発環境は、Windows,XAMPP(Apach,MySQL)で行っております。また、今後プログラムの詳細についてはほぼ過去記事の応用ですので、割愛していきます。詳細については過去記事を参考ください。↓　それではまとめ...

今回はお題と結果を投稿するCMSと、それを反映させるトップページを作成したいと思います。

それではまずCMSから作成します。

公開するページではありませんので、見栄えは最悪です。

目次 [非表示]

1 CMS
2 トップページ
- 2.1 DBの内容でお題のみか結果込みかを自動で判断させる
3 ログアウト
- 3.1 管理者のログアウト

CMS

お題のアップロードページ

<?php
 
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {
    print "ログインしていません。<br><br>";
    print "<a href='setting/set_login.php'>ログイン画面へ</a>";
    exit();
}
?>
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cms</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
月日<br><br>
<input type="text" name="m_w">
お題アップロード<br><br>   
<input type="file" name="img">
<input type="submit" value="アップロード">
</form>
<br>
   
</body>
 
 
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {

print "ログインしていません。<br><br>";

print "<a href='setting/set_login.php'>ログイン画面へ</a>";

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

月日<br><br>

お題アップロード<br><br>

</form>

<br>

</body>

</html>

先頭のログイン確認でセッションnameも確認しているのは、ユーザーログイン情報での操作を防ぐためです。

このページはシンプルに、次のページへ画像ファイルをPOSTしているだけです。

お題をDBに登録

<?php
 
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {
    print "ログインしていません。<br><br>";
    print "<a href='set_login.php'>ログイン画面へ</a>";
    exit();
}
?>
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cms</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
<?php
$m_w = $_POST["m_w"];
$img = $_FILES["img"];
    
print($m_w);
print($img["name"]);
    
if(empty($m_w) or empty($img)) {
    print "日付,画像を入れてください。<br><br>";
    print "<form>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "</form>";
    exit();
    }

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "SELECT m_w FROM toukou WHERE m_w=?";
$stmt = $dbh -> prepare($sql);
$data[] = $m_w;
$stmt -> execute($data);
    
$dbh = null;
$data = array();
    
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    if(!empty($rec["m_w"]) === true) {
    print "すでにお題は投稿されています。<br><br>";
    print "<form>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "</form>";
    exit();
    }

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "INSERT INTO toukou(m_w, img) VALUES(?,?)";
$stmt = $dbh -> prepare($sql);
$data[] = $m_w;
$data[] = $img["name"];
$stmt -> execute($data);
//print $max;
$dbh = null;
//for($i=0; $i < $max; $i)
move_uploaded_file($img["tmp_name"],"../img/".$img["name"]); 
 

 
print "<br><br>投稿完了しました。";
//print "<br><br>";
 
//print "<form>";
//print "<input type='button' onclick='history.back()' value='戻る'>";
 
?>
 
    <form>
<input type='button' onclick='history.back()' value='戻る'>
    </form>
    </body>
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {

print "ログインしていません。<br><br>";

print "<a href='set_login.php'>ログイン画面へ</a>";

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

<?php

$m_w = $_POST["m_w"];

$img = $_FILES["img"];

print($m_w);

print($img["name"]);

if(empty($m_w) or empty($img)) {

print "日付,画像を入れてください。<br><br>";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT m_w FROM toukou WHERE m_w=?";

$stmt = $dbh -> prepare($sql);

$data[] = $m_w;

$stmt -> execute($data);

$dbh = null;

$data = array();

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if(!empty($rec["m_w"]) === true) {

print "すでにお題は投稿されています。<br><br>";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "INSERT INTO toukou(m_w, img) VALUES(?,?)";

$stmt = $dbh -> prepare($sql);

$data[] = $m_w;

$data[] = $img["name"];

$stmt -> execute($data);

//print $max;

$dbh = null;

//for($i=0; $i < $max; $i)

move_uploaded_file($img["tmp_name"],"../img/".$img["name"]);

print "<br><br>投稿完了しました。";

//print "<br><br>";

//print "<form>";

//print "<input type='button' onclick='history.back()' value='戻る'>";

<form>

</form>

</body>

</html>

お題の日付と画像ファイル情報を受け取り、データベースに保存するページです。

今回のサイトの仕様として、週一のお題投稿を前提としているので、日付（〇月〇週）がかぶれ保存出来ないようにしています。

新たな日付なら画像ファイルをアップロードし、ファイル名をデータベースに書き込みます。

テーブルはこんな感じ↓

m_wに日付、imgにお題が入ります。

結果を投稿

<?php
 
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {
    print "ログインしていません。<br><br>";
    print "<a href='setting/set_login.php'>ログイン画面へ</a>";
    exit();
}
?>
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cms</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<form action="upload2.php" method="post" enctype="multipart/form-data">
月日<br><br>
<input type="text" name="m_w">
結果アップロード<br><br>   
<input type="file" name="img_yu">
<input type="file" name="img_jun">
<input type="file" name="img_tokubetu">
<input type="submit" value="アップロード">
</form>
<br>
   
</body>
 
 
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {

print "ログインしていません。<br><br>";

print "<a href='setting/set_login.php'>ログイン画面へ</a>";

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

月日<br><br>

結果アップロード<br><br>

</form>

<br>

</body>

</html>

お題投稿と似ていますが、ここでは優勝者と準優勝者、特別賞の画像を次ページへPOSTします。

結果をDBに登録

<?php
 
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {
    print "ログインしていません。<br><br>";
    print "<a href='set_login.php'>ログイン画面へ</a>";
    exit();
}
?>
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cms</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
<?php
$m_w = $_POST["m_w"];
$img_yu = $_FILES["img_yu"];
$img_jun = $_FILES["img_jun"];
$img_tokubetu = $_FILES["img_tokubetu"];
    
print($m_w);

    
if(empty($m_w) or empty($img_yu) or empty($img_jun) or empty($img_tokubetu)) {
    print "日付,画像を入れてください。<br><br>";
    print "<form>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "</form>";
    exit();
    }

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "SELECT code FROM toukou WHERE m_w=?";
$stmt = $dbh -> prepare($sql);
$data[] = $m_w;
$stmt -> execute($data);
$data = array(); 

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    
$sql = "SELECT m_w, img_yu, img_jun, img_tokubetu FROM toukou WHERE code=?";
$stmt = $dbh -> prepare($sql);
$data[] = $rec["code"];
$code = $rec["code"];
$stmt -> execute($data);
$data = array();
    
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    
if(empty($rec["img_yu"]) and empty($rec["img_jun"]) and empty($rec["img_tokubetu"]) and $rec["m_w"] === $m_w) {
    $sql = "UPDATE toukou SET img_yu=?, img_jun=?, img_tokubetu=? WHERE code=?";
    $stmt = $dbh -> prepare($sql);
    $data[] = $img_yu["name"];
    $data[] = $img_jun["name"];
    $data[] = $img_tokubetu["name"];
    $data[] = $code;
    $stmt -> execute($data);
    $data = array();
}else{
    
    print "すでに結果は投稿されています。<br><br>";
    print "<form>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "</form>";
    exit();
    }

//print $max;
$dbh = null;
//for($i=0; $i < $max; $i)
move_uploaded_file($img_yu["tmp_name"],"../img/".$img_yu["name"]); 
move_uploaded_file($img_jun["tmp_name"],"../img/".$img_jun["name"]); 
move_uploaded_file($img_tokubetu["tmp_name"],"../img/".$img_tokubetu["name"]); 
 

 
print "<br><br>結果完了しました。";
//print "<br><br>";
 
//print "<form>";
//print "<input type='button' onclick='history.back()' value='戻る'>";
 
?>
 
    <form>
<input type='button' onclick='history.back()' value='戻る'>
    </form>
    </body>
</html>

100

101

102

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false or $_SESSION["name"] != "ｘｘｘｘ") {

print "ログインしていません。<br><br>";

print "<a href='set_login.php'>ログイン画面へ</a>";

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

<?php

$m_w = $_POST["m_w"];

$img_yu = $_FILES["img_yu"];

$img_jun = $_FILES["img_jun"];

$img_tokubetu = $_FILES["img_tokubetu"];

print($m_w);

if(empty($m_w) or empty($img_yu) or empty($img_jun) or empty($img_tokubetu)) {

print "日付,画像を入れてください。<br><br>";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT code FROM toukou WHERE m_w=?";

$stmt = $dbh -> prepare($sql);

$data[] = $m_w;

$stmt -> execute($data);

$data = array();

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

$sql = "SELECT m_w, img_yu, img_jun, img_tokubetu FROM toukou WHERE code=?";

$stmt = $dbh -> prepare($sql);

$data[] = $rec["code"];

$code = $rec["code"];

$stmt -> execute($data);

$data = array();

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if(empty($rec["img_yu"]) and empty($rec["img_jun"]) and empty($rec["img_tokubetu"]) and $rec["m_w"] === $m_w) {

$sql = "UPDATE toukou SET img_yu=?, img_jun=?, img_tokubetu=? WHERE code=?";

$stmt = $dbh -> prepare($sql);

$data[] = $img_yu["name"];

$data[] = $img_jun["name"];

$data[] = $img_tokubetu["name"];

$data[] = $code;

$stmt -> execute($data);

$data = array();

}else{

print "すでに結果は投稿されています。<br><br>";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

//print $max;

$dbh = null;

//for($i=0; $i < $max; $i)

move_uploaded_file($img_yu["tmp_name"],"../img/".$img_yu["name"]);

move_uploaded_file($img_jun["tmp_name"],"../img/".$img_jun["name"]);

move_uploaded_file($img_tokubetu["tmp_name"],"../img/".$img_tokubetu["name"]);

print "<br><br>結果完了しました。";

//print "<br><br>";

//print "<form>";

//print "<input type='button' onclick='history.back()' value='戻る'>";

<form>

</form>

</body>

</html>

先ほどのお題投稿テーブルと同じテーブルに結果の画像を保存します。

このテーブルに結果が入れば、トップページが自動で結果発表を表示する仕組みにしようと思います。

続いて肝心要のトップページ。

トップページ

DBの内容でお題のみか結果込みかを自動で判断させる

<?php
 
session_start();
if(!empty($_SESSION["name"]) === true) {
$name = $_SESSION["name"];
}
session_regenerate_id(true);

require_once("header.php");


<warapper>
<main>

    <h2>今週のお題</h2>
    <div class="dai">
<?php
    
$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "SELECT m_w, img, img_yu, img_jun, img_tokubetu FROM toukou ORDER BY code DESC LIMIT 1";
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

$dbh = null;
        
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
$day = $rec["m_w"];
        
print "<img src='img/".$rec['img']."'>";
print "</div>";
//print "</div>";
if(!empty($rec["img_yu"]) === true) {
    print "<h2>結果発表</h2>";
    print "<div class='dai'>";
    print "<img src='img/".$rec['img_yu']."'>";
    print "<br>";
    print "</div>";
    print "<div class='dai'>";
    print "<img src='img/".$rec['img_jun']."'>";
    print "<br>";
    print "</div>";
    print "<div class='dai'>";
    print "<img src='img/".$rec['img_tokubetu']."'>";
    print "<br>";
    print "</div>";
    
}    
        ?>
    
       
    <br><br>
    <h3>回答を投稿する※ログイン必須</h3>
    <form action="kaitou_check.php" method="post">
        <textarea name="kaitou"></textarea>
        <input type='hidden' name='m_w' value='<?php print $day;?>'>
        <input type="submit" value="回答">
        </form>
    <br><br>
        
　　　・・以下略

<?php

session_start();

if(!empty($_SESSION["name"]) === true) {

$name = $_SESSION["name"];

}

session_regenerate_id(true);

require_once("header.php");

<main>

<h2>今週のお題</h2>

<?php

$dsn = "mysql:host=localhost;dbname=oogiri;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT m_w, img, img_yu, img_jun, img_tokubetu FROM toukou ORDER BY code DESC LIMIT 1";

$stmt = $dbh -> prepare($sql);

$stmt -> execute();

$dbh = null;

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

$day = $rec["m_w"];

print "<img src='img/".$rec['img']."'>";

print "</div>";

//print "</div>";

if(!empty($rec["img_yu"]) === true) {

print "<h2>結果発表</h2>";

print "<div class='dai'>";

print "<img src='img/".$rec['img_yu']."'>";

print "<br>";

print "</div>";

print "<div class='dai'>";

print "<img src='img/".$rec['img_jun']."'>";

print "<br>";

print "</div>";

print "<div class='dai'>";

print "<img src='img/".$rec['img_tokubetu']."'>";

print "<br>";

print "</div>";

}

<h3>回答を投稿する※ログイン必須</h3>

</form>

　　　・・以下略

トップページでは、とりあえず閲覧は誰でも出来るようにしたいので、ログイン有無ではじく設定にはしていません。

データベースに接続後、先ほどのテーブルからお題を表示させます。

続いて、結果の画像がテーブルに存在するなら表示させ、なければ表示させないとします。

つまり、テーブルの状態でお題進行中なのか、結果が出て〆なのかを自動で決定させる事ができます。

厳密に言えば、結果発表時には回答欄やいいねのチェック機能などは操作不能にしなければ〆になりませんが、それはおいおい付け足します。

とりあえずこれで、以下のような画面を動的に作り出せます。

ログアウト

管理者のログアウト

<?php
 
session_start();
$_SESSION = array();
if(isset($_COOKIE[session_name()]) === true) {
    setcookie(session_name(), "", time()-42000, "/");
}
session_destroy();
?>
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログアウト</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
ログアウトしました。<br><br>
<a href="set_login.php">ログイン画面へ</a>
 
</body>
</html>