My Project

In the last year of my Bachelor program at EMLyon Business School and as a Creative Technologist Student, I am trying to get a better understanding of how works databases:
What are they useful for?
How to use them?
For that In the context of our "Designing with Web" course we have the opportunity to explore and then experiment (by prototyping, testing, designing and sharing) differents concepts through the project of our choice.
Mine is the following:
Passionate by art and design, enjoying an epicurian lifestyle anf having an undeniable desire of entrepreneurship. I decided through this exercise to combine the pleasant and the useful.
Hence, taking my personal professional project as the theme of this assignment.
O.A.K would be a brunch place restaurant based in Berlin, in need of a better booking management system
The main purpose of its porject would be to link the form you can see just above to a database,in order for the manager to proprely manage the booking of O.A.K.

In this context we are going to use Firebase, which provides a realtime database and backend as a service and will allows us to send and retrieve date from our client side.

Get Started

Once the form created, we need to create a JavaScript File. And to link this file to our Html page (right above the body tag).
Then before linking our Firebase to this form, we will first make sure that we can submit the form and get the values.

In JavaScript : create a event listener
Then link our form to this JavaScript file, for that we will call the form y its ID in the following formula: document.getElementbyID('bookingform') and add an event listener .addEventListener('submit',submitForm).
So, we need now to create a fonction called "submitForm" to get value. And for that we need another function function getInputval(id) in order to identify those values.

Once able to get all of our input values, we will start to implement Firebase. Now that we get the actual value, we need to send them to firebase.

Using Firebase Realtime Database

• Copy past the script tag of your firbase in the index.html (right above the main JS) and add everything that is in the script tag - the initialize firebase at the top of our JavaScript file, so this will initialize firebase us.
• Then, we need to reference a collection.
  Firebase DataBase uses "References" to represent specific locations in our DB. References are used for reading or writing data.
  

  

  We can reference the root or child location in our Database by calling firebase.database().ref() or firebase.database().ref("child/path").
  Writing is done with the set() method and reading can be done with the on() method.
  We can learn more about those methods HERE.
• We now have to create a fonction to save the message.
  We are sending an object of data to our bookings collection or bookings reference in firebase.

  

• Now that we have created this function we actually want to call it when our form gets submmitted.

  

• Make sure that the rules on firebase - "Read" & "Write" are set as true.
  It will avoid any authentification's problem when our client submiting the form.

  

• The last step would be to add an alert/ a message showing the user that their table has been book.

  HTML:
  

  JavaScript:
  

• Now the manger of the restaurant just have to use firebase in order to manage the bookings.
  Possibly by using Queries. As we learnt in our designing with web course, queries are a powerful feature of databases and DBMS, by providing a way to search, sort and filter data.
  More info about firebase and queries HERE and HERE.