1. LOGO
Secure Visual Algorithm
Simulator

2. Company Logo

3. Visualization gains more attention than theoretical study and it is an easy wayVisualization gains more attention than theoretical study and it is an easy way
of learning process. VISUALIZATION of algorithms’ sequence is anof learning process. VISUALIZATION of algorithms’ sequence is an
important process to learn various hidden steps, which are involvedimportant process to learn various hidden steps, which are involved
dynamically. The advantages of visualizing algorithms are: Easy to learn withdynamically. The advantages of visualizing algorithms are: Easy to learn with
different set data,different set data,
Understand hidden steps of algorithms, Memory usages and Time managementUnderstand hidden steps of algorithms, Memory usages and Time management
strategy.The secure login can be made by using various hashing algorithmsstrategy.The secure login can be made by using various hashing algorithms
which will providing security and intergrity of user thus login module useswhich will providing security and intergrity of user thus login module uses
hashing alogorithm Web applications, needing user authentication, typicallyhashing alogorithm Web applications, needing user authentication, typically
validate the input passwords by comparing them to the real passwords, whichvalidate the input passwords by comparing them to the real passwords, which
are commonly stored in the company’s private databases. If the database andare commonly stored in the company’s private databases. If the database and
hence these passwords were to become compromised, the attackers would havehence these passwords were to become compromised, the attackers would have
unlimited access to these users’personal. Nowadays, databases use a hashunlimited access to these users’personal. Nowadays, databases use a hash
algorithm to secure the stored passwords but there are still security breaches.algorithm to secure the stored passwords but there are still security breaches.
Literature SurveyLiterature Survey

4. Problem Statement
The way the human brain processes information, it is faster for
people to grasp the meaning of many data points when they are
displayed in charts and graphs rather than poring over piles of
spreadsheets or reading pages and pages of reports. Many of the
algorithms are hard to understand thus visualization of such algorithm
makes easier to understand. The purpose of data visualization is to
simplify data values, promote the understanding of them, and
communicate important concepts and ideas. Thus we tried to
Implement of such algorithm for the better understanding .

5. Solution ApproachSolution Approach
This web based project on visualization can be seen in the light of being littleThis web based project on visualization can be seen in the light of being little
like a secure web portal which will illustrate visual simulation for some of thelike a secure web portal which will illustrate visual simulation for some of the
algorithms. The website uses an innovative authentication mechanism i.ealgorithms. The website uses an innovative authentication mechanism i.e
using cryptography using a file and embedding for the login process henceusing cryptography using a file and embedding for the login process hence
making the environment of operation a very secure one. The increasedmaking the environment of operation a very secure one. The increased
security will make the user portal less prone to attacks and hacking.security will make the user portal less prone to attacks and hacking.
The main aim is implement the new Authentication mechanism in anThe main aim is implement the new Authentication mechanism in an
efficient way so as to increase the security of the web portalefficient way so as to increase the security of the web portal
To develop an interactive Algorithm simulator so that working of algorithmTo develop an interactive Algorithm simulator so that working of algorithm
can be understood in an easier waycan be understood in an easier way

6. Implementation Of AlgorithmImplementation Of Algorithm
The secure login module makes use of encryption and embedding. The pass- phraseThe secure login module makes use of encryption and embedding. The pass- phrase
which is submitted by the user at the time of registration is used to generate a hashwhich is submitted by the user at the time of registration is used to generate a hash
code using MD5 cryptographic hash algorithm. This 128 bit code embedded in filecode using MD5 cryptographic hash algorithm. This 128 bit code embedded in file
and the position of embedding is different for different users.and the position of embedding is different for different users.
The md5() function uses the RSA Data Security, Inc. MD5 Message-DigestThe md5() function uses the RSA Data Security, Inc. MD5 Message-Digest
Algorithm. The MD5 Message-Digest algorithm takes as iput a message ofAlgorithm. The MD5 Message-Digest algorithm takes as iput a message of
arbitrary length and produces an output of a 128-bit “fingerprint” or “ messagearbitrary length and produces an output of a 128-bit “fingerprint” or “ message
digest” of the input. The MD5 algorithm is intended for digital signaturedigest” of the input. The MD5 algorithm is intended for digital signature
applications, where a large file must be “compressed” in a secure manner beforeapplications, where a large file must be “compressed” in a secure manner before
being encrypted with a private (secret) key under a public- key cryptosystem suchbeing encrypted with a private (secret) key under a public- key cryptosystem such
as RSA.as RSA.
This function returns the calculated MD5 hash on success, or FALSE on failure.This function returns the calculated MD5 hash on success, or FALSE on failure.

7. The Algorithm simulator module uses JQuery which is a javascript library. QueryThe Algorithm simulator module uses JQuery which is a javascript library. Query
is free,open source software , dual-licensed under the MIT License or the GNUis free,open source software , dual-licensed under the MIT License or the GNU
General Public License. Jquery’s syntax is designed to make it easier to navigateGeneral Public License. Jquery’s syntax is designed to make it easier to navigate
a document , select DOM elements, create animations, handle events, anda document , select DOM elements, create animations, handle events, and
develop Ajax applications . Jquery also provides capabilities for developers todevelop Ajax applications . Jquery also provides capabilities for developers to
create plug-ins on top of javascript library. This enables developers to createcreate plug-ins on top of javascript library. This enables developers to create
abstractions for low-level interaction and animation, advanced effects and high-abstractions for low-level interaction and animation, advanced effects and high-
level, theme-able widgets. The module approach to the jQuery library allows thelevel, theme-able widgets. The module approach to the jQuery library allows the
creation of powerful dynamic web pages and web applications.creation of powerful dynamic web pages and web applications.
.animate().animate()
.animate(properties [, duration] [, easing] [,complete]).animate(properties [, duration] [, easing] [,complete])
Properties :Properties : A map of CSS properties that the animation will move toward.A map of CSS properties that the animation will move toward.
Duration:Duration: A string or number determining how long the animation will run.A string or number determining how long the animation will run.
Easing:Easing: A string indicating which easing function to use for the transition.A string indicating which easing function to use for the transition.
Complete:Complete: A function to call once the animation is complete.A function to call once the animation is complete.

8. The web project is developed using the three tier architecture. The layers are:The web project is developed using the three tier architecture. The layers are:
Front EndFront End: In this the layer, the use of Client Side scripting language like HTML: In this the layer, the use of Client Side scripting language like HTML
and javascript is used to display the web pages.and javascript is used to display the web pages.
Business LogicBusiness Logic: The technology used to program the business logic is PHP. PHP: The technology used to program the business logic is PHP. PHP
is an open source programming language.is an open source programming language.
Database Layer:Database Layer: The database used for the web project is MYSQL. This layerThe database used for the web project is MYSQL. This layer
acts as an interface between the business logic and the database.acts as an interface between the business logic and the database.
System HandlingSystem Handling

9. Data Flow DiagramData Flow Diagram

10. ScreenshotsScreenshots

13. Module1 : Login Module
This module consists of two operations, Registration and Login. In this
project the authentication mechanism has been innovated by using an
ENCRYPTED FILE to login by the user. The File is created by and
provided to user on the time of registration. The main concepts used are
Cryptography and embedding File Handling.
INPUT/OUTPUT
In case of the registration process the USER DETAIL is the Input and
the Encrypted login File will get downloaded on your computer. For the
Login process the LOGIN FILE and the emailed will be the input and
output will be redirection to the User Portal on successful
authentication, otherwise an error message.
Project ModulesProject Modules

14. Module2 : User Portal
User portal provides the user with an interface so that the user can browse
the web portal. These modules functions are redirection to various pages
on user requests, uploading of profile picture , feedback and Logout
operation.
INPUT/OUTPUT
The input/ output to this module are:
•Request for a particular page, the user is directed to that page if the user
session is valid else the user is directed to the home page.
•Request for changing profile picture, the picture is uploaded or the error
is displayed if the image is invalid or the size is too large.
•Request for Logout, the user session is destroyed and the user is directed
to the home page.

15. Module3: Algorithm Simulator
Simulation is the imitation of some real thing available, state of affairs
or process. The act of simulating something generally entails
representing certain key characteristics or behavious of a selected
physical or abstract system.
Algorithm Simulator will be able an interactive tool which will visually
explain the working of some of the already known algorithms. The task
is accomplished by converting the simulation into a set of animating
patterns. The animation will be performed using JAVASCRIPT on the
web page.
INPUT/OUTPUT
•The inputs will be input to the algorithm which is to be simulated. The
output will be an interactive simulation of algorithm using Javascript
Animation.

16. Module 4: Online examination portal
Online examination is a level examination portal. It can also serve the
purpose of conducting online examination on a large scale as the web
portal is highly secure.
INPUT/OUTPUT
The input to the module will be the REQUEST to take an exam. The level
is checked in the database and the output is START EXAM or NOT
ELIGIBLE and need to clear previous level

17. The project Secure Visual Algorithm simulator will fulfill a wide
range of aims and objectives.
This web based project on visualization can be seen in the light of
being little like a secure web portal which will illustrate visual
simulation for some of the algorithms. The website uses an
innovative authentication mechanism i.e using cryptography using
a file and embedding for the login process hence making the
environment of operation a very secure one. The increased
security will make the user portal less prone to attacks and
hacking.
ConclusionConclusion