본문 바로가기
프로젝트/Semi Book Store

2021년 11월 3일 - 프로젝트 중 유용한 기술들 모음 (3)

by 철제백조 2021. 11. 4.

 

◎ 디스플레이 플렉스

https://studiomeal.com/archives/197

 

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

 

 

 

◎ CSS 변경해도 적용안될 때

https://meaownworld.tistory.com/89

 

CSS 파일이 변경 후 적용이 안될 때

CSS 파일이 변경 후 적용이 안될 때 시간을 많이 잡아먹어서, 문제 해결 후 기록합니다. .col .col .col 현재 저는 그리드를 만들려 합니다. 이 그리드에 스타일을 주기 위해 링크를 한 CSS 파일을 선택

meaownworld.tistory.com

 

 

 

◎ unexpected end of input script

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=papaya5rhw&logNo=30168462314 

 

Uncaught SyntaxError: Unexpected end of input

자바 스크립트 디버깅 하다보면 Uncaught SyntaxError: Unexpected end of input 요런 에러가 날 때가 ...

blog.naver.com

 

 

 

◎ jsp에서 수량 변경시 총 가격 변경

<%@page import="java.text.DecimalFormat"%>
<%@page import="db.BookDTO"%>
<%@page import="db.BookDAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="db.CartDTO"%>
<%@page import="db.CartDAO"%>
<%@ 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>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link href="cart_style.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?
family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">



</head>



<%
//1) db 선언
BookDAO dao=new BookDAO();
CartDAO db=new CartDAO();
BookDTO Bdto=new BookDTO();
%>


<script type="text/javascript">

function tot(num,price,i){
	
	var a = (String)(num*price);
	a = a.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	
	console.log(num);
	console.log(price);
	console.log(i);
	console.log(a);
	
	document.getElementById(i).innerText= a;
	}

</script>

<body>


<%

String user_id=request.getParameter("user_id");

user_id="apple"; //검사용도


//	2) dao에서 list 가져오기
ArrayList<CartDTO>list=db.selectCart(user_id);  

//	돈 자릿수포맷
DecimalFormat df = new DecimalFormat("###,###");
%>

	

<div class="title">
<h2 class="text" style="margin-left: 580px; padding-top: 40px;">장바구니</h2>
</div>

<table class="table table-bordered" style="width: 800px; margin-left: 250px; height: 100px;">
<caption>장바구니 목록</caption>
<tr>
	<th width="10px">선택</th>
	<th width="80px">상품명</th>
	<th width="50px">총가격</th>
	<th width="40px">수량</th>
	<th width="30px">주문/삭제</th>               
</tr>



<%
for(int i=0; i<list.size(); i++){ 
	
	CartDTO dto=list.get(i); 
	Bdto=dao.getBook(dto.getBook_id());
	/* String totP = df.format((Bdto.getBookPrice() * dto.getEa())); */
	
	%>
	

	<tr style="text-align: center;">
		<td>
		<input type="checkbox" name="rowcheck" value="">
		</td>
		<td><%=Bdto.getBook_name() %></td>
		<td><span id="print_totP<%=(i)%>"><%=df.format(Bdto.getBookPrice() * dto.getEa())%></span><td>
		
		<input type="number" id="ea<%=(i) %>" style="width: 70px; height: 40px; text-align: center;" 
		min="1" value="<%=dto.getEa() %>" onchange="tot(this.value, <%=Bdto.getBookPrice()%>,'print_totP<%=(i)%>')">
		</td>
		<td>
		<button type="button" class="btn btn-warning btn-xs"
		onclick="location.href=''">주문</button>&nbsp;&nbsp;
		<button type="button" class="btn btn-warning btn-xs" 
       onclick="location.href='cart_delete.jsp?user_id=?<%=dto.getUser_id() %>&book_id=?<%=dto.getBook_id()%>'">
       삭제</button>
		</td>
	</tr>
	
<%}
%>
</table>

<!-- <div style="margin-left: 750px;">
	<b style="">결제 예정 금액 :</b>
</div> --><br>

<table class="table table-bordered" style="width: 300px; margin-left: 750px;">

	<tr>
	<td align="center">
		<a href="">선택 상품 주문</a> <!-- 결체페이지로 이동 -->
	</td>
	</tr>
	
	<tr>
	<td align="center">
		<a href="index.jsp?main=book/book_info">이전 페이지</a> <!-- 제품상세로 이동 -->
	</td>
	</tr>
</table>

</body>

</html>

 

 

 

◎ BookInfo 버튼 오류나기 전 코드

<%@page import="db.BookDTO"%>
<%@page import="db.BookDAO"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="../css/book.css?after">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">

<%@ page import="java.text.*"%>


<title>Insert title here</title>
</head>


	<!-- 기본틀 -->

	<%
	
		//파라미터값 가져오기 - book_id
		String book_id = request.getParameter("book_id");
	
		//임의로 부여한 값
		book_id="5";
		
		//파라미터값 가져오기 - user_id
		String user_id = request.getParameter("user_id");
		
	
		//DAO 객체선언
		BookDAO dao = new BookDAO();
	
		//해당 book_id에 해당하는 dto 가져오기
		BookDTO dto = dao.getBook(book_id);
		
		
		//돈 자릿수포맷
		DecimalFormat df = new DecimalFormat("###,###");
			
		/* 예시 */
		int val = 1234567;
		System.out.println(df.format(val));
		
		
		
		// 프로젝트 경로 구하기
		String root = request.getContextPath();
		
		// 기본 페이지
		String mainPage = "layout/main.jsp";
		
		// main 값 읽어서 출력
		if(request.getParameter("main") != null) {
			mainPage = request.getParameter("main");
		}
	%>
	

<script type="text/javascript">

	window.onload=function(){
		
		slide_show();
		
		/* 실행시 상품 기본가격 출력 */
		var a = (String)($("#ea").val()*<%=dto.getBookPrice()%>);
		a = a.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		
		console.log(a);
		
		document.getElementById("totP").innerText= a;
		
		document.getElementById("totP").innerText= a;
		
		
		/* 랜덤으로 문구 생성해서 배치하기 */
		/* 랜덤배치 */
		var mentArr = ["인생을 바꾸는 책 한 권의 선택",
					   "독서는 사랑에 빠지는 것과 같다",
					   "은하수 달님 별님 떨어지는 소리",
					   "소중한 이에게 따뜻한 책한권"];
		
		/* 랜덤 수 생성 */
		var rnd = parseInt(Math.random()*4);
		
		document.getElementById("summary").innerText= mentArr[rnd];
		
	}

	
	/* 별점 산정 함수(예비) */
	function ratingToPercent() {
	      const score = +this.restaurant.averageScore * 20;
	      return score + 1.5;
	 }
	
	
	
	/* 구매한 수량에 따른 총가격 출력 함수 - 돈 자릿수 콤마 */
	function tot(num){
		
		var a = (String)($("#ea").val()*<%=dto.getBookPrice()%>);
		a = a.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		
		console.log(a);
		
		document.getElementById("totP").innerText= a;
		
		
		/* '구매수량 > 재고'일 경우, 장바구니 & 구매버튼 비활성화 */
		if(num><%=dto.getEa()%>){
			document.getElementById("totP").innerText= "재고가 부족합니다";
			
			const target1 = document.getElementById('goCart');
			  target1.disabled = true;
			  
			const target2 = document.getElementById('buy');
			  target2.disabled = true;
		}
		
		
		/* '구매수량 < 재고'일 경우, 장바구니 & 구매버튼 다시 활성화 */
		if(num<=<%=dto.getEa()%>){
			
			const target1 = document.getElementById('goCart');
			  target1.disabled = false;
			  
			const target2 = document.getElementById('buy');
			  target2.disabled = false;
		}
	}	 
	
	
		

	
	var i = 1;
	
	function slide_show() {	
		if(i > 3)
			i = 1;
		
		document.getElementById("adver_img").src = "../image/adver_" + i + ".png";
		
		setTimeout(slide_show, 3000); // 함수를 3초마다 호출
		i++;
	}

</script>	
	


<body style="background-color: #FAF7EB">

	<div id="wrapper">
	
		<div id="container">
		
			<div id="book_title">
				<!-- JSTL 문법을 사용해 위의 값 출력 -->
				<font class="title"><b><%=dto.getBook_name() %></b></font></p>
				
				
				<font class="subInfo"><b><%=dto.getWriter() %></b></font> &nbsp;		
				<font class="subInfo"><b><%=dto.getPublisher() %></b></font> &nbsp;
				<font class="subInfo"><b><%=dto.getYear() %></b></font>		
			
			</div>
				
			<hr id="top_hr">
			
			<div id="content">
		
				<div id="img">
					<!-- 검산용 -->
					<% System.out.println("../image/book/"+dto.getBook_image()); %>
					<img src="../image/book/<%=dto.getBook_name()%>.jpg" id="bookImg">
				</div>
			
			
				<div id="selInfo">
				
						<!-- 별점-얼마나 차있는지 위에 함수로 줘야함 -->
						<div class="star-ratings-fill" id="star">
							<span class="star">★</span>
							<span class="star">★</span>
							<span class="star">★</span>
							<span class="star">★</span>
							<span class="star">★</span>
						</div>
					
						<div id="summary"></div>
						
						<div id="detail">
						
							판매가:&nbsp;&nbsp; <%=df.format(dto.getBookPrice()) %> 원 <br>
							
							포인트:&nbsp;&nbsp; <%=dto.getBookPrice()/10 %> pt <br>
							
							재고량:&nbsp;&nbsp; <%=dto.getEa() %> 권 <br>
							
							<!-- 재고가 수량보다 적어 음수가 될 경우, 구매불가 메시지 출력-->
							주문량:&nbsp;&nbsp; <input type="number" id="ea" style="width: 70px; height: 40px; text-align: center;" min="1" max="100" value="1" onchange="tot(this.value)"> 권 <br>
					
							총금액:&nbsp;&nbsp; <font id="totP"></font>
						
						</div>	
		
							<!-- 장바구니, 바로구매 버튼 -->
		
						<div id="btns">
							<button id="buy" class="btn fourth" onclick="location.href=''">바로구매</button>
							<button id="goCart" class="btn fourth" onclick="location.href='book_to_cart.jsp'">장바구니</button>
						</div>
						
				</div>
			</div>
		
		</div>
		
		
		<!-- 광고 이미지 -->
		<div class="layout adver" onload="slide_show()">
			<img id="adver_img" src="">
		</div>

		
		<!-- 책소개 -->
		<div id="book_content">

			<!-- 내용나누는 줄 -->
			<hr id="blur_hr1">	
			
			<div id="book_summary">책소개</div>
			
			<div id="book_summary_detail"><%=dto.getContent() %></div>
			
		</div>
		
		
		<!-- 책 목차 -->
		<div id="index">
			
			<!-- 내용나누는 줄 -->
			<hr id="blur_hr2">	
			
			<div id="book_index">목차</div>
			
			<div id="book_index_detail"><%=dto.getChapter() %></div>
			
		</div>
	</div>
</body>
</html>

'프로젝트 > Semi Book Store' 카테고리의 다른 글

2021년 11월 6일 - 프로젝트 중 유용한 기술들 모음 (6)  (0) 2021.11.08
2021년 11월 5일 - 프로젝트 중 유용한 기술들 모음 (5)  (0) 2021.11.07
2021년 11월 4일 - 프로젝트 중 유용한 기술들 모음 (4)  (0) 2021.11.06
2021년 11월 2일 - 프로젝트 중 유용한 기술들 모음(2)  (0) 2021.11.03
2021년 11월 1일 - 프로젝트 중 유용한 기술들 모음 (1)  (0) 2021.11.02

관련글

댓글

티스토리툴바