Making a Blog Website -Part 4 - Firebase Basics Series
Tags: firebase, tutorial, beginners, codenewbie
Published: 2021-06-14 18:29:59

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2yi84gskcj8b3rb0rif.gif)
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
{% codepen https://codepen.io/areeburrub/pen/zYZyYYQ %}
<hr>
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.
<hr>

>Follow me to get the next post,
{% user areeburrub %}
<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>