WEB BASED STUDENT ASSOCIATION MANAGEMENT SYSTEM

CHAPTER 3
METHODOLOGY
3.0 INTRODUCTION

This Chapter gives a comprehensive overview of the system, users and system
requirements and specifications. This chapter also involves the design considerations and
selections and how the entire system will be designed and includes which techniques or
tools required to build the system.

3.1 Methodology

The Software Development Life Cycle is a framework for designing, developing, and

maintaining software (SDLC). It depicts the software development process's steps,

phases, milestones, and evolution. In software development and design, there are many

different sorts of models. Spiral models, rapid development models, evolutionary models,

waterfall models, prototyping models, and so on are some of them. The Spiral model of

SDLC will be used for the implementation of the proposed system. The spiral model

blends the notion of repeated development with the waterfall model's methodical,

regulated elements. This Spiral model also combines the iterative development process

model with the sequential linear development model, i.e., the waterfall model, with a

strong focus on risk analysis.

3.1.1. The Spiral Model - Design

The spiral model has four phases. A software project repeatedly passes through these

phases in iterations called Spirals.

1|Page
 Figure 3.1.1 Is a representation of the different phases of the Spiral Model

3.1.2 Steps involved in the spiral model process

2|Page
3.1.3. Activities involved in Spiral model

Phase Name Activities Performed Deliverables/Outputs

Planning Requirements are studied, Requirements

gathered. Feasibility study understanding

Reviews and walk through document

stream lined requirements

Finalized list
ofrequirements
.
Risk Analysis - Documentwhich

Requirementsarestudiedandbrainstormingses highlights all the

risksanditsmitigationpl
sions are done to identify the potential risks. ans

Once the risks are identified, a risk mitigation

strategyis planned and finalized

Engineering Actual development and testing of Actual

the of software takes place in this developmentand
phase
testingif thesoftware
takesplaceinthisp
hase
Evaluation Customersevaluatethesoftwareandprovidethe Features implemented
irfeedbackand approval document

Table3.1.2.2: Denotes activities involved in the spiral model

3.1.4. Advantages of Spiral model

The advantage of the spiral lifecycle model is that it allows elements of the product to be

added when they become available or known. This assures that there is no conflict with

previous requirements and design. This method is consistent with approaches that have

multiple software builds and releases which allows making an orderly transition to

maintenance activity. The spiral model forces early user engagement in the system
3|Page
 development effort, which is another advantage of this technique. On the other side, it

takes very strict management to complete such products and there is a risk of running the

spiral in an indefinite loop. So, the discipline of change and the extent of taking change

requests is very important to develop and deploying the product successfully.

3.1.5 Some of the major advantages of the Spiral Model are as follows.

• Development is fast for large project and are handled in a strategic way

• Risk evaluation is proper.

• More and more features are added systematically.

• Software is produced early.

• There is room for customer feedback and the changes are implemented faster.

3.2 TOOL SELECTION

The system seeks to design an interactive web application using the following
development tools that have been carefully chosen for this research project:
 Visual Studio Code
 Microsoft word 2010
 Apache server
 PHP scripting language
 Bootstrap
 MySQL database system
 HTML client side programming language

3.2.1 HTML
HTML is a hypertext mark-up language that is in reality the backbone of any
website. No website can be structured without the knowledge of HTML. If we make
our web page only with the help of HTML, we cannot add many of the effective
features in a web page, for making a web page more effective we use various
platforms such as CSS. So here we are using this language to make our web pages
more effective as well as efficient. And to make our web pages dynamic we are using
JavaScript.
4|Page
 3.2.2 CSS
Cascading style sheets are used to format the layout of web pages which can be used

to define text styles, table sizes, and other aspects of Web pages that previously could

only be defined in a page's HTML. The basic purpose of CSS is to separate the

content of a web document (written in any mark-up language) from its presentation

(that is written using Cascading Style Sheets). There are lots of benefits that one can

extract through CSS like improved content accessibility, and better flexibility.

Moreover, CSS gives a level of control over various presentation characteristics of

the document. It also helps in reducing the complexity and helps in saving overall

presentation time. CSS gives the option of selecting various style schemes and rules

according to the requirements and it also allows the same HTML document to be

presented in more than one varying style.

3.2.3 JAVA SCRIPT

JavaScript is considered to be one of the most famous scripting languages of all time.

JavaScript, by definition, is a Scripting Language of the World Wide Web. The main

usage of JavaScript is to add various Web functionalities, Web form validations,

browser detections, creation of cookies and so on. JavaScript is one of the most popular

scripting languages and that is why it is supported by almost all web browsers available

today like Firefox, We used the browser Opera or Internet Explorer. It is often used for

the development of client-side web development. JavaScript is used to make web pages

more interactive and dynamic. JavaScript is a light weight programming language and it

is embedded directly into the HTML code. JavaScript, as the name suggests, was

influenced by many languages, especially Java.

5|Page
 3.2.4 PHP

Precisely, PHP is a very powerful server-side scripting language for developing

dynamic web applications. Using PHP, one can build interactive and dynamic websites

with ease. A PHP script can be embedded straight into the heart of HTML code. PHP is

compatible with various web servers like Apache and Microsoft’s IIS as well. All the

PHP scripts are executed on the server and it supports various databases like MySQL,

Oracle, Solid, Generic ODBC, etc; however, it is mostly used with MySQL.

3.2.5 MySQL Database

SQL stands for Structured Query Language allows access and manipulation of data

within database. SQL is an ANSI (American National Standards Institute) standard.

SQL can execute queries against a database ,retrieve data from a database, insert

records in a database, update records in a database, delete records from a database,

create new databases , create new tables in a database , create stored procedures in a

database, create views in a database, set permissions on tables, procedures, and views.

3.2.6 Why Bootstrap?

Bootstrap is a free yet powerful front-end HTML, CSS, and JavaScript CSS
framework. This open-source toolkit contains code dedicated to supporting the front-
end web development process and we opted to use it because;

 Time-saving

 Easy to Use

 Responsive Grid System

 Cross-browser Compatible

6|Page
  Open Source

 Community-centered

3.2.7 Why Visual Studio Code?

There are several reasons to use a Visual studio code;

 It’s a free and Open Source IDE for writing codes

 Its Stable
 It has built in Git integration
 It is versatile and has an up-to day functionalities as well

3.3 Overall Description

This piece gives an overview of the whole systems of the proposed system. The

system will be explained into context to show exactly how it interacts and introduce

the basic functionalities. It also describes the users of the system, what functionalities

are made available for them, the constraints and assumptions the system presents.

3.4 Overview of the Proposed System (Web-Based Student Association Management

System)

The proposed system is a web-based Student Association Management system

addressing the shortcomings of the existing system’s problems of a department’s

Association in a way that guarantees better performance. It can be used by students and

other key members of the Association which the system is primarily targeted at. The

recommended system will be used to oversee various works within an Association. This

proposed web-based system boasts of getting updated information for the benefit of

students and key members. Thus, the administrator is the most privileged person to

maintain or track all current updated information and other features. It also has all the

privileges to manage the data stored in the application's database. Only the administrator
7|Page
can review or properly approve a particular record. The goal of this system is to reduce

student time. For example, instead of bringing a printed copy of the subject's memo, you

can access and download the memo. Students, especially class representatives, can also

upload recorded notes from previous lectures. Interactions between students and staff, or

personal complaints from specific students, can be shared with staff. Allow students to

make payments with ease without having to stress to find who, where, and how to pay in

other to have better record keeping books.

3.4.1. Features of Web-based Student Association Management system

This web application has certain unique features, some of these features are:

 Interactivity

With this feature, it is easy for a user to interact with the System with ease. When

a user intends to navigate their way into using certain features from the web

application, they get to be provided with a navigation label to assist them with a

feature they intend to use.

 Dynamic

This system being dynamic means it could be accessed from either the web or

from the phone.

 Not limited to a particular area

The system is not limited to accessing in a particular area but it can be accessed in

every corner of the University Community and outside of Campus since It will be

hosted on the Internet.

 Not complicated

Interpreting features on the web application has no complications since there

8|Page
 would be user accessibility to give a gist of every action performed by an intended

user of the system.

3.4.2 Benefits of the proposed system

We believe that the new proposed system will bring about the following:

 Efficiency in operations at the highest level due to the rational database.

 It will enhance timeliness, accuracy, reliability and above all easy access to

data and information.

 It will accelerate decision making mechanism which will turn the whole

system into modern and appreciative.

 The system will help to reduce the high rate of labour using to its high level of

automation and independency.

Fig 3.4.1.1 Architectural Design of the proposed system

3.5 System Design

System design stage of software development life cycle is the stage where the

proposed system requirements with respect to its input design requirement, process

9|Page
 Design requirement and output design requirements are specified. These design

requirements are specified in line with the user requirements, goals and Objectives.

3.5.1 Use Case Model

Use case modelling is the unified modelling language artefact which is intended to

capture the essence of problems through idealized and abstract descriptions. Use case

diagram identifies a sequence of actions that provides a measurable value to the actor and

describing the ways in which the environment interact with the system. It model unit of

functionality provided by the system to the user and highlights what users are trying to

accomplish and the responsibility of the system. It is the collection of all actors and use-

cases. We also use extends and includes (uses) concept in the use case.

 Actors of the system

 Student
 System Administrators

3.5.1.1 Use Case Diagram

Use case is an interaction between the user and the system. It identifies the goal of the
user which is provided from the system and the responsibility of the system towards the
user.
Login
Student
Payment

Download
Resources

Update Profile

View Notice

Forum
Forum
10 | P a g e
Logout
 Use case Diagram showing Student Functionalities of the system

Admin
Login

Upload Content

Upload Resources

Manage Records

Upload Notice

Logout

Use case Diagram showing Administrator Functionalities of the system

3.5.1.2 Use case Description

Use case name Login

Actor Admin, Students

Description To authenticate the user

Pre-condition They must have already registered before logging in to the system.

Flow of events 1. Users enter into the system.

2. The system displays login page for the user.
3. The user fill up the user name and password text field, and select
the user type from the combo box.
4. The users click the login button.
5. The system checks the validity of the user name, password and
user type.
6. The system prompts successfully login.
7. Use case end.

Alternative events User name (Index Number), password, user type or both incorrect.

A4. The system display error message and promotes to re-enter

correct username (Index Number), password or to select correct user
11 | P a g e
 type. And if the user forgot password, “forgot password” option is
provided

A4. The use case resumes at step3 of basic flow of events.

Post condition page displayed successfully

Use Case Description for Login

Use case name Dues Payment

Actor Student

Description Students will use make payment with the web-based system

Pre-condition They must have already registered with the system before they can
make payment.

Flow of events 1. The User logins into the system with credentials
2. The user browse the navigation bar to find payment option
3. The user follows prompt with the available information for
payment
4. The users click the pay button.
5. The system sends an authorization message to your phone to
enter your PIN to accepts payment
6. The system checks the validity of the User
7. The system prompts successfully payment.
8. Use case end.

Post condition The system prompts for a Payment made successfully

Use Case Description for Payment

Use case name Upload Notice

Actor Administrator

Description Upload the notice or news information detail, including create, edit,
and delete the news about the association and other relevant matter
related to the Association.

Pre-condition Precondition:

Users should be able to access the web system to have notice

User must be login to SAMS system

Flow of events 1. User click on “Notice to go to notice page.

2. System responds open the Notice page.
3. Click “upload new Notice” to create notice information.

12 | P a g e
 3.1) Click on upload notice button
3.2) System allow to browse the document or open write page
3.3) User select document or write notice then click on upload
button.
3.4) Notice uploaded.
4. Click “Edit” to edit the notice information detail or;
4.1) user select Notice to be edited
4.2) User Click on Edit notice button
4.3) System allow to edit the notice and display edit notice
page
4.4) User edit notice then click on submit button.
4.5) Notice edited.
5. Click “Delete” to delete the notice information detail.
5.1)User select Notice to be deleted
5.2)User Click on Delete notice button
5.2) System display warning message
5.3) User read message make decision
6. 5.4) Notice deleted.

Post condition The system prompts for a Payment made successfully

Use Case Description for Uploading Notice

Use case name Update Profile

Actor Student

Description Student will be able to make amends to their profile settings

Pre-condition The user must first be logged in to the web page in order to update
the information on his profile

Flow of events 1. Users log into the system.

2. The system displays login page for the user.
3. The user clicks on the profile icon and locates profile
4. The user is presented with a profile page form to make amends.
5. The users click the update button.
6. The system validates and effect change.
7. The system prompts successfully updated.
8. Use case end.

Alternative events

Post condition The system prompts successfully deleted information message to the
user

Use Case Description for Profile Update

13 | P a g e
Use case name Download Resources

Actor Student

Description Student will be able to download available resources on the web-

based system for academic purposes

Pre-condition The user must first be logged in to the web page in order to access
this functionality

Flow of events 1. Users log into the web-based system.

2. The system authenticates the user and displays page for the user.
3. The user clicks on the profile icon and locates Library
4. The user is presented with numerous resources relevant to their
field of study
5. The user then clicks to download any of the available materials
6. The system prompts successfully downloaded.
7. Use case end.

Post condition The system prompts successfully download information message to

the user

Use Case Description for Resource download

Use case name Logout

Actor Student, Admin

Description Student will be able to make amends to their profile settings

Pre-condition The user must first be logged in to the web page in order to update
the information on his profile

Flow of events 1. Users log into the system.

2. The system displays login page for the user.
3. The user clicks on the profile icon and locates profile
4. The user is presented with a profile page form to make amends.
5. The users click the update button.
6. The system validates and effect change.
7. The system prompts successfully updated.
8. Use case end.

Post condition The system prompts successfully deleted information message to the
user

Use Case Description for Logout

14 | P a g e
3.5.1.3 PROGRAM FLOWCHART

Flowcharts are diagrammatic representation of an algorithm. It shows the flow of the

program logic. Flowcharts drawing or writing are important stage in software program

development in that it gives a vivid description of what the program is doing to the

programmer and the novice programmer. The program flowcharts for the online

system designed is specified below:

START

HOMEPAGE

Login Fail

LOGIN

Login Success

Forum Download View Payment Logout

Resources Notice

15 | P a g e
 Login

Enter Username & Password

No

Correct

Successful Login
Display Web
Content

Fig 4 Flow chart Activity diagram for login

Update Profile

Display Data

Alter Existing Field

Validate
Invalid

Successfully changed 16 | P a g e
 Valid

Fig4 Flowchart for Update profile

Fig 4 Flowchart for forum

View Homepage

Forum Link

Add forum option

Forum displayed

Fill forum

Invalid
Validate

Successfully added

Action Response

17 | P a g e
 Click on Material Menu

View Available Material

Select & Download

Click on the Download Link

Click on the Download Link

Download Material
Fig Flowchart Diagram for Materials Download

Click on News Menu

Click on View Notice

View Current Notice

18 | P a g e
 Fig Flowchart Diagram for View Notice

Click on Payment Menu

Enter details in field

Select Payment Mode

Click on Pay

Verify payment with PIN

Payment Successful

Fig 4 Flowchart for Payment

View the Page

Click on Logout Button

Fig 4 Flowchart for logou

19 | P a g e
3.5.2 Input Requirement

This input requirement will require a student to punch in their details to access the

system via the web interface, for that matter they will not be required to register with

the system since we intend to use the API from data records of students for an

aforementioned Association from the Student Records Session which will facilitate

for ease use of the system.

 Index Numbers

 Password (Default)

3.5.3 PROCESS REQUIREMENTS

Processes to be carried out by the web-based Association management system are

updating of Students records to the system database, Student payment of dues with the

web platform, availability to download resourceful materials on the web platform and

forum which gives students the edge to share concerns

3.4.3 OUTPUT REQUIREMENTS

This is the description of how the report to be generated by the web-based Student

Association Management system should look like:

Confirmation report - This report shows an affirmation that a transaction process such
as a student having made payments for his dues will receive both a text and email
confirmation.

Student Account Balance - This report shows the balance amount on the page.

20 | P a g e
About the association - This information shows the visions and objectives of the

association and where it’s geared towards also it portrays some key individuals who are

associated with the Association.

21 | P a g e