基本JSP網站及發行到Azure


本篇教學主要是讓有基礎java和html概念的人可以快速上手jsp,並且教大家如何架設到Azure讓大家都能看見。

 

在服用這篇教學以前請先安裝好環境

 

  1. Jdk 1.7或8版
  2. Tomcat 7.x版
  3. Eclipse java ee版

 

首先讓我們先打開eclipse,這是我們要用來開發網頁用的IDE,它打開會長這樣。

 

請按右上方的Workbench就可以來到之後主要要使用的介面,接下來點選下方bar的server,右鍵選擇new裡面的server,等等我們的網頁就要運行在這個server上面。

選擇tomcat7.0的server

然後按next,之後會看到一個空白的欄位,點選他右邊的Browse,然後選取安裝好的tomcat的跟目錄,並按下確定,然後按下finish。

接著server就會被創建好在底下,接著點擊我們的server,我們有port要改,不然由於他預設的port可能是我們目前已經使用的,不改會發生錯誤。

 

顯示出的介面中有兩個地方要改,分別是畫面中port 8008和8012的地方,將它改成8009或8013之類的,簡單來說就是不要跟原本的一樣,但要注意不可使用8080,改好之後記得儲存。

接著要改第二個地方,點擊左邊Project Explorer中Servers裡面的tomcat v 7.0裡面的server.xml

中樣的介面就會發生改變,然後點選中間的Source。

我們要把圖中113行到115行的註解拿掉,並且把port8080改成別的,因為這個port也被使用過了

完成之後對我們的server按右鍵,點選start。

之後就可以看到我們的server啟動了。

接下來我們就要來新增網頁專案,在左邊Project Explorer點選右鍵,選擇new->project。

然後選擇網頁裡面的動態網頁專案,並按next。

接著打上自己的專案名稱,並按下finish。

接著就可以看到我們的專案被創建在左邊的Project Explorer,然後把我們的專案點開來,對著我們的WebContent按右鍵,選擇new->jsp file,要準備來撰寫寫網頁了。

然後將我們的網頁取名叫index,接著按下finish。

接著中間就會出現一些預設的html1標籤語法,裡面有行字叫insert title here

將他改為自己的title,然後再body裡面打上一行字,例如hello world,我們要測試網頁能不能在tomcat上正常運行。

接著對左邊的專案名稱點擊右鍵,選擇Run As->Run on Server

然後按下finish,若有彈出視窗要求重啟sever點擊ok。

就可以看到我們的網頁運行在tomcat上了。

接下來我會用一個範例來說明如何在html裡面運用java以及如何取得checkbox、radiobox等輸入欄位中的值,原始碼在這邊,這個範例非常的簡單,只是計算網頁瀏覽時間、印出使用者輸入的帳密和checkbox勾選的欄位、計算使用者在底下的問答題中對了幾題而已。

 

<%@ page language="java" contentType="text/html; charset=UTF-8″

pageEncoding="UTF-8″%>

<!doctype html>

<html>

<head>

<meta charset="UTF-8″>

<title>Test</title>

</head>

 

<body>

 

 

<form id="form1″ name="form1″ method="post" action="index.jsp">

<p>

<input type="hidden" name="time" value="<%= new java.util.Date().getTime()%>">

<label for="textfield">帳號:</label>

<input type="text" name="textfield" id="textfield">

</p>

<p>

<label for="textfield2″>密碼:</label>

<input type="text" name="textfield2″ id="textfield2″>

</p>

 

<p>

<input type="checkbox" name="checkbox" id="checkbox" value="1″>1

<input type="checkbox" name="checkbox" id="checkbox1″ value="2″>2

<input type="checkbox" name="checkbox" id="checkbox2″ value="3″>3

<input type="checkbox" name="checkbox" id="checkbox3″ value="4″>4

<input type="checkbox" name="checkbox" id="checkbox4″ value="5″>5

</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;

<input type="submit" name="submit" id="submit" value="送出">

</p>

<p>問1+4等於

<p>

<input type="radio" name="radio0″ id="radio" value="0″>

1

<input type="radio" name="radio0″ id="radio1″ value="0″>

3

<input type="radio" name="radio0″ id="radio2″ value="1″>

5

<input type="radio" name="radio0″ id="radio3″ value="0″>

7

 

</p>

 

<p>問美國首都是哪裡

<p>

<input type="radio" name="radio1″ id="radio01″ value="0″>

台東

<input type="radio" name="radio1″ id="radio11″ value="0″>

台南

<input type="radio" name="radio1″ id="radio102″ value="0″>

台西

<input type="radio" name="radio1″ id="radio31″ value="0″>

台北

<input type="radio" name="radio1″ id="radio13″ value="1″>

華盛頓

</p>

 

<p>巴拿馬運河連接哪兩大洋

<p>

<input type="radio" name="radio2″ id="radio132″ value="1″>

大西洋與太平洋

<input type="radio" name="radio2″ id="radio12″ value="0″>

印度洋與林存洋

 

</p>

 

</form>

<%

if(request.getParameter(“submit")!=null){

out.print(request.getParameter(“textfield")+"<p>");

out.print(request.getParameter(“textfield2″)+"<p>");

String s1=request.getParameter(“radio0″);

String[]s2=request.getParameterValues(“checkbox");

 

for(int i=0;i<s2.length;i++){

out.print(“<font color=blue>"+s2[i]+"</font>"+"<p>");

}

for(int i=1;i<4;i++){

String s5=request.getParameter(“radio"+String.valueOf(i-1));

if(s5.equals(“1″)){

out.print(“你第"+i+"題");

out.print(“<font color=green>"+"答對了"+"</font>"+"<p>");

}else{

out.print(“你第"+i+"題");

out.print(“<font color=red>"+"答錯了"+"</font>"+"<p>");

}

}

long t=new java.util.Date().getTime()-Long.valueOf(request.getParameter(“time"));

out.print(“你花了"+(t/1000)+"秒");

}

%>

<p>&nbsp;</p>

<p>&nbsp;</p>

 

</body>

</html>

 

 

Code解說:

首先,想要在jsp裡面打java的話它必須包在<%%>裡面且如果使用<%=”字串”%>的話它就會將字串印到html code裡面,只有在這裡面你才能打java的code。再來想取得html表單中的值的話必須先判斷它是什麼值,是單一的值(ex:radiobox)還是複數的值(ex:複選的下拉式選單(下拉式選單可單選可複選)、checkbox),若是單一的值只要像這行code。

 

Strings1=request.getParameter(“radio0″);

 

利用request.getParameter(“想取的欄位的name");來取得,所謂的name指的是像底下這行標籤語法的name欄位

 

<input type="radio" name="radio1" id="radio13″ value="1″>

 

若是要存取複數值得就要利用request.getParameterValues(“”),他可以將值存成陣列,像下方的例子

 

String[]s2=request.getParameterValues(“checkbox");

 

若沒有按下送出按鈕送出值,但試圖利用request來取值的話就會取到null,這時候如果拿值來進行一些運用很有可能會發生錯誤,所以要利用下列的例子來判斷是否有送出值。

 

if(request.getParameter(“submit")!=null){

}

 

request.getParameter(“submit")中的sumbit為底下這個標籤語法的name,當if取得名為sumbit的value不為null時則代表已經送出表單,可以開始進行表單中值的取用。

 

<input type="submit" name="submit" id="submit" value="送出">

 

若要將值印在網頁上則可以利用下面這行程式碼。

 

out.print(“<font color=green>"+"答對了"+"</font>"+"<p>");

 

在out.print()小誇號中的字串會被直接輸出到html code裡面 可以直接被網頁讀取到,像這行就會在html中印出一行font標籤其顏色為綠色並顯示答對了。

 

若想判斷使用者的答題狀況可以利用表單中傳來的值,在radiobox裡面我將對的選項的值設為1,錯的設為0,這樣就可以判斷其答題的對錯

 

<input type="radio" name="radio2″ id="radio132″ value="1″>

大西洋與太平洋

<input type="radio" name="radio2″ id="radio12″ value="0″>

印度洋與林存洋

 

 

最後教大家該怎麼判斷瀏覽時間,在表單中我使用hidden隱藏了一個欄位

 

<input type="hidden" name="time" value="<%= new java.util.Date().getTime()%>">

 

在使用者一開始進入網頁的時候這個欄位就利用

<%= new java.util.Date().getTime()%>取得了進入的時間字串,並且拿這個時間作為value,而下列的code則會在表單送出後啟動,利用現在的時間減去進來的時間就可以得出瀏覽的時間。

 

long t=new java.util.Date().getTime()-Long.valueOf(request.getParameter(“time"));

 

最後要來教大家怎麼上傳到Azure,首先必須要登入Azure來到儀表板,我們要來建立架網站要用的伺服器,點選左方的新增,然後使用裡面的搜尋搜尋tomcat,然後選擇阿帕契 tomcat 8。

然後再次點選阿帕契 tomcat 8

 

 

點選建立

 

 

接著為自己的專案名稱取名,然後將資源群組選擇為default,接著點選建立。

 

 

等部屬完成後點選左邊的應用程式服務,在裡面的找到自己剛剛部屬的服務並下載發行檔。

 

 

下載好後利用記事本打開發行檔,並打開檔案總管。

 

 

然後去發行檔複製主機位置,主機位置為publishMethod="FTP"後的publishUrl的值,並貼在檔案總管快速存取的位置,並覆蓋掉快存取在按Enter

 

 

接著再去複製後方的userName和userPWD,貼到帳號及密碼欄位後按下登入。

 

 

就會出現這樣的畫面

 

 

接著按照這個順序進到Root: ->bin->apache-tomcat-8.0.30->webapps->ROOT

 

來到Root後把裡面的index.jsp刪掉並將將剛剛撰寫的index.jsp直接丟進來。

 

 

然後關閉檔案總管,接著到Azure重新啟動我們的服務。

 

 

最後點選服務中的Url來檢視我們剛剛上傳上去的網頁。

 

 

本篇教學就到此結束,謝謝大家的觀看。

 

 

 

撰寫人:第十屆MSP技術組 洪麒鈞

 


Comments (0)

Skip to main content