API tools faq
paste
asimryu

indexedDB - 친구 추가,수정,삭제, 사진추가 및 base64 업로드 포함

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