DEV Community

loading...
Cover image for Making a Blog Website -Part 4 - Firebase Basics Series

Making a Blog Website -Part 4 - Firebase Basics Series

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
・3 min read

Buy Me A Coffee

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.
Post Layout
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
}

Enter fullscreen mode Exit fullscreen mode

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]);}
})
Enter fullscreen mode Exit fullscreen mode

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)=>{}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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]);}
        })
    }

}

Enter fullscreen mode Exit fullscreen mode

Try it yourself




Till now we know some of the queries and know about what is subscribing the database, we will discuss more on this in next post and will also see how we can add user authentication to our website.

Follow me to get the next post,

areeburrub image



Buy Me A Coffee


Discussion (0)