VIDEO
HIGHLIGHT
Log InSign up
Curso Django. Plantillas VI. Herencia de plantillas. Vídeo 10
SummaryTranscriptChat

Curso Django. Plantillas VI. Herencia de plantillas. Vídeo 10

Introduction to Template Inheritance in Django

In this video, the concept of template inheritance in Django is introduced. The speaker explains how template inheritance can be used to create a common structure for multiple templates and save coding time.

Template Inheritance Basics

Summarize any video like this, free →
  • Template inheritance allows for the creation of a parent template that serves as the base structure for other templates.
  • The parent template contains common elements such as headers and footers that are shared across multiple pages.
  • Child templates inherit the structure of the parent template and only need to focus on the changing content.

Benefits of Template Inheritance

  • Using template inheritance saves time by reducing code duplication.
  • Modifying the structure or format of the parent template automatically updates all child templates.
  • Changes made to common elements like headers or footers are reflected across all pages using the parent template.

Implementing Template Inheritance

  • To implement template inheritance, a special tag % extends "parent_template.html" % is added at the beginning of each child template.
  • The parent template defines blocks where child templates can insert their specific content using % block block_name %...% endblock % syntax.

Example Use Case

  • A website with multiple pages can have a consistent header and footer across all pages.
  • By creating a parent template with these common elements, child templates can focus on unique content while inheriting the shared structure.

Applying Template Inheritance in Django

This section demonstrates how to apply template inheritance in Django by creating a simple example with a parent and child templates.

Creating Parent Template

  • Create a new HTML file for the parent template, e.g., base.html.
  • Define the overall structure including headers, footers, and any other common elements.
  • Use % block content %...% endblock % to specify the area where child templates can insert their content.

Creating Child Templates

  • Create separate HTML files for each child template, e.g., child1.html, child2.html.
  • Add the % extends "base.html" % tag at the beginning of each child template to inherit from the parent template.
  • Insert specific content within the % block content %...% endblock % section.

Modifying Parent Template

  • To make changes that affect all child templates, modify the parent template (base.html).
  • Any modifications made to common elements like headers or footers will be automatically reflected in all child templates.

Benefits of Template Inheritance in Django

  • Template inheritance simplifies website development by providing a consistent structure across multiple pages.
  • It reduces code duplication and allows for easy maintenance and updates.
  • Changes made to shared elements in the parent template are propagated to all child templates.

Conclusion

The video concludes by summarizing the benefits of using template inheritance in Django and highlighting its time-saving advantages.

Summary

  • Template inheritance in Django allows for creating a parent template with common elements shared across multiple pages.
  • Child templates inherit the structure of the parent template and only need to focus on unique content.
  • Modifying the parent template automatically updates all child templates, saving coding time and effort.

Advantages of Template Inheritance

  • Saves time by reducing code duplication and providing a consistent structure for multiple pages.
  • Easy maintenance as changes made to shared elements in the parent template propagate to all child templates.

Creating the Base Template Structure

In this section, we learn how to create the basic structure of a template in Django.

Creating the HTML Structure

  • Create an HTML file for the base template.
  • Inside the HTML file, add the <head> and <title> tags for page title.
  • Add the <body> tag for page content.

Defining Common Elements

  • Determine what elements should be common across all templates inheriting from this base template.
  • One common element is the page title, which can be changed for each individual page.
  • Use % block title % and % endblock % to indicate that the content between these tags can be changed.

Defining Common Content

  • Decide on common content that will appear on all pages inheriting from this base template.
  • For example, include a large heading at the top with a consistent title for all pages.
  • Use % block content % and % endblock % to indicate that this section's content can be changed.

Adding a Common Footer

  • Include a common footer at the bottom of all pages inheriting from this base template.
  • This could include information like "Free courses" or "Thank you for visiting."
  • Use % block footer % and % endblock % to indicate that this section's content can be changed.

Creating Child Templates

In this section, we learn how to create child templates that inherit from the base template and customize specific sections.

Creating a New Template

  • Create a new HTML file for the child template (e.g., curso.html).
  • Use % extends 'base.html' % to indicate that this template inherits from base.html.

Customizing the Title and Content

  • Specify which sections of the child template will be customized.
  • Use % block title % and % endblock % to define a custom title for the page.
  • Use % block content % and % endblock % to define custom content for the page.

Adding Additional Elements

  • Customize other elements in the child template as needed.
  • For example, add a video or additional text specific to this page.
  • Use HTML tags and Django template tags as necessary.

Registering Views and URLs

In this section, we learn how to register views and URLs for our templates.

Creating a View

  • In the views.py file, create a new function-based view for the desired page (e.g., cursos).
  • Define what should happen when this view is accessed.

Registering the View

  • In the urls.py file, import the view function from views.py.
  • Add a URL pattern that maps to the desired view function.
  • This allows us to access the page using a specific URL.

Testing Access

  • Start the Django development server (python manage.py runserver) to test accessing the newly registered page.
  • Visit the specified URL in your browser to see if it displays correctly.

The transcript provided does not cover all aspects of creating views and URLs.

Understanding the Parameters for Request and Template

In this section, the speaker explains the parameters required for a request and template in Python.

Parameters for Request and Template

  • The first parameter is the well-written request.
  • The second parameter is the name of the template enclosed in quotation marks.
  • The third parameter is optional but necessary in this case, which is a dictionary.

Adding Parameter to Template

Here, the speaker demonstrates how to add a parameter to a template in Python.

Adding Parameter to Template

  • Use the "dame fecha" parameter in the template called "curso.html".
  • This parameter retrieves and displays the current date and time.
  • Save changes to register the view for the new template.

Registering URL for New View

In this section, we learn how to register a URL for a new view in Python.

Registering URL for New View

  • Open the URL file and import one more view called "curso_ce".
  • Register "curso_ce" as a URL pattern.
  • Copy and paste an existing URL pattern, such as "/cursos", and change it to "/cursos_ce".
  • Ensure that there is a trailing slash at the end of the URL.
  • The view associated with this URL should be "curso_effect".

Testing Registered URLs

Here, we test if our registered URLs are working correctly by accessing them through a web browser.

Testing Registered URLs

  • Access "/cursos_ce" in a web browser.
  • Verify that we can see the desired page with its corresponding template structure.
  • Note that only the title content changes, while the rest of the content is inherited from the parent template.

Modifying Child Template

In this section, we modify the child template to customize its appearance.

Modifying Child Template

  • Customize the child template by adding a green background to the title and aligning it centrally.
  • Also, change the alignment of the footer to be aligned right.
  • Save changes and refresh the browser to see the updated styling.

Inheritance from Parent Template

Here, we understand how certain elements in the child template inherit from the parent template.

Inheritance from Parent Template

  • The header section of the child template inherits from the parent template.
  • Similarly, the footer section displayed in the child template also inherits from its parent.

Improving Design with Styling Changes

This section focuses on making further styling changes to enhance design aesthetics.

Improving Design with Styling Changes

  • Add more styling improvements to make it visually appealing.
  • For example, add a green background color to the title and center-align it.
  • Change footer alignment for differentiation.
  • Save changes and refresh browser for updated design.

Modifying Parent Template

Here, we modify the parent template to apply consistent changes across all child templates.

Modifying Parent Template

  • Locate and modify code within h1 tag in parent template.
  • Add a style attribute with a background color property set as "darkolivegreen" and text color as white ("white").
  • Center-align text using "text-align" property set as "center".
  • Save changes in Visual Studio Code (IDE).

Modifying Parent Template (Continued)

This section continues the modification of the parent template to apply consistent changes across all child templates.

Modifying Parent Template (Continued)

  • Continue modifying the parent template by changing the alignment of the footer.
  • Copy and paste the existing code for the footer into a new "p" tag within the "footer" tag.
  • Change alignment to right using "text-align" property set as "right".
  • Save changes in Visual Studio Code (IDE).

Creating Second Template

In this section, we create a second template with a different course and observe how it inherits from the parent template.

Creating Second Template

  • Create a new HTML file called "curso_css.html" for another course.
  • Copy and paste code from previous template ("curso_ce.html") into this new file.
  • Replace content related to date with content specific to CSS course.
  • Register a new view for this template called "curso_css".
  • Register a URL pattern "/curso_css" that points to this view.

Testing Second Template

Here, we test if our newly created second template is working correctly by accessing its corresponding URL.

Testing Second Template

  • Access "/curso_css" in a web browser.
  • Observe that we can see a different page with content specific to CSS course while maintaining the same overall structure inherited from the parent template.

Adding Navigation Bar to Templates

In this section, we learn how to add a navigation bar to all child templates based on their desired location.

Adding Navigation Bar to Templates

  • Decide where exactly you want to place the navigation bar, such as above or below the title.
  • In this case, we want it above the title.
  • Locate the desired position in the parent template, just after the "h1" tag.
  • Include the navigation bar using an "include" tag and referencing its code from a previous video.
  • Save changes and observe the added navigation bar in all child templates.

The transcript is provided in Spanish.

Navigation Bar Styling

In this section, the speaker discusses how to style the navigation bar on a website.

Styling the Navigation Bar

  • To adjust the position of the navigation bar, add a style attribute with text-align: right.
  • Example: <nav style="text-align: right">
  • Save the changes and refresh the page to see the updated styling.
  • Clearing cache may be necessary to view the changes properly.

Template Inheritance and Free Courses

This section covers template inheritance and highlights free courses available on a virtual academy platform.

Understanding Template Inheritance

  • Template inheritance allows for efficient management of website layouts by inheriting common elements from parent templates.
  • The speaker emphasizes the usefulness of template inheritance and its basic implementation.

Free Courses on Virtual Academy

  • Viewers are encouraged to register for free on an online academy called "Píldoras Informáticas" (Computer Pills).
  • The virtual academy offers various free courses organized by categories.
  • For those seeking personalized guidance, there are tutor-led courses with exercises, tests, doubt resolution, and certificates upon completion.
  • The catalog of courses will continue expanding gradually.

Turn any video into a summary like this

YouTube links, meetings, lectures. With transcripts, search, and chat.

Start for free
Playlists: Curso Django
Video description

Vemos en este vídeo la herencia de plantillas. Con la herencia podemos crear de forma muy sencilla la estructura general de un sitio web con el consiguiente ahorro de código y sobre todo tiempo. Para más cursos, ejercicios y manuales visita: www.pildorasinformatica.es