자판기 프로그램 - 관리자Ver.(상품 수정/삭제)(javascript)

✔ 계기

인턴 생활 때, 스터디 할 때 진행했던 프로젝트이다.
같은 프로젝트를 만들어보고 코드 리뷰하는 시간을 가져 서로의 코드를 공유하고 부족한 점은 배우려고 시작했었다.

⚙ 관리자 Ver. 기능

👆. 자판기 상품 등록
- 모든 정보 입력해야 상품 등록 가능
- 가격 / 재고수 음수로 넣을 수 없게 제어
✌. 자판기 내용 수정 / 삭제 (별도의 팝업창을 열어서)
- 모든 정보 입력해야 상품 등록 가능
- 가격 / 재고수 음수로 넣을 수 없게 제어

• DB는 Web SQL DB로 하였음

📺 수정/삭제 성공 화면

📺 수정 실패 화면 - 정보미입력

📺 수정 실패 화면 - 재고/가격 음수 입력

✏ modPop.js

$(document).ready(function(){
	//db 테이블 생성
	var db = openDatabase("vendingMachine", "1.0", "vendingmachine process", 2*1024*1024);
	db.transaction(function(tx){
		var query = "CREATE TABLE IF NOT EXISTS goods("+
			"goodsNo INTEGER PRIMARY KEY AUTOINCREMENT,"+
			"name VARCHAR2(10) NOT NULL,"+
			"price VARCHAR2(10) NOT NULL,"+
			"image VARCHAR2(50) NOT NULL,"+
			"stock INTEGER NOT NULL)";

		tx.executeSql(query,[], function(){
		},function(e){
			console.log(e);
		});
	});

	/** 함수 SECTION */
	//화면에 db내용 뿌리기 위한 select부분
	function select(){
		db.transaction(function(tx){
			var query = "select name,price,image,stock,goodsNo from goods";
			
			$("#japangi tr").not(":first").remove();
			
			tx.executeSql(query,[], function(tx,result){
				for(var i = 0; i < result.rows.length; i++){
					$('.record:eq(0)').show();

					var $appendTr = $('.record:first').clone(true);
					$appendTr.attr('no' , result.rows[i].goodsNo);
					console.log(result.rows[i].goodsNo);
					$($appendTr.children()[0]).text(result.rows[i].name);
					$($appendTr.children()[1]).text(result.rows[i].price);
					$($appendTr.children()[2]).text(result.rows[i].stock);

					$('.record:eq(0)').hide();
					$('#japangi').append($appendTr);	
				}
			},function(e){
					console.log(e);
			});
		});
	}	

	function insert(name,price,image,stock){
		db.transaction(function(tx){
			var query = "insert into goods(name,price,image,stock) values (?,?,?,?)";

			tx.executeSql(query,[name,price,image,stock], function(tx){
				select();
			},function(e){
					console.log(e);
			});
		});	
	}
	
	/** 화면 SET */
	$('.record:eq(0)').hide();
	select();
	
	/** EVENT SECTION */
	$('input[type = file]').change(function(){
		var $fileN ="../images/" + $(this).val().split('\\')[2];
		 $('img').attr('src', $fileN);
	});
	
	$('button').click(function(){
		var pName = $('#prodNm').val();
		var pPrice = $('#price').val();
		var pCnt = $('#cnt').val();
		var pImg = $('input[type = file]').val().split('\\')[2];
		if(pName && pPrice && pCnt && pImg){
			if(pCnt < 0){
				alert('재고는 음수일 수 없습니다.');
			}else if(pPrice < 0){
				alert('가격은 음수일 수 없습니다.');
			}else{
				insert(pName,pPrice,pImg,pCnt);
			}
		}
		else{
			alert('모든 정보를 입력 후 등록하시오');
		}
		$('#prodNm').val('');
		$('#price').val('');
		$('#cnt').val('');
		$('input[type = file]').val('');
		$('img').attr('src', '');
	});
	
	$('.btnMody').click(function(){
		var $pos = $(this).closest('tr').attr('no');
		window.open('../html/modPop.html?no=' + $pos,'',"width = 400, height = 500, top = 100, left = 200, location = no");
	})
})