Skip to content

Chris' Laboratory

chrislee.kr – Personal blog as bookshelves

Menu
  • Home
  • Github
  • Contact Me
Menu

Time Clock Management System developed with Yii2 REST API + Angular 2 + Docker

Posted on 22/01/201722/01/2017 by Chris Lee
Read Time:2 Minute, 11 Second

Time Clock Management System (Yii2 REST API + Angular 2 + Docker)

 

Source Repo: https://github.com/chrisleekr/time-clock-management-system-yii2-rest-api-angular2-docker

 

This is a personal project for learning Angular 2. The project contains two applications, one for REST API backend, and the another for Angular 2 frontend.

The project involves:

  • Yii2 for providing RESTful API including user login/logout, managing global settings/team/staff, showing period based reports, recording any activities done by users, and lastly time clock in/out
  • User authentication based on randomly generated access token for stateless REST API through HTTP Bearer Tokens
  • Angular 2 with CoreUI template, featured by Angular 2 Color Picker Directive, moment.js pipes, Angular2 date range picker, SweetAlert2, Native Angular directives for Bootstrap
  • Porting AngularJS Circular Time Picker for Angular 2 as component
  • Custom-made stopwatch component
  • Dockerized application of frontend, backend and db

Note: This project is developed for learning and practice. Not suitable for production use. And it does not provide any testing code.

Getting Started

Directory Structure

  timeclock-backend/  contains Yii2 RESTful API application
  timeclock-frontend/ contains Angular 2 frontend application

Menu Structure

  /login                authenticate with user credentials
  /logout               log out
  /dashboard            display latest activities and shortcuts
  /time-clock           clock in/out staffs
  /report/timesheet     display timesheet reports for staffs
  /activity             display activities that are recorded
  /setting/global       manage global configurations for the applicaion
  /setting/team         list/create/update/delete teams
  /setting/staff        list/create/update/delete staffs

Prerequisites

  • Docker 1.12.1+: https://www.docker.com/
  • VirtualBox: https://www.virtualbox.org/

Usage

To run the application, open the console and execute following commands.

    $ git clone https://github.com/chrisleekr/time-clock-management-system-yii2-rest-api-angular2-docker.git
    $ cd time-clock-management-system-yii2-rest-api-angular2-docker    

Then open docker-compose.yml file in the root folder and replace <YOUR GITHUB API TOKEN> to Personal access tokens from Github

Alt text

Once you replaced API token, run following command.

    $ docker-compose up

And wait for it is up and running. It might take for a while to fully up and running.

Alt text

Once it is up and running, please open another console window and execute following command to migrate database.

    $ docker-compose run --rm backend ./yii migrate

Alt text Once migration is done, then open the browser and access to:

  • Frontend: http://localhost:4200
  • Backend: http://localhost:4201

By default, the application provides admin credentials as username admin and password 123456. As the application does not provide the function to manage user information at the moment, please do not use in production unless you know what you are doing.

Screenshots

Alt textAlt textAlt textAlt textAlt textAlt textAlt textAlt textAlt textAlt textAlt textAlt textAlt text

Share

Facebook
Twitter
LinkedIn
Email

Related

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Adobe Flex (2)
  • Android (20)
  • Angular (ngx) (3)
  • Arduino (2)
  • Codeigniter (6)
  • CSS (5)
  • Django (2)
  • Docker (5)
  • E-Commerce (6)
  • Finance (2)
  • General Documents (15)
  • Google App Engine (5)
  • Helm (1)
  • iPhone (13)
  • Javascript (13)
  • Kubernetes (2)
  • Linux (13)
  • Magento (8)
  • Marketing (3)
  • MongoDB (4)
  • MS-SQL (1)
  • MySQL (6)
  • Node.js (6)
  • PHP (17)
  • Platforms (1)
  • Raspberry Pi (5)
  • React Native (4)
  • React.js/Next.js (2)
  • Samsung Smart TV (4)
  • Security (17)
  • Sencha Touch (4)
  • Server (31)
  • SVN (7)
  • Terraform (1)
  • Tools (7)
  • Uncategorized (1)
  • VirtualBox (1)
  • Vue.js (1)
  • Web Development (7)
  • WordPress (4)
  • Yii2 (3)

Search

Recent Posts

  • Gitlab Helm upgrade failed to register Gitlab runner 403 Forbidden
  • Run docker-dind and docker in Kubernetes cluster
  • Next.js Tutorial – Setting up your database in your local development environment
  • helm list error stream ID 3; INTERNAL_ERROR
  • Bootstrapping Kubernetes cluster with kubeadm

Recent Comments

  • Vadim on Alpine – Plugin caching_sha2_password could not be loaded
  • Andris on Binance Auto Trading Bot – Buy low/Sell high with stop loss limit/Trade multiple coins
  • Obayed on Binance Auto Trading Bot – Buy low/Sell high with stop loss limit/Trade multiple coins
  • Ari on How to install memcache.so/memcached.so for MAMP Pro (Mac)
  • Mida ali on Binance Auto Trading Bot – Buy low/Sell high with stop loss limit/Trade multiple coins

Tags

1 ajax amazon android android-addpart browser chrislee-kr codeigniter codeigniter-tcpdf com-apple-net-racoon CSS CSS history hack delpaigmail-com entity-addpart-double exception-printing-is-disabled-by-default-for-security-reasons ext-plugins-listpagingplugin ext-plugins-listpagingplugin-example f iphone javascript jquery-defaultchecked jquery-samsung-smart-tv listpagingplugin mac magento-exception-printing-is-disabled-by-default-for-security-reasons magento-sample-data-exception-printing-is-disabled-by-default-for-security-reasons nu-vot null-core-errors-confignotfound-config-mk9engine-ini php samsung-smart-tv-jquery samsung-smart-tv-sdk-ajax samsung-smart-tv-sdk-jquery samsung-tv-sdk samsung-tv-sdk-jquery samsung tv sencha-smart-tv sencha-touch-list-paging smart-tv-jquery sqlite subversion svn tcedook tcpdf-codeigniter uilinebreakmodecharacterwrap-is-deprecated unknown-column-link-area

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 Chris' Laboratory | Powered by Minimalist Blog WordPress Theme