BMI 구하는 프로그램을
JavaScript와 Java의 Servlet을 사용해서 만들고 있는데
Java에서 Js를 표현하려면 코드를 비효율적으로 짤 수 밖에 없다.
out.print("<html>");
out.print("<head><title>BMI Result</title>");
out.print("<meta charset = 'UTF-8'></head>");
out.print("<body>");
out.print("<h1>BMI 결과 </h1>");
out.printf("이름 : %s<p>",name);
out.printf("키 : %.1f<p>",height * 100);
out.printf("몸무게 : %.1f<p>",weight);
out.printf("BMI : %.2f<p>",bmi);
out.printf("<h2>당신은 %s입니다</h2><p>", result);
out.printf("<img src = 'img/%s' style = 'max-width:400px;'>", image);
out.print("</body>");
out.print("</html>");
이런식으로 out.print안에 JS코드를 일일이 넣어줘야한다.
이런 번거로움을 해결할 수 있는 것이 JSP이다.
JSP는 Java Server Page의 약자이다.
<%@ 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>
</body>
</html>
JSP파일을 만들면
위와 같이 베이직 코드가 짜져있는데
기본적인 구조는 JS와 똑같고
body 태그 안에
<% %>
태그를 만들어서 태그 안에 자바 코드를 넣으면 된다.
<%
response.setCharacterEncoding("UTF-8");
String path = request.getServletContext().getRealPath("img");
System.out.println(path);
MultipartRequest mr = new MultipartRequest(request, path, 30 * 1024 * 1024, "UTF-8", new DefaultFileRenamePolicy());
String name = mr.getParameter("name");
double height = Double.parseDouble(mr.getParameter("height"));
double weight = Double.parseDouble(mr.getParameter("weight"));
height /= 100;
double bmi = weight / (height * height);
String result = "저체중";
if(bmi >= 40) {
result = "고도비만";
} else if(bmi >= 35) {
result = "중증도비만";
} else if(bmi >= 30) {
result = "경도비만";
} else if (bmi >= 25) {
result = "과체중";
} else if (bmi >= 18.5) {
result = "정상";
}
//BMI 수치 => 소수점 둘째자리까지만 (HTML쪽에서는 안되니 여기서 해결)
String bmi2 = String.format("%.2f", bmi);
String image = mr.getFilesystemName("photo");
image = URLEncoder.encode(image, "UTF-8");
image = image.replace("+", " ");
//자바의 영역
%>
이런 식으로 자바 서버의 로직 코드를 넣고
<div class = 'title'>
<h1>BMI결과</h1>
</div>
<div class = 'result-section'>
<img src = 'img/<%=image%>' style = 'max-width:400px;'>
<div class = 'text'>
이름 : <%=name %>
</div><!--값을 불러옴 -->
<div class = 'text'>
키 : <%=height %> </div>
<div class = 'text'>
체중 : <%=weight %> </div>
<div class = 'text'>
BMI : <%=bmi2 %> </div>
<div class = 'text'>
당신은 <%=result %> 입니다.
</div>
그 밑에 body태그에 들어갈 내용인
UI 부분을 구현하면된다.
물론 CSS도 link태그를 사용해서 불러올 수 있다.
<link rel = "stylesheet" href = "css/BMI.css">
디자인이 난해하지만
기능 실습은 성공적이다.
'JSP' 카테고리의 다른 글
| [JSP] EL (0) | 2025.01.22 |
|---|---|
| [JSP] Redirect (1) | 2025.01.21 |
| [JSP] 기본 문법 (0) | 2025.01.20 |
