'How do I use a stylesheet without interfering with the url?
model.html:
<body>
$def with (page)
$var css:static/css/bootstrap.css static/css/mdb.min.css static/css/yeboy.css
$var js: static/js/jquery.js static/js/bootstrap.js static/js/mdb.min.js static/js/scripts.js
$if self.css:
$for style in self.css.split():
<link rel="stylesheet" href ='$style' />
<div id="app">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a href="/" class="navbar-brand mb-0">
Terryverse
</a>
<button
type="button"
data-bs-toggle="collapse"
data-bs-target="navbarNav"
class="navbar-toggler"
aria-controls="#navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
Menu
</button>
<div
class="collapse navbar-collapse"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="/" class="nav-link active">
Home
</a>
</li>
<li class="nav-item active">
<a href="/Profile/terry" class="nav-link">
Profile
</a>
</li>
<li class="nav-item active">
<a href="/settings" class="nav-link">
Settings
</a>
</li>
<li class="nav-item active">
<a href="/" class="nav-link">
Contact
</a>
</li>
</ul>
<div class="position-relative ms-auto"
style="margin-left:0%">
$if session['user'] == None:
<a href="/login" class="btn btn-raised btn-link">
login
</a>
<a href="/register" class="btn btn-raised btn-light">
Register
</a>
$else:
<a href="/logout" id="logout-link" class="btn btn-raised btn-light">
Logout
</a>
</div>
</div>
</nav>
<br /><br />
$:page
</div>
$if self.js:
$for java in self.js.split():
<script src="$java"></script>
</body>
Then the python:
import web
from Modelspy import RegisterModel, LoginModel,posts
web.config.debug = False
url = [
'/', 'index',
'/register','register',
'/postregistration','PostRegistration',
'/login','Login',
'/logout','Logout',
'/check-login','CheckLogin',
'/post-activity','Postactivity',
'/update-settings', 'UpdateSettings',
'/Profile/(.*)', 'UserProfile',
'/settings', 'Settings',
]
app = web.application(url, globals())
session = web.session.Session(app, web.session.DiskStore('sessions'),initializer = {"user": None})
session_data = session._initializer
render = web.template.render('models/',base= 'model', globals={'session': session_data, "current_user": session_data['user']})
class index:
def GET(self):
data = type('obj',(object,),{'username': 'terry','password':'terry'})
login = LoginModel.LoginModel()
isCorrect= login.check_user(data)
if isCorrect:
session_data["user"] = isCorrect
post_model= posts.Posts()
post1 = post_model.get_all_finds()
return render.home(post1)
class register:
def GET(self):
return render.register()
class PostRegistration:
def POST(self):
data = web.input()
reg_model = RegisterModel.RegisterModel()
reg_model.insert_user(data)
return data.username
class Login:
def GET(self):
return render.login()
class CheckLogin:
def POST(self):
data = web.input()
login = LoginModel.LoginModel()
isCorrect= login.check_user(data)
if isCorrect:
session_data["user"] = isCorrect
return isCorrect
return 'error'
class Logout:
def GET(self):
session['user'] = None
session_data['user'] = None
session.kill()
return "success"
class Postactivity:
def POST(self):
data = web.input()
data.username = session_data['user']['username']
post_mod= posts.Posts()
post_mod.posting(data)
return 'success'
class UserProfile:
def GET(self, user):
print(user)
return render.Profile()
if __name__ == '__main__':
app.run()
I am trying to get the 'user' in the UserProfile class to just be 'terry' which is the part following '/profile'. However, the stylesheet parts like '/static/css/bootstrap.css' are also following the '/profile' part which is problematic. This is because I want to use 'user' in another function but only want to use the name following '/profile'. I hope this is clear. My terminal is below:
http://0.0.0.0:8080/
127.0.0.1:59935 - - [28/Mar/2022 22:49:27] "HTTP/1.1 GET /" - 200 OK
127.0.0.1:59935 - - [28/Mar/2022 22:49:27] "HTTP/1.1 GET /static/js/scripts.js" - 304 Not Modified
terry
127.0.0.1:59935 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/terry" - 200 OK
static/css/yeboy.css
static/css/mdb.min.css
127.0.0.1:59936 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/css/mdb.min.css" - 200 OK
127.0.0.1:59940 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/css/yeboy.css" - 200 OK
static/js/bootstrap.js
static/css/bootstrap.css
static/js/jquery.js
127.0.0.1:59940 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/js/bootstrap.js" - 200 OK
127.0.0.1:59935 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/css/bootstrap.css" - 200 OK
127.0.0.1:59936 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/js/jquery.js" - 200 OK
static/js/mdb.min.js
static/js/scripts.js
127.0.0.1:59940 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/js/mdb.min.js" - 200 OK
127.0.0.1:59935 - - [28/Mar/2022 22:49:28] "HTTP/1.1 GET /Profile/static/js/scripts.js" - 200 OK
Solution 1:[1]
Ok so I have figured out why it does not work. In my mainlayout script, the <scripts src='static/js/static.js' is missing '/' meaning it will automatically add this to whatever url you use. Rather than looking into the directory, it adds onto the url and then tries to find the files from there. Obviously this doesn't work. Because it is added on, the regex keeps on catching it.
Thanks to @Mufaddal Kothari for helping me in this process, I learned a lot!
Solution 2:[2]
I have no idea which framework you are using, so if you can mention it I might be able to help. But a simple hack would be to use CDN links instead of files from your desktop.
eg for bootstrap would be:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
For jquery:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
for Material Design for bootstrap:
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css"
rel="stylesheet"
/>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"
></script>
Alternatively, you can shift these files into the static directory of your app from wherever they are on you desktop
This question also seems to be answered here - Not able to access stylesheet and javascript files from Web Py controller
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | paltaa |
| Solution 2 |