だから、ここにあなたの問題の解決策があると思います。
コードを研究し、そこから学び、強化することをお勧めします ;-)。そして、感想をいただけると嬉しいです！
データベースは、質問で説明したものと同じアイテム名とアイテム タイプを使用します。
スクリプトindex.phpの上部には、必要に応じてパラメーターを変更する構成セクションがあります。
スクリプトのブロックは次のとおりです。
- データベースに接続
- 初期化
- ヘッダーの準備
- データベースからデータを取得する
- コンテンツの準備、データのフォーマット
- テンプレートを読み込んで変数を置き換える
- 生成された出力を送信する
出力は、テレビ番組のさまざまな期間に対応する可変幅の DIV としてレイアウトされます。幅はパーセントで計算されるため、レイアウトはさまざまな画面サイズに何らかの形で反応します。
オーバーレイ DIV には、現在の時間のマーカーが表示されます。
ご覧のとおり、変数参照を含むテンプレートtvprogramme.tplを使用しています。変数名は{{varname}}のように中括弧で囲まれています。スクリプトは、最後にこれらをランタイム値に置き換えます。
テンプレートに埋め込まれたスタイル定義 (CSS) と、構成可能な間隔でページを更新するスクリプトが見つかります。必要に応じて、AJAX 呼び出しを使用してページの一部を更新できます。もちろん、スタイルと JavaScript の両方の定義を別のファイルに保持することもできます。
両方のファイル (index.php、tvprogramme.tpl) を BOM なしの UTF-8 形式で保存することをお勧めします。あなたはおそらく 7 ビットの世界に住んでいるので、ファイルが ANSII 形式で保存されている場合でも、このソリューションは適切に機能する可能性があります。
index.php (スクリプト)
<?php // ä
// Configuration BEGIN ---------------------------------------------------------
define('displayhours',4); // Hours to display
define('chnlwidth',12); // Width of channel column, in percents
define('bodymargin',8); // Margin of BODY, in pixels
define('refreshpage',0.5); // Refresh page interval, in minutes
define('dbname', 'tv');
define('dbtableprefix', 'tv_');
define('dbtable', 'programmes');
define('dbtable1', 'channels');
define('dbuserid', 'tv_user');
define('dbpasswd', 'tv_password');
define('dbhost', 'localhost');
define('dbport', '3306');
define('dbsocket', '');
date_default_timezone_set('America/New_York');
// Configuration END -----------------------------------------------------------
define('LBRK','<br />');
// Connect to database
$mysqli = new mysqli(dbhost, dbuserid, dbpasswd, dbname, dbport, dbsocket);
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error.LBRK;
exit(1);
}
// Initialise
$time = (isset($_GET['time'])) ? $_GET['time'] : time();
define('fldwidth', (97.4-chnlwidth) / displayhours);
define('secsperhour',3600);
$starthour = $time - ($time % secsperhour);
$endhour = $starthour + (displayhours * secsperhour);
$marker = ($time % secsperhour) / secsperhour;
// $outvars holds variables referred in template
$outvars = array(
'header' => '',
'content' => '',
'channelwidth' => chnlwidth . '%',
'markerwidth' => (chnlwidth + fldwidth * $marker) . '%',
'markerheight' => (1.2) . 'em',
'bodymargin' => bodymargin,
'fieldwidth' => fldwidth . '%',
'panelminwidth' => 150 * displayhours,
'refreshpage' => refreshpage * 60000,
);
// Prepare header
$outvars['header'] .= PHP_EOL . ' <div class="hd_channel" style="min-width: '.chnlwidth.'%;">' . date('D, M j',$time) . '</div>' . PHP_EOL;
for($xi=0; $xi<displayhours; $xi++) {
$outvars['header'] .= ' <div class="hd_field" style="min-width: '.fldwidth.'%;">' . date('g A',$time + ($xi * secsperhour)) . '</div>' . PHP_EOL;
}
// Get data from database
$starttime = date('Y-m-d H:i:s',$starthour);
$starttime1= date('Y-m-d H:i:s',floor(($starthour+60) / 60) * 60);
$endtime = date('Y-m-d H:i:s',$endhour);
$query =
'SELECT p.id as p_id, c.id as c_id, channel, channel_name, start, end, title, info' .
' FROM ' . dbtableprefix . dbtable . ' p, ' . dbtableprefix . dbtable1 . ' c'.
' WHERE ( ( (NOT start < \'' . $starttime . '\') AND ' .
'(NOT start > \'' . $endtime . '\') ' .
') OR ' .
'( (NOT end < \'' . $starttime1 . '\') AND ' .
'(NOT end > \'' . $endtime . '\') ' .
') ) AND ( p.channel = c.id )' .
' ORDER BY channel, start;';
$result = $mysqli->query($query);
if ($result!==false) {
// Query was successful, so prepare output
$entries = array();
$prevend = false;
while($row = $result->fetch_assoc()) {
// For every tuple from the database do ...
$row['start'] = strtotime($row['start']);
$row['end'] = strtotime($row['end']);
$sleft = ($row['start'] - $starthour) / secsperhour;
$start = ($row['start']<$starthour) ? $starthour : $row['start'];
$end = ($row['end']>$endhour) ? $endhour : $row['end'];
$sdelta = floor($end - 30 - $start) / secsperhour;
if (!isset($entries[$row['channel']])) {
$entries[$row['channel']] = array('name' => $row['channel_name']);
}
if (($sdelta+$sleft) > displayhours) $sdelta = displayhours - $sleft;
if (isset($entries[$row['channel']]['values'])) {
$ix = count($entries[$row['channel']]['values'])-1;
$delta = $row['start'] - $entries[$row['channel']]['values'][$ix]['end'];
} else {
$delta = 0;
}
if ($delta>0) $delta /= secsperhour;
$pad = ($delta>0) ? fldwidth * floor($delta / secsperhour) : 0;
$dopad = ( ($prevend===false) || ($row['start'] != $prevend) );
$entries[$row['channel']]['values'][] = array(
'start' => $row['start'],
'end' => $row['end'],
'pad' => $dopad ? (($delta>0) ? fldwidth * $delta : fldwidth * $sleft) : 0,
'pleft' => fldwidth * $sleft,
'pdeltah' => fldwidth * $sdelta,
'title' => $row['title'],
'info' => $row['info'],
);
$prevend = $row['end'];
}
$outvars['markerheight'] = (1.2 + count($entries) * 2.7) . 'em';
foreach($entries as $id => $entry) {
$outvars['content'] .= PHP_EOL;
$outvars['content'] .= ' <div class="ct_channel">' . $entry['name'] . LBRK . ' </div>' . PHP_EOL;
$pleft = 0;
$psum = 0;
foreach($entry['values'] as $k => $xe) {
if ($xe['pad']>0) {
$outvars['content'] .= ' <div class="ct_pad" style="width:' . $xe['pad'] . '%; min-width:' . $xe['pad'] . '%;"></div>' . PHP_EOL;
$pleft = $xe['pad'];
$psum += $xe['pad'];
}
$outvars['content'] .= ' <div class="ct_field" title="' . date('D d, g:i a',$xe['start']) . ' - ' . date('D d, g:i a',$xe['end']) . PHP_EOL . $xe['info'] . '" style="width:' . $xe['pdeltah'] . '%; min-width:' . $xe['pdeltah'] . '%;">' .
$xe['title'] . LBRK .$xe['info'] . '</div>' . PHP_EOL;
$psum += $xe['pdeltah'];
}
$pad = (99-chnlwidth) - $psum;
}
$result->free();
// Read template and replace variables
$template = file_get_contents(dirname(__FILE__).'/tvprogramme.tpl');
$output = preg_replace_callback('/(\{\{(.*?)\}\})/si', 'compute_replacement', $template);
// Done, send it out
echo $output;
} else {
// Query failed
echo "Failed to read the database table '" . dbtableprefix . dbtable . "'" .LBRK;
exit(1);
}
// Return template variable
function compute_replacement($groups) {
global $outvars;
return isset($outvars[$groups[2]]) ? $outvars[$groups[2]] : '['.$groups[2].']';
}
?>
tvprogramme.tpl (テンプレート)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TV Programmes</title>
<style type="text/css">
BODY { font-family: tahoma, arial, helvetica, sans-serif; font-size: 76%; margin:{{bodymargin}}px; }
P { margin:0; padding:0; }
.hd_channel, .ct_channel { width:{{channelwidth}}; background-color:#006699; color:white; clear:left; float:left; vertical-align:top; font-size:1.0em; }
.hd_field, .ct_field, .ct_pad { vertical-align:top; font-size:1.0em; float:left; }
.hd_channel, .hd_field, .ct_channel { border-style:solid; border-color:white; border-width:0 0 1px 1px; padding: 0 0 0 2px; }
.hd_field { width:{{fieldwidth}}; background-color:#006699; color:white; }
.ct_field { background-color:#009966; color:white;height:2.6em; padding: 0 2px 0 2px; }
.ct_channel, .ct_field { text-overflow: ellipsis; overflow:hidden; }
.ct_channel { height:2.6em; }
.ct_channel, .ct_pad, .ct_field { }
.ct_pad { background-color:transparent; color:black; height:2.6em; }
.hd_field, .ct_field, .ct_pad { border-style:solid; border-color:white; border-width:0 0 1px 1px; }
.header, .content { width:100%; min-width:{{panelminwidth}}px; }
.marker { left:{{bodymargin}}px; top:{{bodymargin}}px; position:absolute; min-width:{{markerwidth}}; border-color:red; border-style:solid; border-width:0 1px 0 0; height:{{markerheight}}; background-color:transparent; color: transparent; z-index:900; }
</style>
<script type="text/javascript">
function refreshPage() {
window.location.replace(window.location.pathname);
}
</script>
</head>
<body onload="setTimeout('refreshPage();',{{refreshpage}});">
<div class="page">
<div class="panel">
<div class="header">
{{header}}
</div>
<div class="content">
{{content}}
</div>
<div class="marker">
</div>
</div>
</div>
</body>
</html>
実行すると…
この入力から
…この出力が生成されます
