Page |1

1.0 EXECUTIVE SUMMARY

The purpose of this report is to fulfill the requirement of Internet Programming CSC128 of
January 2011, and to display our understanding of this course.

The report documents the work of developing a dynamic web application Project Time
Management System from the category of online learning content management systems.

The overall objective of the PTMS web application is to disseminate and exploit the area of
project management with more concerns toward information technology projects. The project
targets the benefits and achievements of project leaders, managers, and any other actors
interested in this area.

The web application has been planned after the learning outcome of another course Computer
Project Management ICT2103. Site design has therefore taken into consideration the likely
information obtained from this course.

The password-protected area of the web application provides a repository and access point for
members to access PCIS functions.

The visible area in PCIS depends on everyone access, once he had logged in, and PTMS has
no public area.

Page |2

2.0 INTRODUCTION
This report details the overall objectives and process that have guided PTMS planning and
development. It discusses the standards used, the infrastructure and content of PTMS.

3.0 DESIGN JUSTIFICATION

The objective of the PTMS web application is to disseminate and exploit the area of project
management with more concerns toward information technology projects. The project targets
the benefits and achievements of project leaders, managers, and any other actors interested in
PM and activity's monitoring.

For any IS project, and perhaps for any activity these days, time is crucial, in matter of fact it
became a strategic advantage to businesses. From this perspective, we believe that an online
web application is the most effective method to manage such information.
The key issues that were considered in selecting, structuring and writing content for PTMS are
the following:

To provide a snapshot of the work that is being conducted within the projects activities.

To successfully reach the project team members.

To maintain online connection between the PM and its team members, allow the PM to
follow up project activities from distance, and widespread geographical area.

To provide a broad, shallow structure, in line with least clicks, to make the web
application as transparent as possible.

The web application has been planned targeting two groups; a) Project Managers and b) Project
Members who are involved in the project. Therefore, the web application has taken into
consideration the likely information needs of those two groups.
One of the requirements of this project was to develop a web application within 13 weeks of
this semester. This target was achieved, and the development of the web application was
completed on 13 April 2012.

Page |3

4.0 DEVELOPMENT
The design was to develop a web-application system that helps to track project activities,
effort, and create project database. Individual logins were essential to allow different types of
user rights to be allocated. Finally, the system needed to be extensible so that features could be
added as needed. The web-application developed using in-house developing environment.

4.1 Methods & Tools

We had the choice between two alternatives for achieving our goals in this course:
Creating our own code or using a framework.

The first one, building everything ourselves, would have been a lot of work for the little time
we had. It would have been necessary to create numerous pages and interfaces, and would need
coding, database and several tables. The programming part in the application functions would
have been very complex. Besides the complexity, it would have been a waste of time to create
something that already exists.

So the better alternative was to use a framework, which probably has fewer errors than the
homemade code would have had. The framework has a lot of effort and time in it that we
could never put into our own code. Another advantage was that most frameworks are still under
development, so this forms a better basis for forthcoming work. This forthcoming work could
also make use of the features that we didnt use, like the
option of using Fusion charts.

Prerequisites of suitable framework were:

Microsoft Visual Studio .Net environment support.

Microsoft SQL server.

We did some research on different frameworks we might use,

Figure 1

until we found the most appropriate platform for our project, Outsystems Agile Platform.
Outsystems Agile Platform, is a software package for parsing, data manipulating, and
application developing. It supports the development in dual mode, Java and .Net environment.

Page |4

5.0 IMPLEMENTATION
The website is designed to be conformant with
the latest W3C standards; in particular, HTML 5, CSS2.
This means the content and layout of the website should
appear similar on most modern web browsers.
5.1 The web pages, menus, buttons, hyperlinks,
user inputs, report generation option, and
other web elements were created with the
Agile platform, as you see in figure 2.

5.2 Concerning the dynamic data such as the

data chart displayed in the
dashboard, we used Fusion
chart technology that renders in

Figure 2

both flash and JavaScript (HTML5).

Fusion chart technology compatible with most programming
environment, such as ASP.NET, and it can connect to any database
such as MS SQL.

Figure 3

Page |5
5.3 Database access and manipulation was accomplished through
agile platform tools such as designing users database and
projects database.

Figure 4
Figure 5

Figure 6

Menus and other records can be entered directly into the database from an excel
sheet.
-

Database Tables

User
Project

Store Project Members data

Store Projects data

- Quarries Example:
SELECT TOP 100 ENUser.[ID], ENUser.[NAME], ENUser.[USERNAME],
Login
ENUser.[PASSWORD], ENUser.[EMAIL], ENUser.[MOBILEPHONE],
Manager
ENUser.[EXTERNAL_ID], ENUser.[CREATION_DATE],
&
ENUser.[LAST_LOGIN], ENUser.[IS_ACTIVE]
Members FROM {User} ENUser
WHERE (dbo.CheckRole(@TeamManagerId, ENUser.[ID]) = 1)
SELECT TOP 100 ENUser.[ID], ENUser.[NAME], ENUser.[USERNAME],
ENUser.[PASSWORD], ENUser.[EMAIL], ENUser.[MOBILEPHONE],
ENUser.[EXTERNAL_ID], ENUser.[CREATION_DATE],
ENUser.[LAST_LOGIN], ENUser.[IS_ACTIVE]
FROM {User} ENUser
WHERE (dbo.CheckRole(@TeamMemberId, ENUser.[ID]) = 1)

Page |6
Chart

SELECT {Project}.*,
SUM ({TimeSheetItem}.[Effort])/@HoursPerDay As ActualEffort
FROM {Project}
LEFT JOIN (
{Projects}
JOIN {TimeSheetLine}
ON {TimeSheetLine}.[TimeSheetId] = {Projects}.[Id]
JOIN {TimeSheetItem}
ON {TimeSheetItem}.[TimeSheetLineId] = {TimeSheetLine}.[Id]
)
ON {Projects}.[StatuId] = @Approved
AND {TimeSheetLine}.[ProjectId] = {Project}.[Id]
WHERE {Project}.[EstimateDays] <> 0
GROUP BY {Project}.*
HAVING (
SUM
({TimeSheetItem}.[Effort])/@HoursPerDay/{Project}.[EstimateDays])
> 0.7
OR {Project}.[EndDate] <= @EndDate
ORDER BY
SUM
({TimeSheetItem}.[Effort])/@HoursPerDay/{Project}.[EstimateDays]
DESC,
{Project}.[EndDate]

5.4 Scripting: variety of Java Scripting used throughout the implementation process,
for instance, the login page to verify and validate the users, reports page to export
to excel sheet format. All the scripts were generated by Agile platform.
Example:
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
OsPrepareCheckboxesForSubmit();
if (!OsValidatorOnSubmit())
return false;
return true;
}
//]]>
</script>

Submission Validation

<script type='text/javascript'>
osjs(function($){
OsRegisterExceptionHandler(RichWidgets_F
eedback_Message_ErrorHandler)
});
</script>

Feedback Message

Page |7

6.0 FEATURES AND FUNCTIONS

Features and functions of the project management system can be divided based on the status
of the user (a project manager or a member)

A. Project Manager
Feature and function that only accessible to a project manager:
1. Create new project
This is one of the main functions of our system, to create a new project. The
project manager is able to specifically set the expected time for the project
completion (starting and ending date) and provide project specifications in the
description section.

2. Assign team member and task for a project

A newly created project will need some people to be assigned to. The project
manager able to create a team consists of several members and assigns each one
of the members with specific task.

3. Generate project report using Microsoft Excel

Detailed project report can be exported to the Microsoft Excel format (in table
format). Why do we provide this feature?
Microsoft Excel is an exceptional spreadsheet application which widely used to
store, organizes, and manipulates data. The data that we stored in Excel format
can be accessed easily on the go using any web browser or Smartphone.

4. Advanced Search
Project manager will be able to find and access a specific project with ease by
using our advance search feature. The search can be done based on the project
name, employee name, task type and date. The list of the related project then
will be listed in a grid format and the project manager can click on the desired
project name to get the details of that specific project.

Page |8
5. Task approval
The project manager approval is needed before the team members allowed to
take action. Example: to take a vacation during a working time, the member has
to ask approval from the project manager first.

6. Real time monitoring of the progress and status of each project

On the project section of the website the system will list all current projects with
few minor details (end date, time spent, and effort)

7. Reminder of overdue project

On the dashboard section, the project manager will be able to see the list of
project that almost reach the due date time and the project that has been overdue.
This is a very important feature in our system for the project manager, because
the project manager will not have keep constantly check every project status
manually.

8. Reminder of uncompleted task

Every member task that still havent been completed yet and already pass its
due date will be listed here complete with the name of the member and the
overdue time. In addition, the project member is provided with an email
reminder feature which allows the project manager to send a reminder email to
the particular member regarding its overdue task.

Page |9
B. Member
Feature and function for a member:
1. Submit/upload a detailed report of the assigned job
Every member has to submit detailed report regularly using the upload function
provided in their project page.

2. Apply for vacation

Every member is given the opportunity to apply for a vacation during work
which will need approval from the project manager.

C. Few additional feature and function that available for both project manager and
member:
1. Change password
Every user is able to change
their current password by
providing both current and
new password at the change
password page. The confirm
new password is provided
there in order to ensure that the
user didnt mistype its new password.

2. Edit profile
This is another basic feature
that we provided to every user.
Basically the user is able to
change
information

his
(name,

personal
phone,

email, etc)
3. Recent items (history)
Every time a user accesses a data or does an action (example: upload a project),
the system will temporarily keep a track of that as recent item/history and will
be shown on the right side of the page.

P a g e | 10

7.0 MERITS AND LIMITATIONS

A. Merits
1. Management
The project manager is given the capability to use his/her management skill to
organize and manage every aspects of the project, such as:

Create the project

Assign team members

Assign individual tasks

Assign expected completion time

Task approval

Basically all aspects which are important for the completion of the project.
2. Always keep track of all projects
Keep track of the progress of each project using the project management system.
The system will provide information of the completed project, when it is
completed, which team members involved, and also about other uncompleted
projects.

3. Stay on schedule
The system allows the project manager to set the starting time and the expected
completion time. Furthermore, the system also able to alert the project manager
about projects that needed attention (overdue, near due date) and also the tasks
that have overdue.

4. Transparency
The project management system keeps record of the actions performed by each
member from the start to the end of the project.

5. Accountability
Every member is indirectly forced to be more responsible on their task because
their overall performance will be measured based on how they perform through
every project record.

P a g e | 11
B. Limitation
1. Mobile platform compatibility issue
The project management system currently doesnt have a mobile version which
aimed at the mobile platform user (smartphone, tablet, etc).
At the moment, if a mobile platform user tries to access the system using a
mobile device a page that will be shown is the full system.

2. Human based limitation

Human element greatly affects the progress of the ongoing project.
Disagreement between each member might halt the progress or even destroy the
whole project completely. Basically the project manager must be able to pick
each team member carefully.

Furthermore, a capable project manager is also a must for the system to be used
effectively. The project manager must set the project specification wisely with
careful consideration. In the end the project management system wont bring
much different if the project manager has poor management skills.

P a g e | 12

8.0 SCREENSHOTS OF PTMS:

Figure 7
The web application PTMS can be accessed through any web browser, the user login using his
id and password. The login process will check the user credential and forward him to the
permitted area.
1) Project Manager window:

Figure 8

P a g e | 13
This window will welcome the logged in user with current date. It his 4 main functions:
o Dashboard
o Approve Activities
o Projects
o Reports

2) Dashboard

Figure 9
The dashboard contains at the top the web application menu, the body contains 3 parts:
-

Activities that required PM approval.

Late activities list

Project activities that require PM attention.

On the right side of the screen, a list of recent accessed items, and an option to create a
new project.

P a g e | 14

Figure 10

3) Approve Activities

Figure 11
This screen displays the project member requests and reports. The actions available to
PM are approving the activity of rejecting it with a reason.

4) Late activities list has an option below the list to send a reminder email to project
members who are behind the schedule.

P a g e | 15

Figure 12

5) Project and activities that require PM attention

Figure 13
The data display in chart mode, to provide a quick outlook on high priority activities.

6) Project page

Figure 14
This page displays list of active project, with capability of searching a project, creating
new project, and export project list to excel file.

P a g e | 16
7) Report page

Figure 15
This page contains the list of projects, associated activities, assigned employee, and the
effort spent. The page has a searching capability, based on date, and activity type. The
left pane has two exporting options one has simple list, and the other more detailed one.
8) My Project Page

Figure 16
This page display the assigned activities, with an option to submit the completed task,
with its report attached.
9) Support Page
This page will hold the required information for the web application user, such as:
o Frequent asked questions.
o Contact form.
10) Project Member Page

P a g e | 17

Figure 17
As we can see in Figure 17 the project member page has a restricted menu. Once the
user logged in the system will display the assigned projects and support page.
In this page the user are able to see his projects, update his working hours, submit his
report, and add another project.

11)

CONCLUSION & FUTURE ENHANCEMENT

The Project Time Management System PTMS has been created within the 3 months
of the project. The web application is a management tool, that best support Project
Managers to control and monitor projects activities and team members progress.

The project still has some room to develop and expand. In particular, all project
modules can be made available to mobile devices for more portability and roaming
access, which can provide some extra advantage to the business.

An additional module of Instant Messaging (IM) can be added, to provide instant

communication between project members.

12)

LESSONED LEARNED

P a g e | 18
We found several attributes of this project worked really well for our team. The
team accomplished the most when we spent large amount of time together (two hours
or more) on project tasks. Furthermore, assigning small project tasks to each member
and then having the whole team review and discuss on the task was an effective method
for handling small tasks.
Despite the accomplishments on this project, there were some attributes of this project
did not work properly. For instance, assigning large tasks without team meeting did not
work properly because larger tasks needed more team attention and collaboration to be
effective. Furthermore, balancing the task load equally between team members was
difficult because it was hard to measure tasks in terms of time.
Communication was somewhat difficult as well because neither email, nor the team cell
phones were consistently useful because not all team members checked and used these
resources equally.
As a team we learned a great deal about project management processes, and some very
useful development tools and techniques, such as Outsystems Agile development
platform, and integrating charting into an application. In addition to that, we have each
improved our understanding of the team based collaboration and the mount of
organization it takes to create a team that is productive, efficient and resourceful. We
also learned the importance of communication when working in a group setting and
how effectively take and deliver advice and criticism. Another very important skill that
we fully appreciate now is time and load balancing with a group.
Working in this project as a group, we felt there were some things we could do
differently in future projects with similar circumstances. We should do a better job at
scheduling regular meeting times for each week instead of rescheduling each week.
A more effective communication system could be established, in a way that allow all
team members to use it equally.
Finally, it would be very helpful to have a clear and precise task schedule before
beginning work on the project.

13)

APPENDIX

P a g e | 19
-

Project Proposal

Minutes of Meetings

Task Distribution

Presentation Slides

P a g e | 20

14)
-

REFERENCES

Aditya369.com, Process Groups & Knowledge areas (2012). [online] available

at: http://aditya369.com/processgroups_ka.aspx [Accessed 1st March, 2012].

Aceproject.com,

project

management

software

(2012).

[online]

available

at: http://www.aceproject.com/ [Accessed 1st March, 2012].

-

Freelancefolder.com, Free Project Management Applications (2012). [online] available

at: http://freelancefolder.com/10-free-project-management-applications/ [Accessed 4th
March, 2012].

Webdesignerdepot.com, Applications for Project Management and Collaboration

(2012).

[online]

available

at:

http://www.webdesignerdepot.com/2009/02/14-

applications-for-project-management-and-collaboration/ [Accessed 4th March, 2012].

-

Smashingmagazine.com, Useful Project Management Tools (2012). [online] available

at:

http://www.smashingmagazine.com/2008/11/13/15-useful-project-management-

tools/ [Accessed 4th March, 2012].

-

Techrepublic.com, Learning the basics of the OutSystems Agile Platform (2012).

[online]

available

at:

http://www.techrepublic.com/blog/programming-and-

development/learning-the-basics-of-the-outsystems-agile-platform/2533 [Accessed 4th

March, 2012].
-

Youtube.com,

Agile

Business

Processes

(2012).

[online]

available

at: http://www.youtube.com/watch?v=ClLXT-iE8mk [Accessed 5th March, 2012].

-

Engineeringtube.net, Agile Platform Tutorials online video lectures (2012). [online]

available

at:

http://engineeringtube.net/Agile-Platform-Tutorials_online-

videos_779019_779 [Accessed 5th March, 2012].

-

Outsystems.com,
at:

FusionCharts (2012).

[online]

available

http://www.outsystems.com/NetworkSolutions/ProjectDetail.aspx?ProjectId=83

[Accessed 15th March, 2012].

-

fusioncharts.com,
at:

FusionWidgets

(2012).

[online]

http://www.fusioncharts.com/products/suite/fusionwidgets-xt/

available

[Accessed

15th

March, 2012].
-

Gregvogl.net, Personal Website: Design Documentation (2010). [online] available

at: http://www.gregvogl.net/help/design.htm [Accessed 8th April, 2012].