Nishka Kotian - SashiDo.io | API Development, Deployment and Scaling made simple.

How to Build a Venue Booking App with SashiDo - Part 2

Nishka Kotian — Tue, 31 Aug 2021 12:00:12 GMT

Hello again! This post is a continuation to the first part where I've explained about user authentication and storing venue details for my Venue Booking App. Today, we will cover querying the database and also look into how the booking functionality can be implemented.
In case you aren't familiar with ES6 arrow functions and template literals I would suggest reading about them first. I have added useful links at the bottom of the tutorial for your reference.

Displaying venues on the dashboard
Filtering venues based on location
Show venue information
Sending booking request to owner
Approving requests
Deleting past bookings
Conclusion
Useful links

Displaying venues on the dashboard

After the owner has added venues, there has to be a way to get all that information. In the customer's dashboard top 25 venues are shown and in the owner's dashboard under the Venues tab all the venues belonging to that owner are displayed.

Owner's dashboard:

This owner has 3 venues listed.

When an owner first creates an account, they wouldn't have any venues. So in the html I have created two divs one for new owners with no venues and another for those who have at least one venue.



...



    
        Welcome to SKED!
        Your listed venues will show up here after you add them.

        
    



    Your Venues
   

...

function getOwnerData() {
    const user = Parse.User.current();
    document.getElementById("ownername").innerHTML = user.attributes.username;

    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.equalTo("owner", user);
    query.find().then(function findVenues(results) {
        if (results.length == 0) {
            document.getElementById("novenues").classList.remove("d-none");
        } else {
            document.getElementById("yourVenuesHeading").classList.remove("d-none");
            const displayArea = document.getElementById("displayVenues");
            results.forEach((venue, index) => {
                if (i == 11) { i = 0; }
                displayVenue(displayArea, venue);
                i += 1;
            });
        }

        /* Insert code to fetch booking details here */

    }, function error(err) {
        console.log('Error : ', err);
    });
}

To fetch the data, you have to find out the owner who is logged in using Parse.User.current() and then create a new Parse.Query which can be used for querying objects from the class. You can specify conditions based on which the query will return matching records. query.equalTo("owner", user); means that I want to get all Venues which have the owner column set to user. Note that user is a pointer to the instance of the current user in the User class.query.find() retrieves all the rows which satisfy the query and returns a promise.
The displayVenue function is a utility function that takes as parameters the id of the div element inside which the venue cards will be displayed and a Venue object.

var i = 0; //iterator for colours in venue cards
const colours = ["#8a068f", "#06148f", "#c70a62", "#0a9956", "#e78659", "#87b40d", "#0791b4", "#8609ce", "#4c7e80", "#c2427e", "#838080"];

function displayVenue(displayArea, venue) {
    var venuediv = document.createElement("div");
    venuediv.className = "venue col-md-6 col-lg-3 mb-4 d-flex align-items-stretch text-center";
    var photo = venue.get("image1").url();
    var objId = venue.id;

    venuediv.innerHTML =
        `
            
            
                ${venue.get("venueName")}
                ${venue.get("city")}
            
        `;
    displayArea.appendChild(venuediv);
}

The .get method of an object can be used to obtain the value of any field in it.

Notice that for the cards I'm assigning the id to the id of the venue object. So, when an user clicks on the card, its id would be added as a parameter to the url which would then be used to identify the venue whose details have to be displayed.

function venueDetails(el) {
    window.location.href = "venue.html?id=" + el.id;
}

Customer's dashboard:

The customer can check venues as well as their bookings by toggling the button in the navbar. In the html I've created empty containers for each of them.




     

...



...

//Toggle between showing venues and bookings
function showOther(el) {
    if (el.innerHTML == "Show Venues") {
        el.innerHTML = "Show Bookings";
        document.getElementById("customerBookings").classList.add("d-none");
        document.getElementById("venues").style.display = "block";
    }
    else {
        el.innerHTML = "Show Venues";
        document.getElementById("venues").style.display = "none";
        document.getElementById("customerBookings").classList.remove("d-none");
    }
}

function showVenues() {
    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.limit(25);
    query.find().then(function success(results) {
        results.forEach((venue, index) => {
            const displayArea = document.getElementById("showVenuesHomepg");
            if (i == 11) { i = 0 };
            displayVenue(displayArea, venue);
            i += 1;
        });
    }, function error(err) {
        console.log("Error : ", err);
    });
}

The showVenues function is quite similar to the getOwnerData function except that here I'm fetching the top 25 rows in the Venues class using query.limit(25).By default though, parse returns the top 100 query results.

Filtering venues based on location

As the number of venues gets larger a function that can filter venues based on their location would be useful. Now, we'll see how this can be done.

In the customer.html page create an input field to let the user enter a city name.


    VENUES

Earlier we made a query based on the owner column. Now, we're interested in querying based on the city column.

function filterVenues() {
    document.getElementById("filterNoResults").innerHTML = "";
    var loc = document.getElementById("locationfilter").value.toLowerCase();
    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.equalTo("city", loc);
    query.find().then(function findVenues(results) {
        if (results.length == 0) {
            document.getElementById("filterNoResults").innerHTML = "No venues found !";
        } else {
            const displayArea = document.getElementById("showVenuesHomepg");
            displayArea.textContent = ""; //Remove all venues so as to display only the filtered venues
            results.forEach((venue, index) => {
                if (i == 11) { i = 0; }
                displayVenue(displayArea, venue);
                i += 1;
            });
        }
    }, function error(err) {
        alert('Error : ', err.message);
    });
}

To make this query a little robust, while saving the city for the Venue object I had first converted it to lower case so that now we can convert the input field's value to lowercase and make the search case insensitive.

Display venue details

When clicking on any of the venue card, the insertDetails function is triggered which shows a new page with information about the venue which contains:

Images of the venue.
Details about location, timings, etc.
A calendar. If any date on this calendar is clicked, it shows the time slots that have already been booked so that customers can plan their event accordingly.
A form to send a booking request.

You can find the code for this page in the venue.html file where I have created empty containers for venue images, details, calendar and added a booking form. Here's a rough outline:


     

    /* Insert navbar */

    

        /* slideshow to show images of the venue */

        /* empty divs to show details like timings,address etc */

    

    
        
        /* Empty calendar */

    

    
        
        /* Form to book venue */

To get details about the venue from the database the function below is used:

var params, venueId,flag;

function insertDetails() {
    params = new URLSearchParams(location.search); //get the parameters in query string
    venueId = params.get('id');
    const Venue = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venue);
    query.get(venueId).then((venue) => {
        // The object was retrieved successfully.
        document.getElementById("brand").innerHTML = venue.get("venueName");
        document.getElementById("img1container").innerHTML = ``
        document.getElementById("img2container").innerHTML = ``
        document.getElementById("desc").innerHTML = venue.get("description");
        document.getElementById("city").innerHTML = venue.get("city");
        document.getElementById("address").innerHTML = venue.get("address");
        document.getElementById("days").innerHTML = venue.get("daysAvailable");
        document.getElementById("timing").innerHTML = venue.get("timings");

        var hiddencontent = document.getElementsByClassName("whileLoadHide");
        while (hiddencontent.length != 0) {
            hiddencontent[0].classList.remove("whileLoadHide");
        }
        document.getElementById("loader").style.display = "none";

    }, (err) => {
        // The object could not be retrieved.
        alert("Error occured: ", err.message);
        document.getElementById("loader").style.display = "none";

    });
}

The query.get method can be used to find an object using its id.

The getDates function implements the calendar feature which you can easily build using HTML and CSS. Each date is shown as a button which on clicking calls the checkbooked function which checks the slots that are already booked. This depends on the booking functionality so I'll describe it later.

Sending booking request to owner

At the bottom of the venue details page there is a form which any customer can fill to send a booking request.


    Book this venue
    
        
            Full name
            
        
        
            Email Id
            
        
    

    ...
    
    //Insert label and input fields to collect other details

    ...

function bookVenue() {
    document.getElementById("bookingError").innerHTML = "";
    const name = document.getElementById("custName").value;
    const email = document.getElementById("email").value;
    const date = document.getElementById("date").value;
    const timeStart = document.getElementById("starttime").value
    const timeEnd = document.getElementById("endtime").value;
    const details = document.getElementById("purpose").value;

    if (!name || !email || !date || !timeStart || !timeEnd || !details) {
        document.getElementById("bookingError").innerHTML = "Please fill all the fields.";
    }
    else {
        const user = Parse.User.current();

        const Venues = Parse.Object.extend("Venues");
        const q = new Parse.Query(Venues);
        q.get(venueId).then(function success(object) {
            var ownerOfVen = object.get("owner");

            const Booking = Parse.Object.extend("Booking");
            const booking = new Booking();

            var acl = new Parse.ACL();
            acl.setReadAccess(user, true);
            acl.setReadAccess(ownerOfVen, true);
            acl.setWriteAccess(ownerOfVen, true);

            booking.set("ACL", acl);
            booking.set("fullName", name);
            booking.set("email", email);
            booking.set("date", date);
            booking.set("timeSlot", timeStart + " - " + timeEnd);
            booking.set("details", details);
            booking.set("venue", object);
            booking.set("owner", ownerOfVen);
            booking.set("bookedBy", user);
            booking.set("approvedStatus", false);

            booking.save().then(function success(booking) {
                document.getElementById("venueBookForm").reset();
                document.getElementById("bookingSuccess").innerHTML = "Booking done successfully!";
                console.log("Booking done!");
            }, function error(err) {
                console.log("Error: ", err);
            });
        }, function error(err) {
            console.log(err);
        });
    }
}

The Booking class will be used to store details about booking requests. The approvedStatus field is a boolean value which if set to true, implies that the booking has been approved. As one of the field here is the email address of the customer who is booking the venue, we need to make sure that this data is private and can be read only by them and the owner. Also, the write access should be given only to the owner, as only they should be able to update the approvedStatus field.

But we'll have to show the timeSlots that have already been booked right? Yes, and to do so I have created another class named ApprovedBookings which contains only the venueId, timeslot, date, and a pointer to the Booking object and this class is publicly readable.

Approve requests

In the owner's dashboard under the booking requests tab all the requests made to any of their venues would be displayed.
Getting these booking details is very similar to how we fetched all the venues so I won't be going over it. Today's events tab is again the same thing but with a condition to find out only rows where date==today's date.

In the following image, the red box shows a request that hasn't been approved yet.

On clicking the approve button the approvedStatus is set to true and a new row is added to the ApprovedBookings class.

function approveReq(el, id) {

    if (el.innerHTML == "Approved") {
        return;
    }

    const Booking = Parse.Object.extend("Booking");
    const q = new Parse.Query(Booking);
    q.get(id).then((object) => {
        object.set("approvedStatus", true);
        object.save().then((booking) => {

            //create a row in ApprovedBookings class which has public read access
            const ApprovedBookings = Parse.Object.extend("ApprovedBookings");
            const approved = new ApprovedBookings();

            const acl = new Parse.ACL();
            acl.setPublicReadAccess(true);
            acl.setWriteAccess(Parse.User.current(), true);

            approved.set("date", booking.get("date"));
            approved.set("timeSlot", booking.get("timeSlot"));
            approved.set("venueID", booking.get("venue").id);
            approved.set("parent", object);
            approved.setACL(acl);
            approved.save().then(function () {
                console.log("approved and saved!");
            }, function error(err) {
                console.log(err);
            });

            el.innerHTML = "Approved";
            el.classList.remove("cardpink-btn");
            el.classList.add("cardpurple-btn");
            const card = document.getElementById(id);
            card.classList.remove("cardpink-bg");
            card.classList.add("cardpurple-bg");
        }, function error(err) {
            console.log(err);
        });
    });
}

After approval:

The time slots of approved bookings can be read by any user. Here's an example of how the slots already booked will appear upon clicking any date in the calendar.

The main part of the checkbooked function which is called on clicking any date in the calendar is as follows:

const apprBooking = Parse.Object.extend("ApprovedBookings");
const query = new Parse.Query(apprBooking);
query.equalTo("venueID", venueId);
query.equalTo("date", datecheck);
query.find().then(successCallback,errorCallBack);

veneuId is a global variable containing the id of venue whose value was set in the insertDetails function.date refers to the date in the calendar which was clicked.

Deleting past bookings

Once an event has completed, maybe the owner doesn't need the booking information anymore so we have to provide a delete option for expired bookings. We will have to destroy it from both the Booking class and ApprovedBookings class. As ApprovedBookings has a pointer to its parent in Bookings, we'll start by deleting it first.
But it is possible that a booking was never approved. Then it would be present only in the Bookings class.

function deleteBooking(bookingid) {
    const Booking = Parse.Object.extend("Booking");
    const query = new Parse.Query(Booking);

    query.get(bookingid).then((bking) => {

        const status = bking.get("approvedStatus");

        //If approved,first remove record from ApprovedBookings class.
        if (status) {
            const apprBookings = Parse.Object.extend("ApprovedBookings");
            const q = new Parse.Query(apprBookings);
            q.equalTo("parent", bking);
            q.find().then((result) => {
                result[0].destroy().then(() => {
                    console.log("Deleted booking from ApprovedBookings");

                    //Next remove from Booking class
                    bking.destroy().then(() => {
                        const bookingcard = document.getElementById(bookingid);
                        bookingcard.parentElement.removeChild(bookingcard);
                        console.log("Deleted from Booking");
                    });
                });
            }, (err) => {
                console.log(err);
            });
        }
        else { //just remove the non approved booking from Booking class
            bking.destroy().then(() => {
                const bookingcard = document.getElementById(bookingid);
                bookingcard.parentElement.removeChild(bookingcard);
                console.log("Deleted from Booking");
            }, (err) => {
                console.log(err);
            });
        }
    });
}

Conclusion

I hope you've gotten some idea about how SashiDo can be used to perform various tasks in an easy way. This was a simple fun project so I haven't implemented any cloud code validation functions. Nevertheless, it was a great learning experience. There are a couple of more features that could have been added like allowing owners to edit venue details through the webpage itself and displaying time in the AM-PM format. I think it would be cool to have a feature that can show room usage statistics for each of the venues. Let me know in comments if you try any of those or add some of your own ideas!

Happy Coding!

Useful links

How to Build a Venue Booking App with SashiDo - Part 1
Github repo
Application Demo Video
Parse Javascript SDK documentation
SashiDo's Getting Started Guide
Arrow functions
Template literals

How to Build a Venue Booking App with SashiDo - Part 1

Nishka Kotian — Tue, 31 Aug 2021 12:00:04 GMT

A few months ago I got to know about Parse and SashiDo during a hackathon and I was very keen to build a full-stack web application using it. So, I decided to make a fun project by building a venue booking system. In the following lines I will describe how I went about coding it so you can follow allong the steps. A basic knowlege of Javascript would suffice to follow this tutorial.

To get an understanding of what comes next and how the application works, check out the demo video!

Project Overview
Database
User Registeration and Login
Adding a new Venue
Conclusion
Useful links

Project overview

The venue booking application which I named SKED has two main types of users, venue owners and customers.

A customer can :

Find details about venues and filter them based on location
Check time slots that have already been booked for any day
Send a booking request to the owner of that venue

An owner can :

Add a venue
Get bookings made for the present day
Approve booking requests made by customers
Delete bookings for events that have finished

Database

Data is stored by creating a Parse.Object with key-value pairs. You can create classes to manage and store different kinds of data. When a class is created, it does not have a schema defined so you can add fields which can have any type of JSON compatible data. But once the first object is saved the data types for any fields that have been set will be locked. For example, if I create a class named Venues and my first object has a field venueName whose value I set to "Auditorium" then parse recognises that it was of string type. So whenever a new object is added it checks whether the venueName is of string type. If not, it returns an error.

Below is a diagram I created so that you can get a quick idea about the various classes and fields in them.

There is another class named Role created by default in parse, but since I did not create roles for this project I haven't shown it. Also, I did not put any thought into naming the classes 🤦‍♀️. I really should've named all of them in singular form and surely that would be a lesson learned for my next projects.

User Registeration and Login

The Parse.User class has built in functions to handle and secure user account information. As there are two types of users I've added a new field called userType to differentiate between them. New fields can be added using the dashboard by clicking on the Add a new column button.

For the frontend, I've created two separate home pages for customers and owners as I wanted to display different messages on them. In each of them there are two buttons i.e. Register and Login. On clicking them a modal(bootstrap popup) opens up asking the user to enter the username and password. These two are mandatory.You could optionally ask for an email too.

    
    Username
    
    Password

I've created a similar form in the owner's homepage but with a different id for the Register button so as to be able to determine if the request was made by a customer or owner.

Function to register user:

function register(el) {
    const username = document.getElementById("username_reg").value;
    const password = document.getElementById("pswd_reg").value;

    var user_type;
    if (el.id == "OwnerRegbtn") {
        user_type = "Owner";
    }
    else {
        user_type = "Customer";
    }

    if (username.length == 0) {
        document.getElementById("regError").innerHTML = "Username cannot be empty";
    }
    else if (password.length < 8 || password.length > 16) {
        document.getElementById("regError").innerHTML = "Password must be between 8-16 characters long";
    }
    else {
        const user = new Parse.User();
        user.set("username", username);
        user.set("password", password);
        user.set("userType", user_type);

        user.signUp().then(function success() {
            window.location.href = "registered.html";
        }, function error(err) {
            document.getElementById("regError").innerHTML = err.message;
        });
    }
}

new Parse.User() will create a new instance of the User class.After creating a new object, you can set the values for its fields using .set which takes two parameters, the name of the column and the value that you want to set it to. The .signUp method has to be used to register a new user. It is an asynchronous function, which returns a promise object which has a .then method that takes two functions for the success and error cases. One example of an error case is when the username is already taken by some other user.

Now, let's a look into the login part.


    Username
    

    Password

Function to login user:

function login() {
    var username = document.getElementById("username_login").value;
    var password = document.getElementById("pswd_login").value;

    if (username.length == 0) {
        document.getElementById("loginError").innerHTML = "Please enter the username";
    }
    else if (password.length < 8 || password.length > 16) {
        document.getElementById("loginError").innerHTML = "Passwords are between 8-16 characters long.";
    }
    else {
        Parse.User.logIn(username, password, { usePost: true }).then(function success() {
            const user = Parse.User.current();
            if (user.attributes.userType == "Owner") {
                window.location.href = "owner.html";
            }
            else { /*user.attributes.userType == "Customer"*/
                window.location.href = "customer.html";
            }
        }, function error(err) {
            document.getElementById("loginError").innerHTML = err.message;
        });
    }
}

To log in an user, retrieve the input entered in the form and use the .logIn method by passing the username and password. By default it uses GET request but you can add an optional argument to tell Parse to use POST instead. Once the user is logged in, you can use Parse.User.current() to find out the current user. Then, using the attributes property of the object we can find the userType. Alternatively, the .get method can also be used like so - user.get("userType").

If the login was successful the user will be taken to their dashboard (owner.html or customer.html) which has all their data.

To provide log out functionality use the .logOut() method.

/*Passing a boolean value true for owner & false for customer 
so that after logout they can be taken to their respective home page */

 //in owner.html

 //in customer.html

function logout(isOwner) {
    Parse.User.logOut().then(function gotohome() {
        if (isOwner) {
            window.location.href = "home.html";
        }
        else {
            window.location.href = "home_customer.html";
        }
    });
}

Next, we'll be looking into how owners can add a new venue.

Adding a venue

I have created a class named Venues to store venue details. This can be done using the dashboard. Just click on the Create a class button and add all the required columns by clicking on Add a new column. You'll have to give the column a name and specify the type of data you want to store.

If you remember, I mentioned that Parse will automatically find the data type from the first object that gets stored and now I'm asking you to specify the data type. What's happening here?

Well, creating a class beforehand isn't really necessary in Parse. If you create a subclass using Parse.Object.extend("class"); and if that class did not exist Parse will create it for you. To enable this feature you'll have to go to SashiDo Dashbaord > App Settings > Security and keys > App permissions and enable client class creation. You can utilise it all through development and disable it before moving to production.

In the owner's dashboard there is a Add a venue button which on clicking opens up a form in which details about the venue must be entered.

Here's an outline of the code for the form:


    
        Name of the venue
        
    

    ...

    /* Insert label and input fields for all other details here*/

    ...

Once the submit button is clicked, the createVenue function shown below creates a new Venue object containing all the details that were entered. The venue will then show up in the owner's dashboard and also be visible to customers.

function createVenue() {
    document.getElementById("addVenueError").innerHTML = "";
    const venuename = document.getElementById("nameOfVenue").value;
    const address = document.getElementById("addr").value;
    const city = document.getElementById("cityName").value.toLowerCase();
    const daysAvailable = document.getElementById("days").value;
    const topen = document.getElementById("topen").value; /*Venue opening time*/
    const tclose = document.getElementById("tclose").value; /*Venue closing time*/
    const timing = topen + "-" + tclose;

    const image1 = document.getElementById("image1");
    const image2 = document.getElementById("image2");

    const desc = document.getElementById("desc").value;

    //Client side validation to check that all fields are entered
    if (!venuename || !address || !city || !daysAvailable || !topen || !tclose || image1.files.length == 0 || image2.files.length == 0 || !desc) {
        document.getElementById("addVenueError").innerHTML = "Please fill all the fields.";
    }
    else {
        const parseFileImg1 = new Parse.File("img1.jpeg", image1.files[0]);
        const parseFileImg2 = new Parse.File("img2.jpeg", image2.files[0]);

        const owner = Parse.User.current();
        /*create a subclass of the Venues class ie. inherit the properties of the Venues class.*/
        const Venue = Parse.Object.extend("Venues");
        //create an instance of the Venues class
        const venue = new Venue();

        var acl = new Parse.ACL();
        acl.setPublicReadAccess(true);
        acl.setWriteAccess(owner.id, true);

        venue.setACL(acl);
        venue.set("owner", owner); //pointer to owner
        venue.set("venueName", venuename);
        venue.set("address", address);
        venue.set("city", city);
        venue.set("daysAvailable", daysAvailable);
        venue.set("timings", timing);
        venue.set("image1", parseFileImg1);
        venue.set("image2", parseFileImg2);
        venue.set("description", desc);

        venue.save().then(function success(venue) {
            const displayArea = document.getElementById("displayVenues");
            displayVenue(displayArea, venue);
            i += 1;
            if (i == 11) { i = 0; }
            location.reload();
        }, function error(err) {
            alert("Error adding venue : " + err.message);
        });
    }

};

Let's go over what this function is doing. First, I'm retrieving the values entered in the form and checking that no fields were left empty. Then, the images are stored in a Parse.File object which allows storing data that is too large to fit inside a normal Parse.Object. Finally, after setting the fields to their values the .save() method is used to save the object to the database and like I stated before, if the Venues class did not exist Parse will first create it and then save the object. The displayVenue function will just add a new card to display the venue in the owner's dashboard. More about this function can be found in Part-2 of the tutorial.

One important point to note here is that we need to make sure that only the owner can modify or delete the venue. In order to provide such fine grained security we need to set an ACL (ACL = Access control list) using which we can specify who have permissions to read or write to that particular object. setpublicReadAccess(true) as the name suggests means that any user can read that object and setWriteAccess(owner.id, true) implies that only the owner has write access. The boolean value true specifies that I want to give permission. If instead I wanted to deny access to a user, then I would set that parameter to false.

Conclusion

So far, we have looked at user authentication and adding a new venue. If you would like to learn about querying the database and adding the booking functionality please check Part-2 of the tutorial.

Useful links

How to Build a Venue Booking App with SashiDo - Part 2
Github repo
Application Demo Video
Parse Javascript SDK documentation
SashiDo's Getting Started Guide

Nishka Kotian - SashiDo.io | API Development, Deployment and Scaling made simple.

How to Build a Venue Booking App with SashiDo - Part 2

Table Of Contents

Displaying venues on the dashboard

Welcome to SKED!

Your Venues

${venue.get("venueName")}

Filtering venues based on location

VENUES

Display venue details

Sending booking request to owner

Book this venue

Approve requests

Deleting past bookings

Conclusion

Useful links

How to Build a Venue Booking App with SashiDo - Part 1

Table Of Contents

Project overview

Database

User Registeration and Login

Adding a venue

Conclusion

Useful links