Сайт телевизионного канала: Создание страницы входа

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login

Пока что у нас есть только пустая домашняя страница, и у нас нет ничего, что можно было бы разместить на этой странице. Поэтому нам нужно создать страницу администратора или приборную панель для создания постов, которые будут заполнять эту страницу. Но поскольку приборная панель — это ограниченная область, нам нужно сначала создать страницу входа, чтобы аутентифицировать пользователя, прежде чем позволить ему войти в эту область.

В веб-программировании шаблон MVC (Models, Views, Controllers) является наиболее распространенным среди веб-разработчиков. Для нашего веб-приложения мы тоже можем следовать этому шаблону.

Мы уже создавали папку views с самого начала, нам нужно только добавить папки controllers и models, чтобы следовать паттерну MVC.

Более того, мы можем закодировать механизм входа в систему как отдельное приложение или чертеж, который будет установлен вместе с основным приложением в файле index.py.

# index.py

from bottle import static_file, get
from routes.frontend import index
from routes.frontend import login


app = index.app
app.mount('/login', login.app)

@app.get('/static/<filepath:path>')
def staticFile(filepath):
    return static_file(filepath, root="public")


###################################################################
import socket
host = socket.getfqdn()    
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
    app.run(host='localhost', port=8000, debug=True, reloader=True)

###################################################################
Вход в полноэкранный режим Выход из полноэкранного режима
# routes/frontend/login.py

from bottle import Bottle, get, post
from controllers.frontend.login import Login


app = Bottle()
login = Login()

@app.get("/")
def getLogin():
    return login.getPage()
Войти в полноэкранный режим Выход из полноэкранного режима
# controllers/frontend/login.py

import config, copy
from bottle import template


class Login:
    def __init__(self):
        settings = copy.deepcopy(config.settings)
        self.setup = settings()

    def getPage(self):
        self.setup["pageTitle"] = "Log into Admin Page"
        self.setup["route"] = "/login"

        return template("base", data=self.setup)


Войти в полноэкранный режим Выход из полноэкранного режима
<!--views/frontend/login.tpl-->

<link rel="stylesheet" href="/static/styles/frontend/login.css" />

<section class="Login">
    <div class="outer region">
        <div class="title">{{ data["pageTitle"] }}</div>
        <form action="/login" method="post">
            <a>Email:</a><input type="email" name="email" />
            <a>Password:</a><input type="password" name="password" />
            <a></a><input type="submit" value="Submit" />
            <a></a><div class="message">{{ data["message"] }}</div>
        </form>
    </div>
</section>
Войти в полноэкранный режим Выход из полноэкранного режима
<!--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 href="/static/fonts/setup.css" rel="stylesheet" />
        <link href="/static/styles/base.css" rel="stylesheet" />
    </head>
    <body>
        <%  
        if(data["route"] == "/login"):
            include('./frontend/login.tpl')
        end
        %>
    </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима
/* public/styles/frontend/login.css */

.Login .outer{
    margin-top: 100px;
    width: 400px;
    background-color: var(--background);
}

.Login .outer .title{
    text-align: center;
    border-bottom: 1px solid var(--background-light);
    font: 25px/1.5 BlackOpsOne;
}

.Login .outer form{
    display: grid;
    grid-template-columns: 20% auto;
    grid-gap: 5px;
    padding: 20px;
    align-items: center;
}

.Login .outer form input{
    font: var(--body-font);
    padding: 1px 5px;
}

.Login .outer form a{
    text-align: right;
    color: white;
}

.Login .outer form .message{
    text-align: center;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий