---
title: 網際服務軟體工程
tags: java, jsp, servlet, JavaEE_architecture
categories: java, jsp, servlet, JavaEE_architecture
---
# Web-Based Software Engineering (網際服務軟體工程)
[toc]
## 3/06
### 課後練習
* tomcat 安裝
* 附件在 tomcat 執行
#### tomcat 安裝 [(reference)](http://tonytsai1984.blogspot.com/2016/09/mac-os-x-tomcat-9.html)
1. 下載 [tomcat (version : 9.0.31)](https://tomcat.apache.org/download-90.cgi)
2. 到 tomcat 路徑下
```bash
cd bin
sudo chmod +x *.sh #設定bin底下所有的 script 可被執行的權限
bash startup.sh #開啟 tomcat 服務
#sh startup.sh 也可以
```
3. 開啟後在在網址上打上 http://localhost:8080
( 127.0.0.1:8080 )
出現湯姆貓，就成功囉！
4. 關閉 tomcat 服務
```bash
bash shutdown.sh #關閉 tomcat 服務
# sh shutdown.sh 也可以
```
#### 附件在 tomcat 執行
1. 將附件放到此路徑下 `Path : apache-tomcat-9.0.31 > webapps` 。
註：可以放.war檔（他會自己解壓縮） 或者是 解壓縮檔案。.zip不行
3. 到瀏覽器輸入網址 `http://localhost:8080/附件名稱` 就完成了。
## 3/13
### JAVAEE專案目錄架構
當前資料夾內容
>compile servlet program
>`javac -d . -classpath .:servlet-api.jar *.java`
> or `javac -d . -cp .:servlet-api.jar *.java`
>將 compile 完的 package 放在 `WEB_INF` → `classes` 底下
>result.jsp ＃結果
>form.html (index.html) ＃進入頁面，表單做 action
>web.xml ＃組態設定檔，生成request response thread物件，放在跟classes同個路徑下
### Eclipse建立專案
new > dynamic web Project
要勾generate web.xml
src底下
new package > com.example.model > aaaa.java
new package > com.example.web > bbbb.java (會有紅字)
這時要
build path要放tomcat (add library)
preference server runtime env > 加入tomcat資料夾
form.html .jsp 放在 WebContent 目錄下
run as > run on server
### note
jsp servlet POJO
container
誰提供的？在哪裡？ tomcat (tomcat = container = web server = apache)
MIME Type
### HW1 (1-1 , 1-2)
#### 1-1
* JavaEE 架構，簡單的改 jsp 裡的東西
#### 1-2
* JavaEE 架構
>servlet → Controller
.jsp → View
POJO → Model
* 需要 servlet-api.jar 才能編譯 servlet 的 java檔
遇到一個很蠢的問題，編譯成功後放到 tomcat 裡忘記把 package 放到`WEN-INF` → `classes` 中，難怪打開網頁一直404
* 還有記得資料夾命名很重要，我建的 `Baseball-Quiz` 資料夾多了一個空白 `%20Baseball-Quiz` ， 很蠢。
* jsp 在抓人名的時候我使用 : 拿到的是 `yyyyy` 的 `value` 內容 (在.html裡)
```jsp
(String) request.getParameter("yyyyy")
```
而不是
```jsp
(String)request.getAttribute("xxxxx")
```
* 在 AnswerAnalysis 類別裡，比對字串回傳布林值
```java
//給回傳結果設定一個屬性，true就跑正確的jsp，false就跑答錯的jsp
request.setAttribute("styles", result);
```
## 3/20
* WBSE-程式碼範例：`FakeServletDemo.java`
>只有覆寫doGet , 所以 main 實作會用這個 function
>doPut 會在 GenericServlet 類別 service function 顯示 System.out.println("no support for the " + httpMethod + " method!");
>doPost 會在 GenericServlet 類別 doPost function 顯示 no support for the post method!
* WBSE-程式碼範例：`jar-download.war`
>可以讓 user 下載 jsoup.jar 檔
>放在 webContent 底下(也就是 webapps 目錄裡的當前資料夾底下)，就可以用 jsoup-1.10.1.jar
>但放在 WEB-INF 底下， 因為 JarFinder.java 有 @WebServlet("/jsoup.jar"),就可以用 jsoup.jar 下載
* WBSE-程式碼範例：`redirect`
>轉址 ( redirect )
```java
@WebServlet("/redirect")
public class RedirectTest extends HttpServlet{
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException{
String select = request.getParameter("select");
if (select.equals("1")) {
response.sendRedirect("test.html");
} else if (select.equals("2")) {
response.sendRedirect("sub/test.html");
} else if (select.equals("3")) {
response.sendRedirect("/test.html");
} else if (select.equals("4")) {
response.sendRedirect("https://www.youtube.com/watch?v=1bc-8iomgB4");
}
}
}
```
### eclipse 環境設定
>[JDK 11 Download](https://www.oracle.com/java/technologies/javase-jdk11-downloads.html) (LTS版本)
>Tomcat 9: (要安裝v9.0.0.Mxx，更新的版本Eclipse會無法辨識)
https://archive.apache.org/dist/tomcat/tomcat-9/v9.0.0.M27/bin/
>[Eclipse Download](https://www.eclipse.org/downloads/packages/installer)
>安裝 Eclipse IDE for **Enterprise** Java Developers
Version: 2020-03 (4.15.0)
>Eclipse要設定預設Compiler:
[Preferences]->[Java]->[Compiler]
1.8改為11
>Eclipse也要設定Tomcat Server:
[Preferences]->[Server]->[Runtime Environments]->[Add]->[Apache Tomcat v9.0]
>Servlet/JSP專案建置方式：
建立專案：
[File] -> [Web] -> [Dynamic Java Project]
>專案設定Tomcat連結：
專案右鍵選單->[Build Path]->[Configure Build Path]->[Libraries]->[Classpath]->選[Add Library]->選[Server Runtime]->[Apache Tomcat v9.0]
執行：(可用簡易MVC專案測試)
右鍵[Run As]->[Run on Server]->選[localhost] ->[Tomcat v9.0...]...
## 3/27
shopping-cart.war
### HW2_Note
* 這是一個類是智慧王的小測驗，簡單來說就是QA
1. MVC
```graphviz
digraph hierarchy {
nodesep=0.2 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Quiz->{"Quiz-form.jsp" "result-correct.js" "result-wrong.jsp" "src" "WEB-INF"}
src->{"ntou.cs.wbse"}
"WEB-INF"->{"quiz.txt" "web.xml" classes}
classes->{"ntou.cs.wbse"}
{rank=same;src "WEB-INF"}
}
```
```graphviz
digraph hierarchy {
nodesep=0.2 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
"ntou.cs.wbse"->{model controller listener}
model->{"Quiz.java" "QuizSelector.java"}
controller->{"QuizServlet.java" "SolutionServlet.java"}
listener->{"QuizServletContextListener.java"}
}
```
```graphviz
digraph hierarchy {
nodesep=0.2 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
"ntou.cs.wbse"->{model controller listener}
model->{"Quiz.class" "QuizSelector.class"}
controller->{"QuizServlet.class" "SolutionServlet.class"}
listener->{"QuizServletContextListener.class"}
}
```
* 因為作業沒有特別規定，所以這次兩個 servlet 都是用 doGet (參數會顯示在網址上)
* 文字顯示亂碼問題
[request和response的setCharacterEncoding()方法](https://blog.csdn.net/kong_lev/article/details/73071198)
```java
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("Access-Control-Allow-Origin","*");
response.setContentType("text/html;charset=UTF-8");
```
* ArrayList宣告
```java
ArrayList<String> option = new ArrayList();
```
## 4/10
### cookie
* HTTP Cookie : Cookie 通常被用來**保持使用者的登入狀態**——如果兩次請求都來自相同的瀏覽器。
* 程式碼範例：cookie-example
1. context 跟 session 的差別
2. 要看 .jsp 可以在webapp裡的root放入檔案，編譯之後的樣子在湯姆貓裡的work>...>ROOT>...裡找到（變成.java檔）
3. jsp
* <%! %> : 宣告變數，他會把宣告的變數放在method外，變成global變數。（所以counter2.jsp才能一直加上去）
* <%= %> : 就是 out.print 的意思
## 4/17
### 範例：dog-plus
* javabean規範
* EL 可以拿到多層的成員
### 範例：el-test
有投影片上的題目答案(ex:Unit8 P.33)
[Unit8 P.33 有個Integer宣告，其實跟int不一樣唷](https://kknews.cc/code/gmzv5rm.html)
### 範例：include-test
大網頁包小網頁：contact.jsp 包 header.jsp
```jsp
${initParam.mainEmail} ＃從web.xml拿到的
```
```xml
<context-param>
<param-name>mainEmail</param-name>
<param-value>albert@ntou.edu.tw</param-value>
</context-param>
```
contact-v2.jsp使用`<%@ include file="header.jsp"%>`把header.jsp叫進來，可是這樣header.jsp只會讀到圖片，另外一個`${param.subTitle}`卻沒有辦法得到參數。
### JSTL 09 PTT
#### 範例 ： jstl-test
1. <%@ taglib prefix="c" uri="XXX"%>
taglib 通常tag名稱都叫c
2. for 概念 ，巢狀概念
3. 在lib加入.jar檔，然後add to build path
* if
* 多重if，choose-when-otherwise
* <:set> tag
### 範例 ： exception(要在瀏覽器上才會顯示)
1. page isErrorPage="true"
2. page errorPage="errorPage.jsp"
* 也可在web.xml上改
```xml
<eror page>
<exception-type>xxxx</exception-type>
<location>/yyyy.jsp</location>
</eror page>
```
也可以用 `<error-code>404</error-code>`
### 範例 ： exception notBadPage.jsp
* <c:catch> tag 做例外處理
## 4/24
google meet 申請 ， 要用學校帳號。
hw3：
用listener讀取資料，將資料存到servletContext
用session紀錄
更新資料要靠前端
<<jsp:include>>將大頁面嵌入小頁面
申請api key
### 個人專案 (6/19)
操作概念（系統概念說明）：我要把這個系統，在什麼情境下可以使用，說成故事。
scrum風格之user story ： 功能規劃
必用：Servlet or jsp or springBoot 三個選一
要做投影片，heroku，github
可結合webAPI
### 分組報告 (6/12)
## 5/01
google meet
[推薦api](https://www.computersciencezone.org/50-most-useful-apis-for-developers/)
spring 是比較複雜的web框架
postman 工具：試著下請求
STS IDE: Spring
spring tools 4 for ec;ipse
[javatpoint spring-boot tutorial](https://www.javatpoint.com/spring-boot-tutorial)
## 5/08
course
web API
[spotify](https://github.com/thelinmichael/spotify-web-api-java#Examples)
https://github.com/thelinmichael/spotify-web-api-java
https://developer.spotify.com/documentation/web-api/reference-beta/#category-search
https://rapidapi.com/collection/list-of-free-apis
https://www.computersciencezone.org/50-most-useful-apis-for-developers/
https://developers.google.com/places/web-service/intro?hl=zh-tw
## 5/15
google meet
- atlas
admin set 帳密
IP 0.0.0.0/0
- connect
java version : 3.4 or later
### 範例
- crud
- mask crud mongodb atlas
### HW4
mask crud mongodb atlas > maskHandlerTest
maskHandler : csv轉json再轉成物件 （json再轉成物件，為了可以接回springboot)
針對note（備註）做新增刪除修改
JWT (json web token)
## 5/22
course
### SCRUM
### user interface design
要有 functional map and wireframe
ui : http://ui-patterns.com/patterns
css : csslayout.io
### CRUD - put
全部蓋掉
### 中央氣象局-資料開放平臺
api-key : CWB-CCC4473B-8F1B-4473-B817-5E3DC8C279EF
## 5/29
course
- neo4j
## 6/05
course
## 專案筆記
[unirest lib](https://www.cnblogs.com/zhangshihai1232/articles/6062507.html)
[openweathermap](https://openweathermap.org/)
文件資料內容 : https://openweathermap.org/current
[rapidapi open-weather-map](https://rapidapi.com/community/api/open-weather-map?endpoint=53aa6041e4b00287471a2b62)
天氣json下載檔
https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-CCC4473B-8F1B-4473-B817-5E3DC8C279EF&downloadType=WEB&format=JSON
天氣風險管理
http://premium-weather-api-reference.s3-website-us-west-2.amazonaws.com/#%E5%8D%B3%E6%99%82%E8%A7%80%E6%B8%AC%E5%A4%A9%E6%B0%A3%E7%B8%A3%E5%B8%82%E9%84%89%E9%8E%AE%E8%B3%87%E6%96%99
景點 - 觀光資訊資料庫
https://gis.taiwan.net.tw/XMLReleaseALL_public/scenic_spot_C_f.json
活動 - 觀光資訊資料庫
http://ipgod.nchc.org.tw/dataset/0fff5c68-414e-48f6-97b3-0b3ce4ee0fc8/resource/5e20ecee-b1f2-4988-a657-0c64bb16439d/download/315080000h-000002-001.json
jsonPath
https://www.itread01.com/content/1543681863.html
### 畫台灣
https://letswrite.tw/d3-vue-taiwan-map/
https://www.youtube.com/watch?v=eHrGB5EHtF4
### 遭遇問題
http://syuanme.blogspot.com/2015/08/eclipse-jsp-superclass.html
- 部署heroku
- java 版本要是1.8
Sign in with Wallet
Connect another wallet