API tools faq
paste
Advertisement
asimryu

indexedDB - 친구 추가,수정,삭제, 사진추가 포함

asimryu
Dec 5th, 2017
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.79 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</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.1/themes/start/jquery-ui.css">
  8.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.     <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  10.     <style>
  11.         .add-friend { display: none; }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="container">
  16.         <div class="jumbotron">
  17.             <h1 class="text-center">My Friends</h1>
  18.             <p class="text-center"><button class="btn-add btn btn-primary">친구추가</button></p>
  19.         </div>
  20.         <div class="add-friend">
  21.             <h2>친구추가</h2>
  22.             <form onsubmit="return false">
  23.                 <div class="form-group">
  24.                     <input type="text" name="fname" id="fname" class="form-control" placeholder="이름">
  25.                 </div>
  26.                 <div class="form-group">
  27.                     <input type="text" name="femail" id="femail" class="form-control" placeholder="Email">
  28.                 </div>
  29.                 <div class="form-group">
  30.                     <input type="text" name="fphone" id="fphone" class="form-control" placeholder="전화번호">
  31.                 </div>
  32.                 <div class="form-group">
  33.                     <input type="text" name="fschool" id="fschool" class="form-control" placeholder="학교">
  34.                 </div>
  35.                 <div class="form-group">
  36.                     <input type="file" name="fphoto" id="fphoto" class="form-control" placeholder="사진">
  37.                     <img id="preview" src="" alt="미리보기이미지" height="100">
  38.                 </div>
  39.                 <div class="form-group">
  40.                     <a href="#!" class="btn-save btn btn-success">친구등록</a>
  41.                 </div>
  42.             </form>
  43.         </div>
  44.  
  45.         <div>
  46.             <table id="flist" class="table">
  47.                 <tr class="active">
  48.                     <td>사진</td>
  49.                     <td>ID</td>
  50.                     <td>이름</td>
  51.                     <td>Email</td>
  52.                     <td>연락처</td>
  53.                     <td>학교</td>
  54.                     <td>수정/삭제</td>
  55.                 </tr>
  56.             </table>
  57.         </div>
  58.  
  59.     </div>
  60.  
  61. <div class="edit-friend" style="display: none;">
  62.             <h2>친구수정</h2>
  63.             <form onsubmit="return false">
  64.                 <div class="form-group">
  65.                     <input type="hidden" name="fid" id="fid">
  66.                     <label for="e-fname">이름</label>
  67.                     <input type="text" name="fname" id="e-fname" class="form-control" placeholder="이름">
  68.                 </div>
  69.                 <div class="form-group">
  70.                     <label for="e-femail">Email</label>
  71.                     <input type="text" name="femail" id="e-femail" class="form-control" placeholder="Email">
  72.                 </div>
  73.                 <div class="form-group">
  74.                     <label for="e-fphone">전화번호</label>
  75.                     <input type="text" name="fphone" id="e-fphone" class="form-control" placeholder="전화번호">
  76.                 </div>
  77.                 <div class="form-group">
  78.                     <label for="e-fschool">학교</label>
  79.                     <input type="text" name="fschool" id="e-fschool" class="form-control" placeholder="학교">
  80.                 </div>
  81.                 <div class="form-group">
  82.                     <a href="#!" class="btn-update btn btn-success">친구수정</a>
  83.                 </div>
  84.             </form>
  85.         </div>
  86.  
  87.     <script>
  88.         var db;
  89.  
  90.         //db "adbook" open(없으면 새로 만들어 줌, ver 1)
  91.         var request = window.indexedDB.open("adbook",1);
  92.         request.onerror = function(event){
  93.             console.log("DB Open Error");
  94.         };
  95.         request.onsuccess = function(event){
  96.             db = request.result;
  97.             readAll();
  98.         };
  99.         request.onupgradeneeded = function(event){
  100.             var result = event.target.result;
  101.             var objStore = result.createObjectStore(
  102.                 "address",
  103.                 {"keyPath":"id", autoIncrement:true}
  104.                 );
  105.         }
  106.  
  107.         $(".btn-add").on("click",function(){
  108.             $(".add-friend").slideToggle();
  109.         });
  110.  
  111.         $(".btn-save").on("click",function(e){
  112.             e.preventDefault();//링크 이동 방지
  113.             var friend = {};
  114.             friend.fname = $("#fname").val();
  115.             friend.femail = $("#femail").val();
  116.             friend.fphone = $("#fphone").val();
  117.             friend.fschool = $("#fschool").val();
  118.             friend.fphoto = $("#preview").attr("src");
  119.             if( ! friend.fname || ! friend.femail || ! friend.fphone || ! friend.fschool ) {
  120.                 return;
  121.             }
  122.             saveData(friend);
  123.         });
  124.  
  125.         function saveData(data) {
  126.             var trz = db.transaction(["address"],"readwrite");
  127.             var store = trz.objectStore("address");
  128.             var request = store.add(data);
  129.             request.onsuccess = function(event){
  130.                 var id = event.target.result;
  131.                 data.id = id;
  132.                 addList(data);
  133.                 $("#fname").val("");
  134.                 $("#femail").val("");
  135.                 $("#fphone").val("");
  136.                 $("#fschool").val("");
  137.                 $("#preview").attr("src","");
  138.                 $(".add-friend").slideUp();
  139.             };
  140.             request.onerror = function(event){
  141.                 console.log("Error on Save");
  142.             }
  143.         }
  144.  
  145.         function readAll() {
  146.             var trz = db.transaction(["address"]);
  147.             var store = trz.objectStore("address");
  148.             store.openCursor().onsuccess = function(event){
  149.                 var cursor = event.target.result;
  150.                 if( cursor ) {
  151.                     addList(cursor.value);
  152.                     cursor.continue();
  153.                 }
  154.             }
  155.         }
  156.  
  157.         function addList(data) {
  158.             if( ! data ) return;
  159.             var row = "<tr id='friend-" + data.id + "'>";
  160.             row += "<td class='data-fphoto'>";
  161.             row += "<img src='" + data.fphoto + "' width='50' alt=''>";
  162.             row += "</td>";
  163.             row += "<td class='data-id'>" + data.id + "</td>";
  164.             row += "<td class='data-fname'>" + data.fname + "</td>";
  165.             row += "<td class='data-femail'>" + data.femail + "</td>";
  166.             row += "<td class='data-fphone'>" + data.fphone + "</td>";
  167.             row += "<td class='data-fschool'>" + data.fschool + "</td>";
  168.             row += "<td>";
  169.             row += "<a href='" + data.id + "' class='btn-edit btn btn-warning btn-sm'>수정</a>";
  170.             row += " <a href='" + data.id + "' class='btn-delete btn btn-danger btn-sm'>삭제</a>";
  171.             row += "</td>";
  172.             row += "</tr>";
  173.             $("#flist tr:last").after(row);
  174.         }
  175.  
  176.         $("#flist").on("click",".btn-delete",function(e){
  177.             e.preventDefault();
  178.             var id = $(this).attr("href");
  179.             if( ! id ) return;
  180.             deleteRecord(id);
  181.         });
  182.  
  183.         function deleteRecord(id) {
  184.             if( ! id ) return false;
  185.             var id = parseInt(id,10);
  186.             var trz = db.transaction(["address"],"readwrite");
  187.             var objectStore = trz.objectStore("address");
  188.             var request = objectStore.delete(id);
  189.             request.onsuccess = function(event){
  190.                 $("#friend-" + id).remove();
  191.             };
  192.             request.onerror = function(event){
  193.                 alert("삭제실패");
  194.             };
  195.         }
  196.  
  197.     $("#flist").on("click",".btn-edit",function(e){
  198.             e.preventDefault();
  199.             var id = $(this).attr("href");
  200.             if( ! id ) return;
  201.             editRecord(id);
  202.         });    
  203.  
  204.     function editRecord(id){
  205.         if( ! id ) return;
  206.         id = parseInt(id,10);
  207.         var trz = db.transaction(["address"]);
  208.         var objectStore = trz.objectStore("address");
  209.         var request = objectStore.get(id);
  210.         request.onsuccess = function(event){
  211.             var data = request.result;
  212.             if( ! data ) return;
  213.             $("#fid").val(data.id);
  214.             $("#e-fname").val(data.fname);
  215.             $("#e-femail").val(data.femail);
  216.             $("#e-fphone").val(data.fphone);
  217.             $("#e-fschool").val(data.fschool);
  218.             $(".edit-friend").dialog({
  219.                 title: "친구수정",
  220.                 width: 500,
  221.                 height: 500,
  222.                 modal: true
  223.             });
  224.         };
  225.         request.onerror = function(event){
  226.             console.log("read error");
  227.         };
  228.     }
  229.  
  230.     $(".btn-update").on("click", function(){
  231.         var data = {};
  232.         var id = $("#fid").val();
  233.         if( ! id ) return;
  234.         id = parseInt(id, 10);
  235.         data.fname = $("#e-fname").val();
  236.         data.femail = $("#e-femail").val();
  237.         data.fphone = $("#e-fphone").val();
  238.         data.fschool = $("#e-fschool").val();
  239.         if( ! data.fname || ! data.femail || ! data.fphone || ! data.fschool ) {
  240.             alert("필수 입력 사항이 빠졌습니다.");
  241.             return;
  242.         }
  243.         var trz = db.transaction(["address"], "readwrite");
  244.         var objectStore = trz.objectStore("address");
  245.         var request = objectStore.get(id);
  246.         request.onsuccess = function(event){
  247.             var dbdata = event.target.result;
  248.             dbdata.fname = data.fname;
  249.             dbdata.femail = data.femail;
  250.             dbdata.fphone = data.fphone;
  251.             dbdata.fschool = data.fschool;
  252.             var dbupdate = objectStore.put(dbdata);
  253.             dbupdate.onsuccess = function(event){
  254.                 $("#friend-" + id).children("td.data-fname").text(data.fname);
  255.                 $("#friend-" + id).children("td.data-femail").text(data.femail);
  256.                 $("#friend-" + id).children("td.data-fphone").text(data.fphone);
  257.                 $("#friend-" + id).children("td.data-fschool").text(data.fschool);
  258.                 $(".edit-friend").dialog("close");
  259.             };
  260.             dbupdate.onerror = function(event){
  261.                 console.log('데이터 수정 실패');
  262.             };
  263.         };
  264.         request.onerror = function(event){
  265.             console.log('데이터 수정 실패');
  266.         }      
  267.  
  268.     });
  269.  
  270.     $("#fphoto").change(function(){
  271.         photoView(this);
  272.     });
  273.  
  274.     function photoView(photo) {
  275.         if( ! photo.files ) return;
  276.         if( ! photo.files[0] ) return;
  277.         var reader = new FileReader();
  278.         reader.onload = function(event){
  279.             var src = event.target.result;
  280.             $("#preview").attr("src", src);
  281.         };
  282.         reader.readAsDataURL(photo.files[0]);
  283.     }
  284.  
  285.  
  286.  
  287.     </script>
  288. </body>
  289. </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!