2ch風チャットサイトを作る方法！
今回は2ch風の作り方を解説していきたいと思います。
データベースの作成
※今回のDB(データベース)の名前“chat”
今回はphpmyadminを使います。
データベースを選び、sql文を選択します
そうしたら次の文を入れてください
CREATE TABLE `post` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '投稿番号',
`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT '投稿者名',
`contents` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT '投稿内容',
`created_at` datetime DEFAULT NULL COMMENT '登録日時',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT = '投稿情報';そして以下のようになっていたらOKです。
チャットサイト本体作成(index.php)
次にチャットシステムの本体を作成します
以下が"index.php"のコードです。
<?php
$pdo = new PDO(
"mysql:dbname=DB名;host=localhost","ユーザー名","パスワード"
,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
);
if ($pdo) {
echo "server接続OK";
} else {
echo "server接続NG";
}
$regist = $pdo->prepare("SELECT * FROM post order by created_at DESC limit 20");
$regist->execute();
?>
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<div id="send">
<title>2ch風掲示板</title>
<h1>2ch風掲示板</h1>
<section>
<h2>新規投稿</h2>
<form action="send.php" method="post">
<div>
名前 : <input type="text" name="name" value=""><br>
投稿内容: <textarea name="contents" id="" cols="50" rows="3" required maxlength="50"></textarea>
<button type="submit">書き込み</button>
</div>
</form>
</section>
</div>
<div class="box">
<section>
<h2><font color="red">テスト</font></h2>
<?php foreach($regist as $loop):?>
<div>
<div><?php echo $loop['id']?></div>
<div>名前：<b><font color="green"><?php echo $loop['name']?>@名無し</font></b>
:<?php echo $loop['created_at']?></div>
<div><?php echo $loop['contents']?></div>
</div>
<?php endforeach;?>
</section>
</div>
解説
1.送信
<h2>新規投稿</h2>
<form action="send.php" method="post">
<div>
名前 : <input type="text" name="name" value=""><br>
投稿内容: <textarea name="contents" id="" cols="50" rows="3" required maxlength="50"></textarea>
<button type="submit">書き込み</button>
</div>
</form>
</section>
</div>上のコードでは入力されたコンテンツをDBに送る作業をするためのものです。
required maxlength="50"の数字を変えれば送れる最大の文字数を変えられます。
2.表示
<div class="box">
<section>
<h2><font color="red">テスト</font></h2>
<?php foreach($regist as $loop):?>
<div>
<div><?php echo $loop['id']?></div>
<div>名前：<b><font color="green"><?php echo $loop['name']?>@名無し</font></b>
:<?php echo $loop['created_at']?></div>
<div><?php echo $loop['contents']?></div>
</div>
<?php endforeach;?>
</section>
</div>上のコードではDBに保存された内容を表示するためのものです。
3.DBの指定、ログイン
上から3行目の
"mysql:dbname=DB名;host=localhost","ユーザー名","パスワード"
,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")では、
phpmyadminのユーザー名とパスワード、DB名を使用してください。
hostの部分はデータベースサーバーのipまたはurlを入れてください。
(webサーバーとデータベースサーバーが同じipならlocalhostでokです。)
チャットサイト本体作成(send.php)
このファイルはfromから入力された情報をDBに直接送るものです。
以下がsend.phpになります。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>掲示板サンプル</title>
<h1>掲示板サンプル</h1>
<meta http-equiv="refresh" content="0 url=https://akasaaa.site/chat/sure1">
<section>
<h2>投稿完了</h2>
<button onclick="location.href='index.php'">戻る</button>
</section>
<?php
$id = null;
$name = $_POST["name"];
$contents = $_POST["contents"];
date_default_timezone_set('Asia/Tokyo');
$created_at = date("Y-m-d H:i:s");
$pdo = new PDO(
"mysql:dbname=DB名;host=localhost","ユーザー名","パスワード",
array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
);
$regist = $pdo->prepare("INSERT INTO post(id, name, contents, created_at)
VALUES (:id,:name,:contents,:created_at)");
$regist->bindParam(":id", $id);
$regist->bindParam(":name", $name);
$regist->bindParam(":contents", $contents);
$regist->bindParam(":created_at", $created_at);
$regist->execute();
?>さっきと同じようにphpmyadminのユーザー名とパスワード、 hostの部分はデータベースサーバーのipまたはurlを入れてください
style.css
以下の通りです
@charset "utf-8";
#name{
color: green;
}
.mes{
background-color: aliceblue;
border: 10px;color:lightsteelblue;
}
.box {
margin : auto; /* サンプル用 中央寄せ */
box-sizing : border-box; /* 罫線も含む長さ */
width : 100%; /* BOXの幅 */
height : 1500px; /* BOXの高さ */
background : #ffffff; /* BOXの背景色 */
border-top : 2px solid #000000; /* 枠線の指定（上） */
border-radius : 1px; /* 角丸の指定 */
box-shadow : 0 0 0 12px #ffffff; /* 影を利用した外余白 */
}
#send{
text-align: center;
}
#cont{
white-space: pre-wrap;
}
まとめ
今回は2ch風チャットサイトを作ってきましたが、どうだったでしょうか
実際のプレビューはhttps://akasaaa.site/chat/testで見られます。
まだまだ改善の余地がありそうなので気が向いたらさらに機能を追加したものの解説をしようと思います。
正直疲れました。