【Webエンジニア】Webアプリ開発入門講座-実装① 画面表示をしてみよう
みなさんこんにちは！
「気軽×楽しく×本格的」
がモットーのエンジニア教育、スクータムでございます。
さて、少々お待たせしてすみません。
Webアプリ開発入門講座の続きでございます。
大体環境構築は終了したので、今回から少しずつ、
実装を進めてまいります。
前回のおさらい
Eclipseと、
dockerを入れました。
今回やること
Webサーバーを起動し、画面を表示してみましょう。
以下のような感じの画面を表示します。
JSPを書こう
まずは、かんたんなJSPを利用し、画面を表示しましょう。
(HTMLにJavaのコードを埋め込んだもの)
ここからの実装工程は、私のメモ書きをベタ書きしています。
ソースコードも見たい方は、直接連絡をください。
GitHunにあるリポジトリに招待します。
なお、動的WebプロジェクトはEclipseのインストール時に一緒に行っているものとします。
わからなければ、ご連絡いただければと思います。
概要
JSPをブラウザ上でHTMLとして表示するまでのセットアップを行う。
Eclipseにて
新規で動的プロジェクトをつくると、私のバージョンでは、
src>main>webapp
というのができる。
こちらには、HTML/CSS/JavaScriptなど、画面表示に必要なファイル類を配置する。
まずは
sample.jspを作り、配置してみよう。
src > main > webappの直下におく。
Eclipseにて新規作成すれば、ある程度の雛形は勝手に作ってくれる。
サーバーにプロジェクトを反映させる
動的Webプロジェクトの作成 - IT入門書籍 スッキリシリーズ
まずは、動的WebプロジェクトをTomcatに反映させる必要がある。
教科書通りにやってみよう。
サーバーを起動する
Eclipseの画面上にある、サーバーから、最初に設定したtomcatを選択する。
上記の手順で動的プロジェクトは反映しているはずなので、
サーバーの起動を行う。
右クリックで、開始 があるので選択する。
Webブラウザ(Chromeとか)で、
http://localhost:8080/example/sample.jsp
を開く。
そこで、自分の作ったJSP通りの画面が表示されれば成功。
実際のJSPファイル
こんなファイルを作っています。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webアプリの雛形</title>
</head>
<body>
<button type="submit">残高照会</button>
<form>
<label for="withdraw-box">
引き出す金額
<input type="text" name="withdraw" id="withdraw-box">
</label>
<button type="submit">引き出す</button>
</form>
<form>
<label for="deposit-box">
預ける金額
<input type="text" name="deposit" id="deposit-box">
</label>
<button type="submit">預ける</button>
</form>
</body>
</html>まとめ
Eclipseをフル活用し、サーバサイドJavaによる環境を一気に作りました。
とりあえず、今回で画面を簡単に表示するところまでを確認できました。
次回からは、サーバサイドのロジックを少しずつ書いていこうと思います。
エンジニアメンターを受け付けています！
・開発の学習が行き詰まってる…
・ポートフォリオ構築が大変…
・キャリアの相談先がいない…
こんなお悩みを持っている方はいませんか？
現役のエンジニアがメンタリングいたします！
・先着4名
・2023/12/31まで無料
でございます！
ご検討ください！
お問い合わせは、
・こちらのNote
・公式HP
https://tecedu.hp.peraichi.com/
まで！
こちらの記事のわからないことがあれば、気軽にお聞きください。
サポートいただけますと幸いです。さらなる励みにして精進します。