Creating websites with django CMS - Paulo Alvarado

so today we're going to be taught Django CMS how to create website for Django CMS if you were not in my presentation yesterday my name is Paulo I'm the current Django CMS lead developer I work for a Swiss web agency called Evo and yeah I love hiking so if you're going hiking on Monday then let me know before I start I'd like to do a quick show of hands so who here has used or heard of dangle before yeah very nice how about heard of Django CMS before the talk okay not as much and use Django CMS okay cool I hope you guys find yourself useful what is Django CMS Django CMS is a content management system it provides a custom interface for content editors as well as a lot of integration options for developers like quite a lot of options and it's open source on github it's under the bsd license which means you can modify it as you please as long as you keep the license file and just to clarify Django CMS and Django are not the same thing Django is a web framework as a framework to create web applications and Django CMS is a web application to create websites built on Django all right so big difference general CMS has been around for about seven years a bit over that we've had consistent growth over the years but as you can see in the passport we've done a lot like Sprint's to improve the court and as we say make content management grade again it's not as funny as it was before and so in 2015 we won the People's Choice Award for best open source CMS from CMS critic so that was pretty cool and so who uses Django CMS as you can see Django CMS is used by like big companies companies that handle a lot of traffic manage a lot of contents so this is really good this makes us really proud like companies like this use it before I dive deep into all the components I'm going to do a quick live demo because yesterday's went so well so I'm going to talk about pages which are a collection of content and how this content is managed using placeholders and plugins through structure mode and content note yep switching to Chrome all right so I've created this page here and if you can see there is just a bunch of like dummy content right and if you look here on the top right there is this little icon that when I press it shows the toolbar right and from toolbar you can access all your pages now this only shows up because I'm an administrator I'm logged in so it wouldn't show up if you're like if you're not like this right and here you can see all the different pages I've created I've got home blog events a bunch of them and from here you can see that for home for example I've got a German version English and then no French or Italian because I don't I don't really know that and you can also manage whether it's in the menu or not and other options so from here you have this eye icon which you can then click and it will take you to a preview of the page right so it takes me back to the same home page I had before and then I can switch to structure mode from structure mode you can see these are the content blocks or placeholders I've got feature content footer and for our theme right and for each placeholder you have your plugin right so I can expand it and I can see all the different plugins that are on the page so if I switch back to content mode now and let's say I want to change this text that says explore your limit I press shift space shows me where this content is in structure mode and from there I can modify it and say hello by rebn and say then that reload takes me back to structure mode and then from here I can go back to content mode and see the text that has changed now the big difference between structure mode and content mode is that structure mode lets you alter the architecture of the page so as you can see here you can move these plugins around you can add new plugins delete plugins do a bunch of things that will alter the architecture you could say of the site but in content mode you can only modify plugins that are already there you cannot add plugins and you cannot move them around so in this case if I were to want to change this text again I can just double click here brings up the same text right and say 2013 save again and then it just takes me back to content mode so again you can only modify plugins that are already there so this is like a separation between people that do the arts like the architecture you could say of the page and then the people that will actually edit the content and so that was the quick demo no no issues well ok good let's talk about pages so pages get powered by templates right and what does that mean so as I mentioned before you have your content blocks these are the placeholders right a template this is where you define the content block this is where you define the placeholders you would define a sidebar placeholder you would define a footer all sorts of placeholders and when you create a page you assign a template to the page the CMS reads the template and then this is how it knows where your like it provides you the places to add your plugins to then as you saw before pages support multiple translations so you can add as many languages as you want and it's all under the same page it's just like different different content for each page and different URL as well and then any modifications you make to a page will go to what we call the draft version of the page right so the changes I made just now any change we make will go to the draft version of the page and the only time that it goes live is if you were to publish the translation right because content is our language so I made my modifications in English and so if I were to publish that English translation then and only then will the changes affect the live version right and then you can nest pages the same way as you might have seen a nested plugins you can nest them so I'm going to show you quickly what a template looks like this is these are the template for one of the pages I showed before and you can see here you've got placeholder tags and these are the content blocks right and so from here if we go back to the page I had before those placeholder tags become what you're seeing here in structure mode feature content and all that and then if I go back to content mode and I switch to German you'll see that the content has changed right different language so different content and so yeah now I'm back to the presentation when you nest pages you gain a lot of different configuration options and I'm going to cover those a bit in the next slides but yeah like messing pages will give you a lot of control over different things I'm going to talk about those but first I'd like to show if I go back to the English version if I look at the published version of this page you will see that it's the old text the one that I had before so if I go back to edit mode it shows me the draft version and from here I can say publish page and then it will copy all the contents from the draft version into the life and now this is life going back placeholders there is three types of placeholders the first one is the one that you saw in the template is called a page place over a page placeholder is bound to a page it will only work in the context of a page so for each page the same placeholder will have different content so if you have an about page and a team page and both have a sidebar placeholder it will be if the content will be different each time which takes us to the static placeholder a static placeholder retains its contents so basically it's not bound to a page it's not bound to anything it's basically a placeholder that remains the same throughout the entire site so this is very useful when you have things like a footer where you don't necessarily want to modify the content like the content doesn't change depending on the page it's always the same footer and if you modify it from the home page you want it to affect the other pages so this is where the static placeholder would come in and then add placeholders it's basically it's a placeholder that's bound to one generic object so it's a placeholder that is not declared through the template it's declared manually from your model spy but I'm going to talk about that later in application integration so going back to Chrome here so if we look here you can see footer is a static placeholder because of the little pin there so this is how I know that this content will remain constant throughout the whole site and I can change it from here and then it will affect the others right and you can configure placeholders through a setting called CMS placeholder cone so if I switch to this page here right this page is using the placeholder I showed before a page on the score your unit and that's not necessarily a very human readable name right I want to call it something else so I can always go to the placeholder cone and yeah this is more like for I can content managers who wouldn't do this right so I can say page 0 unit and name goes here unit say wait for my server to restart because I made a change and then reload and as you can see the text change so like that you can do a bunch of different things you can limit how many plugins are added to a placeholder you can limit which types of plugins because there's a bunch like text image video there's a ton you can do like that and then placeholder support inheritance so this is one of those things I mentioned would be enabled if you were to use fade inheritance so I have this parent page and then I have this child page and if I look at the first published version of this child page there's no content right so what I'm going to do is I'm going to add content to the parent page of the child I'm just going to copy all of these and hope that it works go back to the parent and I'm going to paste them here in here unit and now I'm going to go back to that same place holder and say inherit and I need to restart server because I'm using the cache template loader if you wear it my talk yesterday you would know so now I'm going to publish this page all this load flow is and if I look at this child's page again it's inheriting the context so this is available through nesting of pages placeholders can inherit their content but if I go back to edit mode here you'll see that there is no content on child this is because I can override any inherited content but I cannot modify it through the child I can modify it only through the root in this case the parent page so going back plug it as usual plugins can be nested you can cut them copy move them around and their language aware so when I show the English page and the German page pages they're aware of language but placeholders are not placeholders know nothing of languages plugins do so when you have a plug-in in English like here these plugins are all different instances like completely different database records than the ones in German and each plug-in will store the language that it belongs to so this is how you can see different contents depending on what language you're on but the placeholders themselves don't know anything about languages and so I'm going to show a quick example I'm going to move this plugin here I have this cow right and I'm going to move this cow that way so again I can use shift space now I know where the cow is is this one here and it's part of a grid system so I'm going to go ahead and move the column up and now I go back to content mode and the cow is there right so that's an example of how plugins can be moved around throughout the whole structure mode but this wouldn't be able to be done in content mode right and the cow is also an example of a custom plugin so we provide like we have a whole ecosystem of plugins like text video image but you can have your own customized plugins this is a an application a third-party application that provides you with profiles for people people profiles so I created a profile for the cow and then I created a custom plugin that just renders the cow just renders a list of profiles and this is why we see this here so like that you can create any type of plug-in the plug-in that renders perform any type of plugin and it okay so the menus are fully dynamic what this means is that you don't have to hard code the navigation anywhere basically if you if we go back to the page list here we have a little checkbox there to see to tell the CMS if this page should show up on the menu or not so we look here I have this event and I don't want events to show up in the menu I'm just going to help go ahead and remove it from there and you can see it's no longer there so there is no hard-coding anywhere like the menus fully generated from the pages and the way it works is that the menu is composed of navigation notes these navigation nodes have a title a URL and an identifier so we basically fetch all the pages and create navigation notes for all of them and menus can also be customized using what we call modifiers so a modifier would basically take a list of notes navigation notes and you can set attributes to them based on certain conditions so for example if I have notes in my navigation that have let's start with a be like the title starts with a B right like blog I can say well every note that starts with a B is going to have a B icon like PI viewer and so I would set the icon on the navigation node and when the when the template that renders the notes is it's called I can just say if this icon is available render the icon and so whenever the navigation node would render like blog it would have a customized I could write so that would be an example of modifiers you can also have your own custom menu like you can create your own notes but this is something I'm going to cover in application integration okay permission jangle gives you permission like when you create a model in Django you automatically get permissions to add change and delete right there's no read permission and another limitation is I cannot say well only evil but evil can only change the block he can only touch the block I don't want him to touch the home page or any other page I cannot do that with Django permissions at least not the ones out of the box because there is no concept of role level permissions there's only like object level permit like the entire model so it would have to be bulk and edit all the pages or you can edit none so we created a permission system that allows for first of all it introduces reading so you can restrict whether a page is accessible by certain users right so there is reading and then there is object level permission and there's also global as well so you can say now that Bob can only modify the blog page but he cannot modify anything else and that the cool thing is that when you inherit pages like the parent page that got there you also have opened the door to inheritance of permissions so imagine is if you've got multiple divisions in your company you've got a science one a business one and you have a science page which is like the home page that sell for the Science Division and you've got a business one any page that's on the science you can say that all pages on the science will inherit the permissions of the science page and then just say that all the users that are have the Science Group can access that page and edit it but they cannot edit the business one so this is how permissions can be inherited and left there is like a more nuclear option which is a configuration in the settings where you can say that the entire installation is accessible only by staff members so this is more for if you're trying to create like an intranet for example the entire installation is closed off and can only be accessed by administer now the CMS has different levels of caching the first one is page cache basically it's very straightforward the females render the page and grab the entire rendered content throws it into the cache the next time the page is called we just fetch it from the cache and just render that right and then there is more granular like placeholder level cache so as you saw you can cache at the content block level and then there is menus cache the menus is like one of the most expensive things on the CMS like it's really expensive to generate that menu so we highly recommend to house caching enabled for that you can configure the durations of the menu there and you can also turn off page cache placeholder cache and then there's a gotcha with plugins we don't support plug-in level caching yet so what that means is imagine if you've got a plugin that renders the form and this form has a CAPTCHA right so then the CMS caches the entire placeholder and so when another user comes in and they submit the CAPTCHA if not it doesn't work it sort of validation error because it's the CAPTCHA that was cached when another user came in right so then that would cause a problem so the only thing you can do is you can turn off caching you can turn it off entirely for a plugin so I can say this plug-in that renders the forum don't cash it at all and so what the CMS will do is whenever it sees that plug-in in any placeholder it turns out caching for the entire placeholder so that is a trap right because you then if you have 300 plugins in one place holder which it happens a lot you would have to make sure to put your form in a different one in a different place alert so that it doesn't catch that one but it catches the other plugin and this is a true story of something that happened to me where we deploy the sides and we had like random validation errors out of nowhere and it took me a week to figure out that it was because the CAPTCHA being cashed so that's that was awful well that's gone quite fast application the famous application integration so imagine if you guys if you're creating a blog right and your blog bottle you're you create an article model and it has a title at load and content and your content field is a text field with a Witek widget on it right and your Content Manager is is adding articles and they're like you know we have all these cool plugins in other places like I can add content using all these cool plugins but why can I not use these plugins for the article like I would really like to use images videos and all sorts of things for the article right so you can do it using a custom placeholder field by the famous provides a custom field called placeholder field which basically lets you leverage the entire placeholders plugin system from your model so you would basically let me show you how we do that if I go to blog and I have here a blog article switch the structure mode you can see I have this news log article content placeholder this placeholder is not defined in the template it's not defined anywhere but the placeholder the model definition so search into the model it's this I have a content equals placeholder field so it's a it's a field it's a placeholder field so it just it allows you to bring in any plugin that you want so then the content managers would be able to build articles with any of the available plugins from the entire site so that is pretty cool and then there is the option of menu integration right so if I switch back here you notice and I should have reloaded because I stood there okay there there's no bread Crump I have home but there is no blog there is no a shift in read/write I go back to the blog page there is home blog but there is no bread confrontation reef that is because a shifting wreath is an article it's not a page and the CMS has doesn't know about this article I have no clue what this is because this is a third party application nothing to do with the CMS so what you can do is you can create a custom menu that basically tells the CMS what these articles are and then the CMS can create a navigation for it and that looks like this basically fetch all the articles and for each article create a navigation node title URL ID and then you can go to your blog page go to the Advanced Settings and just attach a menu to the page right so I'm going to attach this test menu that I created reload and now if I reload this article you're going to see there is a Bertram now this is because the CMS now knows what this is and it's smart enough to match the URL to the current article so that's that's an option if you if you're building third-party applications and you want to integrate with the CMS you can create custom menu for them and last there is a pox I folks this is like a is a very advanced thing so I'm not really going to go like super deep into it but basically the way the blog works is using the apples feature so imagine if you've got you have a blog right and it's a third party application and you want to manage the blog page through the CMS but your blog application has its own logic its own logic that handles the slug when you access like this a shift in reef right it has its own view its own URLs its own logic but you want to manage the page through the CMS like I have it here blog so the way you would do it is you create it what we call an app book which basically hooks the CMS a CMS page to your third-party application and so when the CMS hits the blog page it's kind of like a proxy it looks at the blog page and it says I have an apple and it just passes the rendering of the page to your application so then you can do things like the blog landing page and handle article detail pages without like it doesn't have to be in the CMS core you can do it all in your third-party application but then you can manage the page through the CMS so that's one option now demo so if you really enjoyed this talk and you're like really eager to like get to know Django CMS you can go to a demo that Django CMS Django CMS org and I'm going to do that like right now because I'm pushing my luck and dammit I did not connect to the Wi-Fi okay I am NOT going to do it now I've pushed it too far so yeah if you go to demo the Django similar org you're going to be asked if you're a robot if you are not then just click the box and you're going to get a fifteen minute demo of the CMS it's going to look exactly like what I have here like it's going to be exactly the same thing but it's only going to last for 15 minutes you can delete any page modify all the content you want because at the end after 15 minutes it's going to expire and then it's just going to recreate another one so feel free to try it out and if you want to try it out for longer you can sign up for a DBA cloud then it's free you don't have to pay anything for the signup and you can have a staging side for free forever so you can play with the CMS as long as you like and only if you were to want to go public with your site like publish it then you know we would cover we would it would charge it yeah they'll be off thank you very much [Music] [Applause] questions nobody only the editing interface is more well yes so there's no offline mode ah no more applications at the moment we're working on a REST API to be able to integrate the mobile but it's not ready yet yes all pages will be dynamic because they're all handled by one single view in the CMS but you could cache it you could also just generate the page I've seen this before where you generate the page and grab the output HTML and just save it to a file and then just render that yes it would mean to integrate with the PMS yeah it would have to be more jungle than opposition yes sorry going to production oh yeah it's exactly the same thing as any other django application it works it works the same way yeah we actually have these like boiler plates where there are different themes like booster three and all sorts of things like that but that's actually more at the Jango level because Django CMS itself doesn't really like it doesn't do anything with how your site looks so it's really up to you how you configure your templates your CSS and all that stuff well so far I think the last security thing we have with like 7 months ago so I think we're doing pretty good if there is any we handle it the same way as Django if there is any security issue it goes through the security mailing list where only a few have access and then we don't release it until we have a patch ready and all that but it's pretty much the same good thank you [Applause]

Channel: PyCaribbean

Views: 9,642

Rating: 4.7021275 out of 5

Keywords: czpython, Paulo Alvaro, Creating websites with django CMS, PyCaribbean 2017, PyCaribbean

Id: 6jn_-WyRcaY

Length: 30min 39sec (1839 seconds)

Published: Fri Mar 10 2017