Get images from your firebase database to your gallery in a website.
Today, I will be telling you about how to get images from your firebase real-time database onto your website.
You will have to follow certain steps:
Step 1: First of all, you will have to create a firebase project.
Note: Those who know about how to create a firebase project can skip this step.
To create a firebase project:
- Login to your Gmail account.
- Go to https://firebase.google.com/
- Click on “Go to console” in the top right corner.
- Then, click on Add project.
- Enter the name of the project and click on create project.
- It will take some time. After it is completed, click on continue.
Step 2: Add firebase code to your HTML page.
Click on the icon having a black border rectangle (shown in the above picture).
When you click on the icon, a window will pop-up which contains the code. This code is for the Web Applications(include website).
Paste that <script> code above </body> tag in your HTML document.
Step 3: Setting up Firebase Database
Once you have completed the above two steps, take a deep breath. I know this learning is hard but once you know how it works you will rock. Believe me. :)
- Click on the “Database” in the left panel. A new window will open up.
- Scroll down and choose Create database in real-time database section NOT IN CLOUD FIRESTORE SECTION.
- When you click on create database, a new window will open up asking you about the rules. Set those rule in test mode where “read: true” and “write: true” and click Enable.
Note: The read rule specifies who all can read the stored in this database and making it true means that all can read that data. Same is the case of write rule. You can later change the rules in the rule section below database heading.
Edit/import data into the database
You can write the new data into the database or if you are having a JSON file of data then you can also import it from your computer.
To import the data, you have to click on the 3 dots present in the database section and then click on import JSON.
Now, there are certain things that you will have to take care of.
- When you click on the + for the first time. You will have to input the name which will be the name of the parent.
- You can have various children in that parent.
- You cannot save a node by inputting the name only. You will have to enter the value too unless it is a parent node.
The name will be img and value will be the URL of your image.
Important: The child(image) that you want to retrieve from the database will have to be the same in every node. In the above picture, it is “img”. The parent of that node can have the different names.
After adding, it will look like this:
Now, you can relax because the database part is over. There is a small code remaining for the HTML document.
If you want to perform some extra steps with the database or want to create a mobile application. Then go here.
Step 4: Final HTML code
I choose sublime text 3 as an editor for writing HTML codes. If you are finding it difficult to write CSS or HTML code in your editor then you can switch to this.
I hope that till now you will have this code in your HTML document:
The <link> code in the <head> section is for font. If you want to change your font then add this otherwise there is no need.
Now, create a new file and name it as ” trial.js”. This will be a jquery file which will help you in getting data from the database.
In that trial.js, write the following code:
The variable image points to the img that are saved in the database and Images points to parent in the database.
The #gallery_div represent to the <table> that we will be going to create soon.
Now, in HTML document import the trial.js and jquery by adding the following<script> code above </body> tag like this:
Now, we will add the table in which images will be visible.
The final code of the HTML document:
The result of this code will be:
Have you made something different with this code or database? Then comment the link. I will give you my feedback.
