Drupal Views Module: Creating lists of content on your Drupal site

hello everyone and welcome to another daily dose of Drupal today we are on episode number 203 and we're gonna be going over the views module before we get started I am Shane Thomas you can follow me on Twitter at SM Thomas 3 also make sure to head on over to code karate comm check out all the posts make sure to get your free code karate sticker and see what else is going on on the code karate calm website so what is the views module this has been one that I've been thinking of doing for a long time and just never got around to it because of how complex it is and it's very difficult to explain succinctly so what I'm going to do is try to break it down and go over just some of the high-level overview stuff of views and then in the future I might have additional videos on more detailed concepts within views so first of all what is a view well the view is you can sum it up as a list of content or a list of data being displayed on your Drupal website so for instance on the code karate comm site you'll notice that there is a list of blog posts or videos articles this here this main list is a view and that's just one example anytime you want to take data and list it in some kind of format the views module can do that so how does this data get or how do you actually display this data well this data could be anything such as your blog posts your pages any node content in your drupal website the data can also be users so you could list users from your drupal website or any other type of entity such as products if you're using Drupal commerce or any other entity that's exposed to views and because Drupal is database driven almost everything you enter into the Drupal's the triple interface the admin interface can be displayed using views so if you go to the drupal.org views page views project page you can see that it has been installed an extremely large number of times it's I believe it's the most popular Drupal 7 module based on installs the current version is 7x - 3.10 so you want to make sure you have that installed on your Drupal 7 website in order to do that you're also going to need the ctools module so you're going to want to make sure you grab that as well and here I have a test site it's a brand new site the only modules that are installed are see tools and views so if we take a look at that and we scroll down you'll notice that chaos tools is checked and views and views UI is also checked and is the reason that views and views UI are two separate modules is views the actual views module itself handles is kind of all of the the heavy lifting so to speak and the views UI is just the user interface to create and manage your views so what this means is if you wanted to move your view to a live website or if you didn't want the view to accidentally get changed by somebody you could turn off the views UI and then you wouldn't no longer have to worry about someone changing it it could save a little bit on performance so that's just an option so once you have those enabled and installed you need to then make sure you have some content that we're going to display in this case I just have for example articles and we're going to go over creating a new page displaying these articles and then also a block so we're going to create two views in this in this episode you'll notice that by default articles automatically display on the front page of a Drupal website but this isn't always the case you might not always want your articles to display on the front page so in that case you may want to create a view listing these articles so in order to do that go to the structure page and look for views by default there's a bunch of views that are not turned on when you install the views module you can enable these we're not going to do that now but you just know that they're there we're going to click this add new View button we're gonna call this view articles you can provide a description which is just for you to see and now you select what kind of data you want to show do you want to show content do you want to show users comments taxonomy terms if you installed different modules you may have different options if you install Drupal commerce for instance you'll have commerce products here in this case we're gonna just show content now you can select the type of content you want to display in this case we want to only show article content you could also specify you only want to show certain tags if it's tagged with a certain term and you can also select how you want it sorted here you can select to create a page or create a block in this case we're just gonna show how to create a page and we'll come in later and show that you can still add a block even if you don't set it up initially in the initial views creation wizard so let's go ahead and say it's gonna be called articles you select the path which is going to also be articles you can then select a display format a display format is how you want it actually to show up on your site an unformatted list is just a list of divs if you're familiar with HTML that just basically outputs the content as basic as you can think just a but a big list you could have this as a grid so if you wanted it as a 3 by 3 grid or a 2x2 grid if you're doing images or showing images that's often helpful in HTML lists just provides it in an HTML list format a table is an HTML table and we're not going to go over a jump menu at this time you can then select if you want to show teasers the full post or fields will leave it as teasers for now but will also show what some of those other options are a little bit later in the video so we're gonna leave the rest of these as the default we'll select ten items to display use a pager and we'll hit continue and edit okay so now you're going to see this interface and after you use views for a while this will become second nature but the first time you see it it can be a little bit intimidating so we're gonna go over a bunch of these sections but before we do we're just gonna click Save that's going to save our view and we're going to open this up by clicking view page and I'm gonna open this in a new tab here so we can come back and forth easily and you'll see we're at our site slash articles and it's just a list of our articles so it's very similar to the front page but it's not exactly the same you can see that it's different and we're gonna go through how to actually edit this and what what this is actually displaying you'll notice when I'm on the view what I'm actually looking at it if I'm an admin I get this little wheel over here you can click that and go to edit view and that's gonna take you back to this page here so let's go through this let's go through what a view really is this first option here is the display name this is what's gonna show up here you can add different displays within your view and we'll do that when we add our block a little bit later the title is what title actually shows up on the page in this case what title shows up here so we're gonna change that to just say my articles just show that how that works the next is the format so you can select how you want the format to show up just just show how it works let's change this to an HTML list and we'll hit apply all displace we're going to leave everything at its default and just save it as an unordered list and we're gonna click Save now if we come back to this page and refresh you'll notice there's a bullet point on each of these and that's because it's now an HTML list rather than just an unformatted list you'll also notice the title changed so we're gonna go ahead and change that back to an unformatted list leave everything here as its default and click apply the next section here is what to show we selected to show the teasers which is a teaser is just a kind of a summarized article in this case and you can click on it to read the full article but there may be cases where you want to show just specific fields and we will do that in the when we create the block view here in a little bit and if you create fields this section will open up so we can't do anything there now but some important parts of what makes this view actually work filter criteria this election this lets you filter down what type of content you actually want to show on your site so first of all it's checking is the content published yes so let's click on that so we could select do we want to show publish content or not publish content in this case it defaults to showing only publish content and what type of article so content type equals article if we wanted to change that we could click on it and say we want to show basic page we want to show all of them we could let's say we remove that now it would show anything any content on the site we can then go in and add in additional filter items so the way this works is each of these filters get supplied and each one will filter down which content is actually showed within the view so let's look through some of these different filters here so you can see there are things such as comment status the body author UID so if you wanted to only show content by a specific author you could select that if you wanted to show only content with this after a specific post date you could show that you could use that there we're gonna select a content type because we want to re add that but just look at there are a bunch of different options here and all that the filter criteria allows you to do is filter out the content so there so less is shown so each time you add one it might filter out additional articles in this case and we'll slowly reduce the number of pieces of content that are actually shown the next section is the sort criteria and this is just to control which order the content is actually displayed in so you can see right now it's sorting by post date descending so descending means it's going from Z to a or backwards here in this case the newest post date first so my favorite electric guitars post is the most recent post on the site if we wanted to change that we could change it to sort ascending and that's gonna flip this so now you can see this post is now on the bottom so when you're looking at the views interface you'll notice I kind of scroll down and you can see a preview down here and that's important because it can help you as you're building out your view to really see a summer a summary of what your page is gonna look like before you actually go to the page itself over here you have page settings this is to select the path you can add a menu item you can change a specific permission so only people with a certain permission can actually see this we're gonna go ahead and save this and take a quick at where it's at right now so we can go ahead and keep moving forward and get to our block view so here we have it's sorting with the newest showing up on the bottom you can of course change that to whatever you want typically you'd want that to be descending instead of a sending you can also add additional sort criteria get rid of this specific post date sort criteria by clicking remove you can rearrange the order by clicking rearrange and drag these around in this case for filter criteria it doesn't matter but when we get into the fields option it might so let's go through these other quick sections a header this is to add anything above your view so if you want to add additional text up here additional HTML you can do that in the header section the footer section would be to add additional information down here you can also select a pager which will show you when we created the block view so let's go ahead and create that block view right now in this case on every page of our site we want a little block over here that shows the last three articles and it should show will say that title and the date the article is published and the article or the title should link to the actual article itself so we're gonna add a new display to our view you can see there's a couple different options we could add a new page but in this case we want to add a block so we're going to create our block we're going to go over and change the title you'll notice here it says for all displays we don't want that if we change the title for all displays it's also going to change the title and our page display as well so we only want this block I'm going to say recent articles I'm gonna hit apply and four-block name I'm going to also call this recent articles and this is what's gonna actually show up on the Block administration page and instead of showing content here I'm going to select that and change this to fields and now you'll see this field section opens up a little bit I'm going to leave the row style options at their default and hit apply you'll notice though if I go back to page now this has been changed to fields and the reason that was was because I didn't select to only do it on this block so I'm gonna go ahead and change this back to show you that if I apply it I want the teaser mode if I go back it also changes it over here and so in order to kind of separate these because I want these to be two completely different displays when I click here I need to make sure I select only for this block that way it'll keep these two so they're different they can be separate they don't they're not necessarily connected so by default that's just showing the title I can add additional fields and I'll show you what that does here in just a second the filter criteria and sort criteria are gonna be the same the only difference is I want to make sure this is descending again I only want it on this block I want to let my page stay the way it is and over here in the pager I'm going to change this to only show three items and I'm going to hit apply all displace and I'm gonna show you what that pager is and you've you're definitely familiar with it and it looks just like this it has the next the last so you can go between different pages of content so let's go ahead and hit save here and let's come back to our my articles page and make sure everything still looks the way it was before everything looks good now we're going to add that block to show up over here so we go into structure and you click on blocks we're going to go down and find the recent articles block and we're going to bring that up into the sidebar first and drop it in right there and click Save you can come in and configure this block if you want if you want to change or override the title you can do that if you only want to show it on specific pages anything that you can normally do with a block you can do with a views block but now if we refresh you can see recent articles is now showing up and as my favorite electric guitars favorite sports moments and it has this pager here well first thing you notice is that the pagers are connected between these two well I don't want that again I didn't select to only change the pager on the block so it also added a pager to my main articles list so I'm going to go back into a view and I'm going to go back to page and make sure actually I'm gonna go back to block change this back to 10 that's what it was by default that'll change it on the page as well and I'm just gonna override the block because again and this is one important thing you're gonna notice if you want these two displays to be different you have to make sure you're very conscious of selecting this for option so in this case for this block so I'm going to set this as 3 apply to this display only and I'm also going to add a new field in here I'm just going to look for post date and you can of course search using a little search field so I want to show the post date and let's hit apply you'll notice that this one is still set as content this one is still set is now set as field still let's hit save and let's go back to this page and refresh you'll see you now has the post date it says post date we're gonna get rid of that but another thing you'll notice if you click Next it completely loads the page and then it no longer shows your articles this is kind of an interesting little bug I guess it's not necessarily a bug but a little trick with views because it's the same view views thinks that if you page on this little view the big view should also be paged so in this case we want to change this and we're just gonna go over to the Advanced section here and in this block section we're gonna say use Ajax we're gonna check that and for this block make sure we're overriding we want to use Ajax and I'll show you what that does so now if we save it and we refresh typically you don't want to of the same view showing up on the same page in this example we're kind of showing that but it's not typically what you'd want to do now if I click Next here you'll notice that it changes the pager here without affecting the main view over here and what the views Ajax does is it no longer needs to reload the entire page it just reloads this one little section so there's our block view here's our main view our page view listing all of our articles we're gonna go over a quick few of these Advanced Options and then we're gonna wrap up here so contextual filters you may be wondering what a contextual filter is well that's used to pass information into your view and by passing information into your view you can limit out specific types of content so you may want to Pat be able to pass in a taxonomy term and how that limit out which content you're actually displaying in your view relationships would be to link different types of content or different types of data so in this case every piece of content every article has an author if you wanted additional information about that author such as the email address or when they created their account - that the date you could create a relationship to that author and pull in additional information to display within this field section or you can also filter by it you could sort by at all those things so it basically links different types of data no results behavior simply allows you to add text or HTML to show up if your view does not have any results so if there were no articles you could say you wanted to say there are no articles on this site or something like that an expose form we're not gonna cover that right now and all these other options you can read through them most of them you're not going to need to often and that's why it isn't the advanced section that these other options aren't things you're gonna use on every view but they are helpful and so again we'll probably cover some of these in additional videos on the views module so that so you learned today how to create a simple view a page view to display articles you also learned how to create a block view to display a list of recent articles and you learned a little bit about what the views module does how it works and the views module is really cool because if you're familiar with writing PHP code you'll know that in the past you had to write a whole bunch of PHP and a whole bunch of what's called SQL to pull information from the database and these SQL queries as they're called often got extremely long and tedious and repetitive just to display something as simple as a list of content but because Drupal is all database driven and because the views module exists now there's a tool that you can use to easily display different types of content different types of data on your Drupal site in any type of list form that you would ever need so go ahead and spend a bunch of time with views if you're creating Drupal websites you're gonna use views a lot it's pretty much on on every single Drupal website I've ever created and it'll be on on most the websites you'll create as well so thanks for checking out this video make sure to check out code karate calm and we'll see you next time goodbye

Channel: Code Karate

Views: 17,393

Rating: 5 out of 5

Keywords: Daily Dose of Drupal, DDoD, Drupal (Software), Views, Site Building, Drupal Views

Id: K6q6VztC6HM

Length: 24min 43sec (1483 seconds)

Published: Fri Apr 17 2015