반응형
자바스크립트를 좀 맛깔나게 만들어 동적인 연출을 나타내려 했으나... ㅜ
귀찮았다.
아무튼 html과 css를 조합해서 대충 비슷한 효과를 내도록 만들었다.
기능은 대충 구현했지만, 디자인이 하자인데..
프론트 엔드 개발자를 목표로 안하길 잘한 것 같다.
개인적으로 미적 감각이 있다고 생각하는데 요건 좀 아닌거 같다.
bob 하면서 까먹고 있다가 급하게 올림.
wish.py
#!/usr/bin/python3
from flask import Flask, url_for, render_template, request, redirect, session, flash
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SECRET_KEY'] = 'TESTKEY'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class User(db.Model):
__table_name__ = 'user'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(100), unique=True, nullable=False)
password = db.Column(db.String(100), nullable=False)
notes = db.relationship('Note', backref='owner')
def __init__(self, username, password):
self.username = username
self.password = password
class Note(db.Model):
__table_name__ = 'note'
id = db.Column(db.Integer, primary_key=True)
summary = db.Column(db.String(30), nullable=False)
detail = db.Column(db.String(200), nullable=True)
category = db.Column(db.Integer, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
.route('/', methods=['GET', 'POST'])
def home():
if session.get('logged_in'):
resp_note = Note.query.filter_by(user_id=session.get('user_id')).all()
print('return note test')
print(dir(resp_note[0]))
# print(resp_note[0])
return render_template('home.html', notes=resp_note, isLogin=True)
print('Dummy Context!')
return render_template('home.html')
.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
new_user = User(username=request.form['username'], password=request.form['password'])
db.session.add(new_user)
db.session.commit()
return redirect(url_for('login'))
return render_template('register.html')
.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
resp = User.query.filter_by(username=username, password=password).first()
if resp is not None:
session.clear()
session['user_id'] = resp.id
session['logged_in'] = True
print(dir(session))
print(session)
return redirect(url_for('home'))
else:
error = 'Incorrect ID or Password!'
flash(error)
return render_template('login.html')
.route('/logout')
def logout():
session.clear()
return redirect(url_for('home'))
.route('/update/<int:id>', methods=['POST'])
def update(id):
if request.method == 'POST':
print('add request')
print(dir(request))
print(request.form['summary'])
print(request.form['detail'])
new_note = Note(
summary = request.form['summary'],
detail = request.form['detail'],
category = id,
user_id = session['user_id']
)
db.session.add(new_note)
db.session.commit()
return redirect(url_for('home'))
.route('/delete/<int:id>')
def delete(id):
note = Note.query.filter_by(user_id=session['user_id'], id=id).first()
if not note is None:
print(note)
db.session.delete(note)
db.session.commit()
print('delete' + str(id))
return redirect(url_for('home'))
if __name__ == '__main__':
db.create_all()
app.run(host='0.0.0.0', port=5000 ,debug=True)home.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Document</title>
</head>
<body>
<header>
<h1 class="Main">My WishList</h1>
<div>
{% if not isLogin %}
<button onClick="location.href='/login'">Sign In</button>
<button onClick="location.href='/register'">Register</button>
{% else %}
<button onClick="location.href='/logout'">Log Out</button>
{% endif %}
</div>
</header>
<article>
<div class="part" id="part0">
<h1 class="category" onClick="swap(0)">Life</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 0 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="note_font">
{{ note['summary'] }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="part" id="part1">
<h1 class="category" onClick="swap(1)">Year</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 1 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="note_font">
{{ note['summary'] }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="part" id="part2">
<h1 class="category" onClick="swap(2)">Month</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 2 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="note_font">
{{ note['summary'] }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="part" id="part3">
<h1 class="category" onClick="swap(3)">Week</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 3 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="note_font">
{{ note['summary'] }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="part" id="part4" style="display:none">
<h1 class="category" onClick="swap(4)">Today!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 4 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="note_font">
{{ note['summary'] }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</article>
<footer>
<div class="main" id="main0" style="display:none">
<h1 class="main_category">Life!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 0 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="main">
{{ note['summary'] }}
</span>
<p class="main">
{{ note['detail'] }}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="main" id="main1" style="display:none">
<h1 class="main_category">Year!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 1 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="main">
{{ note['summary'] }}
</span>
<p class="main">
{{ note['detail'] }}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="main" id="main2" style="display:none">
<h1 class="main_category">Month!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 2 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="main">
{{ note['summary'] }}
</span>
<p class="main">
{{ note['detail'] }}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="main" id="main3" style="display:none">
<h1 class="main_category">Week!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 3 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="main">
{{ note['summary'] }}
</span>
<p class="main">
{{ note['detail'] }}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="main" id="main4" style="display:block">
<h1 class="main_category">Today!</h1>
<ul>
{% for note in notes %}
{% if note['category'] == 4 %}
<li>
<button class="check" onClick="check_click({{ note['id'] }})">✔</button>
<span class="main">
{{ note['summary'] }}
</span>
<p class="main">
{{ note['detail'] }}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="add">
<form name="addSchedule" method="post" action="{{ url_for('update', id=4) }}">
<label for="summary">Summary</label>
<input type="text" class="" name="summary">
<label for="detail">Detail</label>
<input type="text" class="" name="detail">
<input type="submit" value="add">
</form>
</div>
</footer>
<script>
var divlist = [0,1,2,3,4]
var x = 0;
function div_align(){
console.log(divlist)
for (var i of divlist){
var obj1 = document.getElementById('part'+(i));
obj1.style.display = "block";
var obj2 = document.getElementById('main'+(i));
obj2.style.display = "none";
}
}
function swap(order=4){
const idx = divlist.indexOf(order);
divlist.splice(idx, 1);
divlist.sort();
document.getElementById('part'+order).style.display = "none";
document.getElementById('main'+order).style.display = "block";
div_align();
divlist.push(order);
var addForm = document.getElementsByName('addSchedule')[0];
addForm.action = addForm.action.substring(0, addForm.action.length-1) + order;
console.log(addForm.action);
}
function check_click(id){
console.log('check'+id)
location.href = "/delete/"+(id)
}
</script>
</body>
</html>login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>login</h1>
<form method="post">
<label for="username">Username</label>
<input type="text" name="username">
<label for="password">Password</label>
<input type="text" name="password">
<input type="submit" value="Sign In">
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{{ messages[0] }}
</ul>
{% endif %}
{% endwith %}
</body>
</html>register.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>register</h1>
<form method="post">
<label for="username">Username</label>
<input type="text" name="username">
<label for="password">Password</label>
<input type="password" name="password">
<input type="submit" value="Register">
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{{ messages[0] }}
</ul>
{% endif %}
{% endwith %}
</body>
</html>style.css
html {
background-color: #2f3542;
}
header {
/* background-color: #7bed9f; */
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 40px;
color: whitesmoke;
margin-top: 20px;
cursor: pointer;
}
h1.Main {
border: 5px solid #a4b0be;
padding: 15px 200px 15px 200px;
margin-right: 20px;
}
h1.category {
margin: 30px 0px 0px 30px;
}
article {
display: flex;
margin-top: 20px;
}
div.part {
/* justify-content: center; */
/* align-items: center; */
display: flex;
flex-direction: column;
width: 20%;
height: 270px;
border: 3px dashed #a4b0be;
margin-left: 15px;
color: whitesmoke;
}
ul {
list-style: none;
padding-left: 10px;
}
button.check {
height: 20px;
width: 25px;
font-size: 15px;
font-weight: bolder;
color: green;
text-align: center;
cursor: pointer;
}
span.note_font {
font-size: 20px;
}
div.main {
width: 90%;
margin: 20px 20px 20px 20px;
color: whitesmoke;
}
h1.main_category {
font-size: 50px;
}
span.main {
font-size: 25px;
}
p.main {
font-size: 20px;
margin-left: 50px;
}
div.add {
margin: 20px 20px 20px 20px;
}
footer {
width: 875px;
border: 3px dashed #a4b0be;
margin: 15px 15px 15px 15px;
}반응형