I was tasked at my current job to build a Time Clock system for employees to clock in and out of work everyday. To make it a little more unique and cool one of the main features is a Webcam capture that takes a photo when you clock in or out of the system.
I have been wanting to try out PHPs Laravel framework for some time now and this was the perfect opportunity for me to jump in head first and build a REAL application that will be used everyday for years to come. I immediately fell in love with Laravel and have since built a few more advanced applications in Laravel, each one getting even more better and cool. I love it!
So I built this application a few months ago, right around when Laravel 4 was released, I believe it was the same week. So this post is to showcase the project with some screenshots and show what I built. I am also a huge fan of Bootstrap, it really speeds up a project and I can have a nice clean design with minimal effort and time, all a huge win in my book.
I try to explain the main sections below in more detail along with screenshots of the main sections. I left out many views as I only wanted to showcase the important stuff. The hardest part of this project was building reports based on different user time zones. For example to view all time cards for a user within a date range. The time cards are stored in the Database in UTC time and then shown on the frontend to a user in there relevant time zone.
Feel free to ask any questions in the comments if you have any. Like I mentioned this was my FIRST Laravel application and I have built a few more since it. Each one has progressively been even better so I am pretty proud of some of them. I will post about my most recent one soon in another post which is a Campaign Manager application.
*** The UI still needs lots of cleaning up, I was on a time crunch rush type schedule so that will be another project down the road fixing the UI and making it more pretty
Time Clock Features
- Login and out
- Clock in and out
- Take webcam photos when an employee clocks in or out.
- Set Time Zone and view all dates and time in that time zone.
- View recent time cards
- View Calendar view for time card activity
- Create/Edit/Disable Employee accounts
- Login as an employee
- Do an Admin Clock-In/Clock-Out Override
- Edit existing time cards
- View Time Card Reports for an employee by Date Range
- View Calendar Time Card data for all users
- View all Active users list
- View all Clocked-in users list
- View all Clocked-out users list
- View all Disabled/Fired users list
- Other bits and pieces I left out of the details for now
- Nightly Email to Admin to show any employees who forgot to Clock out of the system
The Dashboard is where an employee lands once they login to the system. You can see in the screenshot below that the WebCam is immediately ready to take your photo and clock you in or out once you hit the Clock In/Clock Out button! Below that it shows your recent time cards for the past 24 hours.
Once an employee clocks in or out, it will automatically log them out of the system right away after it counts down a logout timer. The employee then has the option to click the button to remain logged in if they choose to. This feature is similar to how a Banking website will log you out of the system after a period of inactivity to prevent others from getting onto your account on a shared computer or workspace
Time Card Reports by Employee and Date Range
Pretty straight forward. You select an employee and a start date and end date. This builds a report of all there Time Cards in that date range. It shows there image, clock in date and time, clock out date and time, and duration between the two times. At the bottom it will show the total hours worked in that date range. The cool part is this all works across Time zones. The employee has thre own timezone set and the times are adjusted on a per user basis when viewing records. This was by far the most complex feature as
Calendar View of an Employees Time Cards
Here you can view an employees timecards on a nice easy to navigate Calendar view
Admin Employee List
The admin panel list all the employees in multiple lists. Active employees, Clocked In employees, Clocked Out employees, and Disabled employees. The admin can also clock an employee in and out without using the webcam, login as an employee, disable an employee, create a new employee, edit time cards, edit employee records, run time reports by date range.
Edit Employee Profile
Admin users can edit employee settings and profile details.
Admin users can view the Logger for each employee. The logger records the Date and time, page URL, and Employee so there is a record of every clock in/out, page view, and everything else.
Edit Time Card
Admin users can edit time card records if a user clocks out at the wrong time or for other admin reasons.