ホームページ作成の裏技!

自動登録型リンク集を作ってみよう!A の巻

データ表示部の作成

さて。掲示板システムを使用して データを入力する部分は前回作りました。今度はデータの表示部分を作成してみましょう。これは コンテンツエディタ利用時と ほとんど同じです。<whiledata>〜</whiledata>のループで作成します。
<whiledata src='bbs' putmax='10'>&nbsp;&nbsp;<form action='$this_name' method='POST' onsubmit='return false;'>&nbsp;&nbsp;<input type='hidden' name='bbs_mode' value=''>&nbsp;&nbsp;<input type='hidden' name='bbs_thrno' value='$bbs_thrno'>&nbsp;&nbsp;<input type='hidden' name='bbs_selectno' value='$bbs_serno'>&nbsp;&nbsp;<input type='hidden' name='bbs_page' value='$bbs_page'>&nbsp;&nbsp;<input type='hidden' name='bbs_sort' value='$bbs_sort'>&nbsp;&nbsp;<input type='hidden' name='bbs_newpass' value=''>&nbsp;&nbsp;<table class='Link'>&nbsp;&nbsp;&nbsp;&nbsp;<tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td align='center' width='40%'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="$bbs_url" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- バナーイメージへの直リンクの入力があったら画像を表示 -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<if $bbs_sub0 != ''>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='$bbs_sub0' alt='$bbs_name'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- なかったらサイト名を表示 -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$bbs_topic<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</if>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<if $bbs_name!=''>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$bbs_name&nbsp;様<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</if>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td valign='top'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- ジャンルの表示 -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='typebox'>$bbs_sub1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- 48時間以内に登録されたデータにアイコン表示 -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<if $nowdate <= $bbs_date + (86400*3)>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='/images/gsnu59.gif' alt='New'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</if>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$bbs_body<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td width='7%'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' value='修正' onclick='SetValueSubmit(this.form,"bbs_mode=Qmodify");'><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' value='削除' onclick='SetValueSubmit(this.form,"bbs_mode=Qdelete");'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='hidden' size='30' maxlength='8' name='bbs_pass'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>&nbsp;&nbsp;&nbsp;&nbsp;</tr>&nbsp;&nbsp;</table>&nbsp;&nbsp;</form></whiledata>

入力フォームと表示部分の動作を結合させる

これで 入力部分と表示のループ部分が出来ましたね。これを 別々のファイルで保存して置いてください。(慣れれば一つのHTMLにできますが 慣れない内は処理の流れを掴みやすいように分けた方が無難です。)
この後の説明は 仮に入力フォームをinput.html データ表示部をindex.html として保存したとします。
このとき 自動登録型リンク集のURLに訪問者がアクセスした場合に表示されるのは 表示ループ部分の index.htmlです。データがないので何も表示されていませんね。データを登録しようとしたら input.htmlへのリンクが必要となります。今回は リンクではなくボタンを配置してみました。
<input type='button' value='新規登録' onclick='location.href="input.html";'>
ボタンのonclickイベントに記述しているのはJavaScriptです。単にページ遷移するだけの命令を書いています。
リンクの場合は以下のような記述になりますね。表示の形式が異なると 記述内容も変わりますが動作は同じです。
<a href='input.html'>新規登録</a>

細部の動作を作る

これで 新規登録ボタンが表示されました。このボタンを押すと input.html が表示されますね。適当にデータを入力して[登録]ボタンを押してください。一瞬画面がチラッとして そのまま新規登録画面が表示されていると思います。「あれ?ちゃんと登録できたのかな?」と思いませんでしたか?キャンセルボタンを押して見てください。元の画面に戻りませんね(汗)。
何ででしょう?ちゃんと理由があります。input.html のformタグに記述した action 属性が鍵となります。このaction属性は 「データの送信先」の指定です。細かい説明をすると 本来actionはCGIプログラムを指定すべき属性です。action属性に指定されたプログラムが 送信されたinputなどのフォーム部品を各データとして受け取り 様々な処理(保存・削除・計算などなど・・・)をします。ホムペネットではHTMLに<whiledata>や<insert>タグを記述することによって これらの独自タグのsrc属性のプログラムが動作し それぞれに応じた処理をして 変数に値を格納して返してきます。難しく感じた方は「データを送信した後に表示されるHTMLファイル名を記述すればいい」と覚えてください。この場合 登録後にはindex.htmlに戻りたいですよね。ですので input.html のフォームタグを以下のように書き換えます。
<form action='index.html' method='POST'>
action=$this_nameという書き方は データ送信後 同一ページを表示したい場合に使う書き方なんです。こう書いておけば ファイル名が何であろうと当該ファイル名が入るようになっていますので便利です。先ほど登録した後に ページが移動しなかったのは ここが$this_nameになっていたからでした。これで再度 新規登録してみてください。ちゃんとindex.htmlに戻って 新しいデータが追加されていますね♪キャンセルボタンを押してもちゃんと戻ります。
さて 後は修正と削除ですが・・・ 次回にしましょう。結構長くなったので。




NetMall
宿NetMall
宿帳くん
Powered by Homepe.net