Jinja-cgi interface template: Difference between revisions
From Algolit
| (7 intermediate revisions by one other user not shown) | |||
| Line 5: | Line 5: | ||
| Technique: || | | Technique: || | ||
|- | |- | ||
| − | | Collectively developed by: || The people behind Python, Jinja2, cgi, html, css, Jquery & Algolit | + | | Collectively developed by: || The people behind Python, Jinja2, cgi, html, css, Jquery & Michael Murtaugh, Algolit |
|} | |} | ||
| + | |||
| + | The file structure is the following: | ||
| + | |||
| + | cgi-bin/ | ||
| + | export.cgi | ||
| + | interface.cgi | ||
| + | css/ | ||
| + | export.css | ||
| + | fonts/ | ||
| + | stylesheet.css | ||
| + | img/ | ||
| + | loading.gif | ||
| + | interface.html | ||
| + | js/ | ||
| + | jquery-2.1.3.js | ||
| + | output/ | ||
| + | html/ | ||
| + | pdf/ | ||
| + | README.md | ||
| + | |||
| + | ==interface.cgi== | ||
| + | This is the place where the python code goes. There are 3 important stages here: | ||
| + | |||
| + | * getting the values from the submitted form in interface.html | ||
| + | * processing these values | ||
| + | * turning the values into jinja templating variables | ||
| + | |||
| + | ==interface.html== | ||
| + | This is the place where the variables from the .cgi script can be get from and send back to. | ||
| + | |||
| + | A '''html <form>''' with <input> fields is used to get values from the input of the user. '''Jinja2''' is used to send the variables back into the html framework. | ||
| + | |||
| + | ===Examples of a html form=== | ||
| + | |||
| + | <form action="" method="post"> | ||
| + | <textarea name="input_text" rows="20"> | ||
| + | <input type="text" name="author" value="" required> | ||
| + | |||
| + | <input type="submit" value="submit"> | ||
| + | </form> | ||
| + | |||
| + | ===Examples of jinja syntax=== | ||
| + | <br> | ||
| + | <nowiki>{{ var }}</nowiki> | ||
| + | |||
| + | <br> | ||
| + | <nowiki><div class="element">{{ var }}</div></nowiki> | ||
| + | |||
| + | <br> | ||
| + | {% if var %} | ||
| + | <nowiki>{{ var }}</nowiki> | ||
| + | {% endif %} | ||
| + | |||
| + | <br> | ||
| + | {% for v in vars %} | ||
| + | <nowiki>{{ v }}</nowiki> | ||
| + | {% endfor %} | ||
| + | <br> | ||
| + | |||
| + | ==export.cgi== | ||
| + | This script is called when hitting 'submit' in the export section of the interface. Jquery uses an ajax call to run the script. It creates a .html and a .pdf document in the output/ folder. | ||
| + | |||
| + | The stylesheet export.css is applied to the exported documents. | ||
| + | |||
| + | |||
| + | [[Category:Algoliterary-Encounters]] | ||
Latest revision as of 13:59, 25 October 2017
| Type: | Algoliterary tool |
| Technique: | |
| Collectively developed by: | The people behind Python, Jinja2, cgi, html, css, Jquery & Michael Murtaugh, Algolit |
The file structure is the following:
cgi-bin/ export.cgi interface.cgi css/ export.css fonts/ stylesheet.css img/ loading.gif interface.html js/ jquery-2.1.3.js output/ html/ pdf/ README.md
Contents
interface.cgi
This is the place where the python code goes. There are 3 important stages here:
- getting the values from the submitted form in interface.html
- processing these values
- turning the values into jinja templating variables
interface.html
This is the place where the variables from the .cgi script can be get from and send back to.
A html <form> with <input> fields is used to get values from the input of the user. Jinja2 is used to send the variables back into the html framework.
Examples of a html form
<form action="" method="post"> <textarea name="input_text" rows="20"> <input type="text" name="author" value="" required>
<input type="submit" value="submit"> </form>
Examples of jinja syntax
{{ var }}
<div class="element">{{ var }}</div>
{% if var %}
{{ var }}
{% endif %}
{% for v in vars %}
{{ v }}
{% endfor %}
export.cgi
This script is called when hitting 'submit' in the export section of the interface. Jquery uses an ajax call to run the script. It creates a .html and a .pdf document in the output/ folder.
The stylesheet export.css is applied to the exported documents.