Html /css avec python

Résolu
rose2022 Messages postés 20 Statut Membre -  
rose2022 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

  1.
    mamiemando Messages postés 33228 Date d'inscription   Statut Modérateur Dernière intervention   7 940
     

    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 à :

    Bonne chance

    1
  2. rose2022 Messages postés 20 Statut Membre 1
     

    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

    1
  3. Grandasse_ Messages postés 964 Date d'inscription   Statut Membre Dernière intervention   610
     

    Bonjour,

    Tu devrais essayer avec le lien relatif vers ton CSS, il ne faut pas chercher "file:///" car le serveur ne connait pas ça

    0
  4. rose2022 Messages postés 20 Statut Membre 1
     

    salut

    oui j'ai essayé avec le lien relatif :

    href= "C:\\Users\\USER\PycharmProjects\chatroom\style.css"

    ca ne fonctionne pas !

    merci bien

    0
    1. Grandasse_ Messages postés 964 Date d'inscription   Statut Membre Dernière intervention   610
       

      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.

      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. rose2022 Messages postés 20 Statut Membre 1
     

    slt

    j'ai corrigé ca fonctionne merci faut créer un sous dossier .

    0

Discussions similaires

Pix python
Soldat7632 -
Phil_1857 -

4 réponses
Citizen Code : Saison 1 Episode 3, difficulté à comprendre
Apprenti1970 -
jee pee -

11 réponses
le mot secret ne s'affiche pas, comment pourrais-je faire?
v.b.06 -
elevedeprime -

5 réponses
afficher un message sur python ""
Tim -
Enzo -

2 réponses
Aide exercice Python sur site Future Engineer
boncru -
Helper -

6 réponses