One place for hosting & domains

      Use ExpressJS to Deliver HTML Files


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      In Node.js and ExpressJS applications, there used to be a very simple way to deliver an HTML file or any other sort of file: res.sendfile(). Delivering HTML files using Express helps make development quick and easy when you need a quick HTTP server.

      Recently, this function has become deprecated by ExpressJS and if you try using the function, you’ll get an error saying that function is deprecated and you should use res.sendFile().

      Using res.sendFile()

      To use res.sendFile, we will need to pass in a path to the file.

      We will also need to pull in the built-in path module so that we can link to the file.

      Here is an example of using res.sendFile() to deliver an HTML page.

      var express = require('express');
      var app = express();
      var path = require('path');
      
      // viewed at http://localhost:8080
      app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/index.html'));
      });
      
      app.listen(8080);
      

      Sample Code

      We’ll need a Node application to start. So you can create one by running the following commands:

      • mkdir express-sendfile
      • cd sendfile
      • npm init
      • npm install express --save
      • touch server.js index.html

      Now we have the foundation for our quick Node app. server.js will be the file that will contain the route to serve our index.html file.

      server.js

      var express = require('express');
      var app = express();
      var path = require('path');
      
      // viewed at http://localhost:8080
      app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/index.html'));
      });
      
      app.listen(8080);
      

      index.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Sample Site</title>
      
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
          <style>
              body { padding-top:50px; }
          </style>
      </head>
      <body>
      
          <div class="container">
              <div class="jumbotron">
                  <h1>res.sendFile() Works!</h1>
              </div>
          </div>
      
      </body>
      </html>
      

      Now after our server has been started using:

      We can see our site in our browser!

      example html file served through expressjs

      Conclusion

      res.sendFile() is a very easy function to use. Express provides a great many tools for Node users and we can even use this to deliver downloadable files or any files really.



      Source link

      Angular – Shortcut to Importing Styles Files in Components


      In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

      We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

      Let’s explore another option for importing style files:

      A Sass Variables Sample

      Let’s say you have a _variables.scss in your src/stylings folder:

      // your folder structure
      - src
          - app
              - app.component.ts
                  - hello
                      - hello.component.html
                      - hello.component.scss
                      - hello.component.ts
              - ...
          - stylings
              - _variables.scss
      
      // your _variables.scss file
      $brand-color: #800000;
      

      Reference to the Variables file

      Below is our hello.component.html file, let’s style the header with our brand-color.

      <!-- hello.component.html -->
      <h1>
        Hello World!
      </h1>
      

      The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

      // hello.component.scss
      @import "../../../stylings/variables"; // this is not cool!
      
      h1 {
          color: $brand-color;
      }
      

      See the ../../../stylings/ syntax? Do you like it?

      Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of components and you need to remember the relative path. This is not cool. Let’s fix this!

      Shortcut with Angular CLI configuration

      If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in .angular.cli.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.

      For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      With this, we can update our hello.component.scss to just @import "variables". Sweet!

      // hello.component.scss
      @import "variables"; // change to just variables, say goodbye to ../../../stylings/
      
      h1 {
          color: $brand-color;
      }
      

      What if you have duplicated file name in paths?

      Imagine you included two styling paths in .angular.cli.json, both have _variables.scss file. Guess what will happen? Will the CLI pick up both files or throw errors?

      Let’s test it out together!

      // your folder structure
      - src
          - ...
          - stylings
              - _variables.scss
          - stylings2 // add this
              - _variables.scss
      

      In stylings2/_variables.scss, you have the following styles,

      // stylings2/_variables.scss
      $brand-color: blue;
      $font-size-large: 40px;
      

      Update your .angular.cli.json configurations, to include styling2 folder path.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings",
                    "./stylings2"
                  ]
              }
      
          }]
      }
      

      Update your hello.component.scss file,

      // hello.component.scss
      @import "variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Restart your dev server. Wait for a while, and you should expect… Error!
      Error, Undefined variable

      Tell me why!

      Turn out, if there are multiple files with same name, Angular CLI will pick only the first file that match the name. In this case, it will pick the stylings/_variables.scss file. That’s why it could not get the variable $font-size-large, because it’s in styling2/_variables.scss file.

      But… I really need two files with the same name!

      Well, there are cases where you have multiple files with the same name and you really need it, and you would like to have shortcuts as well. The workaround would be including the parent path. For example, in our case, both stylings and stylings2 folders parent are src.

      We can update the .angular.cli.json configuration to the following:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "."
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to both variables file like the following,

      // hello.component.scss
      @import "stylings/variables";
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Well, it’s not perfect, slightly more words to type, but better than ../../../ right? Also, it might be rare scenario that you have multiple style files with same name in the same project, I guess?

      Another shorter workaround would be including parent path and one styling path:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      You can save a few lines in your hello.component.scss.

      // hello.component.scss
      @import "variables"; // shorter, don't need styling/ as it's one of the configured paths
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      What about including paths in node_modules?

      The Angular CLI configuration is applicable to files in node_modules as well. Let’s say you are using your custom styling npm package, for example bootstrap-sass module.

      npm install bootstrap-sass --save
      

      Here is the folder structure of bootstrap-sass:

      - node_modules
          - bootstrap-sass
              - assets
                  - stylesheets
                      - bootstrap
                          - ...
                          - _grid.scss
                          - _variables.scss
      

      Let’s say you would like to use the bootstrap’s _variables.scss, you can update your .angular.cli.json file to include bootstrap path,

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings",
                    "../node_modules/bootstrap-sass/assets/stylesheets"
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following,

      // hello.component.scss
      @import "variables";
      @import "stylings2/variables"; 
      @impoer "bootstrap/variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
          font-family: $font-family-serif;
      }
      

      Summary

      Let’s remove the relative path hell (../../../) with this useful Angular CLI configuration!

      That’s it. Happy coding!



      Source link

      Working with Django Templates & Static Files


      In our getting started with Django tutorial, I showed you how to get a Django site up and running. The templates we rendered were very basic though.

      This is definitely not how you want your site to look like.

      How do you get your site to look better? Simple! Add some styling. In this tutorial, I will show you how to add some CSS and JavaScript to your Django templates in order to make them look much better. To do that, you first need to understand the concept of static files in Django.

      Setting up a Django Project

      Let’s set up our test Django project. First, create a folder called projects which is where our app will live.

      mkdir projects && cd projects
      

      Inside projects, let’s use virtualenv to create an environment for our app’s dependencies.

      virtualenv env --python python3
      

      NOTE: If you do not have virtualenv installed, install it using the command pip install virtualenv.

      Once that is done, activate the environment by running the activate shell script.

      source env/bin/activate
      

      If that command works, you should see an (env) prompt on your terminal.

      #(env)~/projects
      $
      

      Everything look fine? Awesome! Let’s now use pip to install Django into our environment.

      #(env)~/projects
      $ pip install django
      

      That command should install Django into your environment. As of the time of writing, the Django version is 1.10.4.

      We are then going to call the django-admin script to create our Django app. Let’s do that like this:

      #(env)~/projects
      $ django-admin startproject djangotemplates
      

      If you check your projects folder structure, you should now have a new folder called djangotemplates created by Django in addition to the earlier env folder we created.

      cd into djangotemplates.

      Your folder structure should now be similar to this:

      djangotemplates
      --djangotemplates
      ----**init**.py
      ----settings.py
      ----urls.py
      ----wsgi.py
      --manage.py
      

      All done? You are now ready to begin!

      Settings for managing static files

      Static files include stuff like CSS, JavaScript and images that you may want to serve alongside your site. Django is very opinionated about how you should include your static files. In this article, I will show how to go about adding static files to a Django application.

      Open the settings.py file inside the inner djangotemplates folder. At the very bottom of the file you should see these lines:

      # djangotemplates/djangotemplates/settings.py
      
      # Static files (CSS, JavaScript, Images)
      # https://docs.djangoproject.com/en/1.10/howto/static-files/
      
      STATIC_URL = '/static/'
      

      This line tells Django to append static to the base url (in our case localhost:8000) when searching for static files. In Django, you could have a static folder almost anywhere you want. You can even have more than one static folder e.g. one in each app. However, to keep things simple, I will use just one static folder in the root of our project folder. We will create one later. For now, let’s add some lines in the settings.py file so that it looks like this.

      # djangotemplates/djangotemplates/settings.py
      
      # Static files (CSS, JavaScript, Images)
      # https://docs.djangoproject.com/en/1.10/howto/static-files/
      
      STATIC_URL = '/static/'
      
      # Add these new lines
      STATICFILES_DIRS = (
          os.path.join(BASE_DIR, 'static'),
      )
      
      STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
      

      The STATICFILES_DIRS tuple tells Django where to look for static files that are not tied to a particular app. In this case, we just told Django to also look for static files in a folder called static in our root folder, not just in our apps.

      Django also provides a mechanism for collecting static files into one place so that they can be served easily. Using the collectstatic command, Django looks for all static files in your apps and collects them wherever you told it to, i.e. the STATIC_ROOT. In our case, we are telling Django that when we run python manage.py collectstatic, gather all static files into a folder called staticfiles in our project root directory. This feature is very handy for serving static files, especially in production settings.

      App setup

      Create a folder called static on the same level as the inner djangotemplates folder and the manage.py file. You should now have this structure:

      djangotemplates
      --djangotemplates
      ----**init**.py
      ----settings.py
      ----urls.py
      ----wsgi.py
      --static
      --manage.py
      

      Inside this folder is where we will have any custom CSS and JS we choose to write. On that note, let’s add two folders inside the static folder to hold our files, one called css and the other called js. Inside css, create a file called main.css. Add a main.js in the js folder as well. Your static folder should now look like this:

      --static
      ----css
      ------main.cs
      ----js
      ------main.js
      

      Once that is done, let’s create a new Django app called example that we will be working with. Do you remember how to do that? Don’t worry, it’s quite simple.

      #(env)~/projects/djangotemplates
      $ python manage.py startapp example
      

      Once that is done, you should have a folder called example alongside djangotemplates and static. And of course you should still be able to see the manage.py file.

      djangotemplates
      --djangotemplates
      ----**init**.py
      ----settings.py
      ----urls.py
      ----wsgi.py
      --example
      --static
      --manage.py
      

      We need to tell Django about our new app. Go to the inner djangotemplates folder, open up settings.py and look for INSTALLED_APPS. Add example under the other included apps.

      # djangotemplates/djangotemplates/settings.py
      
      DEBUG = True
      
      ALLOWED_HOSTS = []
      
      
      # Application definition
      
      INSTALLED_APPS = [
          'django.contrib.admin',
          'django.contrib.auth',
          'django.contrib.contenttypes',
          'django.contrib.sessions',
          'django.contrib.messages',
          'django.contrib.staticfiles',
          'example', # Add this line
      ]
      

      Just to recap, we now have the following folder structure:

      djangotemplates
      --djangotemplates
      ----**init**.py
      ----settings.py
      ----urls.py
      ----wsgi.py
      --example
      ----migrations
      ------**init**.py
      ----admin.py
      ----apps.py
      ----models.py
      ----tests.py
      ----views.py
      --static
      ----css
      ------main.cs
      ----js
      ------main.js
      --manage.py
      

      URL definition

      Let’s define a URL to go to our new app. Let’s edit djangotemplates/djangotemplates/urls.py to effect that.

      # djangotemplates/djangotemplates/urls.py
      
      from django.conf.urls import url, include # Add include to the imports here
      from django.contrib import admin
      
      urlpatterns = [
          url(r'^admin/', admin.site.urls),
          url(r'^', include('example.urls')) # tell django to read urls.py in example app
      ]
      

      After that, in the example app folder, create a new file called urls.py and add the following code:

      # djangotemplates/example/urls.py
      
      from django.conf.urls import url
      from example import views
      
      urlpatterns = [
          url(r'^$', views.HomePageView.as_view(), name="home"), # Notice the URL has been named
          url(r'^about/$', views.AboutPageView.as_view(), name="about"),
      ]
      

      The code we have just written tells Django to match the empty route (i.e localhost:8000) to a view called HomePageView and the route /about/ to a view called AboutPageView. Remember, Django views take in HTTP requests and return HTTP responses. In our case, we shall use a TemplateView that returns a Home Page template and another one for the About page. To do this, inside your example app folder, create another folder called templates. Inside the new templates folder, create two new files called index.html and about.html. Your example app folder should now have this structure:

      --example
      ----migrations
      ------**init**.py
      ----templates
      ------index.html
      ------about.html
      ----admin.py
      ----apps.py
      ----models.py
      ----tests.py
      ----urls.py
      ----views.py
      

      Inside the index.html, paste the following code:

      <!-- djangotemplates/example/templates/index.html-->
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Welcome Home</title>
      </head>
      <body>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
      </body>
      </html>
      

      Add this code to about.html:

      <!-- djangotemplates/example/templates/about.html-->
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>About Us</title>
      </head>
      <body>
        <p>
        We are a group of Django enthusiasts with the following idiosyncrasies:
      
        <ol>
          <li>We only eat bananas on Saturdays.</li>
          <li>We love making playing football on rainy days.</li>
        </ol>
        </p>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
      </body>
      </html>
      

      Notice how we are referring to our links for Go Home and About This Site in our templates. We can use Django’s automatic URL reverse lookup because we named our URLs in our urls.py. Neat, huh!

      We shall see the effect of this code in the next section.

      Wiring up the views

      Let’s add the final code to serve up our templates. We need to edit djangotemplates/example/views.py for this.

      # djangotemplates/example/views.py
      from django.shortcuts import render
      from django.views.generic import TemplateView # Import TemplateView
      
      # Add the two views we have been talking about  all this time :)
      class HomePageView(TemplateView):
          template_name = "index.html"
      
      
      class AboutPageView(TemplateView):
          template_name = "about.html"
      

      Now we can run our app. We first need to make Django’s default migrations since this is the first time we are running our app.

      #(env)~/projects/djangotemplates
      $ python manage.py migrate
      

      Once that is done, start your server.

      #(env)~/projects/djangotemplates
      $ python manage.py runserver
      

      Open your browser and navigate to http://localhost:8000. You should be able to see our home page.

      Clicking the links at the bottom should be able to navigate you between the pages. Here is the About page:

      Template Inheritance

      Let’s shift our focus to the templates folder inside the example app folder. At the moment, it contains two templates, index.html and about.html.

      We would like both these templates to have some CSS included. Instead of rewriting the same code in both of them, Django allows us to create a base template which they will both inherit from. This prevents us from having to write a lot of repeated code in our templates when we need to modify anything that is shared.

      Let’s create the base template now. Create a file called base.html in djangotemplates/example/templates. Write this code inside it:

      <!-- djangotemplates/example/templates/base.html -->
      
      {% load static %}
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title>
            Django Sample Site - {% block title %}{% endblock %}
          </title>
      
          <script src="https://www.digitalocean.com/community/tutorials/{% static"js/main.js' %}"></script> <!-- This is how to include a static file -->
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/{% static"css/main.css' %}" type="text/css" />
        </head>
        <body>
          <div class="container">
            {% block pagecontent %}
            {% endblock %}
          </div>
        </body>
      </html>
      

      The very first line in the file, {% load static %}, uses Django’s special template tag syntax to tell the template engine to use the files in the static folder in this template.

      In the title tag, we use a Django block. What this means is that in any Django template which inherits from this base template, any HTML which is inside a block named title will be plugged into the title block. The same goes for the body tag’s pagecontent block. If this sounds confusing, don’t worry. You will see it in action soon.

      If you are not running your Django server, run it by executing python manage.py runserver in your terminal. Go to http://localhost:8000. You should see the previous template.

      Now edit the index.html template to inherit from the base template.

      <!-- djangotemplates/example/templates/index.html -->
      
      {% extends 'base.html' %} <!-- Add this for inheritance -->
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Welcome Home</title>
      </head>
      <body>
          <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
      </body>
      </html>
      

      Reload the page in your browser. Nothing appears! This is because Django expects your content to be written inside the blocks we defined in the base template so that they can be rendered. Edit the index.html to add the blocks:

      <!-- djangotemplates/example/templates/index.html -->
      
      {% extends 'base.html' %}
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome Home {% endblock %}</title>
      </head>
      <body>
        {% block pagecontent %}
          <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
        {% endblock %}
      </body>
      </html>
      

      Reload the page in the browser and voila! Your content should appear again!

      We can also edit the about.html template to use the same.

      <!-- djangotemplates/example/templates/about.html -->
      
      {% extends 'base.html' %} <!-- Add this for inheritance -->
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>{% block title %}About Us {% endblock %}</title>
      </head>
      <body>
        {% block pagecontent %}
          <p>
          We are a group of Django enthusiasts with the following idiosyncrasies:
      
          <ol>
              <li>We only eat bananas on Saturdays.</li>
              <li>We love making playing football on rainy days.</li>
          </ol>
          </p>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
          <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
        {% endblock %}
      </body>
      </html>
      

      You should now see this on the About page:

      Which is exactly the same as before!

      However, now since both templates inherit from a base template, I can easily style them. Open up main.css in your css folder and add these styles:

      .container {
          background: #eac656;
          margin: 10 10 10 10;
          border: 3px solid black;
      }
      

      This will style the container div which we are loading our content into. Refresh your browser. You should see this:

      The Home Page:

      The About Page:

      Rendering templates with data from views

      You can use Django’s template engine to display data in very powerful ways. In this section, I will create a Django view that will pass data into a template. I will then show you how to access that data in the template and display it to the user.

      First things first, open up views.py in the example app folder. We will add a new view to serve data into our yet to exist data.html template. Modify the views.py file to look like this:

      # djangotemplates/example/views.py
      
      from django.shortcuts import render
      from django.views.generic import TemplateView
      
      class HomePageView(TemplateView):
          template_name = "index.html"
      
      class AboutPageView(TemplateView):
          template_name = "about.html"
      
      # Add this view
      class DataPageView(TemplateView):
          def get(self, request, **kwargs):
              # we will pass this context object into the
              # template so that we can access the data
              # list in the template
              context = {
                  'data': [
                      {
                          'name': 'Celeb 1',
                          'worth': '3567892'
                      },
                      {
                          'name': 'Celeb 2',
                          'worth': '23000000'
                      },
                      {
                          'name': 'Celeb 3',
                          'worth': '1000007'
                      },
                      {
                          'name': 'Celeb 4',
                          'worth': '456789'
                      },
                      {
                          'name': 'Celeb 5',
                          'worth': '7890000'
                      },
                      {
                          'name': 'Celeb 6',
                          'worth': '12000456'
                      },
                      {
                          'name': 'Celeb 7',
                          'worth': '896000'
                      },
                      {
                          'name': 'Celeb 8',
                          'worth': '670000'
                      }
                  ]
              }
      
              return render(request, 'data.html', context)
      

      We are using the same kind of view we used to render the other templates. However, we are now passing a context object to the render method. The key-value pairs defined in the context will be available in the template being rendered and we can iterate through them just like any other list.

      To finish this up, go to the urls.py file in the howdy app and add the URL pattern for our new view so that it looks like this:

      # djangotemplates/example/urls.py
      
      from django.conf.urls import url
      from example import views
      
      urlpatterns = [
          url(r'^$', views.HomePageView.as_view(), name="home"),
          url(r'^about/$', views.AboutPageView.as_view(), name="about"),
          url(r'^data/$', views.DataPageView.as_view(), name="data"),  # Add this URL pattern
      ]
      

      Finally, let’s create the template. In the templates folder, create a file called data.html and write this code inside it.

      <!-- djangotemplates/example/templates/data.html -->
      
      {% extends 'base.html' %}
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title></title>
        </head>
        <body>
          {% block pagecontent %}
          <div class="table-div">
          <!-- We will display our data in a normal HTML table using Django's
          template for-loop to generate our table rows for us-->
            <table class="table">
              <thead>
                <tr>
                  <th>Celebrity Name</th>
                  <th>Net Worth</th>
                </tr>
              </thead>
              <tbody>
                {% for celebrity in data %}
                  <tr>
                    <td>{{ celebrity.name }}</td>
                    <td>{{ celebrity.worth }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endblock %}
        </body>
      </html>
      

      In data.html, you can see that we use what is essentially a for loop to go through the data list. Binding of values in Django templates is done using {{}} curly brackets much like in AngularJS.

      With your server running, go to http://localhost:8000/data/ to see the template.

      Including snippets into your templates

      We now have three templates, index.html, about.html and data.html. Let’s link them together using a simple navigation bar. First up, let’s write the code for the navigation bar in another HTML template.

      In the templates folder inside the example app, create a new folder called partials. Inside it, create a file called nav-bar.html. The templates folder structure should now be like this:

      templates
      ----index.html
      ----about.html
      ----data.html
      ----partials
      ------nav-bar.html
      

      Edit the nav-bar.html partial so that it contains this code:

      <!-- djangotemplates/example/templates/partials/nav-bar.html -->
      
      <div class="nav">
        <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a>
        <a href="https://www.digitalocean.com/community/tutorials/{% url"data' %}">View Data</a>
      </div>
      

      Including snippets in a template is very simple. We use the includes keyword provided by Django’s templating engine. Go ahead and modify index.html to this:

      <!-- djangotemplates/example/templates/index.html -->
      
      {% extends 'base.html' %}
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome Home {% endblock %}</title>
      </head>
      <body>
        {% block pagecontent %}
          <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
          {% include 'partials/nav-bar.html' %} <!--Add this-->
      
          <!-- Remove these two lines -- >
          <!-- <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a> -->
          <!-- <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a> -->
        {% endblock %}
      </body>
      </html>
      

      Modify about.html to this:

      <!-- djangotemplates/example/templates/about.html -->
      
      {% extends 'base.html' %}
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>{% block title %}About Us {% endblock %}</title>
      </head>
      <body>
        {% block pagecontent %}
          <p>
          We are a group of Django enthusiasts with the following idiosyncrasies:
      
          <ol>
              <li>We only eat bananas on Saturdays.</li>
              <li>We love making playing football on rainy days.</li>
          </ol>
          </p>
          {% include 'partials/nav-bar.html' %} <!--Add this-->
      
          <!-- Remove these two lines -- >
          <!-- <a href="https://www.digitalocean.com/community/tutorials/{% url"home' %}">Go Home</a> -->
          <!-- <a href="https://www.digitalocean.com/community/tutorials/{% url"about' %}">About This Site</a> -->
        {% endblock %}
      </body>
      </html>
      

      Lastly, modify data.html to this:

      <!-- djangotemplates/example/templates/data.html -->
      
      {% extends 'base.html' %}
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title></title>
        </head>
        <body>
          {% block pagecontent %}
          <div class="table-div">
            <table class="table">
              <thead>
                <tr>
                  <th>Celebrity Name</th>
                  <th>Net Worth</th>
                </tr>
              </thead>
              <tbody>
                {% for celebrity in data %}
                  <tr>
                    <td>{{ celebrity.name }}</td>
                    <td>{{ celebrity.worth }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% include 'partials/nav-bar.html' %} <!--Add this-->
          {% endblock %}
        </body>
      </html>
      

      Time to check out our work! Open your browser and navigate to http://localhost:8000. You should see this:

      All the pages are now linked with the navbar so you can easily navigate back and forth through them, all with minimal code written. Here is the data.html template:

      And here is about.html:

      Note: I have added the following CSS to syle the links in the navbar. Feel free to use it or play with your own styles:

      // djangtotemplates/static/css/main.css
      
      .container {
          background: #eac656;
          margin: 10 10 10 10;
          border: 3px solid black;
      }
      
      .nav a {
          background: #dedede;
      }
      

      Filters

      Filters take data piped to them and output it in a formatted way. Django templates have access to the humanize collection of filters, which make data more human readable. Let’s make the celebrity’s networth field in the data template more readable by using some of these filters.

      To use Django’s humanize filters, you first need to edit some settings. Open up djangotemplates/settings.py and edit the INSTALLED_APPS list to this:

      # djangotemplates/djangotemplates/settings.py
      
      ALLOWED_HOSTS = []
      
      
      # Application definition
      
      INSTALLED_APPS = [
          'django.contrib.admin',
          'django.contrib.auth',
          'django.contrib.contenttypes',
          'django.contrib.sessions',
          'django.contrib.messages',
          'django.contrib.staticfiles',
          'django.contrib.humanize', # Add this line. Don't forget the trailing comma
          'example',
      ]
      

      We can now use a filter in our templates. We are going to use the intcomma filter to add comma’s in large numbers to make them easier to read. Let’s modify data.html to this:

      <!-- djangotemplates/example/templates/data.html -->
      
      {% extends 'base.html' %}
      {% load humanize %} <!-- Add this-->
      
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title></title>
        </head>
        <body>
          {% block pagecontent %}
          <div class="table-div">
            <table class="table">
              <thead>
                <tr>
                  <th>Celebrity Name</th>
                  <th>Net Worth</th>
                </tr>
              </thead>
              <tbody>
                {% for celebrity in data %}
                  <tr>
                    <td>{{ celebrity.name }}</td>
                    <td>$ {{ celebrity.worth | intcomma }}</td> <!--Modify this line-->
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% include 'partials/nav-bar.html' %}
          {% endblock %}
        </body>
      </html>
      

      When you go to http://localhost:8000/data/, you should now have a more friendly list of net worth values:

      There are many more filters included in the humanize package. Read about them here

      Collecting Static Files

      Remember we talked about collecting static files? Try the following command:

      python manage.py collectstatic
      

      You should see a prompt like the following:

      You have requested to collect static files at the destination
      location as specified in your settings:
      
            /Users/amos/projects/djangotemplates/staticfiles
      
      This will overwrite existing files!
      Are you sure you want to do this?
      
      Type 'yes' to continue, or 'no' to cancel:
      

      Go ahead and say yes.

      This command will tell Django to go through all your project folders, look for all static files and store them in one place (the static root we defined in the settings). This is very efficient especially if you are deploying your site to production.

      When you run the command collectstatic, you should see a new folder called staticfiles created in the root of your project folder. You can change this location to something else by editing the static root setting in your project’s settings.py file. To use these staticfiles, in your templates you will say load staticfiles instead of load static. Everything else is the same as with using the previous static folder.

      Conclusion

      Congratulations on reaching the end of this tutorial! By now you should have a more detailed understanding of how Django templates work. If you need deeper information, remember the docs are your friend. You can find the full code for this tutorial here. Make sure to leave any thoughts, questions or concerns in the comments below.



      Source link