masimaro blog

menu

home > WEBアプリ開発:CMS > CMSを自作してオリジナル動的ホームページをフルスクラッチ開発④CMSの固定記事投稿画面(HTMLエディタ)の作成

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発④CMSの固定記事投稿画面(HTMLエディタ)の作成


CMS
2021-07-22


今回は、前回と似た内容となりますが、「固定記事」の投稿画面(HTMLエディタ)~データベース登録までを作成しようと思います。

星マークのページは作成済みになります。今回は雲マークのページを作成します。

固定ページは、ご存じだと思いますが問合せフォームやプライバシー・ポリシーなどのカテゴリーに属さないページになります。

カテゴリに属する通常の投稿ページとは、少しページの構成が変わる(例えば記事に他するコメント欄や前後記事へのリンクなど)ので、専用で固定記事作成のページが必要です。

それでは初めに、固定ページのテーブルから作成します。

テーブル作成

page(固定ページのテーブル)

データベース名「test」に「page」テーブルを作成します。

カラムは6とし、詳細は下記の通りになります。

名前データ型その他
codeintAI
titlevarchar 値100-
imgvarchar 値100-
honbunvarchar 値2000-
comvarchar 値10-
timedata-

固定記事作成画面

edit_page.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    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="setting/style2.css">
</head>
<body>

<div id="edit">
<div id="box2">
<form action="setting/upload.php" method="post" enctype="multipart/form-data"> 
イメージファイルアップロード<br>    
<input type="file" name="image_data[]" multiple="multiple">
<input type="submit" value="アップロード">
</form>
<form action="page_check.php" method="post" enctype="multipart/form-data">
    <br>
タイトル
<br>
<textarea name="title" id="title1"><h1></h1></textarea>
<br>
サムネイル<br>
<input type="text" id="gazou" name="img">
<input type="button" id="bt" value="ok">
<br><br>
<input type="radio" name="com" value="nasi">問い合わせフォーム欄なし
<input type="radio" name="com" value="ari">問い合わせフォーム欄あり
<br>
<br>
<div class="tag">
<div id="h1">h1 </div>
<div id="p">p </div>
<div id="br">br </div>
<div id="h2">h2 </div>
<div id="img">img </div>
<a href="setting/img.php" target="blank">imgファイル名検索</a>
</div>
    
<textarea id="area" name="honbun"></textarea>
<br>
<input type="submit" value="ok">
<input type="button" onclick="history.back()" value="戻る">
</form>
</div>
<div id="write">
<h3>タイトル</h3><div id="title"></div>
<h3>サムネイル</h3><div id="sam"></div>
<h3>本文</h3><div id="box"></div>
 
</div>
</div>
   
<script src="setting/main2.js"></script>   
</body>


</html>

edit_single.php同様、cmsディレクトリ内にedit_page.phpを作成します。(settingディレクトリ配下に置くと、設計上の都合で後ほど作成する公開ページにイメージファイルが反映されない為です。)

このページは固定投稿記事作成画面(htmlエディタ)になります。

ほとんど、投稿記事作成画面のedit_single.phpのと変わりないので、説明は割愛しますが、一点だけ変更点があります。

「問合せフォーム」の有無をラジオボタンで設置しています。

これは、後ほど作成予定の「公開する動的な固定ページ」に、問合せフォームを付けるか否か、の情報になります。

公開する動的ページは、基本的に1つのページを元に、ユーザーからのリクエスト(URLのパラメータ)にあった情報をデータベースから取り出し、反映させています。

つまり、サイト概要や問合せフォームも、元は同じ1つのページなんです。

サイト概要に問合せフォームはいらないので、今回は、データベースに「フォームの有無」の情報を登録しておく仕組みにしました。

固定記事チェック画面

page_check.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    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>
    
<main>
    
<?php
    
$title = $_POST["title"];
$honbun = $_POST["honbun"];
$img = $_POST["img"];
    
if(empty($title) === true or empty($honbun) === true or isset($_POST["com"]) === false) {
    print "必要項目を入力して下さい";
    print "<br><br>";
    print "<form>";
    print "<a href='edit_page.php'>戻る</a>";
    exit();
}

//$com = $_POST["com"];
print $title;
if(!empty($img) === true) {
   print "<img class='bunimg' src='setting/img/".$img."'>"; 
}
print $honbun;

?>

<br><br>
上記内容で登録しますか?
<form action="setting/pagedone.php" method="post">
<input type="hidden" name="com" value="<?php print $_POST['com'];?>">
<input type="hidden" name="title" value="<?php print $title;?>">
<input type="hidden" name="honbun" value="<?php print $honbun;?>">
<input type="hidden" name="img" value="<?php print $img;?>">
<input type="submit" value="OK">   
    
</form>
    
</main>
    
</body>
    
</html>
    

single_check.php同様、cmsディレクトリ内にpage_check.phpを作成します。(settingディレクトリ配下に置くと、設計上の都合で後ほど作成する公開ページにイメージファイルが反映されない為です。)

このページは固定投稿記のチェック画面、及びプレビューになります。

こちらも前回同様、single_check.phpとほぼ同じです。

少し異なるのは、画像の有無(サムネイル)はチェックしていません。固定ページにはサムネイルを付けない事が多いので、外しました。

後は、ラジオボタンが選択されているかのチェックを増やしています。

固定記事登録画面

pagedone.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    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>

<main>
    
<?php
    try {
        
$title = $_POST["title"];
$honbun = $_POST["honbun"];
$img = $_POST["img"];
$com = $_POST["com"];
    
$dsn = "mysql:host=localhost;dbname=test;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "INSERT INTO page(title, honbun, img, com, time) VALUES(?,?,?,?,NOW())";
$stmt = $dbh -> prepare($sql);
$data[] = $title;
$data[] = $honbun;
$data[] = $img;
$data[] = $com;
$stmt -> execute($data);
        
}
catch(Exception $e) {
    print "サーバーに異常が発生しました。<br>";
    print "<a href='set_top.php'>cmsトップへ</a>";
}
?>

登録しました。
<br><br>
<a href="../edit_page.php">固定記事投稿ページへ戻る</a>
<br>
<a href="set_top.php">トップメニューへ</a>
 
</main>
    
</body>
    
</html>
    

settingディレクトリ配下にpagedone.phpを作成します。

このページで、固定記事をデータベースに保存しています。

これにかんしてはもう特筆する事はないですね。

登録後、データベースに反映しているか確認して終わりです。

次回は、プロフィールとスポンサーの登録画面を作成します。

コメントを残す

お名前

コメント



コメント一覧

コメントはまだありません
MENU