View source for Drupal/C4/Creating-a-simple-custom-module/English-timed


{| border = 1
|  <center>Time</center>
|  <center>Narration</center>

|-
| 00:01
|  Welcome to the spoken tutorial on''' Creating a simple custom module'''.

|-
|  00:06
|  In this tutorial, we will learn to-  Create a basic '''module'''

|-
| 00:11
|   Add a basic '''controller''' and

|-
| 00:13
|   Add a '''routing''' file

|-
|  00:15
|  To record this tutorial, I am using  '''Ubuntu Linux 16.04''' 

|-
| 00:21
|   '''Drupal 8 ''',   '''Firefox web browser '''and  '''Gedit text editor'''

|-
| 00:27
|  You can use any text editor and web browser of your choice.

|-
|  00:32
|  To practise this tutorial, you should have basic knowledge of''' Drupal'''.

|-
| 00:38
|  If not, for relevant''' Drupal''' tutorials, please visit the link shown.

|-
| 00:43
|  To create a '''custom module''' in '''Drupal''', you should be familiar with

'''Object oriented programming terminology'''

|-
| 00:51
|   Programming in '''PHP''' 

|-
| 00:53
|   '''Namespacing''' in '''PHP '''and

|-
| 00:55
|   '''Symfony 2'''

|-
| 00:57
|  For details of pre-requisites, please see the “'''Additional reading material'''” link of this tutorial. 

|-
|  01:04
|  We have already learnt about '''contributed modules '''earlier.

|-
| 01:08
|  Now we will learn to create a simple '''custom module'''.

|-
| 01:12
|  This '''module '''will create a '''custom page '''showing “'''hello world'''”.

|-
| 01:17
|  Here is the '''workflow '''of this '''module'''. 

|-
| 01:20
|  The '''Request''' is what we request to the website.

|-
| 01:24
|  '''Router''' determines what should be done with the '''request'''.

|-
| 01:29
|  The '''controller''' builds the response for the given '''request'''.

|-
| 01:33
|  The '''View''' creates the response.

|-
| 01:36
|  The '''response''' is what the website returns. 

|-
|  01:40
|  Here is the file structure of the '''custom module''' which we are going to create.

|-
|  01:45
|  Let us start creating the files required for a '''custom module'''.

|-
| 01:50
|  Open your '''File browser.'''

|-
|  01:52
|  Go to the folder where we have installed '''Drupal''' locally.

|-
|  01:57
|  Now go to '''apps -> drupal -> htdocs -> modules '''folder'''.'''

|-
| 02:03
|  We have to always create our''' custom modules''' inside this '''modules''' folder.

|-
|  02:09
|  Let’s create a folder and name it as '''custom'''.

|-
| 02:13
|  This will separate our '''custom modules''' from the '''contributed modules'''. 

|-
|  02:18
|  Inside this '''custom''' folder, we will create a folder called '''hello_world'''. 

|-
|  02:25
|  This folder name is the '''machine name. '''

|-
| 02:28
|  It will be used by '''core''' '''Drupal''', to refer to this '''module'''.

|-
|  02:33
|  There are some rules to follow when naming a '''custom module'''.

|-
| 02:37
|   It must contain only lower-case letters, underscores but no spaces. 

|-
| 02:43
|   It must be unique and cannot have the same short name as any other module or theme

|-
| 02:50
|   It cannot have any reserved terms such as '''src, lib, vendor, templates, includes, fixtures, '''etc.

|-
| 03:00
|  Switch back to our file browser

|-
| 03:03
|  Inside this '''hello_world '''folder, we will create a file called '''hello_world '''with '''info.yml '''extension'''.'''

|-
| 03:13
|  The name of the '''info.yml''' file and the name of the '''module''' folder should be the same.

|-
|  03:20
|  '''Yml''' is the file extension of '''YAML'''.

|-
| 03:24
|  '''YAML''' is a unicode based data serialization standard for all programming languages.

|-
| 03:31
|  It is a human-readable language.

|-
| 03:34
|  This '''info.yml '''file is to tell '''Drupal''' about our '''module'''.

|-
| 03:40
|  In this file, we will store the '''metadata''' of our '''module'''.

|-
| 03:44
|  So type the following '''metadata'''.

|-
|  03:47
|  Let's  save this file.

|-
|  03:49
|  This is the title of our '''module''' which will be shown on the '''extend''' page.

|-
|  03:54
|  This is a small description of our '''module'''.

|-
| 03:58
|  This is what category our '''module''' will be listed under on the '''extend''' page.

|-
|  04:04
|  This is to tell '''Drupal''' that we are making a '''module.'''

|-
|  04:08
|  The '''core key''' specifies the version of '''Drupal core''' that our '''module''' is compatible with.

|-
|  04:15
|  Here '''name''', '''type''' and '''core keys''' are required. Other '''keys''' can be ignored.

|-
|  04:21
|  Next, we will create a file called '''hello_world''' with '''module''' extension.

|-
| 04:28
|  For this demonstration, we are not going to add any functionality in this file. 

But we just need to create this file.

|-
| 04:37
|  In this file, type the following.

|-
|  04:39
|  Let us save the file.

|-
|  04:41
|  These are the two files '''Drupal''' requires to create a '''module'''.

|-
|  04:46
|  Now we will install this '''module''' in our website.

|-
| 04:50
|  Open our local '''Drupal''' website.

|-
| 04:53
|  Before installing the new '''module''', we will clear the '''cache '''first.

|-
| 04:58
|  To do that, click on the '''Configuration '''menu'''.'''

|-
| 05:01
|  Under '''Development''', click on the '''Performance '''option'''.'''

|-
|  05:05
|  Now click on the '''Clear all caches''' button.

|-
| 05:08
|  You can see that the '''caches''' are cleared.

|-
| 05:11
|  It is compulsory to clear the '''caches''' every time we modify our website.

|-
| 05:17
|  Now to install the '''module''', click on the '''Extend '''menu and scroll down.

|-
| 05:23
|  Under '''Custom''', you can see the '''Hello World module '''which we created just now.

|-
|  05:28
|  Click on it to select.

|-
| 05:30
|  Click on the '''Install''' button at the bottom.

|-
| 05:33
|  Our''' custom module''' is enabled now.

|-
|  05:36
|  Next, we have to add the''' router file'''. 

|-
| 05:40 
| This is to tell '''Drupal''' where the '''module''' can be accessed from. 

|-
| 05:44
|  The '''router''' determines what should be done with the '''request'''.

|-
| 05:48
|  The '''router''' also checks if the access is permitted.

|-
|  05:53
|  Switch back to our '''File browser'''.

|-
|  05:55
|  Now we will create the routing file called '''hello_world.routing.yml'''

|-
|  06:03
|  Type the following inside the routing file. Let us understand the code.

|-
| 06:08
|  This line is the '''route'''.

|-
| 06:10
|  This indicates what path will be used to access our '''module'''.

|-
| 06:15
|  This is to tell '''Drupal''' where to get the '''content''' from. 

|-
| 06:20
|  Here '''content''' is the '''function '''which we will create in the '''controller '''file.

|-
| 06:25
|  This is to ensure only users who can access '''content,''' will be able to see our '''Hello World '''page.

|-
|  06:33
|  Next we should add the functionality about what this '''module '''is going to do.

|-
| 06:38
|  This is done by adding a '''controller'''.

|-
| 06:41
|  What is a '''controller'''? '''Controller''' is a '''PHP function. '''

|-
| 06:46
|  It takes information from the '''HTTP request '''and constructs and returns an '''HTTP response'''.

|-
| 06:54
|  Switch back to our '''File browser'''.

|-
|  06:56
|  To add a '''controller''', we should create a folder named '''src '''here. 

|-
|  07:02
|  Inside the '''src''' folder, we should create another folder named '''Controller'''. 

|-
|  07:07
|  Inside this '''Controller''' folder, we will create the controller file called '''HelloController.php'''

|-
|  07:15
|  Inside this file, type the following.

|-
|  07:18
|  Now save the file.

|-
|  07:20
|  The '''namespace''' allows to place a bunch of code under a name, to avoid naming conflicts.

|-
| 07:28
|  This '''use statement''' will import the '''ControllerBase class'''.

|-
| 07:32
|  We have a '''class HelloWorldController '''with the function '''content.''' 

|-
| 07:38
|  It will return the markup text when the routing system invokes the page.

|-
|  07:43
|  Now switch to the web browser.

|-
| 07:46
|  Click on the''' Back to site '''button.

|-
| 07:48
|  Add '''hello '''in the address bar as a '''request''' to the web browser. 

|-
| 07:53
|  This is the path we created in the routing file to access our '''module'''. 

Now press''' Enter.'''

|-
| 08:00
|  We can see our custom page which we created just now. This is the '''response'''.

|-
|  08:07
|  Likewise, we can create other simple '''custom modules''' in '''Drupal 8'''.

|-
|  08:13
|  With this, we come to the end of this tutorial.

|-
|  08:16
|  Let us summarize. In this tutorial, we have learnt to-

Create a basic '''module''', Add a basic '''controller''',  Add a '''routing''' file

|-
| 08:27
|  As an assignment, create a''' custom module''' for “'''About us'''” page of your website.

|-
|  08:33
|  The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

|-
| 08:41
|  The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

|-
|  08:49
|  Spoken Tutorial Project is funded by  NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.

|-
|  09:00
|  This is Priya from IIT Bombay signing off. Thanks for joining.

|}