ランダムページDB一覧機能追加　ソースと解説

前回はとりあえず必要なふたつだけの機能を作りましたが、今回は見たいディレクトリのみの登録一覧だけを表示する機能を追加してみました。さらに、インターフェースを変更してコンテンツの左側にナビゲーションを配置する、AvocadoMixの標準レイアウトにしました。

phpソース

実際の文字コードはUTF-8ですが、ここではShift-JISにして表示します。

MVC	file name	概要
Controller	randompagedb.php	プログラムの本体今回はfunction directorydake()を追加
Model	randompage_model.php	データベース関連関数の定義今回はfunction get_dir_list($dir)を追加
View	randompagedb_main.php	各一覧表示のhtmlを作る部分
	randompagedb_sidemenu.php	左側のナビゲーション画面（今回追加）
	randompagedb_tmpl.php	Webブラウザに送るhtmlを構成する枠組
	header.php	AvocadoMix共通ヘッダー
	footer.php	AvocadoMix共通フッター

controllers/randompagedb.php

<?php
/*
 * file : contorollers/radompagedb.php
 * title: ランダムページデータベース一覧表示
 * auther: 佐々木一郎
 * date : 2017.05.21
 *        2017.06.10 function directorydake()を追加
 */

class Randompagedb extends Controller {

	function Randompagedb()
	{
		parent::Controller();
		$this->load->helper(array('form', 'url'));
		$this->load->model('Randompage_model');
		$this->output->set_header('Content-Type: text/html; charset=UTF-8');
	}

# id順一覧を表示する
	function index()
	{
		//データベースからデータを配列に読み込む
		$data['list'] = $this->Randompage_model->get_idjun_list();
		//ページタイトルを配列に格納する。
		$data['title'] = "id順一覧";

		//コンテンツ部分のhtmlを配列内に作成する
		$data['main']   = $this->load->view('randompagedb_main', $data, TRUE);

		//htmlテンプレートに必要部分を結合して表示する
		$this->load->view('randompagedb_tmpl', $data);
	}

# ディレクトリ順に表示する
	function directoryjun()
	{
		//データベースからディレクトリ順のレコードを配列に読み込む
		$data['list'] = $this->Randompage_model->get_directoryjun_list();
		//ページタイトルを配列に格納する。
		$data['title'] = "ディレクトリ順一覧";

		//コンテンツ部分のhtmlを配列内に作成する
		$data['main']   = $this->load->view('randompagedb_main', $data, TRUE);

		//htmlテンプレートに必要部分を結合して表示する
		$this->load->view('randompagedb_tmpl', $data);
	}

# 渡されたディレクトリだけを表示する。(2017.06.10追加)
	function directorydake()
	{
		//postされた値があれば変数に取り込み、無ければ無視する
		if ($this->input->post('dir'))
		{
			$dir = $this->input->post('dir');
		}
		else
		{
			//無視する。
			redirect('/directorydb');
		}
		//model無いのget_dir_list()にパラメータ（ディレクトリ名）を渡して、そのリストを得る
		$data['list'] = $this->Randompage_model->get_dir_list($dir);
		//ページタイトルを配列に格納する。
		$data['title'] = "指定ディレクトリのみ表示";

		//コンテンツ部分のhtmlを配列内に作成する
		$data['main']   = $this->load->view('randompagedb_main', $data, TRUE);

		//htmlテンプレートに必要部分を結合して表示する
		$this->load->view('randompagedb_tmpl', $data);
	}

}
?>

今回はfunction directorydake()を追加しました。左ナビゲーションのディレクトリ指定でPOSTされたパラメータ（ディレクトリ名）のみの登録データ一覧を表示する機能です。

models/randompage_model.php

<?php
Class Randompage_model extends Model
{
	function Randompage_model()
	{
		parent::Model();
		$this->load->database();
	}

	//ランダムにhtmlを指定する
	function get_randomfile()
	{
		//filelistテーブルのレコード数を得る
		$this->db->order_by('id');
		$query = $this->db->get('filelist');
		$rowcount = $query->num_rows();

		//乱数で1からレコード数（idの最大値）までの数を発生させる
		mt_srand();
		$num = mt_rand(1,$rowcount);

		//そのidのレコードを得る
		$this->db->where('id', $num);
		$query = $this->db->get('filelist');
		$row = $query->row();

		//先頭にディレクトリ移動記号を付加して返す
		$url = '../../'.$row->name;
		return $url;
	}

	//id順の全レコードを返す。(2017.05.21追加）
	function get_idjun_list()
	{
		$this->db->order_by('id');
		$query = $this->db->get('filelist');
		return $query->result();
	}

	//name順の全レコードを返す。(2017.05.21追加）
	function get_directoryjun_list()
	{
		$this->db->order_by('name');
		$query = $this->db->get('filelist');
		return $query->result();
	}

  //渡されたパラメータ（ディレクトリ名）が含まれるレコードのみ返す。(2017.06.10追加)
	function get_dir_list($dir)
	{
		$this->db->like('name', $dir);
		$this->db->order_by('id');
		$query = $this->db->get('filelist');
		return $query->result();
	}
}
?>

今回追加したのは、function get_dir_list($dir)関数です。

Contorolerから渡されたパラメータ（ディレクトリ名）が含まれるレコードのみを返します。

views/ randompagedb_main.php

<!-- view/randompagedb_main.php -->
<div id="main">
<h2>ランダムページ　データベース一覧</h2>
<a name="top"></a>
<h3><?=$title; ?></h3>
<!-- 一覧を表示 -->
<table>
<tr><th>id</th><th>directory/htmlファイル名</th></tr>
<!-- ここから、php endforeachまで、各レコードを表示するループ -->
<?php foreach($list as $row): ?>
<tr>
<td class="R"><?=$row->id; ?></td>
<td><?=$row->name; ?></td>
</tr>
<?php endforeach; ?>
</table>
<div  class="R"><a href="#top">Page Top</a></div>
</div><!-- end of main -->

前回、左上にあったナビゲーションを独立させたので、ここからは削除してあります。

views/randompagedb_submenu.php

<div id="side_navi">
<h3>一覧表示選択</h3>

<ul>
<li><form action="../nengo/index.php/randompagedb/directorydake" method="post">　
	<select name="dir" size="1">
	<option value="kosaku">工作室</option>
	<option value="software">無料自作ソフト</option>
	<option value="zuiso">随想</option>
	<option value="mypc">自作PC製作記</option>
	<option value="slideshow">スライドショー</option>
	<option value="camera">カメラ機材</option>
	<option value="photo">散歩写真</option>
	<option value="walking">ウォーキング</option>
	<option value="aircraft">飛行機</option>
	<option value="cinemagraph">シネマグラフ</option>
	<option value="report">二輪一人旅</option>
	<option value="motor">二輪車歴</option>
	<option value="anzen">二輪講座</option>
</select>
<input type="submit" value="選択" />
</form>
</li>
<li>
<a href="https://avocado.xii.jp/nengo/index.php/randompagedb">id順一覧</a>
</li>
<li>
<a href="https://avocado.xii.jp/nengo/index.php/randompagedb/directoryjun">directory順一覧</a>
</li>
</ul>
</div>

左側に表示するナビゲーションです。最初にあるのが今回追加した日本語でディレクトリを選択してPOSTする機能です。追加の無いディレクトリは省いてあります。

views/randompagedb_tmpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ランダムページ　データベース一覧</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" />
<link href="http://www.avocado.xii.jp/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="container">

<?=$this->load->view('header');?>
<div id="contents">
<?=$main?>
<?=$this->load->view('randompagedb_submenu');?>
</div><!-- end of contents -->

<?=$this->load->view('footer');?>
</div><!-- end of container -->
</div><!-- end of background -->
</body>
</html>

最終的にWebブラウザに送るhtmlを構成します。今回は左側ナビゲーションをここから読み込んでいます。

実行

2017年6月10日　記

Page Top