WORKFLOW MANAGEMENT SYSTEM

VISHTECH MX SDN. BHD

WAN AINAA NABILA BINTI WAN MOHD

HAMDI

2017240736
 UNIVERSITI TEKNOLOGI MARA CAWANGAN
MELAKA KAMPUS JASIN

INDUSTRIAL TRAINING REPORT

AT
VISHTECH MX SDN.BHD
NO 34-2, JALAN MUTIARA MELAKA 2, MUTIARA
MELAKA, 75350 BATU BERENDAM, MELAKA.
MALAYSIA

BY
WAN AINAA NABILA BINTI WAN MOHD HAMDI
(2017240736)

REPORT PRESENTED TO
FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES
AS PART OF THE REQUIREMENT IN

DIPLOMA IN COMPUTER SCIENCE

SEPTEMBER 2019
 APPROVED BY :

_______________________________

MADAM NURULHUDA BINTI GHAZALI

SENIOR LECTURER

FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES

UNIVERSITI TEKNOLOGI MARA JASIN CAMPUS

77300, MERLIMAU, MALACCA

27 SEPTEMBER 2019

ii
 ACKNOWLEDGEMENTS

First of all, I would like to express my gratitude to the Almighty Allah for giving me
strength and health to finish my internship program from 15 July until 7 September 2019.
Then I would like to express my gratitude to my parents and friends that helps me by
giving their suggestion, assistance and supply of information throughout this internship in
completing my project.

First of all, thank you very much to my company‟s supervisor, Mr Vikneshan A/L
Muniandy, Managing Director of Vishtech MX Sdn. Bhd for giving me the opportunity to
join the company to fulfil the mission and goal of the company. As well as my faculty
supervisor, Madam Nurulhuda binti Ghazali, that help me through her valuable suggestion
and guideline in preparing this report.

Thank you to all of the staff in Vishtech MX Sdn. Bhd that embrace me as one of
the staff there and help me in adapting to the company‟s environment. I am adapting well
and having fun learning many things in this company and it will be one of unforgettable
memory in my life. I believe, from this experience, I will be able to live a better life in the
future with all of the guidance given to me.

iii
 TABLE OF CONTENTS

TITLE PAGE i

APPROVAL PAGE ii

ACKNOWLEDGEMENT iii

LIST OF TABLES vi

LIST OF FIGURES vi-viii

LIST OF ABBREVIATIONS / GLOSARY ix

CHAPTER 1 INTRODUCTION
1.1 Industrial Training Background 1
1.2 Benefits to the organization, student & institution 1

CHAPTER 2 COMPANY BACKGROUND

2.1 Company’s Profile 2
2.2 Organization Chart 2
2.3 Mission and Vision 3
2.4 Example of Portfolio 3

CHAPTER 3 RESEARCH ON THE CURRENT SYSTEM AND PROPOSED

SYSTEM

3.1 Previous Studies 4

3.1.1 Problem Statement 5

3.2 Proposed System 5
3.2.1 Objectives 6
3.2.2 Scope 6
3.2.3 System Analysis 7
3.3 Planning and Schedule 7-8

iv
CHAPTER 4 DESIGN
4.1 Business Rules 9
4.2 Entity Relationship Diagram (ERD) 10
4.3 Context Diagram 11
4.3.1 Diagram 0 12
4.3.2 Diagram 1 13

4.4 Process Flow 14-18

CHAPTER 5 IMPLEMENTATION
5.1 Interface of the System 19-26

CHAPTER 6 CONCLUSION AND RECOMMENDATIONS 27

REFERENCES 28

APPENDICES

APPENDIX A 30-33

APPENDIX B 34-37

APPENDIX C 38

v
 LIST OF TABLES

Table Page

Table 3.1 System Requirements 7

LIST OF FIGURES

Figure Page

Figure 2.1 Logo 2

Figure 2.2 Organizational Chart 2

Figure 2.3 Example of Portfolio by the company 3

Figure 3.1 Flowchart of previous studies 4

Figure 3.2 Gantt Chart of WMS 8

Figure 4.1 Business Rules 9

Figure 4.2 System‟s ERD 10

Figure 4.3 Context Diagram of WMS 11

Figure 4.4 Diagram 0 of WMS 12

Figure 4.5 Diagram 1 of WMS 13

Figure 4.6 Login and Add Project Process 14

Figure 4.7 Search, edit and remove project and display workflow 15

Figure 4.8 Add, edit, add date and remove task 16

Figure 4.9 Add, edit, add date and remove subtask 17

vi
Figure 4.10 Edit, add date and remove subtask 2 18

Figure 5.1 Login Interface 19

Figure 5.2 Alert Box 19

Figure 5.3 Add Project 20

Figure 5.4 List of project 20

Figure 5.5 Search Box 21

Figure 5.6 Remove project 21

Figure 5.7 Edit project‟s details 22

Figure 5.8 Process Page 22

Figure 5.9 Add task 23

Figure 5.10 Wrong date entered 23

Figure 5.11 Actual start and end date 24

Figure 5.12 Add subtask 24

Figure 5.13 Edit task and subtask 25

Figure 5.14 Remove task and subtask 25

Figure 5.15 Gantt Chart 26

Figure A.1 Office interior 29

Figure A.2 Signboard on the stairs 29

Figure A.3 Monthly meeting with all the staff 30

Figure A.4 My workplace 30

vii
Figure A.5 Farewell ceremony 31

Figure A.6 Monthly punch card 31

Figure B.1 Example of INSERT command and kept in database 32

Figure B.2 Example of alert command for add record 32

Figure B.3 Example of SELECT statement using JOIN clause 32

Figure B.4 Example of UPDATE statement 32

Figure B.5 Example of DELETE statement 32

Figure B.6 Use of MD5 function to check validity of hash password 32

Figure B.7 Calculation to skip weekends and calculate only working days 33

Figure B.8 Example of alert command if date is invalid 33

Figure B.9 Use of CSS sticky element to freeze the left column in gantt chart 33

Figure B.10 Search process 34

viii
 LIST OF ABBREVIATIONS / GLOSARY

List of Abbreviations

UiTM Universiti Teknologi Mara

WMS Workflow Management System

ERD Entity Relationship Diagram

CSS Cascading Style Sheets

List of Glosary

Domain A distinct subset of the internet with addresses sharing a common suffix or
under the control of a particular organization or individual

Server A computer or computer program which manages access to a centralized

resources or service in a network

Quotation A formal statement setting out the estimated cost for a particular job or
service

Database A structured set of data held in a computer, especially one that is accessible
in various ways

Gantt Chart A chart in which a series of horizontal lines shows the amount of work done
or production completed in certain periods of time in relation to the amount
planned for those periods

Hashing A method of taking data, encrypting it and creating unpredictable,

irreversible output

Sticky A thread containing important information that is set to remain at the top of
the other threads regardless of when it was last updated

Interface A device or program enabling a user to communicate with a computer

System A group of related hardware units or programs or both, especially when

dedicated to a single application

ix
CHAPTER 1 : INTRODUCTION

1.1 Industrial Training Background

Practical training is part of the requirement for a student in Diploma in Computer Science
in UiTM to expose students on work experience before they graduates. Practical training is
important as they can apply the knowledge learned in classroom to work field. In this
courses, practical is more important than knowledge and practical training is the key to
train the students in practice their knowledge hands-on.

1.2 Benefits to the organization, student & institution

Students :

 They remember better about the knowledge that are being applied when they are
working.
 Increasing the student‟s employement prospects.
 The students can learn many things other than showed in the classroom.

Organizations :

 They can get a support, fresh ideas and more energy from the students.
 The staff in the organizations can develop a leadership skils to lead and monitor the
intern.
 It is convenient for the company to recruit the students into their company after
they graduate because the company already know the student‟s ability.

Institutions :

 Build a connection between the organizations and institutions.

 Promote the institution better to an organization when choosing their preference
employee.

1
CHAPTER 2 : COMPANY BACKGROUND

2.1 Company’s Profile

Figure 2.1 Logo

In year 2008, VISHTECH (IP0273354-M) began offering web services such as domain
name registration, web hosting services, web designing services, search engine
optimizations and online marketing services to the masses. They learned that it was not all
about servers and technology but what really important is people.

That is the main reason why they are in this business, to provide a world class service and
support to real people around the world. The quality work and advanced ideas of the
company can be clearly seen in the outcome of our website designs and portfolio. The
company excels with the hard work of many dedicated employees who are knowledgeable
and specialist in their respective department.

In the 10 years of the journey from the day our business was registered, the quality works
are well honoured by their customers. Now they own the title as The Best and Leading
Web Services Provider in Melaka. Day by day the numbers of clients keep on increasing,
therefore we have incorporated our enterprise business to VISHTECH MX SDN. BHD.
(1130235-V) and have expanded of our business to Ipoh, Kuala Lumpur and Johor Bahru.

2.2 Organization Chart

*Appendix C page 35

Figure 2.2 Organizational Chart

2
2.3 Mission and Vision

Mission

Our mission is to work closely with our clients to envision and realize their e-Business
potential in the challenging universe of information technology.

Vission

“To be the leading INNOVATIVE WEB SOLUTION provider in the Asia-Pacific region,
delivering consistent high-quality web services with exceptional results and excellent
customer services”

2.4 Example of Portfolio

Figure 2.3 Example of Portfolio by the company

3
CHAPTER 3 : RESEARCH ON THE CURRENT SYSTEM AND
PROPOSED SYSTEM

3.1 Previous Studies

Vishtech MX Sdn. Bhd is a company that provide web services in Melaka and all around
Malaysia. To start a work or to start process a certain job, the administrator need to create a
quotation which contain workflow of the project and the payment allocate for the project.
The workflow contain task, subtask, start date, end date and duration given to a certain
task. The administrator need to key in the date manually by looking at the calendar and
count the working days before enter the data. All of the process will be done manually as
there are no system to generate the duration automatically. After created the quotation and
customer satisfied with the quotation, then our staff will start processing the job after the
customer have paid the deposit. If the customer paid early, then we have to proceed with
the job earlier than the given date and if they paid late than allocated date, they have to
proceed with the job late and it also will affect the given date. If the project does not meet
the final date of the project, the customer have to pay for per day of the delayed work. The
delay of the project may be from the customer because they paid the deposit late.

Figure 3.1 Flowchart of previous studies

4
 3.1.1 Problem Statement

Manual data

Administrator have to look on the calendar to create the quotation. There are no
system to calculate the duration of certain task and will give the administrator a
hard time if he or she miss calculate the date and duration. They have to double
check the date to make sure that they did not make any mistakes as this quotation
will be relate to payment from customer.

No timeline

There are no timeline for this project. Customer wants to know how long the
project takes time and did the staff follow the schedule given or not. If the customer
pay the deposit earlier or late, the date from the workflow provided cannot be used
in the timeline as the real date are not recorded. There are no prove of the real
duration and date of the project‟s process.

3.2 Proposed System

In proposed system, we want to fix the problems occur so we proposed a system that can
calculate the date and duration and create the gantt chart automatically. The administrator
need to insert name of the project, start date of the project and the duration. Based on the
information given, end date of the project will be calculate automatically. After create a
new project, user can start insert the process or workflow of the project which can be used
to create a quotation. For the workflow, user need to insert task name, start date and
duration of the task. End date of the task will be calculate automatically by the system. All
of the information entered by the user or generated by the system will be saved in the
database. A gantt chart will be generated after all the workflow are inserted. User can edit
and remove the project while for task, user can edit, add subtask and remove the task. A
column will be provided for actual start date and actual end date. If the staff-in-charge for
the project start to do a certain task, they can click on a button start and click on end after
finishing the task. That way we can monitor the progress of the project whether the staff do
their work based on allocate days or not.

5
3.2.1 Objectives

Provide appropriate report

Report is important for an organization. It helps the organization to detect error or

to keep the history of the project. With this system, administrator do not have to
keep all the data such as date of the task because all of the date will be keep in the
database. The administrator only have to retrieve the data when she or he need.

Avoid error on data

As a human, we tend to make mistakes. We might miss the date or the duration to
create the workflow of the project. This system proposed zero error. All the
calculation will be calculate by the system therefore reduce the risk of mistakes
made by human.

User friendly

With the colourful and arrangement of the information, it is user friendly to be used
and easy for anyone to understand. Button with the description also provided to
ease the user in making any adjustment to the information.

3.2.2 Scope

Worflow Management System (WMS) is a database system for the administrator to

create a workflow of a project. This Software Design is focused on a base level of
functionality where only one type of user are allowed to use this system which are
staff and administrator only. The major benefits of the system is that the
administrator can avoid error while insert the date and can create a gantt chart
automatically based on the information inserted.The information are well secured
as we provide a security control over the user. The need to insert their registered
email and password before using the system. The password are being hashing in the
database so we guaranteed the security of the password. It is well protected from
the hacker or any malicious attack.

6
 3.2.3 System Analysis

WMS shall operate using all industry standard Web Browsers such as Internet
Explorer, Google Chrome, Apple Safari and many more. User can use any type of
operating system such as Windows, Linux or Mac.

System requirements for best environment :

Table 3.1 System requirements

CPU 1 GHz – Dual 2.6 Ghz

Hardware
Disk Space 300 MB – 4 GB
Requirements
RAM 512 MB – 4 GB RAM
Operating System (OS) Linux, Unix, Windows
Apache Web Server,
Web Server
Software LigHTTPD, IIS
Requirements PHP Version PHP 5.4 or above
Database MySQL 5.1 or above
Disk Space Minimum 8 MB

3.3 Planning and Schedule

Planning is an essential thing to do before start any project. It is needed to identify the
desired goals, reduce risks and most importantly aware of the deadlines. Some other
methodologies refer planning as preliminary investigation phase, initial study phase or
planning phase. Usually, Gantt Chart will be used to represent all the activities involved
during system development. Figure 3.2 shows Gantt Chart or workflow of my project :

7
 Schedule on Workflow Management System
22/7/2019 28/7/2019 3/8/2019 9/8/2019 15/8/2019 21/8/2019 27/8/2019 2/9/2019
Receive project from supervisor
Planning Phase
Identify all the activities and task
List the assumptions and constraints of the project
Create a detailed project planning schedule
Analysis Phase
Interview the administrator to analyze current system
Define new system objective
Define proposed system
Design Phase Start Date
Design Database
Duration
Software Design
Interface Design
Design Specification
Design Complete
Implementation Phase
Testing Phase
Check the functionality of the system
Validation test for security purpose
Maintanence and Documentation
Fix the error during testing phase
Ready for production

Figure 3.2 Gantt Chart of WMS

8
CHAPTER 4 : DESIGN

4.1 Business Rules

Business Rules is a way or directive to define entities, attributes, relationship and

constraints. Business rules help to develop a relationship between two or more entities as
well as constraints between each other. Business Rules allow the developer to understand
the business processes and the nature or scope of the data. In other word, they are a
communication tool between users and developer.

 A project requires many task.

 Each of the task are requires by only one project.

1 M
project require task

 A task may owned many subtask.

 Each of the subtask can be owned by only one task.

1 M
task owned subtask1

 A subtask can be broken down to many other subtask.

 Each of the new subtask may be broken down by only one subtask.

1 broken M
subtask1 subtask2
down

Figure 4.1 Business Rules

9
4.2 Entity Relationship Diagram (ERD)

Figure 4.2 System’s ERD

10
4.3 Context Diagram

Figure 4.3 Context Diagram of WMS

11
4.3.1 Diagram 0

Figure 4.4 Diagram 0 of WMS

12
4.3.2 Diagram 1

Figure 4.5 Diagram 1 of WMS

13
4.4 Process Flow

Figure 4.6 Login and Add Project Process

14
Figure 4.7 Search, edit and remove project and display workflow
15
Figure 4.8 Add, edit, add date and remove task

16
Figure 4.9 Add, edit, add date and remove subtask.

17
Figure 4.10 Edit, add date and remove subtask 2.

18
CHAPTER 5 : IMPLEMENTATION

5.1 Interface of the System

Figure 5.1 Login interface.

In this page, staff or admin are required to enter their email and password. It is to ensure
the security of the information are secured. If a new staff want to register, the developer
have to insert the information of the new staff in the database before login to this page.

Figure 5.2 Alert Box

If the email and password entered by the user matched with the data in the database, it will
continue to Figure 5.3 while if the credentials are not verified, it will go to Figure 5.1
again. User cannot access the system without registered email and password.

19
 Figure 5.3 Add Project

After login process, user will be shown to this page where admin need to key-in the
project‟s details that are required from the customer which is project title, start date of the
project and its duration. User can click on ‘Reset’ button if they want to clear all the
textbox or click on ‘Submit’ button after all the data are inserted correctly. All the
information will be kept in the database.

Figure 5.4 List of project

This page will be shown directly after insert the new project, if the admin do not want to
insert any new project, they can click on list of project on the header to visit this page. In
this page, there will be a list of project that are retrieved from the database. Workflow

20
column contains 2 buttons and Action column also contains 2 button which will be
explained later. Search icon above the table is for searching the project‟s name. If there are
100 projects, user do not have to go through all the project to find the needed one. User
need to hover at the search icon and the text box will be display as in Figure 5.5 below.

Figure 5.5 Search box

Figure 5.6 Remove project

‘Remove’ button in Action column is to remove any project that are not needed in the
database. Title of the project are shown but only for read-only purpose. This modal are
shown because to avoid any mistakes. Maybe the user only clicked the button with no
intention to actually delete the project so to be safe, this system ask the user either they
really want to remove the project or not. The removed project also will be removed from
the database.

21
 Figure 5.7 Edit project’s details

First button in Action column is ‘Edit’ button. When „Edit’ button is pressed, this modal
box will appear with the project‟s details that are fetched from the database. The details
can be edit and it will be update in the database replacing the previous data.

Figure 5.8 Process page

‘Process’ button from the Workflow column in list of projects will be direct to this page.
This page shows the workflow of the project. All the data from this page are retrieved from
the database. If there are no details of the task, admin can add new task by clicking ‘Add
Task’ button below the header. Icons on the action buttons shows the identity of the button.
If we hover the mouse cursor on the buttons, it will show us the function of the buttons.

22
 Figure 5.9 Add task

Modal box will appear for ‘Add Task’ button. User need to enter task, start date and
duration and click on „Add’ to add task. Task will be added to the database. If the user
enter start date that are more than end date of the project or less than start date of the
project, alert box will be shown as in Figure 5.10 and user need to enter the task again
using the right date.

Figure 5.10 Wrong date entered

End date will be calculate by the system using the start date and duration given by the user.
The end date will be set not including weekends. The system only calculate working days
not including weekends and public holiday. For example if the project‟s start date is
1/8/2019 and the duration is 10 days. The end date will be 14/8/2019. Supposed to be the
end is on 10/8/2019 but because weekends is not considered as working days so it will
remove Sunday and Saturday from the list. If user enter 25/7/2019 or 25/8/2019 as start
date for a task, then this alert box will appear and the task will not be keep in the database.
User need to enter the task again using the data that are in the given range.

23
 Figure 5.11 Actual start and end date

The first button on the Action column will show this modal popover. This is for staff only
where the staff who started the task need to click on the ‘Click to Start Task’ button and
vice versa. The system will update the current date and keep in the database. The date will
be use to create the gantt chart. Based on this, we can know whether the staff did his or her
task according to the estimated date or not.

Figure 5.12 Add Subtask

The second button in Action column is add subtask. This button apply to the task and
subtask only because we only provide 2-level of subtask under one task. User need to enter
subtask, start date and duration, same as add task and add project. The details also will be
keep in the database.

24
 Figure 5.13 Edit task and subtask

The third button in Action column is for editing. This apply on both subtask level. Data
from database will be display on the modal box and can be edit. After user click the
‘Update’ button, the data will be updated in the database.

Figure 5.14 Remove task and subtask

The last button in Action column is used to remove task or subtask. The task or subtask
will be displayed on the modal box but for read-only purpose. User cannot change the data
displayed. When ‘Yes’ is clicked, the data for the specific row will be remove from the
table and from the database.

25
 Figure 5.15 Gantt Chart

When ‘Summary’ button is clicked, this page will be displayed. All of the data here
basically fetched from the database including project‟s name. Yellow bar represent actual
job‟s work and green bar represent estimated job‟s date.The left column are is a sticky
column which if the scrolling is made to the right, the left column is still freeze at it place.
All the date displayed are only working date which not include weekends and public
holiday.

26
CHAPTER 6 : CONCLUSION AND RECOMMENDATIONS

There are many system that can generate gantt chart automatically but Workflow
Management System focuses to solve this company‟s problem. It is our company‟s
copyright which are not available for others. This system are designed especially to make it
easy for the administrator and the staff in recording the date of certain task. It can be used
to manage our workflow as we may have many jobload to be done at one time.

As in the future, some additional stuff could be implemented and integrated making it
much more reliable and flexible. Apparently the system can only did the basic things such
as add, update and remove. In the future, it can be upgraded into a system that can give a
notification to all the staff about their task to be done for the day. Staff do not have to
frequently check if there are any job left to be done. This also can be done to avoid any job
be left behind.

As a business company, this system also can be sell or posted online to be shared to others.
If we decide to sell it, this may be our sources of income or if we decide to shared, it can
be a good things for others as other company or even student can use this system for free.

The interface of the system also could be improve to make it look more general and
realistic. As this system is a first version, a lot of things can be improved in terms of
interface, functionality and realibility.

A good system is evaluate by three parts which is simple, sticky and self-regulating. A
clear, direct and simple to be understand by the user is a real explanation of a good system.
And the most important thing is that the it can be used and produce a correct output.

27
 REFERENCES

Computer Hope. (1998). Retrieved September 3, 2019, from https://www.computerhope.com/

w3chools.com THE WORLD'S LARGEST WEB DEVELOPER SITE. (1999). Retrieved August 20, 2019,
from https://www.w3schools.com/

Apache NetBeans. (2017). Retrieved August 23, 2019, from https://netbeans.org/index.html

Google Charts. (2017, April 25). Retrieved August 17, 2019, from
https://developers.google.com/chart/interactive/docs/gallery/ganttchart

Guru99. (2019). Retrieved August 3, 2019, from Tutorials Library: https://www.guru99.com/

Stack Overflow. (2019). Retrieved August 23, 2019, from https://stackoverflow.com/

Otto, M. (2019). Bootstrap · The world's most popular mobile-first and responsive front-end
framework. Retrieved July 25, 2019, from https://getbootstrap.com/docs/3.4/

28
APPENDICES

31
 APPENDIX A

WORKPLACE ENVIRONMENT
 Appendix A

Figure A.1 Office interior

Figure A.2 Signboard on the stairs

31
 Appendix A

Figure A.3 Monthly meeting with all the staff

Figure A.4 My workplace

32
 Appendix A

Figure A.5 Farewell ceremony

Figure A.6 Monthly punch card

33
 APPENDIX B

EXAMPLE OF CODING
 Appendix B

$sql="INSERT INTO task (`proj_id`, `task_name`, `task_duration`,

`task_sdate`, `task_edate`) VALUES ('$proj_id', '$task_name',
'$task_duration', '$task_sdate', '$task_edate')";

$results= mysqli_query($dbc,$sql);

Figure B.1 Example of INSERT command and kept in database

if ($results) {
print '<script>alert("One Record Had Been Added");</script>';
}
else {
print '<script>alert("Data Is Invalid , No Record Been Added");</script>';
}

Figure B.2 Example of alert command for add record

$members = $mysqli->query("SELECT * FROM `subtask2` JOIN `subtask1` ON

`subtask2_id` = '$subtask2_id' AND
`subtask1`.`subtask1_id`=`subtask2`.`subtask1_id` JOIN `task` ON
`subtask1`.`task_id`=`task`.`task_id`");

Figure B.3 Example of SELECT statement using JOIN clause

$mysqli->query("UPDATE `task` SET `task_name` = '$task_name',

`task_sdate`='$task_sdate', `task_edate`='$task_edate',
`task_duration`='$task_duration' WHERE
`task_id`='$task_id'");

Figure B.4 Example of UPDATE statement

$mysqli->query("DELETE FROM `subtask1` WHERE`subtask1_id`='$subtask1_id';");

Figure B.5 Example of DELETE statement

$password = md5($password);

Figure B.6 Use of MD5 function to check validity of hash password

35
 Appendix B

$date=date_create($task_sdate);

date_add($date,date_interval_create_from_date_string($task_duration."days"))
;
$task_edate = date_format($date,"Y-m-d");
$datearray = array();

$startdate = strtotime($task_sdate);
$enddate = strtotime($task_edate);

// Use for loop to store dates into array

// 86400 sec = 24 hrs = 60*60*24 = 1 day
for ($current = $startdate; $current <= $enddate; $current += (86400)) {
$cdate = date('Y-m-d', $current);
$day = date('l', strtotime($cdate));

if(!(strcmp($day,'Sunday')==0 || strcmp($day,'Saturday')==0)) {
$datearray[] = $cdate;
}
else {
$enddate+=(86400);
}
}
$task_edate = end($datearray);

Figure B.7 Calculation to skip weekends and calculate only working days

else if ($task_sdate<$mem['proj_sdate'] || $task_edate>$mem['proj_edate'])

{
print '<script>alert("Date Is Invalid");</script>';
}

Figure B.8 Example of alert command if date is invalid

.table-scroll thead th {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}

Figure B.9 Use of CSS sticky element to freeze the left column in gantt chart

36
 Appendix B

<!-- Table search update -->

<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
}
</script>
<!-- Table search update -->

Figure B.10 Search process

37
 APPENDIX C

SUPPORTING DOCUMENTS