active templating for cgi response

base_form.html

@@ -11,78 +11,7 @@
   <link type=text/css rel=stylesheet href="static/css/topbar_bootstrap_retrocompatibility.css">
   <link type=text/css rel=stylesheet href="static/js/jquery-ui-1.12.1/jquery-ui.min.css">
   <link type=text/css rel=stylesheet href="static/js/realperson/jquery.realperson.css">
-  <style type="text/css" media="screen">
-    .white { color:#fff ; }
-    .page {
-      margin-top: 45px;   /* topbar height is 40px */
-    }
-
-    /* for intro text */
-    .mini-hero {
-      margin-top: 1.5em;
-      font-size: 18px;
-      line-height: 27px;
-    }
-
-    /* ==> a question + input block <== */
-    .question {
-      padding: 0 1em;
-      margin-bottom: 2em;
-      /*background-color: red;*/
-    }
-
-    .operation {
-      color: #aa9 ;
-    }
-
-
-    /* small label inside addon group*/
-    .smlabel {
-      /*background-color: green;*/
-      min-width: 7.5em;
-    }
-
-    /* the question's additional legend or caption */
-    .legend {
-      font-family: Cambria, serif;
-      color: #504940 ;
-      font-style: italic;
-      text-align:right;
-      padding: .5em 0 .5em .5em ;
-      margin: 0;
-    }
-
-    /* page sections: style snippets from old bootstrap h2 */
-    h2.oldstyle {
-      font-family: Ubuntu, sans-serif;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 18px ;
-    }
-
-    /* big categories: like form sections etc. */
-    h3.formcat {
-      margin-top: 2em;
-    }
-
-    .spacerrow {
-      height: 5em;
-    }
-
-    .realperson-challenge {
-      float:right;
-    }
-    .realperson-text {
-      padding: 0 2em;
-    }
-    .realperson-regen {
-      color: #aa9 ;
-    }
-    .bigspacerrow {
-      height: 50em;
-    }
-  </style>
-
+  <link type=text/css rel=stylesheet href="static/css/comex_reg.css">
 
   <!-- ## JS ## -->
 
@@ -113,9 +42,9 @@
   <div class="topbar" style="opacity: 0.93;">
       <div class="topbar-inner">
           <div class="container-fluid">
-              <a class="brand" href="http://communityexplorer.org/index.html">
+              <a class="brand" href="http://www.iscpif.fr">
                 <span class="glyphicon glyphicon-home white"></i></a>
-              <ul class="white nav">
+              <ul class="white nav navbar-nav">
                   <li>
                       <a id="mainpagelink" href="http://communityexplorer.org/#"> <strong>Complex systems community explorer</strong></a>
                   </li>
@@ -142,7 +71,8 @@
 
         <!-- ########################### ( FORM ) ########################## -->
         <form id="comex_reg_form" enctype="multipart/form-data"
-              method="post" onsubmit="document.getElementById('formsubmit').disabled = true"
+              method="post"
+              onsubmit="whileSubmit(this)"
               action="cgi-bin/comex_merci_pour_les_infos.py.cgi">
 
         <!-- todo onsubmit also save to cache -->
@@ -255,6 +185,15 @@
             <p class="legend">Please enter at most 5 comma-separated keywords</p>
           </div>
 
+          <div class="question">
+            <div class="input-group">
+              <label for="organization" class="smlabel input-group-addon">* Organization</label>
+              <input id="organization" name="organization"
+                     type="text" class="form-control" placeholder="organization">
+            </div>
+            <!-- <p class="legend">Please enter at most 5 comma-separated keywords</p> -->
+          </div>
+
           <div class="row spacerrow">&nbsp;</div><div class="row spacerrow">&nbsp;</div>
 
           <!-- CAPTCHA -->

cgi-bin/comex_merci_pour_les_infos.py.cgi

@@ -14,12 +14,17 @@ from cgi         import FieldStorage
 from traceback   import format_exc, format_tb
 from ctypes      import c_int
 from re          import sub
-# from jinja2      import Template, Environment, FileSystemLoader
+from jinja2      import Template, Environment, FileSystemLoader
+from sys         import stdout   # for direct buffer write of utf-8 bytes
 
 # debug
 import cgitb
 cgitb.enable()
 
+# templating setup
+templating_env = Environment(loader = FileSystemLoader('../templates'),
+                             autoescape = False)
+
 ########### SUBS ###########
 def re_hash(userinput, salt=""):
     """
@@ -40,21 +45,28 @@ def re_hash(userinput, salt=""):
 
     return hashk
 
+def get_template(filename):
+    """
+    Retrieve a jinja2 template from ../templates
+    """
+    return templating_env.get_template(filename)
+
+def print_to_buffer(stringy):
+    """
+    print() with utf-8 in a cgi doesn't work well because print is
+    connected to sys.stdout which has hardcoded encoding ASCII...
+    (but in reality html can of course have utf-8 bytes in cgi)
+    so to avoid print function we write to sys.stdout.buffer
+    (inspired by http://stackoverflow.com/questions/14860034)
+    """
+    stdout.buffer.write((stringy+'\n').encode('utf-8'))
+
 ########### MAIN ###########
 if __name__ == "__main__":
 
     # any response must have this
-    print("Content-type: text/html")
-    print()  # blank line <=> end of headers
-
-    #  --------- todo use templates --------------------------->8--------------
-    # template1 = Template('Hello {{ name }}!')
-    # print(template1.render(name='Jogn'))
-    #
-    # template2 = Environment(loader=FileSystemLoader('../templates')).get_template('thank_you.html')
-    #
-    # print(template2.render(form_accepted=True).encode("utf-8"))
-    # -------------------------------------------------------->8-----------------
+    print_to_buffer("Content-type: text/html")
+    print_to_buffer('')  # blank line <=> end of headers
 
     # reception: the cgi library gets vars from html form within received http POST
     this_data = FieldStorage()
@@ -91,36 +103,65 @@ if __name__ == "__main__":
         captcha_userinput = this_data['my-captcha'].value
         captcha_verifhash = int(this_data['my-captchaHash'].value)
         captcha_userhash = re_hash(captcha_userinput)
-        form_accepted = (captcha_userhash == captcha_verifhash)
+        captcha_accepted = (captcha_userhash == captcha_verifhash)
         # ----------------------------------------------------------------------
 
-
         # debug data keys
         # print([k for k in this_data])
 
-        # show received values
-        print("<TITLE>CGI script output</TITLE>")
-
-        print("<p style='font-family:Calibri, sans-serif; font-size:80%'")
-        print('<br>first_name:',first_name)
-        print('<br>midle_name:',middle_name)
-        print('<br>last_name:',last_name)
-        print('<br>initials:',initials)
-        print('<br>email:',email)
-        print('<br>country:',country)
-        print('<br>jobtitle:',jobtitle)
-        print('<br>keywords:',keywordsss)
-        print('<br>captcha is correct ?:',form_accepted)
-        # print('instituton:',institution)
+
+        # show received values in template
+        template_thanks = get_template("thank_you.html")
+
+        print_to_buffer(
+            template_thanks.render(
+                form_accepted = captcha_accepted,
+                raw_answers = [
+                  first_name,
+                  middle_name,
+                  last_name,
+                  initials,
+                  email,
+                  country,
+                  jobtitle,
+                  keywordsss,
+                ]
+            )
+        )
+        # print('<br>midle_name:',middle_name)
+        # print('<br>last_name:',last_name)
+        # print('<br>initials:',initials)
+        # print('<br>email:',email)
+        # print('<br>country:',country)
+        # print('<br>jobtitle:',jobtitle)
+        # print('<br>keywords:',keywordsss)
+        # print('<br>captcha is correct ?:',form_accepted)
+        # # print('instituton:',institution)
+
+
+
+        # print("<TITLE>CGI script output</TITLE>")
+        #
+        # print("<p style='font-family:Calibri, sans-serif; font-size:80%'")
+        # print('<br>first_name:',first_name)
+        # print('<br>midle_name:',middle_name)
+        # print('<br>last_name:',last_name)
+        # print('<br>initials:',initials)
+        # print('<br>email:',email)
+        # print('<br>country:',country)
+        # print('<br>jobtitle:',jobtitle)
+        # print('<br>keywords:',keywordsss)
+        # print('<br>captcha is correct ?:',form_accepted)
+        # # print('instituton:',institution)
 
     except KeyError as kerrr:
-        print("<h3>Your form was empty</h3")
-        print("<p style='font-family:monospace; font-size:80%'")
-        print(sub(r'\n', "<br/>", format_exc()))
-        print("</p>")
+        print_to_buffer("<h3>Your form was empty</h3")
+        print_to_buffer("<p style='font-family:monospace; font-size:80%'")
+        print_to_buffer(sub(r'\n', "<br/>", format_exc()))
+        print_to_buffer("</p>")
 
     except Exception as errr:
-        print("<h3>There was an error:</h3")
-        print("<p style='font-family:monospace; font-size:80%'")
-        print(sub(r'\n', "<br/>", format_exc()))
-        print("</p>")
+        print_to_buffer("<h3>There was an error:</h3")
+        print_to_buffer("<p style='font-family:monospace; font-size:80%'")
+        print_to_buffer(sub(r'\n', "<br/>", format_exc()))
+        print_to_buffer("</p>")

dev_server_templates/README.md

+Flask templates
+===============
+
+More interpolated templates (only useful on dev server by flask)

templates

-dev_server_templates
\ No newline at end of file

templates/README.md

+Jinja templates
+===============
+
+Simple html templates for jinja2

thank_you_static_template.html → templates/thank_you.html

@@ -2,7 +2,7 @@
 <html lang="fr-FR">
 <head>
   <meta charset="utf-8">
-  <title>Formulaire Community Explorer : se ré-enregistrer</title>
+  <title>Formulaire Community Explorer : réponses enregistrées</title>
   <meta name="description" content="Formulaire d'enregistrement sur la plateforme Community Explorer (ISCPIF CNRS UPS 3611)">
   <meta name="keywords" content="complex systems, community, registration form">
 
@@ -10,36 +10,7 @@
   <link type=text/css rel=stylesheet href="../static/css/bootstrap.min.css">
   <link type=text/css rel=stylesheet href="../static/css/topbar_bootstrap_retrocompatibility.css">
   <link type=text/css rel=stylesheet href="../static/js/jquery-ui-1.12.1/jquery-ui.min.css">
-  <style type="text/css" media="screen">
-    .white { color:#fff ; }
-    .page {
-      margin-top: 45px;   /* topbar height is 40px */
-    }
-
-    /* for intro text */
-    .mini-hero {
-      margin-top: 1.5em;
-      font-size: 18px;
-      line-height: 27px;
-    }
-
-    /* page sections: style snippets from old bootstrap h2 */
-    h2.oldstyle {
-      font-family: Ubuntu, sans-serif;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 18px ;
-    }
-    .spacerrow {
-      height: 5em;
-    }
-
-    .bigspacerrow {
-      height: 50em;
-    }
-
-
-  </style>
+  <link type=text/css rel=stylesheet href="../static/css/comex_reg.css">
 
 
   <!-- ## JS ## -->
@@ -64,16 +35,17 @@
   <div class="topbar" style="opacity: 0.93;">
       <div class="topbar-inner">
           <div class="container-fluid">
-              <a class="brand" href="http://communityexplorer.org/index.html">
+              <a class="brand" href="http://www.iscpif.fr">
                 <span class="glyphicon glyphicon-home white"></i></a>
-              <ul class="white nav">
+              <ul class="white nav navbar-nav">
                   <li>
-                      <a id="truc" href="http://communityexplorer.org/#"> <strong>Complex systems community explorer</strong></a>
+                      <a id="mainpagelink" href="http://communityexplorer.org/#"> <strong>Complex systems community explorer</strong></a>
                   </li>
               </ul>
           </div>
       </div>
   </div>
+
   <div class="page container-fluid">
     <div class="row spacerrow">&nbsp;</div>
     <div class="row">
@@ -96,6 +68,20 @@
       <div class="spacer col-sm-2 col-md-2">&nbsp;</div>
     </div>
 
+    <!-- raw responses for debug -->
+    <div class="row spacerrow">&nbsp;</div>
+    <div class="row">
+      <div class="spacer col-sm-1 col-md-1">&nbsp;</div>
+      <div class="raw-responses col-sm-8 col-md-8">
+        {{raw_answers}}
+        {% for value in raw_answers %}
+          <p> {{value}} </p>
+        {% endfor %}
+      </div>
+      <div class="spacer col-sm-2 col-md-2">&nbsp;</div>
+    </div>
+
+
     <div class="row bigspacerrow">&nbsp;</div>
 
     <!-- FOOTER TEXT AND LINKS -->