Skip to content

Instantly share code, notes, and snippets.

@daftspunk

daftspunk/screencast-introduction

Created December 19, 2014 03:17
Show Gist options
  • Save daftspunk/a84d334208513e13a2e4 to your computer and use it in GitHub Desktop.
Save daftspunk/a84d334208513e13a2e4 to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to October
Raw
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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment