API tools faq
paste
asimryu

addressbook using indexedDB 2016-07-27 - 1

asimryu
Jul 26th, 2016
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>indexedDB Address Book</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  7.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="jumbotron">
  12.             <h1>My Address Book</h1>
  13.         </div>
  14.         <div class="add-form">
  15.             <form class="form-horizontal">
  16.  
  17.                 <div class="form-group">
  18.                     <label for="adname" class="col-sm-2 control-label">Name</label>
  19.                     <div class="col-sm-10">
  20.                         <input type="text" class="form-control" id="adname" placeholder="이름을 입력하세요." required>
  21.                     </div>
  22.         </div>
  23.  
  24.         <div class="form-group">
  25.                     <label for="ademail" class="col-sm-2 control-label">Email Address</label>
  26.                     <div class="col-sm-10">
  27.                         <input type="email" class="form-control" id="ademail" placeholder="your@email.com" required>
  28.                     </div>
  29.         </div>
  30.  
  31.         <div class="form-group">
  32.                     <label for="adaddress" class="col-sm-2 control-label">Home Address</label>
  33.                     <div class="col-sm-10">
  34.                         <input type="text" class="form-control" id="adaddress" placeholder="주소를 입력하세요." required>
  35.                     </div>
  36.         </div>
  37.  
  38.         <div class="form-group">
  39.                     <label for="adphone" class="col-sm-2 control-label">Phone Number</label>
  40.                     <div class="col-sm-10">
  41.                         <input type="text" class="form-control" id="adphone" placeholder="010-111-2222" required>
  42.                     </div>
  43.         </div>
  44.  
  45.                 <div class="form-group">
  46.                     <label for="adphotos" class="col-sm-2 control-label">Photos</label>
  47.                     <div class="col-sm-10">
  48.                         <div id="photos" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)" style="width:500px;height:150px;background: #FF0;border: 1px solid #888;"></div>
  49.                     </div>
  50.         </div>         
  51.  
  52.                 <div class="form-group">
  53.                     <div class="col-sm-offset-2 col-sm-10">
  54.                         <button type="submit" class="btn-add btn btn-success">Add Friend</button>
  55.                     </div>
  56.                 </div>
  57.  
  58.  
  59.             </form>
  60.         </div>
  61.  
  62.         <div id="list"></div>
  63.  
  64.     </div>
  65.  
  66.     <div id="moreinfo" title="상세정보">
  67.         <h1 id="friendname"></h1>
  68.         <p id="friendemail"></p>
  69.         <p id="friendaddress"></p>
  70.         <p id="friendphone"></p>
  71.         <p id="friendphotos"></p>
  72.     </div>
  73.  
  74.     <div id="updatefrm" title="정보수정">
  75.         <form class="form">
  76.             <div class="form-group">
  77.                     <label for="adname-input">Name</label>
  78.                     <input type="text" class="form-control" id="adname-input" value="">
  79.         </div>
  80.             <div class="form-group">
  81.                     <label for="ademail-input">Email</label>
  82.                     <input type="email" class="form-control" id="ademail-input" value="">
  83.         </div>
  84.             <div class="form-group">
  85.                     <label for="adaddress-input">Address</label>
  86.                     <input type="text" class="form-control" id="adaddress-input" value="">
  87.         </div>
  88.             <div class="form-group">
  89.                     <label for="adphone-input">Phone</label>
  90.                     <input type="text" class="form-control" id="adphone-input" value="">
  91.         </div>
  92.     </form>
  93.     </div> 
  94.  
  95.     <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  96.     <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  97.     <script>
  98. var db;
  99. //addressbook 데이터베이스 오픈(없으면 생성)
  100. var request = window.indexedDB.open("adbook",1);
  101.  
  102. //DB Open Error Handling
  103. request.onerror = function(event) {
  104.     console.log("DB Open Error");
  105. }
  106.  
  107. //After DB Open
  108. request.onsuccess = function(event) {
  109.   db = request.result;
  110.   readAllData();
  111. }
  112.  
  113. request.onupgradeneeded = function(event) {
  114.     var result = event.target.result;
  115.     var objectStore = result.createObjectStore("address",{ keyPath: "id", autoIncrement:true });
  116. }
  117.  
  118. function readAllData(){
  119.     var tr = db.transaction(["address"]);
  120.     var store = tr.objectStore("address");
  121.     store.openCursor().onsuccess = function(event) {
  122.         var cursor = event.target.result; //한 줄 얻어내기
  123.         if (cursor) {
  124.             //console.log(cursor.value);
  125.             addList(cursor.value);
  126.             cursor.continue(); //다음 줄로 이동
  127.         }
  128.     };
  129. }
  130.  
  131. function readData(id,act){
  132.     var tr = db.transaction(["address"]);
  133.     var store = tr.objectStore("address");
  134.     var request = store.get(id);
  135.     request.onsuccess = function(event){
  136.         var data = request.result;
  137.         if( act == "read") {
  138.             popUpInfo(data);   
  139.         } else if( act =="edit" ) {
  140.             popUpEdit(data);   
  141.         }
  142.        
  143.     };
  144.     request.onerror = function(event){
  145.         console.log("read error");
  146.     };
  147. }
  148.  
  149.  
  150. $("#moreinfo").hide();
  151. $("#updatefrm").hide();
  152.  
  153. function popUpInfo(data){
  154.     if( ! data ) return;
  155.     $("#friendname").text(data.adname);
  156.     $("#friendemail").text(data.ademail);
  157.     $("#friendaddress").text(data.adaddress);
  158.     $("#friendphone").text(data.adphone);
  159.  
  160.     var photolist = data.photos;
  161.     var i;
  162.     for( i=0; i<photolist.length;i++){
  163.         var src = photolist[i].src;
  164.         var img = "<img src='" + src + "' width='100' height='100' style='margin: 5px;'>";
  165.         $("#friendphotos").append(img);
  166.     }
  167.  
  168.     $("#moreinfo").dialog({
  169.         width: 500,
  170.         height: 500,
  171.         title: data.adname + " 상세정보",
  172.         modal: true
  173.     });
  174. }
  175.  
  176.  
  177. function popUpEdit(data){
  178.     if( ! data ) return;
  179.     $("#adname-input").val(data.adname);
  180.     $("#ademail-input").val(data.ademail);
  181.     $("#adaddress-input").val(data.adaddress);
  182.     $("#adphone-input").val(data.adphone);
  183.  
  184.     $("#updatefrm").dialog({
  185.         width: 500,
  186.         height: 500,
  187.         title: data.adname + " 정보수정",
  188.         modal: true,
  189.         buttons: {
  190.             "저장":function(){
  191.                
  192.             },
  193.             "닫기":function(){
  194.                 $(this).dialog("close");
  195.             }
  196.         }
  197.     });
  198. }
  199.  
  200. function addList(data){
  201.     if( ! data ) return;
  202.     var html = "<div class='panel panel-default' id='list" + data.id + "'>";
  203.     html += "<div class='panel-body'>";
  204.     html += "<div class='row'>";
  205.     html += "<div class='col-md-6'>";
  206.     html += "<h1>" + data.adname + "</h1>";
  207.     html += "</div>";
  208.     html += "<div class='col-md-6'>";
  209.     html += "<a class='btn-del btn btn-danger' data-id='" + data.id + "'>삭제</a>";
  210.     html += "&nbsp;<a class='btn-read btn btn-primary' data-id='" + data.id + "'>보기</a>";
  211.     html += "&nbsp;<a class='btn-edit btn btn-warning' data-id='" + data.id + "'>수정</a>";
  212.     html += "</div>";
  213.     html += "</div>";
  214.     html += "</div>";
  215.     html += "</div>";
  216.     $("#list").prepend(html);
  217. }
  218.  
  219.  
  220.  
  221. function deleteData(id){
  222.     if( ! id ) return false;
  223.  var tr = db.transaction(["address"], "readwrite");
  224.  var store = tr.objectStore("address");
  225.  var request = store.delete(id);
  226.  request.onsuccess = function(event) {
  227.     $("#list" + id).remove();
  228.  };
  229.  request.onerror = function(event) { }
  230. }
  231.  
  232.  
  233. function saveData(data){
  234.     var tr = db.transaction(["address"], "readwrite");
  235.     var store = tr.objectStore("address");
  236.     var request = store.add(data);
  237.     request.onsuccess = function(event){
  238.         //마지막에 추가한 레코드의 id를 구함
  239.         var id = event.target.result;
  240.   data.id = id; // 데이터 객체 data에 id를 추가
  241.         addList(data);
  242.     };
  243.     request.onerror = function(event) {
  244.         console.log("Error : data save error");
  245.  } 
  246. }
  247.  
  248. function updateData(id){
  249.     var tr = db.transaction(["address"], "readwrite");
  250.     var store = tr.objectStore("address");
  251.  
  252.     store.get(id).onsuccess = function(event){
  253.         var data = event.target.result;
  254.         data.adname = $("#adname-input").val();
  255.         data.ademail = $("#ademail-input").val();
  256.         data.adphone = $("#adphone-input").val();
  257.  
  258.         var dbupdate = store.put(data);
  259.   dbupdate.onsuccess = function(event){
  260.             console.log('데이터 수정 성공');
  261.   };
  262.         dbupdate.onerror = function(event){
  263.             console.log('데이터 수정 실패');
  264.         };
  265.     };
  266. }
  267.  
  268. $(".btn-add").on("click",function(e){
  269.     e.preventDefault();
  270.     var friend = {};
  271.     friend.adname = $("#adname").val();
  272.     friend.ademail = $("#ademail").val();
  273.     friend.adaddress = $("#adaddress").val();
  274.     friend.adphone = $("#adphone").val();
  275.     friend.photos = photos;
  276.     saveData(friend);
  277. });
  278.  
  279. $("#list").on("click",".btn-del",function(){
  280.     var id = $(this).attr("data-id");
  281.     if( ! id ) return;
  282.     id = parseInt(id,10);
  283.     deleteData(id);
  284. });
  285.  
  286. $("#list").on("click",".btn-read",function(){
  287.     var id = $(this).attr("data-id");
  288.     if( ! id ) return;
  289.     id = parseInt(id,10);
  290.     readData(id,"read");
  291. });
  292.  
  293. $("#list").on("click",".btn-edit",function(){
  294.     var id = $(this).attr("data-id");
  295.     if( ! id ) return;
  296.     id = parseInt(id,10);
  297.     readData(id,"edit");
  298. });
  299.  
  300. function dragover(event){
  301.     event.preventDefault();
  302.     var id = event.target.id;
  303.     $("#" + id).css({"background":"red"});
  304. }
  305.  
  306. function dragleave(event){
  307.     event.preventDefault();
  308.     var id = event.target.id;
  309.     $("#" + id).css({"background":"#ff0"});
  310. }
  311.  
  312. var photos;
  313. function drop(event){
  314.     event.preventDefault();
  315.     photos = [];
  316.     var data = event.dataTransfer;
  317.     var files = data.files;
  318.     var i;
  319.     for( i=0; i<files.length; i++){
  320.         if( files[i].type == "image/jpeg" || files[i].type == "image/png" || files[i].type == "image/gif" ) {
  321.             addPhotos(files[i]);
  322.         }
  323.     }
  324. }
  325.  
  326. function addPhotos(file){
  327.     var photo = {};
  328.     photo.name = file.name;
  329.     photo.size = file.size;
  330.     photo.type = file.type;
  331.     var reader = new FileReader();
  332.     reader.addEventListener("load",function(){
  333.         photo.src = reader.result;
  334.         //console.log(photo);
  335.         photos.push(photo);
  336.     });
  337.     reader.readAsDataURL(file);
  338. }      
  339.     </script>
  340. </body>
  341. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!