トップページへ戻る

準備（改良しましたので、もう一度、コピーし直してください）


$cp /home/hanrin/sotusei.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だけしかアップロードできません。
この方式を変えたい、というひとは、先生に言ってください。好きな形して、コンパイルします。

*お知らせ　tci10006.jarを使う人へ

もう一度、tci10006.jarをコピーし直してから使ってください。
専用の解説のページはこちらです。

前のバージョンは、接続方法が古く、しかも、大きなファイルをアップロードすると、表示に時間がかかるので、
上の課題を作ったら、もう一度、このページに戻って来て、以下の方法で試してみてください。

1、フォームでファイルをアップロードする

＊変更あり（１２／０６）
元の画像は、「setfile」列に保存され、「縮小画像」が別の列に保存される仕組みを作ってあります。
今は「縮小された画像」の方だけを表示しています。

*変更あり（１２／０７）
大きい画像を表示するタグをつくりました。サムネイル画像を<a> タグで囲んで、使ってください。

このタグライブラリは、以下のテーブルでしか動作出来ません。

テーブル名は自由で構いませんが、列名は、同じでなければなりません。(卒業制作用に変更）

drop table bt_gakusei;

create table bt_gakusei(
	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
);
grant all on bt_gakusei to tomcat;
grant all on bt_gakusei_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_gakusei 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でのタグの使用

＊変更あり（１２／０６）uriとprefixが変更になっています。注意してください。

JSPに

<%@ taglib uri="/splds" prefix="dh" %>

を追加すると使えるようになります。

全ソースコード公開

＊変更あり（１２／０６）サムネイル画像が表示されるため、読み込みがとても高速です。
画像以外の空白の項目があると、うまく動作しませんので、入力チェックをするjQueryを書きましょう（無くても動きますがログにエラーが残ります）

削除を実行するJSPはあえて載せてありません。自分で考えて作ってください。

＊変更あり（１２／０７）

「btbig.jsp?id=記事番号」へのリンクを追加

----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>画像投稿掲示板(JNDI利用接続)</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_spl 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_spl 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>&copy;gakusei</h1>
  </div>
</div>
</body>
</html>

＊変更あり（１２／０６）taglibのuriとprefixが変わっています。
設定項目も大幅に減りました。

---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="/splds" prefix="dh" %>
<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" />
<dh:fileup jdbc="hanrin" table="bt_gakusei" size="${sessionScope.size}" />
<c:redirect url="index.jsp" />
</body>
</html>

---btread.jsp（画像そのものを出力するJSP）

<%@ page contentType="image/jpeg" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/splds" prefix="dh" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<dh:read jdbc="hanrin" table="bt_gakusei" id="${fid}" />

＊変更あり（12/07)

---btbig.jsp(大きな画像を表示するJSP。dh:bigを使う）

<%@ page contentType="image/jpeg" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/splds" prefix="dh" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<dh:big jdbc="hanrin" table="bt_spl" id="${fid}" />

問題１

上のようなBlogアプリケーションを

public_html/tomcat/mobile2011/sotusei/

以下に作りなさい。

出来たら、投稿の削除をするJSPを作ってください。パスワードで保護して下さい。

例：

★　作成例

完全に仕上がったら、スマートフォンでも実行出来るページを、jquery mobileで「indexmobile.jsp」として書きなさい。

とりあえず、動作出来た人は５０点、削除を作った人は６０点、jquery mobileで、テーマを付けて書いた人には100点

トップへ戻る