반응형
이런 형태의 도서 정보 관리 어플을 만들것임
기본 코드
* bookApp.html
(상단 기본 코드)
(하단 기본 코드)
펼치면 아래와 div 태그 내부는 아래와 같음!
각 페이지마다 id가 다른것 주의!
여기까지 기본 코드는 아래 접은글 펼치기!
여기까지 실행 결과
전체 완성 코드
* bookApp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>도서 정보 관리</title>
<style type="text/css">
img { padding: 10px; margin: 10px 50px; }
.gap { padding: 15px; padding-bottom: 30px; }
</style>
<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- 사용자 정의 자바스크립트 파일 -->
<script src="dbHandle.js"></script>
<!-- jQeury를 이용하여 이벤트 설정 및 함수 호출! -->
<script>
$(document).ready( function() {
// DB 연결
openDB();
// table 생성
createTable();
/* 각 버튼의 이벤트 함수 정의 추가 */
//--------------------------------------------------//
// 추가 화면의 추가 버튼
$('#submit1').click(function(){
insertBook();
});
// 추가 화면의 취소 버튼
$('#cancel1').click(function() {
$('#bookType1').val('미정').attr('selected', 'selected');
$('#bookType1').selectmenu('refresh');
});
//--------------------------------------------------//
// 전체 검색 화면의 | < < > > | 버튼들!
$('#first').click(function(){
position='first';
listBook();
});
$('#prev').click(function(){
position='prev';
listBook();
});
$('#next').click(function(){
position='next';
listBook();
});
$('#last').click(function(){
position='last';
listBook();
});
// 전체 검색 화면의 검색 버튼
$('#search4').click(function() {
var name = $('#sBookName4').val();
selectBook4(name);
});
//--------------------------------------------------//
// 수정 화면의 검색 버튼
$('#search2').click(function() {
var name = $('#sBookName2').val();
selectBook2(name);
});
// 수정 화면의 수정 버튼
$('#submit2').click(function() {
updateBook();
});
// 수정 화면의 취소 버튼
$('#cancel2').click(function() {
$('#bookType2').val('미정').attr('selected', 'selected');
$('#bookType2').selectmenu('refresh');
});
//--------------------------------------------------//
// 삭제 화면의 검색 버튼
$('#search3').click(function() {
var name = $('#sBookName3').val();
selectBook3(name);
});
// 삭제 화면의 삭제 버튼
$('#submit3').click(function() {
deleteBook();
});
// 삭제 화면의 취소 버튼
$('#cancel3').click(function() {
$('#bookType3').val('미정').attr('selected', 'selected');
$('#bookType3').selectmenu('refresh');
});
}); // $(document).ready() END
</script>
</head>
<body>
<!-- 시작 화면 -->
<div data-role="page" id="page0">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>도서 정보 관리</h1>
<a href="#page0" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<img src="book.jpg">
<ul data-role="listview" data-inset="true">
<li><a href="#page1">도서 정보 추가</a></li>
<li><a href="#page2">도서 정보 갱신</a></li>
<li><a href="#page3">도서 정보 삭제</a></li>
<li><a href="#page4">전체 도서 조회</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Book n Book Library</h4>
</div>
</div>
<!-- 시작 화면 끝! -->
<!-- 도서정보 추가 화면 -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<h1>도서 정보</h1>
<a href="#page0" data-icon="home" data-iconpos="notext">Home</a>
<div data-role="navbar">
<ul>
<li><a href="#page1">입력</a></li>
<li><a href="#page2">수정</a></li>
<li><a href="#page3">삭제</a></li>
<li><a href="#page4">전체 검색</a></li>
</ul>
</div>
</div>
<div data-role="content">
<form name="form1">
<h3>도서 내용 입력</h3>
<div class="ui-body ui-body-a gap">
<label for="bookType1" class="select">장르 : </label>
<select name="bookType1" id="bookType1" data-native-menu="false" data-mini="true" data-inline="true">
<option value="미정">미정</option>
<option value="경제">경제</option>
<option value="시사">시사</option>
<option value="문학">문학</option>
<option value="기술">기술</option>
</select>
<label for="BookName1">도서명 : </label>
<input type="text" name="bookName1" id="bookName1" value="" data-mini="true" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" id="cancel1" value="취소" />
</div>
<div class="ui-block-b">
<input type="button" id="submit1" value="추가" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Book n Book Library</h4>
</div>
</div>
<!-- 도서정보 추가 화면 끝! -->
<!-- 도서정보 갱신 화면 -->
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<h1>도서 정보</h1>
<a href="#page0" data-icon="home" data-iconpos="notext">Home</a>
<div data-role="navbar">
<ul>
<li><a href="#page1">입력</a></li>
<li><a href="#page2">수정</a></li>
<li><a href="#page3">삭제</a></li>
<li><a href="#page4">전체 검색</a></li>
</ul>
</div>
</div>
<div data-role="content">
<form name="form2">
<h3>도서 내용 수정</h3>
<div class="ui-body ui-body-a gap">
<label for="sBookName2">검색도서명 : </label>
<input type="search" name="sBookName2" id="sBookName2" value="" data-mini="true" />
<label for="bookType2" class="select">장르 : </label>
<select name="bookType2" id="bookType2" data-native-menu="false" data-mini="true" data-inline="true">
<option value="미정">미정</option>
<option value="경제">경제</option>
<option value="시사">시사</option>
<option value="문학">문학</option>
<option value="기술">기술</option>
</select>
<label for="BookName2">도서명 : </label>
<input type="text" name="bookName2" id="bookName2" value="" data-mini="true" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="reset" id="cancel2" value="취소" />
</div>
<div class="ui-block-b">
<input type="button" id="submit2" value="수정" />
</div>
<div class="ui-block-c">
<input type="button" id="search2" value="검색" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Book n Book Library</h4>
</div>
</div>
<!-- 도서정보 갱신 화면 끝! -->
<!-- 도서정보 삭제 화면 -->
<div data-role="page" id="page3">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<h1>도서 정보</h1>
<a href="#page0" data-icon="home" data-iconpos="notext">Home</a>
<div data-role="navbar">
<ul>
<li><a href="#page1">입력</a></li>
<li><a href="#page2">수정</a></li>
<li><a href="#page3">삭제</a></li>
<li><a href="#page4">전체검색</a></li>
</ul>
</div>
</div>
<div data-role="content">
<form name="form3">
<h3>도서 내용 삭제</h3>
<div class="ui-body ui-body-a gap">
<label for="sBookName3">검색도서명:</label>
<input type="search" name="sBookName3" id="sBookName3" value="" data-mini="true" />
<label for="bookType3">장르:</label>
<input type="text" name="bookType3" id="bookType3" value="" data-mini="true"/>
<label for="bookName3" >도서명:</label>
<input type="text" name="bookName3" id="bookName3" value="" data-mini="true" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="reset" id="cancel3" value="취소"/>
</div>
<div class="ui-block-b">
<input type="button" id="submit3" value="삭제"/>
</div>
<div class="ui-block-c">
<input type="button" id="search3" value="검색"/>
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Book n Book Library</h4>
</div>
</div>
<!-- 도서정보 삭제 화면 끝! -->
<!-- 전체 도서조회 화면 -->
<div data-role="page" id="page4">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<h1>도서 정보</h1>
<a href="#page0" data-icon="home" data-iconpos="notext">Home</a>
<div data-role="navbar">
<ul>
<li><a href="#page1">입력</a></li>
<li><a href="#page2">수정</a></li>
<li><a href="#page3">삭제</a></li>
<li><a href="#page4">전체검색</a></li>
</ul>
</div>
</div>
<div data-role="content">
<h3>도서 내용 검색</h3>
<div class="ui-body ui-body-a gap">
<fieldset data-role="controlgroup" data-type="horizontal" style="text-align:right">
<input type="button" id="first" value="|<"/>
<input type="button" id="prev" value="<"/>
<input type="button" id="next" value=">"/>
<input type="button" id="last" value=">|"/>
</fieldset>
<label for="sBookName4">검색도서명:</label>
<input type="search" name="sBookName4" id="sBookName4" value="" data-mini="true" />
<label for="bookType4">장르:</label>
<input type="text" name="bookType4" id="bookType4" value="" data-mini="true"/>
<label for="bookName4">도서명:</label>
<input type="text" name="bookName4" id="bookName4" value="" data-mini="true"/>
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" id="cancel4" value="취소"/>
</div>
<div class="ui-block-b">
<input type="button" id="search4" value="검색"/>
</div>
</fieldset>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Book n Book Library</h4>
</div>
</div>
</body>
</html>
* dbHandle.js
/**
*
*/
var db = null;
var var_no = null;
var position = null;
var index;
// 데이터베이스 생성 및 오픈
function openDB(){
db = window.openDatabase('bookDB', '1.0', '북DB', 1024*1024);
console.log('1_DB 생성...');
}
// 테이블 생성 트랜잭션 실행
function createTable() {
db.transaction(function(tr) {
var createSQL = 'create table if not exists book(type text, name text)';
tr.executeSql(createSQL, [],
function() {
console.log('2_1_테이블생성_sql 실행 성공...');
},
function() {
console.log('2_1_테이블생성_sql 실행 실패...');
}
);
},
function() {
console.log('테이블 생성 트렌젝션 실패... 롤백은 자동');
},
function() {
console.log('테이블 생성 트렌젝션 성공...');
}
);
}
/**-------------------------------------------**/
// 데이터 입력 트랜잭션 실행
function insertBook(){
db.transaction(function(tr) {
var type = $('#bookType1').val();
var name = $('#bookName1').val();
var insertSQL = 'insert into book(type, name) values(?, ?)';
tr.executeSql(insertSQL,
[type, name],
function(tr, rs) {
console.log('3_책 등록...no : ' + rs.insertId);
alert('도서명 ' + $('#bookName1').val() + ' 이(가) 입력되었습니다.');
$('#bookName1').val('');
$('#bookType1').val('미정').attr('selected', 'selected');
$('#bookType1').selectmenu('refresh');
},
function(tr, err) {
alert('DB오류 ' + err.message + err.code);
}
); // tr.executeSql() END
}); // db.transaction() END
}
/**-------------------------------------------**/
// 전체 데이터 검색 트랜잭션 실행
function listBook(){
db.transaction(function(tr){
var selectSQL = 'select * from book';
tr.executeSql(selectSQL, [], function(tr, rs){
console.log('책 조회...' + rs.rows.length + '건.');
if(position == 'first'){
if(index == 0){
alert ('더 이상의 도서가 없습니다.');
}else index = 0;
}else if (position == 'prev'){
if(index == 0){
alert('더 이상의 도서가 없습니다.');
}else index = --index;
}else if(position == 'next'){
if(index == rs.rows.length-1){
alert('더 이상의 도서가 없습니다.');
}else index = ++index;
}else{
if(index == rs.rows.length-1){
alert('더 이상의 도서가 없습니다.');
}else index = rs.rows.length-1;
}
$('#bookType4').val(rs.rows.item(index).type);
$('#bookName4').val(rs.rows.item(index).name);
}
);
});
}
/**-------------------------------------------**/
//데이터 수정 트랜잭션 실행
function updateBook(){
db.transaction(function(tr){
var type = $('#bookType2').val();
var new_name = $('#bookName2').val();
var old_name = $('#sBookName2').val();
var updateSQL = 'update book set type=?, name=? where name=?';
tr.executeSql(updateSQL,
[type, new_name, old_name],
function(tr, rs){
console.log('5_책 수정..');
alert('도서명 ' + $('#sBookName2').val() + '이 수정되었습니다.');
$('#bookName2').val(''); // 기존값 초기화
$('#sBookName2').val(''); // 기존값 초기화
$('#bookType2').val('미정').attr('selected', 'selected');
$('#bookType2').selectmenu('refresh');
// refresh를 시켜야지 결과값이 적용된다. 중요!
},
function(tr, err){
alert('DB오류 ' + err.message + err.code);
}
); //tr.executeSql() END
}); //db.transaction() END
}
/**-------------------------------------------**/
// 데이터 삭제 트랜잭션 실행
function deleteBook(){
db.transaction(function(tr) {
var name = $('#sBookName3').val();
var deleteSQL = 'delete from book where name = ?';
tr.executeSql(deleteSQL,
[name],
function(tr, rs) {
console.log('6_책 삭제... ');
alert('도서명 ' + $('#bookName3').val() + ' 이 삭제 되었습니다.');
$('#bookType3').val('');
$('#bookName3').val('');
$('#sBookName3').val('');
},
function(tr, err) {
alert('DB 오류 ' + err.message + err.code);
}
); // tr.executeSql() END
}); // db.transaction() END
}
/**-------------------------------------------**/
// 데이터 수정을 위한 데이터 검색 트랜잭션 실행
function selectBook2(name){
db.transaction(function(tr){
var selectSQL = 'select type, name from book where name=?';
// select를 하게되면 그 결과값이 rs라는 매개변수로 전달된다. ResultSet과 같은 역할임!
tr.executeSql(selectSQL,
[name],
function(tr, rs) {
// 검색결과가 없다면 행(rows)은 0개가 나옴. 따라서 0보다 클 때만 if문 내부!
if (rs.rows.length > 0) {
$('#bookType2').val(rs.rows.item(0).type).attr('selected', 'selected');
// select태그는 선택값이 있다면 반드시 refresh 해줘야함!
// 그래야 select된 항목이 선택 된 것처럼 보인다.
$('#bookType2').selectmenu('refresh');
$('#bookName2').val(rs.rows.item(0).name);
} else {
alert('검색된 도서가 없습니다.');
}
}
); // tr.executeSql() END
}); // db.transaction() END
}
/**-------------------------------------------**/
// 데이터 삭제 위한 데이터 검색 트랜잭션 실행
function selectBook3(name){
db.transaction(function(tr) {
var selectSQL = "select type, name from book where name=?";
tr.executeSql(selectSQL,
[name],
function(tr, rs) {
if (rs.rows.length > 0) {
$('#bookType3').val(rs.rows.item(0).type);
$('#bookName3').val(rs.rows.item(0).name);
} else {
alert('검색된 도서가 없습니다.');
}
},
function(tr, err) {
alert('DB 오류 ' + err.message + err.code);
}
); // tr.executeSql() END
}); // db.transaction() END
}
/**-------------------------------------------**/
// 데이터 조건 검색 트랜잭션 실행
// 전체조회 검색버튼에서 사용할 함수!
function selectBook4(name){
db.transaction(function(tr) {
var selectSQL = 'select type, name from book where name=?';
tr.executeSql(selectSQL,
[name],
function(tr, rs){
if (rs.rows.length > 0) {
$('#bookType4').val(rs.rows.item(0).type);
$('#bookName4').val(rs.rows.item(0).name);
} else {
alert('검색된 도서가 없습니다.');
}
},
function(tr, err) {
alert('DB 오류 ' + err.message + err.code);
}
); // tr.executeSql() END
}); // db.transaction() END
};
반응형
'Java . Spring . Web . SQL' 카테고리의 다른 글
| SQL : DML (Data Manipulation Language) : 데이터 조작 언어 (0) | 2020.09.13 |
|---|---|
| SQL : DDL (Data Definition Language) : 데이터 정의 언어 (0) | 2020.09.13 |
| 2020/09/10 : jQuery : 버블(bubble) 차트 (0) | 2020.09.10 |
| 2020/09/10 : jqPlot : 파이(pie) 차트 (원형 그래프) (0) | 2020.09.10 |
| 2020/09/10 : jqPlot : 바(bar) 차트 (막대 그래프) (0) | 2020.09.10 |
댓글