37328317
Description
Mind Map by Rebbecca Stanley, updated 7 months ago
|
Created by Rebbecca Stanley
over 1 year ago
|
|
Pokébase - Developer Environment
- Overall user problem
- Users must be able to view and search for Pokémon data in a web app.
- All Pokémon data is stored in a table that is presented in a web app.
- The data should be requested from the provided Excel
workbook and sent to the HTML to be displayed on the web app.
- The data should be requested from the provided Excel
workbook and sent to the HTML to be displayed on the web app.
- All Pokémon data is stored in a table that is presented in a web app.
- Users must be able to view and search for Pokémon data in a web app.
- Languages used in the app
- Front-end
- HTML: create
structure of
page and
database table
- Use <table> tag to
create empty table.
Use "<form action="{{
url_for('add') }}"
method="post">" for
getting the database
data and posting it to
the HTML.
- Use <table> tag to
create empty table.
Use "<form action="{{
url_for('add') }}"
method="post">" for
getting the database
data and posting it to
the HTML.
- CSS: used to style the page aesthetically
and implement the elements and
principles of visual communication and
colour palettes
- Use code like: "ul { position: static;
list-style-type: none; margin: 0;
padding: 20px;" to style the menu bar
and the rest of the webpage.
- Use code like: "ul { position: static;
list-style-type: none; margin: 0;
padding: 20px;" to style the menu bar
and the rest of the webpage.
- JavaScript: to add functionality
to the webpage (the user can
actual use the search bar to look
for Pokémon).
- Use code like: "function myFunction() { var input,
filter, ul, li, a, i, txtValue; input =
document.getElementById("myInput"); filter =
input.value.toUpperCase();..." for the search bar
- Use code like: "function myFunction() { var input,
filter, ul, li, a, i, txtValue; input =
document.getElementById("myInput"); filter =
input.value.toUpperCase();..." for the search bar
- HTML: create
structure of
page and
database table
- Back-end
- SQL: a database table that
stores all of the Pokémon
data and can be accessed
through HTML GET requests
- Use code like: "CREATE TABLE
Persons ( PersonID int,
LastName varchar(255),
FirstName varchar(255), Address
varchar(255), City varchar(255)
);..." for inserting Pokémon data
into a table (Source: W3Schools)
- Use code like: "CREATE TABLE
Persons ( PersonID int,
LastName varchar(255),
FirstName varchar(255), Address
varchar(255), City varchar(255)
);..." for inserting Pokémon data
into a table (Source: W3Schools)
- SQL: a database table that
stores all of the Pokémon
data and can be accessed
through HTML GET requests
- Front-end
- DBMS
- DBMS: Database Management Systems, which serves
as an interface between users and the database;
allowing the completion of CRUD applications.
- CRUD
- Create, Update and Delete: there
will be no creation, update, or
deletion of data in this database, as
the user entity can only view the
information about the Pokémon in a
table and search.
- Read: the user is able to view all Pokémon data that
is transmitted to the HTML file, and find specific
Pokémon data using search queries that translate
to SQL functions (like "SELECT * WHERE...")
- Create, Update and Delete: there
will be no creation, update, or
deletion of data in this database, as
the user entity can only view the
information about the Pokémon in a
table and search.
- Systems
- SQL programs, such
as MySQL or SQLite
will be used to store
the data and control
the access and
addition of data.
- SQL programs, such
as MySQL or SQLite
will be used to store
the data and control
the access and
addition of data.
- CRUD
- DBMS: Database Management Systems, which serves
as an interface between users and the database;
allowing the completion of CRUD applications.
- Code Libraries
- External source: Web app must
draw the provided data from the
pokemon.csv workbook.
- Provided from resources on QLearn website.
- ADD THE IMAGE IN HERE OF THE POKEMON EXCEL SPREADSHEET
- ADD THE IMAGE IN HERE OF THE POKEMON EXCEL SPREADSHEET
- Provided from resources on QLearn website.
- Data: the web app must showcase all of the Pokémon
characteristics and information, not just the name and image.
- These characteristics can include type, ID, speed and generation (plus more).
- There would need to be two types of
characteristics: one set that can be viewed on the
main table page, and the rest that will be viewed
when the user clicks on the Pokémon and is
taken to the more in-depth Pokémon page.
- There would need to be two types of
characteristics: one set that can be viewed on the
main table page, and the rest that will be viewed
when the user clicks on the Pokémon and is
taken to the more in-depth Pokémon page.
- These characteristics can include type, ID, speed and generation (plus more).
- External source: Web app must
draw the provided data from the
pokemon.csv workbook.
- External programmed components the solution will rely on
- No external components, like mechanics
or robotics, but if the website/business
was to become more successful, it is
possible a server could be used to store
the data.
- The database tables would be stored on disks or in dedicated servers
- It is possible that a server may not be required, due to the
users not needing to sign up to access this public information,
meaning there is only one table in this database; the Pokémon
data table. If this web app went public, another location for it
to be stored and accessed globally would be needed, though.
- It is possible that a server may not be required, due to the
users not needing to sign up to access this public information,
meaning there is only one table in this database; the Pokémon
data table. If this web app went public, another location for it
to be stored and accessed globally would be needed, though.
- The database tables would be stored on disks or in dedicated servers
- No external components, like mechanics
or robotics, but if the website/business
was to become more successful, it is
possible a server could be used to store
the data.
Media attachments
Want to create your own Mind Maps for free with GoConqr? Learn more.