Dynamic Web Project-FirstSevlet

Next> 누르다가 체크

 

기존 프로젝트의 META-INF에 있는 context.xml 파일을 복사해서 붙여넣기

 

 


 

  • exam이라는 폴더를 만들고 adder라고 하는 jsp만들기. addResult.jsp를 하나더 만들어서 입력한 num1과 num2의 덧셈결과 뽑기.

 

  • adder.jsp: 숫자 덧셈 폼

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="addResult.jsp">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

  • addResult.jsp: 덧셈결과 로직

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<%

    request.setCharacterEncoding("utf-8");

    int num1=Integer.parseInt(request.getParameter("num1"));

    int num2=Integer.parseInt(request.getParameter("num2"));

    int result=num1+num2;

%>

</head>

<body>

    덧셈결과: <%=result%><br>

    뺄셈결과: <%=num1-num2 %><br>

</body>

</html>

 

  • adder2.jsp 만들고 form action="adder" 라고 바꾸기. adder를 어떻게 찾을까? 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="adder">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

 

  • FirstServlet의 WEB-INF 폴더에 있는 web.xml 파일을 다음과 같이 수정하기

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

  <display-name>FirstServlet</display-name>

  <!-- adder -->

  <servlet>

      <servlet-name>adder-servlet</servlet-name>

      <servlet-class>com.exam.action.AdderServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>adder-servlet</servlet-name>

      <url-pattern>/exam/adder</url-pattern>

  </servlet-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

    <welcome-file>index.htm</welcome-file>

    <welcome-file>index.jsp</welcome-file>

    <welcome-file>default.html</welcome-file>

    <welcome-file>default.htm</welcome-file>

    <welcome-file>default.jsp</welcome-file>

  </welcome-file-list>

</web-app>

 

  • java 패키지 com.exam.action 생성 후 AdderServlet.java 만들기

package com.exam.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AdderServlet extends HttpServlet{

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        int num1=Integer.parseInt(req.getParameter("num1"));

        int num2=Integer.parseInt(req.getParameter("num2"));

        int sum=num1+num2;

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out=resp.getWriter(); //출력객체

        out.println("<html>");

        out.println("<head><title>결과</title></head>");

        out.println("<body>");

        out.println("덧셈결과:"+sum);

        out.println("</body>");

        out.println("</html>");

    }

}

  • adder2.jsp에서 jsp는 더이상 필요없고 자바 파일인 AdderServlet이 덧셈을 수행한다. 

 

 

 


 

  • bbs.jsp: 메모 작성 폼 (작성자, 제목, 내용)

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="bbs.do" method="post">

이름: <input type="text" name="name"><br>

제목: <input type="text" name="title"><br>

내용: <br>

<textarea rows="5" cols="20" name="content"></textarea>

<input type="submit" value="전송">

</form>

</body>

</html>


 

  • web.xml

 

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

  <display-name>FirstServlet</display-name>

  <!-- bbs -->

  <servlet>

    <servlet-name>bbs-servlet</servlet-name>

      <servlet-class>com.exam.action.BbsServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>bbs-servlet</servlet-name>

    <url-pattern>/exam/bbs.do</url-pattern>

  </servlet-mapping>

 

  <!-- adder -->

  <servlet>

    <servlet-name>adder-servlet</servlet-name>

    <servlet-class>com.exam.action.AdderServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>adder-servlet</servlet-name>

    <url-pattern>/exam/adder</url-pattern>

  </servlet-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

    <welcome-file>index.htm</welcome-file>

    <welcome-file>index.jsp</welcome-file>

    <welcome-file>default.html</welcome-file>

    <welcome-file>default.htm</welcome-file>

    <welcome-file>default.jsp</welcome-file>

  </welcome-file-list>

</web-app>

 


 

  • BbsServlet.java: 결과값 출력

 

 

package com.exam.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class BbsServlet extends HttpServlet{

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        String name=req.getParameter("name");

        String title=req.getParameter("title");

        String content=req.getParameter("content");

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out=resp.getWriter();

        out.println("<html>");

        out.println("<head><title></title></head>");

        out.println("<body>");

        out.println("작성자: "+name+"<br>");

        out.println("제목: "+title+"<br>");

        out.println("내용: "+content+"<br>");

        out.println("</body>");

        out.println("</html>");

    }

}

 

 

 

 

'Learning > JSP' 카테고리의 다른 글

서블릿으로 주소록 만들기  (0) 2020.07.28
JSTL  (0) 2020.07.27
게시판 2  (0) 2020.07.23
게시판 1  (0) 2020.07.22
회원가입2  (0) 2020.07.22

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>맛보기 예제</title>

</head>

<body>

    <script>

        var age = prompt("당신의 나이는?", "0");

        if(age >= 20){

            document.write("당신은 성인입니다.");

        }else{

            document.write("당신은 미성년자입니다.");

        }

    </script>

</body>

</html>

 

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>선언문</title>

    <script src="js/example.js"></script>

    <script>

        document.write("선언문");

    </script>

</head>

<body>

</body>

</html>

 

 

 

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 외부 자바스크립트 연동 </title>

    <script>

        var box;

        box=100;

        box=30;

        document.write(box, "<br>");

        var a="javascript";

        document.write(a, "<br>");

        var str="자바스크립트";

        var num=100;

        document.write(typeof num, "<br>");

        document.write(typeof str);

    </script>

</head>

<body>

</body>

</html>

 

 

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 산술 연산자 </title>

    <script>

        var num1 = 15;

        var num2 = 2;

        var result;

        result=num1+num2;

        document.write(result, "<br>");

        result=num1*num2;

        document.write(result, "<br>");

        result=num1/num2;

        document.write(result, "<br>");

        result=num1%num2;

        document.write(result, "<br>");

        var t1="학교종이";

        var t2="땡땡땡";

        result=t1+t2;

        document.write(result, "<br>");

        

        var num1=10;

        var num2=3;

        num1+=num2;

        document.write(num1);

    </script>

</head>

<body>

</body>

</html>

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 복합대입 연산자-테이블 만들기 </title>

<script>

    var str="<table border='1'>";

        str+="<tr>"

        str+="<td>1</td><td>2</td><td>3</td>";

        str+="</tr>"

        str+="</table>"

    document.write(str);

</script>

</head>

<body>

</body>

</html>

 

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 비교 연산자 </title>

    <script>

        var a = 10;

        var b = 20;

        var c = 10;

        var f = "20";

        var result;

        

        result=a>b;

        document.write(result,"<br>");

        result=a<=b;

        document.write(result,"<br>");

        result=a!=b;

        document.write(result,"<br>");

        result=b===f;

        document.write(result,"<br>");

    </script>

</head>

<body>

</body>

</html>

 

스크립트에서 '같다'표시는 === 이다.

 

 

 

 


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 삼항 조건 연산자 </title>
<script>
	var a = 10;
	var b = 3;
	//var result;

	var result=a>b? "자바스크립트":"hello";
	document.write(result,"<br>");
</script>
</head>
<body>
</body>
</html>


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 적정 몸무게 구하기 </title>

<script>

    var name=prompt("이름:","");

    var weight=prompt("몸무게:","0");

    var height=prompt("키:","0");



    var normal_w=(height-100)*0.9;

    var result=weight>=normal_w-5 && weight<=normal_w+5;

    result=result? "적정체중":"적정체중이 아닙니다.";

    document.write(name+"님은 "+result);

</script>

</head>

<body>

</body>

</html>

 

 

 

 

 


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 종합실습1-1 </title>

<script>

    var price1 = 3000;

    var price2 = 6000;

    var price3 = 3000;



    var total=price1+price2+price3;

    

    total=total>10000? total-10000+"원 초과":"관리잘함";

    document.write(total);

</script>

</head>

<body>

</body>

</html>

 


 

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트 객체  (0) 2020.07.31
자바스크립트 제어문  (0) 2020.07.31
CSS3 선택자  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24

 

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>속성 선택자</title>

<style>

    ul{

        list-style-type: none;

    }

    li{

        width: 120px;

        display: inline-block;

        margin: 10px;

    }

    li a{

        padding: 5px 10px;

        font-size: 14px;

        color: blue;

        text-decoration: none;

    }

    a[href]{

        background-color: yellow;

    }

</style>

</head>



<body>

    <ul>

        <li><a>메인 메뉴 : </a></li>

        <li><a href="#">메뉴 1</a></li>

        <li><a href="#">메뉴 2</a></li>

        <li><a href="#">메뉴 3</a></li>

        <li><a href="#">메뉴 4</a></li>

    </ul>

  </body>

 </html>



 

 


 

<!doctype html>

<html lang="ko">

  <head>

        <meta charset="utf-8">

    <title> 가상 클래스 </title>

    <style>

            body {

                background-color:#fff; 

            }

            form fieldset{

                margin-bottom:25px; 

            }    

            form legend{

                font-size:15px;

                font-weight:600; 

            }

            input:disabled{

                background: #ccc;

                border: 1px #ddd solid;

            }

            input:checked+span{

                color: blue;

            }

            

        </style>

  </head>

  <body>

        <form>

            <fieldset>

                <legend>사용자 정보</legend>

                <label>이름 <input type="text" disabled></label>

            </fieldset>

            <fieldset>

                <legend>신청 과목</legend>

                <p>이 달에 신청할 과목을 선택하세요</p>

                <label><input type="radio" name="subject" value="speaking"><span>회화</span></label>

                <label><input type="radio" name="subject" value="grammar"><span>문법</span></label>

                <label><input type="radio" name="subject" value="writing"><span>작문</span></label> 

            </fieldset>     

        </form>

  </body>

</html>



 


 

<!DOCTYPE HTML>

<html lang="ko">

<head>

  <meta charset="utf-8">

  <title>CSS 선택자</title>  

  <style>

    .top-img:hover{

      border: 4px solid black;

    }

  </style>

</head>

<body>

  <p>이미지 위로 마우스 포인터를 올려보세요</p>

  <img src="images/tangerines.jpg" class="top-img">

</body>

</html>

 

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트 제어문  (0) 2020.07.31
자바스크립트  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24
CSS 레이아웃  (0) 2020.07.21

+ Recent posts