DESIGN OF A MOBILE VOTING APPLICATION
61
DESIGN OF A MOBILE VOTING APPLICATION MUKALAI Emmanuel BSTC/39701/131/DF MOHAMMED MURTADHA AHMADU BSTC/39788/131/DF HALILU NAJIB KUNDILA BSTC/40327/132/DF NOVEMBER 2016
Transcript of DESIGN OF A MOBILE VOTING APPLICATION
DESIGN OF A MOBILE VOTING APPLICATION
MUKALAI Emmanuel BSTC/39701/131/DF
MOHAMMED MURTADHA AHMADU BSTC/39788/131/DF
HALILU NAJIB KUNDILA BSTC/40327/132/DF
NOVEMBER 2016
ii
DESIGN OF A MOBILE VOTING APPLICATION
Final Year Project Report submitted to
Kampala International University in partial fulfillment
of the requirement for the award of the degree
of
Bachelor of Science in Telecommunications Engineering
by
MUKALAI Emmanuel BSTC/39701/131/DF
MOHAMMED MURTADHA AHMADU BSTC/39788/131/DF
HALILU NAJIB KUNDILA BSTC/40327/132/DF
DEPARTMENT OF ELECTRICAL AND TELECOMMUNICATION ENGINEERING
SCHOOL OF ENGINEERING AND APPLIED SCIENCES
NOVEMBER 2016
© 2016, Emmanuel, Murtadha, Halilu. All rights reserved.
iii
DECLARATION
This is to certify that the report entitled “Design of a Mobile Voting Application” is our
original work and the results embodied in this report have not been submitted to any other
University or Institute for the award of any degree or diploma.
Signature Date: November 15th 2016
MUKALAI Emmanuel
Signature Date: November 15th 2016
MOHAMMED MURTADHA AHMADU
Signature Date: November 15th 2016
HALILU NAJIB KUNDILA
iv
APPROVAL
The foregoing report entitled, “Design of a Mobile Voting Application” is hereby
approved by Kampala International University, Department of Electrical and
Telecommunication Engineering as a creditable study of research topic and has been
presented in a satisfactory manner to warrant its acceptance as prerequisite to the degree
for which it was submitted.
Project Supervisor
Mr. GODFREY MIRONDO KIBALYA
Signature
Date November 15th 2016
v
ACKNOWLEDGEMENTS
First and foremost we would like express our thanks to the Almighty God without whom
none of this would have been possible. He has provided us with everything we needed to
accomplish what we were aiming for, and gave us the strength to go through it up to the
end.
We would like to extend our acknowledgment to all the people who provided assistance
during production of this report.
More thanks go to our Project Supervisor Mr. GODFREY MIRONDO KIBALYA for his
guidance and support, his valuable suggestions without which it would not have been
possible to fully develop this project.
We are also grateful to our project members for the opportunity to work together and for
providing the necessary resources for this project.
vi
ABSTRACT
This project was devoted to the design of a Mobile Voting Application. A number of steps
were followed in order to come up with a simple voting structure for an Administrator and
User system with authorization and authentication features for Android Platforms.
Different types of data and data collection methods were used including both primary and
secondary data in order to make the project a success.
In order to attain the objectives of this project, Android Studio 2.2.2 was used to develop
and implement the application, PHPMyAdmin to handle the MySQL database management
system, XAMPP to connect the database to the localhost server; Adobe Photoshop CC for
layouts and icons, and Adobe Creative Suite Dreamweaver and Sublime text for writing
codes.
vii
TABLE OF CONTENTS
DECLARATION ............................................................................................................. iii
APPROVAL ................................................................................................................... iv
ACKNOWLEDGEMENTS .................................................................................................. v
ABSTRACT ................................................................................................................... vi
LIST OF TABLES ............................................................................................................ x
LIST OF FIGURES ......................................................................................................... xi
NOMENCLATURE AND ABBREVIATIONS ........................................................................ xii
CHAPTER 1: INTRODUCTION ......................................................................................... 1
1.1 Background ...................................................................................................... 1
1.2 Problem Statement ........................................................................................... 1
1.3 Significance of the Project ................................................................................. 1
1.4 Objectives ........................................................................................................ 2
1.4.1 General Objective ....................................................................................... 2
1.4.2 Specific objectives ....................................................................................... 2
1.5 How can a Mobile Voting Application be useful in an organization? ....................... 2
1.6 Scope ............................................................................................................... 2
CHAPTER 2: LITERATURE REVIEW ................................................................................. 3
2.1 Mobile software application ................................................................................ 3
2.2 Development of mobile applications ................................................................... 3
2.3 Distribution of Mobile Applications ...................................................................... 4
2.4 Benefits of Mobile Applications ........................................................................... 5
2.5 Android Operating System ................................................................................. 5
2.6 Front End and Back End .................................................................................... 7
2.7 Java and JavaScript ........................................................................................... 7
viii
2.8 AJAX ................................................................................................................ 8
2.9 Database Management System (DBMS) .............................................................. 8
2.10 Programming languages and software used ................................................... 11
2.11 Terms definitions ......................................................................................... 11
2.9.1 Application packaging ................................................................................ 11
2.9.2 SQL .......................................................................................................... 12
2.9.3 PHP .......................................................................................................... 12
2.9.4 API .......................................................................................................... 12
2.9.5 XML ......................................................................................................... 12
2.9.6 XHR ......................................................................................................... 12
CHAPTER 3: METHODOLOGY, DESIGN AND IMPLEMENTATION ..................................... 13
3.1 Research design .............................................................................................. 13
3.2 Sources of information .................................................................................... 13
3.3 Design Configuration ....................................................................................... 13
3.3.1 Strategy ................................................................................................... 13
3.3.2 Information Architecture ........................................................................... 14
3.3.3 Design...................................................................................................... 14
3.3.4 Development ............................................................................................ 15
3.3.5 Directory Structure .................................................................................... 22
3.4 Connecting the database and the server ........................................................... 23
CHAPTER 4: TESTS AND RESULTS ............................................................................... 25
4.1 Integration Page ............................................................................................. 25
4.2 Login Page ..................................................................................................... 26
4.3 Administrator Interfaces .................................................................................. 27
4.4 User Interfaces ............................................................................................... 29
ix
4.5 Results page ................................................................................................... 30
CHAPTER 5: CONCLUSION AND RECOMMANDATIONS................................................... 31
5.1 Conclusion ...................................................................................................... 31
5.1 Recommendations ........................................................................................... 31
REFERENCES .............................................................................................................. 32
APPENDICES ............................................................................................................... A1
Appendix A: Shared Files Script Codes ....................................................................... A1
A1: Logout ........................................................................................................ A1
A2: Register Interface Front End ......................................................................... A1
A3: Register Interface Back End .......................................................................... A2
A4: Vote ............................................................................................................ A3
A5: Board .......................................................................................................... A6
Appendix B: Included Script Codes ............................................................................ B1
B1: Account ....................................................................................................... B1
B2: Database connection .................................................................................... B1
B3: Admin Navigator .......................................................................................... B1
B4: Voter Navigator............................................................................................ B2
Appendix C: Administrator Script Codes ..................................................................... C1
C1: Dashboard ................................................................................................... C1
C2: New Admin .................................................................................................. C2
C3: Polls ............................................................................................................ C5
Appendix D: User Script Codes .................................................................................. D1
D1: Dashboard ................................................................................................... D1
x
LIST OF TABLES
Table 3. 1 Login interface Back end development .......................................................... 15
Table 3. 2 Login Interface Front end development ........................................................ 17
Table 3. 3 Login Interface additional codes ................................................................... 18
Table 3. 4 Database PHP script code ............................................................................ 23
Table 3. 5 Main activity script codes ............................................................................. 24
xi
LIST OF FIGURES
Figure 2. 1 Database Management Architecture ............................................................ 10
Figure 3. 1 Flow map of Design Configuration ............................................................... 14
Figure 3. 2 Designed app icon ...................................................................................... 15
Figure 3. 3 Organization Structure ................................................................................ 21
Figure 3. 4 Directory Organization Structure ................................................................. 22
Figure 3. 5 Database System Division ........................................................................... 23
Figure 4. 1 Integration page with application icon ........................................................ 25
Figure 4. 2 Login Page ................................................................................................. 26
Figure 4. 3 Administrator Menu Page ............................................................................ 27
Figure 4. 4 New administrator registration page ............................................................ 27
Figure 4. 5 New poll creation pages with name and date options ................................... 28
Figure 4. 6 Registering Page ........................................................................................ 29
Figure 4. 7 Voting Page ............................................................................................... 29
Figure 4. 8 Results page .............................................................................................. 30
xii
NOMENCLATURE AND ABBREVIATIONS
AJAX Asynchronous JavaScript and XML
API Application Programming Interface
APK Android Application Package
CSS Cascading Style Sheets
APP Application Software
DP Display Picture
DOM Document Object Model
HTML Hypertext Markup Language
IOS IPhone Operating System
MBaaS Mobile Backend as a Service
PHP Personal Home Page
SDK Software Development Kit
SOA Service-Oriented Architecture
SQL Structured Query Language
UI User Interface
VDB Virtual Database
XHR XMLHttpRequest
XML Extensible Markup Language
1
CHAPTER 1: INTRODUCTION
1.1 Background
Numerous organizations, commercial businesses, public administrations and corporations
often face situations where the higher-ups have to get employees’ opinions on different
matters like new policies or debatable issues. As written surveys take longer to put up and
to analyze, they would require a much quicker, effective and automatic solution to those
specific issues.
The Mobile voting system is a mobile application that provides an effective and time saving
method of casting votes using mobile phones. The system is controlled by an administrator
that creates the polls which can be visible to each registered user through their mobile
devices. It allows the registered users to get instantaneous results on activated polls, saving
up the time it would have required for filling up surveys and questionnaires. The final results
are visible to the administrators, providing them the information needed over the shortest
amount of time.
1.2 Problem Statement
Feedback from the employees of organizations, commercial businesses, public
administrations and corporations on different issues are always needed overtime. Yet, filling
in a survey or answering a questionnaire about a given administration matter, processing
the results, and putting up a general statement can be time consuming and not effective.
This project therefore proposes a simpler yet effective and cheaper system to get the
information required preferably in the shortest amount of time, in a simple and
understandable layout.
1.3 Significance of the Project
The benefits of using an Android Mobile Voting Application are:
Improved feedback reception time
Simplicity of the application layout and results
2
Significant reduction of cost and expenses
Easy to access and Quality of Service due to the use of mobile phones
Better User Experience because of the automaticity of the voting system
1.4 Objectives
1.4.1 General Objective
The main objective was to design a Mobile Voting application that offered a direct, simple
and automatic vote casting system.
1.4.2 Specific objectives
To design the administrator and user interface with an authorization and
authentication system
To set up a database and a server
To implement and package the application for Android platforms
1.5 How can a Mobile Voting Application be useful in an organization?
A mobile Voting Application would particularly be useful when an organization would like to
have adequate solutions in cases where:
Uptime and feedback are important
Surveys and questionnaires take too long to process and are costly
Quality of service and Employee’s satisfaction are priorities
1.6 Scope
Android Studio 2.2.2 was used to develop and implement the application, PHPMyAdmin to
handle the MySQL database management system, XAMPP for the server; Adobe Photoshop
CC for layouts and icons, Adobe Creative Suite Dreamweaver and Sublime text for writing
the codes. The programming languages used for the front end were HTTP, CSS, Java and
JavaScript, while for the back end, PHP was used. An authorization and authentication
system was set up for both the administrator and user ends of the app.
3
CHAPTER 2: LITERATURE REVIEW
2.1 Mobile software application
A mobile application, commonly referred to as “app”, is a software application designed to
run on mobile devices such as tablet computers and smartphones. Apps serve the same
purposes as applications and services provided by computers. They are generally of small
size capacity, and provide individual and limited functions such as a calculator, calendar,
chronometer, mapping application, email client, video or music player etc. Most smartphones
and tablet computers are distributed with already pre-installed applications. Some can be
removed while others are important for the proper functionality of the device.
Other Mobile applications can be obtained through distribution platforms called app stores.
They first appeared in 2008 and are typically operated by the owner of the mobile operating
system, namely the Apple App Store, Google Play Store, Windows Phone Store and
BlackBerry App World. They are designed with consideration for the demands and constraints
of the devices and also to take advantage of any specialized capabilities they have. For
example, a gaming app, for example, might take advantage of the iPhone's accelerometer.
Some mobile applications are free, while others are to be purchased from the adequate
distribution platform.
Mobile apps were originally designed for general productivity and information retrieval,
including email, contacts, stock market and weather information. However, public demand
and the availability of developer tools drove rapid expansion into other categories, such as
those handled by desktop application software packages.
2.2 Development of mobile applications
As mentioned above, Mobile applications are developed with consideration for the demands,
features and constraints of the devices to be used with can be numerous because of intense
competition in mobile software and continuous changes within each of the platforms. These
constraints can be the life span of the battery in the mobile devices or the smaller processing
power compared to computers. Some profitable features can be location detection services
4
and cameras and sensors. Also, mobile devices have a wide array of screen sizes, hardware
specifications and configurations to be considered by the application developers.
Mobile application development involves the use of specialized integrated development
settings and environments. Mobile apps are first tested within the development environment
using emulators and later subjected to field testing as emulators provide a cheaper way to
test applications on mobile phones to which developers may not have physical access.
Mobile user interface (UI) Design is also relevant as it considers the constraints and contexts,
screens, input and mobility features as outlines for the design. The user is often the focus
of interaction with their device, and the interface entails components of both hardware and
software. User input allows for the users to manipulate a system, and device's output allows
the system to indicate the effects of the users' manipulation. Mobile UI design constraints
include limited attention and form factors, such as a mobile device's screen size for a user's
hand. Mobile UI contexts signal cues from user activity, such as location and scheduling that
can be shown from user interactions within a mobile application. Overall, the goal while
designing for mobile UI is primarily an understandable and user-friendly interface.
Mobile UIs or front-ends rely on mobile back-ends to support access to enterprise systems.
The mobile back-end facilitates data routing, security, authentication, authorization, working
off-line, and service organization. This functionality is supported by a mix of middleware
components including mobile app servers, Mobile Backend as a service (MBaaS), and SOA
infrastructure.
2.3 Distribution of Mobile Applications
Mobile applications are distributed through application stores. They are online marketplaces
through which software are displayed for browsing, purchase and download. Google Play
Store (for Android Platforms) and App Store (for iOS Platforms) are the two biggest app
stores.
5
2.4 Benefits of Mobile Applications
Mobile applications are innovative and have different benefits according to their use, namely:
Ease of access, and quick services. Mobile apps provide a much faster alternative than
mobile web browsing as they can offer offline functionalities. Their user-friendly
interfaces makes their use experience totally free of troubles, and enjoyable, as they
meet expectations.
They offer much presence and visibility, as they are directly accessible on the screens
of the mobile devices. They offer easy ways to showcase products and services from
a single point.
Apps increase customers’ engagement as they are quickly connected to businesses
they need.
Reduced cost for many functionalities like messaging, newspapers, calling etc.
2.5 Android Operating System
Android is an operating system based on the Linux kernel. An Android operating system can
be divided into the four areas:
Applications
Application framework: an API which allows high-level interactions with the Android
system from Android applications.
Libraries and runtime: for many common framework functions, like, graphic
rendering, data storage, web browsing. It also contains the Android Runtime, as well
as the core Java libraries for running Android applications.
Linux kernel which deals with the communication layer for the underlying hardware.
An Android application developer typically works with the two layers on top to create new
Android applications.
Android applications are primarily written in the Java programming language.
6
During development the developer creates the Android specific configuration files and writes
the application logic in the Java programming language.
The Android development tooling converts these application files into an Android application.
If the developer trigger the deployment, the whole Android application is compiled,
packaged, deployed and potentially started.
The Android Software Development Kit (Android SDK) and the Gradle tooling contains the
necessary tools to create, compile and package Android applications.
The Android SDK contains the Android debug bridge which is a tool that allows to connect
to a virtual or real android device, for the purpose of managing the device or debugging
applications.
Although some of Android’s features have appeared before, Android is the first environment
that combines the following:
An open and free development platform based on Linux and open source: Handset
makers like it because they can use and customize the platform without paying a
royalty.
A component-based architecture inspired by Internet mashups: Parts of one
application can be used in another in ways not originally envisioned by the developer.
You can even replace built-in components with your own creative and improved
versions.
Tons of built-in services out of the box: Location-based services use GPS or cell tower
triangulation to let you customize the user experience depending on where you are.
A full-powered SQL database lets you harness the power of local storage for
occasionally connected computing and synchronization. Browser and map views can
be embedded directly in your applications. All these built-in capabilities help raise the
bar on functionality while lowering your development costs.
Automatic management of the application life cycle: Programs are isolated from each
other by multiple layers of security, which will provide a certain level of system
7
stability. The end user will no longer have to worry about what applications are active
or close some programs so that others can run. Android is optimized for low-power,
low-memory devices in a fundamental way that no previous platform has attempted.
High-quality graphics and sound: Smooth, anti-aliased 2D vector graphics and
animation inspired by Flash are melded with 3D accelerated OpenGL graphics to
enable new kinds of games and business applications. Codecs for the most common
industry standard audio and video formats are built right in.
Portability across a wide range of current and future hardware: All your programs are
written in Java and executed by Android’s Dalvik virtual machine, so your code will be
portable across ARM, x86, and other architectures. Support for a variety of input
methods is included such as keyboard, touch, and trackball. User interfaces can be
customized for any screen resolution and orientation.
2.6 Front End and Back End
An Android app is made up of two parts: the front end and the back end. The Front-end
designates the program interfaces that users interact with directly while the back end
contains all the code that drives the mobile application. The back end serves as a support to
the front end. The front end can be written in HTML, CSS, JavaScript, XML, while the back
end in PHP, Java, etc.
2.7 Java and JavaScript
Java is a concurrent, class-based, object-oriented, general-purpose programming language
expressly designed for use in the distributed environment of the Internet. It was designed
to have as few implementation dependencies as possible. JavaScript is a high-level, object-
oriented, dynamic, and interpreted programming language used to make webpages
interactive. Alongside HTML and CSS, JavaScript is one of the three core technologies of
World Wide Web content production.
Although there are strong outward similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two are distinct languages
and differ greatly in their design.
8
Programmers also use JavaScript in video-game development, in crafting desktop and mobile
applications, and in server-side network programming with run-time environments such as
Node.js.
2.8 AJAX
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating
better, faster, and more interactive web applications with the help of XML, HTML, CSS, and
Java Script. It allows the following features:
Updating a web page without reloading the page
Querying data from a server after the page has loaded
Receiving data from a server after the page has loaded
Sending data to a server in the background
Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and
JavaScript for dynamic content display.
XML is commonly used as the format for receiving server data, although any format,
including plain text, can be used.
AJAX is a web browser technology independent of web server software.
Data-driven as opposed to page-driven.
HTML and CSS are used together to represent and style information. The DOM is accessed
with JavaScript to dynamically display and allow the user to interact with the information
displayed. JavaScript and the XHR object provide a method for exchanging data
asynchronously between browser and server to avoid full page reloads.
2.9 Database Management System (DBMS)
A database management system is a software application that interacts with the user, other
applications, and the database itself to capture and analyze data. A DBMS is designed to
provide to programmers and users systematic ways to allow the definition, creation, querying
and retrieval, update, administration and management of databases. Well-known DBMSs
9
include MySQL, PostgreSQL, MongoDB, Microsoft SQL Server, Oracle, Sybase, SAP HANA,
and IBM DB2.
A database is not generally portable across different DBMSs, but different DBMS can
interoperate by using standards such as SQL and ODBC or JDBC to allow a single application
to work with more than one DBMS.
The DBMS essentially serves as an interface between the database and end users or
application programs, ensuring that data is consistently organized and remains easily
accessible.
The DBMS manages three important things:
The data
The database engine that allows data to be accessed, protected and modified
The database schema, which defines the database’s logical structure
These three foundational elements help provide concurrency, security, data integrity and
uniform administration procedures. Typical database administration tasks supported by the
DBMS include change management, performance monitoring and backup and recovery.
Many database management systems are also responsible for automated rollbacks, restarts
and recovery as well as the logging and auditing of activity.
The DBMS provides a centralized view of data that can be accessed by multiple users, from
multiple locations, in a controlled manner, as it can limit what data the end user sees, as
well as how that end user can view the data, providing many views of a single database
schema. End users and software programs are free from having to understand where the
data is physically located as the DBMS handles all requests. The DBMS can offer both logical
and physical data independence. That means it can protect users and applications from
needing to know where data is stored or having to be concerned about changes to the
physical structure of data (storage and hardware). As long as programs use the application
programming interface (API) for the database that is provided by the DBMS, developers
won't have to modify programs just because changes have been made to the database.
10
With relational DBMSs (RDBMSs), this API is SQL, a standard programming language for
defining, protecting and accessing data in a RDBMS.
Figure 2. 1 Database Management Architecture
The advantages of using a DBMS to store and manage data are:
Integrity of data when accessed by end users and application programmers
Protection and better maintenance when data is shared instead of creating new
iterations of the same data stored in new files for every new application
Accessibility of data by multiple users in a controlled manner
PHP provides various functions to access MySQL database and to manipulate data records
inside MySQL database.
The benefits of using MySQL as the DBMS are:
Scalability and Flexibility
High Performance
Availability
Robust Transactional Support
Web and Data Warehouse Strengths
Strong Data Protection
11
Comprehensive Application Development
Ease of management
Open Source Freedom and permanent Support
2.10 Programming languages and software used
Here are the programming languages that were used:
HTML5
CSS3
AJAX
Java
PHP
The following is a list of software that were used in the building and development of the
mobile application:
Android Studio for the app development and packaging
PHPMyAdmin for handling the administration of MySQL over the Web
MySQL for data management
Adobe Dreamweaver for code editing
XAMPP for setting up a server
Photoshop CC for layouts and icons
2.11 Terms definitions
2.9.1 Application packaging
It is a process that involves binding the important files and components to deploy an
automated customized application for a customer.
12
2.9.2 SQL
It is programming language used to communicate with a database.
2.9.3 PHP
It is a popular general-purpose scripting language that is especially suited to web
development. It is a powerful tool for making dynamic and interactive Web pages. PHP
provides various functions to access MySQL database and to manipulate data records inside
MySQL database. You would require to call PHP functions in the same way you call any other
PHP function.
2.9.4 API
It is a set of routines, protocols, and tools for building software applications. An API specifies
how software components should interact and APIs are used when programming graphical
user interface (GUI) components.
2.9.5 XML
XML is a markup language that defines a set of rules for encoding documents in a format
that is readable by humans and machines, and was designed to store and transport data.
An Activity is the term that defines each interfaces of an app. Each activity is connected to
an XML layout file which provides the front end visuals.
2.9.6 XHR
It is an API in the form of an object whose methods transfer data between a web browser
and a web server. The object is provided by the browser's JavaScript environment.
13
CHAPTER 3: METHODOLOGY, DESIGN AND IMPLEMENTATION
This chapter describes how the study was conducted to make an adequate Mobile Voting
Application. It explains the design of the study and the methods that were used in data
collection and analysis. A systematic approach was used in order to achieve the desired
objectives. In this approach, only understandable, relevant and reliable data were collected,
analyzed, discussed and presented in a precise manner.
3.1 Research design
This study followed a descriptive pattern focusing on implementing a Mobile Voting
application design in relation to the efficiency in terms of speed and quality of service. It
focused mainly on app development for Android Platforms.
3.2 Sources of information
These were mainly Stackoverflow code sources, w3schools tutorials and Internet searches.
Relevant books and websites were visited. The obtained information from the internet were
mainly from text books, journal presentations, technical reports, institutional records, and
PDF files among others.
3.3 Design Configuration
The next steps were followed to come up with a design configuration:
3.3.1 Strategy
This voting app would basically be a simple Android based application for getting information,
by creating an easy voting environment. This app would allow a given administrator to create
and edit a poll with numerous options to select from and submit them for vote. It would
allow creating different administrators and registering users with passwords. Administrators
and users would be able to cast a vote only once and get instantaneous results as the vote
continued. Administrators would be able to activate or deactivate a poll respectively to start
or stop the voting procedure. Both the administrator and the user would be able to see the
activated polls and ongoing votes, but the final results would only be available to the
administrators. Administrators would also be able to upload pictures both for DP and for
14
voting purposes. Finally, both administrators and users would be able to login and logout of
the application system.
3.3.2 Information Architecture
The following flow map was implemented while developing the application.
Figure 3. 1 Flow map of Design Configuration
Following this map, the interfaces sketches were drawn to illustrate how each interface
would look like: text position, buttons, screen messages etc.
3.3.3 Design
The final layouts for interfaces was drawn to give a precise idea of how the developing
process would follow. Adobe Photoshop CC 2017 was used to design the logo and icons,
backgrounds for the interfaces and to pick the various colors to use in the HTML codes in
the next process. The aim was to have a precise indications of how each interface will look
like, and from that, smoothen the coding processes.
15
Figure 3. 2 Designed app icon
3.3.4 Development
Development involved taking the designs and making them functional through codes.
The majority of codes were written so that they could contain both codes for the front end
and back end as to simplify the organization, and database access and management. The
front end programming languages used were HTML, CSS, JavaScript and Java. As the back
end consists of a server, an application, and a database, in order to make them communicate
with each other, PHP codes were used with MySQL to find, save, or change data and serve
it back to the user in front end code. Ajax codes were used to load pages dynamically by
downloading server data in the background.
Table 3. 1 Login interface Back end development
Step 1 Connecting to User dashboard interface
<?PHP session_start(); ?> <?PHP if(isset($_SESSION["id"])) { $location = "Location: "; $location .= $_SESSION["type"] == "voter" ? "user" : "admin"; $location .= "/dashboard.PHP"; header($location); }
Step 2 Reference to the database
<?PHP include("_includes/dbconnection.PHP") ?>
16
Step 3 Back End Script Codes
<?PHP if(isset($_POST["submit"])) { $username = $_POST["username"]; $password = $_POST["password"]; $query = "SELECT * FROM users WHERE username = '{$username}'"; $user_set = mysqli_query($connection, $query); if(!$user_set) { die("Database query failed: " . mysqli_error($connection)); } $user = mysqli_fetch_assoc($user_set); $password = md5($password); if($password == $user["password"]) { $_SESSION["first_name"] = $user["first_name"]; $_SESSION["last_name"] = $user["last_name"]; $_SESSION["username"] = $user["username"]; $_SESSION["id"] = $user["id"]; $_SESSION["type"] = $user["type"]; $_SESSION["photo"] = $user["photo"]; $_SESSION["voted"] = $user["voted"]; switch($user["type"]) { case "admin": header("Location: admin/dashboard.PHP"); break; case "voter": header("Location: user/dashboard.PHP"); break; } exit; } else { $message = "Sorry, your login details are incorrect. Please try again!"; } }
17
Table 3. 2 Login Interface Front end development
Step 1 HTML codes
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Login</title> <link rel="stylesheet" href="_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="_css/styles.css"> <script src="_js/jquery.min.js"></script> <script src="_js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="login_page"> <div class="ui-content"> <img class="icon" src="_img/icon.png" alt="App icon"> <h1>Login to Mobile Voting</h1>
Step 2 Supporting Back End codes
<?PHP if(isset($message)) { echo "<p id=\"message\">" . $message . "</p>"; }
Step 3 HTML Final codes
<form action="login.PHP" method="post" data-ajax="false"> <input required type="text" name="username" placeholder="Username"> <input required type="password" name="password" placeholder="Password"> <input type="submit" value="Login" name="submit"> <p>Have no account? <a data-transition="flip" href="register.PHP">Register</a>.</p> </form> </div> </div> </body> </html>
18
Table 3. 3 Login Interface additional codes
Step 1 CSS codes
@font-face { font-family: 'glyphicon'; src: url('../_fonts/glyphicons-halflings-regular.eot'); src: url('../_fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../_fonts/glyphicons-halflings-regular.woff') format('woff'), url('../_fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../_fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular') format('svg'); font-weight: normal; font-style: normal; } body { background-image: url("../_img/background.png"); } .ui-page { text-shadow: none !important; } .icon { width: 128px; display: block; margin: 0 auto; } #login_page { background: #026A15; text-shadow: none !important; color: #fff; } #login_page a { color: #fff !important; } #login_page input, .ui-input-text, .ui-input-btn { border-radius: 0 !important; text-shadow: none !important; letter-spacing: 2px !important; } #login_page input, .ui-input-text { background: rgba(0,0,0,.1) !important; color: #fff; } #login_page input[type="submit"], .ui-input-btn { background: rgba(255,255,255,.3) !important;
19
} .trigger { background: none !important; } .ui-listview a:after{ content: none; } .ui-listview a:active, .ui-listview a:focus { box-shadow: none !important; background: #026A15 !important; color: #fff !important; text-shadow: none !important; } .ui-listview a span { font-family: glyphicon; margin-right: 10px; float: left; } .cover_photo { height: 180px; background-image: url("../_img/cover_photo1.jpg"); background-size: cover; padding: 16px; margin: -16px; box-sizing: border-box; position: relative; } .cover_photo img { width: 64px; } .cover_photo h1 { position: absolute; bottom: 8px; font-size: 24px; color: #fff; text-shadow: 1px 1px #111; font-weight: normal; } #account img { display: block; width: 128px; margin: auto; border-radius: 128px; border: 5px solid #026A15; } #account p {
20
text-align: center; } #vote li { background: none !important; } #vote fieldset, #vote label { width: 100% !important; box-sizing: border-box; } #vote input[type="radio"] { display: none !important; } #vote .ui-radio-on { background-color: #026A15; color: #fff !important; text-shadow: none !important; } #vote .ui-radio-on:after { content: none; } #vote label { padding: 0 !important; height: 96px; } #vote label img { height: 96px; float: left; margin-right: 10px; } #vote label p { margin: 0; float: left; line-height: 96px; } #admins img { width: 96px; } #candidate { width: 224px; }
21
Step 2 Connecting to the Database
<?PHP define("DB_SERVER", "localhost"); define("DB_USER", "root"); define("DB_PASS", ""); define("DB_NAME", "mobile_voting"); // 1. Create a database connection $connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME); // Test if connection succeeded if(mysqli_connect_errno()) { die("Database connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ")" ); }
In order to easily access and update the database, similar steps were followed to code all
the different interfaces according to the following organization structure:
Figure 3. 3 Organization Structure
Administrator Files
• Containing codes for the administrator end of the application
User Files
• Containing codes for the voter end of the application
Shared Files
• Containing codes shared by both ends: the administrator and the voter
Included Files
• Containing codes for helping processes, yet not displayed to users
22
3.3.5 Directory Structure
Fig
ure
3.
4 D
ire
cto
ry O
rga
niz
ati
on
Str
uctu
re
23
3.4 Connecting the database and the server
XAMPP was used for setting up the localhost server as referred to in the database PHP script
codes from the Intermediate End as shown in Table 3.4.
Table 3. 4 Database PHP script code
Intermediate end database PHP script code
<?PHP define("DB_SERVER", "localhost"); define("DB_USER", "root"); define("DB_PASS", ""); define("DB_NAME", "mobile_voting"); // 1. Create a database connection $connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME); // Test if connection succeeded if(mysqli_connect_errno()) { die("Database connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ")" ); }
PHPMyAdmin was used for creating the MySQL DBMS. For scalability purposes, a personal
database, for instance a portable computer, was picked as the database application, as show
in Figure 3.5.
Figure 3. 5 Database System Division
24
Finally, to access the database from the localhost server in the application, the following
codes were inserted in the main activity in Android Studio:
Table 3. 5 Main activity script codes
Android Studio main activity script codes
public class MainActivity extends Activity { private WebView mWebView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_NO_TITLE); mWebView = new WebView(this); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); } mWebView.loadUrl("http://192.168.1.100/mobile_voting/"); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); this.setContentView(mWebView); } @Override public boolean onKeyDown(final int keyCode, final KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); } private boolean isNetworkAvailable() { ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService( CONNECTIVITY_SERVICE ); NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo(); return activeNetworkInfo != null && activeNetworkInfo.isConnected(); } }
25
CHAPTER 4: TESTS AND RESULTS
This chapter presents the results of tests on the working Android mobile application. It shows
the Administrator and User Interfaces, as well as the different interfaces involved.
4.1 Integration Page
Figure 4. 1 Integration page with application icon
26
4.2 Login Page
Figure 4. 2 Login Page
27
The login option can be used by both the administrator and the user, by entering the names
and registered passwords. Depending on the type of account, the administrator or the user
is directed to the appropriate page as per requested during login.
4.3 Administrator Interfaces
Figure 4.4 shows the different menu options for the administrator. The administrator register
new administrators by filling in names and uploading pictures as shown in Figure 4.4.
Figure 4. 4 New administrator
registration page
Figure 4. 3 Administrator
Menu Page
28
Fig
ure
4.
5 N
ew
po
ll c
rea
tio
n p
ag
es w
ith
na
me
an
d d
ate
op
tio
ns
Fig
ure
4.5
show
s th
e P
oll
creating o
ptions
availa
ble
. The a
dm
inis
trato
r ca
n f
ill in a
poll
title,
as
well
as
sett
ing u
p a
date
,
filli
ng in a
s m
any c
andid
ate
s as
required w
ith I
mages,
editin
g a
nd a
ctiv
ating p
olls
for
voting.
29
4.4 User Interfaces
Figure 4.6 shows the User registration page with its different options. After registration, the
user is directly directed to the vote section where only activated votes appear. The user can
only vote once before being directed to the final page showing results.
Figure 4. 6 Registering Page
Figure 4. 7 Voting Page
30
4.5 Results page
Figure 4. 8 Results page
Figure 4.8 shows the results page, available to the user only until the vote is deactivated by
the administrator. It remains visible to administrators after the vote process unless if deleted.
31
CHAPTER 5: CONCLUSION AND RECOMMANDATIONS
5.1 Conclusion
Mobile applications are expanding exponentially to facilitate various services as smartphones
and tablet computers are now part of the day to day life. The limitations of the software lie
in the expense of constructing fixed systems for platforms as they are constantly upgraded
because of commercial competition. Also high-end skilled engineers to design, build and run
it are needed. Though the process is rendered easier with creation of user-friendly
application building software.
The aim of the project was to develop and implement an Android Mobile Application and
despite a few setbacks in the coding structures, a working app was successfully packaged.
The database and server connectivity was accurate, and the automaticity as well as the
authenticity features were all present. As the system failed sometimes, the project required
a lot of patience and concentration, but despite of all the difficulties, the project in reference
to the objectives stated at the beginning, was completed.
5.1 Recommendations
This project is recommended to organizations, commercial businesses, corporations, private
and public administrations like school, colleges that would be interested in a quick, effective
and automatic feedback system to interconnect between staff and higher ups.
Checking, correcting and updating the codes to improve the application to specific needs
would not only be a great exercise on the topic, but also crucial before deployment. Though
implementing this project wouldn’t be enough, the organizations should consider obtaining
their own Domain Name servers to allow the application users to access the application from
anywhere. The security of the application would also depend on the level of security of their
database. Another recommendation would also be to implement this project for various
platforms and mobile technologies to allow non-Android users to access to this service.
Finally, they should consider creating various group users interfaces for their specific
departments accordingly, with associated administrators.
32
REFERENCES
Brunette Ed (2010). Hello, Android Introducing Google’s Mobile Development
Platform. (3rd Ed). USA: The Pragmatic Bookshelf.
Delisle M. (2006). Creating your MySQL Database: Practical Design Tips and
Techniques. UK: Packt Publishing.
Greenspan J., Bulger B. (2001). MySQL/PHP Database Applications. UK: M&T
Books.
Haverbeke M. (2014). Eloquent JavaScript A Modern Introduction to
Programming (2nd Ed.). USA: No Starch Press.
Hogan B. P. (2013). HTML5 and CSS3 (2nd Ed.). USA: The Pragmatic Bookshelf.
Klauzinski P., Moore J. (2016). Mastering JavaScript Single Page Application
Development. UK: Packt Publishing.
Krause J. (2016). Mastering Windows Server 2016 a comprehensive and practical
guide to Windows Server 2016. UK: Packt Publishing.
Merrifield K. M. (2011). Android 3.0 Application Development Cookbook. UK:
Packt Publishing.
Morris, J. (2011). Android User Interface Development: Beginner's Guide. UK:
Packt Publishing.
Point T. (2015). AJAX. India: Tutorials Point Pvt Ltd.
A1
APPENDICES
Appendix A: Shared Files Script Codes
A1: Logout
<?php //v2: destroy session //assumes nothing else in session to keep session_start(); $_SESSION = array(); if (isset($_COOKIE[session_name()])) { setcookie(session_name(), '', time()-42000, '/'); } session_destroy(); header("Location: index.php");
A2: Register Interface Front End
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Login</title> <link rel="stylesheet" href="_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="_css/styles.css"> <script src="_js/jquery.min.js"></script> <script src="_js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="login_page"> <div class="ui-content"> <h1>Register with Mobile Voting</h1> <?php if(isset($message)) { echo "<p id=\"message\">" . $message . "</p>"; } ?> <form action="register.php" method="post" data-ajax="false">
A2
<input required type="text" name="first_name" placeholder="First name"> <input required type="text" name="last_name" placeholder="Last name"> <input required type="password" name="password" placeholder="Password"> <input required type="password" name="rpassword" placeholder="Confirm Password"> <input type="submit" value="Register" name="submit"> <p>Already registered? <a data-transition="flip" href="login.php">Login</a>.</p> </form> </div> </div> </body> </html>
A3: Register Interface Back End
<?php include("_includes/dbconnection.php"); ?> <?php if(isset($_POST["submit"])) { $first_name = $_POST["first_name"]; $last_name = $_POST["last_name"]; $username = strtolower($first_name . $last_name); $password = $_POST["password"]; $rpassword = $_POST["rpassword"]; $hashed_password = md5($password); $type = "voter"; if($password != $rpassword) { $message = "Sorry, the passwords do not match. Try again!"; } else { $query = "INSERT INTO users(first_name, last_name, "; $query .= "username, password, type) VALUES("; $query .= "'{$first_name}', '{$last_name}', "; $query .= "'{$username}', '{$hashed_password}', "; $query .= "'{$type}')"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query failed: " . mysqli_error($connection)); }
A3
$message = "You have been registered successfully. You can now login with username {$username}"; } }
A4: Vote
<?php session_start(); ?> <?php if(!isset($_SESSION["id"])) {header("Location: index.php");} ?> <?php if($_SESSION["voted"] == 1) { header("Location: index.php"); $location = "Location: "; $location .= $_SESSION["type"] == "voter" ? "user" : "admin"; $location .= "/dashboard.php"; header($location); } ?> <?php include("_includes/dbconnection.php"); ?> <?php if(isset($_POST["submit"])) { foreach ($_POST as $poll => $candidate) { if($_POST[$poll] == "Vote") { continue; } $query = "SELECT vote_count FROM candidates WHERE id = {$_POST[$poll]} LIMIT 1"; $candidate_set = mysqli_query($connection, $query); if(!$candidate_set) { die("Database query 1 failed: " . mysqli_error($connection)); } $candidate = mysqli_fetch_assoc($candidate_set); $votes = $candidate["vote_count"]; $votes++; $query = "UPDATE candidates SET vote_count = {$votes} WHERE id = {$_POST[$poll]}"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query 2 failed: " . mysqli_error($connection)); } $query = "UPDATE users SET voted = 1 WHERE id = {$_SESSION["id"]}";
A4
$result = mysqli_query($connection, $query); if(!$result) { die("Database query 3 failed: " . mysqli_error($connection)); } } $_SESSION["voted"] = 1; $location = "Location: "; $location .= $_SESSION["type"] == "voter" ? "user" : "admin"; $location .= "/dashboard.php"; header($location); } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admin - Dashboard</title> <link rel="stylesheet" href="_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="_css/styles.css"> <script src="_js/jquery.min.js"></script> <script src="_js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Vote</h1> <a href="#" class="trigger" data-rel="back" data-icon="carat-l" data-iconpos="notext">Back</a> </div> <div class="ui-content" id="vote"> <?php $query = "SELECT voted FROM users WHERE id = {$_SESSION["id"]} LIMIT 1"; $user_set = mysqli_query($connection, $query); if(!$user_set) { die("Database query failed: " . mysqli_error($connection)); } $user = mysqli_fetch_assoc($user_set); ?> <form data-ajax="false" action="vote.php" method="post"> <?php
A5
$query = "SELECT * FROM polls WHERE is_active = 1"; $poll_set = mysqli_query($connection, $query); if(!$poll_set) { die("Database query failed: " . mysqli_error($connection)); } while($poll = mysqli_fetch_assoc($poll_set)) { ?> <div data-role="collapsible" data-transition="slidedown"> <h4><?php echo ucfirst($poll["title"]); ?></h4> <h3>Candidates</h3> <?php $query = "SELECT * FROM candidates WHERE poll_id = {$poll["id"]}"; $candidate_set = mysqli_query($connection, $query); if(!$candidate_set) { die("Database query failed: " . mysqli_error($connection)); } while($candidate = mysqli_fetch_assoc($candidate_set)) { ?> <input type="radio" required name="<?php echo $poll["id"]; ?>" id="candidate<?php echo $candidate["id"] ?>" value="<?php echo $candidate["id"] ?>"> <label for="candidate<?php echo $candidate["id"] ?>"> <img src="_img/profile_pics/<?php echo $candidate["photo"] ?>" alt="Candidate"> <p> <?php $name = "{$candidate["first_name"]} {$candidate["last_name"]}"; $name = strlen($name) > 15 ? substr($name, 0, 15) . "..." : $name; echo ucfirst($name); ?> </p> </label> <?php } ?> </div> <?php } if(mysqli_num_rows($poll_set) == 0) {
A6
?> <p>No poll to vote from.</p> <?php } else { ?> <input type="submit" name="submit" value="Vote"> <?php } ?> </form> </div> <?php if(mysqli_num_rows($poll_set) != 0 && $_SESSION["type"] != "admin") { ?> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="user/dashboard.php" data-icon="info">Results</a></li> </ul> </div> </div> <?php } ?> </div> </body> </html>
A5: Board
<?php include("_includes/dbconnection.php"); ?> <h1>Voting in progress...</h1> <h2>Statistics</h2> <?php $query = "SELECT * FROM polls WHERE is_active = 1"; $poll_set = mysqli_query($connection, $query); if(!$poll_set) { die("Database query failed: " . mysqli_error($connection)); } while($poll = mysqli_fetch_assoc($poll_set)) { ?> <div class="ui-corner-all custom-corners"> <div class="ui-bar ui-bar-a"> <h4><?php echo ucfirst($poll["title"]); ?></h4> </div> <div class="ui-body ui-body-a"> <ul data-role="listview"> <?php $query = "SELECT * FROM candidates WHERE poll_id = {$poll["id"]}"; $candidate_set = mysqli_query($connection, $query); if(!$candidate_set) {
A7
die("Database query failed: " . mysqli_error($connection)); } while($candidate = mysqli_fetch_assoc($candidate_set)) { ?> <li> <img src="../_img/profile_pics/<?php echo $candidate["photo"] ?>" alt="Candidate"> <h2><?php echo ucfirst("{$candidate["first_name"]} {$candidate["last_name"]}"); ?></h2> <p>Vote count: <?php echo $candidate["vote_count"] ?></p> </li> <?php } ?> </ul> </div> </div> <?php } ?>
B1
Appendix B: Included Script Codes
B1: Account
<img src="../_img/<?php echo !empty($_SESSION["photo"]) ? "profile_pics/{$_SESSION["photo"]}" : "profile.jpg"; ?>" alt=""> <p>Logged in: <?php echo ucfirst($_SESSION["first_name"]) . " " . ucfirst($_SESSION["last_name"]); ?></p> <a href="../logout.php" rel="external" class="ui-btn">Logout</a>
B2: Database connection
<?php define("DB_SERVER", "localhost"); define("DB_USER", "root"); define("DB_PASS", ""); define("DB_NAME", "mobile_voting"); // 1. Create a database connection $connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME); // Test if connection succeeded if(mysqli_connect_errno()) { die("Database connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ")" ); }
B3: Admin Navigator
<div class="cover_photo"> <img src="../_img/icon.png" alt=""> <h1>Mobile Voting</h1> </div> <ul data-role="listview">
<li><a data-transition="slide" href="dashboard.php"><span>
</span>Home</a></li> <?php if($_SESSION["voted"] == 0) { ?>
<li><a rel="external" data-transition="slide" href="../vote.php"><span>
</span>Vote</a></li> <?php } ?>
<li><a data-transition="slide" href="polls.php"><span>
</span>Polls</a></li> <li><a data-transition="slide" href="new_admin.php"><span>
</span>Admins</a></li>
B2
</ul>
B4: Voter Navigator
<div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="../vote.php" data-icon="tag">Vote</a></li> <li><a href="user/dashboard.php" data-icon="info">Results</a></li> </ul> </div> </div>
C1
Appendix C: Administrator Script Codes
C1: Dashboard
<?php session_start(); ?> <?php if(!isset($_SESSION["id"])) {header("Location: ../index.php");} ?> <?php include("../_includes/dbconnection.php"); ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admin - Dashboard</title> <link rel="stylesheet" href="../_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="../_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="../_css/styles.css"> <script src="../_js/jquery.min.js"></script> <script src="../_js/jquery.mobile-1.4.5.min.js"></script> <script src="../_js/scripts.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Admin Dashboard</h1> <a href="#menu" class="trigger" data-icon="bars" data-iconpos="notext">Menu</a> <a href="#account" class="trigger" data-icon="user" data-iconpos="notext">Account</a> </div> <div class="ui-content" id="board"> <p><img src="../_css/images/ajax-loader.gif" alt=""></p> </div> <div id="menu" data-role="panel"> <?php include("../_includes/admin_nav.php"); ?> </div> <div id="account" data-position="right" data-role="panel"> <?php include("../_includes/account.php"); ?> </div> </div> </body> </html>
C2
C2: New Admin
<?php session_start(); ?> <?php if(!isset($_SESSION["id"])) {header("Location: ../index.php");} ?> <?php include("../_includes/dbconnection.php"); ?> <?php include("../_includes/file_upload_errors.php"); ?> <?php if(isset($_POST["submit"])) { $first_name = $_POST["first_name"]; $last_name = $_POST["last_name"]; $username = strtolower($first_name . $last_name); $password = "1234"; $hashed_password = md5($password); $type = "admin"; $tmp_photo = $_FILES["photo"]["tmp_name"]; $photo = $_FILES["photo"]["name"]; $upload_dir = "../_img/profile_pics"; if(!move_uploaded_file($tmp_photo, $upload_dir. "/" . $photo)) { $error = $_FILES['photo']['error']; $message = $upload_errors[$error]; } else { $message = "Your photo uploaded successfully"; $query = "INSERT INTO users(first_name, last_name, "; $query .= "photo, username, password, type) VALUES("; $query .= "'{$first_name}', '{$last_name}', "; $query .= "'{$photo}', '{$username}', '{$hashed_password}', "; $query .= "'{$type}')"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query failed: " . mysqli_error($connection)); } $message .= "<br>Admin registered successfully. The username is {$username} and the password is {$password}"; } } <!DOCTYPE html> <html>
C3
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admins</title> <link rel="stylesheet" href="../_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="../_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="../_css/styles.css"> <script src="../_js/jquery.min.js"></script> <script src="../_js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Admins</h1> <a href="#menu" class="trigger" data-icon="bars" data-iconpos="notext">Menu</a> <a href="#account" class="trigger" data-icon="user" data-iconpos="notext">Account</a> </div> <div class="ui-content"> <table id="admins" data-role="table" data-mode="notoggle" class="ui-responsive table-stroke"> <tbody> <?php $query = "SELECT * FROM users WHERE type = 'admin'"; $admin_set = mysqli_query($connection, $query); if(!$admin_set) { die("Database query failed: " . mysqli_error($connection)); } while($admin = mysqli_fetch_assoc($admin_set)) { ?> <tr> <td><img src="../_img/profile_pics/<?php echo $admin["photo"] ?>" alt="Admin photo"></td> <td><?php echo ucfirst($admin["first_name"]) . " " . ucfirst($admin["last_name"]); ?></td> <td><a class="ui-btn" href="#update-admin?admin=<?php echo $admin["id"] ?>">Change<br>Details</a></td> </tr>
C4
<?php } if(mysqli_num_rows($admin_set) == 0) { echo "<p id=\"empty_admin\">There are currently no admins registered</p>"; } ?> </tbody> </table> <?php if(isset($message)) { echo "<p id=\"message\">" . $message . "</p>"; } ?> <div data-role="collapsible" data-transition="slidedown"> <h4>Register new admin</h4> <form data-ajax="false" action="new_admin.php" enctype="multipart/form-data" method="post"> <input required type="text" name="first_name" placeholder="Admin first name"> <input required type="text" name="last_name" placeholder="Admin last name"> <input type="file" name="photo"> <input type="submit" name="submit" value="Register Admin"> </form> </div> </div> <div id="menu" data-role="panel"> <?php include("../_includes/admin_nav.php"); ?> </div> <div id="account" data-position="right" data-role="panel"> <?php include("../_includes/account.php"); ?> </div> </div> </body> </html>
C5
C3: Polls
<?php session_start(); ?> <?php if(!isset($_SESSION["id"])) {header("Location: ../index.php");} ?> <?php include("../_includes/dbconnection.php"); ?> <?php if(isset($_GET["poll"]) && isset($_GET["delete"])) { $query = "DELETE FROM polls WHERE id = {$_GET["poll"]};"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query failed: " . mysqli_error($connection)); } $query = "DELETE FROM candidates WHERE poll_id = {$_GET["poll"]};"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query failed: " . mysqli_error($connection)); } header("Location: polls.php"); } if(isset($_GET["poll"]) && isset($_GET["activate"])) { $query = "UPDATE polls SET is_active = {$_GET["activate"]}"; $result = mysqli_query($connection, $query); if(!$result) { die("Database query failed: " . mysqli_error($connection)); } header("Location: polls.php"); } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admin - Polls</title> <link rel="stylesheet" href="../_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="../_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="../_css/styles.css"> <script src="../_js/jquery.min.js"></script> <script src="../_js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page">
C6
<div data-role="header"> <h1>Polls</h1> <a href="#menu" class="trigger" data-icon="bars" data-iconpos="notext">Menu</a> <a href="#account" class="trigger" data-icon="user" data-iconpos="notext">Account</a> </div> <div class="ui-content"> <?php $query = "SELECT * FROM polls"; $poll_set = mysqli_query($connection, $query); if(!$poll_set) { die("Database query failed: " . mysqli_error($connection)); } while($poll = mysqli_fetch_assoc($poll_set)) { ?> <div data-role="collapsible"> <h4><?php echo ucfirst($poll["title"]); ?></h4> <?php $query = "SELECT * FROM candidates WHERE poll_id = {$poll["id"]}"; $candidate_set = mysqli_query($connection, $query); if(!$candidate_set) { die("Database query failed: " . mysqli_error($connection)); } if(mysqli_num_rows($candidate_set) != 0) { ?> <h3>Candidates</h3> <ul data-role="listview" data-inset="true"> <?php while($candidate = mysqli_fetch_assoc($candidate_set)) { ?> <li> <img src="../_img/profile_pics/<?php echo $candidate["photo"]; ?>" alt="Candidate"> <p><?php echo ucfirst("{$candidate["first_name"]} {$candidate["last_name"]}"); ?></p> </li> <?php } ?> </ul> <a href="polls/edit_poll.php?poll=<?php echo $poll["id"]; ?>" class="ui-btn">Edit Poll</a>
C7
<?php if($poll["is_active"] == 0) { ?> <a rel="external" href="polls.php?poll=<?php echo $poll["id"]; ?>&activate=1" class="ui-btn">Activate Poll</a> <?php } else { ?> <a rel="external" href="polls.php?poll=<?php echo $poll["id"]; ?>&activate=0" class="ui-btn">Deactivate Poll</a> <?php } ?> <a rel="external" href="polls.php?poll=<?php echo $poll["id"]; ?>&delete=1" class="ui-btn">Delete Poll</a> <?php } else { echo "Please add some candidates to this poll"; ?> <a rel="external" href="polls/add_candidate.php?poll=<?php echo $poll["id"]; ?>" class="ui-btn">Add Candidates</a> <?php } ?> </div> <?php } if(mysqli_num_rows($poll_set) == 0) { echo "<p>There are currently no polls</p>"; } ?> <?php if(isset($message)) { echo "<p id=\"message\">" . $message . "</p>"; } ?> <a href="polls/new_poll.php" class="ui-btn">Create New Poll</a> </div> <div id="menu" data-role="panel"> <?php include("../_includes/admin_nav.php"); ?> </div> <div id="account" data-position="right" data-role="panel"> <?php include("../_includes/account.php"); ?> </div> </div> </body> </html>
D1
Appendix D: User Script Codes
D1: Dashboard
<?php session_start(); ?> <?php if(!isset($_SESSION["id"])) {header("Location: ../index.php");} ?> <?php session_start(); ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>User - Dashboard</title> <link rel="stylesheet" href="../_css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="../_css/themes/voting-theme.min.css"> <link rel="stylesheet" href="../_css/styles.css"> <script src="../_js/jquery.min.js"></script> <script src="../_js/jquery.mobile-1.4.5.min.js"></script> <script src="../_js/scripts.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Voting Board</h1> <a href="#account" class="trigger ui-btn-right" data-icon="user" data-iconpos="notext">Account</a> </div> <div class="ui-content" id="board"> <p><img src="../_css/images/ajax-loader.gif" alt=""></p> </div> <?php if($_SESSION["voted"] == 0) { ?> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="../vote.php" data-icon="tag">Vote</a></li> </ul> </div> </div> <?php } ?> <div id="account" data-position="right" data-role="panel"> <?php include("../_includes/account.php"); ?> </div></div></body></html>
