サーブレット（Java Servlet）２ - 個別指導 Javaプログラミングスクール武蔵浦和(中浦和)

[Webアプリケーション] サーブレット（Java Servlet）２

サーブレットを使った開発の準備が整いましたので、簡単なHTMLの出力を行います。
今回はHTMLで画像の読み込みやCSSファイルの読み込みを試します。

■WebContent配下にフォルダを作成
前回同様に新規の動的Webプロジェクトを作成し、画像とスタイルシートを格納するフォルダを作成します。

▼WebContentを選択し、右クリックで「新規＞フォルダ」を作成
新規フォルダ作成

▼画像とスタイルシートの格納フォルダ
WebContentにフォルダを作成

フォルダを作成できたら、以下のサンプルプログラムを用意して、画像とCSSファイルを格納しましょう。

「src」にサンプルプログラムを作成します。

@WebServlet("/Sample")
public class Sample extends HttpServlet {
    private static final long serialVersionUID = 1L;

   public Sample() {
        super();
     }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 文字コードの設定
        response.setContentType("text/html; charset=UTF-8");
        // 出力ストリームの取得
        PrintWriter out = response.getWriter();
        // HTML文書の出力
        out.println(" <html>                                        ");
        out.println(" <head>                                        ");
        out.println("    <title>サンプル</title>                     ");
        out.println("    <link rel=\"stylesheet\" href=\"css/main.css\"> ");
        out.println(" </head>                                       ");
        out.println(" <body>                                        ");
        out.println("   <div id=\"main\">                             ");
        out.println("       <h1>画像とCSSを読み込むよ</h1>          ");
        out.println("       <p>画像を表示します。</p>               ");
        out.println("       <p><img src=\"pictures/sample.jpg\"></p>  ");
        out.println("   </div>                                      ");
        out.println(" </body>                                       ");
        out.println(" </html>                                       ");

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

「css」フォルダにmain.css（スタイルシート）を格納します。

body{
    background-color: #F0F8FF;
}

div#main{
    background-color: #FFFFFF;
    margin: 0 auto;
    width: 1200px;
    height: 1200px;
    padding: 16px;
}

h1,p{
    text-align: center;
}

h1{
    font-size: 24px;
}

p{
    font-size: 16px;
}

「pictures」に表示したい好きな画像を格納します。名前はsample.jpgとしてください。

以上の準備ができましたら、実行しましょう。以下のような画面が表示されたら成功です。表示されたURLを実際のchrome等のブラウザに入力して表示されることを確認してみてください。実行結果

さいたま市南区の武蔵浦和駅（中浦和駅）周辺でプログラミングを勉強したい・興味のある方に、個別指導でJavaのプログラミングを教えています。生徒さまはIT・プログラミング未経験の社会人の方がほとんどです。
▼興味があれば、下記リンクをご確認ください。

java-musashiurawa.hatenablog.com