Making a Blog Website -Part 4 - Firebase Basics Series

In previous post parts we have seen how we can use firebase Realtime database by making a todo list, but a todo list can't explain everything like Sorting, querying, etc.

That's why we will build a Blog website where every one can post on different topics and all the posts can be displayed categorized on basis of topics.

Building a Layout

Obviously, first we have to create a layout website then we will add functionality.

I made this Layout, the post are displayed as cards and topic can be chosen from navbar and a create button is also there in nav bar which open a popup from where we can create posts.

Adding posts to database

As in todo list we have added a SDK file and script CDN-link for Realtime Db, here also we will add all those thing and the push the posts to the database.

const inputTitle = document.getElementById('input-title');
const inputTopic = document.getElementById('input-topic');
const inputText = document.getElementById('input-text');

form.onsubmit = (e) =>{
    e.preventDefault();
    database.ref('/Posts').push().set({
        'Title':inputTitle.value,
        'Topic':inputTopic.value,
        'Text': inputText.value,
        'created on' : Date.now()
    })
    inputTitle.value = '';
    inputTopic.value = '';
    inputText.value = '';

    popup.hidden = true
}

Displaying data as we want

Now we will fetch the posts from database and display it, that is simple to do and is very similar to the todo list.

database.ref('/Posts').limitToFirst(10).on('value',(snapshot)=>{
    data = snapshot.val();
    postContainer.innerHTML = '';
    for (var PostID in data){drawPosts(data[PostID]);}
})

Draw post is just a ordinary function which I made to avoid those long postContainer.innerHTML += and it looks clean also

This will display the first 10 posts in database as we have used .limitToFirst(10) these are called limit queries there are two of them limitToFirst() and limitToLast()

Getting Post about specific topic

For this we have to add an event listener to the option list change as it's data change we will unsubscribe the running .on connection and subscribe to the new with filter on current topic.

What is Subscribing a Database

As I told you earlier .on() will refresh data whenever anything changes in the database which means it is subscribed to the change and the change can be any thing like I have specified it to value like this:

database.ref('/Posts').on('value',(snapshot)=>{}

That's why it updates whenever anything changes in a reference.

It can also be set to,

• child_added which will only detect addition of child
• child_changed this will only detect changes in child
• child_removed detect when child from ref is removed

And If we don't UNSUBSCRIBE to previously subscribed changes it will keep refreshing.

To unsubscribe we use .off(), like this

database.ref('/Posts').off();

Detecting Changes in Option List

As the on change is triggered it first unsubscribe to all previous connection and then create a new connection with filter of

.orderByChild('Topic').equalTo(showTopic.value)

first we select the child according to which we have to order and then check for it's value and that's how specific topic is recived.

const showTopic = document.getElementById('show-topic');

showTopic.onchange = () => {
    database.ref('/Posts').off();

    if(showTopic.value == 'All Posts'){
        database.ref('/Posts').on('value',(snapshot)=>{
            data = snapshot.val();
            postContainer.innerHTML = '';
            for (var PostID in data){drawPosts(data[PostID]);}
        })
    }
    else{
        database.ref('/Posts').orderByChild('Topic').equalTo(showTopic.value).on('value',(snapshot)=>{
            data = snapshot.val();
            postContainer.innerHTML = '';
            for (var PostID in data){drawPosts(data[PostID]);}
        })
    }

}

Try it yourself

Follow me to get the next post,

Areeb ur RubFollow

Arduino | Python | TypeScript | Next Js | Love learn making things