目次
1.データベース作成
2.基本的ページの作成
① 新規記事作成 ② 記事確認 ③ 記事詳細 ④ 記事一覧 ⑤ 記事詳細 ⑥ 編集 ⑦ 編集確認 ⑧ 編集登録 ⑨ 削除確認 ⑩ 削除3.レイアウトを考える
①ユーザー側のページ ②管理側のページ ③ヘッダーをまとめる ④フッター ⑤レイアウト4.追加機能
①カテゴリー ②コメント ③検索5.管理者側のパスワード管理
①データベース作成 ②ID、パスワード作成 ③確認 ④登録 ⑤ログインページ ⑥ログイン処理 ⑦自動的にログインページに ⑧ログアウトブログ作成
必要となるページ
管理者モード ・新規記事作成 記事確認 記事保存 ・記事管理 記事一覧 詳細 記事編集 削除 ・コメント管理 一覧 削除 ・カテゴリー作成 ・カテゴリー管理 一覧 編集 削除 ・ログイン、ログアウト ・ユーザーモード移行 ユーザーモード ・トップの記事(一覧) 記事詳細 ・コメント表示 投稿欄、確認、登録 ・カテゴリー ・検索 ・管理者モード移行wiki や掲示板の時には、不特定多数
の人が記事を作成・編集することが
できましたが、ブログは管理者のみ
が記事を作成・編集できます。その
ため管理者と一 般ユーザーが使う
ページを分ける必要があります。
ブログを作る手順
1.
データベースの作成
2.
基本的ページの作成（新規作成、確
認、登録、一覧、編集、削除 を作
る）
3.
レイアウトを考える （管理者側と
ユーザー側のページだけ作成しつく
る）
4.
追加機能（カテゴリーやコメントな
ど追加していく）
5.
ログイン、ログアウト
ファイルに書く内容を青で囲ってい
ます。
CSS の部分を緑で囲っています。
黄色は説明
1.
データベースの作成
htdocs の自分のフォルダ内に「blog」と いうフォルダを作成してください。 そこに「blog.sql」というファイルを作成 し、「blog2018」というデータベースを作 ってください。 テーブルは「kiji」と「comment」と 「category」です。フィールドは、 <kiji テーブル>id integer unique primary key not null auto_increment koshinbi integer title varchar(100) honbun text category_id interger <comment テーブル>(以下前と同じ) id kiji_id koshinbi name com_honbun <category テーブル> id category_name 文字列 ： varchar(255) ←()内の数字は 最大文字数 長いテキスト : text 整数 : integer 日付 : koshinbi NULL 値を禁止 : not_null カラムに値が指定されなかった場合、 MySQL が自動的に値を割り当てる : auto_increment 重複したデータを禁止 複数の列に設定可 能: unique key 重複と NULL を禁止 1 つのテーブルに 1 つ: primary key
2.
基本的なページの作成
① 新規記事作成 ② 記事確認 ③ 記事登録 ④ 記事一覧 ⑤ 記事詳細 ⑥ 編集 ⑦ 編集確認 ⑧ 編集登録 ⑨ 削除確認 ⑩ 削除 ①新規記事作成 まずは新規記事を作成する画面をつくりま す。 「shinki.php」を作成してください。 例） form 要素を使って入力欄と送信ボタン を表示し、form 要素の action 属性に受 信用の php ファイルを指定します。 <body> <h2>新記事</h2> <hr /> <form action="shinki_kakunin.php" method="POST"> #form を使って、POST で shinki_kakunin.php にデータを送る<table> <tr>
<th>タイトル</th>
<td><input type="text" name="title" /></td></tr> ・・・ ・・本文・・ <td><textarea name="honbun" cols="40" rows="10"></textarea></td> # 本文は書く内容が多くなる場合がある ため textarea を使う。row で行数、 cols で一行の文字数を指定することがで きます ・・ ・・ ・・カテゴリー <td></td> # カテゴリーは後で追加する ・・ </table> <p class="button">
<input type="submit" value="確認" /> <input type="reset" value="クリア" /> </p> style.css body { margin : 0 auto; width : 804px; text-align : center; font-size : medium; text-align : left; } h1, h2 { text-align : center; margin : 10px auto; } table, tr, th, td {
border : solid 1px black; border-collapse : collapse; } table { margin : 5px; width : 95%; } th { width : 100px;
text-align : center; } td input, textarea { margin : 5px; width : 95%; font-size : medium; font-family : serif; } td { padding : 5px; } hr { margin : 5px; } kiji h2 { margin : 5px; } p.button { text-align : center; font-size : large; } ②記事作成確認 作る記事の確認ページを作ります。 「shinki_kakunin.php」を作成してくだ さい。 form で送られたデータを extract($_POST); # extract($_POST);は $title = $_POST['title']; $honbun = $_POST['honbun']; をまとめた もの で受け取ります。 条件設定でタイトルと本文両方を入力 しないといけない設定にします。 if ($_POST['honbun'] == "" or $_POST['title'] == "") { die("タイトルと本文両方を入力して ください<a href=\"#\"
onclick=\"history.back(); return false;\">戻 る</a>"); } 記事作成日時を表示するために日時を 取得し koshinbi に登録します。 $koshinbi = time();
$hiduke = date("Y 年 n 月 j 日 G:i:s", $koshinbi); time()関数は、エポックからの経過時間を 取得します。 date は日付、時刻を書式化します。 koshinbi で取得した値を date 型に変換し て$hiduke に代入してから表示させます。 他の表示方法と詳しい説明はこちらを参 照 → http://php.net/manual/ja/function.date.php タイトルや記事の確認のために HTML の table タグで表示をします。 <table> <tr> <th>タイトル・・ <td><?php echo $title;?></td> ・・ ・・ ・・本文 <td><?php echo nl2br($honbun);?></td> ・・ ・・ ・・カテゴリー ・・ ・・ ・・登録日時 <td><?php echo $hiduke;?></td> ・・ </table> 確認したら、ふたたび form タグでデータ を shinki_touroku.php に送ります。 ここで注意しなければならないのは、今 回は入力してもらったデータを送るので はなく、データを画面上に表示せずに送 らなければならないということです。こ れまで、<input type="text">としていたの を type="hidden"とすることでユーザーに 気づかれることなく値を送ることができ ます。 <form>で shinki_touroku.php にデータを 送る
<input type="hidden" name="title" value="<?php echo $title;?>" />
・・・honbun・・echo $honbun・・ ・・・koshinbi・・・・
<p class="button">
<input type="submit" value="確認" /> <input type="button" onclick="history.back();" value="戻る" </p> </form> ③記事登録 ここで記事を登録します。 shinki.touroku.php を作成します。 まずデータベースに記録するためにデー タベースに接続します。 ?php $db = new mysqli(ホスト名, ユーザー名, パスワード, データベース名); if ($db->connect_error) { die("データベースに接続できません "); } ?> # ホスト名は localhost、ユーザー名は root、パスワードは設定しないので''(シン グルクォーテーション)、データベース名 は blog2018 新規レコード登録の SQL 文を作り、送ら れてきた項目をデータベースに登録しま す。値は変数$title などを使います。文字 列（varchar や text）の場合は、変数名を シングルクオテーションマークで囲みま す <h2>新規記事登録</h2> <?php データを受け取る;
$sql = "insert into kiji (title, honbun, koshinbi) values ('$title', '$honbun',
$koshinbi)"; #insert の sql 文でデータを登 録
$result = $db->query($sql); #SQL 文を $db(データベース・オブジェクト)に送信 する 失敗かどうかエラーチェック if ($result == false) { print "<p>データを登録できませんで した</p>"; } else { print "<p>新規記事「{$title}」を公開 しました</p>"; } $db->close(); # データベースを閉じます ?> 作成した記事を見るために一覧表へ <p>[<a href="kiji_itiran.php">記事一覧 </a>]</p> ④記事一覧 登録した(作成)した記事を閲覧するために 一覧を作ります。 kiji_itiran.php を作成します。 まずデータベースに接続します。 次に table タグで見出しを作成します。デ ータベースに接続し、SQL 文を実行して 結果を受け取り、受け取ったデータを while ($data = $result->fetch_assoc())で一 件ごと表示していきます。 <table> <tr><td>日付</td><td>タイトル</td><td> コメント</td><td>カテゴリー</td></tr> <?php
$sql = "select * from kiji order by koshinbi desc"; # 記事のテーブルから全件のデー タを日付順で表示する
$result = $db->query($sql);
while ($data = $result->fetch_assoc()) { extract($data); $hiduke = date("Y 年 n 月 j 日", $koshinbi); print "<tr><td>$hiduke</td><td><a href=\"kiji_shosai.php?id=$id\">$title</a>< /td><td></td><td></td></tr>"; }
?> </table> データベースを閉じる # データを表示するには select フィール ド名 1, フィールド名 2, ... from テーブル 名 where 条件文 order by フィールド名 desc; # *(アスタリスク)は全てのフィールド order by は順番指定 desc は降順 逆は asc 例） ⑤記事詳細 記事一覧から記事のタイトルをクリック すると記事の詳細を見れるようにし編集 できるようにします。 kiji_shosai.php をつくります。 詳細はとりあえず以下のように
記事を分かりやすくするために css
を追加します。
p.honbun {border : 1px solid black; padding : 5px; text-align : left; } 例） 1.データベースに接続 2.次に kiji_itiran.php から送られてきた id 番号を受け取ります。
3.id が$id であるレコード（sql の条件文) を shoseki テーブルから選択する sql 文を $sql に代入します。 4.その$sql を mysql に送信して、検索結 果を$result に代入します。 5.$result から一行取り出して($data= $result->fetch_assoc())結果を$data に代 入します。 6.if 文で$record を extract してフィール ド名の変数に値を代入します。 7.タイトル、本文、日付、を表示 <body> <hr /> <?php データベースに接続 ?> <?php $id = $_GET['id'];
$sql = "select * from kiji where id=$id"; $result = $db->query($sql);
if ($data = $result->fetch_assoc()) { extract($data);
$hiduke = date("Y 年 n 月 j 日 G:i:s", $koshinbi); print "<h2>$title</h2>\n"; print "<p class=\"honbun\">" . nl2br($honbun) . "</p>\n"; print "<p class=\"hiduke\">$hiduke | カ テゴリー | コメント</p>\n"; } #後でカテゴリーとコメント数を表示さ せます ?> <p>[<a href="kiji_itiran.php">戻る</a>] [<a href="henshu.php?id=<?php echo $id;?>">編集</a>]</p> </body> ⑥記事編集 入力されたデータを修正するためには、 詳細画面に編集ボタンを作って、編集画 面に移行するようにします。修正する前 のデータを受け取って入力欄に表示させ ておきましょう。 henshu.php を作成します。 作り方は kiji_shosai.php と似ているの で、kiji_shosau.php を別名で henshu.php で保存しましょう。
データベースに接続し、kiji_shosai.php か ら送られてきた id 番号を受け取ります。 <?php データベースに接続 ?> <?php $id = $_GET['id'];
$sql = "select * from kiji where id=$id"; $result = $db->query($sql);
if ($data = $result->fetch_assoc()) { extract($data);
$hiduke = date("Y 年 n 月 j 日 G:i:s", $koshinbi); ここまで同じ form タグの中で値を表示する部分が異な ります。table タグでタイトル、本文、カ テゴリー、更新日を表示します。 kiji_shosai.php では、データは表示された だけでしたが、henshu.php では、データ を変更する必要があるため、<input type="text" name="フィールド名" value="<?php echo $変数; ?>"とします。 <?php echo $変数; ?>でデータを表示させ ます。 form 属性で呼び出すプログラムは、 henshu_sakujo.php です。 いったん henshu_sakujo.php にいき編集 するなら henshu_kakunin.php、削除する なら(今回削除の確認は javascript でダイ アログで表示します)sakujo.php に分けま す。
もどる場合は<input type="button" value=" 戻る" onclick="history.back()">としておく といいかも henshu.php henshu_sakujo.php henshu_kaku nin.php sakujo.php henshu_touro ku.php
例） henshu_sakujo.php を作って下さい henshu_sakujo.php ではいつもどおりデ ータベースに接続し以下のソースを書い て下さい。 <?php extract($_POST); if ($action == "確認") { require 'henshu_kakunin.php'; } else { // $action == "削除" require 'sakujo.php'; } ?> ⑦編集確認 編集は確認ページを作ります。 henshu_kakunin.php を作成します。 <?php 送られてきたデータを受け取る; 日付を取得; ・・・ ?> 以下テーブル形式でタイトル、本文、カ テゴリー、登録日時を表示して下さい ・・・ ・・・ ・・・ </table> <form>で henshu_touroku.php にデータを 送る
以下、input type="hidden" で id、タイト ル、本文、更新日(日付)を送って下さい <p class="button">
更新 戻る</p> </form>
例） ⑧編集登録（更新） 確認から送られてきたデータに更新する ためのファイルです。 henshu_tourokou.php を作成します。 データベース接続; <?php データを受け取る;
$sql = "update kiji set title='$title',
honbun='$honbun', koshinbi=$koshinbi where id=$id"; $sql を mysql に送信し、結果を$result で 受け取る SQL 文の実行が失敗したかどうかエラー チェック print "<p>データ更新できませんでし た</p>"; } else { print "<p>記事 「{$title}」更新しまし た</p>"; } ?> <p>[<a href="kiji_itiran.php">記事一覧 </a>]</p> #データの更新には update を使います。 update テーブル名 set フィールド名=値, フィールド名 2=値, ・・where 条件文; 整数はシングルクォーテーションなし 特定のデータを更新するために id=$id。id は kiji の id 例）
⑨削除確認 削除の確認は henshu.php でダイアログで 表示させます。 henshu.php に <script> function sakujo_kakunin() { $yes = confirm("削除していいです か？"); return $yes; } </script> <p class="button">
<input type="submit" name="action" value="確認" />
<input type="submit" name="action" value="削除" onclick="return
sakujo_kakunin();" />
<input type="button" value="キャンセ ル" onclick="history.back()" /> を入力してください。 #onclick は javascript のクリックした時に 何かを起こすイベントハンドラです。 イベントハンドラはイベントが起こった 時の処理を指します。 confirm は YES か NO かのダイアログの 関数 を書き加えます。 これで削除ボタンを押したときにダイア ログが表示されます 例） ⑩削除登録 sakujo.php を作成します sakujo.php は更新とほぼ同じです。 html や body などヘッドの部分は必要ない です。 <h2>記事削除
<hr /> <?php
$sql = delete from テーブル名 where 条件 文; ・・ ・・・ ・・・ ・・・ ・・・ ?> リンクで記事一覧へ 例）
3.
①レイアウトを考える
ユーザー側のページ 1. トップページ(index.php) 2. メニュー(menu.php) ② 管理側のページ ③ ヘッダーをまとめる 1. header.php、kanri_header.php 2. db_access.php ④ レイアウト ⑤ フッター(footer.php) ここではレイアウトしてブログらしい構 造にしていきます。その際にヘッダーなどこれからたくさん 書かなければいけないのでまとめて効率 をよくしていきいます。 ① ユーザー側のページ 1. トップページ(index.php) ユーザー側のトップページを index.php として管理側のトップページを kiji_itiran.php として分けていきます →必要なページ まずユーザー側のページを作ります。 index.php を作ります。 kiji_itiran.php と似ていますが kiji_itiran.php と違って table タグで作りま せん。 データベース接続 <?php
$where = "order by koshinbi desc";
if (isset($_GET['id'])) { #isset 関数は変数に 値がはいっているかどうかをチェックす る関数
$id = $_GET['id'];
$where = " where id=$id"; }
$sql = "select * from kiji $where"; $result = $db->query($sql);
while ($data = $result->fetch_assoc()) { extract($data);
$hiduke = date("Y 年 n 月 j 日 G:i:s", $koshinbi); print "<h2><a href=\"kiji_shosai.php?id=$id\">$title</a>< /h2>\n"; print "<p class=\"honbun\">" . nl2br($honbun) . "</p>\n"; } ?> タイトルから kiji_shosai.php へ飛びま す。その時に編集ページが必要ないので kiji_shosai.php から henshu.php へのリン クは消しておきます。
戻るボタンも menu 作成後に消しますが 今はあったほうが分かりやすいので残し ておきます。その際に kiji_shosai.php か ら index.php に変更しておきます。 2. メニュー(menu.php) メニューは記事のタイトルと更新日を更 新された順にリストで載せます。 記事タイトルをクリックすると記事詳細 に飛びます。 トップに戻るのと管理側に移るリンクを 表示する。 ブログトップ(index.php)へのリンク <h3>更新情報</h3> <ul> # <ul>は順序がない箇条書きリスト にするタグ。リストの項目は<li>で記述す る <?php $sql = "kiji テーブルから、id、タイトル、 更新日を更新日順に取り出す"; $sql を mysql に送信し、結果を$result で 受け取る;
while ($data = $result->fetch_assoc()) { $menu_id = $data['id']; $menu_title = $data['title']; $menu_koshinbi = $data['koshinbi']; $menu_hiduke = date("Y 年 n 月 j 日 G:i", $k_koshinbi); print "<li><a href=\"kiji_shosai.php?id=$menu_id\">$m enu_title ($menu_hiduke)</a></li>"; } ?> </ul> 管理メニューへのリンク menu.php ができたら index.php、 kiji_shosai.php に読み込ませます <?php require 'menu.php';?>
この上の文を index.php の header の下に 加えて下さい。 今はこんな感じ あとで CSS を変更します。 ② 管理側のページ(kiji_itiran.php) kanri_menu.php を作ります。 管理側でじゃ menu.php と同じようにリ ストで記事一覧(トップ)、新規記事作成と ユーザー側へ行くリンクを書きます。 例） 上の menu.php の時と同じで l kiji_itiran.php l shinki.php l shinki_kakunin.php l shinki_touroku.php l henshu.php l henshu_kakunin.php l henshu_touroku.php l sakujo.php に kanri_menu.php を読み込ませてくださ い。 検索で置換したほうが楽かもしれませ ん。
③ ヘッダーをまとめる 毎回 head の部分とデータベースに接続す る文を書くのが面倒なので 1 つのファイ ルにまとめ require ですべてのファイルに 読み込ませます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />
<link rel="stylesheet" href="style.css"> </head> <body> <h1>My Blog</h1> 1. header.php、kanri_header.php いつも最初に書いている(コピーしている) 部分を header.php のファイルで作りま す。 kanri_header.php として内容が同じもの を作ってください。 <?php require 'header.php.php';?> header.php はユーザー側なので index.php と kiji_shosai.php に読み込ませ ます。 kanri_header.php も同じように l kiji_itiran.php l shinki.php l shinki_kakunin.php l shinki_touroku.php l henshu.php l henshu_sakujo.php l henshu_touroku.php に読み込ませて下さい 2. db_access.php いつも書いているデータベース接続の
部分を db_access.php で保存し header.php と kanri_header.php に読み込 ませます。 その際に require_once にします。 <?php require_once 'db_access.php';?> #require_once 文は一度だけ読み込ませる 文です。ファイルがすでに読み込まれて いて場合は再読み込みしないということ です。→require の詳しい説明 ④ フッター(footer.php) <p>Copyright : fukudasemi, 2018</p> <?php $db->close(); ?> コピーライトは©としてもいいかもしれな いですね とかいた footer.php を作成して下さい。 これも header や menu 同様にすべてのフ ァイルに読み込ませます。 以降作るファイルには header(kanri_header)、 menu(kanri_menu)、footer を読み込ませ ます。 ⑤ レイアウト 今回のブログはヘッダー、左(右)にメニュ ー、コンテンツ、フッターの４領域で構 成します。 例） 抜粋-井上春加「Web アプリケーション制 作の教材作成について」 まず始めに header.php と kanri_header.php に <body>
<div id="wrapper"> <div id="header"> <h1>My blog</h1>
</div> <!-- of header --> #<!--of header--> はなくても動きますがどの div を閉じるか 分からなくなるために書いておきましょ う を追加します。 kanri_header.php の wrapper は別にする ので <div id="kanri_wrapper">としておきま す。 次に menu と header、db_access、 henshu_sakujo.php 以外のファイルに <?php require 'header.php';?> <div id="menu"> <?php require 'kanri_menu.php';?> </div><!-- of menu --> <div id="contents"> ・・ ・・ </div><!-- of contents --> <div id="footer"> <?php require "footer.php";?> </div><!-- of footer --> </div><!-- of wrapper --> </body> これを追加して下さい。 CSS に移ります 以下の css を参考にして下さい。 細かな色、レイアウトは各自好きなよう に設定して下さい。 参考→色見本 →ウエブ配色ツール html { height : 100%; } body { height : 100%; } div#wrapper { width : 804px; height : auto; background-color : #CEFDFA; } div#kanri_wrapper { width : 804px; height : 80%;
} div#menu { width : 204px; height : 100%; background-color : #CEFDFA; float : left; } div#contents { width : 600px; height : 100%; float : right; background-color : #EFFEF6; } div#header { width : 803px; height : 150px; background-color : #99CCCC; text-align : center; font-size : LARGE; } div.kiji {
border : black solid 1px; margin : 5px; } .kiji h2 { margin : 5px; background-color : #66FFCC; } p.hiduke { padding-right : 10px; text-align : right; } div#footer { width : 803px; background-color : #BFF5FD; clear : both; text-align : center; } 例）
もうすこし見栄えをよくするために index.php と kiji_shosai.php の$hiduke =・・の下に
$hiduke = ・・・
print "<div class=\"kiji\">\n"; ・・
・・ ・・
print "</div><!-- of kiji-->\n"; を追加してください。
p.honbun {
border : 1px solid black; } 削除して下さい 例） メニューができたので記事詳細の「戻 る」と登録画面などの「記事一覧」は必 要ないので消します。
4.
追加機能
① カテゴリー 1. カテゴリー作成 2. カテゴリー確認 3. カテゴリー登録 4. カテゴリー一覧 5. カテゴリー編集(更新) 6. カテゴリー削除 7. カテゴリー追加 ② コメント ユーザー側 1. コメント投稿欄 2. コメント確認 3. コメント登録 4. コメント表示 管理側 5. コメント一覧 6. コメント削除確認 7. コメント削除 8. コメント数を記事に反映 9. 変更点 ③ 検索1. カテゴリー検索 2. 記事検索 ① カテゴリー 1. カテゴリー作成(category.php) まずは kanri_menu のリストに category.php のリンクを追加しておきま しょう。 カテゴリー作成は基本的に 記事作成と作り方は同じです。 shinki.php を別名で category.php で保存 しましょう。 require kanri_header.php を読み込む <div メニュー> require kanri_menu.php を読み込む </div メニュー> <div コンテンツ> <h2> <hr /> //↑次から省略 form で category_kakunin.php に送信 <table> <tr> <th>カテゴリー <td><"text" 、"category_name" /> </tr> </table> p タグ ボタン 登録、クリア</p> </form> </div> <div フッター> require フッター </div コンテンツ> </div フッター> ・・・ 2. カテゴリー確認(category_kakunin.php)
・・・ <?php 送られてきたデータを受け取る; 未入力なら die で接続を閉じる { } 日付取得; ・・; ?> ・・ ・・ ・・カテゴリー テーブルでカテゴリーを表示 ・・ ・・ form で hidden を使って category_touroku.php に送る p ボタン 登録、戻る ・・・ 3. カテゴリー登録(category_touroku.php) ・・・ <?php 送られてきたデータを受け取る; $sql = insert で SQL の select 文を作る; $sql を$db に送信し$result に代入; 条件で false なら 登録できませんでした } それ以外なら { 登録しました } ?> ・・・ 4.カテゴリー管理(一覧)
category_kanri.php を作成します。 メニューにリンクもつけておきましょ う。 ・・ <table> ・・カテゴリー・・ <?php $sql = "select で降順に表示。条件文は where id!=0 ; # 0 にするのはカテゴリーの 未指定を選択するためです。 ・・・ ・・・ ・・・ print "カテゴリー名から category_henshu.php のリンク"; } ?> </table> ・・ 5.カテゴリー編集(更新) カテゴリーは編集確認をしないことにし ます。 まず category_henshu.php を作成しま す。 ・・・ <?php 送られてきた id 番号を受け取る; $sql = テーブルは categoty; ・・・ if ・・・ ・・・ ?> form で category_henshu_sakujo.php に ・・・ ・・ <th>カテゴリー</th> ・・<"category_name" value="<?php echo $category_name;?>" />・・ ・・ ・・・
hidden で id を送る <script> function sakujo() { return confirm("削除していいですか？ "); } </script> p ボタン 更新、削除 </form> <?php } else { print "データベースエラー"; } ?> ・・・ 次に category_henshu_sakujo.php を作成 します。 記事の henshu_sakujo.php と同じです。 category_henshu_sakujo.php <?php $id = $_GET['id']; if ($_POST['action'] == '更新') { require 'category_koshin.php'; } else { require 'category_sakujo.php'; } ?> </body>
</html> category_koshin.php <?php データを受け取る; $sql = update category・・ ・・・ ・・・ ・・更新できませんでした } else { ・・「{$category_name}」に更新し ました } ?> 6.カテゴリー削除 category_sakujo.php <?php id を受け取る; $sql = "delete ・・・ ・・・ ・・ ・・削除できませんでした。 } else { ・・カテゴリーを削除しました。 } ?> 7.カテゴリーを追加 基本的ページの作成の時に作ったファイ ルにカテゴリーを追加していきます。 まず管理側のページを変更します。 新規記事を作る際にカテゴリーも入れて 作れるようにします。 shinki.php のカテゴリーの td の中に <select name="category">
<option value=0>未指定</option> <?php
$sql = "select * from category order by category_name";
$record = $db->query($sql);
while ($data = $record->fetch_assoc()) { extract($data); print "<option value=$id>$category_name</option>\n"; } ?> </select> を入力して下さい。 次に shinki_kakunin.php の $hiduke = ・・の下に
$sql = "select category_name from category where id=$category";
$record = $db->query($sql); if ($data = $record->fetch_assoc()) { $category_name = $data['category_name']; } else { $category_name = ""; } table のカテゴリーの td の中に <?php echo $category_name;?> を入力して下さい。
form に input タグ hidden で category を送 る。
$sql = "insert ・・ (title, ・・, koshinbi, category_id) ・・('$title', ・・, $koshinbi, $category_id)"; を追加します。 kiji_itiran.php ・・・ $hiduke = ・・・ $category_name = ""; if (is_null($category_id) == false) { $sql2 = "select category_name from category where id=$category_id";
$record2 = $db->query($sql2); if ($data2 = $record2->fetch_assoc()) { $category_name = $data2['category_name']; } } print ・・・<td>$category_name</td> henshu.php henshu_kakunin.php henshu_touroku.php も上で入力したものを参考に変えて下さ い。
ユーザー側の変更に移ります。 index.php ・・・ ・・・ ・・・ print ・・honbun・・ kiji_itiran.php と同じ ・・・ ・・ { ・・・； ・・； ・・・ { ・・・； } } print・・| $category_name |・・ print </div きじ> kiji_shosai.php も同様に付け加えてくださ い。
② コメント 1. コメント投稿欄(kiji_shosai.php) データを受けとった後に $kiji_id = $id; を 入力して下さい。 kiji_shosai.php にコメントの投稿欄を作成 します。 <h3>コメントの投稿</h3> <div コメント> form で comment_kakunin.php に送る <p>【名前】<br /><input type="text" name="name" /></p> <p>【本文】<br />
<textarea name="com_honbun" cols="80" rows="6"></textarea></p> hidden で kiji_id をおくる p タグ input タグ 送信、クリア </form> <hr /> </div> 2. コメント確認(comment_kakunin.php) ほとんど shinki_kakunin.php と同じです がコメントでは名前の入力がなかった場 合「名無しさん」(例)として送信します。 form で送るのは comment_touroku.php
3. コメント登録(comment_touroku.php) shinki_touroku.php を参考に作って下さ い。 列名は name、com_honbun、koshinbi、 kiji_id です。 4. コメント表示(kiji_shosai.php) コメントが登録できたのでコメント欄を 作ります。 kiji_shosai.php にコメント欄を作成しま す。 <h3>コメント欄</h3> <div コメント> <?php sql 文 コメントテーブルから kiji_id が$id を select; ・・・ while ・・・ データを受け取る; $hiduke ・・・ print 名前と本文と日付を表示 } ?> </div> コメント欄を少し分かりやすくしましょ う。 css に追加します。 div.comment { padding : 0 20px; } p.com_honbun { padding-left : 10px; } p.com_name { font-weight : bold; background-color : #99FFCC; }
#contents h3 { margin-left : 5px; padding-left : 5px; background-color : #CCFFCC; } 5. コメント一覧(編集)(comment_kanri.php) kiji_itiran.php を参考に作成してくださ い。 ・・・ $hiduke ・・・
$sql2 = "select title from kiji where id=$kiji_id"; $result2 = $db->query($sql2); if ($data2 = $result2->fetch_assoc()) { $title = $data2['title']; } else { $title = ''; } $comment = mb_substr($com_honbun, 0, 15); print・・
# mb_substr( str1, int1, int2, str2)
文字数を指定して文字列を取り出す。 str1 : 文字列 int1 : 何文字目から取り出すか int2 : 何文字取り出すか str2 : エンコーディング 6. コメント確認(削除確認) comment_henshu.php こちらも henshu.php と似ているので参考 に作ってください。 ただしこちらではコメントの id、コメン ト日時と記事の id、記事の日付を取得し ます。
#記事とコメントを分けるために$sql2 と result2、記事の日付を$kiji_hiduke に代入 します <?php id を受け取る; kiji_id を受け取る; sql 文 コメントテーブルから id が$id を取 り出す その$sql を mysql に送信して、検索結果 を$result に代入する。 $result から一行取り出して($data = $result->fetch_assoc()) 結果を$record に 代入します。 結果を$data で受け取る; コメントの日付を取得; $sql2 = "記事のテーブルから id が $kiji_id の更新日、タイトル、本文を取り 出す; その$sql2 を mysql に送信して、検索 結果を$result2 に代入する。 $result2 から一行取り出して結果を $data2 に代入 結果を$data2 で受け取る; 記事の日付を取得; } } ?> form で comment_sakujo.php に送る <table> タイトル 記事本文 記事日付 コメント者 コメント コメント日時 </table> hidden で id を送る スクリプトダイアログで削除確認 ・・・ </script> ボタン 削除、戻る
7. コメント削除 sakujo.php を参考にして下さい。 <?php 送られてきた id を受け取る; sql 文 ・・・ if ・・・ コメントを削除できませんでした ・・・ コメントを削除しました } ?> 8. コメント数を反映 index.php、kiji_shosai.php、kiji_itiran.php コメントの欄にコメント数を入れます。 最初にこれからコメントの関数を使うの で定義しておきます。 db_access.php に function comment_number($kiji_id) { global $db;
$sql = "select id from comment where kiji_id=$kiji_id"; $result = $db->query($sql); return $result->num_rows; } ?> を追加します。 # global :変数には有効範囲がありどこで も使えるようにするためにグローバル変 数を使う 詳しい説明 →https://uxmilk.jp/14993 →https://techacademy.jp/magazine/4953
index.php で if ・・ ・・ ・・ } else if (isset($_GET['c_id'])) { $c_id = $_GET['c_id'];
$where = " where category_id=$c_id"; } ・・・ } $com_num = comment_number($id); print 日付|カテゴリー|コメント ($com_num)件 ・・・ kiji_shiosai.php、kiji_itiran.php も同様に 入力してください。 9. 変更点
↓削除 ↓コメント管理に行くと コメントがされてる記事を消してもコメ ントが残ってしまうのでこれを解決する ために記事を削除する時にコメントも一 緒に削除します。 } else {
$sql = "delete from comment where kiji_id=$id"; $result = $db->query($sql); if ($result == false) { print "<p>記事「{$title}」を削除 しました。</p>"; print "<p>記事のコメントは削除 できませんでした。</p>"; } else { print "<p>記事「{$title}」とコメ ントを削除しました。</p>"; } } ③ 検索 1. カテゴリー検索 テーマ(カテゴリー)ごとに表示させます
メニュー欄にカテゴリーのリストを作っ てカテゴリーをクリックするとそのカテ ゴリーに分類された記事だけが表示でき るようにします。 category_kanri.php を参考にして下さい。 menu.php に <h3>カテゴリー</h3> <ul> <?php sql 文 カテゴリーテーブルから id が 0 で ないものを名前順に取り出す; その$sql を mysql に送信して、検索結果 を$result に代入する $result から一行取り出して結果を$data に代入 { $c_id = $data['id']; $c_category_name = $data['category_name']; print "<li><a href=\"index.php?c_id=$c_id\">$c_categor y_name</a></li>"; } ?> </ul> を入力して下さい。 2. 記事検索 (kensaku.php) まず menu.php に form(kensaku.php に送 る)と検索ボタンを加えます。
input type と name は search にします。
画像の検索欄の文字は placeholder ででき ます。
kensaku.php は kiji_shosai と似ていま す。
$search でデータを受け取ります。 sql 文で取り出します
テーブルは kiji で検索条件は honbun like '%$search%' or title like '%&search%' 更 新日順; ・・・以降 kiji_shosai.php と同じ タイトルから kiji_shosai.php へ移るリン クをつけてください。
5.
管理者側のパスワード管理
ここでは管理者側は ID とパスワードを設 定しログインできたら記事作成や編集が できるようになるようにしたいと思いま す。 必要なことは ・管理者のユーザーID とパスワードの登 録 ・新規登録の処理 ・管理者モードに行くためのログイン処 理 1. ユーザーモードからログインの画面 に移る。 2. ログインで ID と password を入力さ せ、管理者メニューの画面に移り、ID、パスワードを確認して OK ならセッショ ンを開始する。駄目なら戻る。 3. セッションを確認するための ログインしたときには、セッション を開始する。 ログアウトしたときには、セッショ ンを破棄する。 ・管理者モードのすべてのページで、管 理者としてログインしているかどうかを 確認する。 kanrisha_shinki ↓ kanrisha_kakunin ↓ kanrisha_touroku login ↓ login_kanrisha ↓ kanri_header →login_check 管理者のすべてのページで kanri_header.php を require_once で読み 込む ① データベース作成(password.sql) ② ID、パスワード作成(kanrisha_shinki.php) ③ 確認(kanrisha_kakunin.php) ④ 登録(kanrisha_touroku.php) ⑤ ログインページ(login.php) ⑥ ログイン処理(login_kanrisha.php) ⑦ 自動的にログインページに (login_check.php) ⑧ ログアウト(logout.php) ①データベース作成(password.sql) ID、パスワードを作るために新しくデー タベースを作ります。 password.sql を作成します。 user というテーブルを作る
項目は、id、name, password 名前とパスワードは varchar(255)、id はいつもの id もちろんターミナルで MySQL に読み込 ませてね ②ID、パスワード作成 (kanrisha_shinki.php) shinki.php と同じように ID とパスワード を入力できるページを作ります。 form で kanrisha_kakunin.php に送る テーブルで ユーザー名(ID)とパスワードを入力 できるように </table> ボタンで確認、クリア</p> ③確認(kanrisha_kakunin.php) <?php 送られてきたデータを受け取る; 名前(ID)とパスワード の両方を入力しないとダメ ?> form で kanrisha_touroku.php に送る テーブルで 送られてきたユーザー名(ID)と パスワード表示 hidden でユーザー(ID)とパスワードを送 る ボタンで登録、戻る
④登録(kanrisha_touroku.php) <?php 送られてきたユーザー名 パスワードを受け取る; $password_hash = password_hash($password, PASSWORD_DEFAULT); sql 文でユーザー名とパスワードを登録; sql 文をデータベースに送信し、その結果 を受け取って変数($result)に代入; エラーチェック 新規管理者の登録に失敗しました } else { 管理者を登録しました session_start(); $_SESSION['kanrisha'] = $name; } ?> ⑤ログインページ(login.php) ログインページなので kanrisha_shinki.php と中身は同じです。 form で送るのは login_kanrisha.php で す。 ⑥ログイン処理(login_kanrisha.php) <?php
db_access.php を読み込む ユーザー名、パスワードを受け取る; sql 文で neme が＄name のものを取り出 す; その$sql を mysql に送信して、検索結果 を$data に代入 $result で受け取ったデータを while ($record = $data->fetch_assoc()) で表示 $db_password = $record['password']; $login = password_verify($password, $db_password); #password_verify はパス ワードがハッシュにマッチするかどうか を調べる もしパスワードがマッチしたら session_start(); $_SESSION['username'] = $name; header('Location: kiji_itiran.php'); exit; } } header('Location: login.php'); ?> # header 関数で別ページにリダイレクト する。 リダイレクトとは、WEB ページに訪れた ユーザーに別の URL を自動的に見せるた めのしくみです。 header 関数では、Location と書いてか ら、飛び先の URL を書きます ⑦自動的にログインページへ まず、login_check.php を作成します。 <?php session_start(); if (isset($_SESSION['username']) == false) { login.php にリダイレクト } ?> 次に kanri_header.php に login_check.php require_once でを読み込ませます。 これで管理側に移動した時に自動的にロ グインページへ移行されます。
⑧ログアウト(logout.php) ログアウトできる機能もつけておきま す。 <?php $_SESSION = array(); #セッション変数を 全て解除 if (isset($_COOKIE["PHPSESSID"])) { #セ ッションを切断するにはセッションクッ キーも削除する setcookie("PHPSESSID", '', time() - 1800, '/'); # クッキーを削除する場合には、ブラ ウザの削除機構を起動するために 必ず有 効期限を過去に設定する必要があります } session_destroy(); #最終的にセッション を破壊 header('Location: kiji_itiran.php'); ?> session_destroy()は、現在のセッション に 関連づけられたすべてのデータを破棄 します。 ログアウトをクリックしてログインペー ジにいけば完了です。 メニューのログインページに行くリンク は必要ないので消しましょう。 パスワード作成も必要ないですが残して おいてもいいです。
