API tools faq
paste
asimryu

2016-07.27 임시

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