22.05.24~22.11.16/Project

7월 project 1 <JSP로 피자 주문 페이지 만들어서 오라클에 데이터 넣기> 1편

10월의끝 2022. 7. 8. 09:40

JSP와 오라클을 모두 사용할 수 있는 예제를 찾아보다가 발견한 피자주문페이지 만들기! 

 

[Servlet/JSP] 간단한 피자 주문 웹 페이지 만들기

이전에 블로그에 올리지 않았지만 DB까지 접근하진 않고 사용자가 주문한 피자와 가격을 표시해주는 웹 페이지를 만들어봤다. 이번엔 DB까지 접근하여 주문 내역을 저장하고 주문 내역을 사용자

velog.io

이분의 작업을 참고하여 주문폼을 만들어보았다. 

 

우선, jsp작업물이 오라클 db에 입력 되어야 하는 것을 기준으로 두고, 

발견한 예제는 파일이 많아 복잡한 느낌이 들어서 java파일을 따로 생성하지 않고 jsp에서만 만들어보기로 했다. 

 

 

주문 form.jsp 파일 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Java Pizza Shop</title>
</head>
<body bgcolor='FFFFFF'>

	<table border="1"> 
	<tr><td><h1>　Java Pizza Shop　</h1></td></tr>
	</table>

	<img src="피자주문_page-0001.jpg" alt="피자메뉴" width="1300" height="400">
	
	<form action="view.jsp" method="post">

bgcolor을 만들어 둔 이유는, 원래 배경 색을 입히려고 했는데 

이미지 파일을 불러오니 깔끔하지 않아서 그냥 기본 흰색으로 두었다.

 

<ol>
		<h3><li>피자</li></h3>
	<select name="pizza">
	<option value="pizza"></option>
	<option value="cheese">치즈피자</option>
	<option value="combination">콤비네이션피자　</option>
	<option value="potato">포테이토피자</option>
	<option value="sweetpotato">고구마피자</option>
	<option value="beef">불고기피자</option>
	</select>

		<h3><li>토핑</li></h3>
	<select name="topping">
	<option value="topping"></option>
	<option value="sweetpotatomousse">고구마무스</option>
	<option value="corncreammousse">콘크림무스</option>
	<option value="pineapple">파인애플</option>
	<option value="cheese">치즈 토핑</option>
	<option value="cheesebite">치즈바이트</option>
	<option value="cheesecrust">치즈크러스트　　</option>
	</select>

 주문 카테고리는 피자, 토핑, 사이드, 음료 총 네가지 구성으로 만들었는데

어차피 같은 태그를 썼기 때문에 사이드와 음료는 첨부하지 않았다. 

토핑에서 맨 마지막 

<option value="cheesecrust">치즈크러스트　　</option>

이 부분에서 치즈크러스(공백)을 준 이유는 select option의 길이를 맞추기 위해서이다.

옵션의 글자수가 제각각이라 결과물에서 select 길이가 모두 다른 것을 보고

글자수를 맞추었더니 통일감있게 정리되었다.

 

</ol>
<br>
<hr>
	<br>
	<div style="text-align:center">
	<input type="submit" value="주문">&nbsp;&nbsp;
	<input type="reset" value="초기화">
	</div>
	<br>
	<br>
	
</form>
</body>
</html>

주문, 초기화 버튼을 만들어주었고 위치는 중앙으로 정렬했다. 

 

 

<주문 페이지>