PHP,MySQLで大喜利サイトを作ってみる③管理者ログイン画面の作成

前回はざくっとおおまかなトップページのモックをHTMLで作成しました。↓

https://denkenmusic.com/phpmysqlで大喜利サイトを作ってみる②htmlでモックの作

　前回、超アナログ的ですがノートに殴り書きで大喜利サイトの構想について図にしてみました。↓　今回はそれをもとに、HTMLでモックの作成に入りたいと思います。いきなりPHPファイルの作成でもいいのでしょうけど、なんせそこまでPHPPHP出来ないので（なんやそれ）とりあえず面倒ですが下書き的要素としてモックを作成します。とりあえず今作ろうとしているサイトは「トップページ」にお題と回答、及び表彰が集中しているので、これが命となります。他のページもありますが、とりあえず今回はトップページをピックアップしてここでま...

これからPHPを埋め込んで動的ページにしていくわけですが、簡単なCMSを作って毎週更新するお題や結果発表等を管理したいと思っているので、今回はそれの権限を証明する「管理者ログイン」ページを作成したいと思います。

で、今更ですがローカルの環境開発環境は、Windows,XAMPP(Apach,MySQL)で行っております。

また、今後プログラムの詳細についてはほぼ過去記事の応用ですので、割愛していきます。詳細については過去記事を参考ください。↓

ヘルニアクソ野郎エンジニアblog

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう！【完結...

https://denkenmusic.com/cmsを自作してオリジナル動的ホームページをフル-12

前回、問合せフォームの処理ページを作成しました。↓　今回はカテゴリーページのテンプレートを作成します。星マークが作成済みの7ページです。雲マークのファイルを今回作成します。全12回と少し長くなりましたが、今回で「CMSとオリジナル動的ホームページのフルスクラッチ開発」が完成します。　カテゴリーページのテンプレートcategory.php

ヘルニアクソ野郎エンジニアblog

PHPとMySQLでECサイトをフルスクラッチ開発！⑮カテゴリ別ページの作成、html/cssで...

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！⑮カテゴリ

前回、ECサイトの商品購入決定画面を作成しました。↓　今回は、カテゴリ別ページの作成、html/cssでスタイリングしてECサイトを完成させたいと思います。星マークはすでに作成済みのページになります。雲マークの商品カテゴリページを、今回作成します。今商品のカテゴリは５つとしているので、５つのファイルを作成します。内容的にはデータベースのSELECTする部分が変わるだけですので、１つのカテゴリを抜粋して説明しようかと思います。商品カテゴリ別ページshop_list_book.php

それではまとめようかと思います。

1 データベースの作成
- 1.1 管理者ログイン用テーブル
- 1.2 PHP My Adminで直接管理者情報を登録
2 管理者ログイン情報入力ページ
- 2.1 k_login.php
3 ログイン情報チェックページ
- 3.1 k_login_check.php
- 3.2 common.php
4 CMSトップ画面
- 4.1 cms_top.php
5 次回

データベースの作成

管理者ログイン用テーブル

MySQLのPHP My Adminから任意の名前でデータベースを作成します。

今回は管理者用のログイン用テーブルを作成します。とりあえず下記のようなものを作りました。

name	pass
***	***

2カラムで名前とパスワードのみの超絶シンプルなものです。

CMSを使ったサイトの更新には管理者でログインしないと操作できないようにします。

PHP My Adminで直接管理者情報を登録

管理者の追加ページ等は作成しないので、とりあえず管理者情報を直で PHP My Admin からデータベースに書き込みます。先ほど作成したテーブルにSQLでnameとpassをINSERTします。（PASSは一応MD5等で暗号化したもの）

このテーブルの情報を使って、ログインページを作成します。

管理者ログイン情報入力ページ

k_login.php

<!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>
 
ログイン情報を入力してください。
<br><br>
管理者名<br>
<form action="k_login_check.php" method="post">
<input type="text" name="name">
<br>
パスワード<br>
<input type="password" name="pass">
<br>
パスワード再入力<br>
<input type="password" name="pass2">
<br><br>
<input type="submit" value="OK">
 
    
</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>cmsログイン</title>

</head>

<body>

ログイン情報を入力してください。

管理者名<br>

<br>

パスワード<br>

<br>

パスワード再入力<br>

</form>

</body>

</html>

拡張子をphpとしてますがhtmlでもいけますね。

ファイルの格納場所はドキュメントルートよりもう1階層下に格納してますが、任意の箇所でも問題ないです。

ドキュメントルート/任意のファイル/k_login.php

フォームタグで入力した情報を指定したページへPOSTします。

ログイン情報チェックページ

k_login_check.php

<?php

    
require_once("../common/common.php");
    
$post = sanitize($_POST);
    
$name = $post["name"];
$pass = $post["pass"];
$pass2 = $post["pass2"];
    
if(empty($name) === true or empty($pass) === true or $pass != $pass2) {
    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 name FROM tb名 WHERE name=? && pass=?";
    $stmt = $dbh -> prepare($sql);
    $data[] = $name;
    $data[] = $pass;
    $stmt -> execute($data);
    
    $dbh = null;
    
    $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    if(empty($rec["name"]) === true) {
        print "ログイン情報が間違っています。<br><br>";
        print "<form>";
        print "<input type='button' onclick='history.back()' value='戻る'>";
        print "</form>";
        exit();
    }
    session_start();
    $_SESSION["login"] = 1;
    $_SESSION["name"] = $rec["name"];
    header("Location:cms_top.php");


?>

<?php

require_once("../common/common.php");

$post = sanitize($_POST);

$name = $post["name"];

$pass = $post["pass"];

$pass2 = $post["pass2"];

if(empty($name) === true or empty($pass) === true or $pass != $pass2) {

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 name FROM tb名 WHERE name=? && pass=?";

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

$data[] = $name;

$data[] = $pass;

$stmt -> execute($data);

$dbh = null;

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

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

print "ログイン情報が間違っています。<br><br>";

print "<form>";

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

print "</form>";

exit();

}

session_start();

$_SESSION["login"] = 1;

$_SESSION["name"] = $rec["name"];

header("Location:cms_top.php");

XSS対策でPOSTデータをエスケープさせています。

入力チェック後、データベースに接続し、SQLで入力した情報がテーブルに存在するか確認します。

確認できれば、SESSIONをスタートさせて、CMSのトップページへ遷移するようにしています。

common.php

<?php
 
function sanitize($before) {
    foreach($before as $key => $value) {
        $after[$key] = htmlspecialchars($value, ENT_QUOTES,"UTF-8");
    }
    return $after;
}
 
?>

<?php

function sanitize($before) {

foreach($before as $key => $value) {

$after[$key] = htmlspecialchars($value, ENT_QUOTES,"UTF-8");

}

return $after;

}

エスケープの関数は common.php の外部ファイルを作成してインクルードさせています。格納場所は任意で。

CMSトップ画面

cms_top.php

<?php
 
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    print "ログインしていません。<br><br>";
    print "<a href='k_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>
    
<strong>記事投稿</strong><br><br>
<a href="single.php">新規記事作成</a>
<br><br><br>
<strong>結果投稿</strong><br><br>
<a href="single2.php">結果投稿作成</a>
<br><br><br>
<strong>ログアウト</strong><br><br>
<a href="k_logout.php">ログアウト</a>
    
    
</body>
</html>