종합 미니프로젝트
이번 챕터는 프런트 전용 db연결과 함께 여태 jquerymoblie에서 배운것들을 다 적용해서 만들어보고자 한다.
친구 목록보기 및 친구추가 하는 페이지를 새로 배우는 db연결과 함께 여태 배운것들을 적용하는 예시로 정리 및 진행할 예정이다.
1. 화면 디자인
db연결을 하기전 우선 화면 디자인 부분을 먼저 하고자 한다.
첫번째 페이지는 친구목록보기 페이지, 두번째 페이지는 친구추가 페이지를 만들고자 한다.
우선테마를 효과적으로 적용하기 위해 버전을 낮추고 시작
첫번째페이지 친구목록보기
header를 상단에 고정하고 listview이용하여 전화번호부 목록처럼 출력,실시간 검색기능 추가 (data-filter="true")
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구목록보기</h1>
<a href="#page2" data-icon="plus" data-iconpos="right" class="ui-btn-right">등록</a><!-- header라서 button따로 안만들어도 자동생성, 아이콘과 버튼오른쪽으로 이동 -->
</div>
<!-- listview이용(전화번호부 목록처럼 출력),실시간 검색기능(data-filter="true") -->
<div data-role="content">
<ul data-role="listview" data-filter="true" id="output"></ul><!-- -->
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
----------------------------------------------------------------------------
두번째페이지 친구추가
상단메뉴 고정후 form태그를 사용하여 input전송 항목을 만든다.
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구추가</h1>
<a data-icon="arrow-l" data-rel="back">이전</a>
</div>
<div data-role="content">
<form id="insfrm">
<div data-role="fieldcontain"><!-- 모바일에선 formgroup 대신 사용-->
<label for="name">이름</label>
<input type="text" id="name">
</div>
<div data-role="fieldcontain">
<label for="phone">전화</label>
<input type="text" id="phone">
</div>
<div data-role="fieldcontain">
<label for="address">주소</label>
<input type="text" id="address">
</div>
<a data-role="button" id="btnAdd">추가</a>
</form>
------------------------------------------------------------
팝업창
팝업창=>data-role="popup"
data-mini="true" (작은 대화상자) 을 부여,
data-overlay-theme="b"(부모창과 자식창의 화면이 겹쳐서 보일때 세련되게 보여주는 테마)를 적용
<div data-role="popup" id="notice" data-theme="d"
data-overlay-theme="b" class="ui-content" style="max-width:340px;text-align:center"> <!-- 위에 주석 다 적용 + 테마랑 스타일까지 적용 -->
<p class="notice-content"></p><!-- text()를 이용,출력 -->
<a href="#page1" data-role="button" data-inline="true" data-mini="true" id="btn_confirm">확인</a>
</div>
따라서 화면 디자인을 종합을 하면
<body>
<!-- 첫번째페이지(친구목록보기) -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구목록보기</h1>
<a href="#page2" data-icon="plus" data-iconpos="right" class="ui-btn-right">등록</a><!-- header라서 button따로 안만들어도 자동생성, 아이콘과 버튼오른쪽으로 이동 -->
</div>
<!-- listview이용(전화번호부 목록처럼 출력),실시간 검색기능(data-filter="true") -->
<div data-role="content">
<ul data-role="listview" data-filter="true" id="output"></ul><!-- -->
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
<!-- 두번째 페이지(친구추가) -->
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구추가</h1>
<a data-icon="arrow-l" data-rel="back">이전</a>
</div>
<div data-role="content">
<form id="insfrm">
<div data-role="fieldcontain"><!-- 모바일에선 formgroup 대신 사용-->
<label for="name">이름</label>
<input type="text" id="name">
</div>
<div data-role="fieldcontain">
<label for="phone">전화</label>
<input type="text" id="phone">
</div>
<div data-role="fieldcontain">
<label for="address">주소</label>
<input type="text" id="address">
</div>
<a data-role="button" id="btnAdd">추가</a>
</form>
<!--
팝업창 효과(스타일을 적용) data-mini="true" (작은 대화상자)
data-overlay-theme="b"(부모창과 자식창의 화면이 겹쳐서 보일때 세련되게 보여주는 테마) => 테마를 잘 적용하기 위해서 위에 버전 낮추기
팝업창=>data-role="popup" => 다 적용해서 팝업창 만들기
-->
<div data-role="popup" id="notice" data-theme="d"
data-overlay-theme="b" class="ui-content" style="max-width:340px;text-align:center"> <!-- 위에 주석 다 적용 + 테마랑 스타일까지 적용 -->
<p class="notice-content"></p><!-- text()를 이용,출력 -->
<a href="#page1" data-role="button" data-inline="true" data-mini="true" id="btn_confirm">확인</a>
</div>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
</body>
2.DB연결
기존에 했던 jsp를 이용한 db연결이 아닌 프런트 전용 db연결을 하고자 한다.
우선 pageinit, pagebeforeshow, ready, popup 등을 먼저 만들어 뼈대를 만든 후 그안에
적용되는 매서드들을 코딩하여 만들고자한다.
1.pageinit 이벤트발생(생성자역할)
형식) $('선택자').on('연결시킬 이벤트종류명',처리할 페이지의 id,익명함수)
=> 평소와 달리 처리할 페이지의 id를 넣는게 모바일과 pc의 차이
$(document).on('pageinit','#page1',function(){
dbInit(); //이따 밑에서 만든 함수를 불러온다
})
2.pagebeforeshow 이벤트
page1이 보여지기 전에 (익명함수 안의 내용을) 실행함
$(document).on('pagebeforeshow','#page1',function(){
load(); //밑에 만든 함수
})
3.ready()
모바일에서는 내부적으로 첫번째 실행이 아니다
$(document).ready(function(){
alert('ready 호출됨');
4.글목록이 다 보여준 뒤에 발생하는 이벤트 처리(추가버튼)
$('#btnAdd').bind('click',function(){
add(); // 밑에 만든 add함수
return false;//<a href="~">링크-> 기본적인 기능을 멈춰달라(이동X)
})
5.popup창의 데이터 추가 메세지 나온후 확인버튼을 클릭시 처리할이벤트
$('#btn_confirm').bind('click',function(){
만약 자바라면 다음과 같이 response.sendRedirect 을 사용한다
/*
response.sendRedirect(이동할 페이지(친구목록페이지)) <= 자바라면
<a href="#page1" data-role="button"
data-inline="true" data-mini="true"
id="btn_confirm">확인</a>
*/
하지만 여기서는
var href=$(this).attr('href') //이동할페이지인 page1을 가져오기
//response.sendRedirect(이동할 페이지(친구목록페이지)) jsp에선 이렇게 쓴다
$.mobile.changePage(href); // 자바의 이 문장 대신 이렇게 쓴다
//$.mobile.changePage(이동할페이지의 id);
return false;
})
})
}) 따라서 위에 소스들을 종합하면
<script type="text/javascript">
var db;//생성된 DB정보를 저장할 전역변수
//1.pageinit 이벤트발생(생성자역할)
//->2.pagebeforeshow->페이지를 보여주기전에 해야할일(DB생성,연결)
//형식)$('선택자').on('연결시킬 이벤트종류명',처리할 페이지의 id,익명함수) => 처리할 페이지의 id를 넣는게 모바일과 pc의 차이
$(document).on('pageinit','#page1',function(){ //init?
//alert('pageinit 이벤트 호출됨');// DB생성 및 오픈
dbInit(); // 밑에 만든 DB함수 (없는 데이터베이스를 만드는것)
})
//2.pagebeforeshow 이벤트
$(document).on('pagebeforeshow','#page1',function(){ //page1이 보여지기 전에 (익명함수 안의 내용을) 실행함
//alert('pagebeforeshow 이벤트 호출된')
load(); //밑에 만든 함수
})
//3.ready() 모바일에서는 내부적으로 첫번째 실행이 아니다
$(document).ready(function(){
alert('ready 호출됨');
//4.글목록이 다 보여준 뒤에 발생하는 이벤트 처리(추가버튼)
$('#btnAdd').bind('click',function(){
//alert('버튼확인');
add(); // 밑에 만든 add함수
return false;//<a href="~">링크-> 기본적인 기능을 멈춰달라(이동X)
})
//5.popup창의 데이터 추가 메세지 나온후 확인버튼을 클릭시 처리할이벤트
$('#btn_confirm').bind('click',function(){
/*
response.sendRedirect(이동할 페이지(친구목록페이지)) <= 자바라면
<a href="#page1" data-role="button"
data-inline="true" data-mini="true"
id="btn_confirm">확인</a>
*/
var href=$(this).attr('href') //이동할페이지인 page1을 가져오기
alert(href);//#page1
//response.sendRedirect(이동할 페이지(친구목록페이지)) 자바의 이 문장 대신
$.mobile.changePage(href); // 이렇게 쓴다
//$.mobile.changePage(이동할페이지의 id);
return false;
})
})//ready
</script>이제 위에 만들어진 뼈대들 사이에 적용되있는 함수들을 선언한다.
0.(DB생성 및 테이블생성) 호출함수 작성
function dbInit(){}으로 묶고 그 안에 코딩
우선 현재 브라우저가 DB를 생성할 수 있는지를 체크한다.
=>window.openDatabase를 가지고있는지 확인하고 가지고있지 않다면 경고창을 띄운다.
<script>
function dbInit(){
//1)현재 브라우저가 DB생성할 수 있는지를 체크
if(!window.openDatabase) { //openDatabase을 가지고있지 않다면(앞에 !로 부정문) => chrome(O), Edge(O), IE(인터넷 익스플로어)(X)
alert('openDatabase를 지원하지 않습니다.');
return;//그냥 종료->break문과 동일
}// 가지고있다면
</script>
window.opendatabase를 가지고있다면 이어서
DB생성 및 테이블생성 실행을 한다.
형식) 매개변수(1.생성할 DB명 2.버전(1.0) 3.DB설명 4.DB용량(1MB)
따라서 적용하면
db=openDatabase('weekDb','1.0','friendDB',1024*1024); //10*2024*1024테이블생성=> jsp(pstmt와 같은 역할을 해주는 객체)
=>transaction함수를 이용한다 (tx)
자바에선 pstmt=con.prepareStatement을
=> db.transaction(function(tx){}로 한다.
=> tx ->sql구문을 실행하기위해 필요 =>pstmt와 같다
pstmt.executeUpdate은
=>형식 tx.executeSql('실행시킬 sql구문')로 작성한다.
따라서 function dbInit()은
<script>
function dbInit(){
//1)현재 브라우저가 DB생성할 수 있는지를 체크
if(!window.openDatabase) { //openDatabase을 가지고있지 않다면(앞에 !로 부정문) => chrome(O), Edge(O), IE(인터넷 익스플로어)(X)
alert('openDatabase를 지원하지 않습니다.');
return;//그냥 종료->break문과 동일
}// 가지고있다면
//2)DB생성 및 테이블생성 실행
// 매개변수(1.생성할 DB명 2.버전(1.0) 3.DB설명 4.DB용량(1MB)
db=openDatabase('weekDb','1.0','friend DB',1024*1024);//10*2024*1024
//alert(db); //[object Database]라고 뜨면 생성확인
//2.테이블생성->jsp(pstmt와 같은 역할을 해주는 객체)
//->transaction함수를 이용(tx)
//자바에선 pstmt=con.prepareStatement~=>pstmt.executeUpdate
db.transaction(function(tx){ //tx ->sql구문을 실행하기위해 필요 =>pstmt와 같다
//형식 tx.executeSql('실행시킬 sql구문') //autoincrement 앞은 자동으로 생성된다.
tx.executeSql('create table if not exists weekfriend(num integer primary key autoincrement,name,phone,address)'); //존재하지 않는다면 만들어라 weekfriend는 테이블 이름
})
}//dbInit()
</script>1.DB목록(테이블의 정보)를 보여주는함수 작성
function load(){}
sql을 작성하기 위해 select구문을 사용한다.
여기서 select 구문을 적용하려면 다음과같다.
select->1.실행시킬 sql구문
2.검색필드명 부여(where조건이 있다면) (배열형태로)[필드명(name)]
3.콜백함수(데이터 존재시 출력)
4.DB오류가 발생했을때 처리구문(예외처리)
ex) select * from 테이블명,[] / where이 없을때
select * from 테이블명 where name=? [name]
따라서 function load(){} 안에 db.transaction(function(tx){}을 넣고 그안에
tx.executeSql('select * from weekfriend order by num desc',[],
function(tx,rs){}) 을 작성한다.
여기서 function(tx,rs){}는 정상적으로 sql실행시킬때 처리하는 콜백함수고
tx는 실행시킬 sql, rs(ResultSet)으로 jsp와 같다.
테이블의 목록을 보여주기 위해서 for문을 사용해야되는데 전체 rs의 갯수를 알아야한다
select count() from weekfriend 는 rs의 모든 행의 갯수와 같다
따라서 var rows=rs.rows; 은 select count() from weekfriend 와 같다.
화면의 출력=>ul태그에 출력(초기화)
전의 데이터가 있다면 삭제를 한다.
$('#output').empty();
출력하기 위한 for문
for(var i=0;i<rows.length;i++){
//자바라면 while(rs.next()==true)=>ArrayList->FriendDTO
var row=rows.item(i); // 한건의 레코드 읽어오기
//(FriendDTO) ~get(i) <= 자바라면
//row.필드명=>jsp에선 rs.getInt(정수필드명), rs.getString(필드명)
추가될 목록들
var new_r='<li>';
new_r+='<h4>'+row.num+' '+row.name+'</h4>';
new_r+='<p>'+row.address+'</p>';
new_r+='<span class="ui-li-asid">'+row.phone+'</span>';
new_r+='</li>';
//ul태그에 추가
$('#output').append(new_r); //ul 뒤에 new_r들을 추가 안하면 안뜸
}새로고침
새로고침을 안하면 데이터가 추가되어도 안보인다.
적용하고 일일히 새로고침을 누르지 않으면 추가해도 안보인다 따라서 자동 새로고침을 적용해야한다.
$('#output').listview('refresh'); // 새로고침
에러캐치
function(error){
alert('에러유발'+error);//error=>catch(Exception error)
따라서 DB목록(테이블의 정보)를 보여주는함수 종합은
<script>
//1.DB목록(테이블의 정보)를 보여주는함수
//select * from weekfriend where name='홍길동'
function load(){
db.transaction(function(tx){
/*
select->1.실행시킬 sql구문
2.검색필드명 부여(where조건이 있다면) (배열형태로)[필드명(name)]
3.콜백함수(데이터 존재시 출력)
4.DB오류가 발생했을때 처리구문(예외처리)
ex) select * from 테이블명,[] / where이 없을때
select * from 테이블명 where name=? [name]
*/
tx.executeSql('select * from weekfriend order by num desc',[],
function(tx,rs){//정상적으로 sql실행시킬때 처리하는 콜백함수
//tx(실행시킬 sql) rs(ResultSet)->jsp와 같음
var rows=rs.rows; // select count(*) from weekfriend 와 같다 (=rs의 모든 행의 갯수)
//화면에 출력=>ul태그에 출력(초기화)
$('#output').empty();//전의 데이터가 있다면 삭제후
for(var i=0;i<rows.length;i++){
//자바라면 while(rs.next()==true)=>ArrayList->FriendDTO
var row=rows.item(i); // 한건의 레코드 읽어오기
//(FriendDTO) ~get(i) <= 자바라면
//row.필드명=>jsp에선 rs.getInt(정수필드명), rs.getString(필드명)
var new_r='<li>';
new_r+='<h4>'+row.num+' '+row.name+'</h4>';
new_r+='<p>'+row.address+'</p>';
new_r+='<span class="ui-li-asid">'+row.phone+'</span>';
new_r+='</li>';
//ul태그에 추가
$('#output').append(new_r); //ul 뒤에 new_r들을 추가
}//for
//listview를 자동으로 refresh를 호출(F5) 새로고침
$('#output').listview('refresh');// 새로고침 => 새로고침 안하면 데이터가 추가되어도 안보임 => 일일이 새로고침을 누르지 않으면 안보임 그래서 자동 새로고침 적용
},function(error){
alert('에러유발'+error);//error=>catch(Exception error)
})//tx.executeSql
}) //db.transaction
}//load
</script>2.테이블에 데이터를 넣어주는 함수 필요
function add(){}
<script>
function add(){
var name=$('#name').val();
var phone=$('#phone').val();
var address=$('#address').val();
if(name=="" || phone=="" || address==""){ //name,phone,address중 하나라도 입력 안한다면?
alert('필수로 입략해야 합니다.');
return;//return false;
}
//insert->pstmt.setString(1,name),pstmt.setString(2,phone)
//->[name,phone,address] 위에처럼 써야되는것을 이렇게 간편히 쓸수있음
db.transaction(function(tx){ //사원번호는 자동으로 입력됨
tx.executeSql('insert into weekfriend(name,phone,address)values(?,?,?)',
[name,phone,address],
function(tx,rs){//rs.insertId(집어넣을행번호)
loadMessage(rs.insertId+'번 자료 추가 성공') //밑에있는 메세지함수 불러오기
//input태그 초기화
$('#name').val('');
$('#phone').val('');
$('#address').val('');
},function(error){
alert('inert 오류->'+error);
})//tx.executeSql
})//transaction
}//add
</script>
3.팜업창에 메세지를 출력시켜주는 함수(열기대화상자)
<script>
function loadMessage(msg){//전달받는 msg는 => 위에 rs.insertId+'번 자료 추가 성공'
$('#notice').popup('open');//대화상자가 출력(popup('옵션'))=> 열기(open)대화상자
$('.notice-content').text(msg);
}
</script>전체 총 종합
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,
user-scalable=no">
<title></title>
<!-- mobile css->jQuery(1.8~1.11)->mobile jquery(1.4.5) -->
<link href="../mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet">
<script type="text/javascript" src="../mobile/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
var db;//생성된 DB정보를 저장할 전역변수
//1.pageinit 이벤트발생(생성자역할)
//->2.pagebeforeshow->페이지를 보여주기전에 해야할일(DB생성,연결)
//형식)$('선택자').on('연결시킬 이벤트종류명',처리할 페이지의 id,익명함수) => 처리할 페이지의 id를 넣는게 모바일과 pc의 차이
$(document).on('pageinit','#page1',function(){ //init?
//alert('pageinit 이벤트 호출됨');// DB생성 및 오픈
dbInit(); // 밑에 만든 DB함수 (없는 데이터베이스를 만드는것)
})
//2.pagebeforeshow 이벤트
$(document).on('pagebeforeshow','#page1',function(){ //page1이 보여지기 전에 (익명함수 안의 내용을) 실행함
//alert('pagebeforeshow 이벤트 호출된')
load(); //밑에 만든 함수
})
//3.ready() 모바일에서는 내부적으로 첫번째 실행이 아니다
$(document).ready(function(){
alert('ready 호출됨');
//4.글목록이 다 보여준 뒤에 발생하는 이벤트 처리(추가버튼)
$('#btnAdd').bind('click',function(){
//alert('버튼확인');
add(); // 밑에 만든 add함수
return false;//<a href="~">링크-> 기본적인 기능을 멈춰달라(이동X)
})
//5.popup창의 데이터 추가 메세지 나온후 확인버튼을 클릭시 처리할이벤트
$('#btn_confirm').bind('click',function(){
/*
response.sendRedirect(이동할 페이지(친구목록페이지)) <= 자바라면
<a href="#page1" data-role="button"
data-inline="true" data-mini="true"
id="btn_confirm">확인</a>
*/
var href=$(this).attr('href') //이동할페이지인 page1을 가져오기
alert(href);//#page1
//response.sendRedirect(이동할 페이지(친구목록페이지)) 자바의 이 문장 대신
$.mobile.changePage(href); // 이렇게 쓴다
//$.mobile.changePage(이동할페이지의 id);
return false;
})
})//ready
//0.(DB생성 및 테이블생성) 호출함수 작성(html5)
function dbInit(){
//1)현재 브라우저가 DB생성할 수 있는지를 체크
if(!window.openDatabase) { //openDatabase을 가지고있지 않다면(앞에 !로 부정문) => chrome(O), Edge(O), IE(인터넷 익스플로어)(X)
alert('openDatabase를 지원하지 않습니다.');
return;//그냥 종료->break문과 동일
}// 가지고있다면
//2)DB생성 및 테이블생성 실행
// 매개변수(1.생성할 DB명 2.버전(1.0) 3.DB설명 4.DB용량(1MB)
db=openDatabase('weekDb','1.0','friend DB',1024*1024);//10*2024*1024
//alert(db); //[object Database]라고 뜨면 생성확인
//2.테이블생성->jsp(pstmt와 같은 역할을 해주는 객체)
//->transaction함수를 이용(tx)
//자바에선 pstmt=con.prepareStatement~=>pstmt.executeUpdate
db.transaction(function(tx){ //tx ->sql구문을 실행하기위해 필요 =>pstmt와 같다
//형식 tx.executeSql('실행시킬 sql구문') //autoincrement 앞은 자동으로 생성된다.
tx.executeSql('create table if not exists weekfriend(num integer primary key autoincrement,name,phone,address)'); //존재하지 않는다면 만들어라 weekfriend는 테이블 이름
})
}//dbInit()
//1.DB목록(테이블의 정보)를 보여주는함수
//select * from weekfriend where name='홍길동'
function load(){
db.transaction(function(tx){
/*
select->1.실행시킬 sql구문
2.검색필드명 부여(where조건이 있다면) (배열형태로)[필드명(name)]
3.콜백함수(데이터 존재시 출력)
4.DB오류가 발생했을때 처리구문(예외처리)
ex) select * from 테이블명,[] / where이 없을때
select * from 테이블명 where name=? [name]
*/
tx.executeSql('select * from weekfriend order by num desc',[],
function(tx,rs){//정상적으로 sql실행시킬때 처리하는 콜백함수
//tx(실행시킬 sql) rs(ResultSet)->jsp와 같음
var rows=rs.rows; // select count(*) from weekfriend 와 같다 (=rs의 모든 행의 갯수)
//화면에 출력=>ul태그에 출력(초기화)
$('#output').empty();//전의 데이터가 있다면 삭제후
for(var i=0;i<rows.length;i++){
//자바라면 while(rs.next()==true)=>ArrayList->FriendDTO
var row=rows.item(i); // 한건의 레코드 읽어오기
//(FriendDTO) ~get(i) <= 자바라면
//row.필드명=>jsp에선 rs.getInt(정수필드명), rs.getString(필드명)
var new_r='<li>';
new_r+='<h4>'+row.num+' '+row.name+'</h4>';
new_r+='<p>'+row.address+'</p>';
new_r+='<span class="ui-li-asid">'+row.phone+'</span>';
new_r+='</li>';
//ul태그에 추가
$('#output').append(new_r); //ul 뒤에 new_r들을 추가
}//for
//listview를 자동으로 refresh를 호출(F5) 새로고침
$('#output').listview('refresh');// 새로고침 => 새로고침 안하면 데이터가 추가되어도 안보임 => 일일이 새로고침을 누르지 않으면 안보임 그래서 자동 새로고침 적용
},function(error){
alert('에러유발'+error);//error=>catch(Exception error)
})//tx.executeSql
}) //db.transaction
}//load
//2.테이블에 데이터를 넣어주는 함수 필요
function add(){
var name=$('#name').val();
var phone=$('#phone').val();
var address=$('#address').val();
if(name=="" || phone=="" || address==""){ //name,phone,address중 하나라도 입력 안한다면?
alert('필수로 입략해야 합니다.');
return;//return false;
}
//insert->pstmt.setString(1,name),pstmt.setString(2,phone)
//->[name,phone,address] 위에처럼 써야되는것을 이렇게 간편히 쓸수있음
db.transaction(function(tx){ //사원번호는 자동으로 입력됨
tx.executeSql('insert into weekfriend(name,phone,address)values(?,?,?)',
[name,phone,address],
function(tx,rs){//rs.insertId(집어넣을행번호)
loadMessage(rs.insertId+'번 자료 추가 성공') //밑에있는 메세지함수 불러오기
//input태그 초기화
$('#name').val('');
$('#phone').val('');
$('#address').val('');
},function(error){
alert('inert 오류->'+error);
})//tx.executeSql
})//transaction
}//add
//3.팜업창에 메세지를 출력시켜주는 함수(열기대화상자)
function loadMessage(msg){//전달받는 msg는 => 위에 rs.insertId+'번 자료 추가 성공'
$('#notice').popup('open');//대화상자가 출력(popup('옵션'))=> 열기(open)대화상자
$('.notice-content').text(msg);
}
</script>
</head>
<body>
<!-- 첫번째페이지(친구목록보기) -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구목록보기</h1>
<a href="#page2" data-icon="plus" data-iconpos="right" class="ui-btn-right">등록</a><!-- header라서 button따로 안만들어도 자동생성, 아이콘과 버튼오른쪽으로 이동 -->
</div>
<!-- listview이용(전화번호부 목록처럼 출력),실시간 검색기능(data-filter="true") -->
<div data-role="content">
<ul data-role="listview" data-filter="true" id="output"></ul><!-- -->
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
<!-- 두번째 페이지(친구추가) -->
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed"><!-- 타이틀 고정 -->
<h1>친구추가</h1>
<a data-icon="arrow-l" data-rel="back">이전</a>
</div>
<div data-role="content">
<form id="insfrm">
<div data-role="fieldcontain"><!-- 모바일에선 formgroup 대신 사용-->
<label for="name">이름</label>
<input type="text" id="name">
</div>
<div data-role="fieldcontain">
<label for="phone">전화</label>
<input type="text" id="phone">
</div>
<div data-role="fieldcontain">
<label for="address">주소</label>
<input type="text" id="address">
</div>
<a data-role="button" id="btnAdd">추가</a>
</form>
<!--
팝업창 효과(스타일을 적용) data-mini="true" (작은 대화상자)
data-overlay-theme="b"(부모창과 자식창의 화면이 겹쳐서 보일때 세련되게 보여주는 테마) => 테마를 잘 적용하기 위해서 위에 버전 낮추기
팝업창=>data-role="popup" => 다 적용해서 팝업창 만들기
-->
<div data-role="popup" id="notice" data-theme="d"
data-overlay-theme="b" class="ui-content" style="max-width:340px;text-align:center"> <!-- 위에 주석 다 적용 + 테마랑 스타일까지 적용 -->
<p class="notice-content"></p><!-- text()를 이용,출력 -->
<a href="#page1" data-role="button" data-inline="true" data-mini="true" id="btn_confirm">확인</a>
</div>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
</body>
</html>
2022-08-17
