trouble retrieving an email from an username from a text document

trouble retrieving an email from an username from a text document - python

so I have this website that allows me to get the email from a user that has signed up to the website, so when you sign up it adds your discord username and your email after it in a text file like this
Discorduser#0182 Test#example.com
Discordusernumber_one#0182 Testboi#example.co.uk
However, it retrieves the email from the first line when i put in the first option, but if i do the 2nd user, it cant seem to find it, here is the code to the website... the code is part of a bottle.py script but here is the main parts of this page
#get('/get_confirm')
def confirm():
return CONFIRM_PAGE
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
for line in open('Confirmations.txt', 'r').readlines():
login_info = line.replace('\n', '').split()
if name == login_info[0]:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + login_info[1] + '</h1>')
else:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
CONFIRM_PAGE = '''
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/static/icon.ico">
<title>TylerR - get_confirms</title>
<style>
.content {
background: white;
padding: 15px;
border-radius: 3px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body style='background-size: cover; background-image: url(\"/static/WebisteBackground.png\"); background-attachment: fixed;'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/commands'>Commands</a></li>
<li><a href='/youtube'>Youtube</a></li>
<li><a href='/downloads'>Downloads</a></li>
<a href='https://www.youtube.com/channel/UCTHnGh3DpDXMyuL03ove1tQ'>
<img align='right' src='/static/youtubelogo.png' style="width:40px;height:40px;">
</a>
<a href='https://www.instagram.com/drumsnaps/'>
<img align='right' src='/static/Insta.png' style="width:40px;height:40px;">
</a>
</ul>
</div>
<center>
<h1 style="font-family:Cooper Black; font-size: 7em;"><b>Confirmations<b></h1>
<br>
<h1>Please enter an username to retrieve email</h1>
<h3>When entering name, replace any spaces with _</h3>
<form method='POST' action='/get_confirm'>
<h2>Discord Username:</h2>
<input name='name' type='text' placeholder='User#0000'>
<br>
<input type='submit'>
</form>
<div class='content'>
<h1 id='emailbox'></h1>
</div>
</center>
</body>
</html>
'''
I am using bottle.py
so if anyone could let me know why this is happening that would be great

In your check it returns immediately - with success (if user is on the first line) or no success (if user is not on first line). You want to return no success, only after you checked all lines.
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
with open('Confirmations.txt', 'r') as f:
for line in f:
user, email = line.strip().split()
if name == user:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + email + '</h1>')
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
Also, better use template engine like jinja2 to construct the HTML page.

Related

Python file not getting the values from html file in django for login page

I have made a small login page but I am not able to get the user input values in the textbox to the python (i.e. views.py). Can anyone tell me why?
This is my URL's page
from . import views
from django.urls import path, include
urlpatterns = [
path('', views.login),
path('user_login/',views.studlogin,name='user_login/'),
]
This is the views.py file - studlogin function
def studlogin(request):
if request.method == 'POST':
username = request.POST.get('Username')
password = request.POST.get('Password')
if username == "jake":
return render(request, 'new.html')
The HTML code for the login page that is index.html is
{% load static %}
<!DOCTYPE html>
<html class=''>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='https://production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/aperyon/pen/oxzpaE?depth=everything&order=popularity&page=23&q=translate&show_forks=false" />
<style class="cp-pen-styles">
html, body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
}
body {
background: tomato;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
form {
background: white;
width: 40%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
font-family: lato;
position: relative;
color: #333;
border-radius: 10px;
}
form header {
background: #FF3838;
padding: 30px 20px;
color: white;
font-size: 1.2em;
font-weight: 600;
border-radius: 10px 10px 0 0;
}
form label {
margin-left: 20px;
display: inline-block;
margin-top: 30px;
margin-bottom: 5px;
position: relative;
}
form label span {
color: #FF3838;
font-size: 2em;
position: absolute;
left: 2.3em;
top: -10px;
}
form input {
display: block;
width: 78%;
margin-left: 20px;
padding: 5px 20px;
font-size: 1em;
border-radius: 3px;
outline: none;
border: 1px solid #ccc;
}
form .help {
margin-left: 20px;
font-size: 0.8em;
color: #777;
}
form button {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
font-family: inherit;
color: white;
background: #FF3838;
outline: none;
border: none;
padding: 5px 15px;
font-size: 1.3em;
font-weight: 400;
border-radius: 3px;
box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
cursor: pointer;
transition: all 0.15s ease-in-out;
}
form button:hover {
background: #ff5252;
}
</style>
</head>
<body>
<form method="POST" action="{% url 'user_login/' %}">
{% csrf_token %}
<header>Login</header>
<label>Username <span>*</span></label>
<input type="text" id="username" placeholder="Username" required="" />
<div class="help">At least 5 character</div>
<label>Password <span>*</span></label>
<input type="password" id="password" placeholder="Password" required="" />
<div class="help">Use upper and lowercase letters as well</div>
<button type="submit">Login</button>
</form>
</body>
</html>
Why is it that I am not able to get the user input in the text box in the views.py?

As Marco said, you need to set the name of your input
...
<input type="text" name="Username" id="username" placeholder="Username" required="" />
<label>Password <span>*</span></label>
<input type="password" name="Password" id="password" placeholder="Password" required="" />
...
You could also use django's embedded authentication system, or django form system (it generates the form for you so this kind of mistake never happens)
https://docs.djangoproject.com/en/4.0/topics/auth/
https://docs.djangoproject.com/en/4.0/topics/forms/

Converting html + bootstrap files (using flex) into pdf - Django?

I am trying to create a webapp where, the data comes from a certain API and is saved into the database. Now, I want to create a pdf using the data. I had my html Code ready with custom css and bootstrap ( using display: flex; ). I already tried using the xhtml2pdf, reportlab libraries but am not able to get it right with CSS flex properties.
The source for the HTML, and some python file are attached below.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Invoice-ID</title>
<style type="text/css">
/* Bootstrap CSS */
.col-md-7 {
flex: 0 0 auto;
width: 58%;
}
.container {
width: 1320px;
}
.bg-light {
background-color: #f8f9fa !important;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.justify-content-center {
justify-content: center;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
}
.navbar>.container-fluid {
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
.flex-column {
flex-direction: column !important;
}
.d-flex {
display: flex !important;
}
.w-50 {
width: 50% !important;
}
.ms-2 {
margin-left: .5rem !important;
}
.p-3 {
padding: 1rem !important;
}
/* Custom CSS */
body {
font-weight: 300;
font-size: 14px;
}
.wrapper {
border: 2px solid gray;
border-width: 2px;
}
#location {
/* border: 2px solid gray; */
border-right: 1px solid gray;
border-width: 1px;
margin-bottom: 2rem;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
}
/* . {
margin-left: 455px;
} */
.hritem {
border: 1px solid gray;
border-width: 2px;
}
</style>
</head>
<body>
<div class="mt-5 container" style="border: 2px solid gray;">
<!-- Header Start -->
<div class="d-flex justify-content-center align-items-center">
<!-- <img src="E:\Python\Django web\logiswift\Deployment\main\static\assets\logo.png" alt="Logo" width="350px"> -->
<h1>LOGO</h1>
<div class="ms-auto">
<span><b>Some Text</b></span>
</div>
</div>
<hr class="hritem"/>
<div class="d-flex justify-content-center align-items-center">
<h3>Title</h3>
<div class="ms-auto ">
<p>Date: 12-12-2021</p>
<p>Document ID: 9868</p>
</div>
</div>
<!-- Header End -->
<hr class="hritem"/>
<!-- General Trip Info Start -->
<div class="d-flex">
<div class="w-50" id="location">
<p>
<h6>Current Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
<p>
<h6>Expected Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
</div>
<div class="w-50 ms-2 mt-3" id="consumer">
<h6>consumer Details</h6>
<hr/>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Name: </b></span>
<span>Your Name</span>
</p>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Consumer ID: </b></span>
<span>Unique Consumer ID</span>
</p>
</div>
</div>
<!-- General Trip Info End -->
<hr class="hritem"/>
<!-- Bill Start -->
<!-- <div>
<p>Bill Will Come here</p>
</div> -->
<!-- Bill End -->
<!-- <hr class="hritem"/> -->
<!-- Footer Start -->
<!-- <div>
<p>Additional info like address of the company and seal comes here.</p>
</div> -->
<!-- Footer end -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
utils.py
from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from xhtml2pdf import pisa
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
view.py
def generatePDF(request):
template = get_template('main/invoices.html')
context = {
"date": datetime.date.today(),
}
html = template.render(context)
pdf = render_to_pdf('main/invoices.html', context)
return HttpResponse(pdf, content_type="application/pdf")
I don't understand why the above code isn't rendering the CSS flex attributes. I even tried to use the bootstrap classes inside the style tag, but the CSS flex won't come on rendering the PDF.
Please help me out.
Thanks in advance

Not able to get transparent dropdown menu

I am building a website using flask-python, css, HTML.
I am not able to get transparent dropdown menu i changed the styling for css code and given proper code to HTML Layout.
The dropdown occurs in the center without any styling which i had speified in CSS styling
If i write the code in only in HTMl and CSS for dropdown menu.The drop down menu works perfectly fine.
Main python Script
from flask import Flask,render_template
import os
from flask import send_from_directory
app = Flask(__name__)
#app.route('/')
def home():
return render_template("home.html")
#app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),
'favicon.ico', mimetype='image/vnd.microsoft.icon')
#app.route('/projects/')
def projects():
return render_template("projects.html")
if __name__ == "__main__":
app.run(debug = True)
layout code layout.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<head>
<meta charset="utf-8">
<title>Developer | Krishan</title>
<link rel = "stylesheet" href ="{{ url_for('static' , filename = 'css/main.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<header>
<div class="container">
<h1 class = "logo">Krishan K B's Webpage</h1>
<strong><nav>
<ul class = "menu">
<li>Home</li>
<li>Projects
<ul class = "menu">
<li><a>Disaster Managment</a></li>
<li><a>Data Analytics</a></li>
<li><a>Volcanoes & Population</a></li>
<li><a>Games</a></li>
<li><a>Book App</a></li>
</ul>
</li>
</ul>
</nav></strong>
</div>
</header>
<div class = "container">
{%block content%}
{%endblock%}
</div>
</body>
</html>
Style css code style.css
body{
margin: 0 auto;
text-align: center;
font-family: brandon-grotesque,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
ul {
margin: 0px;
padding: 0px;
list-style : none;
}
ul li {
float : left;
width : 200px;
height : 40px;
background-color: #020202;
opacity : .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color : white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Yellowtail', cursive;
color: #e46922;
margin: 50px auto 0 auto;
font-size:60px;
}
h2{
color:#66bfbf;
text-align: center;
font-family:'monntserrat',sans-serif;
padding-bottom: 10px;
}
h3{
color: #11999e;
font-family:'monntserrat',sans-serif;
}
p{
line-height: 2;
width: 40%;
margin: 40px auto 60px;
}
hr{
border: dotted #eaf6f6 6px;
border-bottom: none;
width: 6%;
margin: 100px auto;
}
a{
color: #80b838;
font-family:'monntserrat',sans-serif;
margin: 10px 20px;
text-decoration: none;
}
a:hover{
color: #eaf6f6;
}
.head{
color: #66bfbf;
font-size: 140%;
}
.top{
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middle{
margin: 100px 0;
}
.bottom{
background-color: #66bfbf; ;
padding: 50px 0 10px;
}
.intro{
width: 30%;
margin: auto;
}
.top-cloud{
position: absolute;
right: 180px;
top: 30px;
}
.below-cloud{
position: absolute;
left: 150px;
bottom: 230px;
}
.img{
float: left;
margin-left: 320px;
}
.img-code{
float: right;
margin-right: 320px;
}
.skils{
width: 30%;
margin: auto;
}
.copyright{
color: #eaf6f6;
font-size: 0.75rem;
}
.contact-message{
width: 40%;
margin: 40px auto 60px;
}
.contact{
padding-bottom: 100px;
}
.btn {
margin: 100px;
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #45b29a);
background-image: -moz-linear-gradient(top, #45b29a, #45b29a);
background-image: -ms-linear-gradient(top, #45b29a, #45b29a);
background-image: -o-linear-gradient(top, #45b29a, #45b29a);
background-image: linear-gradient(to bottom, #45b29a, #45b29a);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #1b7f69;
font-size: 21px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #1b7f69);
background-image: -moz-linear-gradient(top, #45b29a, #1b7f69);
background-image: -ms-linear-gradient(top, #45b29a, #1b7f69);
background-image: -o-linear-gradient(top, #45b29a, #1b7f69);
background-image: linear-gradient(to bottom, #45b29a, #1b7f69);
text-decoration: none;
}
Output i received :
enter image description here

I think your css is not properly rendered by flask, you need to hard reload
After this go to developers tool > sources tab , then search for the css file and crosscheck whether it is properly rendered or not.

Thanx i did hard reload and it worked but now i am not able to see the dropdown or any menu in my home page but i can see it in my projects webpage when i type /projects/ with the web address local host on URL. All the css styling changes are working perfectly fine but now there is no options menu in in my HomePage.
This is my homepage with no dropdown or any menu options to go to projects webpage :
enter image description here
This is my projects webpage, in this there is a dropdown and a menu with all the styling.
enter image description here
Homepage Code:
{%extends "layout.html"%}
{%block content%}
<div class = "home">
<div class="top">
<img class="top-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<h1> I'm Krishan.</h1>
<p class="head">A Back End Developer.</p>
<img class="below-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<img src="{{ url_for('static' , filename = 'images/land.svg') }}" alt="mounntains-img" height="350px">
</div>
<div class="middle">
<img class="profile" src="{{ url_for('static' , filename = 'images/profile.png') }}" alt="profile" height="150px" >
<h2>Hi.</h2>
<P class="intro"> I'm a Programme developer,web developer and designer,UI Designer based in Bangalore,India.I have a passion for web app,data analytics,web design,data analytics and coding and love to create new apps,website for web and mobile devices.</P>
</div>
<hr>
<div>
<h2>What I can do.</h2>
<img class="img" src="{{ url_for('static' , filename = 'images/coding.png') }}" alt="" height="150px" >
<p>I like to keep it simple. My goals is to develop a new programme which would be beneficial for the people and be enviromen friendly.</p>
</div>
<hr>
<div class="skill">
<h2>Develop what you need.</h2>
<img class="img-code" src="{{ url_for('static' , filename = 'images/code-img.png') }}" alt="" height="150px" >
<p class="skills">I'm a developer, so I know how to create your website,application or any other programme to run across devices using the latest technologies available.</p>
</div>
<hr>
<div class="contact">
<h2>Get in touch.</h2>
<h3>I’m currently available for freelance work.</h3>
<p class="contact-message">if you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
<a class="btn" href="mailto:krishankbhushan#gmail.com">message me</a>
</div>
</div>
<div class="bottom">
<a class="footer-link" href="https://www.linkedin.com/in/krishan-k-b-0a164b125/">Linkedin</a><i class="fab fa-twitter"></i>
<a class="fab fa-twitter" href=" https://twitter.com/krishankbhushan"><i class="fa fa-twitter"></i>Twitter</a>
<i class="fa fa-twitter" style="font-size:24px"></i>
<p class="copyright">©️ 2021 Krishan.All rights reserved.</p>
</div>
</div>
{%endblock%}

How can I get the image to show in the img container, using Django template tags?

So I am at the last couple details of my portfolio website, and everything has gone relatively smoothly. I have not had an issue with images before, but this time I am using a {% for loop %} to iterate over the code for the card and I just have the variable template tags that create a new object every time I add something new in the django admin interface.
I feel like there is some small detail I am just completely missing, because I had it working at one point, but then decided to do the iteration instead of hard-coding it in, and it just won't show up. Another pair of eyes would be nice.
This is the section of my index.html:
{% block content %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jordan Miracle</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/portfolio/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body>
<div class="jumbotron text-center ui-datepicker-next-hover" style="margin-bottom:0">
<div class="align-center">
<img src="{% static 'portfolio/mylogo.png' %}" id="img-bastet" class="img-fluid"
alt="Jordan and Bastet">
</div>
<h1><p style="font-family: 'Ubuntu Mono', Monospaced, monospace; font-size: medium;">Developer and Aspirant Data
Scientist</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://github.com/jordanmiracle">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/jordanmiracle1">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/jordan-m-605b4b1a9/">LinkedIn</a>
</div>
<div class="topnav-right">
Blog
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<h2>About Me</h2>
<div class="row justify-content-center my-3">
<div class="col-5" style="border: #303030" aria-setsize="10px">
<img src="{% static 'portfolio/me-bastet-and-babys-turtle.jpg' %}" class="img-fluid"
alt="Jordan and Bastet">
</div>
</div>
<div class="intro-text">
<p style="font-family: 'Ubuntu Mono', Monospaced, monospace; font-size: small; ">
<p>I enjoy web development, and have a true love for analyzing data. Whether creating visualizations and
interpreting what I find,<br>
or creating a machine learning model to try and make predictions. <br>
Things that interest me the most are the climate and our ecosystem, consciousness, and the cosmos that we live
in.
</p>
</div>
<ul class="nav nav-pills flex-column">
<div class="button-row-main">
<button class="nav-button highlight-green">
<a href="mailto:jordanmiracle#protonmail.com" target="_blank">Contact
Me</a>
</button>
</div>
<div class="portfolio">
{% for project in projects %}
<div class="project">
<h2>{{ project.title }}</h2>
<p class="technologies">
</p>
<!-- Depending on availability, display either the image as a link,
only image, or a string explaining that the img is missing-->
{% if project.image %}
<a href="{{ project.url }}" target="_blank">
<div class="img-container" style="background-image: url('{{ project.image }}')"></div>
</a>
<p>{{ project.description }}
</p><br>
<div class="project-links">
Live Site
Code
</div>
{% endif %}
</div>
{% endfor %}
</body>
{% endblock %}
</html>
My style.css:
font-family: 'Oswald', sans-serif;
text-align: center;
background-color: #00FF00;
color: #303030;
}
/* ---------- HOME ---------- */
/* create color-hover-effect for M logo and buttons */
.highlight-orange:hover {
color: #417FD5;
border-color: #ffa000;
}
.highlight-green:hover {
color: darkred;
border-color: indianred;
}
button a {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-decoration: darkslateblue;
color: inherit;
/* increase the clickable area */
display: inline-block;
position: relative;
z-index: 1;
padding: 1.3em;
margin: -1.3em;
}
.nav-button {
font-size: 1.1em;
margin: 20px;
padding: 10px;
border: 2px solid #303030;
border-radius: 25px;
color: #303030;
background-color: #fdfdfd;
box-shadow: #417FD5;
}
.button-row-mobile,
.button-row-portfolio-mobile {
display: none;
}
/* ---------- PORTFOLIO ---------- */
.portfolio {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.project {
margin: 20px;
padding: 20px;
border: 3px solid #303030;
border-radius: 20px;
color: transparent;
background-color: transparent;
max-width: 300px;
}
.project-links {
display: flex;
justify-content: space-around;
}
.project-links a {
color: #4DAAE3;
}
.project-links a:visited {
color: #ffffff;
}
.project-links a:hover {
color: #4DAAE3;
}
.button-row-portfolio {
position: fixed;
width: 100%;
justify-content: space-between;
bottom: 5px;
}
.button-row-portfolio .nav-button {
opacity: 0.8;
}
/*
restrict img to uniform size automatically,
while showing the center portion of the screenshot. adapted from:
https://stackoverflow.com/questions/15866223/how-to-make-images-get-cut-off
*/
.img-container {
height: 200px;
width: 250px;
color: transparent;
background-position: center;
border: 1px solid #303030;
border-radius: 20px;
background-repeat: no-repeat;
}
/* ---------- FOOTER ---------- */
.separator {
display: none;
}
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
footer {
font-size: 16px;
color: #303030;
}
.site-footer {
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #aa2222;
color: white;
font-style: italic;
text-align: center;
}
.icon {
height: 36px;
width: auto;
padding: 8px;
}
.overflow {
color: #fdfdfd;
font-size: 2.5em;
}
/* ---------- RESPONSIVE ELEMENTS ---------- */
/* TODO: remove blue highlighting when buttons are clicked */
#media only screen and (max-width: 768px) {
.logo {
font-size: 14em;
}
.button-row-main,
.button-row-portfolio {
display: none;
}
.button-row-mobile {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
justify-content: space-around;
}
.button-row-portfolio-mobile {
display: flex;
position: fixed;
width: 100%;
justify-content: space-around;
bottom: 5px;
}
.button-row-portfolio-mobile .nav-mobile {
opacity: 0.8;
}
.nav-mobile {
font-family: 'Oswald', sans-serif;
font-size: 1em;
border: none;
border-radius: 100px;
background-color: #fdfdfd;
}
.highlight-orange {
color: #4DAAE3;
border-color: #4DAAE3;
fill: #4DAAE3;
}
.highlight-green {
color: lightgreen;
border-color: lightgreen;
fill: lightgreen;
}
.highlight-blue {
color: lightblue;
border-color: lightblue;
fill: lightblue;
}
.separator {
display: block;
}
footer {
margin-top: 24px;
}
.icon {
height: 45px;
width: auto;
padding: 20px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: "Ubuntu Mono", serif;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 900px) {
.column {
width: 75%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
My models.py:
class Project(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=120)
image = models.FilePathField(path='portfolio/images')
url = models.URLField(blank=True)
code_url = models.URLField(blank=True)
def __str__(self):
return self.title
Here is my file structure.
If anybody needs more information, or if I need to provide more details, just let me know. This is the last thing really standing in my way of deploying and it's been a pain.
Before changing it to img class
After changing it from a div class to img class

The images needed to be registered properly in the Django admin shell.
Once in the shell, I had to import the models.
from portfolio.models import Project
Then, p2 = Project.objects.get(id=2)
p2.image = <path_to_file>
And so on. Once they were registered in the DB, they popped up right away.

Looks like you might need to set a background image size on .img-container. If that doesn't work, also try setting display: block;
.img-container {
height: 200px;
width: 250px;
color: transparent;
background-position: center;
border: 1px solid #303030;
border-radius: 20px;
background-repeat: no-repeat;
background-size: cover;
display: block;
}

Fetch "Some" data from MySQL Database using Flask (Python)

I have just started making a "Student Database Project" with Flask. I have set up a MySQL Database using the flask_mysqldb module. I have also inserted some student data into it. But I want to fetch the data (name, grade, phone number, address, email , etc) of a specific student. How should I do it? Please help me because I'm new to Flask and MySQL. Here's my code:
from flask import Flask,render_template, redirect, url_for, request, jsonify
from flask_mysqldb import MySQL
app = Flask(__name__)
app.config['SECRET_KEY'] = 'ILUVTOFART'
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'student_db'
mysql = MySQL(app)
#app.route("/add_s_data", methods=["GET","POST"]) #This is the page for adding student information to DB
def handle_s_data():
if request.method == "POST":
cur = mysql.connection.cursor()
sid = request.form.get('id', False) # Student ID
name = request.form.get('name', False) # Full Name
f_name = request.form.get('fname', False) # Father's Name
m_name = request.form.get('mname', False) # Mother's Name
clas = request.form.get('class', False) # His grade/class
roll = request.form.get('roll', False) # His roll number
section = request.form.get('section', False) # His class section
dob = request.form.get('dob', False) # Date of Birth
join = request.form.get('join', False) # Admission date
phone = request.form.get('phone', False) # Phone number
address = request.form.get('address', False) # Address
sequence = (sid, name, f_name, m_name, clas, roll, section, dob, join, phone, address)
formula = "INSERT INTO student_data (id, name, f_name, m_name, class, roll, section, dob, joindate, phone, address) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s )"
cur.execute(formula,sequence)
mysql.connection.commit()
return str(sequence) + " Done!"
return render_template('add_s_data.html')
#I want to fetch these data from the database and show them on the page. I know how to use Jinja2 Variables, but how do I fetch the data?
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
#import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
#import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 240px;
height: 100%;
background: #0080ff;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2{
margin-left: 15px;
padding-top: 05px;
padding-bottom: 05px;
color: white;
font-family: 'Noto Sans TC', sans-serif;
-webkit-text-stroke: 0.5px black;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: white;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #0f52ba;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.home {
background: #0080ff;
}
.add{
background: #0f52ba;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
#media (max-height: 500px){
.social_media{
display: none !important;
}
}
.id{
font-size: 30px;
margin-top: 5%;
margin-left:20%;
}
.id input{
margin-left: 16.5%;
width: 30%;
height: 5;
font-size: 30px;
}
.name{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.name input{
width: 30%;
height: 5;
font-size: 30px;
margin-left: 11.5%;
}
.fname{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.fname input{
width: 30%;
height: 5;
margin-left: 1%;
font-size: 30px;
}
.mname{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.mname input{
width: 30%;
height: 5;
font-size: 30px;
}
.class{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.class input{
width: 30%;
height: 5;
font-size: 30px;
margin-left: 12.5%;
}
.roll{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.roll input{
width: 30%;
height: 5;
font-size: 30px;
margin-left: 14%;
}
.section{
font-size: 30px;
margin-top: 3%;
margin-left:20%;
}
.section input{
width: 30%;
height: 5;
font-size: 30px;
margin-left: 9.5%;
}
.dob{
position: absolute;
margin-left: 65%;
top: 18.5%;
font-size: 30px;
}
.dob input{
width: 50%;
font-size: 30px;
height: 1;
}
.joining{
position: absolute;
margin-left: 65%;
top: 29.5%;
font-size: 30px;
}
.joining input{
margin-left: 2%;
width: 50%;
font-size: 30px;
height: 1;
}
.phone{
position: absolute;
margin-left: 65%;
top: 42.5%;
font-size: 30px;
}
.phone input{
margin-left: 10%;
width: 50%;
font-size: 30px;
height: 1;
}
.address{
position: absolute;
margin-left: 65%;
top: 54.5%;
font-size: 30px;
}
.address input{
margin-left: 16%;
width: 51%;
font-size: 30px;
height: 1;
}
button{
font-size: 20px;
border: 1px solid black;
background: lightblue;
color: white;
margin-left: 77%;
position: absolute;
top: 70%;
width: 100px;
height: 50px;
border-radius: 8px;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>I am Ahnaf</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename = 'css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="../static/css/add_s_data.css">
<link rel="stylesheet" type="text/css" href="../static/fontawsome/css/all.css">
</head>
<body>
<!-- Sidebar Section -->
<div class="wrapper">
<div class="sidebar">
<h2>Ahnaf's SDMS</h2>
<ul>
<li class="home"><i class="fas fa-home"></i>Home</li>
<li class="search"><i class="fas fa-search"></i>Search Data</li>
<li class="add"><i class="fas fa-users"></i>Add Data</li>
<li class="modify"><i class="fas fa-edit"></i>Modify Data</li>
<li class="delete"><i class="fas fa-user-minus"></i>Delete Data</li>
<li class="report"><i class="fas fa-flag"></i>Add Student Report</li>
<li class="present"><i class="fas fa-address-card"></i>ID Card Maker</li>
<li class="exam"><i class="fas fa-pen"></i>Exams</li>
<li class="events"><i class="fas fa-calendar-week"></i>Events</li>
<li class="contact"><i class="fas fa-address-book"></i>Contact</li>
</ul>
</div>
</div>
<div class="choice">
<p style="color:blue;position: absolute; top:2%;margin-left: 35%;font-size: 30px;">Student</p>
<hr style="position: relative; margin-top: 4%; margin-left: 29%; width: 20%">
<div style="position:absolute;top:0;border-left:1px solid #000;height:50px; margin-left: 57%;"></div>
<a style="color: black;position: absolute; top:2%;margin-left: 70%;font-size: 30px;"href="/add_t_data">Teacher</a>
</div>
<div class="form">
<form action="/add_s_data" method='POST'>
<div class="id">
<label>ID:</label>
<input type="text" name="id" ><br>
</div>
<div class="name">
<label>Name:</label>
<input type="text" name="name" ><br>
</div>
<div class="fname">
<label>Father's Name:</label>
<input type="text" name="fname" ><br>
</div>
<div class="mname">
<label>Mother's Name:</label>
<input type="text" name="mname" ><br>
</div>
<div class="class">
<label>Class:</label>
<input type="text" name="class" ><br>
</div>
<div class="roll">
<label>Roll:</label>
<input type="text" name="roll" ><br>
</div>
<div class="section">
<label>Section:</label>
<input type="text" name="section" ><br>
</div>
<div class="dob">
<label>Date of Birth:</label>
<input type="date" name="dob" ><br>
</div>
<div class="joining">
<label>Joining Date:</label>
<input type="date" name="join" ><br>
</div>
<div class="phone">
<label>Phone No:</label>
<input type="text" name="phone" ><br>
</div>
<div class="address">
<label>Address:</label>
<input type="text" name="address" ><br>
</div>
<button type="submit" value="Submit" >Submit</button>
</form>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Thank you for your convenience.

Here is how you possibly can do it.
#app.route("/user/<int:id>")
def user(id):
cur = mysql.connection.cursor()
cur.execute("""SELECT * FROM student_data WHERE id = %s""", (id,))
user = cur.fetchone()
return render_template('user.html', user = user)
Inside user.html
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>User : {{ user.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename = 'css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="../static/css/add_s_data.css">
<link rel="stylesheet" type="text/css" href="../static/fontawsome/css/all.css">
</head>
<body>
<div class="user">
<p>ID: {{ user.id }}</p>
<p>ID: {{ user.name }}</p>
<p>...</p>
</div>
</body>
</html>
I advise you to go and check Flask-SQLAlchemy, Flask-WTForms they will help you manager database and forms better.

Develop Reference

Python is a programming language that lets you work quickly and integrate systems more effectively.

trouble retrieving an email from an username from a text document - python

Related

Python file not getting the values from html file in django for login page

Converting html + bootstrap files (using flex) into pdf - Django?

Not able to get transparent dropdown menu

How can I get the image to show in the img container, using Django template tags?

Fetch "Some" data from MySQL Database using Flask (Python)

Categories

Resources