The case
I love playing guitar. But I prefer even more the instrument
itself. But I’m sure you don’t imagine how many guitars have been
edited since the beginning of the rock area! (Spoiler: a lot). A
lot of different brands, a lot of models... What a mess!
Thus, how difficult it is to have an overview of the global guitar
landscape. Sometimes, we are looking for specific models,
searching for its characterises... How web can help us to solve
this top-tier problem ?
The solution
What about creating a database? It would be easier for guitar players to find information about models (especially old ones). For each one, we could access to the year of edition, the brand and guitar player associated! What are we waiting for ?
The process
We can use Firebase which enables us to create database easily by following the documentation available on brightpace. For further details we can go here.
We could retrieve information from the database, using a form located on a website. If information were missing, we could use another form on the same website to add a new guitar model (and its information) to the database. Thus, we would like our page to look like this.
This page is created using basic HTML and CSS. The form is built
using the HTML tag form : we can read about it
here.
First form is linked to a Javascript code, written on Javascript file main.js, which will retrieve the information and store it variables thanks to JQuery methods. This can be done using the .serializeArray() method which will store the form's data into an array. We can read the documentation about it here.
Then, those variables are used to retrieve information about the search in the database. We first have to link our database, which is powered by Firebase to our website using this code provided by our firebase’s database:
Then we can retrieve data from our database using firebases method, which can look like this:
Thanks to Firebase, we can also search for different models between defined years, or display all models of a list of different brands. All we have to do is to read the firebase documentation in order to know the methods that must be used for reaching our goal. The final code is likely to look like this:
For the second form, we follow the same process. Instead of retrieving information from our database, we have to use a different code to add elements to our firebase database. A sketch of this code looks like this:
And we’re done! Thanks to our database we can search and add information about all of the guitar models of history! Now we just have to communicate about this project to attract more guitar fans ! They could finally share this page using a facebook button “share”. We can find the appropriate code for doing so here. which links our subject to API!