Share My Creation Employee Attendance System

Employee Attendance System​

This is a desktop and mobile-based system for managing employee attendance. It uses selfies with date, time, and location to record time-in and time-out. The system includes a mobile app for employees (built with B4A), a desktop admin panel (built with B4J), a RESTful API (using PHP-CRUD-API), and a MySQL database.

​

Features​

Employee Mobile App (B4A)​

• Login with employee credentials.
• Time-in/time-out (once per day) with selfie, date, time, and location.
• View profile and attendance history (by date range).
• Logout.

Admin Panel (B4J)​

• Login with admin credentials.
• Manage departments, shifts, locations, and employees (employee creation).
• Create and manage employee accounts.
• Generate date-wise attendance reports.
• Logout.

Backend API​

• Handles data operations (CRUD) for the mobile app and admin panel.
• Built with PHP-CRUD-API.

Database​

• MySQL database to store departments, shifts, locations, employees, accounts, and attendance records (including selfies, date, time, and location).

Technologies​

Technology	Version/Requirements
PHP-CRUD-API	v2, requires PHP 7.2+ with PDO drivers enabled
MySQL	5.7+ / MariaDB 10.0+ for spatial features
B4A	13.10
B4J	10.20
Web Server	Apache (via XAMPP or similar)

Installation​

1. Set Up the Database​

1. Install XAMPP and start Apache and MySQL.
2. Access PHPMyAdmin (http://localhost/phpmyadmin).
3. Create a new database named b4xattendance.
4. Import the b4xattendance.sql file (located in the API and DB folder) to set up the database structure and data.

2. Set Up the API​

1. Copy the api.php file (located in the API and DB folder) to the XAMPP htdocs directory (e.g., htdocs/api/).
2. Open api.php in a text editor.
3. Locate the configuration line (approximately line 12777) and update it with your MySQL server details:
   
   
4. $config = new Config([
       'driver' => 'mysql',
       'address' => 'localhost', // Your MySQL server address
       'port' => '3306',        // Your MySQL port
       'username' => 'root',    // Your MySQL username
       'password' => '',        // Your MySQL password
       'database' => 'b4xattendance',
       'debug' => true          // Change to false for production
   ]);
5. Save the file.

3. Test the API​

1. Open a browser or use a tool like Postman.
2. Visit the following URL to test the API:
   
   http://localhost/api/api.php/records/tbl_shift
3. If set up correctly, you should see data from the tbl_shift table.

4. Set Up the Mobile App (B4A)​

1. Open the B4A project (located in the b4a folder) in the B4A IDE.
2. In the app, access the API endpoint configuration option.
3. Enter the API endpoint using your computer’s IPv4 address (e.g., http://192.168.1.x/api/api.php/records/). Note: B4A does not support localhost or 127.0.0.1. To find your IPv4 address, run ipconfig in the Command Prompt (Windows) and look for "IPv4 Address".
4. Compile and deploy the app to an Android device.
5. Test login with employee credentials created by the admin.

5. Set Up the Admin Panel (B4J)​

1. Open the B4J project (located in the b4j folder) in the B4J IDE.
2. In the panel, access the API endpoint configuration option.
3. Enter the API endpoint (e.g., http://localhost/api/api.php/records/).
4. Compile and run the admin panel.
5. Log in with the default admin credentials:
   • Email: [email protected]
   • Password: admin

6. Access the System​

• Mobile App: Use an Android device to log in as an employee and record time-in/out with selfies.
• Admin Panel: Run the B4J app on a desktop to create employees and manage the system.
• API: Access at http://localhost/api/api.php/records/ for data operations.

Default Credentials​

• Admin (B4J):
  • Email: [email protected]
  • Password: admin
• Employee (B4A): Created by the admin in the B4J panel.

Notes​

• Employees must be created by the admin in the B4J panel.
• The B4A app requires an Android device with camera and GPS for selfies and location.
• Ensure the API is running on the web server for the mobile app and admin panel to function.
• For production, secure the API with authentication and use HTTPS.
• The b4xattendance.sql file contains the database structure and initial data.
• The source code is for educational purposes and can be modified freely.
  
  

  Pricing and Payment​

  • Price:​

    • $15 until May 1, 2025 (promotional period).
    • $30 after promotional period
  • Payment Method: PayPal
    • Send payment to: [email protected]
  • Note: Contact the developer via PayPal or email for access to the source code after payment.

 

[Abdull Cadre]

Payment done

Thank you, check your email

 

[M.LAZ]

What's New:

- Added reports screen​

- UI improvements in B4J​

- Remove external libraries​

​

To all who have paid, please request access: AttendanceAppUpdate.zip

it will be good choice if you add face recognition using python Libs in b4x.

 

[Abdull Cadre]

Please pay attention to the technologies.​

Technology	Version/Requirements	Link
PHP-CRUD-API	v2, requires PHP 7.2+ with PDO drivers enabled	https://github.com/mevdschee/php-crud-api/blob/main/api.php
Web Server	Apache (via XAMPP)	Download XAMPP Download XAMPP for Windows, Linux, and OS X. Older versions of Solaris are also available. www.apachefriends.org
MySQL	5.7+ / MariaDB 10.0+ for spatial features	-
B4A	13.10	https://www.b4x.com/android/files/B4A.exe
B4J	10.20	https://www.b4x.com/b4j/files/B4J.exe
JDK	19.0.2	https://www.b4x.com/b4j/files/jdk-19.0.2.zip

 

[Abdull Cadre]

it will be good choice if you add face recognition using python Libs in b4x.

very interesting

 

[Abdull Cadre]

JDK

19.0.2

Please make sure you use the latest version of JDK, 19.0.2

 

[M.LAZ]

I have a question .. is it a simple to reproduce the app with native b4x instead of using integrated html files ? because I don't have idea about web technologies.

 

[mcqueccu]

I have a question .. is it a simple to reproduce the app with native b4x instead of using integrated html files ? because I don't have idea about web technologies.

Yes

 

[Xfood]

I have a question .. is it a simple to reproduce the app with native b4x instead of using integrated html files ? because I don't have idea about web technologies.

It would be nice to have a guide on how to create these forms, and how to interact with them

 

[Mashiane]

Yes

Does this mean the app is running inside a webview? I have not bought it as yet and I had thought it was all purely native. Interesting.

 

[Abdull Cadre]

Does this mean the app is running inside a webview?

Not exactly, think that instead of .bal you have .html, where clicks or events are controlled in b4a/b4j

Where if for example, you click on a button, an "onclick" method is triggered in b4a

 

[Abdull Cadre]

Basically an interesting alternative for those who like b4x but prefer to build their layouts in HTML

 

[Abdull Cadre]

I'm thinking about doing a tutorial, or maybe a course, but I don't speak English perfectly and many people might have trouble understanding me.

 

[Mashiane]

Where if for example, you click on a button, an "onclick" method is triggered in b4a

And all of this is NOT EXACTLY using a webview inside your b4a/b4j app and somehow uses HTML? Interesting. Please do the tutorial / course when you have time. Will gladly push certificates of appreciation. My curiosity has been picked up a great deal. This should be a very interesting learning curve. Thanks again.

 

[Xfood]

I'm thinking about doing a tutorial, or maybe a course, but I don't speak English perfectly and many people might have trouble understanding me.

It would also be interesting to have a video tutorial, even in your own language. and then everyone watches the video, or translates it via ia

 

[AnandGupta]

Good ! Better !! Best !!!

I just opened the project after so much reading about some webview interface. Never thought one can use html+css+javascript to create such lovely, beautiful, living app (B4J)

I know little html. Css just the surface (had to learn for my son's project). Javascript looks like programing language but headache for me, as web knowledge is must here.

So I can see known elements there and so light for B4J (java is heavier, IMHO) using web-view and controlling all in B4J itself.

Knowledge is one thing, how to use it is another.
Congratulation! @Abdull Cadre

If nothing, the project is a gold mine of logic of creating beautiful living interface, which is first impression the clients get after seeing something. I am very very good in coding logic but very very bad in interface designing. This may help me some.

BTW is there any online html designing tool, so that we can create our own interface page with css+script etc. and use it in webview ?

 

[josejad]

Great project, I got it working in five minutes. I will learn a lot of things from it.

Just as a note, I got an php error due to the temp dir permissions

<br /> <b>Warning</b>:  scandir(C:\Windows\Temp\phpcrudapi-95781378-cache): Access denied (code: 5) in <b>C:\laragon\www\api.php</b> on line <b>3906</b><br /> <br /> <b>Warning</b>:  scandir(C:\Windows\Temp\phpcrudapi-95781378-cache): Failed to open directory: No such file "

Solved adding to the config part of the php file (line 12777) the line

'cachePath' => __DIR__ . '/cache', // Use a cache folder into your project.

Add this line to the point 4 of the first post.