addressbook using indexedDB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexedDB Address Book</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1>My Address Book</h1>
        </div>
        <div class="add-form">
            <form class="form-horizontal">

                <div class="form-group">
                    <label for="adname" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="adname" placeholder="이름을 입력하세요." required>
                    </div>
        </div>

        <div class="form-group">
                    <label for="ademail" class="col-sm-2 control-label">Email Address</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="ademail" placeholder="your@email.com" required>
                    </div>
        </div>

        <div class="form-group">
                    <label for="adaddress" class="col-sm-2 control-label">Home Address</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="adaddress" placeholder="주소를 입력하세요." required>
                    </div>
        </div>

        <div class="form-group">
                    <label for="adphone" class="col-sm-2 control-label">Phone Number</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="adphone" placeholder="010-111-2222" required>
                    </div>
        </div>

                <div class="form-group">
                    <label for="adphotos" class="col-sm-2 control-label">Photos</label>
                    <div class="col-sm-10">
                        <div id="photos" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)" style="width:500px;height:150px;background: #FF0;border: 1px solid #888;"></div>
                    </div>
        </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn-add btn btn-success">Add Friend</button>
                    </div>
                </div>


            </form>
        </div>

        <div id="list"></div>

    </div>

    <div id="moreinfo" title="상세정보">
        <h1 id="friendname"></h1>
        <p id="friendemail"></p>
        <p id="friendaddress"></p>
        <p id="friendphone"></p>
        <p id="friendphotos"></p>
    </div>

    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
var db;
//addressbook 데이터베이스 오픈(없으면 생성)
var request = window.indexedDB.open("adbook",1);

//DB Open Error Handling
request.onerror = function(event) {
    console.log("DB Open Error");
}

//After DB Open
request.onsuccess = function(event) {
  db = request.result;
  readAllData();
}

request.onupgradeneeded = function(event) {
    var result = event.target.result;
    var objectStore = result.createObjectStore("address",{ keyPath: "id", autoIncrement:true });
}

function readAllData(){
    var tr = db.transaction(["address"]);
    var store = tr.objectStore("address");
    store.openCursor().onsuccess = function(event) {
        var cursor = event.target.result; //한 줄 얻어내기
        if (cursor) {
            //console.log(cursor.value);
            addList(cursor.value);
            cursor.continue(); //다음 줄로 이동
        } else {
            console.log("No data");
        }
    };
}

function readData(id){
    var tr = db.transaction(["address"]);
    var store = tr.objectStore("address");
    var request = store.get(id);
    request.onsuccess = function(event){
        var data = request.result;
        popUpInfo(data);
    };
    request.onerror = function(event){
        console.log("read error");
    };
}

$("#moreinfo").hide();

function popUpInfo(data){
    if( ! data ) return;
    $("#friendname").text(data.adname);
    $("#friendemail").text(data.ademail);
    $("#friendaddress").text(data.adaddress);
    $("#friendphone").text(data.adphone);

    var photolist = data.photos;
    var i;
    for( i=0; i<photolist.length;i++){
        var src = photolist[i].src;
        var img = "<img src='" + src + "' width='100' height='100' style='margin: 5px;'>";
        $("#friendphotos").append(img);
    }

    $("#moreinfo").dialog({
        width: 500,
        height: 500,
        title: data.adname + " 상세정보",
        modal: true
    });
}

function addList(data){
    if( ! data ) return;
    var html = "<div class='panel panel-default' id='list" + data.id + "'>";
    html += "<div class='panel-body'>";
    html += "<div class='row'>";
    html += "<div class='col-md-6'>";
    html += "<h1>" + data.adname + "</h1>";
    html += "</div>";
    html += "<div class='col-md-6'>";
    html += "<a class='btn-del btn btn-danger' data-id='" + data.id + "'>삭제</a>";
    html += "&nbsp;<a class='btn-read btn btn-primary' data-id='" + data.id + "'>보기</a>";
    html += "</div>";
    html += "</div>";
    html += "</div>";
    html += "</div>";
    $("#list").prepend(html);
}


function deleteData(id){
    if( ! id ) return false;
 var tr = db.transaction(["address"], "readwrite");
 var store = tr.objectStore("address");
 var request = store.delete(id);
 request.onsuccess = function(event) {
    $("#list" + id).remove();
 };
 request.onerror = function(event) { }
}


function saveData(data){
    var tr = db.transaction(["address"], "readwrite");
    var store = tr.objectStore("address");
    var request = store.add(data);
    request.onsuccess = function(event){
        //마지막에 추가한 레코드의 id를 구함
        var id = event.target.result;
  data.id = id; // 데이터 객체 data에 id를 추가
        addList(data);
    };
    request.onerror = function(event) {
        console.log("Error : data save error");
 }
}

$(".btn-add").on("click",function(e){
    e.preventDefault();
    var friend = {};
    friend.adname = $("#adname").val();
    friend.ademail = $("#ademail").val();
    friend.adaddress = $("#adaddress").val();
    friend.adphone = $("#adphone").val();
    friend.photos = photos;
    saveData(friend);
});

$("#list").on("click",".btn-del",function(){
    var id = $(this).attr("data-id");
    if( ! id ) return;
    id = parseInt(id,10);
    deleteData(id);
});

$("#list").on("click",".btn-read",function(){
    var id = $(this).attr("data-id");
    if( ! id ) return;
    id = parseInt(id,10);
    readData(id);
});

function dragover(event){
    event.preventDefault();
    var id = event.target.id;
    $("#" + id).css({"background":"red"});
}

function dragleave(event){
    event.preventDefault();
    var id = event.target.id;
    $("#" + id).css({"background":"#ff0"});
}

var photos;
function drop(event){
    event.preventDefault();
    photos = [];
    var data = event.dataTransfer;
    var files = data.files;
    var i;
    for( i=0; i<files.length; i++){
        if( files[i].type == "image/jpeg" || files[i].type == "image/png" || files[i].type == "image/gif" ) {
            addPhotos(files[i]);
        }
    }
}

function addPhotos(file){
    var photo = {};
    photo.name = file.name;
    photo.size = file.size;
    photo.type = file.type;
    var reader = new FileReader();
    reader.addEventListener("load",function(){
        photo.src = reader.result;
        //console.log(photo);
        photos.push(photo);
    });
    reader.readAsDataURL(file);
}
    </script>
</body>
</html>