Introduction to October

screencast-introduction

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!