ADAMA SCIENCE AND TECHNOLOGY UNIVERSITY

SCHOOL ELECTRICAL ENGINNERING AND

COMPUTING PROGRAM
COMPUTER SCIENCE AND ENGINEERING

PROJECT TITLE: LOW CODE WEB DEVELOPMENT PLATFORM

PROJECT TEAM

NAME ID SECTION

KALEABE SEIFU A/UR4960/09 2

NATHNAEL ALEMAYEHU A/UR4392/09 4
NOBEL MITIKU A/UR4626/09 4
SAMUEL KEDIR A/UR4945/09 3
YONATAN ABERA A/UR4870/09 2
Contents
Chapter One .................................................................................................................................... 1
Introduction ..................................................................................................................................... 1
1.1. Problem Statement ............................................................................................................... 1
1.2. Objective of the project ........................................................................................................ 2
1.2.1. General Objective ......................................................................................................... 2
1.2.2. Specific objective ......................................................................................................... 2
1.3. Feasibility............................................................................................................................. 3
1.3.1. Technical Feasibility..................................................................................................... 3
1.3.2. Operational Feasibility ................................................................................................. 3
1.3.3. Economic Feasibility .................................................................................................... 3
1.4. Significance of the project................................................................................................ 3
1.5. Scope and Limitation ............................................................................................................... 4
1.5.1. Scope Study ....................................................................................................................... 4
1.5.2. Limitation of Study ........................................................................................................... 4
1.6. Beneficiaries of this project ................................................................................................. 4
1.7. Methodology ........................................................................................................................ 4
1.7.1. Data collection methodologies ..................................................................................... 4
A) Observation ........................................................................................................................ 4
B) Data analysis ....................................................................................................................... 4
1.7.2. System Development Methodologies ........................................................................... 5
1.8. Development tools ............................................................................................................... 5
1.8.1. Hardware ...................................................................................................................... 5
1.8.2. Software ........................................................................................................................ 5
1.9. Assumptions made in the project ......................................................................................... 6
1.10. Testing.................................................................................................................................. 7
1.10.1. Test Plan ....................................................................................................................... 7
1.10.2. Traceability ................................................................................................................... 7
1.10.3. Testing Procedure ............................................................................................................ 7
1.11. Required Resource and Cost .................................................................................................. 7
1.12. Task and schedule ................................................................................................................ 8
Team Composition .......................................................................................................................... 9
Chapter two ................................................................................................................................... 10
Description of the existing system ................................................................................................ 10
2.1 Major function of the current system .................................................................................. 10
2.2. Users of current systems .................................................................................................... 10
2.3. Drawback of Current System ............................................................................................. 11
2.4. Business Rules of the current system ............................................................................. 11
Chapter Three................................................................................................................................ 12
Proposed System ........................................................................................................................... 12
3.1 Overview ................................................................................................................................. 12
3.2 Functional Requirements ........................................................................................................ 12
3.3 Non-Functional Requirements ................................................................................................ 13
3.4 System Model ......................................................................................................................... 13
3.4.1 Scenarios .......................................................................................................................... 13
3.4.2. Use case Model ............................................................................................................... 21
3.5. Object model .......................................................................................................................... 33
3.5.1 Data dictionary ................................................................................................................. 33
3.5.2 Class diagram ................................................................................................................... 34
3.6. Dynamic model ...................................................................................................................... 35
3.6.1 Sequence diagram ............................................................................................................ 35
3.7.2 Activity Diagram .............................................................................................................. 48
3.7.3 State Diagram ................................................................................................................... 61
Chapter Four ................................................................................................................................. 66
System Design .............................................................................................................................. 66
4.1 Overview ................................................................................................................................. 66
4.1.1 Purpose of System Design ............................................................................................ 66
4.1.2 Design Goal .................................................................................................................. 66
4.2. Proposed system Architecture Overview .............................................................................. 67
4.2.1. System Process ................................................................................................................ 68
4.2.2 Subsystem Decomposition ............................................................................................... 68
4.2.3 Hardware / Software Mapping ......................................................................................... 70
 4.2.4 Persistent data management ............................................................................................. 70
4.2.5 Database Design ............................................................................................................... 73
4.2.6 Component Diagram ........................................................................................................ 73
4.2.7 User Interface ................................................................................................................... 74
Chapter Five .................................................................................................................................. 75
Implementation ............................................................................................................................. 75
5.1. Overview ............................................................................................................................ 75
5.2. Coding Standard ................................................................................................................. 75
5.3. Prototype ............................................................................................................................ 76
5.4. Implementation Detail ........................................................................................................ 77
5.4.1. Client-side ............................................................................................................... 77
5.4.2. Server Side .............................................................................................................. 78
Chapter One

Introduction
Currently, enterprises have to face increasingly difficult problems due to the increasing
complexity of their internal operations and the number and intensity of the relationships between
the company and the entities of its supply network. Moreover, the changing market means
enterprises need a rapid and flexible response to fulfill the variable requirements of the
environment. For this reason, companies require the capacity to withstand the stresses of
environmental loading. That means the capacity to prevent and anticipate; to change enterprises’
nature and adapt to the changing environment; and to respond to the dynamic requirements.
Businesses need to change at a rate that can keep up with competitors, vendors, and the modern
consumer’s fleeting stream of impatient desires.

The low-code platform is a set of tools for programmers and non-programmers. It enables quick
generation and delivery of business applications with minimum effort to write in a coding
language and requires the least possible effort for the installation and configuration of
environments, and training and implementation. Low-code development platforms emphasize
visual interfaces to enable people, without a technological background, to create and deploy
business apps with relative ease. The main objective of the low-code development platforms is to
allow enterprises to develop apps without complex engineering facilitating their configuration,
and then achieving, rapidity and agility. Moreover, these platforms also offer enterprises a more
economical way to fulfill the market and/or enterprises internal requirements. With the low-code
development platforms, enterprises can create programs or apps for mobile or desktop devices,
multifunctional and with high information-management capabilities.

Low code web development platform is a low code development platform which is based on web
application development. That can provide the technology mechanisms to facilitate and automate
the development of software applications to support current enterprise needs and promote digital
transformation. This program supports: Blog, landing page, Informatics site, Subscription and
registration, Social media and chat, Customer service, Booking, Display or shopping, File
management system, gallery, Event, Tutorial creation, and Report.

1.1. Problem Statement

Since the beginning of programming, the coding world is using a lot of abstraction.
Unless one is coding using a machine language or assembly language, He’s using some
abstraction. This abstraction seems to be going to the next level. “The future of coding is no
coding at all.” Says Chris Wanstrath, CEO at GitHub. According to Gartner, low-code will be
responsible for more than 65% of application development activity by 2024.

1|Page
 Many digital transformation leaders find themselves in a painful and challenging
situation. Organizations’ ability to get things done quickly to support the ongoing Digital
Transformation is slowed by the complexity of the technology environment and the inability to
swiftly implement necessary changes. The digital environment requires rapid change and deep
integration into diverse ecosystems. For companies seeking to become more agile and accelerate
their strategy execution, low-code platforms tend to be an effective way to speed up application
delivery. This improves its ability to respond to business demands, shortens time-to-value, and
accelerates digital transformation.

Traditional programming is more time-consuming than auto-generated code from low-

code tools. It also takes longer to manually tweak code to support multiple platforms, and build
sockets and other interfaces between applications and services. Development time lasts for
months and includes extensive coding, multiple prototype revisions, testing, and bug fixes. It
may require more specialized expertise with a certain programming language or development
platform. Still, low-code development also requires special skills. It also requires additional
development for maintenance and is extensive to support.

Traditional programming doesn’t lead to the democratization of application development

because it extends this capability to ‘citizen developers. Citizen developers are individuals who
have the business knowledge necessary to create useful and functional applications, but who
aren’t programmers in the traditional sense. Traditional programming doesn’t facilitate in-house
development and doesn’t allow professional programmers to spend time on more pressing
matters that require coding.

1.2. Objective of the project

1.2.1. General Objective

➢ The objective of this project is to build a low code software development platform that
enables the delivery of Web applications faster and with minimal hand-coding through
modeling and graphical interface.

1.2.2. Specific objective

✓ To develop a platform that can build front end interfaces using drag and drop.
✓ To develop a platform that can access database and manipulate the backend processes
using graphic user interface.
✓ To prepare a platform that helps to manipulate the generated code, for the system to
be flexible.

2|Page
1.3. Feasibility
. A feasibility study is a particularly assessment for a proposed plan, product, project
management tool or new execution method.it is useful to establish whether or not a team or a
company will deliver on its promises in a satisfactory manner and in a reasonably period of time.
In building the System we are planning to achieve the ability of users to create web
applications on their browser. This allows the users to use features that seams complex for those
who are not familiar with coding but have knowledge over some similar applications like
Microsoft office products. So this system will make the user able to build apps by just using drag
and drop concept. The items and some other modules will also be available to the user.

1.3.1. Technical Feasibility

It states to determine whether or not the technical resources like Hardwires, Software and
other assets the team have meet the requirement of the project. Since we are going to build the
application as web-app it can be implemented easily using programing languages we already know
and building a web application won’t be a problem when we come to the use of hardwires and
Software also. Hence, we can say it is technically feasible to build.
1.3.2. Operational Feasibility
It answers the questions like will the proposed project solve the problems the team hope it
will solve? And whether the solution is maintainable, reliable and affordable. Since Web apps are
easily maintainable and by building this app we can achieve the objective of making users to build
their own app as they want it to be it is operationally feasible.

1.3.3. Economic Feasibility

Economic feasibility is a type of analysis if the cost invested to the benefits gained of the
examined project, which tells if it’s possible to implement it. Once the project is implemented
there may be ways in which users have additional features like premium access making users to
have full access by paying small fee. This makes the project to be profitable. So the project is
Economically feasible.

1.4. Significance of the project

This project reduces the amount of traditional hand coding, enabling accelerated delivery of
business applications. A common benefit is that a wider range of people can contribute to the
application development not only those with formal programming skills.

✓ Speed: the ability to accelerate the delivery of new software and application.
✓ Agility: Enables the developers or the one which is working on a software or application
to adapt and respond to changes and new opportunities using innovative, digital solutions.
✓ Lower costs: Lesser code means lower cost so this project minimizes the cost for
development.

3|Page
 ✓ Allows for quick creation and use of working applications that can address the specific
process- and data needs of the organization.

1.5. Scope and Limitation

1.5.1. Scope Study

The proposed system focuses on development of a low code environment, which will
help people with no computer science degree or with no certificate to be able to make web
application simply by using the platform we built. In this low code platform, users are able to
make the front end by drag and drop as well as the back end using graphic user interface for most
of it. If the users want to go deeper, they are able to manipulate the generated code. Users can
also share their code as a module or plugin, for other users to use. At last but not least, user can
export the generated code in order for it to be deployed and shared.

1.5.2. Limitation of Study

✓ The user needs to have a basic computer knowledge
✓ The proposed system requires to be hosted. For that reason, user must be able to have
proper internet connection.
✓ The performance of the system, mainly depends on the internet bandwidth.
✓ User will be provided the opportunity to use his or her creativity and problem-solving
skill in order to build a great web application. That is, if the user is not creative and don’t
have much of a problem-solving skill, may end producing unattractive web application,
both in user interface and back end.

1.6. Beneficiaries of this project

Since our project supports a low code development the project will benefit both programmers
and non-programmers to develop a website quickly and with minimal code so it helps a team or
an individual who wants to deliver a product in order to achieve a time-to- market advantage.

1.7. Methodology

1.7.1. Data collection methodologies

A) Observation
The proposed system uses different languages in it so we need to observe which
languages are best suited for the given system. We need to see for different Low code
development platforms so that we can customize our findings to the requirement of the proposed
system.
B) Data analysis
Analyzing the data or the requirement which Is need for the project is done with a specific
group so based on our observation the data that is appropriate for the given system is selected

4|Page
based on the technical feasibility study of the project and also depending upon the guidelines or
specifications of the system.

1.7.2. System Development Methodologies

In the system development methodology of the project we are planning to use agile
methodology.
We choose agile development, because of the following reasons:
✓ More Flexibility
✓ More productivity
✓ More transparency
✓ Products of superior quality
✓ Decreased risk of missed goals
✓ Optimized development processes
✓ A lighter/less complicated structure
✓ Excellent project control
✓ Increased collaboration frequency and feedback

1.8. Development tools

1.8.1. Hardware
➢ Flash, Personal Computer, Stationary Objects (paper and pen), Server, Modem for
connecting to the internet.

1.8.2. Software
Tools Description Used for
1. Browsers A computer program - Preview and test
used to navigate the the built in
world wide web website
chiefly by viewing - Read HTML
web pages and files
following hyperlinks
2. Integrated Development Environment IDE is a program - Write codes
(IDE) dedicated to software - Debug codes
development. As the Test code output
name implies, IDEs
integrate several tools
specifically designed
for software
development. These
tools usually include:
an editor to handle
codes, build,

5|Page
 execution, and
debugging tools. E.g.
IDLE, Visual Studio
Code, Atom, PHP
Strom
3. Mysql Is an open source - Create the
relational database necessary
management system database for the
(RDBMS) system
4. Ms-Office Is a family of client - Write and edit
software, server our
software, and services documentation
developed by
Microsoft
5. Server Is a system that - In order to
responds to requests launch the low
across a computer code
network worldwide to environment
provide, or help to platform we
provide, a network or need a central
data service server. But for
development
purpose we use
XAMPP.
XAMPP is very
suitable because
it has, MySql,
PHP and server
in it.
6. GIT Git is a free and open - Version
source distributed Controlling
version control - Collaboration
system designed to with team
handle everything members
from small to very
large projects with
speed and efficiency.

1.9. Assumptions made in the project

✓ The team members have made a research and know what programming languages to
use.
✓ The team members decide on the scopes and tools needed.
✓ We have access to all the resources we need to complete the project, both human and
material.
✓ The scope of the project will not change throughout the life cycle.

6|Page
 ✓ The project scope will not change once the Project advisers’ signoff on the scope
statement.
✓ The team will focus on user experience and early delivery.
✓ Project will follow agile methodology throughout execution.

1.10. Testing
Testing is procedure of checking something in the intention of founding some faults.
1.10.1. Test Plan
The primary goal of the testing phase is to find bugs that wasn’t found during the
implementation of the program.by finding and documenting this problem the developer will be
able to fix the specified errors. It’s also used to check whether the requirements (both the
functional and the non-functional) of the Client or end user is satisfied or not.
1.10.2. Traceability
Traceability Matrix (also referred to as Requirement Traceability Matrix - RTM) is a table that is
used to trace the requirements during the Software Development Life Cycle

1.10.3. Testing Procedure

This phase will allow us the removal of errors. Hence lots of errors may occur during trial
of the program all the parts of the program must pass through this step. This part contains
the areas which errors are majorly removed in to four ways.
A) Unit Test
In this stage we will try to evaluate the efficiency of the code implemented and test
the code to remove error in each part of the implementation separately. This will enable
us to minimize the occurrence of errors after the integration of each code implemented. It
will be applied in the level off class which helps mainly in removal of syntax errors.
B) Integration Test
This phase will be the part of testing the code implemented after all the codes required
are merged together in order to find out errors occurred by the non-connectivity of the
individual codes and remove them. It will maintain the integrity of the interconnected
codes.
C) System Test
After the two tests they will be evaluated by other peoples who have the knowledge of
the language used to implement the code.
D) Acceptance Test
This is the part which customer or end user will test the product is easy to use and contains
all the requirements that are specified by the customer.

1.11. Required Resource and Cost

The materials and devices used in the process of developing the project with their cost:-
No Material required Quantity Unit Price Total Price
1 Paper 1PKT $150.00 $150.00

7|Page
 2 Pen 1PKT $5.00 $250.00
3 PC( Laptop) 2pcs $60,000.00 $120,000.00
5 Wi-Fi Pod/Portable Dongle 1pcs $3000.00 $3,000.00
6 Internet Connection Unlimited(for 4- $1,510.00per month $6,040
month)
7 Pen Drive 1pcs $400.00 $400.00
8 Tea and Coffee 5 per day $3.00 $3,150.00
TOTAL $132,990.00

1.12. Task and schedule

The project will have the following phases:
➢ Gathering requirements: -this is the phase where analysis of the project is done. In other
sense it is the part which the questions what is the main problem to be solved, in which
way, who to do, what is required to solve it and more questions are answered.
➢ Documentation: -this phase is where everything about the product is defined in order to
help the programmers for the proceeding jobs.
➢ Design: -this phase is where the coders decide which language to use and changing user
requirements in to compatible way for implementation.
➢ Implementation: -this id the coding part of the project to solve the problems and find
what required by the customer or user.
➢ Testing: -is the part which every part of the code’s functionality is checked and if any
fault or error occurred the code will be re-checked until all the errors are overridden.
➢ Release: -is the phase where the product is introduced to the user or customer to use.
➢ Maintenance: -is the continuous phase which is maintaining the functionality of the
program developed. And also, the continuous upgrades for additional features and
removal of bugs.
➢ Integration: is the process of bringing together various types of software sub-systems so
that they create a unified single system.

Project phases Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 9

Gathering
requirement
Documentation
Design
Implementation
Testing
Release
Integration

8|Page
Team Composition
No Name Email Major responsibility
1 Kaleabe Seifu kaleabeseifu@gmail.com Team leader, Requirement
gathering, Development,
Documentation, Design
2 Nathnael Alemayehu natiAlemayehu@gmail.com Requirement gathering and
analysis, Development,
Documentation
3 Nobel Mitiku nobelmitiku@gmail.com Requirement gathering and
analysis, Testing,
Development
4 Samuel Kedir samuel.datros@gmail.com Requirement analysis, UI/UX,
Design, Development,
Documentation
5 Yonatan Abera yonatanabera2007@gmail.com Requirement gathering and
analysis, Development,
Testing, Documentation

9|Page
Chapter two

Description of the existing system

2.1 Major function of the current system
Web development is considered mainly for professionals who has taken the computer science or
associated fields. These professionals use different types of methods to build and deliver the web
application according to the requirement. These include
✓ Building both front end and back end from the scratch as per the requirement. This
method uses code, from start to the end. Which in turn is time consuming.
✓ Using templates for the front end
▪ These templates can either be of paid version or free version
▪ In most cases the free template providers generate money from
advertisements. Therefore, they put advertisement link inside the template,
which will show advertisement when the site gets many users. Among these
advertisements they may use adult topics.
▪ It is recommended to use the paid version but the problem with paid version
is the country law on foreign exchange.
▪ Both free and premium templates are customized using codes. It also
reduces time when compared to building everything from scratch.
✓ Use different plugins and libraries for the frontend and backend development.
These plugins come from different sources. They mostly don’t have a specific place
where everything needed comes together.
✓ Some professionals also use low code platforms, importing modules, plugins and
templates from the platform’s market place.
✓ Modules are made for specific purpose by professionals and it can be either free or
premium.

2.2. Users of current systems

➢ Client: The one who needs a system and looking for a vendor company or has its own in-
house developers.
✓ Provides system development requirements
✓ Clarifies as Many Details as Possible/
✓ Checks the progress of the system in development.
✓ Determines all the features that the system should have
➢ Developers(programmer): is a professional who writes and develops various systems
based on the voice of the customer.
✓ Have knowledge and expertise on developing a system.
✓ Design, develop(code) and test software or systems.
✓ Are professionals which changes a requirement in to a tangible system.
Therefore, the quality of the developed system or software depends on both the implementing
partner and the client in traditional or custom development(programming).

10 | P a g e
2.3. Drawback of Current System
❖ Users have to hire developers if they want to have an application or they must have at
least basic scripting languages like HTML, CSS and query language.
❖ There will be misunderstandings in users’ requirements to the developers’ side.
❖ Users might not like the UI built by the developers.
❖ Development time will be very long due to writing of many codes.
❖ Pricings of hired developers will be high.

2.4. Business Rules of the current system

➢ Developers need to gather requirement from clients and the system need to be
developed according to that very requirement.
➢ Development of the system need to be completed with the proposed time and money.
➢ Any changes in the requirement will have additional costs both in money and time.
➢ Clients need a web development professional for their system to be built.
➢ One need to have a sufficient understanding of the business requirement and a
development skill to build the system needed.
➢ Developers need to present medium viable product for testing and quality assurance.
➢ Developers need to present iterative prototypes for approval, the more prototypes
needed the more time the system needs.
➢ The developer or any other professional developer is needed to bug fixes, add new
functionalities and maintain the system after the system is deployed.

11 | P a g e
Chapter Three

Proposed System

3.1 Overview
This time information had become a very necessary thing to do our jobs and interact with each
other. The advancement of internet has paved the way for easy access of information. People
and companies create websites for different purpose.

• Selling products and services

• Posting and finding information on the web
• Gaining knowledge
• Communicating with each other
• Having fun and etc.

Everyone finds a good reason to create a website! But in general, we can say that the websites are
being created to offer a useful service that others will use. In the old days, clients pay
professionals to build website for different use. But now due to the advancement in technology,
everyone can build their own website, according to their design flavor, without any code. This
CMS platform that we are about to build, serve the same purpose. It allows citizen developers
to build websites freely and simply.

3.2 Functional Requirements

Functional requirement mainly focuses on what the system do. The CMS Addis have the following
functional requirements.

• Create and access account

• Provides a way to create Frontend.
• Saving and exporting Code
• Template sharing and cloning
• Provides Backend CMS (Content Management System) modules
• Access user guide

12 | P a g e
3.3 Non-Functional Requirements
➢ Security: The system must be highly secure. The application must decrease the
vulnerability. Every new website developed using our CMS must be secure. For this
purpose, our system has to be secure first.
➢ Modularity: is a system property which measures the degree to which densely connected
compartments within a system can be decoupled into separate communities or clusters
which interact more among themselves rather than other communities.
➢ Integrity: Our system ensures that created websites are real and safeguarded from
unauthorized user modification.
➢ Usability: The quality of our user’s experience when interacting with our product or
system must be effective, efficient and overall satisfactory for the user.
➢ Flexibility: The system we build has to be flexible, in the way that the user can create
anything he want with almost zero errors generated. The system must respond to
uncertainty in a manner to sustain.
➢ Simplicity: The system is expected to be simple, that any user who can work on a
computer is able to create website with ease.
➢ Testability: The system has to correspond to a high testing result.
➢ Affordability: The system we are building is currently provided for users, with no cost.
So, it is affordable.
➢ Documentation: the activity of the project should be well documented for further users
like to add any new features and maintenance is easier if every situation is well
documented. The implementation is also documented in order to solve errors occurred
after the release of the application.

3.4 System Model

3.4.1 Scenarios
Scenario: 1
Name of use case: login
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password.
Flow of event:
1. Once the user navigated CMSaddis.com, the system displays the login page that has a
form consisting username and password, login button, and register link.

13 | P a g e
 2. The user fill the form and click the login button
3. The user successfully logs in to the system.
Post condition:
The system will display the home page with a dashboard.
Exceptional flow of event:
1. If the user fails to fill the form correctly (i.e. invalid username and/or incorrect
password and/or incorrect type) then the system denies the access. And display an error
message.
2. A refill message pop up with the form again.

Scenario: 2
Name of use case: sign up
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
Flow of event:
1. Once the user navigated CMSaddis.com, the system displays the login page that
has a form consisting username and password, login button, and register link.
2. The user clicks on the register link.
3. The system displays the signup page that has form consists of First name, last
name, email and password.
4. The user fills the form and clicks on the sign-up button
5. The system displays a page that asks to insert activation code with confirm button
6. The system sends activation code to the user email
7. The user inserts that activation code and clicks on confirm button.
Post condition:
The system will grant a permission to the user to work on a CMS Addis.
Exceptional flow of event:
1. If the user fails to fill the form correctly (i.e. invalid username and/or incorrect
password and/or incorrect type) then the system denies the access. And display an error
message.
2. A refill message pop up with the form again.

Scenario: 3
Name of use case: Use components
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password

14 | P a g e
 5. The user successfully logged in to his account
6. The user created a new project.
Flow of events:
1. Once the user creates a new project the system will present a work space.
2. From the side bar the user selects components
3. In the components menu there is a list of elements and layers.
4. The user will select any of the elements and layers.
5. The user will drag the selected components and drop them to the workspace.
6. The user can repeat this action as he wishes to.

Scenario: 4
Name of use case: Create new project
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
Flow of events:
1. Once the user logged into his account the system displays the home page with a
dashboard.
2. From the tabs on the dashboard the user will select the “create new project”
button
3. The system will present a form with title and description.
4. The user will give the project a title and description and click the “create” button.
5. The system will present a work space of a new project.
Post Condition:
The user will begin to build the web page.

Scenario: 5
Name of use case: Preview Design
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user created a new project.
Flow of events:
1. Once the user creates a new project, the user will begin to build the page.

15 | P a g e
 2. Whenever the user wants to check the progress in full screen mode as if it was
published, he can click the preview button on the navigation bar.
3. Then the system will present the system built in preview mode.
4. The system will lock the project to read only mode until the user go back to
design mode.
5. After the user finished reviewing the design, he will press back to the design
button.
6. Then the user will present the design panel.
Post Condition:
The user will continue to build the web page.

Scenario: 6
Name of use case: Create new page
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user created a new project.
Flow of events:
1. Once the user creates a new project, the user will begin to build the page.
2. When the user wants to add new page to the project, the user will select the pages
tab on the side bar.
3. The pages menu lists current pages, along with a button called “add new page”.
4. The user clicks the “add new page” to create new page.
5. The system will ask the user to give the page a name.
6. The user will give a name to the new page and click create.
Post Condition:
The system will add a new page to the user’s project.
Scenario: 7
Name of use case: Use assets
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user created a new project.

16 | P a g e
Flow of events:
1. Once the user creates a new project, the user will begin to build the page.
2. Whenever the user wants to add media assets from his computer to the project, he
will go to the assets tab on the side bar.
3. On the assets panel there is a section for current assets and another button called
“add new assets”
4. The user will select the “add new assets” button
5. The system will redirect the user to file explorer.
6. The user selects the media of his choice and hit upload.
7. The system will upload the asset and put it on the assets panel
Post Condition:
The user can use that asset as an element on the project any time he wants.

Scenario: 8
Name of use case: Style the page
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user created a new project.
Flow of events:
1. Once the user creates a new project, the user will begin to build the page.
2. Whenever the user wants to style a component he will click the component.
3. On the left sidebar the user will find attribute panel.
4. The attribute panel presents styling options.
5. The user selects any of the attributes and style the component
Post Condition:
The user will continue to build the page.

Scenario: 9
Name of use case: save code
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user builds his project.
Flow of events:

17 | P a g e
 1. While the user is building the project the system automatically saves the project.
2. The user can click on the save button, to check whether the project is saved or not
Post condition:
The system notifies that the project is automatically saved.

Scenario: 10
Name of use case: Export code
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user builds his project.
7. The user successfully saved his current project.
Event flow:
1. Once the user builds and successfully saved his project he clicks on the export
code button
2. The system displays the code with prepare zip button
3. The user clicks on the prepare zip button
4. Once the project zipped then the system displays download button
5. The user clicks on the download button
6. The code will be downloaded in the users devise
7. Then the user exports the downloaded file
Post condition:
The user can do whatever he wants with the exported code.

Scenario: 11
Name of use case: Share as a template
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user builds his project.
7. The user successfully saved his current project.
Flow of events:
1. Once the user saved his project the system will enable the share button
2. The user clicks on the share button
3. A panel pops us presenting a title box and a description box

18 | P a g e
 4. The user writes the title of the project
5. The user writes some descriptions about the project
6. Once the form is filled the user hit the share button.
Post condition:
The user successfully shares his project as a template to the community.
Scenario: 12
Name of use case: use a template
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
Flow of events:
1. Once the user logged into his account the system displays the home page with a
dashboard.
2. From the tabs on the dashboard the user selects “Explore”
3. A page pops up presents a list of project templates shared by other users
4. The user can search from the templates
5. The user selects a template to view the project
6. The user selects a button “use as a template”
7. The system will notify the user with a successful clone message
Post condition:
The template will immediately be cloned on the user’s dashboard with other saved
projects.

Scenario: 13
Name of use case: Beginners Guide
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
Flow of events:
1. As soon as the user logged in to his account a beginner’s template will appear.
2. Along with the template a tool tip will appear with guides.
3. The system will present series of task guides the user can follow.
4. The user can choose to follow the guide or skip through them.
5. The user can go through the guide process any time he wants even after the first
session is completed.

19 | P a g e
Post condition:
The system will graduate the user from the beginners’ guide.

Scenario: 14
Name of use case: System guide documentation
Participating Instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
Flow of events:
1. Once the user logged into his account the system displays the home page with a
dashboard.
2. From the tabs on the dashboard, the user selects the help drop down button
3. This drop down holds to buttons Documentation and Beginners tutorial.
4. User will select the documentation option.
5. The system will present a documentation page.
6. The user can search specific features or can choose from the chapters presented.
7. The user can come back to the documentation any time he needs help.
Post condition:
After the user finds what he’s looking for, he will go back to the dashboard.

Scenario: 15
Name of use case: Create Database Table
Participating instance actor: Citizen Developer

Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user clicks on the project created or create new one
Flow of events:
1. The user clicks on the project created or create new one
2. From the side bar the user choses the CMS database management
3. The User Click the create CMS database table button or one of the available CMS
modules already exist
4. The User give name to the table and Add attributes to the table and edit their
properties
5. The User Chooses to save the Table

20 | P a g e
Post Condition:
The newly created CMS table Will be added to the user’s collection of tables

Scenario: 16
Name of use case: Edit Database Table
Participating instance actor: Citizen Developer
Entry condition:
1. Internet connection is available; the user is in an area where Internet is available.
2. Any web browser is installed on the user’s device.
3. CMSaddis.com is navigated
4. The user has a valid username and password
5. The user successfully logged in to his account
6. The user clicks on the project created or create new one
Flow of events:
1. The user clicks on the project created
2. From the components the user choses the CMS database management
3. The User select one of the available CMS modules from his collections of CMS
tables
4. The User modifies the table and its attributes and properties
5. The User Chooses to save the Table
Post Condition:
The Edited CMS table will be saved to the user’s collection of tables

3.4.2. Use case Model

In software and system engineering a use case is a list of actions or events steps typically
defining the interactions between a role (known in the Unified Modeling Language (UML) as an
actor) and a system to achieve a goal? The actor can be a human or other external system.
Actor Identification
A use case diagram shows the interaction between and entitles external to the system.
These external entities are referred to as an actor. Actor represent roles which may include
human users, external hardware or other systems. An actor is usually drawn as a named stick
figure, or alternatively as a class rectangle with the <<actor>> keyword.

Name: Citizen Developer

Description: Citizen Developers are business users with little to no coding experience that build
applications with IT-approved technology.
Role: Sign up, Login, Preview project, build front end interface, save a project, export a source
code, use a template, share a template, Follow Beginners Guide, Access user guide
documentation, create data base tables, Modify database tables.

21 | P a g e
Use case diagram and description
The use case model captures the requirements of the system. Use cases are a means of
communicating with users and other stakeholders about the system is intended to do. A use case
is a single unit of meaningful work. It provides a high-level view of behavior observable to
someone or something outside the system. The notation for a use case is an ellipse. The notation
for using a use cases is a connecting line with an optional arrowhead showing the sire action of
control. The uses connector can optionally have multiplicity values at each end.
uc Use case

CM S Addi s

Login
«i ncl ude» Verify Passw ord

«extend»

Sign up
Display Login Error

Create new proj ect

Create nw page
Citizen Dev eloper

Use Component

Use assets

Style the page

Prev iew Design

Export Source Code

«i ncl ude»

Sav e Source Code

«i ncl ude»

Share as a template

Use a template

Follow Beginners
Guide

Access User guide

Documentaion

Create Database Table

Edit Database Table

22 | P a g e
Description of use case model
Description 1
Use case name Login
UC01
Use case number
Use case description Authenticate or confirm the user
Participating Actor Citizen Developers
Pre-condition cmsaddis.com is navigated
Flow of events 1. Once the user navigated CMSaddis.com, the system displays
the login page that has a form consisting username and
password, login button, and register link.
2. The user fills the form and click the login button
3. The user successfully logs in to the system
Post condition
The system will display the home page with a dashboard.

Exceptional flow of 1. If the user fails to fill the form correctly (i.e. invalid username
event and/or incorrect password and/or incorrect type) then the system denies
the access. And display an error message.
2. A refill message pop up with the form again.

Description 2
Use case name Sign up
User id UC02
Use case description Enable a user to sign up for a new account
Participating actors Citizen developers
Pre-condition cmsaddis.com is navigated
Flow of event
1. Once the user navigated CMSaddis.com, the system displays
the login page that has a form consisting username and
password, login button, and register link.
2. The user clicks on the register link.
3. The system displays the signup page that has form consists of
First name, last name, email and password.
4. The user fills the form and clicks on the sign up button
5. The system displays a page that asks to insert activation code
with confirm button
6. The system sends activation code to the user email
7. The user inserts that activation code and clicks on confirm
button.

23 | P a g e
Post condition
The system will grant a permission to the user to work on a CMS
Addis.

Exceptional flow of 1. If the user fails to fill the form correctly (i.e. invalid username and/or
event incorrect password and/or incorrect type) then the system denies the
access. And display an error message.
2. A refill message pop up with the form again.

Description 3

Use case name Use Components

UC03
Use case number

Use case description This feature enables users to use elements and layers to build a web
page

Participating actor Citizen Developers

Pre-condition The user successfully created a new project.

Flow of Events 1. Once the user creates a new project the system will present a
work space.
2. From the side bar the user selects components
3. In the components menu there is a list of elements and layers.
4. The user will select any of the elements and layers.
5. The user will drag the selected components and drop them to
the workspace.
6. The user can repeat this action as he wish to.

Post Condition The user will continue to build the page.

Description 4

Use case name Create new project

UC04
Use case number

Use case description This feature enables users to create new projects so that they will be
able to start building the website they intend to build.

24 | P a g e
Participating actor Citizen Developers

Pre-condition The user successfully logged in to the system.

Flow of Events 1. Once the user logged into his account the system displays the
home page with a dashboard.
2. From the tabs on the dashboard the user will select the “create
new project” button
3. The system will present a form with title and description.
4. The user will give the project a title and description and click
the “create” button.
5. The system will present a work space of a new project.

Post Condition The user will begin to build the page.

Description 5
Use case name Preview Design
Use case number UC05
Use case description This feature enables users to see the progress of their development
with a full preview feature.
Participating actor Citizen Developers
Pre-condition The user successfully created a new project.
Flow of Events 1. Once the user creates a new project, the user will begin to
build the page.
2. When ever the user wants to check the progress in full screen
mode as if it was published, he can click the preview button on
the navbar.
3. Then the system will present the system built in preview mode.
4. The system will lock the project to read only mode until the
user go back to design mode.
5. After the user finished reviewing the design, he will press back
to the design button.
6. Then the user will present the design panel.
Post Condition The user will continue to build the page.

25 | P a g e
Description 6
Use case name Create new page
Use case number UC06
Use case description This feature enables users create new pages in their project and link
them to each other.
Participating actor Citizen Developers
Pre-condition The user successfully created a new project.
Flow of Events 1. Once the user creates a new project, the user will begin to
build the page.
2. When the user wants to add new page to the project, the user
will select the pages tab on the side bar.
3. The pages menu lists current pages, along with a button called
“add new page”.
4. The user clicks the “add new page” to create new page.
5. The system will ask the user to give the page a name.
6. The user will give a name to the new page and click create.
Post Condition The system will add a new page to the user’s project.

Description 7
Use case name Use assets
Use case number UC07
Use case description This feature enables users to upload media files from their computer to
the project they’re working on.
Participating actor Citizen Developers
Pre-condition The user successfully created a new project.
Flow of Events 1. Once the user creates a new project, the user will begin to build
the page.
2. Whenever the user wants to add media assets from his computer
to the project , he will go to the assets tab on the side bar.
3. On the assets panel there is a section for current assets and
another button called “add new assets”

26 | P a g e
 4. The user will select the “add new assets” button
5. The system will redirect the user to file explorer.
6. The user selects the media of his choice and hit upload.
7. The system will upload the asset and put it on the assets panel.
Post Condition The user can use that asset as an element on the project any time he
wants.

Description 8
Use case name Style the page
Use case number UC08
Use case description This feature enables users to style the page by modifying attributes.
Participating actor Citizen Developers
Pre-condition The user successfully created a new project.
Flow of Events 1. Once the user creates a new project, the user will begin to build
the page.
2. Whenever the user wants to style a component he will click the
component.
3. On the left side bar the user will find attribute panel.
4. The attribute panel presents styling options.
5. The user select any of the attributes and style the component.
Post Condition The user will continue to build the page.

Description 9
Use case name Save code
Use case id UC09
Use description This feature enables the user to automatically save the project he/she
is building on.
Participating actor Citizen developers
Pre-condition The user is on building his project

27 | P a g e
Flow of Events 1. While the user is building the project the system automatically
saves the project.
2. The user can click on the save button, to check weather the project
is saved or not

Post condition The system notifies that the project is automatically saved.

Description 10
Use case name Export code
Use case id UC010
Use case description This feature enables the user to export the code of the built-in project.
Participating actor Citizen Developers
Pre-condition The user builds the project
Flow of Events 1. Once the user build and successfully saved his project he
clicks on the export code button
2. The system displays the code with prepare zip button
3. The user clicks on the prepare zip button
4. Once the project zipped then the system displays download
button
5. The user clicks on the download button
6. The code will be downloaded in the users devise
1. Then the user exports the downloaded
file

Post condition The user can do whatever he want to do with the exported code.

28 | P a g e
Description 11
Use case name Share as a template
Use case number UC011
Use case description This feature enables users to share their projects so that other
interested users can use the project as a template.
Participating actor Citizen Developers
Pre-condition 1. The user successfully saved his current project
Flow of Events 1. Once the user saved his project the system will enable the
share button
2. The user click on the share button
3. A panel pops us presenting a title box and a description box
4. The user writes the title of the project
5. The user writes some descriptions about the project
6. Once the form is filled the user hit the share button.
Post condition 1. The user successfully share his project as a template to the
community.

Description 12
Use case name Use a template
Use case number UC012
Use case description This feature enables users to use other user’s projects as a template.
Participating actor Citizen Developers
Pre-condition The user successfully logged in to his account.
Flow of Events 1. Once the user logged into his account the system displays the
home page with a dashboard.
2. From the tabs on the dashboard the user selects “Explore”
3. A page pops up presents a list of project templates shared by
other users
4. The user can search from the templates

29 | P a g e
 5. The user select a template to view the project
6. The user select a button “use as a template”
7. The system will notify the user with a successful clone
message
Post Condition The template will Immediately be cloned on the user’s dashboard with
other saved projects.

Description 13
Use case name Follow Beginners Guide
Use case number UC013
Use case description This feature guides users throughout their first encounter with the
system
Participating actor Citizen Developers
Pre-condition The user successfully logged in to his account.
Flow of Events 1. As soon as the user logged in to his account a beginner’s
template will appear.
2. Along with the template a tool tip will appear with guides.
3. The system will present series of task guides the user can
follow.
4. The user can choose to follow the guide or skip through them.
5. The user can go through the guide process any time he want
even after the first session is completed.
Post Condition The system will Graduate the user from the beginners guide.

Description 14
Use case name Access user guide documentation
Use case number UC014
Use case description This feature will give users a full documentation on the features of the
system

30 | P a g e
Participating actor Citizen Developers
Pre-condition The user successfully logged in to his account.
Flow of Events 1. Once the user logged into his account the system displays
the home page with a dashboard.
2. From the tabs on the dashboard, the user selects the help
drop down button
3. This drop down holds to buttons Documentation and
Beginners tutorial.
4. User will select the documentation option.
5. The system will present a documentation page.
6. The user can search specific features or can choose from
the chapters presented.
7. The user can come back to the documentation any time he
needs help.
Post Condition After the user finds what he’s looking for, he will go back to the dash
board.

Description 15
Use case name Create Database Table
Use case ID UC015
Use case description Allows the user to create new database table or use an already created
module of new CMS database table
Participating Actor Citizen Developer
Pre-condition 1.The user is Logged in successfully and already created a project
2.The user have a project created
Flow of events 1. From the dashboard the user goes to the project working on
2. from the Work environment on the sidebar the user clicks a manage
CMS database table
3. The user selects the add Table Button
4. The user enter the name of the table

31 | P a g e
 5. The user enters where to save the table file
6. The user add and edit attribute values
7.User click the save button to save the tables created
Post condition 1. The user successfully created the table and its attributes
2. The user access the table attributes and uses to make the page
values dynamic
Exceptional flow of 1. If the table name already exist the user is not going to be proceeded
event to the next step and the system ask the user to rename the name of the
file

Description 16
Use case name Edit Database Table
Use case ID UC016
Use case description Allows the user to modify already existing database table or already
created module added to the users collections of database tables
Participating Actor Citizen Developer
Pre-condition 1.The user is Logged in successfully and already created a project
2.The user have a project created
3.The user have already created a CMS database table or add a
module of CMS database table to the collections
Flow of events 1. From the dashboard the user go to the project working on
2. from the Work environment on the side bar the user clicks a
manage CMS database table
3. The user selects the edit Table Button
5. The user add or edit attribute values
6.User click the save button to save the tables created
Post condition 1. The user successfully Edited the table and its attributes
2. The user access the table attributes and uses to make the page
values dynamic

32 | P a g e
 3.5. Object model

3.5.1 Data dictionary

The data dictionary is an organized listing of all data elements that are pertinent to the
system, with precise, rigorous definitions so that both user and system analyst will have a
common understand of inputs, outputs, components of stores and even intermediate
calculations. A behavioral model is crated using the state transition diagram, and data content
is developed with a data dictionary.

Class Attributes Operation Description

Sign up Email, Password, Singup() Registers the user to the system
username in order to access for system
features.
Login Email, Password logIn(), generatetToken() Logs the user to the system.
User userId, email, getAccess(), login(), logout(), Allows for identifying the user
userName, Register(), forgotPassword(), and giving what the can use
password useTemplate(), viewTemplate(), with the proposed system.
shareTemplate(), viewGuide(),
build(), followGuide(),
accessGuide(), saveWork(),
exportWork(), previewDesign()
Search Name searchCatagory() Allows to search any systems
functionality
Dashboard Category, services addCategory(), addServices() A place where almost all the
system services and
functionality reside.
Template templateId, shareTemplate(), It’s a tool that is used when the
templateDiscriptio updateTemplate(), viewTemplate() user develops using the system.
n
View template templateId getTemplate(), editComponent(), Provides a way in which the
preview() user can get access to saved
templates and preview the so
that he/she can use it on her
system development
Database dataStorage, addData(), verifyData() A place where users data and
verificationOfData work is stored and where tools
, needed for development is
verificationDate stored.
Guide getGuide(), getToolTips(), Used for guiding the user on
-- skipGuide() how to use the given system.
Documentation documentationId, getDocumentation(), It’s a beginner guide for help.
addDocumentation

33 | P a g e
Components componentId, editProperties(), saveProperties(), Used for building frontend
componentDiscript reset(), addComponent() interface.
ion,
3.5.2 Class diagram
The class diagram shows the building blocks of any object-oriented system. Class
diagram depict the static view of the model part of the model, describing what attributes and
behavior it has rather that detailing the methods for achieving operations.
Class diagrams are most useful to illustrate relationships between classes and interfaces.
Generalizations aggregation and association are all valuable in reflecting inheritance,
composition or usage and connections, respectively.
A class is an element that defines the attributes and behaviors that an object is able to
generate. The behavior is the described by the possible messages the class is able to
understand along with operations that are appropriate for each message. Classes may also
contain definition of constraints tagged values and stereotypes.
Classes are represented by rectangles which show the name of the class and optionally the
name of the operations and attributes. Compartments are used to divide the class name,
attributes and operations. Additionally, constraints, initial values and parameters may be
assigned to classes.

34 | P a g e
3.6. Dynamic model
3.6.1 Sequence diagram
A different way of illustrating the interaction among objects is to show them on a
sequence diagram, which depicts object interaction arranged in time sequence. A sequence
diagram is a two-dimensional diagram in which the objects participating in the interaction are
depicted horizontally and the vertical dimension represents time. Starting at each object box is a
vertical dashed line, referred to as a lifeline. Optionally, each lifeline has an activation bar (not
shown), depicted as a double solid line, which shows when the object is executing. The actor is
usually shown at the extreme left of the page. Labelled horizontal arrows represent messages.
Only the source and destination of the arrow are relevant. The message is sent from the source
object to the destination object. Time increases from the top of the page to the bottom. The
spacing between messages is not relevant.

35 | P a g e
36 | P a g e
37 | P a g e
sd Share as a template

Database Storage

Ci ti zen Devel oper Screen Control l er

Cl i ck Save proj ect()

Invoke save proj ect method()

Save proj ect to database()

Store proj ect fi l es()

Return true()

Enabl e share button()

Cl i ck share button()

T i tl e and descri pti on box pop up()

Provi de ti tl e()

Provi de descri pti on()

Cl i ck Share button()

Invoke share method()

Update proj ect pri vacy to publ i c / read onl y pri vacy()

Return updated pri vacy status()

Invoke Pri vacy updated al ert()

Di spl ay T empl ate shared noti fi cati on()

38 | P a g e
sd Use a template

Database Storage

Citizen Developer Screen Controller

Login()

Send user credential()

Check if user is ligible()

return result()
Display Dashboard()

Select Explore()

Invoke templates method()

Fetch all user templates()
Return list of user templates()

Display list of templates()

Search a template()

Provide search parameters()

Use search parameters in query()

Return selected list()

Display selected list()

Select a template ()

Display Template with detail()

Use as a template()

Send parameters of the user and template()

Clone template for personal use()

Save a copy of the template on storage()

Return true()

Notify with a success message()

39 | P a g e
sd Follow beginners guide

Database Storage

Citizen Developer Screen Controller

Login()

Send user credential()

Check if user is eligible()

return result()

Display beginners template()

*Display series of task guides()

sd Access User Guide Documentation

Database Storage

Citizen Developer Screen Controller

Login()

Send user credentials()

Check if user is eligible()

Return result()

Display Dashboard()

Click the help menu()

Expand Help Menu()

Click on Documentation()

Display Documentation()

40 | P a g e
sd Use Components

Database Storage

Citizen Developer Screen Controller

Create a new project()

Insert title()

Provide title()

Validate()

Save to database()

Create project location and files()

Return true()

Provide a work space for the project()

Select component from the side bar()

Choose a component ()

*Drag and drop the component()

Modify internal code()

Save to its file location()

41 | P a g e
sd Create new Proj ...

Database Storage

Ci ti zen Devel oper Screen Control l er

Logi n()

Send user credenti al ()

Check i f user i s el i gi bl e()

Return resul t()

Di spl ay Dashboard()

Sel ect Create a new proj ect()

Di spl ay form wi th ti tl e and descri pti on()

Provi de proj ect ti tl e and descri pti on()

Send data()

Store proj ect i nformati ons()

Modi fy Storage()

Return true()

Di spl ay work stati on()

sd Prev iew Desi...

Database Storage

Citizen Developer Screen Controller

Display Work station()

Click on Preview button()

Display in preview mode()

Go back()

Display work station()

42 | P a g e
sd Create new Proj ...

Database Storage

Ci ti zen Devel oper Screen Control l er

Logi n()

Send user credenti al ()

Check i f user i s el i gi bl e()

Return resul t()

Di spl ay Dashboard()

Sel ect Create a new proj ect()

Di spl ay form wi th ti tl e and descri pti on()

Provi de proj ect ti tl e and descri pti on()

Send data()

Store proj ect i nformati ons()

Modi fy Storage()

Return true()

Di spl ay work stati on()

43 | P a g e
sd Create new pa...

Database Storage

Citizen Developer Screen Controller

Display work station()

Select pages tab()

Display list of pages()

Click add new page button()

Form for page name()

Provide the name()

Click ok button()

Check for the names validaty()

Create page in the file storage()

Return success message()

Display page created()

Display work station()

44 | P a g e
sd Use assets

Database Storage

Citizen Developer Screen Controller

Display work station()

Click assets tab()

Click add new asset()

Open file manager ()

User selects media()

Click upload()

Validate the data properties()

Store media location()

Save media to current directory()

Return true()

Display success message()

Display assets panel()

sd Style the page

Database Storage

Citizen Developer Screen Controller

Display working station()

Select component from component tab()

Provide necessary informations on the attribute panel()

Send changes()

Manipulate code on the files()

Show changes()

45 | P a g e
46 | P a g e
47 | P a g e
3.7.2 Activity Diagram
A use case model can also be described using an activity diagram. However, to depict a
use case, a subset of the activity diagram capabilities is sufficient. In particular, it is not
necessary to model concurrent activities for use cases. An activity diagram can be used to
represent the sequential steps of a use case, including the main sequence and all the alternative
sequences. An activity diagram can therefore be used to provide a more precise description of the
use case, because it shows exactly where in the sequence and what the condition is for an
alternative sequence to diverge from the main sequence.

48 | P a g e
49 | P a g e
50 | P a g e
s

51 | P a g e
52 | P a g e
act Use a template

Start

User logges in

Dashboard

Select Explore Tab

List of Templates

Type search parameters and hit search

Search Again No
Search query true?
No results

Yes

Specific templates list

Select Template

View Template

No

Use as a template

Yes

Templated Cloned Notification

53 | P a g e
act Follow beginners guide

User logged in

Beginners Template w ith

tooltip

Yes
Display Series of guides

No Next

Finish

54 | P a g e
act Access User Guide Documentation

Start

User logges in

Dashboard

Select Help Button

Help Drop Dow n

Select
Documentation

Documentation

Search Again

Search in the documentation

No
Found search result? No result found

Yes

Display Search result

act Create new proj ...

User logged in

Create new Project

Proj ect title and

Description

Provide title and description, then click Create button

Work Space

Save and exit

55 | P a g e
act Use Components

Create new project

Display Work station

Drag and drop components, and arrange them accordingly Repeat process

Modified w ork station, w ith

different components

Save and exit

56 | P a g e
 act Create new proj ...

Create front end design

Click preview

Display prev iew mode

No, or Simply preview

Want to edit? Click back button

Yes

Work station

Save and exit

act Create new pa...

New project created

Click pages tab

Pages list

Create new page

Prov ide page name

Redirect back, with a new page

Click Create page

Page created

Save and exit

57 | P a g e
58 | P a g e
59 | P a g e
60 | P a g e
3.7.3 State Diagram
A state diagram is a model in which the entity being modelled is viewed as a set
of states, with transitions between the sates taking place when some event occurs. A state
is represented as a rectangle with rounded edges or as ellipses or circles; transitions are
represented by arrows connecting two states. Details can also be attached to transitions.
State diagrams are often used to model the behaviors of objects of a class. The state
represents the different states of the object and transition captures the performing of the
different operations on the object. So, a state diagram models how an object evolves as
operations are performed in it.

61 | P a g e
act Use a template

Dashboard

List of Templates

Template Search Result

View Template

Template Cloned
Notification

62 | P a g e
 act Access User Guide Documen...

Start

Dashboard

Help Drop Dow n

Documentation

act Use Components

act Create New Proj ...

New Project

Logged in

Work Station
New Proj ect

Work Station w ith New Work Space

Components

63 | P a g e
act Prev iew Desi...

Create Front End

Prev iew Front End

Current Work station

act Use Assets act Style the page

New Project New Project

Assets Component

File Explorer Attribute Panel

Changed Attribute
Upload

64 | P a g e
65 | P a g e
Chapter Four

System Design
4.1 Overview
In the System design the system is presented in well-defined ways like Architecturally,
Module wise, Component and their interface wise and the mapping of hardware to software.
Based on the requirements of the users the application will be having the design as followed. The
document will contain the Proposed System Goal, Object Designs and the architecture.
4.1.1 Purpose of System Design
This section describes what the design goal is and what to achieve and expect from the
system in Performance, Maintenance Dependability and end user views.
4.1.2 Design Goal
the design Goals are focused on the non-functional requirements which are stated on the
requirement elicitation. It will contain the following categories.
4.1.2.1 Performance
For giving good service the system should perform tasks with user acceptable time and
good memory consumption. This means
❖ Response Time: - Based on the available network connection speed and strength the
system must respond with the possible minimum duration if time
❖ Storage and Space: - The client system Should have Memory capacity (RAM) of at least
1GB in average for stable performance. The server system requires about 1TB of Storage
memory in order to save large number of modules created by the developers which are
provided to the users
4.1.2.2 Dependability
❖ Availability: - If the connection is available all the time on the server (i.e. if the server
never fails and the client have the access to the internet) the system will be available
24/4.
❖ Reliability: - as long as there is no power outage or disconnection between the server and
the client the system will save users date on the server so it will be reliable
❖ Security: - The users will have their own credentials to log in to the system to access their
account and keep on working on their applications, this implies the system must be
secure
❖ Robustness: - Since there might be errors occurring in the process of working on the
application due to insertion of some incompatible information on the system, in such
cases the system should show an error instead of crushing
4.1.2.3 Maintenance
❖ Extendibility: - it should be possible to add new functionalities easily in the way of
modules and APIs easily

66 | P a g e
 ❖ Modification: - if one of the functionalities needed to be modified the system should
allow the modification easily and do not affect the other functionalities
❖ Portability: - Since the system is deployed on servers that can be accessed through the
web browser it should be accessible via any device
❖ Readability: - the system should be well documented and the code be well commented
making the system easily understood by other developers
4.1.2.4 End user
❖ Usability: -The system should be easy to understand and use by the novice users to
achieve its goal which makes the user build an app easily. It should have a simple and
understandable Graphical User Interface
❖ Utility: - the system should contain an easy to understand language usage and good
guidance for the Novice End Users and at the same time language that is understandable
by the Professionals.

4.2. Proposed system Architecture

Overview
This proposed system is based on nothing but the document prepared earlier. It deals with
subsystem decomposition, hardware/software mapping and persistent data management. The
proposed system is consisting of three architectural layers. Namely client side, sever side, data
base side.
Client side: so, called presentation layer is simply the user interface that is a form provided to the
end user or the Citizen Developer.
Server side: A mediator to transfer data from application layer or presentation layer to data
layer. This layer also has a property layer which is a class where variables are declared
corresponding to the fields of the database which can be required for the application and make
the properties so that the team can get or set the data using these properties into the variables.
Data base side: This is where the information and data are stored.

67 | P a g e
4.2.1. System Process

4.2.2 Subsystem Decomposition

System is a set of hardware and software operating in a computer. This set of components
are together in order to achieve a specific goal. This system can be subdivided into smaller
subsystems in which each subsystem has its own components. Each subsystem is taken as a
module in which each individual module can tackle only one problem among the overall things
that the system is supposed to do.

68 | P a g e
4.2.2.1 Subsystem Description
Subsystem Purpose
Front end It lays an interface for the user to create layout, drag and drop
components and lastly to preview what has been done so far.
Components It provides an interface for users to view all components from
CSS and HTML, and be able to manipulate and customize
the components. The component’s attributes are manipulated
in this subsystem.
Database It makes database creation easy for the user, it simply
provides a bunch of buttons with specific name to do the
CRUD. And user can create, edit, read and delete database
values using this subsystem.
Modules This subsystem is used as a network for sharing modules,
from users to users. The modules, show lists of previously
done, working and customizable codes having codes from
front end and back end.
User Guide This is a place where documentation for the system will be
stored. In this place, users can read get aid about the system.
Code Editor This provides advanced users to manipulate the code
generated from the GUI generated using the front-end
module, and back end is also manipulated in this area.

cmp Subsystem Decomposition

Components

Edit attribute

Front end

Create Layout Prev iew Design

Code editor
Drag and Drop User Guide

File Manager Code editor

Documentation

Database

Database GUI

Modules

Search View

Integrate

69 | P a g e
4.2.3 Hardware / Software Mapping
The system will have web server, database server and file server. The web server will host the
page online and process all the requests from clients, whereas the database server will help
organize the data in a regular structure, in tables. The file server will be the storage area, where
all files will be stored. The servers communicate with each other.
deployment Use Case Mo...

«device»
MAC PC

«device»
UNIX Host

«device»
Window s
Desktop

Response
Web Serv er

«device»
Computer

Request
Database Serv er
Response File
Request

File Serv er Store

«device»
Linux Desktop

«device»
Tablets (Android)
«device»
Window s Laptop

«device»
Linux Laptop

4.2.4 Persistent data management

The purpose of this section is to show the mapping of the objects/classes of the
system, identified during the analysis stage, in to the corresponding relational database.

70 | P a g e
71 | P a g e
72 | P a g e
4.2.5 Database Design

4.2.6 Component Diagram

Component is a collection of interrelated packages. Component diagram contains all
the components in the system, their interrelationships, interactions, and the interface of the
system.

73 | P a g e
4.2.7 User Interface

74 | P a g e
Chapter Five

Implementation
5.1. Overview
Implementation is the computer programming and deployment of a technical specification or
algorithm as a program, software component, or other computer device. For a given specification
or standard, there may be several implementations. Generally, the main goal of the implementation
is developing the functional requirements of the system.

5.2. Coding Standard

Coding standards are sets of rules and guidelines that define a programming language's
programming style, procedures, and methods. These guidelines make code more readable, most
organizations will have written style guidelines for code.
Benefits of coding standards:
• Easy team integration
• Increased code quality efficiency and easy for maintaining
• Reduce code complexity
• Reduce development cost
The following are some representative coding standards:

75 | P a g e
 1. Indentation: Proper and consistent indentation is essential in producing easy to read and
maintainable programs.
Indentation should be used to:
✓ Emphasize the body of a control structure such as a loop or a select statement.
✓ Emphasize the body of a conditional statement
✓ Emphasize a new scope block
2. Inline comments: Inline comments analyze the functioning of the subroutine, or key
aspects of the algorithm shall be frequently used.
3. Rules for limiting the use of global: These rules file what types of data can be declared
global and what cannot.
4. Structured Programming: Structured (or Modular) Programming methods shall be used.
"GOTO" statements shall not be used as they lead to "spaghetti" code, which is hard to
read and maintain.

5. Naming Conventions: The naming convention is how your packages, classes methods,

variables, etc. should be named. (e.g. camelCase, PascalCase or snake_case)

6. Error return conventions and exception handling system: Different functions in a
program report the way error conditions are handled should be standard within an
organization. For example, different tasks while encountering an error condition should
either return a 0 or 1 consistently.
7. File and folder Naming and Organization: This is how your file and folder should be
named and structured.

8. Testing: This specifies which approach and tools should be used to test the codes.

5.3. Prototype
Client side: It is the program that runs on the client machine (browser) and deals with the user
interface/display and any other processing that can happen on client machine like reading/writing
cookies. It is done in languages that can be executed by the browser, such as HTML, CSS,
JavaScript and browser development tools. The device can be a personal computer or a
smartphone.

Server side: The actions that take place on a web server have to do with dynamic content
generation. Database querying and operation, accessing/writing a file on the server, user
authentication, structuring the application, and processing user feedback are some of these acts.
The server-side programming used are:
• PHP Laravel for modular packaging the system and to access relational database.

76 | P a g e
 • Apache server to communicate from client to server
• MySQL for the database

5.4. Implementation Detail

Implementation is divided into two parts or ends:
1. Client-side (frontend)
2. Server-side (backend)

5.4.1. Client-side

In web development, 'client side' refers to everything in a web application that is displayed or
takes place on the client (end user device). This includes what the user sees, such as text, images,
and the rest of the UI, along with any actions that an application performs within the user's
browser.

Markup languages like HTML and CSS are interpreted by the browser on the client side. In
addition, in this project we are including client-side processes in our application architecture and
moving away from doing everything on the server side; business logic for dynamic webpages*,
for instance, usually runs client side in a modern web application. Client-side processes are
almost always written in JavaScript.

For Server based applications client side is the same as Frontend, here we list the technologies
we use to develop the application.

➢ Html
HTML is the first layer of any website and creates the code version of a
wireframe on a webpage. These wireframes exist for the styles in CSS and all the
bells and whistles in JavaScript. However, it’s important to remember that HTML
isn’t particularly intelligent. It doesn’t make decisions or capture information on
its own. It simply renders the scaffolding of the web pages.
➢ CSS
Cascading Style Sheets, or CSS, is what gives our HTML visual appeal and draws
in the user. To put it simply, style sheets dictate the presentation of HTML
elements on a page.

➢ Sass
A new trend with styling is to use what is called a CSS pre-processor. These
include sass. Pre-processors are scripting languages that compile to CSS for the
browser and are very popular as they expedite the development process. They
accommodate some programming logic.
➢ JavaScript

77 | P a g e
 JavaScript is a runtime language for web browsers. This means that when you
open a web page, the page will load both the foundational JavaScript that is
standard with the page and any new JavaScript added to a page. The new
JavaScript will load in parallel with it and can perform actions and make
decisions.
➢ JQuery libraries
JQuery is a fast, small, and feature-rich JavaScript library. It makes things like
HTML document traversal and manipulation, event handling, animation, and Ajax
much simpler with an easy-to-use API that works across a multitude of browsers.
➢ Vue Js
Vue.js is a JavaScript library for developing distinct web interfaces. Its core
library focuses on the view layer only. Therefore, you can conveniently integrate
it with other libraries and tools to achieve desired outputs. Also, it is capable of
powering Single Page Applications when you merge it with other tools and
libraries.
➢ Chrome DevTools
It is a set of developers’ tools built directly into the Google Chrome web browser.
This is one of the best front-end technologies. These tools help edit pages on-the-
fly and identify issues rapidly. As a result, you can build better websites faster.
Moreover, with DevTools, you can view and change any page. It comes with a
built-in console for running JavaScript and can stimulate different screen sizes
and devices. DevTools is popular among developers as an essential front-end
developer tool.
5.4.2. Server Side

Much like with client side, ‘server side’ means everything that happens on the server, instead of
on the client. The client computers send request to the server and the server return the results to
the client.
Language used for the backend is PHP, hypertext preprocessor, which is the most popular server-
side scripting language in the world. It is especially suited to web development. It is fast, flexible
and pragmatic. It powers everything from the smallest blog to the most popular websites in the
world.
We chose Laravel which is the most popular PHP framework at the moment. Laravel is free,
open source intended for the development of web applications following the model-view-
controller (MVC) architectural pattern and based on Symfony. Some of the features of Laravel
are a modular packaging system, with a dedicated dependency manager, different ways of
accessing relational databases, utilities that aid in application deployment and maintenance, and
its orientation toward syntactic sugar i.e. uses syntax that is designed to make things easier to
read or to express. It makes the language “sweeter” for human use.

For database we are using MySQL. MySQL is an open source relational database management
system (RDBMS).

78 | P a g e
79 | P a g e