API tools faq
paste
Advertisement
asimryu

addressbook using indexedDB 2

asimryu
Jul 26th, 2016
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.71 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.     <style>
  9.         #photos {
  10.             height:150px;
  11.             background: #FF0;
  12.             border: 1px solid #888;
  13.         }
  14.         .photolist-edit {
  15.             position: relative;
  16.             display: inline-block;
  17.             width: 100px;
  18.             height: 100px;
  19.             border: 1px solid #888;
  20.             margin: 5px;
  21.         }
  22.         .photolist-edit img {
  23.             position: absolute;
  24.             width: 100px;
  25.             height: 100px;
  26.             left: 0;
  27.             top: 0;
  28.         }
  29.         .photolist-delete {
  30.             position: absolute;
  31.             top: 3px;
  32.             right: 3px;
  33.             width: 20px;
  34.             height: 20px;
  35.             border-radius: 10px;
  36.             line-height: 20px;
  37.             text-align: center;
  38.             background-color: black;
  39.             color: white;
  40.             cursor: pointer;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="jumbotron">
  47.             <h1>My Address Book</h1>
  48.         </div>
  49.         <div class="add-form">
  50.             <form class="form-horizontal">
  51.                 <div class="form-group">
  52.                     <label for="adname" class="col-sm-2 control-label">Name</label>
  53.                     <div class="col-sm-10">
  54.                         <input type="text" class="form-control" id="adname" placeholder="이름을 입력하세요." required>
  55.                     </div>
  56.                 </div>
  57.  
  58.                 <div class="form-group">
  59.                     <label for="ademail" class="col-sm-2 control-label">Email Address</label>
  60.                     <div class="col-sm-10">
  61.                         <input type="email" class="form-control" id="ademail" placeholder="your@email.com" required>
  62.                     </div>
  63.                 </div>
  64.  
  65.                 <div class="form-group">
  66.                     <label for="adaddress" class="col-sm-2 control-label">Home Address</label>
  67.                     <div class="col-sm-10">
  68.                         <input type="text" class="form-control" id="adaddress" placeholder="주소를 입력하세요." required>
  69.                     </div>
  70.                 </div>
  71.  
  72.                 <div class="form-group">
  73.                     <label for="adphone" class="col-sm-2 control-label">Phone Number</label>
  74.                     <div class="col-sm-10">
  75.                         <input type="text" class="form-control" id="adphone" placeholder="010-111-2222" required>
  76.                     </div>
  77.                 </div>
  78.  
  79.                 <div class="form-group">
  80.                     <label for="adphotos" class="col-sm-2 control-label">Photos</label>
  81.                     <div class="col-sm-10">
  82.                         <div id="photos" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)" class="col-sm-12"></div>
  83.                     </div>
  84.                 </div>         
  85.  
  86.                 <div class="form-group">
  87.                 <div class="col-sm-offset-2 col-sm-10">
  88.                 <button type="submit" class="btn-add btn btn-success">Add Friend</button>
  89.                 </div>
  90.                 </div>
  91.             </form>
  92.         </div>
  93.  
  94.         <div id="list"></div>
  95.  
  96.     </div>
  97.  
  98.     <div id="moreinfo" title="상세정보">
  99.         <h1 id="friendname"></h1>
  100.         <p id="friendemail"></p>
  101.         <p id="friendaddress"></p>
  102.         <p id="friendphone"></p>
  103.         <p id="friendphotos"></p>
  104.     </div>
  105.  
  106.     <div id="updatefrm" title="정보수정">
  107.         <form class="form">
  108.             <div class="form-group">
  109.                 <label for="adname-input">Name</label>
  110.                 <input type="text" class="form-control" id="adname-input" value="">
  111.             </div>
  112.             <div class="form-group">
  113.                 <label for="ademail-input">Email</label>
  114.                 <input type="email" class="form-control" id="ademail-input" value="">
  115.             </div>
  116.             <div class="form-group">
  117.                 <label for="adaddress-input">Address</label>
  118.                 <input type="text" class="form-control" id="adaddress-input" value="">
  119.             </div>
  120.             <div class="form-group">
  121.                 <label for="adphone-input">Phone</label>
  122.                 <input type="text" class="form-control" id="adphone-input" value="">
  123.             </div>
  124.             <div class="form-group">
  125.                 <label for="adphotos-input">Photos</label>
  126.                 <div id="adphotos-input"></div>
  127.             </div>         
  128.         </form>
  129.     </div> 
  130.  
  131.     <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  132.     <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  133.     <script>
  134.         var db;
  135.         //addressbook 데이터베이스 오픈(없으면 생성)
  136.         var request = window.indexedDB.open("adbook",1);
  137.  
  138.         //DB Open Error Handling
  139.         request.onerror = function(event) {
  140.             console.log("DB Open Error");
  141.         }
  142.  
  143.         //After DB Open
  144.         request.onsuccess = function(event) {
  145.           db = request.result;
  146.           readAllData();
  147.         }
  148.  
  149.         request.onupgradeneeded = function(event) {
  150.             var result = event.target.result;
  151.             var objectStore = result.createObjectStore("address",{ keyPath: "id", autoIncrement:true });
  152.         }
  153.  
  154.         function readAllData(){
  155.             var tr = db.transaction(["address"]);
  156.             var store = tr.objectStore("address");
  157.             store.openCursor().onsuccess = function(event) {
  158.                 var cursor = event.target.result; //한 줄 얻어내기
  159.                 if (cursor) {
  160.                     //console.log(cursor.value);
  161.                     addList(cursor.value);
  162.                     cursor.continue(); //다음 줄로 이동
  163.                 }
  164.             };
  165.         }
  166.  
  167.         function readData(id,act){
  168.             var tr = db.transaction(["address"]);
  169.             var store = tr.objectStore("address");
  170.             var request = store.get(id);
  171.             request.onsuccess = function(event){
  172.                 var data = request.result;
  173.                 if( act == "read") {
  174.                     popUpInfo(data);   
  175.                 } else if( act =="edit" ) {
  176.                     popUpEdit(data);   
  177.                 }
  178.                
  179.             };
  180.             request.onerror = function(event){
  181.                 console.log("read error");
  182.             };
  183.         }
  184.  
  185.  
  186.         $("#moreinfo").hide();
  187.         $("#updatefrm").hide();
  188.  
  189.  
  190.         function popUpInfo(data){
  191.             if( ! data ) return;
  192.             $("#friendname").text(data.adname);
  193.             $("#friendemail").text(data.ademail);
  194.             $("#friendaddress").text(data.adaddress);
  195.             $("#friendphone").text(data.adphone);
  196.  
  197.             var photolist = data.photos;
  198.             var i;
  199.             for( i=0; i<photolist.length;i++){
  200.                 var src = photolist[i].src;
  201.                 var img = "<img src='" + src + "' width='100' height='100' style='margin: 5px;'>";
  202.                 $("#friendphotos").append(img);
  203.             }
  204.  
  205.             $("#moreinfo").dialog({
  206.                 width: 500,
  207.                 height: 500,
  208.                 title: data.adname + " 상세정보",
  209.                 modal: true
  210.             });
  211.         }
  212.  
  213.         var photoeditlist = [];
  214.  
  215.         function popUpEdit(data){
  216.             if( ! data ) return;
  217.             var id;
  218.             $("#updatefrm").dialog({
  219.                 width: 500,
  220.                 height: 500,
  221.                 title: data.adname + " 정보수정",
  222.                 modal: true,
  223.                 open: function(){
  224.                     id = data.id;
  225.                     $("#adname-input").val(data.adname);
  226.                     $("#ademail-input").val(data.ademail);
  227.                     $("#adaddress-input").val(data.adaddress);
  228.                     $("#adphone-input").val(data.adphone);
  229.  
  230.                     photoeditlist = data.photos;
  231.                     var i;
  232.                     for( i=0; i<photoeditlist.length;i++){
  233.                         var src = photoeditlist[i].src;
  234.                         var img = "<div class='photolist-edit'>";
  235.                         img += "<img src='" + src + "'>";
  236.                         img += "<div class='photolist-delete' data-imgid='" + i + "'>X</div>";
  237.                         img += "</div>";
  238.                         $("#adphotos-input").append(img);
  239.                     }
  240.                 },
  241.                 buttons: {
  242.                     "저장":function(){
  243.                         var tr = db.transaction(["address"], "readwrite");
  244.                         var store = tr.objectStore("address");
  245.                         var request = store.get(id);
  246.  
  247.                         request.onsuccess = function(event){
  248.                             var data = event.target.result;
  249.                             data.adname = $("#adname-input").val();
  250.                             data.ademail = $("#ademail-input").val();
  251.                             data.adaddress = $("#ademail-input").val();
  252.                             data.adphone = $("#adphone-input").val();
  253.                             data.photos = photoeditlist;
  254.  
  255.                             var dbupdate = store.put(data);
  256.                             dbupdate.onsuccess = function(event){
  257.                                 console.log('데이터 수정 성공');
  258.                                 $("#list" + id + " .adname").text(data.adname);
  259.                                 $("#updatefrm").dialog("close");
  260.                             };
  261.                             dbupdate.onerror = function(event){
  262.                                 console.log('데이터 수정 실패');
  263.                             };
  264.                         };
  265.                         request.onerror = function(event){
  266.                             console.log('데이터 수정 실패');
  267.                         }
  268.                     },
  269.                     "닫기":function(){
  270.                         $(this).dialog("close");
  271.                     }
  272.                 },
  273.                 close: function(){
  274.                     $("#adname-input").val("");
  275.                     $("#ademail-input").val("");
  276.                     $("#ademail-input").val("");
  277.                     $("#adphone-input").val("");   
  278.                     $("#adphotos-input").html("");
  279.                     while (photoeditlist.length) { photoeditlist.pop(); }
  280.                 }
  281.             });
  282.         }
  283.  
  284.         $("#adphotos-input").on("click",".photolist-delete",function(){
  285.             var id = $(this).attr("data-imgid");
  286.             photoeditlist.splice(id, 1);//배열에서 특정 index를 제거함
  287.             $(this).parent(".photolist-edit").remove();
  288.  
  289.             //배열에서 하나를 삭제하였으므로 포토리스트에서 버튼마다 주어진 번호(배열기준)를 다시 0부터 순서대로 부여해주어야 함.
  290.             var i = 0;
  291.             $("#adphotos-input .photolist-delete").each(function(){
  292.                 $(this).attr("data-imgid",i);
  293.                 i++;
  294.             });
  295.  
  296.         });
  297.  
  298.         function addList(data){
  299.             if( ! data ) return;
  300.             var html = "<div class='panel panel-default' id='list" + data.id + "'>";
  301.             html += "<div class='panel-body'>";
  302.             html += "<div class='row'>";
  303.             html += "<div class='col-md-6'>";
  304.             html += "<h1 class='adname'>" + data.adname + "</h1>";
  305.             html += "</div>";
  306.             html += "<div class='col-md-6'>";
  307.             html += "<a class='btn-del btn btn-danger' data-id='" + data.id + "'>삭제</a>";
  308.             html += "&nbsp;<a class='btn-read btn btn-primary' data-id='" + data.id + "'>보기</a>";
  309.             html += "&nbsp;<a class='btn-edit btn btn-warning' data-id='" + data.id + "'>수정</a>";
  310.             html += "</div>";
  311.             html += "</div>";
  312.             html += "</div>";
  313.             html += "</div>";
  314.             $("#list").prepend(html);
  315.         }
  316.  
  317.  
  318.  
  319.         function deleteData(id){
  320.             if( ! id ) return false;
  321.             var tr = db.transaction(["address"], "readwrite");
  322.             var store = tr.objectStore("address");
  323.             var request = store.delete(id);
  324.             request.onsuccess = function(event) {
  325.                 $("#list" + id).remove();
  326.             }; 
  327.             request.onerror = function(event) {
  328.                 //some error code
  329.             }
  330.         }
  331.  
  332.  
  333.         function saveData(data){
  334.             var tr = db.transaction(["address"], "readwrite");
  335.             var store = tr.objectStore("address");
  336.             var request = store.add(data);
  337.             request.onsuccess = function(event){
  338.                 //마지막에 추가한 레코드의 id를 구함
  339.                 var id = event.target.result;
  340.                 data.id = id; // 데이터 객체 data에 id를 추가
  341.                 addList(data);
  342.             };
  343.             request.onerror = function(event) {
  344.                 console.log("Error : data save error");
  345.             }  
  346.         }
  347.  
  348.         function updateData(id){
  349.             var tr = db.transaction(["address"], "readwrite");
  350.             var store = tr.objectStore("address");
  351.             var request = store.get(id);
  352.  
  353.             request.onsuccess = function(event){
  354.                 var data = event.target.result;
  355.                 data.adname = $("#adname-input").val();
  356.                 data.ademail = $("#ademail-input").val();
  357.                 data.adaddress = $("#ademail-input").val();
  358.                 data.adphone = $("#adphone-input").val();
  359.  
  360.                 var dbupdate = store.put(data);
  361.                 dbupdate.onsuccess = function(event){
  362.                     console.log('데이터 수정 성공');
  363.                     return true;
  364.                 };
  365.                 dbupdate.onerror = function(event){
  366.                     console.log('데이터 수정 실패');
  367.                     return false;
  368.                 };
  369.             };
  370.             request.onerror = function(event){
  371.                 console.log('데이터 수정 실패');
  372.                 return false;
  373.             }
  374.         }
  375.  
  376.         $(".btn-add").on("click",function(e){
  377.             e.preventDefault();
  378.             var friend = {};
  379.             friend.adname = $("#adname").val();
  380.             friend.ademail = $("#ademail").val();
  381.             friend.adaddress = $("#adaddress").val();
  382.             friend.adphone = $("#adphone").val();
  383.             friend.photos = photos;
  384.             saveData(friend);
  385.         });
  386.  
  387.         $("#list").on("click",".btn-del",function(){
  388.             var id = $(this).attr("data-id");
  389.             if( ! id ) return;
  390.             id = parseInt(id,10);
  391.             deleteData(id);
  392.         });
  393.  
  394.         $("#list").on("click",".btn-read",function(){
  395.             var id = $(this).attr("data-id");
  396.             if( ! id ) return;
  397.             id = parseInt(id,10);
  398.             readData(id,"read");
  399.         });
  400.  
  401.         $("#list").on("click",".btn-edit",function(){
  402.             var id = $(this).attr("data-id");
  403.             if( ! id ) return;
  404.             id = parseInt(id,10);
  405.             readData(id,"edit");
  406.         });
  407.  
  408.         function dragover(event){
  409.             event.preventDefault();
  410.             var id = event.target.id;
  411.             $("#" + id).css({"background":"red"});
  412.         }
  413.  
  414.         function dragleave(event){
  415.             event.preventDefault();
  416.             var id = event.target.id;
  417.             $("#" + id).css({"background":"#ff0"});
  418.         }
  419.  
  420.         var photos;
  421.         function drop(event){
  422.             event.preventDefault();
  423.             photos = [];
  424.             var data = event.dataTransfer;
  425.             var files = data.files;
  426.             var i;
  427.             for( i=0; i<files.length; i++){
  428.                 if( files[i].type == "image/jpeg" || files[i].type == "image/png" || files[i].type == "image/gif" ) {
  429.                     addPhotos(files[i]);
  430.                 }
  431.             }
  432.         }
  433.  
  434.         function addPhotos(file){
  435.             var photo = {};
  436.             photo.name = file.name;
  437.             photo.size = file.size;
  438.             photo.type = file.type;
  439.             var reader = new FileReader();
  440.             reader.addEventListener("load",function(){
  441.                 photo.src = reader.result;
  442.                 //console.log(photo);
  443.                 photos.push(photo);
  444.             });
  445.             reader.readAsDataURL(file);
  446.         }      
  447.     </script>
  448. </body>
  449. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!