ぐっちゃんのチェックポイント

身近なことからキワドイとこまで、幅広い領域を担当しています

2ch 風の掲示板Webサイトの作成 ~MAMPを添えて~

エンジニア系

始めに

こんにちは。、plotsです。


マック(マクド) で 担々ダブルビーフ を頼んだのだがこれが美味かった！
口に入れた時、担々麺のあの辛さがマジでいい。



ちなみに 担々のソース にポテトをつけて食べるのもこれまた美味しいので一石二鳥だ。
日頃スパチキを食べてるがこのソースもいいし、ナゲットみたいにソースだけ売ってくれないかな。

本編

背景

メモみたいなアプリを作りたい。
紙だとかける範囲に限界があるし

というわけで、2ch 風の掲示板サイトを作ってみた

準備するもの

前回と同じく MAMP を使用する
↓
plots.hatenablog.jp

構造

  • ファイル構成
.
└── test2ch
    ├── dbconnect.php
    ├── index.php
    ├── input_do.php
    ├── memo.php
    ├── input_thread.php
    ├── style.css
    └── style_thread.css
  • データベースの内容

重要なとこだけ説明

  • dbconnect.php

DBに接続するためだけのファイル
前回の内容とちょっと変えたDBの位置だけ変えた

フロントページ

フロントページ上でスレを立てると表示されるページ

各スレッドのページ

  • input_thread.php

各スレッドのページ上でコメントを書き込むと表示されるページ

画像だとこんな感じ。




  • input_thread.php


機能・仕様

  • 2ch 風というわけあって簡単にスレッドを立てられる
  • (公開してないけど) 個人が自由に投稿・意見が可能
  • Sysyemから1レス目に自動投稿される

(一部の)コード

"一部" というのはオンラインで勉強した内容が一部含まれていて全部は公開できないからなぁ
一応作ったプログラムには、著作権ってのがあるからね

  • index.php の一部
<?php
require('dbconnect.php');
$stmt = $db->prepare('select * from front order by tableID desc');
$result = $stmt->execute();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>2ch風掲示板サイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>2ch風掲示板サイト ふろんとぺ～じ</h1>
    <h3>データベースの設計とコーディングは3日くらいかかった(1日 3時間)</h3>
    <?php $stmt->bind_result($tableID, $tableName); ?>
    <?php while ($stmt->fetch()) : ?>
        <h2>
            <a href="memo.php?id=<?php echo $tableID; ?>">
                <?php
                //スレタイトル名が25文字以上の場合は25文字まで表示させる
                echo htmlspecialchars(mb_substr($tableName, 0, 25));
                ?>
            </a>
        </h2>
    <?php endwhile; ?>

    <form action="input_do.php" method="post">
        <textarea name="tableName" cols="50" rows="3" placeholder="新しいスレ名を入力"></textarea>
        <br>
        <button type="submit">スレを立てる</button>
    </form>
</body>
</html>

フロントページ
スレッドタイトルを持ってきて一覧表示
下部にスレを立てる用のフォームがある

<?php
$memo = filter_input(INPUT_POST, 'tableName', FILTER_SANITIZE_SPECIAL_CHARS);

require('dbconnect.php');
$stmt = $db->prepare("insert into front(tableName) values(?)");

$stmt->bind_param('s', $memo); 
$ret = $stmt->execute();

// Sysyemから1レス目に自動投稿させるsql文
$fromSystem = $db->query("insert into thread (tableID, usrName, content) values ((select max(tableID) from front),'from system', '新しいスレが立ち上げられました')");

if ($ret):
    echo "スレが立てられました！";
    echo "<br><a href='index.php'>フロントページへ戻る</a>";
else:
    echo $db->error;
endif;
?>

index.php の tableName の情報を取ってきて、その情報を insert 句に入れて実行
tableID は Primary key 制約なので気にしないで ok

  • memo.php の一部
<!DOCTYPE html>
<html lang="ja">
<head>
    <title><?php echo $tableName ?></title>
    <link rel="stylesheet" href="style_memo.css">
</head>

<body>
    <a href="/testnech">一覧へ</a>
    <h2><?php echo $tableName ?> のスレ</h2>
    <?php foreach ($ret as $colum) : ?>
        <div class="thbox1">
            <p>
            <div class="usr"><?php echo $colum[0] ?></div>
            <div class="timestamp"><?php echo $colum[1] ?></div>
            </p>
            <p><?php echo $colum[2] ?></p>
        </div>
        <br>
    <?php endforeach; ?>

    <!-- 投稿フォーム -->
    <div class="postform">
        <p>◆投稿フォーム◆</p>
        <form action="input_thread.php" method="post">
            <textarea readonly name="tableID" cols="2" rows="1"><?php echo $tableID ?></textarea>
            <textarea name="usrName" cols="38" rows="1" placeholder="名前(まだ省略不可)"></textarea><br>
            <textarea name="content" cols="40" rows="6" placeholder="コメント内容"></textarea>
            <br>
            <button type="submit">書き込む</button>
    </div>
</body>
</html>

開いたスレッドの情報を表示。
開いたスレッドのtableIDを使って、DBからselectで引っ張ってくるSQL文を打って動くよ。
下部に書き込むフォームがある。

  • input_thread.php
<?php
$tableID = filter_input(INPUT_POST, 'tableID', FILTER_SANITIZE_NUMBER_INT);
$uN = filter_input(INPUT_POST, 'usrName', FILTER_SANITIZE_SPECIAL_CHARS);
$ct = filter_input(INPUT_POST, 'content', FILTER_SANITIZE_SPECIAL_CHARS);

require('dbconnect.php');
$stmt = $db->prepare("insert into thread(tableID, usrName, content) values(?,?,?)");

$stmt->bind_param('iss',$tableID, $uN, $ct);  //?に何を入れるか
$ret = $stmt->execute();

if ($ret):
    echo "投稿できたゾ<br>";
    echo "<a href='memo.php?id=$tableID'>さっきの画面へ戻る</a>";
else:
    echo $db->error;
endif;
?>
<a href="memo.php?id=<?php echo $tableID; ?>">

memo.php のフォーム内にあった tableID, usrName, content の情報を取ってきて、
んでそれらの情報を SQL 文の insert 句でぶち込む感じ

終わりに

久々にエンジニア系の記事書いたわ
さっきも言ったが、一部はオンライン学習の内容だから
そのままコピペで起動はできないようにはなってる。
まぁそこはしゃーない。

ちなみに css は 5ch のものをそのまま持ってきた。

そういえば今回の見直しする点なんにも言ってなかったな。
input_do.php と input_thread.php は正直いらないかなと思った。
これって Ajax でやればもうちょっと動的に動いてストレスレスになるんかなぁ

というより javascript はまだまだ勉強中の身なので手付けられずって感じ。
やれたらやる。
んがそれはまた後で。