📚

【初心者向け/ITスクール38日】初めての作成したWEBページ

2023/09/04に公開

CSS

HTML

Java

tech

はじめに

今日は、ITスクールに通った38日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

38日目は、HTML/CSSで作成したWEBページをServletと連携して、動的なページをクライアントに転送する実習とJavaScriptについて初めて勉強しました。

初めてのWEBページ

レイアウトは、Flexboxを利用して組みました。
また、本文の場合、メニューと本文に分け、本文をまたheaderとmainに分けました。

最初からゆっくりhtmlを組んだ後から、cssに挑めばよかったのですが、途中に機能を追加することでcssがぐちゃぐちゃになりましたので、とてもいい勉強になりました。

html

<!DOCTYPE html>
<html lang="kor">
  <head>
    <link rel="stylesheet" href="css/style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원가입 - Hyon</title>
  </head>
  <body>
    <div class="menu">
      <span>개인 회원가입</span>
    </div>
    <header>
      <h1>코딩은 구르면서 배우는거야!</h1>
    </header>
    <main>
      <form action="SignInResult" method="post">
        <div class="box__id">
          <span>아이디</span>
          <input type="text" name="ID" placeholder="필수,4~8자" />
        </div>
        <div class="box__password">
          <span>비밀번호 </span>
          <input type="password" name="PW" placeholder="필수,영문/숫자 혼합" />
        </div>
        <div class="box__sex">
          <span>성별</span><br />
          <div class="box__sex-radio">
            <label>
              <input name="GD" value="male" type="radio" />
              남성
            </label>
            <label>
              <input name="GD" value="female" type="radio" />
              여성
            </label>
            <label>
              <input name="GD" value="none" type="radio" />
              밝히고 싶지 않음
            </label>
          </div>
        </div>
        <div class="box__area">
          <span>지역</span>
          <select name="box__area-select" id="LC">
            <option >서울</option>
            <option >경기</option>
            <option >인천</option>
            <option >강원</option>
            <option >충북</option>
            <option >충남</option>
            <option >전북</option>
            <option >전남</option>
            <option >경북</option>
            <option >경남</option>
            <option >제주</option>
          </select>
        </div>
        <div class="box__hobby">
          <span>취미</span>
          <input type="checkbox" name="HB" value="게임" />게임
          <input type="checkbox" name="HB" value="골프" />골프
          <input type="checkbox" name="HB" value="운동" />운동
          <input type="checkbox" name="HB" value="SNS" />SNS
          <input type="checkbox" name="HB" value="맛집탐방" />맛집탐방
          <input type="checkbox" name="HB" value="방콕" />방콕
        </div>
        <div class="box__introduce">
          <span>자기소개</span>
          <textarea name="IND"></textarea>
        </div>
        <div class="box__submit">
          <input type="submit" value="가입하기" />
        </div>
      </form>
    </main>
  </body>
</html>

CSSのため、BEMという名づけ方法でクラス名を決めましたが、また難しかったと思います。

 <form action="SignInResult" method="post">

こちらの action が一番重要なattributeで **action**のvalueはServletのファイル名にします。actionの値とServelet名が一致すれば、マッピングされるからです。
また、inputのnameがパラメターになります。

Servlet


package com.hyon.aug313.main;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/SignInResult")
public class SignInResult extends HttpServlet {
	
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	response.setCharacterEncoding("UTF-8");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	response.setCharacterEncoding("UTF-8");
	request.setCharacterEncoding("UTF-8");
		
	String id = request.getParameter("ID");
	String pw = request.getParameter("PW");
	String gd = request.getParameter("GD");
	String lc = request.getParameter("LC");
	String[] hb = request.getParameterValues("HB");
	String ind = request.getParameter("IND");
		
	ind = ind.replace("\r\n", "<br>");
	PrintWriter out = response.getWriter();
	out.print("<html>");
	out.print("<head><title>회원가입결과</title><meta charset='UTF-8'></head>");
	out.print("<body>");
	out.print("<h1>회원가입결과</h1>");
	out.printf("<h2>ID :%s<h2>",id);
	out.printf("<h2>PW :%s<h2>",pw);
	out.printf("<h2>성별 :%s<h2>",gd);
	out.printf("<h2>지역:%s<h2>",lc);
	if(hb!=null) {
	   out.print("<h2>취미 :");
	   for(String s : hb) {
		out.print(s + "");
	   }
		out.print("</h2>");
	}
		
	out.printf("<h2>자기소개 : %s</h2>",ind);
	out.print("</body>");
	out.print("</html>");
		
      }
}

css

Google Chromeのapplicaion(ruler,color picker）などを活用して、レイアウトをクローンし、
気にいる色の配置を選ぶことで相当時間がかかりました。白い背景に決めましたが、他のページのようにロゴがないので、とても地味な気がしました。
様々なページを見ながら、instagramのように、グラデーションカラーを背景にし、入力欄(input）のとこも配置を一緒にしました。
hover,focusの時、ピンク色に変わるとろこをtransition + transform を通して強調し、字の色と合わせるようにopacityも調整しました。

色の配置を考える中で、グラデーションのコードを見たり、チェックボックとradioなどの色を変更することも勉強になりました。

一番難しいところはcssを使って綺麗に整列することと<label>タグと<input>タグを連携してチェックボック、radioを組むことでした。後者はまだ慣れてなかったので、今後ちょこちょこ練習しながら、カード形のチェックボックス、radioも作ってみたいです。

cos

ServletとPrintWriterを通して、文字を扱うことはできましたが、byteでI/Oをするファイルなどは不可能でした。そのため、cosというライブラリを活用してみました。
正直、Springの勉強を始めた時には気づきませんでした。

こういうのがあるんだなみたいな感覚で勉強しました。
cosは<form>のpost methodのみ利用できます。

ファイルなど送る際にはこのようなhtmlタフを使います。

<form action="Output" method="post" enctype="multipart/form-data">

multpart/form-dataはエンコーディングをしないことを意味します。つまり、文字ではなく、ファイルを転送する際に最適なattributeです。

はじめに

初めてのWEBページ

html

Servlet

css

cos

Discussion