JSON Veritabanına Yönetim Paneli Ekleme | Baştan Kendi Yazdığımız Veritabanı Motoru

codinger06' Alıntı:

Merhabalar. Bu konuda kendi yazmış olduğumuz veritabanı sistemimize yönetim paneli yapacağız.
Proje uzun olduğundan konu da epey uzun olacak.


Projeden görüntüler :




Bu proje : İndir JSON Veritabanı Paneli rar
VirusTotal



Veritabanını yaptığımız konu : https://www.turkhackteam.org/konular/javascript-json-ile-veritabani-yazmak.2037798/
Veritabanına tablo güncellemesini eklediğimiz konu : Kendi Yazdığımız Veritabanına Tablo Yapısını Ekleyelim (JSON)



O halde yönetim panelimizi yapmaya başlayalım. 2 tane JavaScript dosyası var bunlardan biri önyüzle direkt etkileşim kurarken kullanacağımız dosya diğeri ise ekrana popup çıkarmamız için gereken fonksiyonları barındıran dosya.

popup.js :
​

JavaScript:

function createEnv(){
    var bg = document.createElement("div")
    bg.id = "background";
    document.body.appendChild(bg);

    document.getElementById("background").addEventListener("click", e => {
        if(e.target.id == "background"){
            clearEnv();
        }
    })
}
function clearEnv(){
    document.getElementById("background").remove();
}

createEnv() fonksiyonumuz popup çıkmadan önce ekranı hafif siyah, arkası gözüken bir alanla kaplayacak ve eğer popup dışına tıklanırsa içinde bulunan popup'ı ve kendisini silecek.
clearEnv() fonksiyonu popupları silecek.

JavaScript:

function addNewTablePopup(){
    createEnv();
    var popup = `
        <div class="add-table-popup" id="add-table-popup">
            <h2>
                Yeni Tablo Ekle
            </h2>

            <div>
                <span>Tablo Adı :</span><input type="text" id="table-name" class="form-control">
            </div>
            <button id="table-button" class="btn btn-primary" onclick="addTable()">Ekle</button>
        </div>
   
    `;
    document.getElementById("background").innerHTML += popup;
}

function addNewDatabasePopup(){
    createEnv();
    var popup = `
        <div class="add-database-popup" id="add-database-popup">
            <h2>
                Yeni Veritabanı
            </h2>

            <div>
                <span>Veritabanı Adı :</span><input type="text" id="database-name" class="form-control">
            </div>
            <button id="database-button" class="btn btn-primary" onclick="addDatabase()">Ekle</button>
        </div>
   
    `;
    document.getElementById("background").innerHTML += popup;
}

addNewTablePopup() fonksiyonu ilk olarak popup'ı ekleyeceğimiz arkaplanı oluşturacak ve o arkaplanın içerisine istediğimiz popup'ı ekleyecek. Popupta yeni tablo eklememiz için gereken inputu göreceğiz ve o popup üzerinden yeni tablo ekleyeceğiz.

addNewDatabasePopup() ise ekrana yeni veritabanı eklememizi sağlayacak olan popup'ı çıkartacak.

Şimdi önyüzle direkt etkileşime geçeceğimiz, veritabanı işlemlerini gerçekleştireceğimiz dosyaya geçelim.
app.js : ​

JavaScript:

var db = new DatabaseEngine();

var databasesDiv = document.getElementById("databases");
var dbNameDiv = document.getElementById("db-name");
var tablesDiv = document.getElementById("tables");
var rowsDiv = document.getElementById("rows");

İlk başta veritabanı motorumuzu çağırıyoruz. Daha sonrasında veritabanının adını göstereceğimiz div'i, tabloları ve satırları göstereceğimiz divleri değişkenlere kaydediyoruz.

JavaScript:

function list(){
    var databases = db.getDatabases();
    var objectKeys = Object.keys(databases);
    databasesDiv.innerHTML = "";
    for(let i = 0; i < objectKeys.length; i++){
        databasesDiv.innerHTML += `<div class="db" onclick="showDatabase('${objectKeys[i]}')">${objectKeys[i]}</div>`;
    }       
}
list();

list() fonksiyonunda sol tarafta bulunan veritabanı listesini güncelliyoruz. Tüm veritabanları içerisinde dolaşıp onları yazdırıyoruz.
Normal şartlarda sadece veritabanı objesinin içerisini yazsaydık normal bir döngü kurup yazdırırdık fakat veritabanı adlarını da yazdıracağımızdan dolayı o objelerin keylerine de ihtiyacımız var.

Mesela "database1" : {} objesindeki "database1" değerine de ihtiyacımız var.
Bu ihtiyacı gidermek için Object.keys(obj) adlı bir fonksiyonumuz var. Bu fonksiyon verilen objedeki tüm keyleri bize array olarak döndürür.
Biz bu arrayi gezerek tüm keyleri listeye yazdırıyoruz.

JavaScript:

function showDatabase(dbName){
    db.connect(dbName);
    dbNameDiv.innerHTML = `<div>${dbName}</div><div class="text-danger" style="cursor:pointer;" onclick="deleteDatabase('${dbName}');">Sil</div>`;
    deleteNewRowDiv();

    document.getElementById("header-tables").innerHTML = "<div>Tablolar</div><div style='color:darkblue; cursor:pointer;' onclick='addNewTablePopup();'>Yeni Ekle</div>";
    rowsDiv.innerHTML = "";
    document.getElementById("header-rows").innerHTML = "";

    var tables = db.getTables();
    tablesDiv.innerHTML = "";
    for(let i = 0; i < tables.length; i++){
        var rowCount = db.getRows(tables[i].table_name).length;
        tablesDiv.innerHTML += `
        <tr>
            <td>${tables[i].table_name}</td>
            <td>${rowCount} adet satır</td>
            <td style="color:red; cursor:pointer;" onclick="deleteTable('${tables[i].table_name}')">Sil</td>
            <td style="cursor:pointer;" onclick="showRows('${tables[i].table_name}')">Gözat</td>
        </tr>
        `;
    }
}

showDatabase() fonksiyonumuzda ilk önce bizden istenilen veritabanına bağlanıyoruz. Sonrasında veritabanının adını ekrana yazdırıyoruz, silme seçeneği de ekliyoruz.
Sonra ekrana tablolar yazısını yeni tablo ekleme seçeneği ile beraber yazdırıyoruz.
Veritabanımızdaki tablolar dizisinin içinde gezerek tüm tabloları ekrana yazdırıyoruz.

Bu konunun en uzun fonksiyonu ile karşı karşıyayız. showRows() fonksiyonunu parçalara bölerek anlatacağım : ​

JavaScript:

    deleteNewRowDiv();
    document.getElementById("header-rows").innerHTML = `<div>Satırlar, "${tableName}" Tablosu</div><div style='color:darkblue; cursor:pointer;' onclick="addNewRowDiv('${tableName}');">Yeni Ekle</div>`;
    var rows = db.getRows(tableName);
    var trs = rowsDiv.getElementsByTagName("tr");
    rowsDiv.innerHTML = "";
    for(let i = 0; i < rows.length; i++){
        rowsDiv.innerHTML += "<tr>";
        for(let j = 0; j < Object.keys(rows[i]).length; j++){
            trs[trs.length-1].innerHTML += `<td>${Object.keys(rows[i])[j]} : <span class="row-value">${rows[i][Object.keys(rows[i])[j]]}</span></td>`;
        }
        trs[trs.length-1].innerHTML += `<td style="color:red; cursor:pointer;" onclick="deleteRow('${tableName}', ${rows[i].id})">Sil</td>`;
        trs[trs.length-1].innerHTML += "</tr>";
    }

Öncelikle ekrana 'satırlar, "tablo" tablosu' yazısını yazdırıyoruz ve "yeni ekle" seçeneğini de ekliyoruz.
Gözat tuşuna bastığımız tablonun tüm satırlarını ekrana yazdırıyoruz, burada da Object.keys() kullanıyoruz çünkü satırlardaki özellikleri de mesela "name", "id" gibi özellikleri de değerlerin öncesine yazdırıyoruz. name : buBirAd gibi.

JavaScript:

    var rowValues = document.getElementsByClassName("row-value");

    var innerTexts = [];
    for(let i = 0; i < rowValues.length; i++){
        innerTexts.push(rowValues[i].innerText);
        rowValues[i].ondblclick = e => {
            e.target.innerHTML = `<input type="text" value="${innerTexts[i]}" class="row-input $${innerTexts[i]}" id="row-input">`
        }
    }

Bu kısımda değerlerin yazıldığı tüm yerleri dolaşıyoruz ve diyoruz ki bu alana çift tıklanırsa o alanda bir input aç ve o inputun içerisinde bu alanda yazan değer olsun. Bunun amacı değerleri güncellemek için.

JavaScript:

    document.body.onclick = e => {
        if(e.target.id != "row-input" && document.getElementById("row-input")){
            var rowInput = document.getElementById("row-input");
            var td = rowInput.parentElement.parentElement;
            var tds = td.parentElement.getElementsByTagName("td");

            if(tds[0].innerText.indexOf("id") != -1){
                var id;
                if(tds[0].getElementsByTagName("span")[0].innerText == ""){
                    id = rowInput.className.split("$")[1];
                }else {
                    id = tds[0].getElementsByTagName("span")[0].innerText;
                }
                var column = td.innerText.replace(":", "").split(" ")[0].replace(" ", "");
                var value = rowInput.value;
               
                db.updateColumn(tableName, id, column, value);

            }else if(tds[tds.length-2].innerText.indexOf("id") != -1){
                var id;
                if(tds[tds.length-2].getElementsByTagName("span")[0].innerText == ""){
                    id = rowInput.className.split("$")[1]
                }else{
                   id = tds[tds.length-2].getElementsByTagName("span")[0].innerText;
                }
                var column = td.innerText.replace(":", "").split(" ")[0].replace(" ", "");
                var value = rowInput.value

                db.updateColumn(tableName, id, column, value);

            }
               


            rowInput.parentElement.innerHTML = rowInput.value;
            showRows(tableName);
        }
    }

Kullanıcı değeri güncelledikten sonra inputun dışarısında bir yere tıkladığı zaman o değeri yeni değerle değiştirip inputu kaldırmamız gerekiyor.
Diyoruz ki kullanıcı sayfada bir yere tıklamışsa ve bu yer şu anda açtığımız olan input değilse VE şu anda bir input açıksa o inputu kaldıracağız.
Burada o satırın ID değeri bizim için önemli çünkü satır güncellerken hangi satır olduğunu belirteceğiz.

Eğer ID değeri ekranda satırın başındaysa ona göre, satırın sonundaysa ona göre muamele edeceğiz. Satırın sonunda olma ihtimali var çünkü auto_increment ile otomatik eklenen ID'ler objenin sonunda oluyor.

Eğer ID satırın başındaysa gidiyoruz satırın başına diyoruz şu an ID'yi güncelliyorsa ID divinin sınıfında $ işaretli bir yer var ID kendisini oraya yazıyor çünkü orada bir input olduğu zaman satırın eski ID'sini bilemeyiz ve böylece hangi satırı değiştireceğimizi de bilemeyiz. Ona göre eski ID'yi alıyoruz yeni ID ile değiştiriyoruz.

Eğer ID satırın sonundaysa aynı şekilde yapıyoruz bu sefer ID değerini satırın sonunda arıyoruz.

Değeri güncelledikten sonra satırları tekrar gösteriyoruz güncelliyoruz.
Güncelleme işlemlerinde her zaman bir aksama çıkabilir çünkü bir belgeye ulaşmaya çalışıyoruz ve o belge önbellekte hala eski halinde okunuyor olabilir sayfayı CTRL'ye basılı tutarak yenilediğimiz zaman önbellek de yenilenir ve belgenin yeni haline ulaşabiliriz.

JavaScript:

function deleteTable(table_name){
    db.deleteTable(table_name);
    showDatabase(dbNameDiv.getElementsByTagName("div")[0].innerText);
}

function deleteRow(tableName, rowId){
    db.deleteRow(tableName, rowId);
    showRows(tableName);
}

function deleteDatabase(db_name){
    db.deleteDatabase(db_name);
    list();
    dbNameDiv.innerHTML = "";
    tablesDiv.innerHTML = "";
    rowsDiv.innerHTML = "";
    document.getElementById("add-new-row").innerHTML = "";
    document.getElementById("header-tables").innerHTML = "";
    document.getElementById("header-rows").innerHTML = "";
   
}

function updateColumn(table_name, rowId, col, val){
    db.updateColumn(table_name, rowId, col, val);
    showRows(table_name);
}

Burada tablo, satır ve veritabanı silen ve değer güncelleyen fonksiyonlarımız var. O eklediğimiz silme seçeneklerinde onclick="" değerleri var bastığımız zaman bu fonksiyonlar devreye giriyor. O document.body.onclick eventinde de veri güncellemek için updateColumn()'u çalıştırıyoruz.

JavaScript:

function addNewRowDiv(table_name){
    document.getElementById("add-new-row").style.flexDirection = "row";
    if(db.getRows(table_name).length == 0){
        document.getElementById("add-new-row").style.flexDirection = "column";
        document.getElementById("add-new-row").innerHTML = `
            <h3>Satırı JSON objesi olarak girin.</h3>
            <input type="text" id="json-rows">
            <button class="btn btn-primary" style="height: 40px;" onclick="addNewRow('${table_name}', true)" autocomplete="off">Ekle</button>
        `;
        return 0;
    }

    var keys = Object.keys(db.getRows(table_name)[0]);
    document.getElementById("add-new-row").innerHTML = "";


    for(let i = 0; i < keys.length; i++){
        document.getElementById("add-new-row").innerHTML += `
        <div>
            <span class="property" id="${keys[i]}">${keys[i]}</span> : <input type="text" class="form-control value">
        </div>
    `
    }

    document.getElementById("add-new-row").innerHTML += `<button class="btn btn-primary" style="height: 40px;" onclick="addNewRow('${table_name}')">Ekle</button>`;
}

function deleteNewRowDiv(){
    document.getElementById("add-new-row").innerHTML = "";
}

addNewRowDiv() fonksiyonunda yeni satır ekleyeceğimiz yeri bize ekrana yazdıracak.

Eğer talep edilen satır eklenecek tablonun hiç satırı yoksa boş ise bizden satırları JSON objesi olarak alacak çünkü biz daha satır yapısını özellik yapısını bilmiyoruz teker teker özellik ekletirdik ama bunun yazımı uzun sürerdi gerçek hayat projesi de olmadığından dolayı kısa yoldan JSON objesi olarak alabiliriz gelen satırları.

Eğer tabloda daha önce satırlar eklenmişse ilk satırın özellik(property/column/key) yapısını alıyoruz ve ne kadar key varsa o kadar input ekliyoruz. En sonuna da bir buton ekliyoruz.

deleteNewRowDiv() fonksiyonunda ise önceden yazdırmış olduğumuz satır ekleme yerini siliyoruz.

JavaScript:

function addTable(){
    db.addTable(document.getElementById("table-name").value, []);
    clearEnv();
}
function addNewRow(table_name, json=false){
    if(json){
        db.addRow(table_name, JSON.parse(document.getElementById("json-rows").value));
        deleteNewRowDiv();
        return 0;
    }
    var rowJson = {};

    var propertiesArray = document.getElementsByClassName("property");
    var valuesArray = document.getElementsByClassName("value");

    for(let i = 0; i < propertiesArray.length; i++){
        rowJson[propertiesArray[i].innerText] = valuesArray[i].value;
    }
   

    db.addRow(table_name, rowJson);
    deleteNewRowDiv();
   
}

function addDatabase(){
    db.addDatabase(document.getElementById("database-name").value, null, null, true);
    list();
    clearEnv();
}

addTable() fonksiyonunu yeni tablo ekle popup'ında kullanıyoruz. Popup inputunda bize verilen tablo adıyla yeni bir tablo açıyoruz.

addNewRow() fonksiyonunda yeni bir satır ekliyoruz. Değerler JSON ile gelmişse direkt JSON.parse() fonksiyonunu kullanarak gelen string'i JSON objesine çevirerek tabloya ekliyoruz.
Eğer JSON ile gelmemişse boş bir obje oluşturuyoruz. Özellikler ve değer inputlarının bulunduğu yerleri değişkenlere atıyoruz. Onları geziyoruz ve özellik-değer ilişkisiyle objeyi doldurup yeni satır olarak tabloya ekliyoruz.

addDatabase() fonksiyonunda ise popupta verilmiş olan adla yeni içi boş bir veritabanı açıyoruz.

Epey uzun bir konu oldu, önceki veritabanı uygulamalarımızla JSON'a noktayı koyduk.
Bu veritabanı alanındaki son konuydu,
umarım okuyanlara JavaScript ve JSON konusunda katkı sağlamıştır ve umarım
bilip de inceleyenlerde de yeni bakış açıları oluşturmuştur.

Mesajlaşma Uygulamamız : Kendi Yazdığımız Veritabanı İle Basit Mesajlaşma Uygulaması (JSON)
Yapılacaklar Listesi uygulamamız : JavaScript Kendi Yazdığımız Veritabanı İle Yapılacaklar Listesi
​

Genişletmek için tıkla ...

emoscuk' Alıntı:

eline sağlık güzel konu

Genişletmek için tıkla ...

ugurraydogan24' Alıntı:

Eline sağlık, çok işe yarayacak bir konu.

Genişletmek için tıkla ...

m•a•v•z•e•r' Alıntı:

Eline ve emeğine sağlık faydalı bir konu olacağına inanıyorum.

Genişletmek için tıkla ...

THO' Alıntı:

Elinize Emeğinize Sağlık

Genişletmek için tıkla ...