TV 채널 웹사이트: 로그인 페이지 구축

14618 단어 tutorialwebdevpythonbottle
GitHub: https://github.com/Sokhavuth/TV-Channel
베르셀: https://khmerweb-tv-channel.vercel.app/login

지금까지는 빈 홈페이지만 있고 이 페이지에 올릴 내용이 없습니다. 따라서 이 페이지를 채우는 게시물을 작성하려면 관리자 페이지 또는 대시보드를 구축해야 합니다. 그러나 대시보드는 제한된 영역이므로 사용자를 인증하기 위해 로그인 페이지를 먼저 구축해야 이 영역에 들어갈 수 있습니다.

웹 프로그래밍에서 MVC(Models, Views, Controllers) 패턴은 웹 개발자가 가장 많이 채택합니다. 웹 애플리케이션의 경우에도 이 패턴을 따를 수 있습니다.

우리는 처음부터 이미 views 폴더를 만들었으므로 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;
}
Ruby: 인스턴스 및 클래스 메서드의 SELF
JS의 배열 방법 - shift 및 unshift

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage