Skip to main content

Open Source Punch Clock/Time Sheet App Setup

Today's tutorial is on implementing a LAN accessible, PHP based punch/time clock and time sheet generator inside a virtual Linux server.

 if your small business is looking for employee attendance tracking app/ punch clock and time sheet generator that is 100% free; you've come to the right place.

The solution described below can be implemented on even modest existing hardware. All of the software is free and open source. 

The catch is it's a little bit of work to get it running. 

If you follow along you will end up with a time clock app accessible via web browser on any computer connected to your office network.





I tried to write this detailed enough that anyone can follow along regardless of tech background but time will tell...

This isn't quite finished/will go through a few improvements in the next week. It should get you started as is.

High-level overview:

We are going to be working with three windows programs. Togeather they will help us create a virtual Linux web (only accessible from your office network) that once set up can be out of sight out of mind. This virtual linux server will run Apache web server, mariadb (database), PHP and enable us to install a PHP based open source time clock.

Virtual Box 

https://www.virtualbox.org/wiki/VirtualBox 

Rocky linux

What I wanted was a non rolling release. Something that can essentially be set up and forgotten.

My first go to would have been CentOS but as that no longer exists as it used to I used rocky linux.

https://rockylinux.org/

Inside rocky we are going to be installing a Apache, MySQL, and PHP stack. The combo of the above is often referred to as LAMP. Linux, Apache (web server),MySQL, PHP

PHP Time Clock

http://timeclock.sf.net/

The original is no longer maintained and was written for PHP5.

Here's a more modern fork

https://github.com/E2EIT/timeclock-2 

Disclaimer: this software has some known security issues. It should be perfectly fine in a LAN/only accessible inside your office environment. 

I wouldn't advise making it web/wan accessible though.

Bitvise

This is an ssh client. It's totally optional as one can easily manage the system through the virtual box Interface. I find that to be rather clunky though so I use an ssh client.

Many more people have probably heard of a program called putty. Putty is awesome but once I found bitvise I haven't looked back. It integrates a file transfer window which makes a lot of tasks a lot quicker.

 

Tutorial

Prerequisites

  • Windows 7 through 11 should work (this tutorial is assuming windows 10)
  • 8+ GB ram (12+ is better)
  • Intel or AMD multi core cpu
  • Wired LAN connection (it can be made to work on wifi but I won't cover that here)
  • Internet connection 

Get a pad of paper 

We are going to create several username and password pairs and or named objects through out this tutorial. Often creating them in one step and needing them x steps later.

On it write the following

Linux root password:

My Linux username

My linux password

Database root password:

Database username:

Database password:

Database name:

VM ip:

in the rest of the tutorial, if you see blue font its time to write one of these down. alternatively you can use something like google keep (keep.google.com). nothing will make this harder than if you forget or have to constantly guess 

Windows Downloads and Installs

Download and install virtual box

Virtual box 6.1 and Install virtual box

You probably need to reboot after the install.

Download and Install Bitvise Client


Install it and leave it be for now

Download Rocky Linux 

Specifically the rock Linux 8.5 DVD iso file


Keep track of where this gets saved as we will need it later.

Virtual Machine Setup

Create a virtual machine

Open Virtual box manager 


  • click "New"


Name and operating system


  1. Click inside the Name field and give it a name (I went with punch clock)
  2. Select "Linux" for "Type"
  3. Select "Red Hat (64 bit)" for "Version"
  4. Click next

Memory Size

  1. click inside the memory size box
  2. delete the number present
  3. type 4096
  4. click "Next"




Memory size should be at least 4096MB for the install
  • Using the slider or the input box make it 4096
  • Click next 

Hard disk

  • Select "create a virtual hard disk now"
  • Click "Create"

Hard disk file type

VDI will work best for this application and should already be selected
  1. click "Next"


Storage on Physical hard disk 

  1. click "Fixed size"
  2. click "Next"

Location and Size


  1. Type 20 in this box
  2. Click "Create"


this box will disappear when the operation is complete. (sit back and wait a bit)

Configure The Virtual Machine

Inserting the install disk 

Now that we have a virtual machine but it's still a computer with out an operating system.

We need to point the virtual CD ROM drive at the rockylinux disk file.

Inside the virtual box manager window you should see the new virtual machine on the left hand column. (if this is a fresh install of virtual box its probably the only machine listed. in the pic bellow i have 2 other virtual machines)


  1. Right click on it
  2. left click settings 

  1. left click storage
  2. left click "Empty" (in the middle column) 
  3. left click the CD icon on the right of the window
  4. left click "Choose a disk file"

  • Navigate to you downloaded the rocky Linux ISO in.
  • Left click to select it
  • Left click "open"
You should be looking at the settings window again

Plugging it into the network

  • Left click "network" from the left hand column of the virtual machine settings window

  • Click the drop down box labeled "attached to"
  • Select "bridged adapter"
  • Click "Ok"

Now we are going to double check windows is configured properly to make this works.

On the task bar:


  1. Click the start button or hit the windows key on your keyboard
  2. Start typing "control panel"
  3. left click "control panel"
  • Click network and sharing center







Click where the red arrow indicates 

Click properties


Make sure "virtual box NDIS6" has a check next to it. 

Click close
Close the networking window

Install Rocky

Back in virtual machine manager:
  • Double click the "punch clock" VM we created
This will turn on the virtual machine and launch a window with it's monitor.



A note about this virtual monitor

This is for people who are new to virtual machines.

When you click inside the window we just launched; your mouse and keyboard will  disconnect from windows and reattach to the virtual machine.

To get your mouse and keyboard back to windows you press the control button on the right hand side of the keyboard 

You will also notice that when you want to move the virtual mouse or keyboard you first have to click inside the display to enter the virtual machine(trigger the attachment)

In a few more steps we will have the system set up and accessible via the Bitvise ssh program. Aka this is only a temporary annoyance.

Rocky Linux install

  • Click inside of the VM window
  • press up arrow on you keyboard to select "Install Rocky Linux 8"
  • Hit enter on the keyboard
a moment will pass and you should be looking at the Rocky Linux graphical installer 

  • Select your language
  • Click "Continue"
now we just need to complete two tasks before the installer (sit and wait part)

Select Installation Drive

the first is telling the installer what drive to install rocky on. since theres only one virtual hard drive its as simple as:
  • click "Installation Destination"

  • Click "Done" (picture bellow)

Create a "root" password

  • Click "Root Password"



  1. entered a root password
  2. confirm your password  
  3. click "done" (upper left corner)
On that pad of paper (I recommended in the first step) find "Linux root password" and write it down.

Start the Install

  • Click "Begin Installation"

now the waiting part.

when the wait is over you will see this:

  • ignore the "reboot system" button
  • instead hit left control (on your keyboard)(to escape the vm window)
  • click the X to close the window
  • Select "ok"
the reason we did this is: the virtual install dvd is still in the virtual drive. when we turn it back on we want to boot from what we just installed, not the install dvd. 

Taking the Virtual Install DVD Out

you should be looking at the "virtual machine manager" window

  • right click your "punch clock" virtual machine.
  • left click "settings"

  1. Left click "storage"
  2. Left click "rocky-8.5..."
  3. click the disk icon (on the right hand side of the window)
  4. click "Remove Disk from Virtual Drive"

  • click "ok"

Configuring Rocky

now the disk is out and we are ready to boot what we just installed. 

from your virtual box manager window:

 double click your punch clock VM.

Which should launch another window that will briefly display this: 

Then this:

EULA, Personal User Accounts and Welcome Tutorial

If everything is going to plan you will be greeted with the "INITIAL SETUP" screen

  • Click "License Information"

  1. Check the box
  2. Click "done"

  • Click "FINISH CONFIGURATION"

in a few seconds you should see more config screens that you can just click next through
  • click next until you hit "about you"

  • create a user name and write it down. 
  • click next
  • enter and confirm password
  • click next 
Write down this user and password combo on the paper I suggest in the start

My Linux username

My linux password


  • click next until you find this:
sadly that isnt the end of the annoyance. 

"getting started" will pop up. 
click the X to close it

Entering The Terminal 

you should now be looking at the rocky linux desktop. 
  • click the "Activities" button in the top right

  • start typing "terminal"
  • click the terminal icon.

Disable The Desktop

what we are trying to achieve with rocky is basically an unseen appliance. Booting a full graphical desktop is a waste of resources. 

Let's turn off the desktop.

Type:
sudo systemctl set-default multi-user.target
  • hit enter
  • type the user password you created above and hit enter

Type:
reboot
  • hit enter
wait a few seconds (for the reboot) and you should be looking at this:

  • type "root"
  • hit enter
  • type your root password
  • hit enter
Note: Linux password prompts don't show anything while you type. Just ignore nothing appears on the screen while typing the password.

Enable Networking

From the terminal we just logged back into:

type

nmtui
  • hit enter
the screen will go blue and you will be looking at this:
  • hit enter
  • press right arrow
  • Press down arrow to select "edit"

  • hit enter

  • down arrow untill there is a red square in "Automatically Connect"
  • press space bar and an x should appear in the box

  • Press down arrow to "ok"
                          
  • press enter
  • arrow down to back
  • press enter
  • down arrow to quit
  • press enter
  • type: clear
  • hit enter
your screen should now be black again. 
  • type: reboot
  • hit enter
  • wait for the reboot
  • log back in as root

Find The Virtual Machines IP address

  • type : 
ifconfig | grep enp -A1
  • hit enter

"Inet" is the virtual machines ip address
mine is: 192.168.0.27


write down the ip address form this step. VM ip:

Press right ctl (on your keyboard) 
(to break your mouse out of the VM window.
close the vm window)

Click the x to close the VM window (top right corner)
  • Select "send shutdown signal"
  • Click ok

Start Headless

If you've made it this far we are about to make it a lot easier to do the rest. 

No more captured mouse and right ctl to break out.

Infact the rest you will be able to copy and paste the steps.

from the vm manager window:
  • right click "punch clock"
  • select start
  • select headless start


SSH

by now you are probably fed up with hitting "right control" to get your mouse back. we are going to set up a method of accessing the server that doesnt require this fuckery.

From this point on we are going to use ssh to connect to the server.

Either from the windows desktop shortcut or start menu:
  • Open Bitvise ssh client
  1. Fill in the ip address from the step above
  2. Fill in your personal user name
  3. Click "login"
  • Click "Accept and save"

Fill in the password for your personal user name 
Click "ok"

If that worked; the icons on the left panel have changed.

  • Left Click "new terminal console"


Now we have a terminal window to the virtual machine. The best part is that this window behaves like a normal windows app. Aka you can copy and paste from it and don't have to hit ctl to get the mouse and keyboard out of it.

Practice Paste

Highlight the text in the box bellow

echo "anything in a box like this is pastable as a command"

  • Copy it to the clipboard.
  • Click the Bitvise terminal window 
  • left click to paste once to paste
  • Hit enter
You don't have to use this but I thought I'd share it Incase you find it easier.

Installing the Web Stack & Application 

This part is all done through the Bitvise ssh terminal window

Assume Root

We logged in as your personal user. To save having to type sudo (super/admin user do) Infront of every command we are going to switch to the root user

Type:
sudo su root
  • Hit enter
  • Type your user password if prompted

Update Packages

Linux is a collection of system and 3rd party programs that are often referred to / grouped as packages. 

What we are about to do is similar to windows update.

Type:
dnf update -y
  • Hit enter.

Depending on your connection speed this initial update will take a while

Apache Web Server

Install Apache

  • type
dnf install httpd -y
  • hit enter
A lot of text is going to scroll by on your screen. when its done the bottom part should look like this"

Enable Apache

The next two steps make sure the web server turns on with every reboot and tell it to turn on now

systemctl enable httpd
  • hit enter

systemctl start httpd

  • hit enter

Configure Firewall (firewalld)

firewall-cmd --add-service=http --permanent
  • hit enter

firewall-cmd --reload

  • hit enter

Disable selinux

Maria Database (mysql)

Install Mariadb

dnf -y install mariadb-server mariadb
  • hit enter

Enable & Start

systemctl enable mariadb
 systemctl start mariadb

Run Secure Install Script

  1.  mysql_secure_installation
  2. Hit Enter (the password is blank at the moment)

Set Root Password?

when prompted to "Set root password?"
  • type: Y
  • hit enter

Setting DB Root Password

the blank where you enter the password will not show anything while you type
  • type you password and hit enter
  • confirm you password and hit enter
for the purposes of this demo i set mine to "notagoodpass"
On the paper i told you to put in front of you to note important info "database root pass"

heres what happens if you screw up. 

have no fear, it just makes you do it again. 

Remove Anonymous Users





Disallow Remote Root Login




Delete "test" database


Reload Privileges



Finished Message



Install PHP

dnf module install php:7.4 -y
  • hit enter
this step bellow is something that will likely change in a few weeks. theres a library required that isnt included in the standard php module download. I havent had time to find it specifically so the command bellow will download and install all of them. 
dnf -y install php*
  • hit enter

restart the web server


systemctl restart httpd

  • hit enter

Install git

sudo dnf -y install git

Download PHP time clock with git.

But first let's change directory to the web servers root.

Type:

cd /var/www/html/
cd in linux changes the directory (folder) you are working in.

As configured above everything on the webserver is in /var/www/html

git clone https://github.com/E2EIT/timeclock-2


type

ls
  • hit enter
you should see this
ls is basicly saying: give me a list of everything in this folder. in this case its empty other than the timeclock application folder we just downloaded. (git clone)

now we are going to move the entire folder up a directory (to /var/www/) 
i used short hand to do this. 

mv timeclock-2 ../.
and then move everything that is in the folder back to /var/www/html

 mv ../timeclock-2/* .

try

ls

again and you should see:



Prepare Database


Let's enter the mariadb/MySQL command prompt by typing:

mysql -u root -p

Upon hitting enter/return you should be prompted for the password. 

Create a DB

CREATE DATABASE punch;

Feel free to substitute "punch" with anything you like. The point is to remember it or better yet write it down.

you will need the database name in a later step

Create a DB user 


CREATE USER 'punchadmin'@localhost IDENTIFIED BY 'password123';

Once again, replace "punchadmin" and password with something more suitable and write it down

Grant User Rights

GRANT ALL PRIVILEGES ON punch.* TO 'punchadmin'@localhost;
FLUSH PRIVILEGES;
exit

The bit about flushing privileges is actually applying them.

Database import from SQL file

now that we have a database created its time to fill it with the data the timeclock needs to function

type:
cd sql
type:

mysql -u punchadmin -p punch < create_tables.sql

Modify timeclock config file

first lets move back to the webroot (/var/www/html/)
cd ..
make a copy of the sample config file and turn it into the actual config file

cp config.inc.php.sample config.inc.php
edit the file

nano config.inc.php
look at the screen for a moment. specifically the top left
the blinking green square is your cursor. it indicates where anything typed gets put in the document
use the arrows to move it down and observe the picture bellow



we need to change the text between the quotes on $db_username, $db_password and $db_name

once you have your values filled in:
  • press "ctrl x" on your keyboard
  • it will ask if you want to save.
  • type y
  • hit enter

Test it out

  • open an internet browser of your choice. 
  • type the virtual machine ip address into the address bar
  • press enter

Assigning a Static IP


Making it Start Automatically

If you've made it this far and have a working punch clock server.

 The last step in making it an appliance is making sure it turns itself back on after windows reboots.

This link covers that


Making it a bit more secure

These last steps are entirely optional but good security practice. As I said in the start this app shouldn't be attached to a public IP address. As described above it's going to be perfectly safe for your office. By setting up a LAN only system (as described above) we limit the risk to disgruntled employees/people who can touch your network jack.

The following changes can safeguard against a disgruntled employee attempting to gain access.

Some of these I will describe others I will link to tutorials.

Modify the sshd Config file

Limit ssh login attempts

Disable root login over ssh

Consider using key/certificate based authent.


Modify PHP's Config File

Disable PHP shell functions

Disable PHP file upload


Set up a SSL/TLS Reverse Proxy

As set up there is no encryption between the users web browser and the virtual server. Which means when you log in as admin anyone who can sniff traffic on your lan could potentially pull out the time clocks admin username and password. Which would give them the ability to modify time sheets.

You will have to gauge the likelihood of both this happening and who's ever in charge of cutting the paychecks not noticing an employee who is suddenly getting paid for 168 hrs a week (24*7).

I'd say requiring SSL is overkill for most small businesses using this on their local network. But here's a bit of how and why if you feel it's a threat worth eliminating:

Parts of the php timeclock app may break if you try to set up SSL on the server itself.

A solution to this is to configure Apache to only run on the local host address 127.0.0.1

Then use another webserver like nginx to take SSL/TLS secured connections and forward the requests/output to the server only running internally.

You could also implement this as a container or a full blown second virtual machine then add a VM to VM network interface to each












Comments

Popular Content

XT - 30 Motorcycle Phone Charger

This post might help anyone looking for a slim line solution to 5v or USB ports on a motorcycle. Not a huge achivment by any means. But made life better for a client.  A perspective client approached me with an issue. His solution for charging his phone via USB on his bike was taking up too much room under the seat 

UV Lithography For Circuit Board Creation

In this multi part series on diy circuit board manufacturing/fabrication I'm going to cover my diy, vacuum pull down UV LED exposure box. If you are looking for a description of the entire fab process click here UV Exposure Rig The photos bellow are of the  uv lithography exposure box I cobbled together. It also features vacuum pull down.  The source: A 4.1w High luminous efficiency 365nm UV LED. Sourced from digi key mid 2016. Model  LZ1-00UV00

Smok Nord 4 Unboxing and Review

 Today I'm going to review the Smok Nord 4 ecig.