今まではサーバの設定をしていましたが、今回はWEBインターフェースの作成になります。
外部UI部分はは自分で作らなくてもHTMLのテンプレートは無料で結構配布されているので
それを使ったほうが時間節約にもなるのでそちらの方がいいかもしれません。
ひとまず今回は私は作った方法について紹介します。
まずは簡単にindex.htmlを1枚作成します。
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<link rel=”stylesheet” href=”css/syslog.css” type=”text/css” />
<title>SYSLOG検索くん</title>
</head>
<body>
<div id=”top”>
<div id=”header”>
<h1><a href=”index.php”>SYSLOG検索くん</a></h1>
<p>直近のsyslogを調べるサイト</p>
</div><!– /#header–>
<div id=”menu”>
<ul>
<li><a href=”index.php”>HOME</a></li>
<li><a href=”syslog.php”>SYSLOG</a></li>
<li><a href=”pick.php”>本日分の読み込み</a></li>
<li><a href=”help.php”>help</a></li>
</ul>
</div><!– /#menu–>
<div id=”contents”>
<h2>制作者より</h2>
<p>
SYSLOGサーバに送られてくるログを簡単にpickupできるようにデータベースに取り込んでいます。
</p>
<p>
毎日1:00に前日のログを取り込みます。
</p>
<p>
当日のログが必要な際は本日分の読み込みからログを取得して下さい。(現在未実装)
</p>
<ul>
<b><更新履歴></b>
<li></li>
<li>2013/7/22 SYSLOG検索くん β版公開</li>
<li>2013/7/18 SYSLOG検索くん 製作スタート</li>
</ul>
</div><!– /#contents–>
<div id=”pageTop”>
<a href=”#top”>ページのトップへ戻る</a>
</div><!– /#pageTop–>
<div id=”footer”>
<div class=”copyright”>© 2013 nekofamily All Rights Reserved.</div>
</div><!– /#footer–>
</div><!– /#top–>
</body>
</html>
基本のindexページですが、単純なHTML情報のみです。構成としてはHOMEとSYSLOG(実際にログ表示する画面)、
今日分のログを取り込む画面、HELP画面と4つあります。
すべてのページをそれぞれ作るのですが同じ内容の部分(ヘッダーとフッター)は同じなので切り出してしまいます。
上記のページをheader.html、footer.html、index.phpの3部に分けます。
header.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<link rel=”stylesheet” href=”css/syslog.css” type=”text/css” />
<title>SYSLOG検索くん</title>
</head>
<body>
<div id=”top”>
<div id=”header”>
<h1><a href=”index.php”>SYSLOG検索くん</a></h1>
<p>直近のsyslogを調べるサイト</p>
</div><!– /#header–>
<div id=”menu”>
<ul>
<li><a href=”index.php”>HOME</a></li>
<li><a href=”syslog.php”>SYSLOG</a></li>
<li><a href=”pick.php”>本日分の読み込み</a></li>
<li><a href=”help.php”>help</a></li>
</ul>
</div><!– /#menu–>
footer.html
<div id=”pageTop”>
<a href=”#top”>ページのトップへ戻る</a>
</div><!– /#pageTop–>
<div id=”footer”>
<div class=”copyright”>© 2013 nekofamily All Rights Reserved.</div>
</div><!– /#footer–>
</div><!– /#top–>
</body>
</html>
index.php
<?php include(“header.html”); ?>
<div id=”contents”>
<h2>制作者より</h2>
<p>
SYSLOGサーバに送られてくるログを簡単にpickupできるようにデータベースに取り込んでいます。
</p>
<p>
毎日1:00に前日のログを取り込みます。
</p>
<p>
当日のログが必要な際は本日分の読み込みからログを取得して下さい。(現在未実装)
</p>
<ul>
<b><更新履歴></b>
<li></li>
<li>2013/7/22 SYSLOG検索くん β版公開</li>
<li>2013/7/18 SYSLOG検索くん 製作スタート</li>
</ul>
</div><!– /#contents–>
<?php include(“footer.html”); ?>
3分割で注意することはindex.phpの部分です。
phpのincludeで頭にheader.htmlを呼び出して、最後にfooter.htmlを呼び出しています。
この2つを分割するだけでもHTMLの更新作業などが格段に楽になります。
さて、まだこの状態では真っ白な画面に文字が並んでいるだけの状態です。
CSSで画面を装飾していきます。
header.htmlでcss/syslog.cssとcssの場所を指定しています。
指定の場所に指定のファイル名で作成します。
syslog.css
@charset “UTF-8”;
/* main */
html {
overflow-y:scroll;
}
body {
margin:0;
padding:0;
line-height: 160%;
letter-spacing:1px;
font-family: Arial, ‘MS Pゴシック’, sans-serif;
font-size: 14px;
color:#333;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
}
a {
color:#68903C;
text-decoration:none;
}
a:hover {
color:#92C45B;
}
ul {
margin:0 0 1em 0;
padding:0;
}
li {
margin:0 0 0 40px;
padding:0;
}
/* div main */
#top {
width:800px;
margin:20px auto;
padding:0 20px;
border:1px solid #CECFCE;
background:#fff;
}
#header {
width:800px;
position:relative;
}
#navi {
position:absolute;
top:20px;
right:0;
}
#menu {
float:left;
width:800px;
margin:10px 0;
background:#333;
}
#contents {
clear:both;
float:none;
}
#pageTop {
clear:both;
}
#footer {
width:800px;
clear:both;
padding:10px 0;
}
/* header custom */
#header h1 {
padding:20px 0;
font-weight:bold;
font-size:28px;
}
#header h1 a {
color:#333;
}
#header h1 a:hover {
color:#92C45B;
}
#header p {
margin:0;
padding:0 0 5px 0;
border-bottom:1px solid #CECFCE;
}
/* navi custom */
#navi ul {
list-style:none;
}
#navi li {
float:left;
margin:0 0 0 22px;
padding:0 0 0 20px;
font-size:11px;
}
#navi li a {
border-bottom:1px solid #CECFCE;
}
/* menu custom */
#menu ul {
list-style:none;
margin:0;
padding:0;
}
#menu li {
float:left;
margin:0;
padding:0;
}
#menu li a {
display:block;
padding:8px 20px;
color:#fff;
}
#menu li a:hover {
color:#fff;
background-color:#088A08;
border:none;
}
/* contents costom */
#contents h2 {
margin-bottom:10px;
padding:10px 0;
font-weight:bold;
font-size:16px;
border-bottom:2px solid #ddd;
}
#contents h3 {
margin-bottom:2px;
padding:2px 0 2px 10px;
font-weight:bold;
font-size:15px;
line-height:1.2;
border-left:5px solid #333;
}
#contents h4 {
margin-bottom:2px;
font-weight:bold;
font-size:14px;
border-bottom:2px solid #666;
}
#contents h5 {
margin-bottom:2px;
padding:2px 5px;
font-weight:bold;
font-size:13px;
background:#ececec;
}
#contents h6 {
font-weight:bold;
font-size:13px;
}
#contents table {
width:100%;
border-collapse: collapse;
}
#contents table th {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
background:#333;
color:#fff;
}
#contents table td {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
background:#cfcfcf;
}
/* pagetop */
#pageTop {
padding:10px 0;
text-align:right;
}
#pageTop a {
padding:0 0 0 12px;
}
/* copyright */
.copyright {
text-align:center;
font-size:11px;
font-style:normal;
padding:20px 0;
border-top:1px solid #CECFCE;
}
結構ざっくりした感じで作っているので細かいところは都度追加していく感じで・・・
ここは好みがでてくるところだと思うので好きなように作るといいと思います。
次回はPHPでの集計画面についてです。