Question

In: Computer Science

Prompt: This exercise uses your programming environment to enhance the Web site you created last week...

Prompt:

This exercise uses your programming environment to enhance the Web site you created last week with additional functionality to include images, tables and a Form using Python flask. Specifically, you will add two (2) additional routes allowing a user to register and login to a web site. Additional security considerations include other routes (beyond the register route) will not be accessible until a successful login has occurred.

In addition to the requirements list above the following functionality should be found within your web site on one or more web pages:

- Add at least 4 different images. The images should be local in your environment. For example, they should be saved in your environment and referenced

- A Table with at least 4 rows and 3 columns.

- A user registration form

- A user login form

- A password complexity should be enforced to include at least 12 characters in length, and include at least 1 uppercase character, 1 lowercase character, 1 number and 1 special character.

- Display date and time throughout website

---------------------BASE CODE-----------------------

routes.py

from flask import Flask, render_template
app = Flask(__name__)

#pages
@app.route('/')
@app.route('/index.html')
def index():
return render_template('index.html', the_title='Console Wars: Xbox vs Playstation')

@app.route('/xbox.html')
def xbox():
return render_template('xbox.html', the_title='Console Wars: Xbox Specs')

@app.route('/playstation.html')
def playstation():
return render_template('playstation.html', the_title='Console Wars: Playstation Specs')

if __name__ == '__main__':
app.run(debug=True)

main.css

{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
color: #000;
background: #fafbff;
margin: 0;
}

#container {
margin: 2em auto;
width: 740px;
padding: 2em 4em;
background: #000000;
}

h1, h2 {
font-family: 'Droid Serif', serif;
font-size: 3em;
margin: 0;
padding-bottom: 1em;
}

h2 {
font-size: 2em;
}

p, li {
font-size: 1.4em;
}

p.credit {
font-size: 0.9em;
}

img {
display: block;
margin: auto;
max-width: 100%;
}

/* links */

a {
color: #1484bc;
text-decoration: none;
}

a:hover {
color: #407189;
text-decoration: underline;
}


/* media */

@media (max-width: 800px) {
body {
background: #000000;
}
#container {
margin: 0;
width: 100%;
padding: 2em;
}
}

base.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ the_title }}</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Source+Sans+Pro" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

<body>

<div id="container">

{% block body %}
{% endblock %}

</div>

</body>
</html>

index.html

{% extends 'base.html' %}

{% block body %}

<h1>{{ the_title }}</h1>

<!-- retrieves photos and incorporates a link -->
<img alt="Photo: playbox" src="{{ url_for('static', filename='images/playbox.jpg') }}">
<p class="credit">Photo by Microsoft/Sony/Paul Tassi [Public domain] <a href="https://www.forbes.com/sites/davidthier/2020/09/28/this-is-how-xbox-series-x-and-ps5-will-solve-their-exclusive-problem/#284c74b33358" target="_blank">via Forbes.com</a></p>

<p>Console Specification Links</p>

<ul>
<!-- routes to other pages -->
<li><a href="{{ url_for('xbox') }}">Xbox Specs</a></li>
<li><a href="{{ url_for('playstation') }}">Playstation Specs</a></li>
</ul>

<p>It is the year of new consoles which means the console war between Xbox and Playstation are the main topic of discussion. They have been the most prevalent consoles for over a decade now. Each console will have its loyal customers, but what side will the rest of the median consumers go to? In this website I will display key facts about each console and why they matter to you, The reader. This is so you can have an unbiased opinion between the two, and chose what console is best for you. Both consoles have their upsides and downsides when it comes to game exclusives, but that is entirely opinionated. The console hardware however, is now set in stone and can clearly be compared without any opinions and cold hard facts.</p>

<p>Since it is a new generation of consoles, much has changed. From updated hardware, game exclusives, and the economy. Consoles now have more power than ever before, and console exclusives have unfortunately became even more prevalent than before. Sony(Playstation) have had more exclusives than any other traditional console in recent memory. Xbox has certainly lagged behind Playstation in this manner, but it looks like Microsoft is ready to change. Recently Microsoft has started purchasing game development studios such as Bethesda(Zenimax), Obsidian, and many more. This is a very big deal as these studios will likely work specifically for Microsoft. These popular studios before were once neutral. At the time of writing it appears that future Fallout, and Elder Scrolls games will be Xbox exclusives. This is a massive deal as these two franchises are major sellers and will likely lead people into buying the new Xbox rather than the Playstation. Overall it looks like Xbox is ready to be an even tighter competitor to Playstation than before. </p>

{% endblock %}

playstation.html

{% extends 'base.html' %}

{% block body %}

<h1>{{ the_title }}</h1>

<img alt="Photo: Playstation Specs" src="{{ url_for('static', filename='images/pspecs.jpg') }}">
<p class="credit"> Playstation 5 Specifications[Public domain] <a href="https://i.pinimg.com/originals/72/bb/8f/72bb8f4b33381e3d40a8bc85d650d298.png">via Playstation</a></p>

<ul>
<li><a href="{{ url_for('xbox') }}">Xbox Specs</a></li>
<li><a href="{{ url_for('index') }}">Home Page</a></li>
</ul>

<p>The Playstation 5 is the next generation console from Sony. This console is in line with a royal lineage of previous consoles, that have amassed to the most sales ever sales by a console producer. The PS5 is projected to have more sales than the Series X, but why? To start it off, Playstation is very popular globally compared to Xbox with a very loyal fan base. Playstation has prided itself off of exclusive games, sleek design, and past success. They can back it up too, as the Playstation is the highest selling console of all time. Xbox has recently made efforts on catching up in the exclusive game market, while Playstation has had an ahead start for years now. If your looking for single player story games, than the PS5 could be for you. The large majority of exclusives have been just that and overall very well received and even sought out by Xbox players. </p>

<p>Having good game exclusives is very nice but how does the PS5 hardware stack up to the Xbox One? Playstation loyalists might want to look away because from reports the PS5 will not be as powerful as the Series X. It will still be able to run beautiful graphics and 120fps, just like the Xbox Series X. It will have a slower GPU which is a pretty big deal for competitive gamers, as well as smaller storage. The console still has good performance that can be compared to a low budget PC none-the-less. The performance may be worse but the design is nothing short of amazing compared to the Series X. It has a sleek futuristic design that can catch your eye. All of this will come at a price tag of $499, which is the same as the Series X. The digital edition on the other hand costs $399, which is a whopping $100 more than the Xbox counterpart. It comes down to what you value more at the end of the day; Performance, Exclusives, Appearance or Price. </p>


{% endblock %}

xbox.html

{% extends 'base.html' %}

{% block body %}

<h1>{{ the_title }}</h1>

<img alt="Photo: Xbox Specs" src="{{ url_for('static', filename='images/xspecs.jpg') }}">
<p class="credit"> Xbox Series X specifications[Public domain] <a href="https://i.ytimg.com/vi/ID9sjhU2RW0/maxresdefault.jpg">via Microsoft</a></p>

<ul>
<li><a href="{{ url_for('playstation') }}">Playstation Specs</a></li>
<li><a href="{{ url_for('index') }}">Home Page</a></li>
</ul>

<p>The Xbox Series X is the most powerful console to date. The hardware for the Series X has more power than the Playstation 5, and even lower budget PC's. As you can see in the graph above the new Xbox can run at 8k, but even more importantly 120fps. Frames per second or FPS, is a gamers best friend. The more frames you can receive the smoother gameplay will be giving you a better experience than previous generations. It is worth noting that video output, is mainly based off the TV/Monitor you have. So if you want to run 8k, 120fps, and even Ray-Tracing you need a monitor tah can handle the Xbox Series X impressive capabilities. The other main selling point is the updated graphics card. This graphics card is a Custom AMD GPU which rivals a PC GPU. It is also one of the key differences between the new Consoles. A better GPU is important because its means faster performance, or less of a delay. The Series X wins in this regard as it is stronger than the PS5</p>

<p>For some people, the design of the console is an important factor when purchasing. As you can see above it closely resembles the likes of a PC. Internet memes asides it does kind of look like a speaker and it does appear a bit bland. For most gamers this should not be an issue. It is also worth mentioning this console will have a separate edition which will include an entirely digital library. This means it will not have a disc tray, but it also means the console will be cheaper as well, which is great for people who cant afford expensive consoles or PCs. The Series X will be $499, while the Series S(Digital) will be $299. Overall great prices for the value you are getting. It is also cheaper than the Playstation variant which is a positive. Obviously because of console exclusives you will miss out on some popular franchises and a large collection of well received single-player games.</p>


{% endblock %}

FILE DIRECTORY:

|____routes.py
|____static
| |____css
|   |____main.css
| |__images
|   |___xspecs.jpg
|   |___pspecs.jpg
|   |___playbox.jpg
|_____templates
| |___base.html
| |___index.html
| |___xbox.html
| |___playstation.html

Solutions

Expert Solution

1.user login.html
{% extends 'base.html' %}

{% block body %}

<body>
<h1>{{ User_Login }}</h1>


<form method="POST" action="/login">
{{ form.csrf_token }}
<p class="email">
{{ form.email.label }}
{{ form.email(placeholder='[email protected]') }}
</p>
<p class="password">
{{ form.password.label }}
{{ form.password }}

</p>
<div class="submit-button">
{{ form.submit }}
</div>
<div class="login">
</div>
</form>
</div>

</div>
{% endblock %}
</body>

2.User-registration.html

{% extends "base.html" %}
{% block content %}

<h1>User Registration Form</h1>
<form method="POST" action="/registration">
{{ form.csrf_token }}
<p class="name">
{{ form.name.label }}
{{ form.name(placeholder='xxx') }}
</p>
<p class="email">
{{ form.email.label }}
{{ form.email(placeholder='[email protected]') }}

</p>
<p class="password">
{{ form.password.label }}
{{ form.password }}

</p>
<p class="confirm">
{{ form.confirm.label }}
{{ form.confirm }}
  
</p>
<div class="submit-button">
{{ form.submit }}
</div>
</form>
<div class="login-signup">
<span>Already have an account? <a href="{{ url_for('auth_bp.login') }}">Log in.</a></span>
</div>
</div>
{% endblock %}

venereology answered 11 months ago
Next > < Previous

Related Solutions

In this exercise you will return to your SpecialityCoffee class which you created for the last...
In this exercise you will return to your SpecialityCoffee class which you created for the last coding activity (a sample solution to this exercise will be shown below the entire question if you do not have yours). This time you will override the Coffee method getPrice which returns the price in cents for a given coffee. The SpecialityCoffee method getPrice should return the price given by the Coffee method for that object, plus an extra charge for the flavored syrup....
Week 8: Predict Your Salary Suppose you went to the Bureau of Labor Statistics web site...
Week 8: Predict Your Salary Suppose you went to the Bureau of Labor Statistics web site and found several predictors of your salary. State three possible predictors and a simulated multilinear regression equation along with their p-values. What do your p-values tell you about your predictors? How does multilinear regression analysis apply to your profession as a supply chain business analyst? Specify the dependent value and the set of predictors. Where would you get your data?
Create a program that will prompt for user information for a Web site. Use a structure...
Create a program that will prompt for user information for a Web site. Use a structure to store the data. The structure will need to include the following items: First Name - string Last Name - string Full Name - string Birth Date   - int (assume format yyyymmdd) IsLeasingAutomobile - bool yearlySalary - float Create a single structure from the items listed above. Prompt for all items except "Full Name" and load the input directly into a variable based on...
Here is a web site that talks about how much carbon dioxide is created when a...
Here is a web site that talks about how much carbon dioxide is created when a ton of coal is burned. (http://wiki.answers.com/Q/How_much_carbon_dioxide_does_a_ton_of_coal_produce) (9) Look at that site, presume that the Mt. Tom power plant burned bituminous coal (as opposed to some other kind), and compute how many pounds of carbon dioxide per year were introduced into the atmosphere by the Mt. Tom coal-fired power plant. Wind farms that replace coal-fired power plants help reduce greenhouse gasses (carbon dioxide). Just as...
(Python Code please) Guess the number! You will add to the program you created last week....
(Python Code please) Guess the number! You will add to the program you created last week. This week you will add quite a bit of code to your project. You will add an option for the computer to guess as well as the user to guess a number. In addition, you will add a menu system. Be sure to import random at the beginning of your code and use a comment block explaining what your program does #Guess the number...
You are to develop from the beginning a web site about yourself with regards to your...
You are to develop from the beginning a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS. The purpose of this assignment is for you to build a web site that will contain some details about all of your course degrees you have...
If you have the last name of A-I, this is your prompt: What are the measures...
If you have the last name of A-I, this is your prompt: What are the measures of center or measures of central tendency? And what do they tell us?
Lately Jennifer is hungry all the time. She read on a Web site last night that...
Lately Jennifer is hungry all the time. She read on a Web site last night that if she limits her total fat intake to no more than 10% of her total calories, she can eat all the carbohydrates and protein that she wants, and she won’t gain weight. So Jennifer went right out to the yogurt shop down the street and ordered a large sundae with nonfat vanilla yogurt and fat-free chocolate syrup. She had to admit, though, that an...
Write a program that uses an array of high temperatures for your hometown from last week...
Write a program that uses an array of high temperatures for your hometown from last week (Sunday – Saturday). Write methods to calculate and return the lowest high temperature (minimum) and a method to calculate and return the highest high temperature (maximum) in the array. You must write YOUR ORIGINAL methods for minimum and maximum. You MAY NOT use Math class methods or other library methods. Write an additional method that accepts the array as a parameter and then creates...
Write a program that uses an array of high temperatures for your hometown from last week...
Write a program that uses an array of high temperatures for your hometown from last week (Sunday – Saturday). Write methods to calculate and return the lowest high temperature (minimum) and a method to calculate and return the highest high temperature (maximum) in the array. You must write YOUR ORIGINAL methods for minimum and maximum. You MAY NOT use Math class methods or other library methods. Write an additional method that accepts the array as a parameter and then creates...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT