Html /css avec python
Résolurose2022 Messages postés 20 Statut Membre -
Bonsoir
svp autant que débutante en python j'ai besoin d'aide svp
mon projet : création de chatroom sécurisé entre plusieurs utilisateurs .
mon probléme : coté client : :j'ai crée une page html (login et inscription) dans un script python et je n'arrive pas a le mètre en forme avec css.
ce que j'ai fait : ajout d'hyperlien a l'entête Head mais ca fonctionne pas ?
<link rel="stylesheet" href="file:///C|/Users\\USER\PycharmProjects\chatroom/style.css" media="screen" type="text/css" />
voici le code :
server.py :
import http.server
PORT = 80
server_address = ("", PORT)
server = http.server.HTTPServer
handler = http.server.CGIHTTPRequestHandler
handler.cgi_directories = ["/"]
print("Serveur actif sur le port :", PORT)
httpd = server(server_address, handler)
httpd.serve_forever()
index.py : ce script affiche la page html du login pour le chatroom
# coding: utf-8
import cgi
form = cgi.FieldStorage()
print("Content-type: text/html; charset=utf-8\n")
print(form.getvalue("name"))
html = """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<!-- importer le fichier de style -->
<link rel="stylesheet" href="file:///C|/Users\\USER\PycharmProjects\chatroom/style.css" media="screen" type="text/css" />
</head>
<body>
<center><b><p>Bienvenue dans la Messagerie Instantanée</p></b>
</center>
<div id="container">
<!-- zone de connexion -->
<form action="vérification.py" method="POST">
<h1>Connexion</h1>
<label><b>Nom d'utilisateur</b></label>
<input type="text" placeholder="Entrer le nom d'utilisateur" name="pseudo" required>
<label><b>Mot de passe</b></label>
<input type="password" placeholder="Entrer le mot de passe" name="mot_de_passe" required>
<input type="submit" id='submit' value='Se Connecter' />
<h1>inscription</h1>
<input type="submit" onclick=window.location.href='inscription.html'; value= 'Créer Nouveau Compte' />
</form>
</div>
</body>
</html>
"""
print(html)
5 réponses
Bonjour,
Comme je te l'ai expliqué dans ton autre discussion, les classes de bases fournies par python sont assez laborieuses à utiliser (et en plus les tutoriels diffèrent entre python2 et python3 car le paquet http n'est pas organisé pareil). Tu aurais meilleur temps d'utiliser cherrypy.
Mais bref, voici un exemple minimal qui met en évidence un CGI python avec CSS en utilisant le module http en python3. Tous les fichiers qui suivent doivent être positionnés dans le même dossier.
main.py
import time
import http.server
import cgitb; cgitb.enable() ## This line enables CGI error reporting
from my_handler import MyHandler
server = http.server.HTTPServer
server_address = ("localhost", 8000)
handler = MyHandler
handler.cgi_directories = ["/"]
print(time.asctime(), "Start Server - %s:%s" % server_address)
try:
httpd = server(server_address, handler)
httpd.serve_forever()
except KeyboardInterrupt:
pass
httpd.server_close()
print(time.asctime(), "Stop Server - %s:%s" % server_address)
On prépare le serveur web avec notre propre handler. C'est ce handler qui implémente le comportement du serveur en fonction de l'URI reçue.
main.css
body {
background-color: #222;
}
h1 {
color: red;
}
Lorsque le CSS est en action, les titres sont en rouge et le fond est gris foncé.
my_handler.py
import http.server
import traceback
class MyHandler(http.server.CGIHTTPRequestHandler):
def do_GET(self):
if self.path.endswith(".py"):
super().do_GET()
else:
try:
filename = self.path.lstrip("/")
with open(filename) as f:
data = f.read()
self.send_response(200)
self.end_headers()
self.wfile.write(bytes(data, "utf-8"))
except Exception:
self.send_error(404, traceback.format_exc())
Ici on rattrape "en CGI" tout appel à une URI qui se finit par ".py" (par exemple "/test_cgi.py"). Sinon on sert le fichier comme un fichier texte (en particulier quand il s'agit d'un fichier css. Cette modification de do_GET nécessaire, sinon la classe Server tente d'exécuter le fichier css comme s'il s'agissait d'un script.
Note qu'on peut améliorer le handler pour rediriger l'URI / vers /index.html, ce qui permettra d'afficher cette page si on va sur http://localhost:8000.
import http.server
import traceback
class MyHandler(http.server.CGIHTTPRequestHandler):
def do_GET(self):
if self.path.endswith(".py"):
super().do_GET()
else:
try:
filename = self.path.lstrip("/")
if not filename:
filename = "index.html"
with open(filename) as f:
data = f.read()
self.send_response(200)
self.end_headers()
self.wfile.write(bytes(data, "utf-8"))
except Exception:
self.send_error(404, traceback.format_exc())
index.html
Ce fichier n'est pas nécessaire dans l'absolu mais permet d'avoir quelque chose à afficher quand on va sur http://localhost:8000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h1>Page par défaut index.html</h1>
</body>
</html>
test_cgi.py
#!/usr/bin/env python3
from datetime import date
# https://docs.python.org/3/library/cgi.html
print("Content-type: text/html")
print("")
# Now let's play
TEMPLATE_HTML = """<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/main.css">
</head>
<body>
%s
</body>
</html>"""
today = date.today()
print(TEMPLATE_HTML % f"""
<h1>Date du jour<h1>
{today}
""")
Trois points pour que ça marche :
1) Le CGI doit avoir des droits en exécution. Sous Linux on lancerait donc :
chmod a+x test_cgi.py
2) Le CGI doit être dans l'un des dossiers référencés par handler.cgi_directories. Ici, notre CGI est dans le même dossier que le script python qui lance le serveur, ce qui correspond dossier / et est donc conforme à handler.cgi_directories.
3) Le shebang du CGI doit permettre au système d'exploitation de trouver l'interpréteur (ici l'interpréteur python) à utiliser pour exécuter le script. Dans l'absolu, le serveur web pourrait servir à la fois des fichiers écrits python et pourquoi pas des fichiers écrits en perl ou en php. La décision est prise en fonction de cette liste.
Sous Linux, la manière propre de récupérer le chemin de l'interpréteur python est :
#!/usr/bin/env python3
Je laisse le soin aux personnes sous Windows de préciser comment on fait dans ce cas, personnellement, je ne sais pas.
Tests
On lance le serveur :
python3 main.py
Puis on peut tenter dans le navigateur d'accéder à :
- http://localhost:8000/hello.py
- http://localhost:8000/index.html et son alias http://localhost:8000/
- http://localhost:8000/main.css
- http://localhost:8000/test_cgi.py
Bonne chance
bonsoir
merci beaucoup pour votre réponse
voila dans mon dossier chatroom j'ai le script index.py et mon fichier css
ce que je fait :
href="chatroom/style.css" écrit dans index.py
mais pourquoi ca ne fonctionne pas je tourne en rond depuis des jours .
salutations
Bonjour,
Tu devrais essayer avec le lien relatif vers ton CSS, il ne faut pas chercher "file:///" car le serveur ne connait pas ça
salut
oui j'ai essayé avec le lien relatif :
href= "C:\\Users\\USER\PycharmProjects\chatroom\style.css"
ca ne fonctionne pas !
merci bien
Oui pardon, je me suis mal exprimé. C'est normal que ça ne fonctionne pas.
Il faudrait quelque chose comme :
href="chatroom/style.css" // ou bien href="style.css"
ça dépend où se trouve la page qui appelle ce code.
C'est ce qu'on appelle un lien relatif, il part de la page qui l'appelle contrairement à un chemin absolu où on vient indiquer le chemin entier depuis le disque.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question