個人開発メモ:java,jsp,サーブレット,GoogleAppEngine

自己学習でJAVAのサーブレット、JSPまわりの勉強メモ

GAEを動かしたときに最初に表示されるHTMLファイル

ファイル名:index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>Hello App Engine</title>
</head>

<body>
<h1>Hello App Engine!</h1>

<table>
<tr>
<td colspan="2" style="font-weight:bold;">Available Servlets:</td>
</tr>
<tr>
<td><a href='/helloappengine'>The servlet! This is DORAHEI's STUDY PAGE(HelloAppEngine.java)</a></td>
</tr>
<tr>
<td><a href='/hellojsp'>The servlet! JSP PAGE(hellojsp.jsp)</a></td>
</tr>
<tr>
<td><a href='/GoogleChartSample.html'>Go to Google Chart Sample STUDY PAGE(GoogleChartSample.html)</a></td>
</tr>
</table>
</body>
</html>

Javaによる画面生成

ファイル名:HelloAppEngine.java

10~13行目がURLになる。

package com.example;

import java.io.IOException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(
name = "HelloAppEngine",
urlPatterns = {"/helloappengine"}
)
public class HelloAppEngine extends HttpServlet {

@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException {

response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");

response.getWriter().print("Hello App Engine! Welcome DORAHEI! rn This is Kagetsurou-System(HelloAppEngin.java)");

}
}

jspによる画面生成

ファイル名:hellojsp.jsp

<%@ page import =" java. util. Calendar"%>
<%@ page import =" java. text. SimpleDateFormat"%>
<% Calendar calendar = Calendar.getInstance();
SimpleDateFormat format = new SimpleDateFormat("yyyy月MM月dd日");
String result = format.format(calendar.getTime());
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Sample jsp page(hello.jsp)</h1>
<p>これはサンプルで用意したページです。</p>
<p><%= java.util.Calendar.getInstance().getTime() %></p>
<hr>
<p>日付をフォーマットした記述</p>
<p><% out.println(result);%></p>
</body>
</html>

Googleのチャート描画javascriptを使った表示

ファイル名:GoogleChartSample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Chart</title>
</head>
<body>
<div id="target"></div>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
(function() {
'use strict';

// パッケージのロード
google.charts.load('current', {packages: ['corechart']});
// コールバックの登録
google.charts.setOnLoadCallback(drawChart);

// コールバック関数の実装
function drawChart() {
// データの準備
var data = new google.visualization.DataTable();
data.addColumn('string', 'Love');
data.addColumn('number', 'Votes');
data.addRow(['Rust', 30]);
data.addRow(['Ruby', 20]);
data.addRow(['R', 10]);

// オプションの準備
var options = {
title: 'R Chart',
width: 500,
height: 300
};

// 描画用インスタンスの生成および描画メソッドの呼び出し
var chart = new google.visualization.PieChart(document.getElementById('target'));
chart.draw(data, options);
}


})();
</script>
</body>
</html>

URLの移動遷移を行うXMLファイル

ファイル名:web.xml

<welcome-file>は[ index.html ]

jspのファイルは
<servlet-name>hellojsp</servlet-name>
<jsp-file>/hellojsp.jsp</jsp-file>

がミソ。

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>hellojsp</servlet-name>
<jsp-file>/hellojsp.jsp</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>hellojsp</servlet-name>
<url-pattern>/hellojsp</url-pattern>
</servlet-mapping>
</web-app>

ファイルの位置

ファイルの位置

右クリック→実行→サーバーで実行

起動画面(localhost)

localhost:8080をブラウザで開くと

奥越ふわっとTV 各種サイト

【YouTube】奥越ふわっとTV【脳動静脈奇形&うつ病&障害者YouTuber】

【インスタグラム】http://Instagram.com/fwat_official

【Twitter】https://twitter.com/FWaT_official

【公式ホームページ】http://fwat-official.blog.jp/

ドラヘイの関連ページ

【YouTube】ドラヘイの生活|DORAHEI’s LOOSE LIFE

ドラヘイの生活

【Discord】ドラヘイのチャットルームへ

このサイトはザ・トール(THE THOR)を使用しています。
THE THOR リンク
https://fit-theme.com/the-thor/
DORAHEI
めっちゃ、きれいにデザインできるよ!
最新情報をチェックしよう!
■広告|スポンサードリンク| Google AdSense ■