2017年12月4日 星期一

HTML CSS (3) - CSS排版設定

3-1 移除browser預設樣式




















default瀏覽器會設置樣式，如上圖的margin
若欲消除預設的樣式設定可在自訂link css reference內放入

body {
  margin: 0;
}

但也會有其他樣式會有css預設設定，因此可以使用此網頁將樣式貼入css
注意：css是從前讀到後面（意即後面的設定會覆蓋掉前面的設定）

閱讀更多 »
張貼者： 於 沒有留言:

HTML CSS (2) - CSS介紹

2-1 CSS介紹及用途

html設計出的網頁文字顏色等能夠改變，設定樣式。
  1. 新增css資料夾
  2. 新增副檔名為css的檔案，如style.css
  3. 在html內的header中新增<link> tag
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
  • rel: 定義該檔案和連結檔案的相對關係，css則需要設定為stylesheet
  • type:連結檔案的格式
  • href: 相對路徑的css檔
CSS可針對html標籤指定樣式 （注意要有中括號，內為屬性＋冒號＋value＋分號）
  • 針對h2標籤內的字體顏色做變化： color
  • 文字大小： font-size
1
2
3
4
h2{
  color: pink;
  font-size: 40px;
}

閱讀更多 »
張貼者： 於 沒有留言:

2017年12月3日 星期日

HTML CSS (1) - 環境及常用標籤

1-1 準備工作

下載以下兩個工具
  1. Sublime Text3
  2. 自動排版套件
  3. 安裝sublime package -> 安裝後command+shift+p可搜尋安裝Emmet
測試是否會自動產生html tag
  1. 將儲存格式選定為.html
  2. 輸入<html
  3. 按下tab
簡單建立一網頁
  1. 建立一資料夾，名為project
  2. 開啟sublime輸入test
  3. 存檔為html format，命名為index.html
  4. 至資料夾開啟此html

閱讀更多 »
張貼者： 於 沒有留言:

JSP-Servlet (4) - Container

Container:
  • Tomcat就是一個實作Container的範例
  • Container開機的時候，載入你寫的Servlet class並初始化
  • 當Apache(Web Server)收到針對動態網頁的request時，將會交由負責此servlet的Container處理
  • Container會將HttpServletRequest object & HttpServletResponse object交給Servlet thread
  • 呼叫執行Servlet的service()內doGet()或是doPost()的method(基於HTTP Request的method)
- HTTP server是用來服務HTTP
- Apache Tomcat是用來deploy Java Servlet, JSP。當Java project build成為WAR檔，就可以直接將此檔丟到Tomcat以便deploy。是用來服務Servlet&JSP Server

使用Container的五大項優點(因為以下的事項，更能夠集中精神專注於商業邏輯的開發)
  1. 與Web Server溝通取得request（因此不需要實作Listener, stream, ServerSocket...)
  2. 控制Servlet的生命週期，initialization, call method,... 適時的將instance GB。透過Container 則不需要擔心資源管理
  3. 當多個request進入時，Container會自行建立thread來處理此請求，當此servlet執行為service() method時，thread就會結束。但synchronize的事情還是得自己處理
  4. 可調整web.xml來設定哪些群組能夠讀取哪些網頁，是否需要login機制，welcome html page等寫在內，可以不透過修改Java程式達到這些目的
  5. 能夠將JSP轉成真實的Java檔案
Container處理HTTP request steps
  1. 使用者點擊非靜態網頁的超連結
  2. container收到後，建立HttpServletRequest object & HttpServletResponse object
  3. 根據web.xml之URL及真實Servlet位置對應找出此Servlet後，會將上述object交由Servlet thread
  4. 呼叫Servlet內的service()，且根據request method，service()執行呼叫doGet()或是doPost()
  5. thread產生的動態頁面，將會放入 HttpServletResponse object
  6. 因container保有此HttpServletResponse object的reference，所以能夠將此response轉換成HTTP response，接著刪除HttpServletRequest object & HttpServletResponse object
以下Servlet範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.*;
import javax.servlet.http.*;
public class Ch1Servlet extends HttpServlet{
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  PrintWriter writer = resp.getWriter();
  Date today = new Date();
  writer.println("<html>"+
  "<body>" + "<h1 align=center>HF's Chapter Servlet</h1>"
    + "<br>" + today + "</body>" + "</html>");
 }
}

  • Line 7: Servlet將會extends HttpServlet
  • Line 9: Servlet會收到container建立的HttpServletRequest req, HttpServletResponse resp
  • Line 10: 可使用resp內的getWriter()取得將HTML寫到回應object上的PrintWriter




service()是由GenericServlet繼承來的
張貼者： 於 沒有留言:

2017年12月2日 星期六

JSP-Servlet (3) - Servlet & Deployment Descriptor產生動態網頁

Web Server(如Apache)的
  • 可以做：
  1. client 請求網頁，找到該靜態網頁，不會做計算
  2. 原封不動地拿出此靜態網頁，添加header
  3. 傳送回client(每個client看到的東西都一樣)
  • 不能做：（但是可以找到能夠處理此request的application(如Tomcat))
  1. 產生動態網頁
  2. 將資料存在server
Servlet Java檔案
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.*;
import javax.servlet.http.*;
public class Ch1Servlet extends HttpServlet{
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  PrintWriter writer = resp.getWriter();
  Date today = new Date();
  writer.println("<html>"+
  "<body>" + "<h1 align=center>HF's Chapter Servlet</h1>"
    + "<br>" + today + "</body>" + "</html>");
 }
}

Servlet Deployment Descriptor(web.xml)檔，部署描述檔
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 id="WebApp_ID" version="3.1">
 <servlet>
  <servlet-name>Ch1 Servlet</servlet-name>
  <servlet-class>Ch1Servlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>Ch1 Servlet</servlet-name>
  <url-pattern>/serv1</url-pattern>
 </servlet-mapping>
</web-app>
  • servlet-class: 真實，完整的servlet class名字，但不含.class (file path name)
  • servlet-name: alias (deploy name)
  • url-pattern: 使用者連線時請求的名稱(public URL name)
以上的命名目的為安全性及可維護性
執行結果：















Ref:
Eclipse 安裝tomcat:
Eclipse下使用tomcat的位置當作deploy位置
張貼者： 於 沒有留言:

JSP-Servlet (2) - HTML & HTTP

HTML & HTTP差異：
  • HTML: (HyperText Markup Language 超文字標記語言) 瀏覽器必須了解的語言。瀏覽器是一種知道如何和伺服器溝通的軟體（如Safari, Mozilla)。當伺服器回應請求的時候，通常會傳給瀏覽器一組以HTML寫成的指令，由瀏覽器解譯HTML後將內容呈現給使用者。但有時候較舊版的瀏覽器可能會不了解使用新版HTML語法所寫的網頁內容
  • HTTP: (HyperText Transport Language 超文字傳輸協定) client及server之間的對話大多是HTTP(以此溝通)，此協定支援簡單的request&response。基本上web說的語言就是HTTP。web server透過HTTP將HTML送給client。因此其實HTTP回應內包含HTML
又，HTTP執行在TCP/IP上。
- TCP負責將資料完整地從一個node傳送到另一個node。在運送過程有可能會被分割成幾個部分。但最後能保有完整性。
- IP是將封包從一台主機順利繞道一台主機的底層網路協定。
HTTP是支援web特定功能的網路協定。但依賴TCP/IP取得完整請求與回應

HTTP request關鍵元素：
  1. HTTP method
  2. URL
  3. Form parameters
HTTP response關鍵元素：
  1. Status Code
  2. Content-type
  3. Content
HTTP method:
  1. GET: 簡單的請求。如，要求server取出資源(HTML, JPEG file, PDF file等)。但也可以傳送（一點）資源

    • 傳送字元數量有限，取決於server(tomcat在conf/server.xml內可更改maxHttpHeaderSize="65536"參數)，因此如果client在search bar輸入很長的資料，GET可能會無法運作
    • 安全性問題，GET會將資量附加在URL後面，出現在瀏覽器的URL欄位中。如帳號密碼等敏感資料
    • 如果使用POST代替GET，就不能把Form submission的頁面加入我的最愛當成書籤
    • 下例是一個GET的範例，使用?將路徑與參數隔開，參數間以&連結。兩個部分加起來得到的字串就是HTTP request所傳送的完整URL
      • http://ecshweb.pchome.com.tw/search/v3.3/?q=花茶%20&scope=all&sortParm=rnk&sortOrder=dc&cateId=DBAJ11

  2. POST: 像是Get的加強版，如了可以取出server資源，以能夠傳送使用者的資料。
    • 設計為傳送複雜請求
    • 使用者在網頁上填的資料(如表單等)，就會被加到message body (或稱為payload)，資料量可以很大
  3. HEAD
  4. TRACE
  5. PUT
  6. DELETE
  7. OPTIONS
  8. CONNECT

MIME Type：
response header內的content type的值，就是MIME Type，他告知接收瀏覽器即將要接收怎麼樣的資料，好讓瀏覽器知道要怎麼展示


此值對應了request內header的Accept欄位（瀏覽器可以接受哪一種格式）

網頁傳送步驟：
  1. 使用者在search bar輸入URL
  2. 瀏覽器建立HTTP GET request
  3. 瀏覽器將此HTTP GET 請求傳送至server
  4. server根據某種對應關係找到該頁面
  5. server產生HTTP response
  6. 將其頁面傳回至client
  7. 瀏覽器收到後，根據HTTP內的HTML解譯，並將結果呈現給使用者
URL:(Uniform Resource Locator)
如下範例：
https://www.wangsteak.com.tw:443/advice/wang/menu.html
  • https: (告訴server這是哪一種protocal，此例為https)
  • www.wangsteak.com.tw: server, 實體server的獨特名字，對應到IP，可以直接使用IP代替server，但通常domain name比較好記
  • 443: port。server的很多應用程式會以port區隔。http預設是80
    • 一台server可以有0-65535，共65536個 (0~1023 port已經保留給一些知名的服務)
    • FTP: 21
    • Telnet: 23
    • POP3: 110
    • SMTP: 25
    • TIME server: 37
  • advice/wang: path，server被請求的網路位置
  • menu.html: resource，請求的檔案。假如被省略大部分會預設加上index.html

張貼者： 於 沒有留言:

JSP-Servlet (1) - Mac下安裝Tomcat

註：須先確認安裝Java且設定完成環境變數$JAVA_HOME
  1. Tomcat官網下載，拉到最下面可以看到Binary Distributions，選擇合適的版本，若不確定則選擇Core發行的版本
  2. 解壓縮後會得到一個apache-tomcat-[version] 文件夾
  3. 將整包資料夾放入想要安裝tomcat的位置，且可將apache-tomcat-[version] 直接改為tomcat
  4. 這個安裝tomcat的位置，就是CATALINA_HOME
  5. 開啟Terminal，設定環境變數
    6. vim ~/.bash_profile
  6. 在檔案內新增一行 (~/Document/tomcat須代換為安裝tomcat的位置）
    7. export CATALINA_HOME=~/Document/tomcat
  7. 執行source重新讀取bash_profile
    8. source ~/.bash_profile
  8. 執行echo確認環境變數存在
    9. echo $CATALINA_HOME
  9. 啟動tomcat，至~/Document/tomcat/bin執行startup.sh(~/Document/tomcat須代換為安裝tomcat的位置）
    10. sh startup.sh
若安裝成功，至 http://localhost:8080/ 可看到Tomcat歡迎頁面。

張貼者： 於 沒有留言:
訂閱： 文章 (Atom)