Download as pdf or txt
Download as pdf or txt
You are on page 1of 134

A PROJECT REPORT

ON

ONLINE VOTING SYSTEM


Submitted in the Partial fulfillment of the requirements forThe
Award of the Degree of

BACHELOR OF VOCATIONAL DEGREE


IN
COMPUTER SCIENCE

BY

DODDAKA PRAVALLIKA(K2102542)

Under the Guidance of

J. BALAJI (M.C.A)

KAKARAPARTI BHAVANARAYANA COLLEGE


(AUTONOMOUS)
(Sponsored by S.K.P.V.V. Hindu High School Committee)

Kothapeta, Vijayawada
2023-24
KAKARAPARTI BHAVANARAYANA COLLEGE (AUTONOMOUS)
(Sponsored by S.K.P.V.V. Hindu High School Committee)

Kothapeta, Vijayawada.

Department of Computer Science & Application

CERTIFICATE
This is to certify that the work entitled “Online Voting System” being submitted by
DODDAKA PRAVALLIKA bearing Regd No K2102542 in the partial fulfillment of Vocational
at KRISHNA UNIVERSITY, MACHILIPATNAM .During the academic Year 2022 to 2023.It
is certified that all the corrections/suggestions indicated for internal for assessment have been in
cooperative in the project work has been approved as its satisfied academic requirements in respect of
project work prescribed for the above degree .

PROJECT GUIDE HEAD OF THE DEPARTMENT

J. Balaji (M.C.A) P. Ravindra

External Examiner
DECLARATION

The Project work entitled “Online Voting system “is a record of bonafide work carried out
by me, submitted in partial fulfillment for the award of BACHELOR OF DEGREE in
COMPUTER SCIENCE to the KRISHNA UNIVERSITY, MACHILIPATNAM. The result
embodied in this project work has not been submitted to any other University or Institute for theaward of any degree

or diploma.

NAME OF THE STUDENT

DODDAKA PRAVALLIKA(K2102542) SIGNATURE OF THE STUDENT


ACKNOWLEDGEMENTS
This project work is a golden opportunity for learning and self-development. We consider ourself very lucky to
have so many people lead us through in completion of this project.

We express our sincere thanks to the management and our beloved principal DR. V. NARAYANA RAO for
providing such wonderful facilities required encouragement in completion of this entire project work.

We place an record, our sincere gratitude to sri. P. RAVINDRA, HOD OF COMPUTER APPLICATIONS
for his constant encouragement. He monitored the progress and arranged all facilitates to make this project
easier. We owe our profound gratitude to our project guide
J. BALAJI who took keen interest on this project work and guided us all along and whose patience we have
probably used to the limit. He was always so involved in the entire process, shared his knowledge, and

Encouraged to think.

We would like to thank all the other faculty members, technical staff and supporting staff who have provided
their contribution in the completion this project work.

Name Regd. Number Roll No

DODDAKA PRAVALLIKA K2102542 215442


PROJECT
REPORT ON
ONLINE VOTING SYSTEM
TABLE OF CONTENT

S.NO TITLE PAGE NO:

ABSTRACT 3-4

1. INTRODUCTION

 Problem Statement 5
 Proposed System 6

2. SYSTEM ANALYSIS 7-17

 Background
1. System Objectives
2. System context
3. Functional requirements
4. Non-functional requirements
5. Future requirements

6. System Requirement Specification


 Feasibility Analysis
Technical Analysis
Operational Analysis
Behavioral Analysis
3. SYSTEM DESIGN 18-43
7.Use Case Diagrams
8. Data Flow Diagrams.
9.Protype designs
10.Activity diagrams

1
11.Class diagram
12. Sequence diagrams
13. ER diagrams

4. DATABASE DESIGN 44-47

 Database Design

5 CODING 48-111

112-117
6 SCREENSHOTS

118-122
7 SYSTEM IMPLEMENTATION PHASE

123-127
8 SYSTEM TESTING
 Software Testing
9 CONCLUSION 128
10 REFERENCES 129

2
ABSTRACT

3
ABSTRACT

An ONLINE VOTING SYSTEM is a software platform that allows groups to securely conduct
votes and elections. High-quality online voting systems balance ballot security, accessibility, and the overall
requirements of an organization's voting event.

Online voting (also known as electronic voting, or e-voting) is the process of using an electronic
method to cast, and then tabulate, votes in an election. In a nutshell, this is what ElectionBuddy does.
ElectionBuddy will help you through the full election process, from notifying voters and collecting votes to
calculating the results of the election.At their core, online voting systems protect the integrity of your vote by
preventing voters from being able to vote multiple times. As a digital platform, they eliminate the need to gather
in-person, cast votes using paper, or by any other means (e.g. email, insecure survey software).

You may hear an online voting system being referred to as an online election system, an online e
voting system, or electronic voting. These all make reference to the same thing: a secure voting tool that allows
your group to collect input from your group and closely scrutinize the results in real time.

Keep reading for access to the most comprehensive online voting system introduction you will find.

4
PROBLEM STATEMENT
This Online Voting System will manage the Voter’s information by which voter can login and use his

voting rights. There is a DATABASE which is maintained by the ELECTION COMMISION OF INDIA in

which complete data of voter with complete information is stored. At the time of registration voter will be asked

for this: Full name, age, aadhar card no, mobile no. email id, finger prints and verified the details by

administrator. At the time of requesting vote, voter will be asked to enter his aadhar id. Then voter will be

authenticated, and he can give vote from one of the candidate from the list If voter already has AADHAR Id

then he/she don’t need to register, else before voting he/she need register himself/herself in AADHAR database

Main facilities available in this project are:-


 Maintaining voter’s Identification.

o Providing online voting management.

o Providing updation of voter’s information

 Provide voter information to ELECTION COMMISION OF INDIA.

o ELECTION COMMISION OF INDIA maintains the complete information of voter.

o Voter can give his\her vote from any part of India.

5
Proposed System

Online voting has been the subject of a lot of literaturedevelopment recently. Online voting has
been the subjectof research in recent years, but there are still attemptsbeing made to strengthen
its security. Security breachescaused by the use of insecure Internet have lately beenreported.
So, addressing security flaws like denial-ofservice assaults is the key concern right now.

Voting methods conducted online are quickly replacingthose conducted on


paper. The counting of votes, the use ofphony voters, the engagement of an outside source,
aswell as other issues like time consumption, financialconstraints, and budget issues, among
others, allcontribute to the rigging of the traditional voting process.Toensure that votes are
securely submitted by voterswhile keeping the time, verification, budget, and overallsecurity of
the system, the goal of this proposal is toresearch how to model an authentic, dependable,
andupright E-voting system.Online Voting System provides the online registration form for the
users before voting and makes the users to cast their vote online. The system is to be developed
with high security and user friendly.

In the recent years there are many literature on online voting has been
developed. While online voting has been an active area of research in the recent years, efforts to
develop real-world solutions have just begun posing several new challenges. The use of insecure
Internet, well documented cases of incorrect implementations and the resulting security
Breaches have been reported recently. These challenges and concerns have to be resolved in
order to create public trust in online voting.

6
SYSTEM ANALYSIS

7
Background
In the recent years there are many literature on online voting has been developed. While online voting has been an
active area of research in the recent years, efforts to develop real-world solutions have just begun posing several new
challenges.
1. System Objectives
Project Objectives includes a detailed study of the election processes as it pertains to voting. Design
and develop a software platforms for voter registration election voting real-time election results
collation and monitoring and mostly for voters remote access to design and develop an electronic
device that incorporates smart card reader and fingerprintstechnology for voters accreditation,
authentication and verification design and develop an administration dashboard for the election
administrators. Run simulations and compare the results of the designed online voting system
and other voting system.
2. System Context
This section clearly depicts the environment and boundaries of the ARS and the entities with which it
interacts. It helps us see how the system fits into the existing scheme of things. What the system will do
by itself and what it expects other entities to do is clearly delineated.
3. Functional Requirements
Enhancement to the online voting system will primarily provide a more precise vote management tool that will
establish accountability and improve data accuracy, and thus allowing voters to feel a greater level of confidence
in the reported data. The majority of the precinct managers, who will benefit from these enhancements, currently
use their professional judgment and expertise to anticipate the voter’s needs when making decisions.
4. Non-functional Requirements
Nonfunctional requirements are requirements that are not specifically concerned with the functionality of a
system. They normally place restrictions on the product being developed and the development process.
Nonfunctional requirements may be regarded as parameters of functionality in that they determine how quickly,
how accurately, how reliably, how securely, etc., functions must operate.Some of the Online Voting System’s
nonfunctional requirements are as
5. Future Requirements
The challenge of developing electronic voting systems is not only security but also protecting the secrecy
of the ballot, a bedrock principle of free and fair elections. Currently there is “no known technology that
can guarantee the secrecy, security, and verifiability of a marked ballot transmitted over the Internet.

8
1. System Objectives

The key to successfully using the online voting systemis the ability to use the system and access the
information available to help. The help facility should be fully functional and able to instruct users through
every step while allowing others more versatility in using the web environment. This is achieved by skipping
all help functions and proceeding directly to the voting process. Accordingly, users are divided into the
following six steps:
 Knowledgeable: We believe the more educated the person is, the less likely the help function will
be needed and the probability of successfully completing the voting is high.
 Frequent: These are users that surf the web frequently for various purposes. in general they
perform routine tasks. Most of them have memorized the steps needed to get to the site they need.
However, it does not necessarily mean they can use the online voting system without any problem.
 Inexperienced: This group of users includes those who use the web very rarely or not at all. They
will, most likely, need more assistance and, therefore, need more time in carrying out the voting
process. This group of users will have a high number of elderly.
 Government: This group will be mainlyusing the administration functions needed for counting and
maintaining the voting data. The group will also be involved with setting up and completing the ballots
for regular users.
 Technical: This group will be in charge of troubleshooting and maintaining the software, hardware
and the network. They willnot have access to actual voting data

 Computer and Network Security: As security is essential for such a system, this group will
ensure that security is met at the software, hardware, network and physical levels. As the design and
implementation of Online Voting Systems has requirements engineering as its foundation, we need
requirements that have zero tolerance with respect to deviating from actual need. This paper also
emphasizes the need for voting system security requirements. Example of use cases will be provided.

9
2. System Context
It reduces the chances of duplication in voting i.e. a single voter can cast only one vote with that
smartcard. There is also a Voter Card ID which is provided to the voter but the primary validation number is the
smartcard number. For providing confidentiality, non-traceability and security in the system some of the
biometric details of the voters are registered earlier. The prerequisite for any voter to vote is that the biometric
identification should match with the earlier one registered. After the process of voting is completed the voter is
given the final chance to review and confirm their vote. The time slot of 30 seconds is given to the voter to
confirm their vote. If no action performed in those 30 seconds then the vote is confirmed. Then the smartcard
number of the particular voter is registered to provide no multiplicity of votes. Then the system is ready for the
next voter to vote.
 The voter enters the website address in hisbrowser.
 The voter selects the state to which he/shebelongs.
 The user is allowed to have a look at the tutorialsection which is optional.
 The voter enters the Name, SSN, State ID, Dateof Birth, and Gender.
 If the input of the voter matches the records,he/she is allowed to login.
 The voter is allowed to choose one of twooptions: Party Selection or Individual Selection.
 The voter casts her/his vote to their favoritechoice under a selection.
 The voter navigates to all the pages and votes tohis/her choice under each category.
 The voter checks the final screen of the vote.
 Voting is carried out from many consoles onthe internet.
 All voting is done in one day.
 Many interfaces exist including Windows Explorer, Netscape, and Mozilla browsers.
 The operating system in use are, but not limited to, Windows, Linux, and UNIX.
 Many different levels of expertise in thesystem use will be prevalent.
 Each state can administer the system differently depending on state laws.
 Each state can have unique election and proposals, needing many different administrative
interfaces

10
3. Functional Requirements

Enhancement to the online voting system will primarily provide a more precise vote management tool that will
establish accountability and improve data accuracy, and thus allowing voters to feel a greater level of
confidence in the reported data. The majority of the precinct managers, who will benefit from these
enhancements, currently use their professional judgment and expertise to anticipate the voter’s needs when
making decisions.

They also rely on outside vendor data and poorly captured metrics from the current state of traditional voting
system. Appropriate behavior constitutes the functionality of a system and there is often a tight
correspondence between particular requirements and particular functions of the solution system [2]. The
following represents a partial lit of functional requirements for the Online Voting System:
 The system must provide voters with accuratedata
 Metric reports of current/live votes must beprovided
 The system should make use of tools availablefor users on the internet
 It must adhere to government requirements
 Ease of GUI use that can be accessed via web browser must be established
 The system must follow technical developmentstandards supported on known operating systems such
as Windows, Linux, and UNIX, in addition to future operating systems versions
 The system must grant technician/customer general communications and training documents
 The system must supply a prototype or process to approve site customization
 Backup data restore capabilities should be granted
 The system must send a notification to administrator if an onsite workstation is classified as
inoperative or unusable
 The system should send a notification to administrator of updates from verification popup windows
 The system must supply standard reports for decision making
 Audit trails of who made changes to the database must be maintained
 The system should allow voting administrators to make updates to the voter information database
 The system must verify on a daily basis responsible users ID and location
 The system must provide standard error checking
 The system must provide data integrity checksto ensure data remains consistent and updated

11
3.1 Voter Authenticity: Ensure that the voter must identify himself (with respect to the registration
database) to be entitled to vote. If voting other than at his home precinct, the voter may be asked to showsome
legal identification document.

 Registration: The voter registration shall be done in person only. However, the computerized
registration database shall be made available to polling-booths all around the nation.

 Voter Anonymity: Ensure that votes must not be associated with voter identity.

 System Integrity: Ensure that the system cannot be re-configured during operation.

 Data Integrity: Ensure that each vote is recorded as intended and cannot be tampered with in any
manner, once recorded (i.e., votes should not be modified, forged or deleted without detection).

 Secrecy / Privacy: No one should be able to determine how any individual voted.

 Non-coercibility and No Vote-selling: Voters should not be able to prove to others how they voted
(which would facilitate vote selling or coercion).

 Reliability: Election systems should work robustly, without loss of any votes, even in the face of
numerous failures, including failures of voting machines and total loss of network communication. The
system shall be developed in a manner that ensures there is no malicious code or bugs.

 Availability: Ensure that system is protected against accidental and malicious denial of service attacks.
Also, setup redundant communication paths so that availability is ensured.

 System Disclosability: The core of the system, especially the vote-casting equipment, shall be open-
source, so that it can allow external inspection and auditing.

 Simplicity: The system shall be designed to be extremely simple, as complexity is the enemy of
security.

 Testing and Certification: The system should be tested by experts with respect to all of the security
considerations, so that election officials have the confidence that the system meets the necessary
criteria.

 System Accountability: Ensure that system operations are logged and audited.

 authenticated and have strictly controlled functional access on the system.

12
.

4 Non-functional Requirements.

Nonfunctional requirements are requirements that are not specifically concerned with the functionality of a
system. They normally place restrictions on the product being developed and the development process.
Nonfunctional requirements may be regarded as parameters of functionality in that they determine how
quickly, how accurately, how reliably, how securely, etc., functions must operate. Some of the Online
Voting System’s nonfunctional requirements are as follows:
 Response and net processing time must be acceptable by user and by application
 Defects in the local voting database file must be less than 0.0001%
 Defects contained in the collection server must be less than 0.0001%
 Defects in the database must be less than 0.0001%
 Number of collection failures per voting process must be at six sigma or better. Taking the entire state
of Michigan, with a population of about 9.9M citizens (if all voted), as an Example, this works out to
be 33 errors
 When checking the database for errors, a 100% scan of the data is required, rather than selecting a
sample set.
 The system must be working at 100% peak efficiency during the voting process.
 Transfer of existing and future data to an Voting Management Data Center must be granted
 The system should be allow adding more voters to allow a greater connectivity rate
 A process must be devised to support normal precinct business hours
 The system should support response time for addressing severe issues in less than 5 minutes, due to the
shortness of the voting timeframe.
 The system should provide documentation to inform users of system functionality and any change to
the system
 The system should provide friendly graphical Interface to ensure ease of use when end users utilize
system functionality

13
5 Future Requirements

Online voting presents numerous vulnerabilities and is fundamentally insecure. There is potential for
unobserved vote manipulation as well additional security vulnerabilities including potential denial of service
attacks, malware intrusions, and privacy concerns. Online voting does not produce a paper trail for auditing.

Blockchain-based voting, which relies on a decentralized, distributed digital ledger is vulnerable to many of the
security flaws inherent in internet voting, such as the potential for malware to alter votes on a voter’s local
device before the ballot is transmitted and the lack of secret ballots. Online and blockchain-based voting would
greatly increase the risk of undetectable, nation-scale election failures.2

Multiple ongoing DARPA projects aim to develop secure hardware focused on developing hardware resistant
to software- based attack through novel CPU designs. 3, 4 Future systems based on secure hardware could
provide additional security, but the technology is still in early development.

End-to-end verifiable election software relies on cryptography to encrypt and protect votes while allowing
voters to see their vote was properly recorded, that the vote was correctly tabulated, and that the final vote
count matches the cast votes. End-to-end verifiable software can be integrated into existing election systems to
enhance the security of voting infrastructure.5 Recent open-source software packages including end-to-end
verifiability systems, such as Microsoft’s software development kit ElectionGuard, could increase security if
implemented in future elections.

 The system should not allow voter submissionsto be observed or recorded in any way that is traceable
to the individual voter
 The system should ensure that election results would be verifiable to independent observers. This
implies that published election results correspond to the ballots cast by legitimate voters
 The system should not allow tampering with audit logs
 The system should have zero-tolerant with regard to compromising
 Election process should not be subject to any manipulation including even a single vote manipulation
 The system should provide accurate time and date settings
 Voting is the main democratic right of every individual in India i.e. a voting must be usable by the
entire voting but in traditional system urban population is not able to vote because of their busy
schedule.
 The voting system has experienced huge changes over years, traditional voting system which is also
knows as electronic voting system using ‘EVM (Electronic Voting Machine)’

14
6. System Requirements Specification

HARDWARE:

PROCESSOR : 3LABSYSTEM29

RAM : 16.0 GB (15.8 GB usable)

MONITOR : 15” COLOR

HARD DISK :250 GB

CDDRIVE : LG52X

KEYBOARD : STANDARD 102 KEYS

MOUSE : OPTICAL MOUSE

SOFTWARE:

FORNT END : JAVASCRIPT, HTML, PHP

BACKEND : MYSQL

OPERATING SYSTEM : WINDOWS 10

15
FEASIBILITY ANALYSIS

16
FEASIBILITY ANALYSIS

Six different delivery options (described in section 4) were evaluated during this assessment. We
believe that the highest likelihood of project success combines parts of multiple options in addition to
the mitigation of key project risks.
Given the inherent challenges of this endeavor and based on our research the most feasible approach is
to:

 Have this program be owned by the city, specifically the Department of Technology. Hire or
reassign the required expertise to administer and guide this project.
 Enlist multiple vendors for the entire build phase and contract them for ongoing operational
support
 Commit to building the Open Source community and only start relying on the community for
delivery of new features once it has been proven to be engaged and reliable.
 Partner with LA County that has developed human-centered/accessibly designed furniture and
electronic voting devices already
 Partner with a jurisdiction, ideally within California, so that the certification is only with one
body - the Secretary of State of California. This will allow for sharing of costs.
 Partner with existing open source voting group(s) like (but not limited to) OSET Institute to learn
from and possibly build upon the assets that they have already created.
 Approach the project in an agile manner aiming to provide value as soon as its developed.
 Conduct an in-depth assessment of Open Source licensing models and only proceed with an
Open Source license when the implications are understood by key city stakeholders such as IT
and the legal department.

17
SYSTEM DESIGN

18
7) Use-case view

IDENTIFICATION OF ACTORS

You can conduct various types of elections through an online voting system. For example, you can use it for
a simple majority vote, where the option or the candidate with the most votes wins. You can also use it for a
more complex voting system like proportional representation, where each vote holds weight according to the
voter's preference.

 Everyday use cases for an online voting system include:


 Board of directors elections
 Shareholder meetings
 Homeowners Association (HOA) board elections
 Union leadership votes
 Student government elections
 A typical online voting session goes like this:
 First, the voter logs in to the voting system using their unique username and password.
 Next, they select the candidates or options they want to elect.
 Finally, they submit their vote, and the system tallies the results.

Graphical Depiction
An actor is a stereotype of a class and is depicted as “stickman” on a use-case diagram.

Admin

Naming:

The name of the actor is displayed below the icon.


Questions that help to identify actors
1. Who is interested in a certain requirement
2. Where is the system used within the organization?

19
3. Who will benefit from the use of the system?
4. Who will supply the system with information, use this information, and remove this information?
5. Who will support and maintain the system?
6. Does the system use an external resource?
7. Does one person play several different roles?
8. Do several people play the same role?
9. Does the system interact with a legacy system?
Using the above questions we have identified four actors is Online Voting System. They are
1) Admin
2) Voter

1)Admin: A voting System is a used to record votes in an Voting without paper. The first voting System but it
is increasingly more common to use electronic voting machines.
UML notation

Admin

2) Voter: Online Voting System (also known as OVS ) is voting using Voting means to either aid or take care
of the chores of casting and counting votes.

UML notation

Voter

20
IDENTIFICATION OF USE-CASES AND SUB USE-CASES

Use case is a sequence of Online Voting System that yields a measurable result of values for a particular

actor. The use cases are all the ways the system may be used.

Graphical Depiction:

The base shape of a use case is an ellipse:

 the voter begins the use case by entering a valid social security number and voter id
 Use case names often start with a verb. The name of the use case is displayed below the icon.

Process

Questions that help to find use cases


1. What are the tasks of each actor?
2. Will any actor create, store, change, remove or read information in the system?
3. What use cases will create, store, change, remove, or read this information?
4. Will any actor need to inform the system about sudden, external changes?
5. Does any actor need to be informed about certain occurrences in the system?
6. What use cases will support or maintain the system?
7. Can all functional requirements be performed by the use cases?
By applying the above questions to the Online Voting the following use cases are identified. They are:

21
1) Select Candidate:
After searching from the list of available candidates it asks the voter to choose candidate then the
voter select the candidate which he want to vote.
UML notation:

Selecting Candidate

2) Voting the Candidate:


After choosing a candidate, the voter votes the candidate by using voting system. To vote the
voter first enters his details and login with his identification number. The system then checks the id and
allows the voter to vote the candidate and sends confirmation to user.

UML notation:

Voting candidate

22
BUILDING REQUIREMNTS MODEL THROUGH USE-CASE DIAGRAM

USE-CASE DIAGRAM
Definition: A Use-case diagram graphically represents system behavior (use cases). These diagrams present a
high level view of how the system is used as viewed from an outsider’s (actor’s) perspective. A use-case
diagram may contain all or some of the use cases of a system.

Association Relationship:
An association provides a pathway for communication. The communication can be between use cases,
actors, classes or interfaces. Associations are the most general of all relationships and consequentially the most
semantically weak. If two objects are usually considered independently, the relationship is an association.
Associations are of two types
1) Uni-directional association.
2) Bi-directional association.

Graphical Depiction
An association relationship is an orthogonal or straight solid line with an arrow at one end:
In An Association Relationship, we can provide Stereotype COMMUNICATE also as shown below

<<communicate>>

Admin Voting candidate

23
USE CASE DIAGRAM FOR ONLINE VOTING SYSTEM

Admin

Login

Add
Candidate

View
Candidate

View
Voter

Admin

Result
Graph

Logout

24
USE CASE DIAGRAM FOR ONLINE VOTING SYSTEM

Voter

Register

Login

Vote

Voter

Logout

25
Use case description for Login to System
Case for Voting System:
 Voting System Startup Use Case: The system is started up when the operators turns the switch on the
panel to the "on" position. If the welcome screen appears then the machine can begin servicing - ending
when the operator turns the switch to the "off" position.

 Administrator Voting System Use Case: The administrator session begins when the admin enters a
valid username and password. If the username or password are invalid, an error screen is displayed, and
no session is started. The administrator is allowed to perform one or more tasks, choosing the task each
time from a menu of options. The session will initiate the appropriate task. After each successful task the
administrator is asked if he/she would like to perform another task. If the task fails for any reason, an
error screen is displayed and the user is asked if he/she would like to perform another task. When the
administrator is finished with the session, the session is closed.

 Administrator Create Voting Use Case: An administrator selects the create election task from the
session options list. The administrator is presented with a series of choices: What is the scope of the
election (national, state, local). When is the election to be held (single day, length of time). Proper error
handling will be done, dates will be checked and if a date is invalid the user must enter a new date or
exit. After all questions are answered satisfactorily, the administator is asked if he/she would like to save
the changes. If the admin answers "no", the election is discarded. If the answer is "yes" the election is
saved. The admin is then returned to the administrator session.

 Administrator Add/Delete Candidate Use Case: An administrator selects the add/delete candidate
task from the administrator session options list. The administrator then selects the appropriate election to
add/remove a candidate. The admin then selects if he/she wants to add or remove a candidate. If add is
selected, the user is then asked to enter the name and personal information about the candidate. If delete
is selected the admin is presented with a list of candidates to delete. The admin selects the desired
candidate to be deleted and presses 'ok', otherwise pressing 'cancel' to not delete anybody. When
completed the admin is asked if he/she would like to save the changes, If the admin answers "no", the
changes are discarded. if the answer is "yes" the changes are saved. The admin is then returned to the
administrator session.

 Administrator Manage Voters Use Case: An administrator selects the manage task from the
administrator session options list. The administrator then selects the appropriate election to manage the
voters. The admin is presented with a list of voters which can be managed for this election. The admin
selects the voter to manage, and then updates the voter's attributes (such as if he/she can vote in the
electoral college, etc.). If the task fails for any reason, an error screen is displayed and the admin is
asked if he/she would like to perform the task again, continuing until the task completes or the admin
cancels the task. If completed the admin is asked if he/she would like to save the changes, If the admin
answers "no", the changes are discarded. if the answer is "yes" the changes are saved. The admin is then
returned to the dministrator session.

26
 Administrator Report Results Use Case: An administrator selects the report results task from the
administrator session option list. The administrator chooses what election he/she would like to report
the results for, only elections that are completed will be selectable. The system then report's the results
for the specified election. If the report fails, an error screen is displayed to the administrator, the
administrator has the option of attempting to run the report again, or exiting the task. If exit task is
chosen, the task is ended and the administrator is returned to the administrator session. If the report is
successful, the administrator is presented with the results. The results can be used in the update
documents use case. The task is ended and returned to the administrator session.

 Administrator Manage Administrators Use Case: An administrator selects the manage candidate
task from the administrator session options list. The admin then selects if he/she wants to add or remove
an administrator. If add is selected, the user is then asked to enter the name and personal information
about the administrator. If delete is selected the admin is presented with a list of administor to delete.
The admin selects the desired administrator to be deleted and presses 'ok', otherwise pressing 'cancel' to
not delete anybody. When completed the admin is asked if he/she would like to save the changes, If the
admin answers "no", the changes are discarded. if the answer is "yes" the changes are saved. The admin
is then returned to the administrator session.

 Administrator Set Voting Policy Use Case: An administrator selects the set voting policy task from
the administrator session options list. The administrator then selects the appropriate election to set the
voting policy. The admin must choose the new voting policy (single day, length of time). Proper error
handling will be done, dates will be checked and if a date is invalid the user must enter a new date or
exit. If the task fails for any reason, an error screen is displayed and the admin is asked if he/she would
like to perform the task again, continuing until the task completes or the admin cancels the task. If
completed the admin is asked if he/she would like to save the changes, If the admin answers "no", the
changes are discarded. if the answer is "yes" the changes are saved. The admin is then returned to the
administrator session.

 Voter Session Use Case: The voter session begins when the voter enters a valid social security number,
voter id number, and password. If the information entered is not valid (i.e. there is no registered user
with that information) an error screen is displayed and the user is asked to enter the information again,
or register. If the information is correct, the voter session begins and the voter is allowd to chooose one
or more tasks from a menu of options (if the voter is actually a electorate voter, he/she will have a
greater list of options). The session will initiate the appropriate task. After each successful task, the
voter is asked if he/she would like to perform another task. If the task fails for any reason, an error
screen in displayed and the voter is returned to the last "valid" state, at which point he can continue with
his current task. If the task fails a number of times, the task is ended, and error screen is displayed, and
the voter is asked if he/she would like to perform another task. If the task is successful, the voter is
asked if he/she would like to perform another task. This continues until the voter declares that he/she is
done, at which point the voter session is ended.

27
8)DATA FLOW DIAGRAMS:

 0Level DFD For Online voting System

Voting
Management

Candidate Voter
Management Management

ONLINE VOTING
SYSTEM

Party
Management Voter List
Management

Position
Management

Zero Level Data Flow Diagram – Online Voting System

28
 Level 1 DFD For Online Voting System

Registration
Process
Voter

Registering Database
Database
Voter

Add voter Voting


Process
Update Voter
Details

Admin
View All
Voters

Managing
Voters

First1 Level Data Flow Diagram – Online Voting System

29
 Level 1 DFD For Online Voting System

Manage Vote Details

Login To Check
Admin System Roles Of Manage Candidate Details
Access

Manage Voter List Details


Check Manage
Credentials Modules

Manage Voting Details

Manage Position Details

Manage Party Details

2 Level
Second Data
Level Flow
Data Diagram
Flow – Online
Diagram – Online
Voting System
Voting System

30
9. SAMPLE PROTOTYPE FOR APPLICATION

Prototype for Voting Page:

ONLINE VOTING SYSTEM

Voting Code
Input Voting code………

Submit

Admin Login page:


ONLINE VOTING SYSTEM

LOGIN
UserName
Input UserName

Password
Input password

Submit

31
Managing Candidates:

Candidates
Add Candidates

Image Voter Id Full Name Party Candidate Position Election Date Update Delete

Positions:

Candidates Position
Add Position

Position Name Shor Order Votes Allowed Allow Per Party Update Delete

32
Partys:

Available Parties
Add Party

Party Initial Party Name Election Date Update Delete

Voters:
Voter List Add Voter

ID No Full Name Course Year Level Voting Code Vote Status Update Delete

33
Managing Details Of Admin:

Admin Add Admin

Username Last Name First Name Middle Name Update Delete

Admin Admin Admin Admin

Managing Admin Account:

Change Password

Old Password
Old Password

New Password Retype NewPassword

New Password

34
10.ACTIVITY DIAGRAM
Login Activity Diagram Of Online Voting System:
This is the Login Activity Diagram of Online Voting System, which shows the flows of Login Activity,
where admin will be able to login using their username and password. After login user can manage all the
operations on Citizen, Register,Candidate, Result. All the pages such as, Candidate, Result are secure and user
can access thes page after login. The diagram below helps demonstrate how the login page works in a E-
Voting Management System. The various objects in the Candidate, Citizen, Register,and Result page-interact
over the course of the Activity, and user will not be able to access this page without verifying their identity.
synchronization bars. In the UML, activities are represented as rectangles with rounded edges, transitions are
drawn as directed arrows, decision points are shown as diamonds, and synchronization bars are drawn as thick
horizontal or vertical bars as shown in the following.

There are special symbols that are used to show the starting and final activities in a workflow. The
starting activity is shown using a solid filled circle and the final activities are shown using a bull’s eye.
Typically, there is one starting activity for the workflow and there may be more than one ending activity (one
for each alternate flow in the workflow).
a workflow in an activity diagram can be done several ways; however, the following steps present

1. Identify a workflow objective. Ask, “What needs to take place or happen by the end of the
workflow? What needs to be accomplished?” For example, if your activity diagram models the
workflow of ordering a book from an online bookstore, the goal of the entire workflow could be
getting the book to the customer. Modeling Decide the pre and post-conditions of the workflow
through a start state and an end state. In most cases, activity diagrams have a flowchart structure
so start and end states are used to designate the beginning and ending of the workflow. State and
end states clarify the perimeter of the workflow.
2. Define and diagram any objects that are created or modified within your activity diagram. Connect
the objects and activities with object flows.
3. Decide who or what is responsible for performing the activities and states through swim lanes.
Name each swim lane and place the appropriate activities and states within each swim lane.
4. Connect all elements on the diagram with transitions. Begin with the “main” workflow.

5. Place decisions on the diagram where the workflow may split into an alternate flow. For example,
based on a Boolean expression, the workflow could branch to a different workflow.
6. Evaluate your diagram and see if you have any concurrent workflows. If so, use synchronizations
to represent forking and joining.
7. Set all actions, triggers and guard conditions in the specifications of each model element

35
ACTIVITY DIAGRAM FOR ADMIN LOGIN:

Start

Admin is Registered

Admin
Login ID and Password

Check
Login ID Invalid
Password Login/Password

Login to the System


Successfully

Set Userlevel And


Permissions

Access the Internal


Functionalities
According to Permission
End

36
ACTIVITY DIAGRAM FOR PHARMACY MANAGEMENT SYSTEM:

Login into the


Online Voting System
Start

Check use level and


Permissions

Check Check
Check
Permission Check Permission Permission
Permission

Manage Voting Manage Register Manage Candidate Manage Pooling

Logout from the


System
End

Activity
ActivityDiagram
Diagramfor
forOnline
Onlinevoting
votingSystem
System

37
11.CLASS DIAGRAMS

A class diagram is a picture for describing generic descriptions of possible systems. Class diagrams and
collaboration diagrams are alternate representations of object models. Class diagrams contain classes and
object diagrams contain objects, but it is possible to mix classes and objects when dealing with various kinds
of metadata, so the separation is not rigid.

class diagrams are more prevalent than object diagrams. Normally you will build class diagrams plus
occasional object diagrams illustrating complicated data structures or message-passing structures.

Class diagrams contain icons representing classes, interfaces, and their relationships. We can create one or
more class diagrams to depict the classes at the top level of the current model; such class diagrams are
themselves contained by the top level of the current model. We can also create one or more class diagrams to
depict classes contained by each package in your model; such class diagrams are themselves contained by the
package enclosing the classes they depict; the icons representing logical packages and classes in class
diagrams. We can change properties or relationships by editing the specification or modifying the icon on the
diagram. The associated diagrams or specifications are automatically updated.

Classes may be of 3 types. They are:


1. Entity class
2. Boundary class
3. Control class

 Entity class: An entity class models information and associated behavior that is generally long live.

 Boundary Class: They handle the communication between the systems. They can provide the
interface to the user or another system.
Ex: Registration form.
 Control Class: Control class model sequencing behavior specific to one or more use-cases. You can
think of control class as running or executing the use-case i.e., they represent the dynamics of the use-
case.
Ex: Registration Manager.

38
CLASS DIAGRAM FOR ONLINE VOTING SYSTEM

39
12.SEQUENCE DIAGRAM

A sequence diagram is a graphical view of a scenario that shows object interaction in a time-based sequence-
what happens first, what happens next. Sequence diagrams establish the roles of objects and help provide
essential information to determine class responsibilities and interfaces. A sequence diagram has two
dimensions: the vertical dimension represents time; the horizontal dimension represents different objects. The
vertical line is called the object's lifeline. The lifeline represents the object's existence during the interaction.
This form was first popularized by Jacobson. An object is shown as a box at the top of a dashed vertical line. A
role is a slot for an object within a collaboration that describes the type of object that may play the role and its
relationships to other roles. However, a sequence diagram does not show the relationships among the roles ort
eh association among the objects. An object role is shown as a vertical dashed line, the lifeline.
Each message is represented by an Arrow between the lifelines of two objects. The order in which these
messages occur is shown top to bottom on the page. Each message is labeled with the message name. The
label also can include the argument and some control information and show self-delegation, a message the
argument and some control information and show self-delegation, a message that an object sends to itself, by
sending the message arrow back to the same lifeline. The horizontal ordering of the life lines is arbitrary.
Often, call arrows are arranged to proceed in one direction across the page, but this is not always possible and
the order conveys no information.
The sequence diagram is very simple and has immediate visual appeal--- this is its great strength. A sequence
diagram is an alternative way to understand the overall flow of the control of a program. Instead of looking at
the code and trying to find out the overall sequence of behavior.
The following tools located on the sequence diagram toolbox which enable to model sequence diagrams:
 Object: An object has state, behavior, and identity. The structure and behavior of similar objects are
defined in their common class. Each object in a diagram indicates some instance of a class. An object that
is not named is referred to as a class instance.
 Message Icons: A message icon represents the communication between objects indicating that an
action will follow. The message icon is a horizontal, solid arrow connecting two lifelines together.
 Focus of Control: Focus of Control (FOC) is an advanced notational technique that enhances
sequence diagrams. It shows the period of time during which an object is performing an action, either
directly or through an underlying procedure.
 Message to Self: A Message to Self is a tool that sends a message from one object back to the same
object. It does not involve other objects because the message returns to the same object. The sender of a
message is the same as the receiver.
 Note: A note captures the assumptions and decisions applied during analysis and design. Notes may
contain any information, including plain text, fragments of code, or references to other documents.
 Note Anchor: A note anchor connects a note to the element that it affects.

40
41
13. ENTITY RELATIONSHIP DIAGRAMS

Entity Relationship Diagram


 An entity relationship diagram (ERD) shows the relationships of entity sets stored in a database.
 An entity in this context is a component of data.
 In other words, ER diagrams illustrate the logical structure of databases.
 At first glance an entity relationship diagram looks very much like a flowchart. It is the
specialized
 symbols, and the meanings of those symbols, that make it unique.

Database design: ER diagrams are used to model and design relational databases, in terms of logic and
business rules (in a logical data model) and in terms of the specific technology to be implemented (in a
physical data model.) In software engineering, an ER diagram is often an initial step in determining
requirements for an information systems project. It’s also later used to model a particular database or
databases. A relational database has an equivalent relational table and can potentially be expressed that way as
needed.

Database troubleshooting: ER diagrams are used to analyze existing databases to find and resolve problems
in logic or deployment. Drawing the diagram should reveal where it’s going wrong.

42
43
Database Design

44
Database design

It is the organization of data according to a database model. The designer determines what data must be

stored and how the data elements interrelate. With this information, they can begin to fit the data to the

database model..

Database designs also include ER (entity–relationship model) diagrams. An ER diagram is a diagram that

helps to design databases in an efficient way.Attributes in ER diagrams are usually modelled as an oval

with the name of the attribute, linked to the entity or relationship that contains the attribute.

ER models are commonly used in information system design; for example, they are used to describe

information requirements and / or the types of information to be stored in the database during the

conceptual structure design phase.

Online Voting system consists a database with name “evoting” ,which contains 10 tables:

tbladmin table: It stores the details of the admin.

tblcandidate table: It stores the details of the candidate

45
tblcandidateposition table:It stores the details of the candidate position.

tblcourse table: It stores the details of the courses.

tblparty table: It stores the details of the party.

tblstudent table: It stores the details of the student.

tblvotes table: It stores the details of the student.

46
tblvotestatus table :It stores the details of the vote status

tblyearlevel table: It stores the details of the year level of the students.

tbl_election_date table: It stores the details of the election date

47
CODING

48
Votepage.php

<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<?php include '../shared/alert.php'; ?>
<?php require '../session.php'; ?>
<?php
require '../process/config.php';
date_default_timezone_set('Asia/Manila');
$config = new Config();
$conn = $config->getConnection();
$sql = "select * from tbl_election_date order by election_date desc";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$latestElection = $response[0]['election_date_id'];
$latestElectionDate = $response[0]['election_date'];
$query->close();
$sql = "select p.*,ed.* from tblparty as p
INNER JOIN tbl_election_date as ed ON p.party_election_date_id = ed.election_date_id
INNER JOIN tblcandidate as c on p.id = c.partyid
where p.party_election_date_id = ".$latestElection."
group by p.id";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$partyStraight = '';
foreach($response as $p) {
$partyStraight = $partyStraight.'
<div class="col-lg-4 col-md-4 col-sm-12 col-xl-4">
<div class="partyStraight m-2" onclick="voteStraight('.$p['id'].')">
'.$p['partyname'].'
</div>
</div>';
}
$dd = date('Y-m-d');
$sql = 'select * from tbl_election_date where election_date = "'.$dd.'"';
$qry= mysqli_query($conn, $sql);
$elec_date = mysqli_fetch_all($qry,MYSQLI_ASSOC);
$datee = isset($elec_date[0]['election_date']) ? date('M d, Y',
strtotime($elec_date[0]['election_date'])) : 'No Election Date Set';
$cannot_vote = isset($elec_date[0]['election_date']) ? true : false;

49
?>
<body>
<style>
body{
background-color: whitesmoke;
margin:0px;
padding:0px;
overflow-x:hidden;
opacity: 1;

}
.header-card {
padding:10px;
background-color: deepskyblue;
border-radius:25px;
}
.checked {
display:block;
color: gray;
}
.radio-wrapper{style="background-color:primary !important"
width:40px;
}
.radio{
border-style: solid;
border-width: 1px;
border-color: transparent;
margin-top: 10px;
border-radius:100%;
cursor: pointer;
margin-right:10px;
box-shadow: -1px 1px 4px black;
}
.radio:hover {
box-shadow: 0 0 2px dodgerblue;
}
.candidate-name p{
padding:0px;
margin: 0px;
}
.candidate {
border-radius:15px;
padding:5px;

50
padding-bottom:0px;
margin-top:40px;
transition: 1s;
opacity:0;
will-change: transform;
}
.candidate-img {
padding:7px;
}
.candidate-img img {
border-radius:100%;
}
.check{
margin:5px;
color:#444444;
opacity:0;
transition:0.5s;
transform:scale(0);
transition-timing-function: cubic-bezier(0.1, 0.4 , 0.3, 1.8);
}
.check.checked{
opacity:1;
transform:scale(1);
color: dodgerblue;
}

.next-prev {
position: fixed;
bottom: 20px;
right:10px;
width:100%;
text-align: right;

}
.next-prev button {
min-width:120px;
border-radius: 5px;
height:30px;
border-style: none;
box-shadow: -2px 2px 4px gray;
background-color: white;

51
color: dodgerblue;
transition: 1s;
margin-left:5px;
margin-right:5px;
cursor: pointer;
height:40px;
font-weight: bold;
}
.next-prev button:hover {
background-color:white;
}
.disabled-button{
pointer-events: none;
opacity: 0.4;
}
.hide-button{
display: none;
}
#studentCode{
width:100%;
height:100%;
position: fixed;
z-index:888;
background-image:url("https://www.siggraph.org/wp-content/uploads/2022/04/vote- siggraph-
elections.jpg");
background-size:100%;
transition: 0.5s;
}
.student-code{
padding:5px;
}
#studentCode h1 {
margin-top:40%;
}

.showzz {
position:fixed;
top:10px;
right:10px;
font-size:25px;

52
color:white;
z-index:9999;
color:white;
cursor:pointer;
text-shadow:0px 0px 9px white;
box-shadow: 0 0 4px white;
width:50px;
height:50px;
text-align:center;
border-radius:100%;
border-style:none;
background-color:transparent;
}
.showzz:hover {
background-color:white;
text-shadow: 0 0 9px gray;
outline-style:none;
}
.graph {
right: 70px;
}
#RealTimeChart {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:white;
z-index:10000;
overflow-y:auto;
transition:1s;
opacity:0;
display:none;
}
#RealTimeChart.showw {
opacity:1;
}
#RealTimeChart .closez{
position: absolute;
right:10px;
top:10px;
border-radius:8px;

53
background-color:transparent;
color:white;
width:30px;

height:30px;
font-size:20px;
border-radius:100%;
border-style:none;
box-shadow: 0 0 4px crimson;
text-shadow: 0 0 9px crimson;
cursor:pointer;
}
#RealTimeChart .closez:hover {
background-color:crimson;
}
.realtime-content {
}
#voteStraight {
position:fixed;
top:5px;
right:10px;
font-size:1.1em;
padding:8px;
border-radius:5px;
border-style:none;
font-weight:bold;
cursor:pointer;
background-color:dodgerblue;
color:#fff;
}
#voteStraight:hover {
background-color:white;
color:dodgerblue;
}
.partyStraight {
padding:10px;
border-radius:10px;
cursor: pointer;

54
text-align:center;
padding-top:15px;
padding-bottom:15px;
font-weight:bold;
background-color:white !important;
box-shadow: -2px 2px 4px gray !important;
}
.partyStraight:hover{
box-shadow: 0 0 9px dodgerblue;
color:dodgerblue;
}
#candidatePositionName {
font-size: 1.5em;
margin-top:10px;
color: #fff !important;
}
#candidateWrapper {
margin-bottom:80px;
}
#electionDate {
position: fixed;
bottom:10px;
left:10px;
z-index: 999;
padding: 10px;
border-radius: 5px;
border-radius: 5px;
background-color:white !important;
}
.disabled-page {
}
#logo {
position:fixed;
top:30px;
left:30px;
z-index: 999;
}
</style>
<h5 id='electionDate'>Election Date: <small><?php echo $datee; ?></small> </h5>

55
<div class="modal fade" id="voteStraightModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header bg-primary text-white">


<h4 class="modal-title">Select Party</h4>
<button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
</div>

<div class="modal-body">
<div class='row justify-content-center' data-dismiss="modal">
<?php echo $partyStraight; ?>
</div>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
<div id="studentCode">
<button class="showzz" onclick="window.location='../admin/';"><i class="fa fa-
user"></i></button>
<button class="showzz graph" onclick="graph('show')"><i class="fa fa-bar-chart"></i></button>
<div class="row justify-content-center">
<img src="../imgs/logo.png" width="200px" height="200px" id="logo">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h1 class="text-center text-white">Online Voting System</h1>
<div class="card student-code">
<div class="d-flex flex-row">
Voting Code <?php echo !$cannot_vote ? '<span class="text-warning">(Not Available)</span>' : ''
?></div>
<input class="form-control" type="text" placeholder="Input Voting Code..."
id="votingCodeInput" <?php echo !$cannot_vote ? 'disabled' : ''; ?>>
<button class="btn btn-primary btn-block mt-2"

onclick="submitVotingCode()">Submit</button>
</div>

56
<div class="p-1 bg-primary disabled-page">
<h1 id="candidatePositionName" class="text-white"></h1>
</div>
<div class="row justify-content-center ml-1 mr-1" id='candidateWrapper'>
</div>
<div class='next-prev'>
<button onclick="prev();" id="prev">Previous</button>
<button onclick="next();" id="next">Next</button>
<button onclick="sumbitVote();" class='hide-button' id="submitBtn">Submit</button>
</div>

<div id="RealTimeChart">
<button class="closez" onclick="graph('close')"><i class="fa fa-close"></i></button>
<div class="realtime-content">
<?php include('live.php'); ?>
</div>
</div>
<?php include '../shared/foot.php'; ?>
</body>
<script type="text/javascript">
function graph(req) {
if(req == 'show') {
RealTimeChart.style.display= 'block';
window.setTimeout(()=>{
RealTimeChart.classList.add('showw');
timer = true;
displayz();
},10);
} else {
RealTimeChart.classList.remove('showw');
timer = false;
window.setTimeout(()=>{
RealTimeChart.style.display= 'none';
},600);

}
}
let targetPosition = 0;
let candidates = [];

57
let votes = [];
let id = "";
function getCandidate() {
$.ajax({
method:'GET',
url:'../process/CandidateRoutes.php',
data:{candidate:'candidate_vote',election_id:'<?php echo $latestElection; ?>'},
success: (e)=> {
studentCode.style.opacity = "0";
studentCode.style.pointerEvents = "none";
candidates = JSON.parse(e);
getPosition(JSON.parse(e));
}
})
}
function submitVotingCode() {
let voteCode = $("#votingCodeInput").val();
if(voteCode !== ""){
$.ajax({
method: 'GET',
url: '../process/vote_process.php',
data:{checkIfVoted:123,data:voteCode,election_id:'<?php echo $latestElection; ?>'},
success: function(e){
let data = JSON.parse(e);
$("#votingCodeInput").val('');
id = String(data['data']);
if(data['status']=="success"){
alertService.alert({
response:data['status'],
message: data['message']
});
voteLogin();
} else {
alertService.alert({
response:data['status'],
message: data['message']

});
}
},

58
alert(e);
}
});
}
}
function voteLogin(){
getCandidate();
setTimeout(()=>{
studentCode.style.pointerEvents = "none";
},500);
}
function getPosition(_candidate) {
let curPositionName = '';
$.each(_candidate, (index, value) => {
if(curPositionName != value.positionname) {
curPositionName = value.positionname;
positionGroup.push({positionName:value.positionname,votesAllowed:value.votesallowed});
}
});
displayCandidate();
disable_enable_prev_next();
}
function prev(){
if(targetPosition > 0) {
targetPosition--;
displayCandidate();
}
disable_enable_prev_next();
}

function next(){
if(targetPosition < positionGroup.length-1) {
targetPosition++;
displayCandidate();

}
disable_enable_prev_next();
}

function disable_enable_prev_next() {
if(targetPosition <= 0) {

59
document.getElementById('prev').classList.add('disabled-button');
} else {
document.getElementById('prev').classList.remove('disabled-button');
}
if(targetPosition >= positionGroup.length-1) {
document.getElementById('next').classList.add('disabled-button');
document.getElementById('next').classList.add('hide-button');
submitBtn.classList.remove('hide-button');
} else {
document.getElementById('next').classList.remove('disabled-button');
document.getElementById('next').classList.remove('hide-button');
submitBtn.classList.add('hide-button');
}
changeHeaderLabel();
}

function votesAllowed_1(element_id, candidate_id) {


const id = votes.find(vote => {
if(vote.candidate_id == candidate_id && vote.positionName ==
positionGroup[targetPosition].positionName) {
return true;
}
});
if(!id){
uncheckAllFirst(element_id);
votes = votes.filter(vote => vote.positionName !=
positionGroup[targetPosition].positionName);

votes.push({candidate_id:candidate_id,positionName:positionGroup[targetPosition].positionNa
me});
} else {
votes = votes.filter(vote => vote.candidate_id != candidate_id);
}
checkRadioButton(element_id);

function votesAllowed_more(element_id, candidate_id) {


const id = votes.find(vote => {
if(vote.candidate_id == candidate_id && vote.positionName ==
positionGroup[targetPosition].positionName) {
return true;

60
});
if(id === undefined){
const voteSelected = votes.filter(vote => vote.positionName ==
positionGroup[targetPosition].positionName);
if( positionGroup[targetPosition].votesAllowed > voteSelected.length){

votes.push({candidate_id:candidate_id,positionName:positionGroup[targetPosition].positionName});
checkRadioButton(element_id);
}else {
let position_name = positionGroup[targetPosition].positionName;

if (position_name[position_name.length-1].toLowerCase() != 's'){
position_name = position_name + 's';
}
alertService.alert({
response:'failed',
message:`You can only select ${positionGroup[targetPosition].votesAllowed}
${position_name}`
})
}
} else {
votes = votes.filter(vote => vote.candidate_id != candidate_id);
checkRadioButton(element_id);
}
}

function checkUncheck(element_id, candidate_id) {


if(parseInt(positionGroup[targetPosition].votesAllowed) == 1) {
votesAllowed_1(element_id, candidate_id);
} else {
votesAllowed_more(element_id, candidate_id);
}
}

function uncheckAllFirst(element_id) {
const elements = document.getElementsByClassName('check');
$.each(elements, (index, element) => {
element.classList.remove('checked');
});
}

61
function alreadyCheckChecker(element_id, candidate_id) {
if(votes.find(vote => vote.candidate_id == candidate_id)) {
checkRadioButton(element_id);
}
console.log(candidate_id,votes);

function checkRadioButton(element_id) {

document.getElementById(element_id).getElementsByTagName('i')[0].classList.toggle('checked');
}

function sumbitVote() {
if(votes.length > 0){
if(confirm('Are you sure you want to submit your vote?')){
let data = new FormData();
$.each(votes, (index,vote) => {
data.append('candidate[]',vote.candidate_id);
});
data.append('id', id);
$.ajax(
{
url: '../process/VoteRoutes.php',
method: 'POST',
data: data,
processData: false,
contentType: false,
cache: false,
success: (e) => {
voteStatusSend();
votes = [];
targetPosition = 0;
positionGroup = [];

id="";
alertService.alert({
response: e,
message: 'Your votes has been submitted! Thank you!'
});

62
studentCode.style.pointerEvents = "all";
studentCode.style.opacity = "1";
}, 2000)
}
}
)
}
} else {
alertService.alert({
response:'failed',
message:'Cast your vote first before submitting!'
})
}
}

function voteStatusSend(){
$.ajax({
method: 'GET',
url: '../process/vote_process.php',
data:{submitVote:123,id:id,election_id:'<?php echo $latestElection; ?>'},
success: function(e){
},
error: function(e){
alert(e);
}
});
}

function changeHeaderLabel() {
$('#candidatePositionName').html(positionGroup[targetPosition].positionName+'

['+positionGroup[targetPosition].votesAllowed+']');
}

function displayCandidate() {
changeHeaderLabel();
const filteredCandidates = candidates.filter( candidate => candidate.positionname ==

63
$.each(filteredCandidates, (index, candidate) => {
let image = '../person.png';
if(candidate.image != '') {
image = '../imgs/'+candidate.image;
}
$('#candidateWrapper').append(
` <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class='candidate card' id="candidate_${candidate.id}">
<div class="d-flex flex-row">
<div class="candidate-img"><img src="${image}" width="40" height="40"></div>
<div class="flex-grow-1 text-center candidate-name">
<p class="font-weight-bold">${candidate.lastname.toUpperCase()},
${candidate.firstname.toUpperCase()}</p>
<p style="color:gray">${candidate.partyname.toLowerCase()}</p>
</div>
<div class="radio-wrapper">
<div class="radio" id="check${candidate.id}"
onclick="checkUncheck('check${candidate.id}',${candidate.id})">
<i class="fa fa-check check"></i>
</div>
</div>
</div>
</div>
</div>
</div>`
);
alreadyCheckChecker('check'+candidate.id,candidate.id);
window.setTimeout(() => {
document.getElementById('candidate_'+candidate.id).style.opacity="1";

document.getElementById('candidate_'+candidate.id).style.transition= (0.5*(2+index))+'s';
}, 100);
});
}
function voteStraight(id) {
if(!confirm('Are you sure you want to Select it?')) {
return false;
}
votes = new Array();

64
V candidates.forEach(candidate => {
if(candidate.p_id == id) {
votes.push({candidate_id:candidate.id,positionName:candidate.positionname});
if(positionGroup[targetPosition].positionName == candidate.positionname) {
alreadyCheckChecker(`check${candidate.id}`,candidate.id)
}
}
});
sumbitVote();
$('#voteStraightModal').modal('hide');
}
</script>
</html>
<?php
if(isset($_SESSION['status'])){
$login = $_SESSION['status'];
$idno = $_SESSION['id'];
echo "<script>
id = ".$idno."
voteLogin();
</script>";
}
?>

65
admin.php
<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-9 col-lg-9 col-xl-9">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl-left">Admin</h1>
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
<button class="btn btn-primary btn-block" onclick="openModal(null,null)">Add
Admin</button>
</div>
</div>
<table class="table" id="table">
<thead>
<tr>
<th>Username</th>
<th>Last Name</th>
<th>First Name</th>
<th>Middle Name</td>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>justimagine09</td>
<td>Dejaresco</td>
<td>John Froi</td>
<td>Adera</td>
<td class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#addUpdate">
<i class="fa fa-edit"></i>
</button></td>
<td class="text-center"><button class="btn btn-danger"><i class="fa fa-
remove"></i></button></td>

</tr>
</tbody>

66
</table>
</div>

<div class="modal fade" id="addUpdate">


<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<div class="modal-body">
<form id='addForm'>
<input type="hidden" name="admin_id" id="admin_id" value=''>
<input type="hidden" id="request" name="request" value="add">
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName"
placeholder="Input First Name" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="middleName">Middle Name</label>
<input type="text" name="middleName" class="form-control" id="middleName"
placeholder="Input Middle Name" required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6" id="lastNameDiv">


<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" class="form-control" id="lastName"
placeholder="Input Last Name" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6 account">
<div class="form-group">
<label for="userName">Username</label>
<input type="text" name="userName" class="form-control" id="userName"
placeholder="Input username" required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6 account">

67
<div class="form-group">
<label for="password">password</label>
<input type="password" name="password" class="form-control" id="password"
placeholder="Input password" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6 account">
<div class="form-group">
<label for="retypePassword">Retype Password</label>
<input type="password" name="retypePassword" class="form-control"
id="retypePassword" placeholder="Input Retype Password" required>
</div>
</div>
<div class="col-12" id="alertMessage">
</div>
</div>
</div>

<div class="modal-footer">
<input type="submit" class="btn btn-primary" name="add">
</div>
</form>
</div>
</div>
</div>
<script>
addForm.addEventListener('submit',(e) => {
e.preventDefault();
if(confirm('Are you sure you want to submit it?')){
if(admin_id.value.trim() !== ''){
update();
} else {
add();
}
}
},false);
function add(){
if(password.value !== retypePassword.value) {
alertService.alert({response:'error',message:'Incorrect Retype Password!'});
} else {
const data = $('#addForm').serializeArray();
$.ajax({
url:'../process/AdminRoutes.php',
method:'POST',
data:data,
success:(e)=>{

const message = e == ' Failed' ? 'Failed to add new Admin!' : 'Successfully added new Admin!';

68
alertService.alert({
response:e,
message:message
});
if(e===' Success'){
fetchAll();
addForm.reset();
$('#addUpdate').modal('hide');
}
}
});
}
}
function update(){
const data = $('#addForm').serializeArray();
$.ajax({
url:'../process/AdminRoutes.php',
method:'POST',
data:data,
success:(e)=>{
const message = e == ' Failed' ? 'Failed to update new Admin!' : 'Successfully update new
Admin!';
alertService.alert({
response:e,
message:message
});
if(e==' Success'){
fetchAll();
addForm.reset();
$('#addUpdate').modal('hide');
}
}
});
}
function deleteAdmin(id){

deleteService.request({id:id,method:'POST',url:'../process/AdminRoutes.php',isset:'delete',complete:(e)=>{
const message = e.toLowerCase() == ' success' ? 'Successfully deleted!' : 'Failed to Delete!';
alertService.alert({response:e,message:message});
if(e.toLowerCase() == ' success'){
deleteService.close();
fetchAll();

}
}});
}
window.onload=()=>{

69
fetchAll();
};
function fetchAll(){
const data={request:'fetchAll'};
$.ajax({
url:'../process/AdminRoutes.php',
method:'POST',
data:data,
success:(e)=>{
const json=JSON.parse(e);
let tr = [];
for(let x=0;x<json.length;x++){
const dataForUpdate =
JSON.stringify({admin_id:json[x].admin_id,fname:json[x].fname,mname:json[x].mname,lname:json[x].lname
});
tr.push(
[
`<tr>
<td>${json[x].username}</td>
<td>${json[x].lname}</td>
<td>${json[x].fname}</td>
<td>${json[x].mname}</td>
<td class="text-center">
<button class="btn btn-success"
onclick='openModal(${json[x].admin_id},${dataForUpdate})'>
<i class="fa fa-edit"></i>
</button></td>
<td class="text-center"><button class="btn btn-danger"
onclick='deleteAdmin(${json[x].admin_id})'><i class="fa fa-trash"></i></button></td>
</tr>`
].join('')
);
}
tbody.innerHTML="";
tbody.innerHTML=tr.join('');
$("#table").DataTable();
}
});
}
function openModal(id,dataForUpdate){
if(id === null){

for(const el of document.getElementsByClassName('account')){
addForm.reset();
el.style.display="block";
el.getElementsByTagName('input')[0].required=true;

70
}
lastNameDiv.setAttribute('class','col-lg-6 col-md-6 col-xl-6');
request.value='add';
}else{
for(const el of document.getElementsByClassName('account')) {
el.style.display="none";
el.getElementsByTagName('input')[0].required=false;
}
request.value="update";
admin_id.value = dataForUpdate.admin_id;
firstName.value=dataForUpdate.fname;
middleName.value=dataForUpdate.mname;
lastName.value=dataForUpdate.lname;
lastNameDiv.setAttribute('class','col-12');
}
$("#addUpdate").modal('show');
}
</script>
<?php include '../shared/foot.php'; ?>
<?php include '../shared/alert.php'; ?>
<?php include '../shared/delete.php'; ?>
</body>
</html>

71
Dashboard.php
<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
require '../process/config.php';
$config = new Config();
$conn = $config->getConnection();
$sql = "select * from tbl_election_date order by election_date desc";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$yearOpt = '';
foreach($response as $row) {
$yearOpt = $yearOpt.'<option value="'.$row['election_date_id'].'">'.(date('M d,
Y',strtotime($row['election_date']))).'</option>';
}
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<style>
.candidates-position{
margin-left:10px;
border-radius:5px;
}
.percentage{
border-radius:5px;
padding:4px;
color:white;
transition: 2s;
transform: scaleX(0);
transform-origin:left;
}
.graphWrapper {

box-shadow: 0 0 2px gray;


border-radius:5px;
background-color: gray;
}
.icon {
font-size: 60px;
}
.flex-card {
width:240px;
}
#printTarget {
display:none;
}
</style>

72
<style media='print'>
.not-print, .container-fluid, .modal {
display:none;
}
#printTarget{
display:block;
}
.table {
width:98%;
margin:auto;
border-collapse: collapse;
}
.table th,
.table td {
border-style:solid;
border-width:1px;
border-color:gray;
padding:4px;
}
</style>
<body>
<div id="printTarget">
<center><h2><span id='printTitle'>Winners</span> (<span id="dateHolder"></span>)</h2></center>
<table class="table">
<thead>
<tr id="printTr">

</tr>
</thead>
<tbody id="printBody">
</tbody>
</table>
</div>

<div class='not-print'>

<?php include '../shared/navigation.php'; ?>


<div class="container-fluid mt-2" >

<h1 class="pl-2">Dashboard</h1>
<div>
<div class="d-flex justify-content-center">
<div class="p-2 flex-card card">
<div class='d-flex'>
<div>
<i class='text-success icon fa fa-group'></i>
</div>
<div class="flex-grow-1">

73
<center>
<h6>Voted</h6>
<h3 class="m-0" id='voted'>0</h3>
</center>
</div>
</div>
</div>
<div class="p-2 flex-card card">
<div class='d-flex'>
<div>
<i class='text-danger icon fa fa-group'></i>
</div>
<div class="flex-grow-1">
<center>
<h6>Not-Voted</h6>
<h3 class="m-0" id='notVoted'>0</h3>
</center>
</div>
</div>
</div><!-- !-->
<div class="p-2 flex-card card">
<div class='d-flex'>
<div>
<i class=' text-primary icon fa fa-group'></i>
</div>
<div class="flex-grow-1">
<center>
<h6>Total Voters</h6>
<h3 class="m-0" id='voters'>0</h3>
</center>
</div>
</div>
</div><!--!-->
</div>
</div>
<hr>
<div class="d-flex flex-row">
<h1 class="flex-grow-1 ml-2">Live Result</h2>
<div>
<button class="btn btn-success text-white" onclick="print_who_voted()">Print Voted
<i class='fa fa-print'></i></button>
<button class="btn btn-warning text-white" onclick="print_winner('canvas')">Print
Canvas <i class='fa fa-print'></i></button>
<button class="btn btn-info" onclick="print_winner('candidates')">Print Candidates
<i class='fa fa-print'></i></button>
<button class="btn btn-primary" onclick="print_winner('winner')">Print Winners <i
class='fa fa-print'></i></button>
</div>

74
</div>
<div class="form-group ml-2">
<label for="election_date">Election Date</label>
<select class="form-control" name="election_date" id="election_date" required
onchange="clearTimeout(timeout);displayz()">
<?php echo $yearOpt; ?>
</select>
</div>
<div class="row justify-content-center" id="wrapper">
</div>
</div>
<?php include '../shared/foot.php'; ?>
<?php include '../shared/alert.php'; ?>
<?php include '../shared/delete.php'; ?>
</div>
</body>
</html>

<script>
let posCan = [];
let candidateByPos = [];
let timeout;
function displayz() {
const x = [...election_date.getElementsByTagName('option')];
dateHolder.innerHTML = x.find(el => el.value==election_date.value).innerHTML;

$.ajax({
url:'../process/VoteRoutes.php',
method:'get',
data:{count:'---', election_date: election_date.value},
success:(e)=>{
const data = JSON.parse(e);
const position = [];
candidateByPos = [];
voted.innerHTML= data.vote_status[0].voted;
notVoted.innerHTML = data.vote_status[0].not_voted;
voters.innerHTML = data.vote_status[0].student_count;
percentage_ = [];
let htmlData = '';
for (el of data.individual_count) {
const checkPosition = position.find(pos => pos.positionname == el.positionname);
if(!checkPosition) {
const candidate = data.individual_count.filter(indi => el.positionname ===
indi.positionname);
position.push({positionname:el.positionname,candidates:candidate});
}
}

75
let candidateWrapper = '';
let total_votes = 0;
let total_can = pos.candidates.length;
let currentPercent =0;
pos.candidates.forEach((candidate1) => {
total_votes += candidate1.vote_count;
});
for (el of data.position_count) {
const checkPosition = candidateByPos.find(posz => posz.positionname == el.positionname);
if(!checkPosition) {
candidateByPos.push({...el,candidates:position.find(poz => poz.positionname ==
el.positionname).candidates});
}
}

pos.candidates = pos.candidates.sort((arr1,arr2) => {


return arr2.vote_count-arr1.vote_count;
});

for (can of pos.candidates) {


let percent = (can.vote_count / total_votes) * 1;
let class_ = '';
if(!percent) {
percent = 0;
} else {
class_ = 'bg-warning'
percent = percent;
}
if (document.getElementById(`p${can.candidateid}`)) {
currentPercent =
document.getElementById(`p${can.candidateid}`).getAttribute('percent');
}
const image = can.image ? '../imgs/'+can.image : '../person.png';
candidateWrapper += `
<div class='list-group secret candidate_' id='can${can.candidateid}'
datas= '{\"fullname\":\"${can.lastname}, ${can.firstname}, ${can.middlename}\",
\"vote_count\":\"${can.partyname}\",\"candidate_id\":\"${can.candidateid}\"
}'>
<div class='list-group-item'>
<div class='d-flex flex-row' secret>
<div><img src='${image}' style='border-radius:100%; box-

shadow:-2px 2px 4px gray' width='50px' height='50px'></div>


<div class='flex-grow-1 text-center'>${can.lastname}, ${can.firstname},
${can.middlename}</div>

76
</div>
</div>
<div class='list-group-item'>
<span>No. Votes: ${can.vote_count}</span>
<div class='graphWrapper'>
<div class='${class_} percentage' percent='${percent}'
id='p${can.candidateid}'
style='transform:scaleX(${currentPercent})'></div>
</div>
</div>
</div>`;
percentage_.push({canidateIdElement: `p${can.candidateid}`,percent: percent});
}
position_id.push(`position_${pos.positionname}`);
pos['total_candidate'] = total_can;
pos[''];
posCan.push(pos);
htmlData +=
`<div class='col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12'>
<div class='card candidates-position' style='margin-bottom:10px'>
<div class='d-flex p-2 bg-primary'>
<h5 class='m-0 text-white flex-grow-1'
id="position_${pos.positionname}">${pos.positionname} (${total_can})</h5>
<!--<div style='cursor: pointer' onclick='showHide("can${can.candidateid}")'>
<i class="fa fa-caret-down text-white"></i>
</div>!-->
</div>
${candidateWrapper}
</div>
</div>`;
}
$('#wrapper').html(htmlData);
time_out = window.setTimeout(()=>{
percentage_.forEach((element) => {
document.getElementById(element.canidateIdElement).style.transform =
`scaleX(${element.percent})`;
});
}, 100);
window.setTimeout(() => {
displayz();
}, 5000);
}

});
}
displayz();
let position_id = [];
function print_winner(print_type){
let winner = [];
const finalWinner=[];

77
candidateByPos.forEach(el => {
let can = el.candidates;
const len = can.length;
for(let x = 0; x < len; x++) {
for(let i = len-1; i >= 0 ; i-- ) {
if(can[x].vote_count < can[i].vote_count) {
const tem = can[x];
can[x] = can[i];
can[i] = tem;
}
}
}
if(print_type=='winner') {
winner.push({positionName:el.positionname, candidates:can.sort((arr1, arr2) => {
return arr2.vote_count-arr1.vote_count;
}).slice(0,el.allowPerParty)});
} else if(print_type == 'candidates' || print_type == 'canvas') {
winner.push({positionName:el.positionname, candidates:can.sort((arr1, arr2) => {
return arr2.vote_count-arr1.vote_count;
})});

}
});
let data = '';
winner.forEach(val => {
dataTemp = '';//`<tr style='text-align:center'><td
colspan='4'>${val.positionName}</td></tr>`;
val.candidates.forEach(val2 => {
const tdd = print_type !== 'candidates' ? `<td style='text-
align:center'>${val2.vote_count}</td>` : '';
dataTemp = dataTemp + `<tr>
<td>${val2.lastname.toUpperCase()},
${val2.firstname.toUpperCase()} ${val2.middlename.toUpperCase()}</td>
<td style='text-align:center'>${val2.partyname}</td>
${tdd}
<td style='text-align:center'>${val2.positionname}</td>
</tr>`;
});
data+=dataTemp;
});

printBody.innerHTML = '';
printTitle.innerHTML = print_type.toUpperCase();
printTr.innerHTML = print_type != 'candidates' ? th.winner : th.winner.replace('[candidates-
print]',`style='display:none;'`);
printBody.innerHTML = data;
print();
// console.log(winner);

78
const th = {winner: `<th>Candidate</th>
<th>partyname</td>
<th [candidates-print]>Total Votes</th>
<th>Position</td>`
};
function print_who_voted() {
const el = election_date.getElementsByTagName('option');
let datee='';
for(let elem of el){
if(elem.getAttribute('value') == election_date.value) {
date = elem.innerHTML;
break;
}
}
window.open(`print-voted.php?election_date=${election_date.value}&date=${date}` , '_ blank');
}
</script>

79
Electiondate.php

<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<?php include '../shared/alert.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-8 col-lg-8 col-xl-8">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl-left">Election Date List</h1>
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
<button class="btn btn-primary btn-block" onclick="electionIdForm.reset();" id="add" data-
toggle="modal" data-target="#addUpdate">Set Election Date</button>
</div>
</div>
<table class="table" id="election_tbl">
<thead>
<tr>
<th>Election Date ID</th>
<th>Election Date</th>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="election_tblbody">
</tbody>
</table>
</div>

<div class="modal fade" id="addUpdate">


<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
</div>

80
<div class="modal-body">
<form id="electionIdForm" action="" method="POST">
<input type="hidden" name="election_id" id="election_id">
<div class="row">
<div class="col-12">
<div class="form-group">
<label>Election Id</label>
<input type="date" id="election_date" name="election_date" required
class="form-control">
</div>
</div>
</div>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<?php include '../shared/foot.php'; ?>
</body>
<?php include '../shared/delete.php'; ?>
<script>
electionIdForm.onsubmit = (e) => {
e.preventDefault();
alert('After election date added student voting code will reset');
$.ajax({
url:'../process/election-date-process.php?'+(election_id.value ? 'update' : 'add'),
method:"GET",
data:{election_id:election_id.value, election_date:election_date.value},
success:(ee)=>{
if(ee.trim() == 'success') {
alertService.alert({
response:'success',
message: (election_id.value ? 'Successfully Updated!' : 'Successfully Added!' )
});
$('#addUpdate').modal('hide');
displayElection();
} else {
alertService.alert({
response:'error',
message: `${election_date.value} Already Exist!`});
}
}

});
}

81
function displayElection() {
$.ajax({
url:'../process/election-date-process.php?get=true',
method:"GET",
data:{},
success:(e)=>{
$("#election_tbl").DataTable().destroy();
datas = JSON.parse(e);
let tr = '';
election_tblbody.innerHTML = '';
datas.forEach(data => {
tr = tr+`<tr>
<td>${data.election_date_id}</td>
<td>${data.election_date}</td>
<td class='text-center'><button class='btn btn-success'
onclick='getElection(${JSON.stringify(data)})'><i class='fa fa-edit'></i></button></td>
<td class='text-center'><button class='btn btn-danger'
onclick='deleteElection(${data.election_date_id})'><i class='fa fa-trash'></i></button></td>
</tr>`;
});
election_tblbody.innerHTML = tr;
$("#election_tbl").DataTable({sort: false});
}
})
}
function getElection(election_object) {
election_id.value = election_object.election_date_id;
election_date.value = election_object.election_date;
$('#addUpdate').modal('show');
}

function deleteElection(election_id) {
if(!confirm('Are you sure you want to delete it?')) {
return false;
}
$.ajax({
url:'../process/election-date-process.php?delete',
method:"GET",
data:{election_id:election_id},
success:(ee)=>{
if(ee.trim() == 'success') {
alertService.alert({

82
message: 'Successfully Deleted!'

});
$('#addUpdate').modal('hide');
displayElection();
} else {
alertService.alert({
response:'error',
message: 'Failed to Delete!'});
}
}
});
}
displayElection();
</script>
</html>

83
Candidates.php
<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
require '../process/config.php';
$config = new Config();
$conn = $config->getConnection();
$sql = "select * from tbl_election_date order by election_date desc";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$yearOpt = '';
foreach($response as $row) {
$yearOpt = $yearOpt.'<option value="'.$row['election_date_id'].'">'.(date('M d,
Y',strtotime($row['election_date']))).'</option>';
}
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-9 col-lg-9 col-xl-9">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl- left">Candidates</h1>
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#addUpdate">Add
Candidate</button>
</div>
</div>
<table class="table" id="can_tbl">
<thead>
<tr>
<th>Image</th>
<th>Voter ID</th>
<th>Full Name</th>
<th>Party</th>

<th>Cadidate Position</th>
<th>Election Date</th>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="candidate_table">

84
</tbody>
</table>
</div>

<div class="modal fade" id="addUpdate">


<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<form action="" method="" id="candidatesForm">
<input type="hidden" name="canId" id="id" />
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="election_date">Election Date</label>
<select class="form-control" name="election_date" id="election_date" required
onchange="getStudents(); getParties_();">
<option value=''>Select Election Date</option>
<?php echo $yearOpt; ?>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="student">Voter</label>
<select class="form-control" name="student" placeholder="Enter voter Id" id="student"
required>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="party">Party</label>
<select class="form-control" name="party" id="party" required>
</select>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="pos">Candidate Position</label>
<select class="form-control" name="pos" id="pos" required>
</select>
</div>
</div>
</div>

85
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<?php include '../shared/foot.php'; ?>
<?php include '../shared/alert.php'; ?>
<?php include '../shared/delete.php'; ?>
</body>
<script type="text/javascript">
var glob=0;
$(document).ready(function(e){
getStudents(true);
getParties();
getPosition();
$("#candidatesForm").on('submit', function(e){
e.preventDefault();
$("#student").prop("disabled", false);

let data = $("#candidatesForm");


let formData = new FormData(data[0]);
$.ajax({
method: 'POST',
url: '../process/CandidateRoutes.php',
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(e){
let data = JSON.parse(e);
alertService.alert({
response:data['status'],
message: data['message']
});
getStudents(true);
getParties();
getPosition();
$("#can_tbl").DataTable().destroy();
getCandidates();
$("#addUpdate").modal('hide');
}
});
});

86
$("#student").select2({width:'100%'});
});
function getCandidates(){
$.ajax({
method: 'GET',
url: '../process/CandidateRoutes.php',
data: {candidate:'g'},
success: function(e){
let response = JSON.parse(e);
$("#candidate_table").empty();
let count=0;
$.each(response, function(index, val){
let updateData = JSON.stringify({
id: val['id'],

student_id: val['s_id'],
party_id: val['p_id'] ,
pos_id: val['c_id'],
election_date_id: val['election_date_id']
});
let im='';
if(val['image'] != ""){
im = '../imgs/'+val['image'];
} else {
im = '../person.png';
}
count++;
$("#candidate_table").append(
"<tr>"+
"<td ><img class='profPic' src='"+im+"' width='50' height='50'></td>"+
"<td>"+val['idno']+"</td>"+
"<td>"+val['lastname']+", "+val['firstname']+" "+val['middlename']+"</td>"+
"<td>"+val['partyname']+"</td>"+
"<td>"+val['positionname']+"</td>"+
"<td>"+val['election_date']+"</td>"+
"<td class='text-center'><button class='btn btn-success'
onclick='editCandidate("+updateData+")'><i class='fa fa-edit'></i></button></td>"+
"<td class='text-center'><button class='btn btn-danger' onclick='deleteCandidate("+val['id']+")'><i
class='fa fa-trash'></i></button></td>"+
"</tr>"
);
$("#profilePic").attr('src', );
});
},
error: function(e){

87
complete: function(e){
$("#can_tbl").DataTable({
sort : false
});
}
});
}
function editCandidate(id){
$("#addUpdate").modal('show');
getStudents(false);
$("#id").val(id.id);
window.setTimeout(function(){
$("#student").prop("disabled", true);
$("#student").val(String(id.student_id)).trigger('change');
$("#party").val(String(id.party_id)).trigger('change');
$("#pos").val(String(id.pos_id)).trigger('change');
const element = election_date.getElementsByTagName('option');
for (let el of element) {
if(el.getAttribute('value') == id['election_date_id']) {
el.selected = true;
}
}
}, 50);
}
function deleteCandidate(id){
deleteService.request({
id:id,
method:'POST',
url:'../process/CandidateRoutes.php',
isset:'id',
complete:(e)=>{
const message = e.toLowerCase() == 'success' ? 'Successfully deleted!' : 'Failed to Delete!';
alertService.alert({
response:e,
message:message
});
if(e.toLowerCase() == 'success'){
deleteService.close();
getStudents(true);
getParties();
getPosition();

$("#can_tbl").DataTable().destroy();
getCandidates();
}
}

88
});
}
function checkCandidate(){
var exist = "";
$.ajax({
method:'GET',
url:'../process/CandidateRoutes.php',
data:{checkCandidate:'check', election_date_id: election_date.value},
async: false,
success: function(e){
exist = e;
let response = JSON.parse(e);
$("#student").empty();
$("#student").append("<option value=''>Enter Voter id</option>");
$.each(response, function(index, val){
//let check = checkCandidate(val['id']);
$("#student").append(
"<option value='"+val['id']+"'>"+val['lastname']+", "+val['firstname']+"
"+val['middlename']+"</option>"
);
});
}
});
}
function getStudents(trigger){
checkCandidate();

}
function getParties(){
$.ajax({
method: 'GET',
url: '../process/PartyRoutes.php',
data: {getParties:'g'},
success: function(e){
let response = JSON.parse(e);
$("#party").empty();
$("#party").append('<option value="">Select Party</option>');
$.each(response, function(index, val){
$("#party").append(
"<option value='"+val['id']+"'>"+val['partyname']+"</option>"

);
});

89
$("#party").select2({
width:'100%',
});
},
error: function(e){

},
complete: function(e){

}
});
}
function getPosition(){
$.ajax({
method: 'GET',
url: '../process/PositionRoutes.php',
data:{pos:'g'},
success: function(e){
let response = JSON.parse(e);
$("#pos").empty();
$("#pos").append("<option value=''>Select Position</option>");
$.each(response, function(index, val){
$("#pos").append(
"<option value='"+val['id']+"'>"+val['positionname']+"</option>"
);
});
$("#pos").select2({width:'100%'});
}
});
}

function getParties_(){
$.ajax({
method: 'GET',
url: '../process/PartyRoutes.php',

data: {election_date_id: election_date.value ? election_date.value : 0},


success: function(e){
let response = JSON.parse(e);
$("#party").empty();
$("#party").append('<option value="">Select Party</option>');
$.each(response, function(index, val){
$("#party").append(
"<option value='"+val['id']+"'>"+val['partyname']+"</option>"

90
});
$("#party").select2({
width:'100%',
});
},
error: function(e){

},
complete: function(e){

}
});
}
this.getParties_();
</script>
</html>

91
Position.php
<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-9 col-lg-9 col-xl-9">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl-left">Candidates Position</h1>
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#addUpdate">Add
Position</button>
</div>
</div>
<table class="table" id="pos_tbl">
<thead>
<tr>
<th>Position Name</th>
<th>Sort Order</th>
<th>Votes Allowed</th>
<th>Allow Per Party</th>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="position_table">
</tbody>
</table>
</div>
<div class="modal fade" id="addUpdate">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<form action="" method="" id="positionForm">


<div class="modal-body">

92
<div class="row">
<input type="hidden" id='id' name="positionId" class="form-control" />
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="positionName">Position Name</label>
<input class="form-control" name="positionName" id="positionName"
placeholder="Input Position Name">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="sortOrder">Sort Order</label>
<input type="number" min=0 name="sortOrder" class="form-control" id="sortOrder"
placeholder="sortOrder">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="voteAllowed">Vote(s) Allowed</label>
<input type="number" min=0 class="form-control" name="voteAllowed"
id="voteAllowed" placeholder="Vote(s) Allowed">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="Allow Per Party">Allow Per Party</label>
<input class="form-control" min=0 type="number" name="allowPerParty"
id="allowPerParty" placeholder="Allow Per Party">
</div>
</div>
</div>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<?php include '../shared/foot.php'; ?>
<?php include '../shared/alert.php'; ?>
<?php include '../shared/delete.php'; ?>
</body>
<script type="text/javascript">

93
$(document).ready(function(){
$("#positionForm").on('submit', function(e){
e.preventDefault();
let data = $("#positionForm");
let formData = new FormData(data[0]);
$.ajax({
method: "POST",
url: "../process/PositionRoutes.php",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(e){
let data = JSON.parse(e);
alertService.alert({
response:data['status'],
message: data['message']
});
$(".form-control").val('');
$("#addUpdate").modal('hide');
},
error: function(e){

},
complete: function(e){
$("#pos_tbl").DataTable().destroy();
getPosition();
}
});
});
getPosition();
});
function getPosition(){
$.ajax({
method: 'GET',
url: '../process/PositionRoutes.php',
data:{pos:'g'},
success: function(e){
let response = JSON.parse(e);
$("#position_table").empty();
$.each(response, function(index, val){
let updateData = JSON.stringify({
id: val['id'],
position_name: val['positionname'],
sort_order: val['sortorder'],

94
votes_allowed: val['votesallowed'],
allowed_per_party: val['allowperparty']
});
$("#position_table").append(
"<tr>"+
"<td>"+val['positionname']+"</td>"+
"<td>"+val['sortorder']+"</td>"+
"<td>"+val['votesallowed']+"</td>"+
"<td>"+val['allowperparty']+"</td>"+
"<td class='text-center'><button class='btn btn-success'
onclick='editPos("+updateData+")'><i class='fa fa-edit'></i></button></td>"+
"<td class='text-center'><button class='btn btn-danger' onclick='deletePos("+val['id']+")'><i
class='fa fa-trash'></i></button></td>"+
"</tr>"
);
});
$("#pos_tbl").DataTable({
sort: false
});
}
});
}
function editPos(data){
$("#addUpdate").modal('show');
$("#id").val(data['id']);
$("#positionName").val(data['position_name']);
$("#sortOrder").val(data['sort_order']);
$("#voteAllowed").val(data['votes_allowed']);
$("#allowPerParty").val(data['allowed_per_party']);
}
function deletePos(id){
deleteService.request({
id:id,
method:'POST',
url:'../process/PositionRoutes.php',
isset:'id',
complete:(e)=>{
const message = e.toLowerCase() == 'success' ? 'Successfully deleted!' : 'Failed to Delete!';
alertService.alert({
response:e,
message:message
});
if(e.toLowerCase() == 'success'){
deleteService.close();

95
$("#pos_tbl").DataTable().destroy();
getPosition();
}
}
});
}
</script>
</html>

96
Party.php
<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';

require '../process/config.php';
$config = new Config();
$conn = $config->getConnection();
$sql = "select * from tbl_election_date order by election_date desc";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$yearOpt = '';
foreach($response as $row) {
$yearOpt = $yearOpt.'<option value="'.$row['election_date_id'].'">'.(date('M d,
Y',strtotime($row['election_date']))).'</option>';
}
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-9 col-lg-9 col-xl-9">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl-left">Available
Parties</h1>
</div>
<div class="col-sm-12 col-md-2 col-lg-2 col-xl-2">
<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#addUpdate">Add
Party</button>
</div>
</div>
<table class="table" id="party_tbl">
<thead>
<tr>
<th>Party Initial</th>
<th>Party Name</th>
<th>Election Date</th>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="party_table">

</tbody>
</table>
</div>

97
<div class="modal fade" id="addUpdate">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
</div>

<div class="modal-body">
<form action="../process/PartyRoutes.php" method="POST" id="partyForm">
<input type="hidden" class="form-control" id="id" name="partyId" />
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="partyInitial">Election Date</label>
<select class="form-control" name="election_date" id="election_date" required>
<?php echo $yearOpt; ?>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="partyInitial">Party Initial</label>
<input class="form-control" name="partyInitial" id="partyInitial" placeholder="Input
Party Initial" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="partyName">Party Name</label>
<input type="text" name="partyName" class="form-control" id="partyName"
placeholder="Input Party Name" required>
</div>
</div>
</div>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<?php include '../shared/foot.php'; ?>
<?php include '../shared/alert.php'; ?>

<?php include '../shared/delete.php'; ?>


</body>

98
<script type="text/javascript">
$(document).ready(function(){
getParties();
$("#partyForm").on('submit', function(e){
e.preventDefault();
let data = $("#partyForm");
let formData = new FormData(data[0]);
$.ajax({
method : "POST",
url : "../process/PartyRoutes.php",
data: formData,
processData:false,
contentType:false,
cache: false,
success: function(e){
let data = JSON.parse(e);
alertService.alert({
response:data['status'],
message: data['message']
});
$(".form-control").val('');
$("#addUpdate").modal('hide');
},
error: function(e){

},
complete: function(e){
$("#party_tbl").DataTable().destroy();
getParties();
}
});
});
$("#close").on('click', function(e){
$(".form-control").val('');
});
});
function getParties(){
$.ajax({
method: 'GET',
url: '../process/PartyRoutes.php',
data: {getParties:'g'},
success: function(e){
let response = JSON.parse(e);

99
$("#party_table").empty();
$.each(response, function(index, val){
let updateData = JSON.stringify({
id: val['id'],
party_initial: val['partyinitial'],
party_name: val['partyname'],
election_id: val['party_election_date_id'],
});
$("#party_table").append(
"<tr>"+
"<td>"+val['partyinitial']+"</td>"+
"<td>"+val['partyname']+"</td>"+
"<td>"+val['election_date']+"</td>"+
"<td class='text-center'><button class='btn btn-success'
onclick='getParty("+updateData+")'><i class='fa fa-edit'></i></button></td>"+
"<td class='text-center'><button class='btn btn-danger' onclick='deleteParty("+val['id']+")'>
<i class='fa fa-trash'></i></button></td>"+
"</tr>"
);
});
$("#party_tbl").DataTable();
},
error: function(e){

},
complete: function(e){

}
});
}
function getParty(data){
$("#addUpdate").modal('show');
$("#id").val(data['id']);
$("#partyInitial").val(data['party_initial']);
$("#partyName").val(data['party_name']);
const element = election_date.getElementsByTagName('option');
for (let el of element) {
if(el.getAttribute('value') == data['election_id']) {
el.selected = true;
}
}
}
function deleteParty(id){
deleteService.request({
id:id,
method:'POST'

100
url:'../process/PartyRoutes.php',
isset:'id',
complete:(e)=>{
const message = e.toLowerCase() == 'success' ? 'Successfully deleted!' : 'Failed to Delete!';
alertService.alert({
response:e,
message:message
});
if(e.toLowerCase() == 'success'){
deleteService.close();
$("#party_tbl").DataTable().destroy();
getParties();
}
}
});
}
</script>
</html>

101
Voter.php

<?php
define('RESTRICTED', true);
require_once '../session.php';
require_once '../auth.php';
require '../process/config.php';
$config = new Config();
$conn = $config->getConnection();
$sql = "select * from tbl_election_date order by election_date desc";
$query = mysqli_query($conn, $sql);
$response = mysqli_fetch_all($query, MYSQLI_ASSOC);
$yearOpt = '';
foreach($response as $row) {
$yearOpt = $yearOpt.'<option value="'.$row['election_date_id'].'">'.(date('M d,
Y',strtotime($row['election_date']))).'</option>';
}
?>
<!Doctype html>
<html>
<?php include '../shared/head.php'; ?>
<?php include '../shared/alert.php'; ?>
<body>
<?php include '../shared/navigation.php'; ?>
<div class="container-fluid mt-2">
<div class="row">
<div class=" col-sm-12 col-md-8 col-lg-8 col-xl-8">
<h1 class=" text-sm-center text-xs-center text-md-left text-lg-left text-xl-left">Voter List</h1>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class='d-flex flex-row w-100 justify-content-end'>
<input type="file" name="csv_name" id="csv_id" style='display:none' onchange="readCSV()">
<button class="btn btn-warning text-white mr-1" onclick="csv_id.click()">Import CSV</button>
<button class="btn btn-primary mr-1" id="add" data-toggle="modal" data-target="#addUpdate">Add
voter</button>
<a class="btn btn-success" href="print.php" target="_blank" >Print Voting Codes</a>
</div>
<script>
function CSVReader() {
return new Promise((res,rej) => {
let csv = [];
const file = csv_id.files[0];
const fr = new FileReader();

let jsonData = [];

102
fr.onload = function (e) {
let c = fr.result.split('\n');
csv = c.map(data => data.split(','));
const csvLen = csv.length;
for(let x = 1; x < csvLen-1; x++) {
let data = {};
for(let y = 0; y < csv[0].length; y++) {
data[((csv[0][y].trim()).replace(' ', ''))] = csv[x][y].trim();
}
jsonData.push(data);
}
csv_id.value = '';
res(jsonData);
}
fr.readAsText(file);
});

}
function readCSV() {
let csv = CSVReader(); //promise
csv.then(data => {
$.ajax({url:'../process/checkingCSV.php',
data:{csv:data},
method:'post',
success:(e) => {
bulkTbody.innerHTML = e;
$('#bulkadd').modal('show');
}})
});
}
</script>
</div>
</div>
<table class="table" id="student_tbl" style='width:100%'>
<thead>
<tr>
<th colspan='8'>
<div class='d-flex flex-row'>
<div class='d-flex flex-row'>
<label for="" class='ml-1'>Election Date</label>
<select class="form-control ml-1" style='width:200px;' id="yearOpt" onchange="getStudents()">
<?php echo $yearOpt; ?>
</select>

103
</tr>
<tr>
<th style='width:50px'>ID No.</th>
<th>Full Name</th>
<th style='width:300px'>Course</th>
<th>Year Level</th>
<th>Voting Code</th>
<th>Vote Status</th>
<th class="text-center" data-toggle="modal" data-target="#addUpdate">Update</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody id="student_table">
</tbody>
</table>
</div>

<div class="modal fade" id="addUpdate">


<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Add/Update</h4>
<button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
</div>

<div class="modal-body">
<form id="studentForm" action="../process/StudentRoutes.php" method="POST">
<div class="row">
<input type="hidden" class="form-control" name="id" id="id">
<div class="col-12">
<div class="form-group">
<label for="image">Image</label>
<input type="file" class="form-control" name="image" id="image">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6">
<div class="form-group">
<label for="studentID">Voter ID</label>
<input class="form-control" name="studentID" id="studentID" placeholder="Input
Student ID" required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6">


<div class="form-group">

104
<label for="lastName">Last Name</label>
<input type="text" name="lastName" class="form-control" id="lastName"
placeholder="Input Last Name" required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6">


<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" name="firstName" class="form-control" id="firstName"
placeholder="Input First Name" required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6">


<div class="form-group">
<label for="middleName">Middle Name</label>
<input type="text" name="middleName" class="form-control" id="middleName"
placeholder="Input Middle Name">
</div>
</div>

<div class="col-lg-6 col-md-6 col-xl-6" class="selectz">


<div class="form-group">
<label for="course">Course</label>
<select name="course" class="form-control" id="course" required>

</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xl-6" class="selectz">
<div class="form-group">
<label for="yearlevel">Year Level</label>
<select name="yearlevel" class="form-control" id="yearlevel">
</select>
</div>
</div>
</div>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

105
</div>
</div>
</div>

<div class="modal fade" id="bulkadd">


<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Students</h4>
<button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
</div>
<form id="bulkaddform">
<div class="modal-body">
<table class='table'>
<thead>
<tr>
<th style='width:100px'>ID NO</th>
<th>Last Name</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Course</th>
<th>Year Level</th>
</tr>
</thead>
<tbody id='bulkTbody'></tbody>
</table>
</div>
</form>
</div>
</div>
</div>

<?php include '../shared/foot.php'; ?>


</body>
<script type="text/javascript">
$(document).ready(function(){
getCourses();
getYrLvl();

$("#studentForm").on("submit", function(e){
e.preventDefault();
let theData = $("#studentForm");

106
let formData = new FormData(theData[0]);
$.ajax({
method : $("#studentForm").attr('method'),
url : $("#studentForm").attr('action'),
data : formData,
processData: false,
contentType: false,
cache: false,
success: function(e){
$(".form-control").val('');
$("#addUpdate").modal('hide');
const message = e.toLowerCase() == 'success' ? 'Successfully Added' : 'Failed to add!';
alertService.alert({response:e,message:message});
},
error: function(e){

},
complete: function(e){
$("#student_tbl").DataTable().destroy();
getStudents();
}
});
});
$("#close").on('click', function(e){
$(".form-control").val('');
});
getStudents();
});
function getCourses(){
$.ajax({
method: 'GET',
url : '../process/CourseRoutes.php',
data : {courses: 'g'},
success : function(e){
let response = JSON.parse(e);
$("#course").empty();
$("#course").append("<option value=''>Please Select</option>");
$.each(response, function(index, value){
$("#course").append(
"<option class='courses' value='"+value['id']+"'>"+value['courseinitial']+"</option>"
);
});
}
})
}
function getYrLvl(){

107
$.ajax({

method: 'GET',
url : '../process/YearLevelRoutes.php',
data: {yearlvl: 'g'},
success: function(e){
let response = JSON.parse(e);
$("#yearlevel").empty();
$("#yearlevel").append("<option value=''>Please Select</option>");
$.each(response, function(index, val){
$("#yearlevel").append(
"<option value='"+val['id']+"'>"+val['yearlevelinitial'] + "</option>"
);
})
}
})
}
function getStudents(){
$.ajax({
method: 'GET',
url : '../process/StudentRoutes.php',
data: {student:'g',election_date:yearOpt.value},
success : function(e){
student_table.innerHTML = '';
let response = JSON.parse(e);
let status="";
let code="";
$("#student_tbl").DataTable().destroy();
student_table.innerHTML = '';
$.each(response, function(index, value){
if(!value['votingcode']){
value['votingcode']=" ";
}
$("#student_table").append(
"<tr>"+
"<td>"+value['idno']+"</td>"+
"<td>"+"<a href='#'>"+value['lastname']+", "+value['firstname']+"
"+value['middlename']+"</a></td>"+
"<td>"+value['coursename']+"</td>"+
"<td>"+value['yearlevelname']+"</td>"+
"<td>"+value['votingcode']+"</td>"+
"<td>"+(value['vote_status_'] > 0 ? '<span style="color:green">Done Voting</span>' :
'<span style="color:orange">Not Yet Voted</span>' )+"</td>"+
"<td class='text-center'><button class='btn btn-success'
onclick='getStudent("+value['id']+")'><i class='fa fa-edit'></i></button></td>"+

108
"<td class='text-center'><button class='btn btn-danger'
onclick='deleteStudent("+value['id']+")'><i class='fa fa-trash'></i></button></td>"+
"</tr>"
);
});
$("#student_tbl").DataTable({
sort : false
});
},
error: function(e){

},
complete: function(e){
}
});
}
function getStudent(id){
getCourses();
$.ajax({
method: 'GET',
url : '../process/StudentRoutes.php',
data: {id:id},
success: function(e){
$("#addUpdate").modal('show');
let response = JSON.parse(e);
$("#id").val(response['id']);
$("#studentID").val(response['idno']);
$("#lastName").val(response['lastname']);
$("#firstName").val(response['firstname']);
$("#middleName").val(response['middlename']);
for(let i=0; i<$(".courses").length; i++){
if(response['courseid'] == $(".courses").eq(i).val()){
$(".courses").eq(i).attr("selected", true);
}
}
},
error: function(e){

},
complete: function(e){
$("#student_tbl").DataTable().destroy();
getStudents();
}
});
}

109
function deleteStudent(id){

deleteService.request({id:id,method:'post',url:'../process/StudentRoutes.php',isset:'deleteId',complete:(e)=>{
const message = e.toLowerCase() == ' success' ? 'Successfully deleted!' : 'Failed to Delete!';
alert(e);
alertService.alert({response:e,message:message});
if(e.toLowerCase().trim() == 'success'){
deleteService.close();
$("#student_tbl").DataTable().destroy();
getStudents();
}
}});
}
function resetVotingCode() {
$.ajax({url:'../process/ '})
}

function addBulkSubmit() {
if (confirm('Are you sure you want to submit it?')) {
const data = new FormData($('#bulkaddform')[0]);
$.ajax({
method : "POST",
url : "../process/bulk-add-student.php",
data: data,
processData:false,
contentType:false,
cache: false,
success: (e) => {
alertService.alert({response:'success',message:'Successfully Added!'});
$('#bulkadd').modal('hide');
getStudents();
}});
}
}
</script>
<?php include '../shared/delete.php'; ?>
</html>

110
Logout.php

<?php
require '../session.php';
unset($_SESSION['data']);
session_destroy();
header('location: index.php');
?>

111
SCREEN SHOTS

112
Vote Page

Admin Login Page


Admin Login Page

113
Dashboard Page

Election Date Page

114
Candidates Page

Candidates Position Page

115
Parties Page

Voters Page

116
Admin Page

Account Page

117
SYSTEM IMPLEMENTATION PHASE

118
System Implementation Phase
HTML
 HTML stands for Hyper Text Mark up Language
 HTML is the standard mark-up language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this isa link",
etc.
 It gives structure to the web page, defining things like headings, paragraphs, and links. WithoutHTML, a
web page would just be a jumbled mess of text and images.

Some HTML Tags

<HTML> : Starting an HTML tag


<HEAD> : Creating a web page‟s head
<TITLE> : Giving a web page„s body
</HEAD> : Ending a web pages head
</BODY> : Ending a web pages body
</HTML> : Ending a web page
<FORM> : Creating a HTML forms
<INPUT TYPE=BUTTON> : Creating a buttons
<INPUT TYPE=CHECKBOX> : Creating a checkboxes
<INPUT TYPE=SUBMIT> : Creating a submit button
<INPUT TYPE=TEXT> : Creating a text fields

119
 INTRODUCTION TO JAVA SCRIPT
JavaScript, originally supported by Netscape Navigator, is the most popular Web scripting language
today. JavaScript lets you embed programs right in your Web pages and run these programs using the
Web browser. You place these programs in a <SCRIPT> element. If you want the script to write directly
to the Web page, place it in the <BODY> element.

EX: <HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE=”JavaScript”>

</SCRIPT>

</BODY></HTML>

JAVASCRIPTS OBJECTS

JavaScript is an object-oriented language. JavaScript comes with a number of predefined objects.

Objects of the JavaScript

1. Document: Corresponds to the current Web page‟s body. Using this object, you have access to
the HTML of the page itself, including the all links, images and anchors in it.
2. Form: Holds information about HTML forms in the current page.
JAVASCRIPTS EVENTS

Some of the events of JavaScript

1. On Change: Occurs when data in a control, like a text field, changes.


2. on Click: Occurs when an element is clicked.
3. on Focus: Occurs when an element gets the focus.
4. on Mouse Down: Occurs when a mouse button goes down.

120
JAVASCRIPTS FUNCTIONS

Declaration of function

Syntax: function function name ()

Write these functions in <SCRIPT> tag.

DBMS CONCEPTS

1. DATA ABSTRACTION

A major purpose of a database system is to provide users with an abstract view of the data. This system
hides certain details of how the data is stored and maintained. However in order for the system to be
usable, data must be retrieved efficiently. The efficiency leads to the design of complex data
structure for the representation of data in the database. Certain complexity must be hidden from the
database system users.

2. CLASSIFICATION OF DATABASE

There are 3 types of database approaches given below,

a. Hierarchical Database:

In this type of model data is represented in simple tree structured. The record at the top of
three is known as root, the root may have any number of dependents. The disadvantages
of the approach are that no independent record occurrence can exist without its superior.

b. Network Database:

In a Network database, data is represented by Network structure. In this approach record


occurrence can have any number of superiors as well as any number of immediate
dependents.

121
The main disadvantage of the Network model is data representation is very complex resulting in
complexityof the DML (Data Manipulation Language).
c. Relational Database:

The Relational model represents data and relationships among data by a collection of
tables each of which has a number of columns with unique names.

THE SQL LANGUAGE

SQL is a language for relational database. SQL is a non-procedural i.e., when we use SQL we specify
what we want to be done not how to do it.

 What Can SQL do?


 SQL can execute queries against a database
 SQL can retrieve data from a database
 SQL can insert records in a database
 SQL can update records in a database
 SQL can delete records from a database
 SQL can create new databases
 SQL can create new tables in a database
 SQL can create stored procedures in a database
 SQL can create views in a database
 SQL can set permissions on tables, procedures, and views

Basic SQL Commands

 Data Definition Language commands (DDL)

 Data Manipulation Language commands (DML)

 Transaction Control Language commands (TCL)

 Data control Language commands (DCL)

PHP

 PHP is an acronym for "PHP: Hypertext Preprocessor"


 PHP is a widely-used, open source scripting language
 PHP scripts are executed on the server
 PHP is free to download and us

122
SOFTWARE TESTING

123
SOFTWARE TESTING

Software Testing is a method to assess the functionality of the software program. The process
checks whether the actual software matches the expected requirements and ensures the
software is bug-free. The purpose of software testing is to identify the errors, faults, or missing
requirements in contrast to actual requirements. It mainly aims at measuring the specification,
functionality, and performance of a software program or application

Testing can be divided into two steps:

Verification: It refers to the set of tasks that ensure that the software correctly
implements a specific function. It means “Are we building the product right?”.
Validation: It refers to a different set of tasks that ensure that the software that has
been built is traceable to customer requirements. It means “Are we building the right
product?”
Importance of Software Testing:
Defects can be identified early: Software testing is important because if there are any
bugs they can be identified early and can be fixed before the delivery of the software.
 Improves quality of software: Software Testing uncovers the defects in
the software, and fixing them improves the quality of the software.
 Increased customer satisfaction: Software testing ensures reliability,
security, and high performance which results in saving time, costs, and
customer satisfaction.
 Helps with scalability: Software testing type non-functional testing
helps to identify the scalability issues and the point where an application
might stop working.
 Saves time and money: After the application is launched it will be very
difficult to trace and resolve the issues, as performing this activity will
incur more costs and time. Thus, it is better to conduct software testing at
regular intervals during software development.

124
Different Types Of Software Testing

Testing can be broadly classified into 3 types:


Functional Testing: Functional testing is a type of software testing that validates the software
systems against the functional requirements. It is performed to check whether the application is
working as per the software‟s functional requirements or not. Various types of functional
testing are Unit testing, Integration testing, System testing, Smoke testing, and so on.
Non-functional Testing: Non-functional testing is a type of software testing that checks the
application for non-functional requirements like performance, scalability, portability, stress,
etc. Various types of non-functional testing are Performance testing, Stress testing, Usability
Testing, and so on.
Maintenance Testing: Maintenance testing is the process of changing, modifying, and updating
the software to keep up with the customer‟s needs. It involves regression testing that

125
verifies that recent changes to the code have not adversely affected other previously working
parts of the software.
Apart from the above classification software testing can be further divided into 2 more ways oftesting:

1. Manual Testing: Manual testing includes testing software manually, i.e., without using any
automation tool or script. In this type, the tester takes over the role of an end-user and tests the
software to identify any unexpected behavior or bug. There are different stages for manual testing
such as unit testing, integration testing, system testing, and user acceptance testing. Testers use test
plans, test cases, or test scenarios to test software to ensure the completeness of testing. Manual
testing also includes exploratory testing, as testers explore the software to identify errors in it.
2. Automation Testing: Automation testing, which is also known as Test Automation, is when
the tester writes scripts and uses another software to test the product. This process involves the
automation of a manual process. Automation Testing is used to re-run the test scenarios quickly
and repeatedly, that were performed manually in manual testing.
Apart from regression testing, automation testing is also used to test the application from a load,
performance, and stress point of view. It increases the test coverage, improves accuracy, and saves
time and money when compared to manual testing.

Different Types of Software Testing Techniques

Software testing techniques can be majorly classified into two categories:

1. Black Box Testing: Black box technique of testing in which the tester doesn‟t have access to
the source code of the software and is conducted at the software interface without any concern
with the internal logical structure of the software known as black-box testing.
2. White-Box Testing: White box technique of testing in which the tester is aware of the internal
workings of the product, has access to its source code, and is conducted by making sure that all
internal operations are performed according to the specifications is known as white box testing.
3. Grey Box Testing: Grey Box technique is testing in which the testers should have knowledge
of implementation , however, they need not be experts.

126
Different Levels of Software Testing

Software level testing can be majorly classified into 4 levels:

1. Unit Testing: Unit testing is a level of the software testing process where individual
units/components of a software/system are tested. The purpose is to validate that each unit of the
software performs as designed.
2. Integration Testing: Integration testing is a level of the software testing process
where individual units are combined and tested as a group. The purpose of this level of
testing is toexpose faults in the interaction between integrated units.
3. System Testing: System testing is a level of the software testing process where a complete,
integrated system/software is tested. The purpose of this test is to evaluate the system‟s
compliance with the specified requirements.
4. Acceptance Testing: Acceptance testing is a level of the software testing process where a
system is tested for acceptability. The purpose of this test is to evaluate the system‟s compliance
with the business requirements and assess whether it is acceptable for delivery.
Benefits of Software Testing
 Product quality: Testing ensures the delivery of a high-quality product as the errors are
discovered and fixed early in the development cycle.
 Customer satisfaction: Software testing aims to detect the errors or vulnerabilities in the
software early in the development phase so that the detected bugs can be fixed before the delivery
of the product. Usability testing is a type of software testing that checks the application for how
easily usable it is for the users to use the application.
 Cost-effective: Testing any project on time helps to save money and time for the long term. If
the bugs are caught in the early phases of software testing, it costs less to fix those errors.
 Security: Security testing is a type of software testing that is focused on testing the application
for security vulnerabilities from internal or external sources.

127
Conclusion
In conclusion, implementing a Online Voting System can bring significant benefits to pharmacies and their

patients. With features such as vote processing, inventory management, reporting and analytics, It provides a

comprehensive suite of tools to manage their operations efficiently. By streamlining operations, reducing the riskof

voting errors, and providing online voting software can improve patient outcomes and As the process becomes

increasingly complex, this software is becoming increasingly essential, and It is a leading provider of this

technology, provide the best possible benefits to their voters.

128
References

For PHP

https://www.w3schools.com/php/default.asp

https://www.php.net/

For MySQL
https://www.
mysql.com/
http://www.m
ysqltutorial.o
rg

For XAMPP
https://www.apachefriends.org/download.html

129

You might also like