雲端運算

1. 課程名稱：雲端運算
教師：黃豐隆 教授
助教：曾勝億
2015/5/24國立聯合大學 資工程系 1

2.  環境
◦ JSP
 Java servlet page利用java做為後端語言，可嵌入HTML網頁
中。
 功能
◦ 顯示成績
◦ 計算總分
◦ 列出各科及格與否
2015/5/24國立聯合大學 資工程系 2

3. <%!//在這種Scriptlet可定義全域變數、方法、類別
final int courseAmount=5;//全域常數
%>
<%
/*==============在這種Scriptlet可定義區域變數、撰寫敘述==========*/
float chinese=0.0f;//區域變數
float english=0.0f;//區域變數
float math=0.0f;//區域變數
float science=0.0f;//區域變數
float history=0.0f;//區域變數
float total=0.0f;//區域變數
float avg=0.0f;//區域變數
boolean checkParam = (request.getParameter("chinese")!=null &&request.getParameter("chinese")!="" )&&
(request.getParameter("english")!=null
&&request.getParameter("english")!="" )&&
(request.getParameter("math")!=null &&request.getParameter("math")!="" )&&
(request.getParameter("science")!=null
&&request.getParameter("science")!="" )&&
(request.getParameter("history")!=null
&&request.getParameter("history")!="" );//取得HTTP Post的參數，並檢查是否合法
if(checkParam) {
chinese=Float.parseFloat(request.getParameter("chinese"));
english=Float.parseFloat(request.getParameter("english"));
math=Float.parseFloat(request.getParameter("math"));
science=Float.parseFloat(request.getParameter("science"));
history=Float.parseFloat(request.getParameter("history"));
total = chinese+english+math+science+history;
avg =(float) total/courseAmount;
out.print("國文:"+chinese+"<br>");//撰寫敘述
out.print("英文:"+english+"<br>");//撰寫敘述
out.print("數學:"+math+"<br>");//撰寫敘述
out.print("自然:"+science+"<br>");//撰寫敘述
out.print("社會:"+history+"<br>");//撰寫敘述
out.print("總分:"+total+"<br>");//撰寫敘述
out.print("平均:"+avg+"<br>");//撰寫敘述
}
%>
 在jsp中，Java程式碼的部分要包在Scriptlet
中， Scriptlet有三種使用格式<%! %>、 <%
%>、 <%= %>
 <%! %>
◦ 這種Scriptlet可定義全域變數、方法、類別
 <% %>
◦ 這種Scriptlet可定義區域變數、撰寫敘述
 <%= %>
◦ 輸出變數、常數及運算式
 第一部份分別使用<%! %>、 <% %>
 透過request可取得使用者表單post的參數。
 在這邊進行成績的計算，並透過out.print輸
出顯示(等同於System.out.print)
2015/5/24國立聯合大學 資工程系 3

4.  第二種的Scriptlet可以依需要與HTML Tag
共存，例如要在if else中直接顯示需要的
HTML輸出，可以不透過out.print，直接把
tag包在其中。
◦ <%
if(判斷){
%>
<p>成立時顯示內容</p>
<%
}else{
%>
<p>不成立時顯示內容</p>
<%
}
%>
 第三種servlet可以輸出變數、常數及運算式
 在這邊進行各科及格、不及格的判斷
<% if(checkParam){
if(chinese>=60){
%>
<p>國文及格=><%=chinese+"分" %></p>
<%
}else{
%>
<p>國文<font color="red">不及格=><%=chinese+"分" %></font></p>
<%
}
}
%>
<% if(checkParam){
if(chinese>=60){
%>
<p>國文及格=><%=chinese+"分" %></p><%--輸出字串常數、變數 --%>
<%
}else{
%>
<p>國文<font color="red">不及格=><%=chinese+"分" %></font></p><%--輸出字串常數、
變數 --%>
<%
}
}
%>
<% if(checkParam){
if(english>=60){
%>
<p>英文及格=><%=english+"分" %></p><%--輸出字串常數、變數 --%>
<%
}else{
%>
<p>英文<font color="red">不及格=><%=english+"分" %></font></p><%--輸出字串常數、
變數 --%>
<%
}
2015/5/24國立聯合大學 資工程系 4

5.  表單這邊不設action，表示將表單POST會自
身。
 Jsp可透過requst取得表單post的數值。
<p>請輸入各科成績</p>
<form method="Post">
<p>國文</p>
<input name="chinese" type="text" placeholder="請輸入成績"/>
<p>英文</p>
<input name="english" type="text" placeholder="請輸入成績
"/>
<p>數學</p>
<input name="math" type="text" placeholder="請輸入成績"/>
<p>自然</p>
<input name="science" type="text" placeholder="請輸入成績
"/>
<p>歷史</p>
<input name="history" type="text" placeholder="請輸入成績
"/>
<input type="submit" value="送出"/>
</form>
2015/5/24國立聯合大學 資工程系 5

6.  Web.xml用來設定這個網站的相關設定。
 可以在這邊設定所要使用的Servlet所映射
(Mapping)的路徑。
 並可以設定要做為首頁顯示的page。
<?xml version="1.0" encoding="utf-8"?>
<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.
xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
2015/5/24國立聯合大學 資工程系 6

7.  原始碼
◦ https://github.com/JeffZeng/Sample04.git
 Demo
◦ http://cloudcomputetest04.appspot.com
2015/5/24國立聯合大學 資工程系 7

8.  環境
◦ Servlet
◦ JSP
 功能
◦ 顯示目前通訊錄的內容
◦ 可新增新的聯絡人
2015/5/24國立聯合大學 資工程系 8

9.  在這個範例中會使用到資料庫的部分，GAE
所使用的資料庫是DataStore。
 Jsp 的部分會顯示目前儲存在DataStore聯絡
人，透過DatastoreServiceFactory類別的靜
態方法getDatastoreService()，可產生
DatastoreService的物件，透過這物件的方
法我們可以去存取DataStore，新增、刪除、
修改的動作。
 Servlet的會創造一個名為Profiles的Entity，
去儲存聯絡人資料，他的屬性有SID、Name、
Address、Phone。
 在Jsp的部分，會透過Query這個物件的建構
子設定所要查詢的實體名稱，再透過
DatastoreService的Papere方法去執行這個
Query中的指令，取得回傳PapreQuery物件。
 透過PapreQuery物件的asList方法可以設定
我們所要列出Query執行後所要列出符合條
件的實體成員，這裡是用預設值。
<%
DatastoreService datastore =
DatastoreServiceFactory.getDatastoreService();
Query query = new Query("Profiles");
List<Entity> result =
datastore.prepare(query).asList(FetchOptions.Builder.with
Defaults());
//利用for each把result中的entity提取出來
for(Entity entity:result){
%>
<tr><%--每一個entity以表格的一列顯示出來--%>
<td><%=entity.getProperty("SID") %></td><%--取得entity
各屬性值，顯示於表格各欄--%>
<td><%=entity.getProperty("Name") %></td><%--取得entity
各屬性值，顯示於表格各欄--%>
<td><%=entity.getProperty("Address") %></td><%--取得
entity各屬性值，顯示於表格各欄--%>
<td><%=entity.getProperty("Phone") %></td><%--取得
entity各屬性值，顯示於表格各欄--%>
</tr>
<%
}
%>
2015/5/24國立聯合大學 資工程系 9

10.  Servlet 的部分會透過request參數取得表單
的回傳的聯絡人資料。
 透過DatastoreServiceFactory類別的靜態方
法getDatastoreService()，可產生
DatastoreService的物件，透過這物件的方
法我們可以去存取DataStore，做新增、刪
除、修改的動作。
 在這裡會透過建構子產生一個名為Profiles的
Entity(建構子除了能設定名字也能設定主鍵，
這裡不設定主鍵，使用預設值讓DataStore
自動產生主鍵)
package nuu.csie.ai405;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import
com.google.appengine.api.datastore.DatastoreService
;
import
com.google.appengine.api.datastore.DatastoreService
Factory;
import com.google.appengine.api.datastore.Entity;
public class CreateRecordServlet extends HttpServlet
{
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String sid=request.getParameter("sid");
String name=request.getParameter("name");
String
address=request.getParameter("address");
String phone=request.getParameter("phone");
DatastoreService datastore =
DatastoreServiceFactory.getDatastoreService();
Entity entity = new Entity("Profiles");//新增一
個名為Profiles的實體
entity.setProperty("SID", sid);//將request取得
的sid參數設定到SID屬性
entity.setProperty("Name", name);//將request取
得的Name參數設定到Name屬性
entity.setProperty("Address", address);//將
2015/5/24國立聯合大學 資工程系 10

11.  表單這邊設action為/CreateRecord.do，
method為POST，表示將表單POST到這個
路徑映射(Mapping)的CreateRecordServlet。
 Servlet可在doPost方法中透過requst取得
表單POST過來的數值。
<!--表單在按下新增後會將數值post到/CreateRecord.doURL向
CreateRecordServlet發處請求，儲存新一筆的聯絡人資料 -->
<p>新增資料</p>
<form action="/CreateRecord.do" method="Post">
<p>學號</p>
<input name="sid" type="text" placeholder="請輸入學號"/>
<p>姓名</p>
<input name="name" type="text" placeholder="請輸入姓名"/>
<p>地址</p>
<input name="address" type="text" placeholder="請輸入地址
"/>
<p>連絡電話</p>
<input name="phone" type="text" placeholder="請輸入連絡電話
"/>
<input type="submit" value="新增"/>
</form>
2015/5/24國立聯合大學 資工程系 11

12.  Web.xml用來設定這個網站的相關設定。
 可以在這邊設定所要使用的Servlet所映射
(Mapping)的路徑。
 並可以設定要做為首頁顯示的page。
<?xml version="1.0" encoding="utf-8"?>
<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.
xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>CreateRecord</servlet-name>
<servlet-class>nuu.csie.ai405.CreateRecordServlet</servle
t-class>
</servlet>
<servlet-mapping>
<servlet-name>CreateRecord</servlet-name>
<url-pattern>/CreateRecord.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
2015/5/24國立聯合大學 資工程系 12

13.  原始碼
◦ https://github.com/JeffZeng/Sample03.git
 Demo
◦ http://cloudcomputetest03.appspot.com
2015/5/24國立聯合大學 資工程系 13