Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- WEBVTT
- 00:00:00.000 --> 00:00:04.727
- (whooshing sound)
- 00:00:04.727 --> 00:00:06.287
- Hello
- 00:00:06.287 --> 00:00:09.200
- and welcome to this introduction to October
- 00:00:09.200 --> 00:00:10.989
- October is a CMS
- 00:00:10.989 --> 00:00:12.648
- built using PHP
- 00:00:12.648 --> 00:00:14.971
- and is based on the Laravel framework
- 00:00:14.971 --> 00:00:17.151
- the reason we made October
- 00:00:17.151 --> 00:00:20.111
- was because we had a lot of frustration with systems
- 00:00:20.111 --> 00:00:23.151
- that seem to get more complicated every year
- 00:00:23.151 --> 00:00:26.892
- So we built a platform that gets back to the basics of Web Development
- 00:00:26.892 --> 00:00:28.691
- and is also fun to use!
- 00:00:28.691 --> 00:00:31.951
- We've been working really hard on this, so I hope you enjoy it
- 00:00:31.951 --> 00:00:35.171
- This is the back-end interface for October
- 00:00:35.171 --> 00:00:38.611
- You might notice it is a very clean and simple interface
- 00:00:38.611 --> 00:00:41.211
- Devoid of any unnecessary clutter
- 00:00:41.211 --> 00:00:44.033
- At the top there is the Main Menu
- 00:00:44.033 --> 00:00:47.191
- and below to the left, there is the Sub Menu
- 00:00:47.191 --> 00:00:51.811
- This is an expansion on the selected main menu item
- 00:00:51.811 --> 00:00:53.471
- Which is the CMS
- 00:00:53.471 --> 00:00:55.971
- The rest of this content area here
- 00:00:55.971 --> 00:00:59.351
- is free to be used by any of the back-end pages
- 00:00:59.351 --> 00:01:03.732
- Now I'd like to demonstrate some of the features of the CMS
- 00:01:03.732 --> 00:01:05.731
- The first being Pages
- 00:01:05.731 --> 00:01:09.331
- Pages hold the content for each website URL
- 00:01:09.331 --> 00:01:11.011
- So let's create a new one
- 00:01:11.011 --> 00:01:13.671
- We'll call this page "Home"
- 00:01:13.671 --> 00:01:16.691
- As it is the first page we'd like people to see
- 00:01:16.691 --> 00:01:18.751
- when first opening the website
- 00:01:18.751 --> 00:01:21.151
- We'll give it a URL of just slash
- 00:01:21.151 --> 00:01:24.311
- We'll enter some content in the Markup area
- 00:01:24.311 --> 00:01:26.832
- and click "Save" to create this page
- 00:01:26.832 --> 00:01:29.392
- Now that the page exists
- 00:01:29.392 --> 00:01:31.332
- We can preview it in the browser
- 00:01:31.332 --> 00:01:33.052
- by clicking the "Preview" button
- 00:01:33.052 --> 00:01:36.072
- There you can see the content for this page
- 00:01:36.072 --> 00:01:38.791
- You might notice this page looks plain
- 00:01:38.791 --> 00:01:40.971
- That's because it is missing a Layout
- 00:01:40.971 --> 00:01:43.211
- and that moves us to the next feature
- 00:01:43.211 --> 00:01:46.511
- Layouts define the page scaffold
- 00:01:46.511 --> 00:01:49.871
- that is, everything that repeats on a page
- 00:01:49.871 --> 00:01:51.631
- like a Header and a Footer
- 00:01:51.631 --> 00:01:54.683
- So let's create a new Layout
- 00:01:54.683 --> 00:01:58.071
- We will call this layout "basic"
- 00:01:58.071 --> 00:02:02.031
- and it can have a description of "A basic layout"
- 00:02:02.031 --> 00:02:06.051
- I'll enter some content in the markup area
- 00:02:06.051 --> 00:02:08.551
- Then we'll click "Save" to create the Layout
- 00:02:08.551 --> 00:02:12.091
- Now if we return to the page we created before
- 00:02:12.091 --> 00:02:16.091
- You can see we can now select this layout
- 00:02:16.091 --> 00:02:20.891
- Let's Save and Preview the page in the browser again
- 00:02:20.891 --> 00:02:24.332
- Now there is a Stylesheet that has been applied to this page
- 00:02:24.332 --> 00:02:27.371
- and it also has a Header and a Footer
- 00:02:27.371 --> 00:02:30.553
- The next feature I'd like to show you
- 00:02:30.553 --> 00:02:31.993
- is called Partials
- 00:02:31.993 --> 00:02:36.053
- Partials contain reusable chunks of HTML markup
- 00:02:36.053 --> 00:02:38.411
- that can be used anywhere throughout the site
- 00:02:38.411 --> 00:02:41.091
- So we might like to create a new Partial
- 00:02:41.091 --> 00:02:42.411
- that contains some links
- 00:02:42.411 --> 00:02:44.531
- that we can use in various places
- 00:02:44.531 --> 00:02:46.611
- We'll name this Partial "links"
- 00:02:46.611 --> 00:02:49.351
- and enter a description "Some links"
- 00:02:49.351 --> 00:02:52.511
- I'll paste the links in the Markup area
- 00:02:52.511 --> 00:02:56.083
- and click "Save" to create the Partial
- 00:02:56.083 --> 00:02:59.711
- Now we can place these links anywhere
- 00:02:59.711 --> 00:03:02.431
- So let's place them on the Homepage
- 00:03:02.431 --> 00:03:06.031
- We do that by using the "partial" tag
- 00:03:06.031 --> 00:03:09.612
- Along with the name of the partial we created
- 00:03:09.612 --> 00:03:11.771
- In this case it's called "links"
- 00:03:11.771 --> 00:03:13.852
- So if we Save this page
- 00:03:13.852 --> 00:03:15.871
- Then Preview it in the browser again
- 00:03:15.871 --> 00:03:18.371
- You can see that the links appear
- 00:03:18.371 --> 00:03:22.011
- Partials also carry a secondary feature
- 00:03:22.011 --> 00:03:24.891
- And that is, they can be updated dynamically
- 00:03:24.891 --> 00:03:26.631
- via the AJAX Framework
- 00:03:26.631 --> 00:03:28.591
- I'll show you how that works
- 00:03:28.591 --> 00:03:30.611
- But before I do
- 00:03:30.611 --> 00:03:33.351
- I'm going to switch my mode of development
- 00:03:33.351 --> 00:03:36.191
- To point out that October is not just interface driven
- 00:03:36.191 --> 00:03:38.151
- It's also file based
- 00:03:38.151 --> 00:03:40.571
- We're using a Text editor now
- 00:03:40.571 --> 00:03:43.671
- If you remember the Homepage we created earlier
- 00:03:43.671 --> 00:03:46.533
- It can be found in the "pages" directory
- 00:03:46.533 --> 00:03:49.811
- Along with the Layout we created called "basic"
- 00:03:49.811 --> 00:03:51.331
- In the "layouts" directory
- 00:03:51.331 --> 00:03:53.871
- and the Partial called "links"
- 00:03:53.871 --> 00:03:55.291
- in the "partials" directory
- 00:03:55.291 --> 00:03:57.571
- All of the settings that we used
- 00:03:57.571 --> 00:03:59.611
- are retained at the top of the file
- 00:03:59.611 --> 00:04:01.631
- called the Configuration section
- 00:04:01.631 --> 00:04:05.431
- This is useful when collaborating with other developers
- 00:04:05.431 --> 00:04:08.271
- in a Version Control system, like Git
- 00:04:08.271 --> 00:04:10.831
- Returning now to the next feature
- 00:04:10.831 --> 00:04:12.391
- The AJAX Framework
- 00:04:12.391 --> 00:04:15.551
- October comes with an AJAX Framework baked in
- 00:04:15.551 --> 00:04:18.351
- that allows the page to be updated dynamically
- 00:04:18.351 --> 00:04:22.191
- I'll show you how this works by creating a simple calculator
- 00:04:22.191 --> 00:04:26.131
- The first thing we need to do is create a new page
- 00:04:26.131 --> 00:04:27.731
- So let's add a new file
- 00:04:27.731 --> 00:04:29.251
- under the "pages" directory
- 00:04:29.251 --> 00:04:31.991
- We'll call this file "calc.htm"
- 00:04:31.991 --> 00:04:34.691
- Then we need to give the page a URL
- 00:04:34.691 --> 00:04:37.291
- We'll give it the URL of "calc"
- 00:04:37.291 --> 00:04:39.991
- and we can also assign it with a Layout
- 00:04:39.991 --> 00:04:42.611
- We'll use the Layout we created before called "basic"
- 00:04:42.611 --> 00:04:45.131
- We then terminate the configuration section
- 00:04:45.131 --> 00:04:46.911
- by using two equal signs
- 00:04:46.911 --> 00:04:49.431
- Now I'm going to paste in the form
- 00:04:49.431 --> 00:04:51.511
- that we're going to use for our calculator
- 00:04:51.511 --> 00:04:53.411
- As you can see
- 00:04:53.411 --> 00:04:55.331
- this form has three inputs
- 00:04:55.331 --> 00:04:56.731
- and a "Submit" button
- 00:04:56.731 --> 00:04:58.831
- The first input is a value
- 00:04:58.831 --> 00:05:01.171
- The second input is an operation
- 00:05:01.171 --> 00:05:03.571
- And the third input is a another value
- 00:05:03.571 --> 00:05:05.591
- When we hit the "Go" button
- 00:05:05.591 --> 00:05:08.372
- We're going to apply a calculation from "value1"
- 00:05:08.372 --> 00:05:09.753
- to "value2"
- 00:05:09.753 --> 00:05:12.873
- Below the form we have a result section
- 00:05:12.873 --> 00:05:15.073
- This will be the Partial
- 00:05:15.073 --> 00:05:17.193
- that contains our calculation result
- 00:05:17.193 --> 00:05:19.253
- Notice inside the <form> tag
- 00:05:19.253 --> 00:05:21.733
- we have these non-standard attributes
- 00:05:21.733 --> 00:05:23.373
- that begin with the word "data"
- 00:05:23.373 --> 00:05:25.693
- These tell the AJAX Framework
- 00:05:25.693 --> 00:05:27.613
- that when we submit this form
- 00:05:27.613 --> 00:05:29.733
- we'd like to do it using JavaScript
- 00:05:29.733 --> 00:05:31.413
- Without the page refreshing
- 00:05:31.413 --> 00:05:33.793
- The first tag "data-request"
- 00:05:33.793 --> 00:05:36.073
- defines the AJAX event handler
- 00:05:36.073 --> 00:05:39.793
- This is a function name used to process the form data
- 00:05:39.793 --> 00:05:41.293
- and produce a result
- 00:05:41.293 --> 00:05:43.653
- In this case, it's called "onTest"
- 00:05:43.653 --> 00:05:46.693
- The second tag "data-request-update"
- 00:05:46.693 --> 00:05:48.991
- says 'once the request has finished'
- 00:05:48.991 --> 00:05:51.431
- 'we should update an element on the page'
- 00:05:51.431 --> 00:05:52.971
- 'with a specific partial'
- 00:05:52.971 --> 00:05:56.771
- In this case we want to update using the "calcresult" Partial
- 00:05:56.771 --> 00:06:00.451
- an element on the page with the identifier "result"
- 00:06:00.451 --> 00:06:02.792
- At the moment this element doesn't exist
- 00:06:02.792 --> 00:06:05.484
- So I'm going to add it...
- 00:06:05.484 --> 00:06:08.352
- ...
- 00:06:08.352 --> 00:06:11.332
- Now we should create the event handler used by this form
- 00:06:11.332 --> 00:06:14.651
- We do that by adding another section to this page
- 00:06:14.651 --> 00:06:16.791
- called the PHP Code section
- 00:06:16.791 --> 00:06:20.011
- Here we define our event handler called "onTest"
- 00:06:20.011 --> 00:06:23.551
- You can see in the code here
- 00:06:23.551 --> 00:06:25.611
- it processes our form data
- 00:06:25.611 --> 00:06:27.151
- and produces a result
- 00:06:27.151 --> 00:06:30.351
- The result is made available to the next page cycle
- 00:06:30.351 --> 00:06:32.611
- as the variable called "answer"
- 00:06:32.611 --> 00:06:35.291
- This will be used by our Partial
- 00:06:35.291 --> 00:06:37.011
- to display the result
- 00:06:37.011 --> 00:06:39.551
- All that remains to do now is to create our Partial
- 00:06:39.551 --> 00:06:41.931
- We'll do that by creating a new file
- 00:06:41.931 --> 00:06:43.391
- in the "partials" directory
- 00:06:43.391 --> 00:06:46.323
- We'll call this partial "calcresult.htm"
- 00:06:46.323 --> 00:06:49.811
- As you can see in the Markup here
- 00:06:49.811 --> 00:06:53.531
- The first thing we do is check for an "answer" variable
- 00:06:53.531 --> 00:06:56.151
- This variable is supplied to this Partial
- 00:06:56.151 --> 00:06:59.591
- by the "onTest" event handler we created earlier
- 00:06:59.591 --> 00:07:02.191
- If the "answer" variable exists
- 00:07:02.191 --> 00:07:03.711
- we'll display it to the user
- 00:07:03.711 --> 00:07:06.672
- Otherwise we'll display a friendly message
- 00:07:06.672 --> 00:07:08.692
- to say 'Click the Go button'
- 00:07:08.692 --> 00:07:10.712
- Switching modes again now
- 00:07:10.712 --> 00:07:14.012
- Let's see how the calculator looks in the back-end
- 00:07:14.012 --> 00:07:19.571
- As you can see, the calculator we created is now in page list
- 00:07:19.571 --> 00:07:21.692
- Let's click it and have a look
- 00:07:21.692 --> 00:07:26.024
- Let's also close some of these form areas
- 00:07:26.024 --> 00:07:27.952
- to make some more room
- 00:07:27.952 --> 00:07:30.872
- All the Markup we created for our calculator is here
- 00:07:30.872 --> 00:07:32.292
- as expected
- 00:07:32.292 --> 00:07:35.113
- The event handler in the PHP Code section
- 00:07:35.113 --> 00:07:37.473
- can be found in the Code tab
- 00:07:37.473 --> 00:07:41.753
- We can also check for our Partial "calcresult"
- 00:07:41.753 --> 00:07:44.351
- By looking the Partials area
- 00:07:44.351 --> 00:07:46.343
- There it is, let's have a look
- 00:07:46.343 --> 00:07:49.451
- All the Markup is there
- 00:07:49.451 --> 00:07:52.431
- So finally, let's preview our page
- 00:07:52.431 --> 00:07:54.663
- ...
- 00:07:54.663 --> 00:07:57.239
- Here is the AJAX calculator
- 00:07:57.239 --> 00:07:58.918
- Let's try it
- 00:07:58.918 --> 00:08:02.519
- We enter two values and click "Go"
- 00:08:02.519 --> 00:08:06.919
- and you can see the result is shown, without refreshing the page
- 00:08:06.919 --> 00:08:08.919
- If we change the operator
- 00:08:08.919 --> 00:08:11.219
- we should get a different result
- 00:08:11.219 --> 00:08:14.179
- That's the power of the AJAX Framework feature
- 00:08:14.179 --> 00:08:16.141
- You can update the page dynamically
- 00:08:16.141 --> 00:08:19.141
- and easily, with almost no knowledge of JavaScript
- 00:08:19.141 --> 00:08:22.181
- The final thing I want to demonstrate
- 00:08:22.181 --> 00:08:23.761
- is my favorite feature
- 00:08:23.761 --> 00:08:25.104
- called Components
- 00:08:25.104 --> 00:08:28.444
- Components are an extensible feature to October
- 00:08:28.444 --> 00:08:30.204
- They're provided by Plugins
- 00:08:30.204 --> 00:08:32.304
- and are essentially building blocks
- 00:08:32.304 --> 00:08:34.764
- that can be attached to any Page or Layout
- 00:08:34.764 --> 00:08:37.104
- They provide rich functionality
- 00:08:37.104 --> 00:08:38.924
- like the calculator example
- 00:08:38.924 --> 00:08:40.884
- but with only a small amount of markup
- 00:08:40.884 --> 00:08:43.204
- Let's try out this demo Component
- 00:08:43.204 --> 00:08:45.324
- provided by the October Demo Plugin
- 00:08:45.324 --> 00:08:47.104
- It's a "To do" List
- 00:08:47.104 --> 00:08:48.824
- and we'll need a page to use it on
- 00:08:48.824 --> 00:08:50.564
- Let's do that first
- 00:08:50.564 --> 00:08:52.724
- We'll call this page "To Do"
- 00:08:52.724 --> 00:08:55.724
- To attach the component to the page
- 00:08:55.724 --> 00:08:57.584
- We simply click on it
- 00:08:57.584 --> 00:08:59.804
- Each Component uses an Inspector
- 00:08:59.804 --> 00:09:02.064
- with unique properties that can be set
- 00:09:02.064 --> 00:09:04.964
- In this case the list has an alias
- 00:09:04.964 --> 00:09:07.846
- which is a unique name given to the Component
- 00:09:07.846 --> 00:09:09.846
- when using it on the Page or Layout
- 00:09:09.846 --> 00:09:13.666
- It also has a "maximum amount of items" allowed
- 00:09:13.666 --> 00:09:16.664
- We'll leave the default alias as "demoTodo"
- 00:09:16.664 --> 00:09:19.424
- But we'll change the maximum items to "3"
- 00:09:19.424 --> 00:09:22.264
- The Component can then be rendered on the page
- 00:09:22.264 --> 00:09:24.144
- using the "component" tag
- 00:09:24.144 --> 00:09:27.784
- and also the alias, which is "demoTodo"
- 00:09:27.784 --> 00:09:30.944
- This will render the component on the page
- 00:09:30.944 --> 00:09:32.868
- The reason this is my favorite feature
- 00:09:32.868 --> 00:09:35.164
- is because that's the only thing required
- 00:09:35.164 --> 00:09:39.951
- If we Save this page, we can immediately Preview it in the browser
- 00:09:39.951 --> 00:09:41.291
- ...
- 00:09:41.291 --> 00:09:43.845
- This time, instead of having a calculator
- 00:09:43.845 --> 00:09:45.365
- we have a "To Do" list!
- 00:09:45.365 --> 00:09:46.745
- So let's try it!
- 00:09:46.745 --> 00:09:50.365
- I might want to 'Read some more documentation'
- 00:09:50.365 --> 00:09:55.765
- And of course, 'Install my copy of October'
- 00:09:55.765 --> 00:09:58.305
- ...
- 00:09:58.305 --> 00:09:59.905
- As you can see
- 00:09:59.905 --> 00:10:02.885
- I have effortlessly added this functionality to the page
- 00:10:02.885 --> 00:10:05.345
- using the power of Components
- 00:10:05.345 --> 00:10:09.065
- That concludes this demonstration of October's core features
- 00:10:09.065 --> 00:10:12.545
- You can look out for more screencasts with more in-depth details
- 00:10:12.545 --> 00:10:15.526
- I hope you enjoy using October as much as we do!
- 00:10:15.526 --> 00:10:16.886
- Good-bye!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement