Overview of the administrative parts of a view.
AJAX is one of the main reasons to use a Javascript library such as jQuery. See how simple it is to perform a previously difficult task that required complex browser specific code to preform reliably and was prone to simple mistakes. Implement basic AJAX requests using jQuery's built in methods which make it extremely simple to send an asynchronous request to a server, gather the returned data, and insert it into the page.
Example code:
// AJAX Live Function
$('.content p').live('mouseenter mouseleave',
function() {
$(this).toggleClass('hilight');
}
);
// AJAX Example
$('.node_read_more a').click(function() {
var url = $(this).attr('href');
var link = this;
$.ajax({
url: url,
success: function(data) {
var $fullContent = $('#content-output .content', data);
var html = $fullContent.html();
$(link).closest('div.node').find('div.content').html(html);
$(link).hide();
}
});
return false;
});
In its short history, jQuery has revolutionized front-end web development, making it faster, easier, and more rewarding to write JavaScript – allowing easier selection and manipulation of HTML elements, and ensuring that scripts work across the ever increasing landscape of browsers and operating systems.
Nate Haug and Jeff Robbins show many hands-on examples demonstrating how to use jQuery's simple syntax to choose and manipulate HTML elements, traverse the document object model (DOM), and to attach event handlers which can react to user interaction with the page.
In this video, Jeff and Nate introduce themselves and the agenda for this series, including Selectors, Effects, and AJAX.
Just like PHP or JavaScript, Twig has functions that can be used once we’re inside either a Twig delimiter. To see the built-in functions, check out the bottom of the Twig documentation page. In your application, especially if you’re using Twig inside something like Symfony or Drupal, you may have even more functions available to you. Fortunately, the syntax to use a function is always the same: just check out your project’s documentation to see what other goodies you have. In this tutorial, you will start using Twig functions and filters to get the length of a collection in our demo site. We'll also play around with the dump
function to see how we can go about debugging Twig.
Additional resources
Until now, we’ve been working with simple values like pageTitle or products, which is an array that contains simple values where we loop over and print each out. In this tutorial, you will work with more complicated arrays, using keys, and figure out how to get at object data as well.
If we view the HTML source of our project so far, we’ll see just the HTML tags and printed variables from our homepage.twig file
. So far, there’s no HTML layout, head or body tags, but since our project has been ugly long enough, in this tutorial we'll add these. Instead of just putting these in our homepage file, we're going to make this more flexible by using template inheritance, so we can reuse these pieces in other template files as we grow our site. We'll be diving into the world of Twig extends and blocks, and talking about how to avoid common mistakes.
Additional resources
Using a base layout is very common, and we’ve implemented that in the previous tutorial. Sometimes you also need to include some other templates on only select pages. In this tutorial you are going to add a sales banner to the pages using the include
function, and working with the variables we can pass there.
Additional resources
Be sure to check the documentation for the version of Twig in your codebase for the correct syntax and usage.
In our last tutorial we have things set up to include a new template, but we are currently getting an error, due to not passing the correct variable. In this tutorial we'll see how to fix this problem by adding a "defined" test to our code, which will check to see if the variable is defined in the _banner.twig template
, and default to "lightblue" if it is not.
Additional resources
Our products are printing out a bit weird right now because they’re floating, but not breaking correctly. To fix this, we need to wrap every three products in their very own row. In this tutorial, you will use a "divisibleby" test to see if the item number we’re on is divisible by three, and then loop through them. We'll also clean up our if
statement for our background color, by implementing an inline if
syntax.
In this tutorial we're going to purposely make some common Twig mistakes, debug them, and figure out how to fix them. We'll also look at a way to make parts of your Twig code easily reusable, using macros.
Twig: The Basics
FreeTwig is a templating language for PHP, which is a boring way of saying that it’s a tool used to output variables inside HTML. In this series we'll show you how to use Twig from the ground up, clearly pointing out its syntax, and then graduating to some really neat and advanced tricks. We'll start with a look at Twig syntaxes, functions and filters. Then we'll get into the world of debugging with the dump()
function. With the basics under control, we'll move to handling arrays and objects. template inheritance, tests, looping tricks, and macros (Twig functions).
To make this interesting, we're going to build something useful with Twig, like a penguin clothing store! We're starting out with a small website set up under your web server’s document root and a test page called test.php, which you can find in the series demo site download. In this lesson, you will create your first Twig template, render a variable, and learn the basic Twig syntax you'll need to know.
Additional resources
Twig is the theme template engine in Drupal as of version 8. Like any code, there are guidelines and standards that dictate both the style and the structure of the code. In this tutorial we will explain how to adhere to the Drupal code standards while implementing Twig templating.
By the end of this tutorial you will be able to adhere to Drupal's coding standards when writing Twig, and know where to find more information about the guidelines when necessary.
When automating the deployment of a Drupal site, it's critical to have a good understanding of the configuration management workflow in order for deployments to be consistent and successful.
Before you can get started synchronizing configuration between instances of your site, you'll need to create a new instance or "clone" of your Drupal site.
By the end of this tutorial, you should know:
- Why it's necessary to clone your site if you want to manage configuration between environments
- How to find your site's universally unique identifier (UUID)
- What to consider when setting up a directory structure for your project
- How to clone a Drupal site
Drupal creates a line of separation between what is content and what is configuration. The line is such that content is stored only in the database, whereas configuration is maintained by the configuration management system. While cached to the database for performance reasons, configuration can be thought of primarily living in the sync directory as a series of flat files.
This sounds like a perfectly clear distinction in theory, but there are several times where interdependencies appear between content and configuration. Understanding the key places where these interface can help prevent confusion and "disappearing" settings due to a lack of understanding.