In the digital age, managing physical spaces efficiently has become a necessity. Whether it’s for coworking spaces, offices, or shared amenities in residential buildings, having a system to track who is present at any given time is valuable. This blog post explores a script that allows us to create a user check-in/check-out system. This system could be used in a variety of environments that require managing and tracking user presence.
User Authentication: When users first visit the webpage, they are asked to enter a building code. This building code is then stored in the browser sessionStorage for persistence across page reloads and sessions.
User Lists: The webpage displays two lists of users – those currently in the building (checked in) and those not (checked out).
Check-In/Check-Out: Each user in the list is accompanied by two buttons – one for checking in and one for checking out. Users are moved to the “checked-in” list when they check in. They are moved to the “checked-out” list when they check out. Thanks to AJAX, these changes are updated in real-time on the webpage without requiring a page reload.
Adding Users: The webpage also includes a form for adding new users to the system. This new user is added to the “checked-out” list until they check in.
Deleting Users: Each user has a delete button next to their name. Clicking this button removes the user from the system entirely.
How to Use It
To use the system, follow the steps below:
Visit the webpage and enter your building code. You can use the code Demo to trial the system.
If you are a new user, fill in your name in the “Add User” form and click the “Add User” button.
To check-in, find your name in the “Checked-Out” list and click the “Check In” button next to your name.
To check out, find your name in the “Checked-In” list and click the “Check Out” button next to your name.
To delete your user from the system, click the “Delete” button next to your name.
You can find the full code below a download a copy from here
-- Create the databaseCREATEDATABASEIFNOTEXISTS CheckInOutDB;
-- Create the buildings tableCREATETABLEIFNOTEXISTS buildings (
code VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL
-- Create the users tableCREATETABLEIFNOTEXISTS users (
name VARCHAR(255) NOT NULL,
building_id INTNOT NULL,
is_present BOOLEAN NOT NULL DEFAULT FALSE,
FOREIGNKEY (building_id) REFERENCES buildings(id)
Here, we are creating two tables, buildings and users. The buildings table has an id, a code, and a name. The users table has an id, name, building_id (which references the id in the buildings table), and is_present (which is a boolean indicating whether the user is checked in or not).
This database structure allows for multiple buildings each having their own set of users. Users are associated with a building through the building_id foreign key.
Remember to replace CheckInOutDB with the name of the database you want to use, and adjust the column types and sizes as needed for your specific use case.
Please note that this is a simple system and doesn’t incorporate advanced features like user authentication and encryption, which are important for real-world applications. Always ensure you follow best practices for security when developing web applications.
Found priceless insights in this blog? Support the author’s creativity – buy them a coffee!