#index.py
from routes import login
from routes.front import index
from models import setDBconnection
app = index.app
app.mount('/login', login.app)
import socket
host = socket.getfqdn()
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
app.run(host='localhost', port=7000, debug=True, reloader=True)
#routes/frontend/index.py
import config
from .. import static
app = static.app
@app.route('/')
def index():
return config.kdict['siteTitle']
#routes/login.py
from bottle import Bottle
app = Bottle()
@app.route('/')
def getForm():
from controllers.login import get
return get.call()
#controllers/login/get.py
import config
from copy import deepcopy
from bottle import template
def call():
kdict = deepcopy(config.kdict)
kdict['pageTitle'] = 'ទំព័រចុះឈ្មោះ'
kdict['route'] = '/login'
return template('base',data=kdict)
<!--views/base.tpl-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ data['siteTitle'] }}/{{data['pageTitle']}}</title>
<script src="/static/scripts/jQuery.js"></script>
<link href="/static/images/siteLogo.png" rel="icon" ></link>
<link href="/static/fonts/setup.css" rel="stylesheet"></link>
<link href="/static/styles/base.css" rel="stylesheet"></link>
</head>
<body>
%if(data['route'] == '/login'):
%include('login.tpl')
%end
</body>
</html>
/* public/styles/base.css */
:root{
--background: #1e88e5;
--background-dark: #2b2b2b;
--background-light: #f7b527;
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--link: #cee2f3;
--color: white;
--item-listing: white;
--item-listing-color: grey;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: var(--link);
}
a:hover{
opacity: .7;
}
.region{
max-width: 1150px;
margin: 0 auto;
}
body{
color: var(--color);
font: var(--body-font);
background: var(--background);
}
<!--views/login.tpl-->
<link rel='stylesheet' href='/static/styles/login.css' />
<section>
<header>ចុះឈ្មោះចូលទំព័រគ្រប់គ្រង</header>
<form method="post" action="/login">
<a>Email:</a><input type='email' name="email" required />
<a>ពាក្យសំងាត់ៈ</a><input type='password' name="password" required />
<a></a><input type='submit' value='បញ្ជូន' />
<a></a><div>{{ data['message'] }}</div>
</form>
</section>
/* public/styles/login.css */
.Login{
width: 400px;
margin: 100px auto;
background: rgb(255, 136, 0);
}
.Login header{
text-align: center;
font: 22px/1.5 Limonf3;
padding: 5px;
border-bottom: 1px solid white;
}
.Login form{
padding: 20px;
display: grid;
grid-template-columns: 75px auto;
grid-gap: 2px 5px;
align-items: center;
}
.Login form a{
text-align: right;
color: white;
}
.Login form input{
font: var(--body-font);
padding: 2px 10px;
}
Vercel: https://khmerweb-vlog.vercel.app
