Webシステム開発講座の1つとしてまずは簡単なログイン画面をHTMLのみを利用して作成していきます。
コチラの記事は以下の人を対象としています、是非ご参考ください。
- JSPをこれから勉強しようとしている人
- これからSEを目指そうとしている（仕事内容が知りたい）
- 環境構築で悩んでいる人
コチラの記事は開発環境構築後の記事となりますので、未だ未構築の人は以下の記事をご参照ください
この記事を書いた人
モグラビト
SES5年間、社内SE3年、メーカー勤務2年の実績。
自宅でアプリ開発を実施中。
目次 非表示
そもそもWebページとは何か？
そもそもWebページについてですが、インターネット上で公開されているテキストや画像、動画などの文書で、Webブラウザで1ページずつ表示されるものを指します。Webページが組み合わさったものがWebサイトになります。
Webページについてですが、大きく2つのモノから構成されています。
HTML言語
HTML（Hyper Text Markup Language）はWebページを作るために使用されるマークアップ言語です。マークアップ言語はプログラミング言語とはまた異なり、Webサイト文章で利用される言語になります（国によって使用する言語が異なるのと同じです）
ブラウザ
ブラウザ（Webブラウザ）はHTMLで作成された「Webページ」を表示するものになります。代表的なブラウザとしては「Microsoft Edge」「Google Chorme」「Safari」などがあります。
今回のWebシステムで利用しているブラウザは「Google Chrome」を利用していきます。
ブラウザの基盤があって、その上にHTML言語が記載されていてWeb上のHPやWebシステムが成り立つ仕組みになっています。
上記の内容が理解できていない！！という方はWebシステム開発にかかわる単語・仕組みをまとめた記事を記載しましたので其方をご確認ください。
実際に書いてみよう！
それでは実際にプログラムを書いていきます。
完成図
実際の完成図は以下の通りです。
ちょっとしょぼい💦と感じたかもしれませんが、次回の講義でCSSについても記載していきますので、１歩ずつステップアップしていきましょう！！
プロジェクトの開始
プロジェクトの開始方法について記載していきます。
自分で新規にプロジェクトを立ち上げる際にも今後利用していくものなので、しっかり覚えておきましょう！
それではデスクトップのショートカットからEclipseを起動しましょう。
※ショートカットがない人はC:\pleiades\2023-12\eclipseから起動させましょう
以下の画面が表示されますのでそのまま起動します。
※複数人でプロジェクトをする、などになれば変わってきますが最初はそこまで意識しなくても大丈夫です。
それではプロジェクトを作成します。
プロジェクトは「ファイル（F）」から「新規作成」→「動的Webプロジェクト」の順番に選択します。
プロジェクト名を「AnkiSystem（正直好きな名前でよい）」と名付けましょう。
この際にAppachTomcatを設定するのを忘れずに（前回に設定したTomcatにしましょう）。もちろん後からも変更可能です。
フォルダ構成で既存のフォルダ構成を以下のものに変更しましょう（べつに現状のままでも動作は問題なくしますが、、、）
【除去】→【フォルダ】の追加で「src」を追加してください。
Webモジュール構成を以下のモノに設定しましょう。
- 「コンテンツ・ディレクトリー」の内容を「WebContent」へ
- 「web.xmlデプロイメント記述子の生成」のチェックボックスにチェックを入れる
上図の画面のように生成されていれば完成です！！
さあプログラミングをはじめましょう！
JSPファイルを作ろう！
それではプログラミングを書くためのファイルを準備しましょう。
まずは「WebContent」上で右クリックして、「新規」から「ファイル」を選択します。
※必ずWebContentにカーソルがあっていることを確認してください
ファイル名の方は「login.jsp」という風にしましょう。
完成！（この手順は見なくてもできるようになりましょう）
プログラムを書こう！
それでは実際にプログラムを書いていきます！といってもプログラミングは以下の通りなんですが、
コピー＆ペーストは絶対にしないでください。
書いている内容は同じなのでやっても意味がないじゃないか？と思われるかもしれませんが、実際に眼でみて書いてみることでだいたいの流れや書き方を理解できるのでコピペを利用せずに実際にかいてみることをお勧めします。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>>暗記沼<</title>
</head>
<body>
<div class="login-container">
<h1>ログイン</h1>
<form action="#" method="post">
<div class="form-group">
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-button">ログイン</button>
</form>
</div>
</body>
</html>
構成の説明
取り敢えず書いてみていかがでしょうか。順番に構造について説明します。
基本中の基本（HTMLの仕組みについて）
まずは「HTMLとは何ぞや？」という人に向けて。。。
HTMLの構造では「タグ」と「属性」の2つの文法が主軸になります。それぞれ説明していきましょう。
「タグ」について
「タグ」はWebページの構成を表すもので、以下の構文で表現します。
<タグ名> 内容 </タグ名>開始タグ（<タグ>）と終了タグ（</タグ>）で囲まれた部分を「内容」といい、タグと内容を併せて「要素」といいます。
タグには様々な種類が用意されており、titleタグやdivタグなど様々なタグがありますので興味がある方は「HTML タグ」で色々と調べてみましょう。
「属性について」
「属性」はタグに加える補足情報を指すもので、以下の構文で表現します。
<タグ名 属性名="値”> ・・・ </タグ名>タグによって与えられる属性が異なることに注意する必要があります。
半角区切りで複数の属性を加えることが可能です。
以上で作成したプログラムの説明がすべて可能です。詳細については分解してみて自分で調べてみましょう。
HTMLの決まり事
コードの3行目に以下の内容がありますが、
<!DOCTYPE html>これは利用するHTMLのバージョンを表しています。
これがないと文字化けするのでどのHTMLのコードでも必ず入れておきましょう。
課題
上記の内容を見てみて「よし！理解した！」となりましたでしょうか？
「うーん、なんとなくわかったけど。。。」で終わらさないためにも課題を出すので自分でプログラムを書いてみましょう！
課題 1
タイトルとユーザー名の間にヴァージョン（Ver.1.0.0）を加えましょう。
ヴァージョンは太字での入力でお願いします、
課題 2
「ユーザー名」と「パスワード」の入力を必須にしましょう。
「ログイン」ボタンを押下した際に未入力エラーを出すようにしましょう。
今回ははじめてのプログラミング（HTML）の記述でしたが、いかがでしたでしょうか。
正直、プログラミングは英語学習などと同じで量をこなさなければ上達していきません。
僕が出したような課題を自分でも考えてみてもっともっとカスタマイズしてみてください！！
記事の更新が待てないよ！！、動画で勉強したい！という方はUdemyでの勉強もおすすめです（自分はコチラで助けられました）
Udemyについての詳しい記事はコチラをご参照ください。
