Java

【Todo Webアプリ】画面デザインをさすがになんとかする

※アフィリエイト広告を利用しています。

今回の記事はこちらの記事の続きとなっております。

現在Java(サーブレット・jsp) x PostgreSQLを使ってTodoアプリを作成しています。現時点での機能は次のとおりです。

今回は画面デザインを流石にまともなやつにしたいと思います。JavaやPostgreSQLの技術的なお話はほとんど出てきません。画面デザインはお好きなように編集してもらうのが一番いいと思います。

そして私は自分でHTMLやCSSをかきたくありません。なぜなら訳が分からないからです。特にCSS。なのでBootstrapとか、ネットに落ちているものを継ぎ合わせてなんとか体裁を保っている感じです。

その他の機能の作成記事はこちらの記事にまとめています。

GitHubにソースがあるので、参考にしてください！ご質問等あればこちらのTwitterアカウントまでお願いします。

Login画面デザイン

まずはログイン画面のデザインです。これはこちらの記事を参考にして作成しました。

WebContentフォルダの下にcssフォルダを作成します。内容は以下の通りです。

body {
	background-color: #ffd19a;
	font-family: 'Ubuntu', sans-serif;
}

.main {
	background-color: #FFFFFF;
	width: 400px;
	height: 400px;
	margin: 7em auto;
	border-radius: 1.5em;
	box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
}

.sign {
	padding-top: 40px;
	color: #fa9f32;
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	font-size: 23px;
}

.un {
	width: 76%;
	color: rgb(38, 50, 56);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	background: rgba(136, 126, 126, 0.04);
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	outline: none;
	box-sizing: border-box;
	border: 2px solid rgba(0, 0, 0, 0.02);
	margin-bottom: 50px;
	margin-left: 46px;
	text-align: center;
	margin-bottom: 27px;
	font-family: 'Ubuntu', sans-serif;
}

form.form1 {
	padding-top: 40px;
}

.pass {
	width: 76%;
	color: rgb(38, 50, 56);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	background: rgba(136, 126, 126, 0.04);
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	outline: none;
	box-sizing: border-box;
	border: 2px solid rgba(0, 0, 0, 0.02);
	margin-bottom: 50px;
	margin-left: 46px;
	text-align: center;
	margin-bottom: 27px;
	font-family: 'Ubuntu', sans-serif;
}

.un:focus, .pass:focus {
	border: 2px solid rgba(0, 0, 0, 0.18) !important;
}

.submit {
	cursor: pointer;
	border-radius: 5em;
	color: #fff;
	background: linear-gradient(to right, #ffb257, #ffb257);
	border: 0;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	font-family: 'Ubuntu', sans-serif;
	margin-left: 35%;
	font-size: 13px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}

.forgot {
	text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
	color: #E1BEE7;
	padding-top: 15px;
}

a {
	text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
	color: #E1BEE7;
	text-decoration: none
}

@media(max-width:600px){
	.main {
		border-radius: 0px;
}

login.jspでスタイルシートの読み込みをします。

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/login.css">

その上でログインフォームを以下のように変更します。

<!-- ログインフォーム。ユーザーIDとパスワードの入力を行う -->
<div class="main">
	<p class="sign" align="center">Login</p>
	<form class="form1" action="LoginServlet" method="post">
		<input name="<%=Parameters.LOGIN_ID %>" class="un " type="text" align="center" placeholder="Username">
		<input name="<%=Parameters.LOGIN_PASSWORD%>"  class="pass" type="password" align="center" placeholder="Password">
		<input type="submit" id="submit" value="ログイン" class="submit" align="center" />
	</form>
</div>

ログイン画面を開きます。いい感じになっています。

一覧画面の編集

続いて一覧画面の編集を行います。

まずヘッダーを作成したいので、WebContent/WEB-IFN/jspフォルダの中にheader.jspを作成します。BootStrapごり押しのヘッダーにします。内容は以下の通りです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="constant.SessionInfo" %>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/base.css"> -->
</head>
<body>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="list-servlet">Todo アプリ</a>
    <span class="navbar-text">
    	<%=session.getAttribute(SessionInfo.LOGIN_USER_ID) %>
	    <a href="LogoutServlet">ログアウト</a>
    </span>
  </div>
</nav>
<div style="height: 90px;"></div>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
</body>
</html>

一覧画面のlist.jspで先ほど作成したheader.jspを読み込みます。bodyタグの直下に以下の一文を追加してください。

<%@ include file='header.jsp' %>

一覧画面を開くとヘッダーが追加されていると思います。

　　[affi id=2]

ログアウト機能の実装

ヘッダーにログアウト用のリンクも作成しましたので、ついでにログアウト機能も作成しておきます。

LogoutServletを用意して、doGetメソッドの中身を次のようにします。セッション情報を削除するだけの処理です。セッションを削除した後はログイン画面に遷移するようにします。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	request.getSession().invalidate();
	request.getRequestDispatcher("LoginServlet").forward(request, response);
}

次回予告

次はTodoに作成したUser情報を持たせて、自分の作成したTodoのみ編集、削除を行えるようにしたいです。
そのためにテーブルの変更が必要なので、テーブルの変更を行います。
こちらの記事でテーブルの変更について扱いました。

GitHubにソースがあるので、参考にしてください！ご質問等あればこちらのTwitterアカウントまでお願いします。

おすすめの参考書

-Java