twitter sns クチコミ comments neta

2007/09/27 19:17:04

テンプレートを作る

rhaco修行シリーズ！


HTMLを用意する


次に（というか、実はHTMLから書いたりしてたんですがｗ）HTMLを用意します。
rhacoのテンプレートには継承という素敵な仕組みがあるので、継承するためのベースとなるテンプレートを最初に用意しました。

このあたりから、ソースが多くなってきて記事が見にくくなってきました。
全体のコードはSVN上に置いたので、そこで確認してくださいｗ

せっかくなので、いろんなテンプレートから選べる仕組みを用意したかったので、tdiary互換のテンプレートを書こうと思ったのですが、いまいち資料がどこにあるかわからなかったので、CSS着せ替えテンプレートプロジェクトのHTMLをベースに作ってみました。
また、CDPのテンプレートから更にいろんなのを設置して選択できるようにしました。その他の設定も併せてproject.xmlに以下のように追記しました。
...
    </database>
	<input name="SITE_TITLE">
		<title>site title</title>
		<data>rhacosns</data>
	</input>
    <select name="TEMPLATE">
        <title>view template</title>
		<rt:loop param="{$file.dirs({$rhaco.templatepath()},false,false)}" var="name">
			<data>{$name}</data>
		</rt:loop>
    </select>
    <select name="THEME">
        <title>view theme(cdp only)</title>
		<rt:loop param="{$file.dirs({$rhaco.templatepath('cdp/theme')},false,false)}" var="name">
			<data>{$name}</data>
		</rt:loop>
    </select>
</project>

そして、THEMEを選べるように、resources/template/cdp/theme以下にCDPのstyle.cssが入ったディレクトリを置きます。
（resources/template/cdp/theme/SAMPLE/style.css　みたいなかんじ。SVNみたらわかりやすいかも）

次に、そのベースとなるHTMLをresources/template/cdpにindex.htmlとしておいてみました。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="{$rhaco.templateurl('cdp')}/theme/{$rhaco.constant('THEME')}/style.css" rel="stylesheet" type="text/css" />
	<title>{$rhaco.constant('SITE_TITLE')}</title>
</head>
<body>
<div id="PAGETOP">

<div id="HEADER">

<h1>{$rhaco.constant('SITE_TITLE')}</h1>
<ul id="PAN">
<rt:block name="pan">
	<li><a href="{$rhaco.url()}">index</a></li>
</rt:block>
</ul>
</div>
<hr>

<div id="MENU">
<h2>menu</h2>
 <ul>
<rt:block name="menu">
   <li id="MENU01" class="menu-on"><a href="{$rhaco.url()}">index</a></li>
   <li id="MENU02"><a href="{$rhaco.url()}">Diary</a></li>
   <li id="MENU03"><a href="{$rhaco.url()}">Friends</a></li>
   <li id="MENU04"><a href="{$rhaco.url()}">Settings</a></li>
   <li id="MENU05"><a href="{$rhaco.url()}">Logout</a></li>
</rt:block>
 </ul>
</div>

<hr>

<div id="KIZI">
<rt:block name="content">
	<h2>Home</h2>
	<div class="text">
		<h3>My Profile</h3>
		<p>test</p>
		
		<h3>My friend's new diary</h3>
		<ul>
			<li><a href="{$rhaco.url()}">sample</a> (test) - 00:00</li>
			<li><a href="{$rhaco.url()}">sample</a> (test) - 00:00</li>
			<li><a href="{$rhaco.url()}">sample</a> (test) - 00:00</li>
		</ul>

		<ul class="modori">
			<li><a href="#PAGETOP">TOP</a></li>
		</ul>
	</div>
</rt:block>
</div>

<div id="FOOTER">
<h2>Address</h2>
<ul>
 <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
 <li id="FOOTER02"><address><a href="http://d.riaf.org/">rhacosns</a></address></li>
 <li id="FOOTER03"><address><a href="http://www.rhaco.org/">made with rhaco</a></address></li>
</ul>
</div>


</div>
</body>
</html>

まだまだちょー手抜きです。

そして、継承するテンプレートができたので、ログイン用のHTMLはこう書けます。
index.htmlと同じ階層で、login.htmlを次のように書きます
<rt:extends href="./index.html" />

<rt:block name="pan">
	<li><a href="{$rhaco.url()}">index</a></li>
	<li>login</li>
</rt:block>

<rt:block name="menu">
	<li id="MENU01" class="menu-on"><a href="{$rhaco.url()}">index</a></li>
</rt:block>

<rt:block name="content">
	<h2>Welcome!</h2>
	<div class="text">
	<h3>Login</h3>
	<rt:invalid name="exceptions" errors="errors">
		<ul class="exception">
			<rt:loop param="errors" var="msg">
				<li>{$msg}</li>
			</rt:loop>
		</ul>
	</rt:invalid>
	<form action="{$rhaco.url('login.php')}" method="post">
	<p><label for="email">email</label><input name="email" type="text"
		size="30" reference="true" /></p>
	<p><label for="password">password</label><input name="password"
		type="password" size="30" reference="true" /></p>
	<p><input type="submit" value="Login" /></p>
	</form>
	<ul class="modori">
		<li><a href="#PAGETOP">TOP</a></li>
	</ul>
	</div>
</rt:block>

テンプレートの書き方まで説明しているとものすごく記事が長くなってしまうので、今回は省略します…！！

これで、ブラウザからlogin.phpにアクセスすると、ログインフォームが表示されます。
このままではユーザーが存在しないので、管理画面からユーザーを追加して遊んでみること出来ますが、
ログインに成功すると、rhacosns/にリダイレクトされるので、リダイレクトされる先が無いうちは何も出来ませんｗ
そのへんは次のエントリでやります。たぶん。

  • Add Comment

    name:

    comment:

    question:
    1 + 1 = ?
    answer: