Hello friends of software entertainment. My nameis Roland. I am a PHP trainer and consultant from Duisburg in germany. Today I want to talk with you about the future of web design with self-editing sheets and thepower of the Sulu CMS. Welcome to my direct. In my last-place tutorial streaks you learned a lot aboutcontent categories and how to realize templates editable. But in this video I want to give you a dream ofweb motif and what I think about web pages and the different kinds of content pages. So let’shave a look on the Never Code Along page. You know this project is totally open source it’s on GitHuband when you have any technical questions just leave it here in the comments or get in contactwith me on any other channel. Like you want. So first of all I have here a supernormalmarketing slider about actual publicizing. Like my remote PHP training or my testing company.This is something quite normal in the world.Now i want to go away from sliders, but on this sheet istill have a slider under this section. Here is an event slider and this event slider is generatedout of the events that are added now on the sheet. The special thing here is that when I do someevents only on meetup.com this is gonna be incorporated now directly in these events. And this is super cool, because I do a used group and when i published one event to meetup.com it’s by itself directlyhere in the sheet. This is a super cool feature. Here’s some imperfection with the year sorting. This is nota problem for now, but it’s a very cool feature. After this there is a regular multi-slider elementwhat would be editable by the back-end editors. And down this here is my blog postfor my wordpress blog.And when I publish a brand-new blog announce thiswould be merely integrated now. And there’s a network service workingand yeah that’s this sheet now. So there comes in some content from social mediadirectly to the page. This is not content that is an iframe, or plugin, or widget, or whatever.It’s real content. You have it really here in our arrangement and this is super cool, because whenwe experience our train. This is a more modern layout here. I too use different kinds of schemes here, so we have this PHP training and this sheet here is totally generated by itself. Nobody can edit heresome things.I think we have here our training and this training is automatically generated fromthe subpages. It’s a entitlement, job descriptions here and an likenes and establishes a link to thetarget page. Below are my YouTube videos from the people who obligated the training with me. Andthese are also not any kind of YouTube widgets or that you can just run this video. Now it’scontent what I grab from the API and will make this to my page. And this is a very goodthing and Google likes so much better and they say: Hey you got it. You understand the web. Get ourcontent to your page and we will rank you up. This is also happening on the recommendations. Idon’t have any recommendations still further. I’m working on it and then I likewise will implement it here andGoogle maps or whatever you have from Google, applied the things to your page.And this pagewill grade up, when it is real content. And not iframe material or whatever, and yeahthat’s a sheet. And this is very good, because I don’t have anything to dowith this page. I really revise my civilize or really upload a YouTube videoand the rest is done by itself. Okay so, when we will see a teach here, a teaching every time has a video or maybejust an portrait, then there is a headline, there’s a description, what is in the training.Then there is a quote from somebody who has made this training and what you need for thetraining and the scheduled plan, what we will do on day one, what we will do on day two andso on. And as writer you just want to edit this kind of entries “youre telling”: Hey here’s a headline, here is video, here is a price or whatever and you want to don’t think about what you have to doin the freedom corner.And that you have to decide the title material category. You only want to fill allthe information of a training in one page. And you too want that page, or the informationof the sheet on other pages. Will be there. Automatically. Like you determine on my lastvideos, there is also the possibility of block website. We have a web sprint. We have anew name, but its way for it. But “were having” this network sprint now and yeah this web sprint has onelayout here. And journalists want to be here more flexible. They want to say hey I want to add herea headline and the verse and I want to add here banner. And they want to build this page, likethey believed they miss it. This is okay for sheets, like this here.Marketing ground sheet maybe, but it would be super annoying for the users for our PHP training, when everybody willbuild the page, like he craves or she misses, because then the user has on every training.He may check training and say: Hey, we want PHP training. Oh they have testing likewise and they havesomething about Sulu CMS. So they want to click through the training, and they want to realizesuper fast, what they have learned from the first training.Where the information is and what theywant to know, when they go to the second training. They want to see the same structure and these arethe two kinds of web design editing concepts. One you have a central data set editing and one youwant to build free websites, like you want to build as editor. Okay so far so good. Let’s takea look in the development area and in the matrix. We go to the terminal and say z nca-sulu and ah I was working here onsomething called the cta button for the last video. I fantasize the page is workingtotally well, so I can start this here. And now we have the sheet. So let’s check out thepages that we built now and then I can show you, how to make these things happen. Okay welogin to the backend and then, we will check the startpage. The startpage is just now andon the startpage, as you realize we have a slider with these two elements. It’s lading a little bit herebecause I had begun in my neighbourhood environment for now and then you have here this eventcarousel.You know that there are parts from meetup.com together withitems for my pages and yes the residual here are some really simple aspects. Solet’s see this event carousel now. We will open PhpStorm for thisproject. Okay now it’s open and going to be home to our admin sphere. And in this admin area, you see that here is our template. It is home page and on this home page you have theevent carousel. And now you select a page and you can say, okay select the source, include sub elements.This is now not so necessary. When I’m on this stage, because thisis also second height and every level will be precisely now. So this is merely the spring tier andthat’s it. You really have to say, okay adopt beginning nca-events. We can check this here ourwebspace and then we have here our pages and there are the events now on this level.And every of this event will be rendered to the front end. So we will check theconfiguration and template file for now./ configuration/ templates/ sheets/ homepage.xmland on the home page you see here we have the blocks from theslider. So it’s an easy header now and after this you got this eventcarousel. And what is the event carousel do? The happening carousel has smart content.Smart material is a great feature of Sulu CMS. With this smart content you can select sheets and getinformation from those sheets. You can also say, hey please give me a limit to 5, or 20, orwhatever.How countless pieces you want to get. And you can also do pagination now, if you want.But for now, we only want a little information. And this few knowledge is the article and theURL. But likewise the entitle and now you can say that every knowledge you give in with a key, thatwill be rendered to your Twig content last-minute. Like the excerpt designation or excerpttags.Here let’s check the backend from an happen. So we just have to checkwhat event we can see. Here like this here. And then you will have here the excerptinformation. And on this excerpt information, you get a special title perhaps. It’s shorter orwhatever and maybe, you have a special description and you too can be argued, that you have here. An persona and this image is alsoimportant for social media marketing. I will explain it on a last-minute sequence, but for nowyou only can say that this is a background image. And as you see here this background imageis not this image here from the header. But maybe you want to render more informationsto the frontend. Let’s check the frontend by the way, what information is here. So you have here a year for this eventand an portrait from the excerpt image. You have a title, you have a full year, you havea link to a blog affix, you have a description, and you have a donation. Every time when we makean event we sponsor some social institution.We rallied 5 000 euros in three years roundabout.and there is also a target like this year they subscribe adolescents with computers and a reallycool. So we got this information here and when you are editor you don’t want to think about.Oh, I need a blog announce for the startpage, and whatever knowledge you miss, to edit in contextof an phenomenon. You just want to edit this here on one sheet, on one contest. And wehave here all this information. We have here a special padding, because there aredifferent kind of emblems of the sponsors. We have a town, we have a date, we have an event linkfor eventbrite, where you can buy your tickets. We have a preview image link, when wewant it. We have a blog post, we have a blog headline by ourself, to make a headline.That has the right size here.We have a social prison connect and we got this verse andwe got a donation and much more information. And the writer simply can say, okay brand-new happening andeverything is on one sheet. He only can be argued, okay enter here, here, now, now this information.That times the speakers, here um this is the counter, this is the overview and you see heretimetable. This are very much reports, but when he wants to add a new talker, orreplace a talker, he know, Ii just go to one single time of information and edit it.Thereso when “youre telling”, hey the locating will change, then you just can say here somewhere else, aniframe for google delineates and the localities where the contest is. It’s anytime the same town, but maybeyou have to ship on any other location and then you can just say it here. Okay make it happen andeverything is cool. I think journalists don’t want to bringing here own chaos. Let’s say, hey the jobshere are maybe some jobs what the sponsors can say they supply a few cases of jobs.Because they are sought for makes and yeah then they have here a job list.And they miss this hassle inventory now on top, or on posterior and we don’t want that the sponsorsays, hey prepare everything on another styling or on other order.This is a really good thingand I can be argued, when you are building websites, really thought about it. If you can use this, that youreditors bring up information in this structured content. This is so much easier and so muchmore powerful to bring out content easy. Another precedent. Here I have just a little thing about themeetup.com Symfony service, when you want to bring web services to your page. And you’re a Symfonydeveloper you adoration web services. You can just say, hey delight Sulu for the homepage don’t use yourcustom controller, delight operation my controller and under app/ controller/ pageController homepage() is all the magic that will happen here.Let’s check out this beautiful class. The pageController/ trainingOverview() is also a page what we want to look. And employerBrandingConference/ homePage (). You is in there every time the same dependencies that you have to injectand then you have here only a return.You see here that I have also something that I haveto handle was cookies. It’s an update. It will have a new design here, but you see hererender the structure and you just have an array now. And you can put in this array whateveryou miss, so when we just will say here, okay we have here now our YouTube video content, I belief Ihave to do real key video-content. I really can say here and works for me. When i check the home page Twig where it is and do this. Normally you dumpcontent, but this keys are one level higher so you have to say dump internal instantly onthis key and you will re-render the frontend. Then you will have here our blah blah blah and this isvery very powerful, because you can just get all information that youcan get with PHP to your frontend and now you too will understand we can renderthis here.We can also render this here. How the meetup next happens will come in asmeetup/ nextEvents() in the block list. Maybe this is a bit easier. The web service is a biteasier. We have this wordpress busines now. And this get items from the blog and so we justhave a web service here, like you know from other and all your Symfony projects. Stillremember this is a full stack Symfony CMS, so you can use your regular Symfony structureto build web pages. Configuration is here, sources here, our controller and here are also ourservices. Meetup service, spam shield service, Twitter service, YouTube service enrolls theWordpress service. And the WordPress service exactly get a REST service and this Remainder servicehere will load my last-place 10 sheets from my blog magazine.JsonDecode() return body, so i got a reallyclear array. We can also render this here to the key blog register and when we, say okay pleaserender the blog list perhaps I come back like this blog list, then I have this blocklist here, we render the start page. And it’s working. I have here now my blog inventory and firstdate and all the information that WordPress will give to me. I don’t need anything.I need a URL, I need an image I meditate, and I don’t know exactly, where the image is now.Just headers there are many informations.Maybe under content, or maybe not. I don’t know featuredmedia. I don’t know exactly now where it is. We really can have a look here to our blog inventory. Featured media something like this and thenwe will have this image here. Other room same principle and after that wewill look at the content blocks. We require this here. Okay so we have theoverviewTraining/ synopsi (). We have here trainingOverview (). We havehere also our custom-made controller, because we got this nice YouTube content. Itis a bit more complicated to get this content. But then we have here some content abovea headline to sub qualities. We can check out by the way the page. Headline, description now and we have this training. Now let’s check thebackend. We have this overview here. Training headline, we have a few subpoints, we have image and you see here are our direction outline, because weselect now the source PHP training. Sulu selection ctrl+ y button, and smartcontent. It’s exactly the same principle. Now we got now other information, alsothe coach items.Yes we want to know who is a coach now, we don’t do something whatit for now in the frontend. I don’t know exactly ah now. PHP Trainer Roland Golla. This is meand when there is a second person, there will be also be a second item now. And when there willbe a second person there, will be also second item. Here okay and so all the information we needto be give to our overview sheet. Super strong, super good the other kind of editing content is, that you want to say. Hey, please let me arrange the content and select the content on differentkind of blocks. We is in there our entanglement sprints. Sprints and on this website, you see herenow there are different kind of sections and the sections have here an piece list, call toaction. We have references and team members and another marketing content points, Yousee that this here is my development environment on live this willlook a bit more detailed.So let’s check now our. Web sprint and our network sprint hasa page edugate-default. And this train default page just say, hey you have different kind of content characters. Like icon rosters, call to actionbutton, cites you see here our icon inventory and under the icon list is our call to actionbutton. And now the editor can say, hey let’s move this element on top of the sheet thiswould be re-rendered and now the call to action button is here on top. And he likewise can say saveand publish and he too can say hey give me a new-block element and then he can select fromdifferent kind of blocks aspects. Like another cta button. This is a really simple element.We can say here we go right here right now. Ok. This is anything and we can go to ourtraining page. Maybe to our practise overview, it will be re-rendered and then we have here, where it is, here “theres going”. Here we go.Ah, yeah thisis so similar, because it’s the same block content components now. Here we go by, anything with alink to the page, then we can save and publish to store this and then we can say, okay please give this a bit more up. This will be re-rendered here and now we have, call to action our inventory and then here we go. This is very good for writers, when they want tobuild marketing pages. Cool, I do a video about sulu blocks last-place age. It’s relation here in thevideo description and here on top of the tooltip. We can have a little look on it.We have here ourdefault page. I think it is this default page. educate-default, yes this is the right sheet andthis is all what you have here in this. xml record, because it’s lading differentkind of types from our block from and blocks. xml. Thisblocks.xml here includes edugate-blocks.xml. It says, hey now headlineand description, the first constituent and the default element. And then here are the rest ofthese xml aspects. And this xml points are configured. Here like the cta button. Hasa headline, job descriptions and a button with a connect. And when you check out our frontendand the frontend is near by the same structure. We have this default sheet. Now this defaultpage is loading blocks and the blocks is lading the block sort. Here so you don’t have toadd here every time a brand-new block, because it’s going automatically and you have hereour template.So far so good. I hope that members can experienced this session. It was not so easyfor me with my english and maybe I was too fast. Give me feedback if I could helpyou with any other seminars or whatever. Give me a like and some comments willhelp me a great deal and see you next time ..
