Django templates

Ήρθε η ώρα να παρουσιάσουμε ορισμένα δεδομένα! Το Django μας δίνει κάποια προεγκατεστημένα template tags.

Τι είναι τα template tags;

Βλέπετε, στην HTML δεν μπορείτε να γράψετε κώδικα σε Python επειδή οι browsers δεν καταλαβαίνουν αυτή τη γλώσσα. Εκείνοι ξέρουν μόνο HTML, CSS και Javascript. Ξέρουμε ότι η HTML είναι στατική γλώσσα ενώ η Python περισσότερο δυναμική.

Τα Django template tags μας επιτρέπουν να μεταφέρουμε πράγματα της Python μέσα στην HTML, ούτως ώστε να χτίσετε δυναμικές ιστοσελίδες γρηγορότερα. Τέλεια!

Template προβολή λίστας των post

Σε προηγούμενο κεφάλαιο δώσαμε στο template μας μια λίστα από posts μέσα σε μια μεταβλητή με το όνομα posts. Τώρα θα την προβάλουμε στην HTML. Άλλωστε αυτό θέλαμε να κάνουμε από την αρχή.

Για να εκτυπώσουμε μια μεταβλητή μέσα στα Django templates, χρησιμοποιούμε διπλές αγκύλες ({{ }}) με το όνομα της μεταβλητής ανάμεσα:

blog/templates/blog/post_list.html

{{ posts }}

Δοκιμάστε αυτό μέσα στο template blog/templates/blog/post_list.html. Ανοίξτε το και αντικαταστήστε τα πάντα από το δεύτερο <div> to the third </div> με το {{ posts }}. Αποθηκεύστε το αρχείο και ανανεώστε τη σελίδα για να δείτε τα αποτελέσματα:

Όπως βλέπετε, το μόνο που έχουμε είναι το εξής:

blog/templates/blog/post_list.html

<QuerySet [<Post: My second post>, <Post: My first post>]>

Αυτό σημαίνει ότι το Django το εκλαμβάνει ως μια λίστα από objects. Θυμηθείτε στο κεφάλαιο Εισαγωγή στην Python πως προβάλαμε λίστες; Ναι, με επαναλήψεις! Στα Django template το κάνετε ως εξής:

blog/templates/blog/post_list.html

{% for post in posts %}
    {{ post }}
{% endfor %}

Δοκιμάστε αυτό στο template.

Δούλεψε! Αλλά θέλουμε τα posts μα εμφανίζονται όπως τα στατικά posts που φτιάξαμε νωρίτερα στο κεφάλαιο Εισαγωγή στην HTML. Μπορείτε να μιξάρετε HTML και template tags μαζί. Έτσι, το body θα μοιάζει κάπως έτσι:

blog/templates/blog/post_list.html

<div>
    <h1><a href="/">Django Girls Blog</a></h1>
</div>

{% for post in posts %}
    <div>
        <p>published: {{ post.published_date }}</p>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

Οτιδήποτε βάζετε ανάμεσα στο {% for %} και το {% endfor %} θα επαναληφθεί για κάθε object στη λίστα. Ανανεώστε τη σελίδα:

Παρατηρήσατε ότι χρησιμοποιούμε έναν διαφορετικό τρόπο πρόσβασης αυτή τη φορά ({{ post.title }} ή {{ post.text }}); Αποκτούμε πρόσβαση στα δεδομένα κάθε πεδίου που είναι ορισμένα στο μοντέλο Post. Επίσης, η κάθετη γραμμή |linebreaksbr φιλτράρει το κείμενο του posts όπου μετατρέπει τις αλλαγές γραμμής σε παράγράφους.

Ένα ακόμα πράγμα

Θα ήταν καλό να βλέπαμε αν το site σας εξακολουθεί να λειτουργεί ακόμα στο internet, σωστά; Ας το κάνουμε deploy στο PythonAnywhere για ακόμη μια φορά. Παρακάτω φαίνεται μια περίληψη των βημάτων…

• Πρώτα κάντε push τον κώδικα σας στο GitHub

command-line

$ git status
[...]
$ git add --all .
$ git status
[...]
$ git commit -m "Modified templates to display posts from database."
[...]
$ git push

• Έπειτα συνδεθείτε στο PythonAnywhere, μεταβείτε στο Bash console (ή ανοίξτε ένα νέο) και τρέξτε:

PythonAnywhere command-line

$ cd $USER.pythonanywhere.com
$ git pull
[...]

• Τέλος, πηγαίνετε στο "Web" page και κλικάρετε Reload στην εφαρμογή σας. (Για να δείτε άλλες σελίδες του PythonAnywhere από την κονσόλα χρησιμοποιήστε το κουμπί του μενού στην πάνω δεξιά γωνία.) Η αλλαγή σας θα πρέπει να φαίνεται στο https://yourname.pythonanywhere.com. Δείτε το στο browser! Δεν πειράζει αν τα posts στο PythonAnywhere δεν είναι τα ίδια με τα posts που εμφανίζονται τοπικά στον υπολογιστή σας. Οι βάσεις δεδομένων στον τοπικό υπολογιστή σας και στο PythonAnywhere δεν είναι συγχρονισμένες μεταξύ τους.

Συγχαρητήρια! Τώρα, πηγαίντε και προσθέστε μερικά posts μέσω του Django admin (θυμηθείτε να προσθέσετε το published_date!) Σιγουρευτείτε ότι βρίσκεστε στο Django admin του pythonanywhere site, https://yourname.pythonanywhere.com/admin (και όχι του τοπικού υπολογιστή σας). Έπειτα, ανανεώστε τη σελίδα και δείτε αν αυτά τα posts εμφανίστηκαν.

Δουλεύει μια χαρά, έτσι; Είμαστε περήφανοι! Απομακρυνθείτε από τον υπολογιστή σας για λίγο. Αξίζετε ένα διάλλειμα. :)