TV 채널 웹사이트: 대시보드 인덱스 페이지

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

향후 대시보드로의 경로가 설정되면 먼저 인덱스 페이지를 생성하여 대시보드 구축을 시작할 수 있습니다. 이 페이지는 모든 페이지의 기초가 됩니다.

# routes/backend/post.py

from bottle import Bottle, get, redirect
from controllers.backend.post import Post
import config


app = Bottle()
post = Post()

@app.get("/")
def getPage():
    if(config.checkLogged()):
        return post.getPage()
    else:
        redirect("/login")

# controllers/backend/post.py

import config, copy
from bottle import template, redirect, request

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


    def getPage(self):
        self.setup["pageTitle"] = "POST PAGE"
        self.setup["route"] = "/admin/post"
        user = config.checkLogged()
        if("name" in user):
            self.setup["username"] = user["name"]

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

<!--views/backend/index.tpl-->

<link rel="stylesheet" href="/static/styles/backend/index.css" />

<section class="Index">
    <header>
        <div class="inner region">
            <div class="page-title">{{ data["pageTitle"] }}</div>
            <form action="/admin/search" method="post">
                <select name="searchtype">
                    <option>Post</option>
                    <option>Category</option>
                    <option>User</option>
                </select>
                <input type="text" name="q" required />
                <input type="submit" value="Search" />
            </form>
            <div class="logout">
                {{ data["username"]}} | <a href="/">Home</a> | <a href="/login/logout">Logout</a>
            </div>
        </div>
    </header>

    <div class="main region">
        <div class="sidebar">
            <div class="inner">
                <a href="/admin/post"><img src="/static/images/movie.png" /></a>
                <a href="/admin/post">Post</a>

                <a href="/admin/category"><img src="/static/images/category.png" /></a>
                <a href="/admin/category">Category</a>

                <a href="/admin/upload"><img src="/static/images/upload.png" /></a>
                <a href="/admin/upload">Upload</a>

                <a href="/admin/user"><img src="/static/images/users.png" /></a>
                <a href="/admin/user">User</a>

                <a href="/admin/setting"><img src="/static/images/setting.png" /></a>
                <a href="/admin/setting">Settings</a>
            </div>
        </div>
        <div class="content">Content</div>
    </div>

    <div class="footer region">
        <div class="info">Total number of items:</div>
        <ul></ul>
        <div class="pagination">
            <img onclick="paginate(`{{ data['route'] }}`)" src="/static/images/load.png" />
        </div>

        <div class="credit">
            <a href="https://khmerweb.vercel.app/">&copy: Khmer Web 2022</a>
        </div>
    </div>
</section>

/* public/styles/backend/index.css */

.Index header{
    background-color: var(--background);
    margin-bottom: 20px;
    border-bottom: 7px solid white;
}

.Index header .inner{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 10px 0;
}

.Index header .inner .page-title{
    font: 20px/1.5 Anton;
}

.Index header .inner form{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Index header .inner form input,
.Index header .inner form select{
    font: var(--bordy-font);
    padding: 1px 5px;
}

.Index header .inner .logout{
    text-align: right;
}

.Index header .inner .logout a{
    color: white;
}

.Index .main{
    display: grid;
    grid-template-columns: auto 75%;
    grid-gap: 10px;
}

.Index .main .sidebar{
    background-color: var(--background);
    padding: 20px;
}

.Index .main .sidebar .inner{
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 15px;
    align-items: center;
}

.Index .main .sidebar .inner img{
    width: 100%;
    float: left;
}

.Index .main .sidebar .inner a{
    font: 18px/1.5 Oswald;
    color: white;
}

.Index .footer{
    padding: 10px 0 30px;
}

.Index .footer .info{
    background-color: var(--background);
    text-align: center;
    padding: 5px 0;
}

.Index .footer ul{
    margin: 10px 0;
}

.Index .footer .pagination{
    background-color: var(--background);
    text-align: center;
}

.Index .footer .pagination img{
    padding-top: 5px;
}

.Index .footer .pagination img:hover{
    cursor: pointer;
    opacity: 0.7;
}

.Index .footer .credit{
    padding-top: 30px;
    text-align: center;
}