Jordan/math-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

database signin and better styling

Browse Source
This commit is contained in:
ralphi3
2026-06-18 10:34:30 +12:00
parent 4ca67359bf
commit bcf3f659bb
12 changed files with 233 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+90
View File
@@ -0,0 +1,90 @@
from flask import Flask, render_template, redirect, request, url_for
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///accounts.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.secret_key = 'super_secret_session_encryption_key'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
email = db.Column(db.String(120), unique=True, nullable=False)
password_hash = db.Column(db.String(128), nullable=False)
with app.app_context():
db.create_all()
@app.route('/submit-form', methods=['POST'])
def handle_submission():
form_username = request.form.get('username')
form_email = request.form.get('email')
form_password = request.form.get('password') # 1. Grab password from HTML
# Check for duplicates
if User.query.filter_by(username=form_username).first():
return "<h3>Username taken!</h3>", 400
if User.query.filter_by(email=form_email).first():
return "<h3>Email already registered!</h3>", 400
# 2. Hash the password into a secure scramble
hashed_password = generate_password_hash(form_password)
# 3. Save the user with the scrambled hash
new_user = User(username=form_username, email=form_email, password_hash=hashed_password)
db.session.add(new_user)
db.session.commit()
return redirect(url_for('success'))
@app.route('/success')
def success():
return "<h3>Data successfully saved to the database!</h3>"
@app.route('/users')
def view_users():
# Fetch all user records from the database
all_users = User.query.all()
# Create a simple HTML table to display them nicely
html_output = "<h2>Registered Accounts</h2><table border='1' cellpadding='10'>"
html_output += "<tr><th>ID</th><th>Username</th><th>Email</th></tr>"
for user in all_users:
html_output += f"<tr><td>{user.id}</td><td>{user.username}</td><td>{user.email}</td><td>{user.password_hash}</td></tr>"
html_output += "</table>"
# If the database is completely empty
if not all_users:
return "<h3>No accounts found in the database yet.</h3>"
return html_output
@app.route('/')
def home():
return render_template('index.html')
@app.route('/bivariate')
def bivariate():
return render_template('bivariate.html')
@app.route('/about')
def about():
return render_template('about.html')
@app.route('/signin')
def signin():
return render_template('signin.html')
@app.route('/signup')
def signup():
return render_template('signup.html')
if __name__ == '__main__':
app.run(debug=True)
index.html
-18
View File
@@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Website</title>
<link rel="stylesheet" href="style.css">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bivariate.html">Bivariate Data</a></li>
<li><a href="about.html">About</a></li>
</ul>
</head>
<body>
<h1>Math website</h1>
<p>with math</p>
</body>
</html>
instance/accounts.db
BIN
View File
Binary file not shown.
static/style.css
+59
View File
@@ -0,0 +1,59 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
background-color: #fafafa;
line-height: 1.6;
}
h1, h2, h3 {
margin-top: 0;
}
a {
color: #2563eb;
}
a:hover {
color: #1d4ed8;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #333333;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.navbar li {
flex: 0 0 auto;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111111;
}
main {
margin-top: 26px;
max-width: 800px;
padding: 32px 24px;
}
style.css
-27
View File
@@ -1,27 +0,0 @@
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
body {
background-color: lightsteelblue;
}
about.html → templates/about.html
+5 -3
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html> {% extends 'base.html' %}
<html lang="en">
{% block content %}
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,4 +10,5 @@
<body> <body>
<h1>About this website</h1> <h1>About this website</h1>
</body> </body>
</html>
{% endblock %}
templates/base.html
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Math Website{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<ul class="navbar">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('bivariate') }}">Bivariate Data</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
<li style="margin-left: auto;"><a href="{{ url_for('signup') }}">Sign Up</a></li>
<li style="margin-left:0px"><a href="{{ url_for('signin') }}">Sign In</a></li>
</ul>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
bivariate.html → templates/bivariate.html
+9 -2
View File
@@ -1,5 +1,8 @@
<!DOCTYPE html> {% extends 'base.html' %}
<html lang="en">
{% block content %}
<div>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -33,3 +36,7 @@
</div> </div>
</body> </body>
</html> </html>
</div>
{% endblock %}
templates/index.html
+10
View File
@@ -0,0 +1,10 @@
{% extends "base.html" %}
{% block content %}
<div>
<h1>homepage for math website wow</h1>
</div>
{% endblock %}
templates/signin.html
+13
View File
@@ -0,0 +1,13 @@
{% extends 'base.html' %}
{% block content %}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sign in page with sql database</h1>
</body>
{% endblock %}
templates/signup.html
+25
View File
@@ -0,0 +1,25 @@
{% extends 'base.html' %}
{% block content %}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sign up page with sql database</h1>
<form action="/submit-form" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">Submit to Database</button>
</form>
</body>
{% endblock %}
test.html → templates/test.html
View File