An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Slashdot
- Mashable
- Simplebits
- Pearsonified
- Abduzeedo
- Creative Curio
- Crazy Leaf Design
- CSS Globe
- Line 25
- Android Dissected
Help Webnuz
Referal links:
TV Channel Website: Building Login Page
GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login
So far, we have only a blank homepage, and we do not have anything to put on this page. So, we need to build an admin page or a dashboard to create posts to populate this page. But, as the dashboard is a restricted area, we need to build a login page first to authenticate user before letting them get into this area.
In web programming, the MVC (Models, Views, Controllers) pattern is the most adopted by web developers. For our web application, we can follow this pattern too.
We have been already creating views folder since the beginning, we need only to add controllers and models folders to follow the MVC pattern.
Moreover, we can code login mechanism as a separated application or a blueprint to be mounted with the main application in the entry point index.py file.
# index.pyfrom bottle import static_file, getfrom routes.frontend import indexfrom routes.frontend import loginapp = index.appapp.mount('/login', login.app)@app.get('/static/<filepath:path>')def staticFile(filepath): return static_file(filepath, root="public")###################################################################import sockethost = 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.pyfrom bottle import Bottle, get, postfrom controllers.frontend.login import Loginapp = Bottle()login = Login()@app.get("/")def getLogin(): return login.getPage()# controllers/frontend/getPage.pyimport config, copyfrom bottle import templateclass 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;}Original Link: https://dev.to/sokhavuth/tv-channel-website-building-login-page-3694
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To