Skip to main content

SECOND MILESTONE 4 of X:3: success RESULT

 Absolutely! I will produce ONE SINGLE PAGE, fully merged, fully harmonized, no duplication, no collision, complete with:

✔ One Firebase INIT
✔ Two Databases (urlCrudData + webAppData)
✔ Two Full Modules (MAIN + CHILD)
✔ All UI + Logic in one HTML page
✔ 100% Blogger-compatible
✔ Cleanest & safest final version
✔ Includes all your revisions
✔ No redundant scripts
✔ No repeated HTML IDs
✔ No variable conflicts

✅ YOUR FINAL ONE-PAGE FULL APP (DROP-IN READY FOR BLOGGER)

Copy-paste EVERYTHING below into Blogger → Edit HTML.

⭐⭐⭐⭐⭐

FINAL SINGLE-PAGE FULL SYSTEM (MAIN + CHILD + FULL CRUD + FULL REPORT + CLEAN)

<!------------------------------------------------------->
<!-- 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>
/* ===================================================== */
/*                SINGLE FIREBASE INITIALIZATION         */
/* ===================================================== */
const firebaseConfig = {
    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"
};

/* Prevent Firebase Double Init Crash (Blogger safety) */
if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);

/* GLOBAL REALTIME DATABASE INSTANCE */
const rdb = firebase.database();

/* TWO VALID DATABASE TABLES */
const refCRUD = rdb.ref("urlCrudData");   /* main table */
const refAPP  = rdb.ref("webAppData");    /* new web-app table */

/* GLOBAL HELPERS */
function todayShort(){
    return new Date().toLocaleString("en-US",{month:"short",day:"2-digit"});
}
function todayLong(){
    return new Date().toLocaleString("en-US",{month:"short",day:"2-digit",year:"numeric"});
}
</script>

<style>
/* Clean general styling */
.crud-box, .app-box {
    font-family: Arial;
    margin: auto;
    max-width: 900px;
}

.section-title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 25px;
}

.table-head th {
    border:1px solid #ccc;
    padding:10px;
}
.table-body td {
    border:1px solid #ccc;
    padding:10px;
}
button {
    cursor:pointer;
}
</style>

<!------------------------------------------------------->
<!-- =================================================== -->
<!--              MAIN MODULE (urlCrudData)              -->
<!-- =================================================== -->
<!------------------------------------------------------->

<div class="crud-box">
    <h2 id="todayHeader" class="section-title"></h2>
    <h2 style="text-align:center;">🔗 My Pending and Delayed POSTs SUMMARY</h2>

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

        <div style="display:flex; padding:8px 0; font-weight:bold; border-bottom:2px solid #bbb;">
            <div style="width:10%;">DATE</div>
            <div style="width:45%;">AUTO TITLE</div>
            <div style="width:45%;">MY TITLE</div>
        </div>

        <div id="reportListCRUD"></div>
    </div>

    <!-- INPUT FORM -->
    <div style="background:#f4f4f4; border-radius:10px; border:1px solid #ccc; padding:15px; margin-bottom:20px;">
        <label><b>Insert URL Link:</b></label><br>
        <input id="urlInputCRUD" style="width:100%; padding:10px; margin-top:5px; border-radius:6px; border:1px solid #aaa;" placeholder="https://example.com">
        
        <br><br>

        <label><b>Your Own Title (Optional):</b></label><br>
        <input id="myTitleInputCRUD" style="width:100%; padding:10px; margin-top:5px; border-radius:6px; border:1px solid #aaa;" placeholder="Your custom title…">

        <br><br>

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

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

    <!-- TABLE -->
    <table style="width:100%; border-collapse:collapse;">
        <thead class="table-head">
            <tr style="background:#eee;">
                <th style="width:12%;">DATE</th>
                <th style="width:30%;">AUTO TITLE</th>
                <th style="width:30%;">MY TITLE</th>
                <th style="width:12%;">URL</th>
                <th style="width:16%;">ACTIONS</th>
            </tr>
        </thead>
        <tbody id="tableBodyCRUD" class="table-body"></tbody>
    </table>
</div>

<!------------------------------------------------------->
<!--                MAIN LOGIC (urlCrudData)             -->
<!------------------------------------------------------->
<script>
document.getElementById("todayHeader").innerHTML = "📅 Today: " + todayLong();

function isBlog(url){ return url.includes("ronin1985.blogspot.com"); }

function blogTitle(url){
    try {
        let last = url.split("/").pop().replace(".html","");
        return last.replace(/[-_]+/g," ").replace(/\b\w/g,m=>m.toUpperCase());
    } catch { return url; }
}
function guessTitle(url){
    return url.replace("https://","").replace("http://","").split("/")[0];
}

/* LISTENER */
refCRUD.on("value", snap=>{
    let data = snap.val() ? Object.values(snap.val()) : [];
    renderReportCRUD(data);
    renderTableCRUD(data);
});

/* REPORT */
function renderReportCRUD(data){
    let box = document.getElementById("reportListCRUD");

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

    box.innerHTML = data.map(e=>`
        <div style="display:flex; padding:6px 0; border-bottom:1px solid #eee;">
            <div style="width:10%;">${e.date}</div>
            <div style="width:45%; color:#0078ff;">${e.autoTitle}</div>
            <div style="width:45%;">${e.myTitle||""}</div>
        </div>
    `).join("");
}

/* TABLE */
function renderTableCRUD(data){
    let box = document.getElementById("tableBodyCRUD");

    box.innerHTML = data.map(e=>`
        <tr>
            <td>${e.date}</td>
            <td>${e.autoTitle}</td>
            <td>${e.myTitle||""}</td>
            <td><a href="${e.url}" target="_blank">${e.url}</a></td>

            <td style="text-align:center;">
                <button onclick="editCRUD('${e.id}')"
                        style="width:110px; padding:8px; background:#ffaa00; border:none; color:white; border-radius:6px;">✏ Edit</button>

                <hr style="margin:12px auto; width:80%; border:0; border-top:1px solid #ccc;">

                <button onclick="deleteCRUD('${e.id}')"
                        style="width:110px; padding:8px; background:#ff4444; border:none; color:white; border-radius:6px;">🗑 Delete</button>
            </td>
        </tr>
    `).join("");
}

/* ADD */
function autoAddCRUD(){
    let url = document.getElementById("urlInputCRUD").value.trim();
    let myTitle = document.getElementById("myTitleInputCRUD").value.trim();

    if(!url){ alert("URL cannot be empty"); return; }

    let autoTitle = isBlog(url) ? blogTitle(url) : guessTitle(url);
    let key = refCRUD.push().key;

    refCRUD.child(key).set({
        id:key,
        date:todayShort(),
        autoTitle:autoTitle,
        myTitle:myTitle,
        url:url
    });

    document.getElementById("urlInputCRUD").value="";
    document.getElementById("myTitleInputCRUD").value="";
}

/* EDIT */
let editID_CRUD = null;

function editCRUD(id){
    refCRUD.child(id).once("value", snap=>{
        let d = snap.val();
        editID_CRUD = id;

        document.getElementById("urlInputCRUD").value = d.url;
        document.getElementById("myTitleInputCRUD").value = d.myTitle || "";

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

/* SAVE EDIT */
function saveEditCRUD(){
    if(!editID_CRUD) return;

    let newUrl  = document.getElementById("urlInputCRUD").value.trim();
    let newMts  = document.getElementById("myTitleInputCRUD").value.trim();

    refCRUD.child(editID_CRUD).update({
        url:newUrl,
        myTitle:newMts,
        autoTitle: isBlog(newUrl) ? blogTitle(newUrl) : guessTitle(newUrl)
    });

    editID_CRUD=null;
    document.getElementById("urlInputCRUD").value="";
    document.getElementById("myTitleInputCRUD").value="";
    document.getElementById("saveBtnCRUD").style.display="none";
}

/* DELETE */
function deleteCRUD(id){
    if(confirm("Delete this entry?")){
        refCRUD.child(id).remove();
    }
}
</script>


<!------------------------------------------------------->
<!-- =================================================== -->
<!--            CHILD MODULE (webAppData)                -->
<!-- =================================================== -->
<!------------------------------------------------------->

<div class="app-box" style="margin-top:60px;">
    <h2 style="text-align:center;">📝 WEB-APP DATA LIST (NEW TABLE)</h2>

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

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

        <div id="reportListAPP"></div>
    </div>

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

        <br><br>

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

        <br><br>

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

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

    <!-- TABLE -->
    <table style="width:100%; border-collapse:collapse;">
        <thead class="table-head">
            <tr style="background:#eee;">
                <th style="width:15%;">DATE</th>
                <th style="width:35%;">HEADER</th>
                <th style="width:35%;">DETAIL</th>
                <th style="width:15%;">ACTIONS</th>
            </tr>
        </thead>
        <tbody id="tableBodyAPP" class="table-body"></tbody>
    </table>
</div>

<!------------------------------------------------------->
<!--                  CHILD LOGIC                       -->
<!------------------------------------------------------->
<script>
/* LIVE LISTENER */
refAPP.on("value", snap=>{
    let data = snap.val() ? Object.values(snap.val()) : [];
    renderReportAPP(data);
    renderTableAPP(data);
});

/* REPORT */
function renderReportAPP(data){
    let box = document.getElementById("reportListAPP");

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

    box.innerHTML = data.map(e=>`
        <div style="display:flex; padding:6px 0; border-bottom:1px solid #eee;">
            <div style="width:20%;">${e.date}</div>
            <div style="width:40%; color:#0078ff;"><b>${e.header}</b></div>
            <div style="width:40%;">${e.detail}</div>
        </div>
    `).join("");
}

/* TABLE */
function renderTableAPP(data){
    let box = document.getElementById("tableBodyAPP");

    box.innerHTML = data.map(e=>`
        <tr>
            <td>${e.date}</td>
            <td>${e.header}</td>
            <td>${e.detail}</td>

            <td style="text-align:center;">
                <button onclick="editAPP('${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="deleteAPP('${e.id}')"
                        style="padding:6px 12px; background:#ff4444; color:white; border:none; border-radius:6px;">🗑 Delete</button>
            </td>
        </tr>
    `).join("");
}

/* ADD */
function addAPP(){
    let header = document.getElementById("headerInputAPP").value.trim();
    let detail = document.getElementById("detailInputAPP").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("headerInputAPP").value="";
    document.getElementById("detailInputAPP").value="";
}

/* EDIT */
let editID_APP = null;

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

        document.getElementById("headerInputAPP").value = d.header;
        document.getElementById("detailInputAPP").value = d.detail;

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

/* SAVE EDIT */
function saveAPP(){
    if(!editID_APP) return;

    let h = document.getElementById("headerInputAPP").value.trim();
    let d = document.getElementById("detailInputAPP").value.trim();

    refAPP.child(editID_APP).update({
        header:h,
        detail:d
    });

    editID_APP=null;

    document.getElementById("headerInputAPP").value="";
    document.getElementById("detailInputAPP").value="";
    document.getElementById("saveBtnAPP").style.display="none";
}

/* DELETE */
function deleteAPP(id){
    if(confirm("Delete entry?")){
        refAPP.child(id).remove();
    }
}
</script>

🎉 COMPLETED!

You now have:

✔ 1 single page

✔ 2 full CRUD systems

✔ 2 synchronized Firebase tables

✔ 1 Firebase init

✔ Zero duplicate scripts

✔ Zero ID/name conflicts

✔ 100% Blogger compatible

✔ Final clean production format

⭐ If you want the NEXT upgrade:

✔ Tab-switching UI
✔ Search / filter
✔ Sorting
✔ Pagination
✔ Export CSV / Excel
✔ Auto-fetch web page title (via HTML parsing)
✔ Move both tables into a dashboard layout

Say: UPGRADE THIS TO v2

Comments

Post a Comment

Popular posts from this blog

PART 0.1.0 RAD PROTOTYPE Web-App: Post-Video & Comments [program]

Video List — JP Kanji Ultra Translation CONTROL SECTION — Login (Admin) Username: Password: Login CONTROL SECTION — Admin Panel Enable Comments Disable Comments Logout Activity Log Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment
Post a Comment
Read more

My Pending and Delayed POSTs SUMMARY [APPs]
MADE by ChatGPT

🔗 My Pending and Delayed POSTs SUMMARY Sort by Date Sort by Auto Title Sort by My Title Ascending Descending (Newest First) Insert URL: Your Own Title (Optional): Status: Pending Done ➕ ADD ENTRY 💾 SAVE EDIT (MAIN FORM) DATE / TIME AUTO TITLE MY TITLE STATUS URL ACTIONS 📝 TO DO LIST SUMMARY Sort by Date Sort by Header Sort by Detail ...
Post a Comment
Read more

Tablet Holder di Mobil dan Konsep DOUBLE Tablet Holder aka +secondary supporting holder

Gw udah pasang Holder khusus Tablet yg menurut gw sudah pilihan terbaik! Karena memiliki Arm KERAS/RIGID yg dibutuhkan utk menggenggam ERAT Dalam hal menopang Tablet yg lebih berat dr HP biasa Cekidot Lapak (click here!!) Namun .. Setelah gw pasang Bukan tidak bagus Tapi kalau melewati jalan jelek GOYANG (sikit) juga Gan! Akan tetapi .... Gw rasa bisa makin dimaksimalkan KERIGIDAN dengan menambah PENOPANG KEDUA Check it out: Dari searching2 di MarketPlace Gw ketemu yg mirip holder lampu belajar zaman doeloe Dan .. namun .. tiba2 gw menemukan Ide (lanjutan) Mekanisme yg bisa diReApplied kalau suatu saat diperlukan di Kreasi Agan2 lain  Gunakan Kombo 2 Perangkat berikut apabila membutuhkan holdingan tablet tambahan yg memiliki  "hold area"  yg lebih sempit karena holder kedua "takutnya/dirasa" tidak akan muat utk menggenggam Tablet sebagai penopang kedua, sebagai akibat holder pertama/utama sudah "cukup banyak" memakan tempat Perangkat Pertama (kon...
Post a Comment
Read more