授業第14回 画像をアップロードできるBlog(4)
＊改良版（第4版）
１２／１５変更
準備（さらに改良しましたので、もう一度、コピーし直してください）*12/15（必要なjarの名前を変更してあります）
$cp
/home/hanrin/spldsfmt.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
$cp /home/hanrin/commons-io-2.1.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
$cp /home/hanrin/commons-fileupload-1.2.2.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
を実行し、必要なjarをWEBINF/libにコピーしておいてください。
このタグライブラリは、テーブルの形が決まっています。jpg,png,gif形式のファイルに対応しています。
この方式を変えたい、というひとは、先生に言ってください。好きな形して、コンパイルします。
変更点
テーブルの列が追加されました
<% taglib uri="/spldsfmt" prefix="dhfmt" %>に変更しました。
ファイルフォーマットを保存出来る列が追加されています。
1、フォームでファイルをアップロードする
このタグライブラリは、以下のテーブルでしか動作出来ません。
（ridはnullが入るので、referenceseが書けません。。。）
テーブル名は自由で構いませんが、列名は、同じでなければなりません。(卒業制作用に変更）
drop table bt_splfmt;
create table bt_splfmt(
id serial primary key,
namae varchar(100),
title varchar(400),
comment varchar(400),
pass varchar(100),
cdate timestamp default now(),
setfile bytea,
sumnail bytea,
rid int,
format varchar(10)
);
grant all on bt_splfmt to tomcat;
grant all on bt_splfmt_id_seq to tomcat;
フォームは、投稿されたスレッドにコメントを付けられるようになっています
<form method="post" enctype="multipart/form-data" action="fileupload.jsp" id="mf">
<table class="ftbl">
<tr>
<td class="ftd">名前：</td>
<td><input type="text" name="namae" value="" /></td>
</tr>
<tr>
<td class="ftd">タイトル：</td>
<td><input type="text" name="title" value="" /></td>
</tr>
<tr>
<td class="ftd">コメント：</td>
<td> 何番へのコメント？:
<sql:query sql="select * from bt_splfmt where rid = 0 order by id desc limit 3;" var="com"/>
<select name="rid">
<option value="">新しいスレッド</option>
<c:forEach var="a" items="${com.rows}" varStatus="jl">
<option value="${a.id}">スレッド:${jl.count}へ返信</option>
</c:forEach>
</select><br />
<textarea rows="5" cols="40" name="comment"></textarea></td>
</tr>
<tr>
<td class="ftd">添付File：</td>
<td><input type="file" name="setfile" value="set" /></td>
</tr>
<tr>
<td class="ftd">削除キー：</td>
<td><input type="password" name="pass" value="" size="20" maxlength="8" /></td>
</tr>
<tr>
<td class="ftd">書き込み実行：</td>
<td><input type="submit" value="書き込む" /></td>
</tr>
</table>
</form>
２、JSPでのタグの使用
*変更されています
JSPに
<%@ taglib uri="/spldsfmt" prefix="dhfmt" %>
を追加すると使えるようになります。
全ソースコード公開
----index.jsp
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<sql:setDataSource dataSource="jdbc/hanrin" />
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
<title>卒業制作</title>
<style>
body {
background-color:#87CEFA;
}
h1 {
background-color:#F4A460;
font-size:25px;
}
h2 {
background-color:#F4A460;
font-size:25px;
}
.ftbl {
table-layout:fixed;
width: 478px;
margin: 0px auto;
}
.ftd {
background-color:#F08080;
width:100px;
font-size:12px;
}
#header {
text-align: center;
}
#list {
margin: 0px 300px;
}
#footer {
text-align: center;
}
#chfm{
margin-left: 200px;
background: #CFF;
}
.com {
position: relative;
left: 100px;
top: -10px;
background-color: #f4f3f2;
padding: 30px;
color: #C60;
font-size:12px;
}
.di1{
padding: 4px;
background: #D2E2FF;
font-size: 14px;
}
ul {
margin-top: 50px;
font-size: 12px;
padding: 0px;
border: 1px solid #663300;
border-spacing: 0px;
background-color:#ffffff;
}
li {
list-style-position: inside;
border-right: 1px solid #663300;
border-bottom: 1px solid #663300;
color: #330000;
background-color: #eeeeee;
padding: 0.3em 1em;
text-align: left;
}
</style>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="application/javascript" src="sotusei.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1>画像投稿掲示板(Jpg,png,gif対応)</h1>
</div>
<div id="content">
<c:set var="size" value="200" scope="session" />
<c:if test="${!empty param.size}">
<c:set var="size" value="${param.size}" scope="session" />
</c:if>
<form action="index.jsp" method="post" id="chfm">
<label for="s">サムネイル画像の保存サイズを選んでください（送る前に「サイズ変更」をクリック)：</label>
<select name="size" id="s">
<option value="200" <c:if test="${param.size=='200'}">selected="selected"</c:if>>200x200</option>
<option value="250" <c:if test="${param.size=='250'}">selected="selected"</c:if>>250x250</option>
<option value="300" <c:if test="${param.size=='300'}">selected="selected"</c:if>>300x300</option>
<option value="350" <c:if test="${param.size=='350'}">selected="selected"</c:if>>350x350</option>
</select>
<input type="submit" value="サイズ変更" />
</form><br />
<form method="post" enctype="multipart/form-data" action="fileupload.jsp" id="mf">
<table class="ftbl">
<tr>
<td class="ftd">名前：</td>
<td><input type="text" name="namae" value="" class="ch" /></td>
</tr>
<tr>
<td class="ftd">タイトル：</td>
<td><input type="text" name="title" value="" class="ch" /></td>
</tr>
<tr>
<td class="ftd">コメント：</td>
<td> 何番へのコメント？:
<sql:query sql="select * from bt_splfmt where rid = 0 order by id desc limit 5;" var="com"/>
<select name="rid">
<option value="">新しいスレッド</option>
<c:forEach var="a" items="${com.rows}" varStatus="jl">
<option value="${a.id}">スレッド:${jl.count}へ返信</option>
</c:forEach>
</select><br />
<textarea rows="5" cols="40" name="comment" class="ch"></textarea></td>
</tr>
<tr>
<td class="ftd">添付File：</td>
<td><input type="file" name="setfile" value="set" /></td>
</tr>
<tr>
<td class="ftd">削除キー：</td>
<td><input type="password" name="pass" size="20" maxlength="8" class="ch" /></td>
</tr>
<tr>
<td class="ftd">書き込み実行：</td>
<td><input type="submit" value="書き込む" /></td>
</tr>
</table>
</form>
<br />
<c:if test="${!empty param.err}">
<h1 style="color:#F00">${param.err}</h1>
</c:if>
<div id="list">
<c:forEach var="i" items="${com.rows}" varStatus="sl">
<ul>
<li> スレッドNo:<div class="di1">${sl.count}</div></li>
<li> 名前:<div class="di1">${i.namae}</div></li>
<li> タイトル:<div class="di1">${i.title}</div></li>
<li> コメント:<div class="di1">${i.comment}</div></li>
<li>添付ファイル:<a href="btbig.jsp?id=${i.id}"><img src="btread.jsp?id=${i.id}" /></a></li>
<li>時間:<div class="di1">${i.cdate}</div></li>
<li> 削除キー:
<form action="del.jsp" method="post">
<input type="password" name="delkey" />
<input type="hidden" value="${i.id}" name="delid" />
<input type="submit" value="削除実行" />
</form>
</li>
</ul>
<sql:query sql="select * from bt_splfmt where rid = ?;" var="rs1">
<sql:param value="${i.id}" />
</sql:query>
<c:forEach var="j" items="${rs1.rows}">
<div class="com"> コメントID:<span class="di1">${j.id}</span><br />コメント本文:<div class="di1">${j.comment}</div></div>
</c:forEach>
<hr />
</c:forEach>
</div>
</div>
<div id="footer">
<h1>©gakusei</h1>
</div>
</div>
</body>
</html>
＊変更あり
---fileupload.jsp （ファイルをアップロードするJSP）
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/spldsfmt" prefix="dhfmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File</title>
</head>
<body>
<fmt:requestEncoding value="UTF-8" />
<fmt:setLocale value="ja_JP" />
<dhfmt:fileup jdbc="hanrin" table="bt_splfmt" size="${sessionScope.size}" />
<c:redirect url="index.jsp" />
</body>
</html>
---btread.jsp（画像そのものを出力するJSP）
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/spldsfmt" prefix="dhfmt" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<dhfmt:read jdbc="hanrin" table="bt_splfmt" id="${fid}" />
＊変更あり 間違い訂正（12/20)
---btbig.jsp(大きな画像を表示するJSP。dhfmt:bigを使う）
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/spldsfmt" prefix="dhfmt" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<dhfmt:big jdbc="hanrin" table="bt_splfmt" id="${fid}" />
問題１
上のようなBlogアプリケーションを
public_html/tomcat/mobile2011/sotusei/
以下に作りなさい。
出来たら、投稿の削除をするJSPを作ってください。パスワードで保護して下さい。
例：
★ 作成例
★ 携帯用画面作成例
完全に仕上がったら、スマートフォンでも実行出来るページを、jquery mobileで「indexmobile.jsp」として書きなさい。
とりあえず、動作出来た人は５０点、削除を作った人は６０点、jquery mobileで、テーマを付けて書いた人には100点