読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

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

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

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

<環境>

動作確認

オリジナルブログ

↓トップ画面

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

  • ユーザー名:test
  • パスワード:1234

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



ステップ1:データベースの準備

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

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

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

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

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

カラム種別長さA_Iコメント
entry_idINT-auto_increment
subjectVARCHAR255--
digestTEXT---
documentTEXT---
post_dateTIMESTAMP---

ステップ2:データベースとDreamweaverの接続

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

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

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

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

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

↓「MySQL接続」をクリック

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

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

ステップ3:登録画面

↓「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");
?>

ステップ4:一覧画面

↓「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)を選択します。

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

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

ステップ5:編集画面

↓「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を選択します。

ステップ6:一覧画面との接続

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

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

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

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

ステップ7:更新機能

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

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

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

ステップ8:削除機能

↓「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」をクリック

ステップ9:トップの一覧と詳細

↓「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回に設定します(任意)。

ステップ10:記事画面

↓「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」を選択&パラメーターを設定します。

ステップ11:ページング機能

↓サイト直下の「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」をクリック

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

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

ステップ12:コメント機能

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

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

カラム種別長さヌル(NULL)A_Iコメント
comment_idINT--auto_increment
entry_idINT----
nameVARCHAR255---
emailVARCHAR255--
urlVARCHAR255--
commentTEXT---
post_dateTIMESTAMP----

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

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

  • 値送信元: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']; ?>

ステップ13:コメントの管理機能

↓「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