Dreamweaverでオリジナルブログシステムを構築する方法

Dreamweaverの機能を使ってオリジナルの簡易ブログシステムを構築してみました。

PHPが書けなくてもDreamweaverを使えば簡単にブログシステムを作ることができます（1から作るよりはWordPressなどのCMSをカスタマイズしたほうがいいかもしれませんが...）。

＜環境＞

Dreamweaver CS6
phpMyAdmin 3.4.5
XAMPP 1.7.7

動作確認

オリジナルブログ

↓トップ画面

↓編集画面(記事を追加したり動作をお試しください。)
※Basic認証をかけています

ユーザー名：test
パスワード：1234

記事一覧画面
 コメント管理画面

ステップ１：データベースの準備

↓phpMyAdminを起動し、新しいデータベースを作成します。

データベース名：my_blog(任意)
照合順序：utf8-general_ci

↓データベース「my_blog」に新しいテーブルを作成します。

名前：entry_table(任意)
カラム数：5

↓カラムごとに設定します。

カラム	種別	長さ	A_I	コメント
entry_id	INT	-	○	auto_increment
subject	VARCHAR	255	-	-
digest	TEXT	-	-	-
document	TEXT	-	-	-
post_date	TIMESTAMP	-	-	-

ステップ２：データベースとDreamweaverの接続

↓Dreamweaverを起動して、「サイト」＞「新規サイト」

↓サイト名（任意）、ローカルサイトフォルダーを指定します。

↓ローカル/ネットワークを選択し、フォルダーを指定します。

↓テストにチェックし、「保存」をクリック

↓「ウィンドウ」＞「データベース」を表示させます。

↓「MySQL接続」をクリック

↓接続名/MySQLサーバー/ユーザー名/パスワードを入力

↓ステップ１で作成したデータベース名を選択

ステップ３：登録画面

↓「admin」フォルダーの中に「input.php」を作成。またCSSも記述しておきます。

input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width">
<title>記事登録画面</title>
<link href="../css/base.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>Blogシステム管理画面</h1>
<h2>記事登録画面</h2>
<p><a href="index.php">一覧画面にもどる</a></p>
<p>記事の内容を入力して、[登録]ボタンをクリックしてください。</p>
<form id="formMain" name="formMain" method="POST" action="">
<p class="formtitle">タイトル</p>
<p><input name="subject" type="text" id="subject" size="50" maxlength="255" /></p>
<p class="formtitle">内容</p>
<p><textarea name="digest" cols="50" rows="5" id="digest"></textarea></p>
<p class="formtitle">続き</p>
<p>
<textarea name="document_text" cols="50" rows="20" id="document_text"></textarea>
</p>
<p><input type="submit" name="Submit" value="登録" /></p>
</form>
</body>
</html>

base.css

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: normal;
}
body{
  color: #333;
	margin: 25px;
}
h1 {
	font-size: 1em;
	font-weight: bold;
	border-left: 5px solid #09C;
	padding-left: 8px;
	margin-bottom: 25px;
}
h2 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 25px;
}
p,form {
	font-size: 0.9em;
	margin: 0 0 15px 12px;
}
p.formtitle {
	padding-left: 8px;
	border-left: 5px solid #CCC;
	margin-bottom: 2px;
}
input {
	font-size: 0.8em;
	padding: 1px 4px;
}
table,th,td {
	border: solid 1px #999999;
	border-collapse: collapse;
}
th {
	font-weight: bold;
	background-color: #F0F0F0;
	padding: 5px;
}
td {
	padding: 5px;
	text-align: center;
}
dl.comment {
	margin-bottom: 2em;
}
dl.comment dt {
	margin-top: 1em;
}

↓「サーバービヘイビアー」＞「レコードの挿入」

↓documentを選択し、以下のように設定します。

値：FORM.document_text
送信方式：テキスト
更新後の移動先：index.php

※文字化けを防ぐため「Connections」＞「MyBlogDatabase.php」に以下の1文をを追記します。

mysql_query("SET NAMES UTF8");

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_MyBlogDatabase = "localhost";
$database_MyBlogDatabase = "my_blog";
$username_MyBlogDatabase = "root";
$password_MyBlogDatabase = "xxxx";
$MyBlogDatabase = mysql_pconnect($hostname_MyBlogDatabase, $username_MyBlogDatabase, $password_MyBlogDatabase) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_query("SET NAMES UTF8");
?>

ステップ４：一覧画面

↓「admin」フォルダーの中に「index.php」を作成します

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width">
<title>記事一覧画面</title>
<link href="../css/base.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>Blogシステム管理画面</h1>
<h2>記事一覧画面</h2>
<p><a href="input.php">新しい記事を追加する</a></p>
<table width="100%">
<tr>
<th scope="col">ID</th>
<th scope="col">タイトル</th>
<th scope="col">編集</th>
<th scope="col">削除</th>
</tr>
<tr>
<td>1</td>
<td>サンプルのタイトルです</td>
<td>編集</td>
<td>削除</td>
</tr>
</table>
</body>
</html>

↓「バインディング」＞「レコードセット（クエリー）」

↓名前を「entry_list」にします

↓まずタイトル文字を選択します。

↓レコードセットの「subject」を選択した場所までドロップ＆ドラッグ

↓コードにPHPが書き込まれます。

↓IDも同じくドロップ＆ドラッグします

↓リピートしたい部分（tr）を選択します。

↓「サーバービヘイビアー」＞「リピート領域」

↓「すべてのコード」にチェックします。

ステップ５：編集画面

↓「admin」フォルダーに「edit.php」を作成します

edit.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width">
<title>記事編集画面</title>
<link href="../css/base.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>Blogシステム管理画面</h1>
<h2>記事編集画面</h2>
<p><a href="index.php">一覧画面にもどる</a></p>
<p>記事の内容を編集して、[更新]ボタンをクリックしてください。</p>
<form action="" id="formMain" name="formMain" method="POST">
<p class="formtitle">タイトル</p>
<p>
<input name="subject" type="text" id="subject" value="" size="50" maxlength="255" />
</p>
<p class="formtitle">内容</p>
<p>
<textarea name="digest" cols="50" rows="5" id="digest"></textarea>
</p>
<p class="formtitle">続き</p>
<p>
<textarea name="document" cols="50" rows="20" id="document"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="更新" />
</p>
</form>
</body>
</html>

↓「サーバービヘイビアー」＞「レコードセット」

↓レコードセットを作成

レコードセット名：entry_edit
接続：MyBlogDatabase
テーブル：entry_tabale
フィルター：entry_id
URLパラメータ：entry_id

↓まずタイトルのテキストフィールドを選択します。

↓プロパティーからレコードセットのアイコンをクリック

↓「subject」を選択

↓内容、続きに関しても同様

↓更新ボタンの隣を選択

↓「挿入」＞「フォーム」＞「非表示フィールド」を選択します。

↓名前を「entry_id」に変更してレコードセット

↓entry_idを選択します。

ステップ６：一覧画面との接続

↓「admin」＞「index.php」を編集します。まず「編集」を選択します。

↓「ファイルの参照」をクリック

↓edit.phpを選択し、「パラメーター」をクリックします

↓名前を「entry_id」、値をレコードセット「entry_id」して「OK」をクリック

ステップ７：更新機能

↓「admin」＞「edit.php」を編集します。「サーバービヘイビアー」＞「レコードの更新」をクリック

↓レコードの更新を設定します。

値送信元：formMain
接続：MyBlogDatabase
更新するテーブル：entry_tabale
列：'entry_id'は'FORM.entry_id'を'整数'として使用しているレコー...
値：FORM.entry_id
送信形式：整数
プライマリーキー：チェックする
更新後の移動先：index.php

ステップ８：削除機能

↓「admin」フォルダーの中に「remove.php」を作成します。

remove.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width">
<title>削除画面</title>
<link href="../css/base.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
この画面は記事削除画面です
</body>
</html>

↓「サーバービヘイビアー」＞「レコードの削除」

↓レコードの削除を設定します

接続：MyBlogDatabase
テーブル：entry_table
プライマリーキー列：entry_id
数値：チェック
プライマリーキー値：URLパラメータ「entry_id」
削除後の移動先：index.php

↓「admin」＞「index.php」を編集します。「削除」を選択します。

↓「ファイルの参照」を開きます

↓edit.phpを選択し、パラメーターをクリック

↓名前を「entry_id」、値をレコードセット「entry_id」して「OK」をクリック

ステップ９：トップの一覧と詳細

↓「blog」フォルダー直下に「index.php」を作成します。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オリジナルブログ</title>
<link rel="stylesheet" href="css/base.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>オリジナルブログ</h1>
<div>
<h2>ここに記事のタイトルが入ります</h2>
<p>ここに内容が入ります</p>
<p><a href="topic.php">もっと読む</a></p>
</div>
<p><a href="#">前のページへ</a>　<a href="#">次のページへ</a></p>	
</body>
</html>

↓「バインディング」＞「レコードセット（クエリー）」

↓レコードセットを設定します。

名前：entry_list
接続：MyBlogDatabase
テーブル：entry_table
ソート：entry_id「降順」

↓バインディングを作成します。

タイトルを選択し、レコードセット「subject」をドラッグ＆ドロップ
内容を選択し、「digest」をドラッグ＆ドロップ

↓div領域を選択します

↓「サーバービヘイビアー」＞「リピート領域」

↓表示を3回に設定します（任意）。

ステップ１０：記事画面

↓「blog」フォルダー直下に「topic.php」を作成します。

topic.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事画面</title>
<link rel="stylesheet" href="css/base.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>MyBlog</h1>
<h2>タイトルが入ります</h2>
<p>概要が入ります</p>
<p>本文が入ります</p>
<hr>
<h2>コメント</h2>
<dl class="comment">
<dt>名前 / <a>Web</a></dt>
<dd>ここにコメントが入ります</dd>
</dl>
<h2>新しいコメント</h2>
<form id="formComment" name="formComment" method="POST" action="">
<p class="formtitle">名前：</p>
<p>
<input name="name" type="text" id="name" size="35">
</p>
<p class="formtitle">メールアドレス：</p>
<p>
<input name="email" type="text" id="email" size="35">
</p>
<p class="formtitle">Webサイト：</p>
<p>
<input name="url" type="text" id="url" size="50">
</p>
<p class="formtitle">コメント：</p>
<p>
<textarea name="comment" cols="50" rows="5" id="comment"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="投稿する">
</p>
</form>
<hr>
<p><a href="index.php">リストにもどる</a></p>
</body>
</html>

↓「バインディング」＞「レコードセット（クエリー）」

↓レコードセットを設定

名前：entry_detail
接続：MyBlogDatabase
テーブル：entry_table

↓タイトルと概要、詳細部分にバインディングを作成します。

↓サイト直下の「index.php」を編集します。
「もっと読む」を選択して、ファイルの参照から「topic.php」を選択＆パラメーターを設定します。

名前：entry_id
値：entry_idをバインディング

ステップ１１：ページング機能

↓サイト直下の「index.php」を編集します。

<p class="nav"><a href="#">&lt;&lt;前のページへ</a>　<a href="#">次のページへ&gt;&gt;</a></p>

cssも追記します。

.nav {
	text-align: center;
	margin: 20px 0 0 0;
}

↓「次のページへ>>」を選択します。

↓「サーバービヘイビアー」＞「レコードセットページング」＞「次のページへ移動」

↓「OK」をクリック

↓「サーバービヘイビアー」＞「領域の表示」＞「最終のページでない場合に表示」

↓「前のページへ」も同様に設定し、「サーバービヘイビアー」→「領域の表示」→「先頭のページでない場合に表示」

ステップ１２：コメント機能

↓テーブル「comment_table」を作成。カラム数は7。

↓カラムごとに設定します。

カラム	種別	長さ	ヌル(NULL)	A_I	コメント
comment_id	INT	-	-	○	auto_increment
entry_id	INT	-	-	-	-
name	VARCHAR	255	-	-	-
email	VARCHAR	255	○	-	-
url	VARCHAR	255	○	-	-
comment	TEXT	-	○	-	-
post_date	TIMESTAMP	-	-	-	-

↓「topic.php」を編集します。「投稿する」ボタンの横に「非表示フィールド」を挿入

非表示フィールド名：entry_id
値：entry_idをバインディング

↓「サーバービヘイビアー」＞「レコードの挿入」

値送信元：formComment
接続：MyBlogDatabase
更新するテーブル：comment_table
値：Form.entry.id
送信形式：整数
更新後の移動先：-

↓「バインディング」→「レコードセット（クエリー）」

名前：comment_list
接続：MyBlogDatabase
テーブル：commnet_table
フィルター：entry_id「URLパラメータ：entry_id」
ソート：comment_id「降順」

↓名前・Web・コメントの文字にバインディング

↓「dl.comment」を選択

↓「サーバービヘイビアー」→「リピート領域」

↓「comment_list_name」を選択

↓「# ヌルリンク」を設定します。

↓「バインディング」→レコードセット「comment_list」の中の「email」を選択し、「バインド」ボタンを押す

↓「mailto:」を追記します

mailto:<?php echo $row_comment_list['email']; ?>

ステップ１３：コメントの管理機能

↓「admin」フォルダー内に「comment」フォルダーを作成。「comment」フォルダー内に「index.php」ファイルを作成

↓「挿入」＞「データ」＞「マスター詳細ページセット」

↓「セットアップ手順」→「4.レコードセット」をクリック

↓レコードセットを設定

名前：comment_list
接続：MyBlogDatabase
テーブル：comment_table
ソート：comment_id「降順」

↓「OK」をクリック

↓マスター詳細ページセットの挿入を設定します

レコードセット：comment_list
マスターページフィールド：「comment_id」「entry_id」「name」以外は表示させない
詳細へのリンク元：comment_id
ユニークキーの引き渡し：comment_id
表示：2（レコード/回）
詳細ページ名：「detail.php」

ウェブ学のすすめ

Study of Web Design & Programing

Dreamweaverでオリジナルブログシステムを構築する方法

動作確認

ステップ１：データベースの準備

ステップ２：データベースとDreamweaverの接続

ステップ３：登録画面

input.php

base.css

ステップ４：一覧画面

index.php

ステップ５：編集画面

edit.php

ステップ６：一覧画面との接続

ステップ７：更新機能

ステップ８：削除機能

remove.php

ステップ９：トップの一覧と詳細

index.php

ステップ１０：記事画面

topic.php

ステップ１１：ページング機能

ステップ１２：コメント機能

ステップ１３：コメントの管理機能