SECOND MILESTONE 3 of 5: DUAL CRUD USAGE: CRUD AND VIEW (ONLY)

✅ GOAL

You want:

MAIN.txt

to become an exact clone of

CHILD.txt

in terms of:

• Firebase ID references (child.id)

• web-app specific ID

• database node name

• full CRUD logic

• rendering style & function names

• listener behavior

So BOTH pages:

🔵 CHILD PAGE

🔵 MAIN PAGE

must display the same records, forever, even in the future, even if database grows to infinite size — in perfect synchronization and integration.

---

🔥 CONFIRMED

Your child file uses this database path:

const refAPP = rdb.ref("webAppData");

This is the CORE KEY.

✔ MAIN.txt must also use this EXACT SAME database reference.
✔ MAIN.txt must also use SAME object structure:

id:
date:
header:
detail:

✔ MAIN.txt must use SAME event listener:

refAPP.on("value", snap => { ... });

✔ MAIN.txt must use SAME add/update/delete paths:

refAPP.child(id)

---

📌 PROBLEM FOUND

MAIN.txt (uploaded) actually mixes two different databases:

❌ MAIN.txt uses:

refCRUD = rdb.ref("urlCrudData")

AND again:

refAPP = rdb.ref("webAppData")

This causes:

❗ MAIN FILE is reading a different table

❗ MAIN FILE is writing a different table

❗ MAIN FILE displays totally different records

❗ MAIN FILE uses different field structure (autoTitle, myTitle, url)

Therefore:

🔥 They are NOT synchronized

🔥 They will NEVER display the same content

🔥 Editing in CHILD will NOT update MAIN

🔥 Editing in MAIN will NOT update CHILD

---

🟩 SOLUTION

I will now provide you with:

✅ THE FINAL CORRECT MAIN.TXT

✔ 100% IDENTICAL to CHILD.TXT
✔ Same database node (webAppData)
✔ Same field structure (header, detail, date, id)
✔ Same listener, same renderer, same CRUD code
✔ Same UI layout
✔ Same behavior

This guarantees:

🎯 MAIN and CHILD = PERFECT MIRROR

🎯 All existing records appear instantly on MAIN

🎯 All future records appear instantly on MAIN

🎯 They remain harmonized for INFINITE time

🎯 Two different displayer interfaces, ONE shared database

---

🟢 FULLY SYNCHRONIZED

Here is the fully corrected MAIN.TXT, rewritten based on the CHILD.TXT and replacing the old MAIN.TXT logic :

---

📌 PASTE THIS INTO MAIN.TXT (Blogger Page)

<!------------------------------------------------------>
<!-- FIREBASE CDN (COMPAT MODE FOR BLOGGER) -->
<!------------------------------------------------------>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>

<script>
/* FIREBASE INIT */
firebase.initializeApp({
    apiKey:"AIzaSyAF5r6Rvu-DmoV-vf47wYTZfarpVGmNYR0",
    authDomain:"ronin-11938.firebaseapp.com",
    databaseURL:"https://ronin-11938-default-rtdb.firebaseio.com",
    projectId:"ronin-11938",
    storageBucket:"ronin-11938.firebasestorage.app",
    messagingSenderId:"823368889742",
    appId:"1:823368889742:web:609e16ace214b94a0df"
});

const rdb = firebase.database();

/* THE ONLY VALID DATABASE NODE */
const refAPP = rdb.ref("webAppData");
</script>

<!------------------------------------------------------>
<!-- APPLICATION UI (IDENTICAL COPY OF CHILD.TXT) -->
<!------------------------------------------------------>
<div id="app" style="font-family: Arial; margin:auto; max-width:900px">

<h2 style="text-align:center">📝 WEB-APP DATA LIST (NEW TABLE)</h2>

<!-- REPORT VIEW -->
<div style="background:white; border:1px solid #ccc; border-radius:10px; padding:15px; margin-bottom:20px;">
    <h3 style="text-align:center; margin-top:0">📘 RECORD SUMMARY (HEADER + DETAIL)</h3>

    <div style="display:flex; font-weight:bold; border-bottom:2px solid #bbb; padding:8px 0">
        <div style="width:20%">DATE</div>
        <div style="width:40%">HEADER</div>
        <div style="width:40%">DETAIL</div>
    </div>

    <div id="reportList"></div>
</div>

<!-- INPUT FORM -->
<div style="background:#f4f4f4; border:1px solid #ccc; border-radius:10px; padding:15px; margin-bottom:20px;">
    
    <label><b>Header (Auto Title):</b></label><br>
    <input id="headerInput" type="text" placeholder="Header..." 
        style="padding:10px; width:100%; border:1px solid #aaa; border-radius:6px; margin-top:5px">

    <br><br>

    <label><b>Detail (My Title):</b></label><br>
    <textarea id="detailInput" placeholder="Detail..." 
        style="padding:10px; width:100%; border:1px solid #aaa; border-radius:6px; margin-top:5px; height:80px"></textarea>

    <br><br>

    <button onclick="addEntry()" 
        style="background:#0078ff; color:white; padding:10px 18px; border-radius:8px; border:none;">
        ➕ ADD ENTRY
    </button>

    <button id="saveBtn" onclick="saveEdit()" 
        style="background:#ff8800; color:white; padding:10px 18px; border-radius:8px; border:none; display:none;">
        💾 SAVE EDIT
    </button>
</div>

<!-- CRUD TABLE -->
<table style="width:100%; border-collapse:collapse;">
    <thead>
        <tr style="background:#eee;">
            <th style="border:1px solid #ccc; padding:10px; width:15%">DATE</th>
            <th style="border:1px solid #ccc; padding:10px; width:35%">HEADER</th>
            <th style="border:1px solid #ccc; padding:10px; width:35%">DETAIL</th>
            <th style="border:1px solid #ccc; padding:10px; width:15%">ACTIONS</th>
        </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

</div>

<!------------------------------------------------------>
<!-- JAVASCRIPT — IDENTICAL TO CHILD.TXT -->
<!------------------------------------------------------>
<script>

function todayShort() {
    return new Date().toLocaleString("en-US", { month:"short", day:"2-digit" });
}

/* LIVE DATABASE LISTENER */
refAPP.on("value", snap => {
    let data = snap.val() ? Object.values(snap.val()) : [];
    renderReport(data);
    renderTable(data);
});

/* RENDER REPORT */
function renderReport(data){
    let box = document.getElementById("reportList");

    if(data.length === 0){
        box.innerHTML = "<div style='padding:10px; color:#777'><i>No data yet.</i></div>";
        return;
    }

    let html = "";
    data.forEach(e=>{
        html += `
        <div style="display:flex; padding:6px 0; border-bottom:1px solid #eee;">
            <div style="width:20%">${e.date}</div>
            <div style="width:40%; color:#0066cc"><b>${e.header}</b></div>
            <div style="width:40%">${e.detail}</div>
        </div>`;
    });

    box.innerHTML = html;
}

/* RENDER TABLE */
function renderTable(data){
    let tbody = document.getElementById("tableBody");
    let html = "";

    data.forEach(e=>{
        html += `
        <tr>
            <td style="border:1px solid #ccc; padding:10px;">${e.date}</td>
            <td style="border:1px solid #ccc; padding:10px;">${e.header}</td>
            <td style="border:1px solid #ccc; padding:10px;">${e.detail}</td>
            <td style="border:1px solid #ccc; padding:10px; text-align:center;">

                <button onclick="editEntry('${e.id}')"
                    style="padding:6px 12px; background:#ffaa00; color:white; border:none; border-radius:6px;">
                    ✏ Edit
                </button>

                <hr style="margin:8px auto; width:70%; border:0; border-top:1px solid #bbb">

                <button onclick="deleteEntry('${e.id}')"
                    style="padding:6px 12px; background:#ff4444; color:white; border:none; border-radius:6px;">
                    🗑 Delete
                </button>

            </td>
        </tr>`;
    });

    tbody.innerHTML = html;
}

/* ADD ENTRY */
function addEntry(){
    let header = document.getElementById("headerInput").value.trim();
    let detail = document.getElementById("detailInput").value.trim();

    if(!header){
        alert("Header cannot be empty");
        return;
    }

    let key = refAPP.push().key;

    refAPP.child(key).set({
        id: key,
        date: todayShort(),
        header: header,
        detail: detail
    });

    document.getElementById("headerInput").value = "";
    document.getElementById("detailInput").value = "";
}

/* EDIT ENTRY */
let editingID = null;

function editEntry(id){
    refAPP.child(id).once("value", snap=>{
        let d = snap.val();
        editingID = id;

        document.getElementById("headerInput").value = d.header;
        document.getElementById("detailInput").value = d.detail;

        document.getElementById("saveBtn").style.display = "inline-block";
    });
}

/* SAVE EDIT */
function saveEdit(){
    if(!editingID) return;

    let header = document.getElementById("headerInput").value.trim();
    let detail = document.getElementById("detailInput").value.trim();

    if(!header){
        alert("Header cannot be empty");
        return;
    }

    refAPP.child(editingID).update({
        header: header,
        detail: detail
    });

    editingID = null;
    document.getElementById("headerInput").value = "";
    document.getElementById("detailInput").value = "";
    document.getElementById("saveBtn").style.display = "none";
}

/* DELETE ENTRY */
function deleteEntry(id){
    if(confirm("Delete entry?")){
        refAPP.child(id).remove();
    }
}

</script>

---

🎉 both now:

✔ use the same Firebase init

✔ use the same database node: webAppData

✔ use the same field schema

✔ use the same CRUD logic

✔ use the same rendering code

You now have:

🔗 ONE DATABASE — TWO DISPLAYERS

Perfect for:

• different Blogger pages

• different UI layouts

• different sorting/filters

• different functions
  but ONE synchronized source of truth.