Transcript

00:00 let's implement total CMS from A to Z
00:10 hey everybody
00:12 Joe workman here and in this video we're
00:14 gonna be implementing total CMS on an
00:16 existing project now the project I'm
00:19 using actually you might be familiar
00:21 with because it is the same exact
00:24 project file that we built in the
00:26 getting started video series for
00:28 foundation so if you've gone through
00:30 that video series you've built that
00:32 entire project file out and basically
00:36 now we're gonna take that project file
00:37 and CMS fi it right so we can edit all
00:41 the contents online and then after that
00:44 in the next video we're gonna implement
00:46 blog inside of it as well so this is
00:49 gonna be a great overview of taking an
00:51 existing project file ok or if you build
00:54 from scratch right it's showing you how
00:56 to implement a new CMS file from scratch
01:00 and you know it's interesting way of
01:03 this is a small project file on ways
01:05 that we can implement CMS on an existing
01:08 project ok so without further ado I'm
01:12 really excited about this and let's jump
01:14 in and get started implementing total
01:17 CMS so here we are inside rapidweaver
01:20 and if you recognize this project file
01:22 you probably built it in our getting
01:24 started with foundation video series it
01:27 was a three part video series that if
01:29 you haven't gone through I strongly
01:30 recommend that you do that just head
01:33 over to our YouTube channel and go to
01:35 the foundation playlist and you'll see
01:37 the three-part getting started with
01:39 foundation series where we build this
01:41 exact project file from scratch now
01:46 before I go ahead and start implementing
01:48 CMS inside this project file I want to
01:51 show you something that we're gonna be
01:52 using to help us out a little bit with
01:53 some sample data if you head over to our
01:56 documentation portal and go to this CMS
01:59 for rapidweaver documentation you'll see
02:01 that there is a download link for sample
02:04 CMS data I'm going to be using the
02:07 sample data especially for the blog and
02:09 galleries just to save us a little bit
02:11 of time here so
02:13 you would like to use this data go ahead
02:15 and download this zip file and then
02:17 we're gonna upload that to our server so
02:20 what I've done is I've uploaded that CMS
02:23 data folder that is inside that zip file
02:25 to the root of the website that we're
02:27 gonna be working on right now so as you
02:30 see it has a lot of data in there okay
02:32 so it's just upload it'll actually be
02:34 named CMS - data - template just go
02:37 ahead and upload that folder to your
02:39 server and then rename it to CMS - data
02:43 okay so here we are and we have our site
02:46 design then we have you know our static
02:49 content in there so where do we start
02:51 how do we start implementing the CMS for
02:55 this particular website
02:57 well what I'm gonna do is I'm gonna
03:00 start by building the admin page now
03:03 since all of the pages here have the
03:05 same basic template that we've built
03:06 using partials I'm gonna go ahead and
03:09 just duplicate this home page let's call
03:14 it admin ok let's move it down to the
03:18 bottom here I don't want to have the
03:20 admin page inside the navigation so I'm
03:23 gonna hide that and I'm gonna change the
03:25 folder name to be slash admin ok now
03:29 let's do some cleanup and and remove the
03:31 default content from the home page and
03:33 there we have it I have my basic shell
03:36 for my page from an admin we've uh we've
03:38 hided it from the page menu I've changed
03:41 the folder to be slash admin and we're
03:44 ready to start building our admin page
03:46 out now the first thing we're gonna want
03:48 to do is we're gonna want to add the
03:50 admin course stack to this page since
03:52 this is going to be the admin page for
03:54 our CMS now if you'll notice we have
04:00 three web pages in this project we have
04:03 home about contact now there are some
04:07 other things that are global data like
04:09 the text that's in this footer and the
04:12 icon here and the site title that shows
04:15 up in the menu bar that data is
04:18 basically global across all the pages
04:21 and then we have page specific data such
04:24 as the page specific titles for home
04:26 about in contact and the subtitles okay
04:30 and then a few other things like
04:31 paragraphs and headers and and other
04:33 content that are on those pages so I'm
04:37 gonna create a very simple simplistic
04:40 admin portal here just by creating a tab
04:43 container and having a tab for each page
04:46 in my website so here I've added a
04:49 foundation tab stack and I've made it
04:51 the tab position to be vertical left so
04:53 we have a nice you know tab on the left
04:56 hand side and then we're gonna start
04:58 building out and adding the individual
05:01 admin components for each page here so
05:05 if we head over to the home page let's
05:07 look at some of the components that
05:08 we're gonna want to edit with the CMS so
05:12 we're gonna want to edit the title of
05:14 our page okay and then this little
05:16 subtitle area and then further down we
05:19 have a header and some paragraph and
05:21 then we have some images now it could be
05:25 interesting instead of having three
05:26 static images maybe we add the ability
05:28 to have a gallery and allow our users to
05:31 actually add a gallery to our page now
05:33 just in case you're a hundred percent
05:35 new to the total CMS environment and you
05:38 haven't watched any of the overview
05:39 videos that we have the way that the
05:43 CMAs works is very simple everything is
05:47 tied to a CMS ID what that means is on
05:51 the admin side we assign a admin input
05:54 area an ID and then when we create our
05:58 content side we associate the content to
06:01 that ID as well very simplistic concept
06:04 you have a CMS ID that is tied to both
06:07 content and admin areas and then that's
06:11 how they're tied together so when I
06:13 change it on the admin it automatically
06:15 changes everywhere that that is
06:17 referenced on my site
06:19 so to start things off I'm gonna start
06:21 adding some text admin areas to our
06:25 homepage tab because we want to have our
06:28 page title and that's text right so what
06:33 I'm gonna do here is let's go ahead and
06:35 I'm going to change the CMS ID to be
06:37 home under
06:39 score title okay because it is the title
06:43 for the homepage let's call this page
06:47 title and then for editor I just want a
06:52 simple markdown editor we're gonna turn
06:55 off markdown formatting because we just
06:58 want it to be plain text um and I want
07:02 it to be one line height basically just
07:04 a simple input text box that only has
07:07 you type in the text and that's it right
07:10 for more information about all the
07:12 various editor settings go ahead and
07:14 check out our other videos more in-depth
07:17 videos on each CMAs stack okay but I am
07:20 for the rest of this video just kind of
07:22 go ahead and quickly change some
07:23 settings and hopefully you can follow
07:25 along so your we have page title now I'm
07:29 just gonna copy and paste that below
07:31 because basically now we're gonna want
07:33 to have subtitle okay and we're gonna
07:36 say this is the page subtitle okay and I
07:42 want the same thing just a simple input
07:44 box where we can type in that subtitle
07:47 now if you remember on to the content
07:49 side further down we had a header right
07:52 so let's go ahead and add a home
07:55 underscore header and then let's just
07:58 call that header okay and now I want
08:02 that to be the same thing and then we
08:05 had one more we had that text paragraph
08:07 I so we're gonna go ahead and call this
08:09 home underscore let's call it content
08:12 call this content okay and for this one
08:16 actually I'm gonna use the hip wig
08:17 editor which is kind of our our nice
08:20 fancier WYSIWYG editor says you see now
08:23 we have a nice Home tab and we have a
08:25 few different boxes and we can add a
08:27 little bit of headers and maybe some
08:29 some nice styling formats to make this
08:31 look a little bit nicer
08:32 so here I've gone and just added some
08:34 simple headers to our content to kind of
08:37 break it up so that it's more apparent
08:39 to our user exactly what they're
08:41 modifying on the page now earlier I did
08:44 say that we wanted to add a gallery to
08:46 our home page
08:47 so here I've already added a header but
08:49 let's go ahead and add
08:50 an admin gallery stacked to the page as
08:53 well and I'm gonna go ahead and make the
08:54 CMS ID of this just simply gallery let's
08:59 preview this page you see how it's
09:00 looking now so as we see now we now have
09:02 a much nicer richer admin experience
09:06 here because we know that this is for
09:08 our page header this is our nice content
09:10 area and we have a gallery now you might
09:14 notice we already have images in this
09:15 gallery and the reason for that is
09:18 because I've added that CMS data
09:20 directory to our server earlier on and
09:22 this gallery is a part of the sample
09:25 data that we used and uploaded to the
09:28 server already now before you can
09:30 actually preview your CMS data inside
09:33 rapidweaver
09:34 you're going to need to publish the
09:36 admin page to your server the reason is
09:39 the admin course stack contains the
09:41 entire CMAs application and that
09:45 application needs be on your server in
09:47 order for it to communicate properly and
09:49 preview things inside rapidweaver
09:53 so now that we've built this admin page
09:56 okay you can go ahead and publish that
09:59 to your server now
10:01 we've hidden this admin page from the
10:04 you know general menu so you shouldn't
10:07 need to worry but if you do what we're
10:09 gonna do right now is we're gonna add
10:10 the protect stack to the page to ensure
10:13 that we can password protect our admin
10:15 portals from users now we're going to
10:18 add a protect stack to the page simply
10:20 to password protect our admin portal so
10:22 that when we visit this web page
10:24 we'll have to enter in a password in
10:26 order to unlock and edit any data on our
10:30 websites and I've styled it a little bit
10:32 to make it a little bit more appealing
10:36 now we can simply collapse this stack
10:39 now if you're logged in you're going to
10:41 make sure that you can have the ability
10:43 to log out so what I've done here is
10:46 I've quickly added a log out stack where
10:48 you can add any button that you want and
10:51 when that button is clicked it will
10:52 actually trigger the logout action now
10:55 while I was doing this I also added a
10:57 Save button so that we have a
10:58 centralized Save button for all of our
11:01 CMS data as well again acts
11:04 very similar to logout just simply drag
11:07 out the save stack and then you can add
11:09 any button that you want inside of it
11:11 and that will trigger the save action
11:13 for your CMS content so I've gone ahead
11:16 and published that project file to my
11:19 server and if we go to our admin page
11:22 you'll see that we are now presented
11:24 with a password-protected page if I go
11:27 ahead and enter in the password that we
11:29 configured in the protect settings it
11:34 will then log us into our admin
11:36 interface that we just built so next up
11:40 let's go ahead and do the same thing
11:42 that we did for the home page but for
11:44 the about page the contact page and then
11:47 the site-wide content so if we start
11:51 analyzing the other pages inside this
11:53 rapidweaver project let's look at the
11:55 about page obviously we're gonna want to
11:57 edit the page title and the subtitle
12:00 just like we did on the home page now
12:02 this other content I could potentially
12:05 create admin areas for each header and
12:09 paragraph and image okay for each
12:12 individual section so we'd have one two
12:14 we'd have six text areas and three CMS
12:18 image areas to manage this content but
12:22 what if our customer wanted to add a new
12:24 about us maybe a new team member joined
12:28 the team and they want to add a fourth
12:30 option so what we're gonna do is we're
12:33 actually gonna use a total CMS feed and
12:36 get this same exact layout but using a
12:40 feed when we use a feed we can actually
12:43 figure and add as many of these items as
12:46 we want which is really exciting
12:49 it may be jazz the page up as well maybe
12:51 we can add a video on top of this about
12:54 Us page now if we look at the Contact Us
12:57 page it's pretty simple right we're just
12:59 gonna configure a few text areas here
13:01 the page title and subtitle and maybe
13:03 the ability to change this paragraph I
13:05 think that's all this contact us page
13:07 needs now remember earlier I said that
13:09 there are a few pieces of data that is
13:12 the same across the entire site we have
13:15 this logo that is inside every page
13:17 banner okay we also have the site title
13:20 that is at the top inside top bar on
13:23 every page and then we have some footer
13:26 text that is identical across the entire
13:28 site as well
13:29 so what we're gonna do is we're gonna
13:31 configure two text areas in an image for
13:34 our site wide content so I've added all
13:38 the stacks that we needed to accomplish
13:40 everything here if we notice inside tab
13:43 two for the about Us page I have the
13:45 header section just as we do with the
13:46 home page okay and then I have page
13:49 title and subtitle now remember you're
13:51 gonna want to make sure that we change
13:53 the CMS ID so that these are unique for
13:56 the about Us page so here in the CMS ID
13:59 for the page title I have about
14:01 underscore title and then I also wanted
14:06 to add a video so I added a CMS video
14:09 stack to the page and this I added the
14:12 CMS idea of about underscore video now
14:17 this looks like a text stack but it is
14:18 actually the video the admin video stack
14:22 for the CMS and as I said we're going to
14:25 be adding a feed to the about Us page to
14:28 configure the the areas that we need for
14:32 the about our team section so we have
14:36 two stacks we have the feed form stack
14:38 to submit new feed items and then we
14:41 have the feed list stack that allows us
14:44 to view and delete existing feed items
14:50 then if we scroll further down we'll see
14:53 Tab 3 was our Contact Us page that just
14:55 has a few simple text edit areas and
14:59 then in tab for this was our site wide
15:03 settings so we have our site title our
15:06 footer text and then I added a CMS image
15:10 stack for our logo that is used across
15:13 the entire site now I have made one
15:15 small change inside the admin course
15:17 stack for our feed items because I want
15:21 the ability for our users to add headers
15:23 into the feed I added the style option
15:28 in hip wig so go to admin core
15:31 and under the hip wigs settings go ahead
15:33 and check the style format style option
15:36 so here you'll see that I published the
15:39 admin portal to my server and we have if
15:42 we go to the about page we'll see that
15:44 we have nice options for all the about
15:46 our headers our video where we can paste
15:48 a YouTube URL and then we have our feed
15:51 items that we've added as well if you
15:53 click on one of these you'll see that I
15:55 have the nice image as well as the
15:57 header and paragraph for this particular
16:00 about us feed item if we go to our
16:06 contact page we have some simple text
16:08 edit areas that we said and then for our
16:10 site we have our site white titles
16:12 footer and then our logo that is on
16:14 every page now you probably wondered how
16:18 did all that content get in there well
16:20 so I published the admin page and what I
16:22 did was I took the static content that
16:26 was in my wrap mover project and I saved
16:28 it into the into the CMS online right I
16:32 suggest we do that before we actually
16:35 populate that content inside the project
16:37 file the reason is we have all the data
16:41 saved in the CMS and when we start
16:43 configuring that on our content pages
16:45 the CMS data that is saved will all work
16:48 automatically show up right so um it
16:52 just makes sense to save all that data
16:53 now into the CMS that we've configured
16:56 our admin page so we're gonna wrap up
16:59 this particular video because we've
17:01 already done a lot right we took all of
17:04 our data and analyzed our pages and
17:06 determined exactly what content we
17:08 wanted to be editable online we created
17:12 our admin interface with that nice
17:15 little tabbed interface okay and then we
17:18 populated the CMS with all of the data
17:21 that we wanted now some of this data was
17:24 pre-populated with that sample day that
17:26 we uploaded to the server right so
17:28 particularly the gallery and whatnot
17:30 right but a lot of the other data is
17:32 really specific to this project so we
17:35 actually created new data for all of
17:38 that text areas and the feed and whatnot
17:41 right so watch out go check out the next
17:46 video in the series video number two and
17:48 we're gonna take that data and apply it
17:50 to the actual content pages okay so
17:54 thanks for watching this video and we'll
17:56 see you in video 2 bye"}]