SlideShare a Scribd company logo
Nepal College of Information Technology
Web Design Competition
Election Portal
Discover everything election!
Team members
Ashish Tiwari
Nischal Lal Shrestha
Sagar Devkota
July 23, 2018
Abstract
The purpose of Election Portal is to digitize election and election-related activities
in Nepal. Election Portal, therefore, offers a web application which stores candidate
information, election constituency details, latest election results, and various other
information directly related to election and enables the clients to fetch those data
efficiently. The problem statement relies on understanding the proper way to store
all those datasets in the database, solving the complexity involved within and finding
an appropriate interface to provide all these datasets to the visitors. Election Portal
also provides an opportunity to individual volunteers who are authorized to update
election result dataset of a particular constituency in real-time. Each web page of the
Election Portal is equipped with either a search form or a filter form to enhance user’s
ability to get information very quickly.
Keywords— Datasets, Django, Election, Portal, Web Application
Election Portal Ashish T., Nischal L.S., Sagar D.
Contents
Abstract i
1 Introduction 1
2 Problem Statement 1
3 Scope and Limitation 1
4 UML Design 2
4.1 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
4.1.1 Visitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
4.1.2 Volunteer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
4.1.3 Super Admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
4.1.4 Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
4.2 UML Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
5 Task and Time Schedule 5
5.1 GANTT Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
6 Framework of the Development 6
6.1 Logical Architecture Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
7 Tools and Technology Used 7
8 Graphical User Interface of the System 8
8.1 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
8.2 List of Political Party . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
8.3 Details of Political Party . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
8.4 Details of Nominee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
8.5 Details of Constituency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Appendices 10
A Installation 10
A.1 Installing Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
A.2 Creating an isolated Python environment . . . . . . . . . . . . . . . . . . . . 10
A.3 Setting up Election Portal on Virtual Environment . . . . . . . . . . . . . . . 10
Page ii
Election Portal Ashish T., Nischal L.S., Sagar D.
1 Introduction
Elections are hold on virtually every part of the world today to select an individual by a
population to hold public office in a modern democracy. This system has been around from
17th century and it may be observed to fill offices in the legislature, executive and judiciary,
and for regional and local government. In Nepal, elections are observed on three levels: Fed-
eral parliament, state assemblies and for the local government.
Election Portal is a web application for individual visitors, journalists, students to get elec-
tion results and other election-related activities at a single place. Election Portal will provide
opportunity to individual volunteers to update the election datasets, election result in a real
time.
2 Problem Statement
The problem statement for Election Portal is based on understanding and developing a
effective way to store all the datasets of election-related activities in a profound way, solving
all the complexity involved with the datasets. It also relies on building a interface to filter
and search the election datasets through the database in a effective manner.
3 Scope and Limitation
Election Portal aims to monitor all election-related activities of Nepal, but due to the time
limit and overload works, some features were postponed for next version. Election Portal
fulfills all the requirements identified in the requirement analysis phase, but, there were some
unavoidable limitations. First, because of the overload works, we were not able to monitor
Local Level Elections. Second, because of the time limit, many web pages lack either search
form or filter form.
Page 1
Election Portal Ashish T., Nischal L.S., Sagar D.
4 UML Design
4.1 Use Case Diagram
Figure 1: Use Case Diagram of Election Portal
The use case diagram of Election Portal contains the scope of the system and it lists all
the functionalities offered by the system. We have identified the following actors:
4.1.1 Visitor
Visitor represents as the primary actor for this system. Vistors can browse web pages, view
current results, search and filter candidates, constituencies, results.
Page 2
Election Portal Ashish T., Nischal L.S., Sagar D.
4.1.2 Volunteer
Volunteer act to update election results, add new datasets in the system. Volunteer needs
to register first and then login to make changes in the system.
4.1.3 Super Admin
Super Admin regulates the database. Super Admin approves new volunteer, remove volunteer
and limit their access to the database.
4.1.4 Server
A Server act to store the volunteers authentications information. Server acts to provides the
web pages and datasets from database to users on their requests throuh a web browser.
Based on the above use case diagram, the following group of activities have been identi-
fied.
1. Visitors enters the web portal and browse various web pages.
2. Visitors can either search or filter the datasets through form.
3. Volunteer can Create, Read, Update and Delete datasets from the database.
4. Super Admin can approve new volunteer, limit access to volunteer and delete existing
volunteer.
Page 3
Election Portal Ashish T., Nischal L.S., Sagar D.
4.2 UML Class Diagram
Figure 2: Class Diagram of Nominee
Page 4
Election Portal Ashish T., Nischal L.S., Sagar D.
Figure 3: Class Diagram for Article and Volunteer
5 Task and Time Schedule
5.1 GANTT Chart
Figure 4: GANTT Chart
Page 5
Election Portal Ashish T., Nischal L.S., Sagar D.
6 Framework of the Development
6.1 Logical Architecture Diagram
There are three layers between User Interface and Database. Those are:
1. Data Access Layer(models.py)
This layers defines everything about the data: how to access data, how we can validate
data, what type of behaviors our data will show, and what type of relationship exists
between different data.
2. Presentation Layer(Templates)
Presentation layer will define how something should be displayed on a Web Page.
Presentation layer takes information from the database and display it to the user in a
Human-Understandable-Format. Presentation layer is completely free of any king of
logic.
3. Business Logic Layer(views.py)
Business Logic Layer is a bridge between models and templates. It provides appropriate
way to supply specific templates requested by the data access layer.
Page 6
Election Portal Ashish T., Nischal L.S., Sagar D.
7 Tools and Technology Used
1. Django
We had used Django 2.0.7 to handle backend of Election Portal. Django is a high-
level Python Web framework that encourages rapid development and clean, pragmatic
design. Built by experienced developers, it takes care of much of the hassle of Web
development, so you can focus on writing your app without needing to reinvent the
wheel. It’s free and open source
2. U.S. Web Design System
A design system for the federal government. The design standards by US Web Design
System are backed by user research.
3. SQLite
SQLite is already installed in Django. So we did not install it from outside. SQLite is a
self-contained, high-reliability, embedded, full-featured, public-domain, SQL database
engine. SQLite is the most used database engine in the world.
4. JQuery
We had used JQuery 3.3.1 in out project. JQuery is a fast and concise JavaScript
Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery
simplifies HTML document traversing, event handling, animating, and Ajax interac-
tions for rapid web development.
5. HTML and CSS
HTML, HyperText Markup Language, gives content structure and meaning by defining
that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style
Sheets, is a presentation language created to style the appearance of content—using,
for example, fonts or colors.
Page 7
Election Portal Ashish T., Nischal L.S., Sagar D.
8 Graphical User Interface of the System
Election Portal has a GUI so that visitors can easily browse the portal with the least effort.
Every page has a header and footer. The header consists of the Navigation menu so that
visitors can navigate throughout the webpage without being lost.
8.1 Homepage
Besides header and footer, Homepage of Election Portal has a search form which allows
visitors to search election datasets without pain. The homepage has a map, so any users can
filter the datasets via district.
8.2 List of Political Party
All the political parties registered will be listed here along with their party image. Given
figure shows same image because we don’t have update the database with real datas.
Page 8
Election Portal Ashish T., Nischal L.S., Sagar D.
8.3 Details of Political Party
8.4 Details of Nominee
8.5 Details of Constituency
Page 9
Election Portal Ashish T., Nischal L.S., Sagar D.
Appendices
A Installation
A.1 Installing Python
Election Portal is a django app. Django is written in Python, so it requires us to install
Python to run the app. For the further note, Django requires Python 2.3 or higher.
Note: If you’re on Linux or Mac OS X, you probably already have Python installed.
A.2 Creating an isolated Python environment
A virtual environment (also called a virtualenv) is like a private box where developers can
stuff useful computer code into for a project they’re working on. It is recommended to use
virtualenv to create isolated Python environments, because it enables the use of different
package versions for different projects, which is far more practical than installing Python
packages system wide.
1. After installing Python Interpreter, we need to install pip which is a package manage-
ment system used to install and manage software packages written in Python.
2. Let us install virtualenv which is required to set up different environments and create
an environment named myenvironment
pip install virtualenv
virtualenv myenvironment
A.3 Setting up Election Portal on Virtual Environment
Once we’ve installed and created the virtual environment, the environments needs to be
activated and the dependencies for the application has to be installed. In the next few steps,
we’ll learn how to install Election Portal on your system.
1. Now we’ve created an virtual environment, it has to be activated which is done by
source myenvironment/bin/activate
2. Once the virtual environment is active, we can install the dependencies of the Elec-
tion Portal app which are located at requirements.txt. Election Portal app needs
following packages to fully function.
chardet ==3.0.4
Django==2.0.7
doc8 ==0.8.0
d o c u t i l s ==0.14
pbr==4.0.4
pkg−resources ==0.0.0
pytz==2018.5
restructuredtext −l i n t ==1.1.3
six ==1.11.0
stevedore ==1.28.0
django−gfklookupwidget
Page 10
Election Portal Ashish T., Nischal L.S., Sagar D.
All the dependencies can be installed by
pip install -r requirements.txt
The above steps may require an active Internet Connection.
3. Change Directory to the Base Directory of Election Portal application i.e., the folder
which consists of manage.py.
4. Then, run the following commands in your terminal.
python manage.py collectstatic
python manage.py makemigrations
python manage.py migrate
5. We are all set now. Let’s verify if Election Portal works.
python manage.py runserver
Page 11
Election Portal Ashish T., Nischal L.S., Sagar D.
References
[1] Wikipedia - Use Case Diagram
https://en.wikipedia.org/wiki/Use-case-diagram
[2] Wikipedia - Class Diagram
https://en.wikipedia.org/wiki/Class-diagram
[3] Fedrous - Web Design Report
https://slideshare.net/ferdous/web-design-project-report
[4] Django Documentation:,
https://docs.djangoproject.com/en/2.0/
Page 12

More Related Content

Similar to Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Shrestha, Sagar Devkota)

Final project prosal.docx
Final project prosal.docxFinal project prosal.docx
Final project prosal.docxShangaviS2
 
A Report On Online Crime Reporting Guidance By - Prepared By Muhammad Shoaib
A Report On Online Crime Reporting Guidance By  - Prepared By Muhammad ShoaibA Report On Online Crime Reporting Guidance By  - Prepared By Muhammad Shoaib
A Report On Online Crime Reporting Guidance By - Prepared By Muhammad ShoaibKayla Smith
 
ONLINE VOTING SYSTEM SE Project for vote
ONLINE VOTING SYSTEM SE Project for voteONLINE VOTING SYSTEM SE Project for vote
ONLINE VOTING SYSTEM SE Project for voteRaunakRastogi4
 
Local Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSLocal Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSYogeshIJTSRD
 
REAL TIME POLLING SYSTEM
REAL TIME POLLING SYSTEMREAL TIME POLLING SYSTEM
REAL TIME POLLING SYSTEMIRJET Journal
 
Etaxi Documentation
Etaxi DocumentationEtaxi Documentation
Etaxi DocumentationM.Saber
 
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKET
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKETSTOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKET
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKETIRJET Journal
 
SOFTWARE DESIGN .docx
SOFTWARE DESIGN                                                   .docxSOFTWARE DESIGN                                                   .docx
SOFTWARE DESIGN .docxrronald3
 
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)vivekkaushik795
 
Cs 607-final-report
Cs 607-final-reportCs 607-final-report
Cs 607-final-reportamiangshu
 
Online Polling System Proposal
Online Polling System ProposalOnline Polling System Proposal
Online Polling System ProposalStephen Enunwah
 
IRJET - Block Chain Enabled E-Voting System
IRJET -  	  Block Chain Enabled E-Voting SystemIRJET -  	  Block Chain Enabled E-Voting System
IRJET - Block Chain Enabled E-Voting SystemIRJET Journal
 
Online-Voting-System.doc
Online-Voting-System.docOnline-Voting-System.doc
Online-Voting-System.docShangaviS2
 
Software development life cycle
Software development life cycle Software development life cycle
Software development life cycle shefali mishra
 
Event Visualization with OpenStreetMap Data, Interdisciplinary Project
Event Visualization with OpenStreetMap Data, Interdisciplinary ProjectEvent Visualization with OpenStreetMap Data, Interdisciplinary Project
Event Visualization with OpenStreetMap Data, Interdisciplinary ProjectBibek Shrestha
 
online Blood Bank management system
online Blood Bank management system online Blood Bank management system
online Blood Bank management system amarsajid
 

Similar to Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Shrestha, Sagar Devkota) (20)

Final project prosal.docx
Final project prosal.docxFinal project prosal.docx
Final project prosal.docx
 
A Report On Online Crime Reporting Guidance By - Prepared By Muhammad Shoaib
A Report On Online Crime Reporting Guidance By  - Prepared By Muhammad ShoaibA Report On Online Crime Reporting Guidance By  - Prepared By Muhammad Shoaib
A Report On Online Crime Reporting Guidance By - Prepared By Muhammad Shoaib
 
ONLINE VOTING SYSTEM SE Project for vote
ONLINE VOTING SYSTEM SE Project for voteONLINE VOTING SYSTEM SE Project for vote
ONLINE VOTING SYSTEM SE Project for vote
 
Local Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSLocal Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMS
 
Job portal
Job portalJob portal
Job portal
 
bus reservation.pptx
bus reservation.pptxbus reservation.pptx
bus reservation.pptx
 
Touch With Industry
Touch With IndustryTouch With Industry
Touch With Industry
 
REAL TIME POLLING SYSTEM
REAL TIME POLLING SYSTEMREAL TIME POLLING SYSTEM
REAL TIME POLLING SYSTEM
 
Etaxi Documentation
Etaxi DocumentationEtaxi Documentation
Etaxi Documentation
 
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKET
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKETSTOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKET
STOCKSENTIX: A MACHINE LEARNING APPROACH TO STOCKMARKET
 
SOFTWARE DESIGN .docx
SOFTWARE DESIGN                                                   .docxSOFTWARE DESIGN                                                   .docx
SOFTWARE DESIGN .docx
 
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)
Synopsis_rt_v_k.pptx(fgfefefehgftgegfeh)
 
Cs 607-final-report
Cs 607-final-reportCs 607-final-report
Cs 607-final-report
 
Online final report
Online final reportOnline final report
Online final report
 
Online Polling System Proposal
Online Polling System ProposalOnline Polling System Proposal
Online Polling System Proposal
 
IRJET - Block Chain Enabled E-Voting System
IRJET -  	  Block Chain Enabled E-Voting SystemIRJET -  	  Block Chain Enabled E-Voting System
IRJET - Block Chain Enabled E-Voting System
 
Online-Voting-System.doc
Online-Voting-System.docOnline-Voting-System.doc
Online-Voting-System.doc
 
Software development life cycle
Software development life cycle Software development life cycle
Software development life cycle
 
Event Visualization with OpenStreetMap Data, Interdisciplinary Project
Event Visualization with OpenStreetMap Data, Interdisciplinary ProjectEvent Visualization with OpenStreetMap Data, Interdisciplinary Project
Event Visualization with OpenStreetMap Data, Interdisciplinary Project
 
online Blood Bank management system
online Blood Bank management system online Blood Bank management system
online Blood Bank management system
 

More from Nischal Lal Shrestha

Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...
Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...
Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...Nischal Lal Shrestha
 
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...Nischal Lal Shrestha
 
Demonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsDemonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsNischal Lal Shrestha
 
Approximating Value of pi(Π) using Monte Carlo Iterative Method
Approximating Value of pi(Π) using Monte Carlo Iterative MethodApproximating Value of pi(Π) using Monte Carlo Iterative Method
Approximating Value of pi(Π) using Monte Carlo Iterative MethodNischal Lal Shrestha
 
Demonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsDemonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsNischal Lal Shrestha
 
A realtime classic chess game [proposal]
A realtime classic chess game [proposal]A realtime classic chess game [proposal]
A realtime classic chess game [proposal]Nischal Lal Shrestha
 

More from Nischal Lal Shrestha (6)

Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...
Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...
Comparative Analysis of ML and DL Models for Gender Prediction in Devanagari ...
 
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...
A Real-time Classroom Attendance System Utilizing Viola–Jones for Face Detect...
 
Demonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsDemonstrating Various Mathematical Models
Demonstrating Various Mathematical Models
 
Approximating Value of pi(Π) using Monte Carlo Iterative Method
Approximating Value of pi(Π) using Monte Carlo Iterative MethodApproximating Value of pi(Π) using Monte Carlo Iterative Method
Approximating Value of pi(Π) using Monte Carlo Iterative Method
 
Demonstrating Various Mathematical Models
Demonstrating Various Mathematical ModelsDemonstrating Various Mathematical Models
Demonstrating Various Mathematical Models
 
A realtime classic chess game [proposal]
A realtime classic chess game [proposal]A realtime classic chess game [proposal]
A realtime classic chess game [proposal]
 

Recently uploaded

National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxAlecAnidul
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designGOWSIKRAJA PALANISAMY
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfSudhanshuMandlik
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.rrimika1
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentationssuser8fae18
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxadityakushalsaha
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyJaime Brown
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasanasabutalha2013
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themmadhavlakhanpal29
 
BIT- Pinal .H. Prajapati Graphic Designer
BIT- Pinal .H. Prajapati  Graphic DesignerBIT- Pinal .H. Prajapati  Graphic Designer
BIT- Pinal .H. Prajapati Graphic Designerbitwgin12
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationJaime Brown
 
The Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to FashionThe Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to FashionPixel poets
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 

Recently uploaded (16)

National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptx
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
BIT- Pinal .H. Prajapati Graphic Designer
BIT- Pinal .H. Prajapati  Graphic DesignerBIT- Pinal .H. Prajapati  Graphic Designer
BIT- Pinal .H. Prajapati Graphic Designer
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
The Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to FashionThe Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to Fashion
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 

Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Shrestha, Sagar Devkota)

  • 1. Nepal College of Information Technology Web Design Competition Election Portal Discover everything election! Team members Ashish Tiwari Nischal Lal Shrestha Sagar Devkota July 23, 2018
  • 2. Abstract The purpose of Election Portal is to digitize election and election-related activities in Nepal. Election Portal, therefore, offers a web application which stores candidate information, election constituency details, latest election results, and various other information directly related to election and enables the clients to fetch those data efficiently. The problem statement relies on understanding the proper way to store all those datasets in the database, solving the complexity involved within and finding an appropriate interface to provide all these datasets to the visitors. Election Portal also provides an opportunity to individual volunteers who are authorized to update election result dataset of a particular constituency in real-time. Each web page of the Election Portal is equipped with either a search form or a filter form to enhance user’s ability to get information very quickly. Keywords— Datasets, Django, Election, Portal, Web Application
  • 3. Election Portal Ashish T., Nischal L.S., Sagar D. Contents Abstract i 1 Introduction 1 2 Problem Statement 1 3 Scope and Limitation 1 4 UML Design 2 4.1 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4.1.1 Visitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4.1.2 Volunteer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 4.1.3 Super Admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 4.1.4 Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 4.2 UML Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 5 Task and Time Schedule 5 5.1 GANTT Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 6 Framework of the Development 6 6.1 Logical Architecture Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 7 Tools and Technology Used 7 8 Graphical User Interface of the System 8 8.1 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 8.2 List of Political Party . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 8.3 Details of Political Party . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 8.4 Details of Nominee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 8.5 Details of Constituency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Appendices 10 A Installation 10 A.1 Installing Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 A.2 Creating an isolated Python environment . . . . . . . . . . . . . . . . . . . . 10 A.3 Setting up Election Portal on Virtual Environment . . . . . . . . . . . . . . . 10 Page ii
  • 4. Election Portal Ashish T., Nischal L.S., Sagar D. 1 Introduction Elections are hold on virtually every part of the world today to select an individual by a population to hold public office in a modern democracy. This system has been around from 17th century and it may be observed to fill offices in the legislature, executive and judiciary, and for regional and local government. In Nepal, elections are observed on three levels: Fed- eral parliament, state assemblies and for the local government. Election Portal is a web application for individual visitors, journalists, students to get elec- tion results and other election-related activities at a single place. Election Portal will provide opportunity to individual volunteers to update the election datasets, election result in a real time. 2 Problem Statement The problem statement for Election Portal is based on understanding and developing a effective way to store all the datasets of election-related activities in a profound way, solving all the complexity involved with the datasets. It also relies on building a interface to filter and search the election datasets through the database in a effective manner. 3 Scope and Limitation Election Portal aims to monitor all election-related activities of Nepal, but due to the time limit and overload works, some features were postponed for next version. Election Portal fulfills all the requirements identified in the requirement analysis phase, but, there were some unavoidable limitations. First, because of the overload works, we were not able to monitor Local Level Elections. Second, because of the time limit, many web pages lack either search form or filter form. Page 1
  • 5. Election Portal Ashish T., Nischal L.S., Sagar D. 4 UML Design 4.1 Use Case Diagram Figure 1: Use Case Diagram of Election Portal The use case diagram of Election Portal contains the scope of the system and it lists all the functionalities offered by the system. We have identified the following actors: 4.1.1 Visitor Visitor represents as the primary actor for this system. Vistors can browse web pages, view current results, search and filter candidates, constituencies, results. Page 2
  • 6. Election Portal Ashish T., Nischal L.S., Sagar D. 4.1.2 Volunteer Volunteer act to update election results, add new datasets in the system. Volunteer needs to register first and then login to make changes in the system. 4.1.3 Super Admin Super Admin regulates the database. Super Admin approves new volunteer, remove volunteer and limit their access to the database. 4.1.4 Server A Server act to store the volunteers authentications information. Server acts to provides the web pages and datasets from database to users on their requests throuh a web browser. Based on the above use case diagram, the following group of activities have been identi- fied. 1. Visitors enters the web portal and browse various web pages. 2. Visitors can either search or filter the datasets through form. 3. Volunteer can Create, Read, Update and Delete datasets from the database. 4. Super Admin can approve new volunteer, limit access to volunteer and delete existing volunteer. Page 3
  • 7. Election Portal Ashish T., Nischal L.S., Sagar D. 4.2 UML Class Diagram Figure 2: Class Diagram of Nominee Page 4
  • 8. Election Portal Ashish T., Nischal L.S., Sagar D. Figure 3: Class Diagram for Article and Volunteer 5 Task and Time Schedule 5.1 GANTT Chart Figure 4: GANTT Chart Page 5
  • 9. Election Portal Ashish T., Nischal L.S., Sagar D. 6 Framework of the Development 6.1 Logical Architecture Diagram There are three layers between User Interface and Database. Those are: 1. Data Access Layer(models.py) This layers defines everything about the data: how to access data, how we can validate data, what type of behaviors our data will show, and what type of relationship exists between different data. 2. Presentation Layer(Templates) Presentation layer will define how something should be displayed on a Web Page. Presentation layer takes information from the database and display it to the user in a Human-Understandable-Format. Presentation layer is completely free of any king of logic. 3. Business Logic Layer(views.py) Business Logic Layer is a bridge between models and templates. It provides appropriate way to supply specific templates requested by the data access layer. Page 6
  • 10. Election Portal Ashish T., Nischal L.S., Sagar D. 7 Tools and Technology Used 1. Django We had used Django 2.0.7 to handle backend of Election Portal. Django is a high- level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source 2. U.S. Web Design System A design system for the federal government. The design standards by US Web Design System are backed by user research. 3. SQLite SQLite is already installed in Django. So we did not install it from outside. SQLite is a self-contained, high-reliability, embedded, full-featured, public-domain, SQL database engine. SQLite is the most used database engine in the world. 4. JQuery We had used JQuery 3.3.1 in out project. JQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interac- tions for rapid web development. 5. HTML and CSS HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors. Page 7
  • 11. Election Portal Ashish T., Nischal L.S., Sagar D. 8 Graphical User Interface of the System Election Portal has a GUI so that visitors can easily browse the portal with the least effort. Every page has a header and footer. The header consists of the Navigation menu so that visitors can navigate throughout the webpage without being lost. 8.1 Homepage Besides header and footer, Homepage of Election Portal has a search form which allows visitors to search election datasets without pain. The homepage has a map, so any users can filter the datasets via district. 8.2 List of Political Party All the political parties registered will be listed here along with their party image. Given figure shows same image because we don’t have update the database with real datas. Page 8
  • 12. Election Portal Ashish T., Nischal L.S., Sagar D. 8.3 Details of Political Party 8.4 Details of Nominee 8.5 Details of Constituency Page 9
  • 13. Election Portal Ashish T., Nischal L.S., Sagar D. Appendices A Installation A.1 Installing Python Election Portal is a django app. Django is written in Python, so it requires us to install Python to run the app. For the further note, Django requires Python 2.3 or higher. Note: If you’re on Linux or Mac OS X, you probably already have Python installed. A.2 Creating an isolated Python environment A virtual environment (also called a virtualenv) is like a private box where developers can stuff useful computer code into for a project they’re working on. It is recommended to use virtualenv to create isolated Python environments, because it enables the use of different package versions for different projects, which is far more practical than installing Python packages system wide. 1. After installing Python Interpreter, we need to install pip which is a package manage- ment system used to install and manage software packages written in Python. 2. Let us install virtualenv which is required to set up different environments and create an environment named myenvironment pip install virtualenv virtualenv myenvironment A.3 Setting up Election Portal on Virtual Environment Once we’ve installed and created the virtual environment, the environments needs to be activated and the dependencies for the application has to be installed. In the next few steps, we’ll learn how to install Election Portal on your system. 1. Now we’ve created an virtual environment, it has to be activated which is done by source myenvironment/bin/activate 2. Once the virtual environment is active, we can install the dependencies of the Elec- tion Portal app which are located at requirements.txt. Election Portal app needs following packages to fully function. chardet ==3.0.4 Django==2.0.7 doc8 ==0.8.0 d o c u t i l s ==0.14 pbr==4.0.4 pkg−resources ==0.0.0 pytz==2018.5 restructuredtext −l i n t ==1.1.3 six ==1.11.0 stevedore ==1.28.0 django−gfklookupwidget Page 10
  • 14. Election Portal Ashish T., Nischal L.S., Sagar D. All the dependencies can be installed by pip install -r requirements.txt The above steps may require an active Internet Connection. 3. Change Directory to the Base Directory of Election Portal application i.e., the folder which consists of manage.py. 4. Then, run the following commands in your terminal. python manage.py collectstatic python manage.py makemigrations python manage.py migrate 5. We are all set now. Let’s verify if Election Portal works. python manage.py runserver Page 11
  • 15. Election Portal Ashish T., Nischal L.S., Sagar D. References [1] Wikipedia - Use Case Diagram https://en.wikipedia.org/wiki/Use-case-diagram [2] Wikipedia - Class Diagram https://en.wikipedia.org/wiki/Class-diagram [3] Fedrous - Web Design Report https://slideshare.net/ferdous/web-design-project-report [4] Django Documentation:, https://docs.djangoproject.com/en/2.0/ Page 12