Creating a sample component & template in AEM 6.4

Here we will understand how to create a sample component, the template in AEM 6.4. Below given the steps explained in this tutorial.
· Create a template in AEM 6.4
· Create a page from the template in AEM 6.4
· Create a component in AEM 6.4
· Author the component in AEM 6.4
· publish the page and test in AEM 6.4

Template basics in AEM 6.4:
There are 2 types of AEM templates in AEM 6.4, Editable Templates and Static Templates

i) Editable Templates
Now the AEM expects template creation as a combined job of template authors, admin, and developer. The editable templates can be created and edited by template authors using the Template console and editor.

ii) Static Templates
The normal way of developing a template. These are developed purely by developers, they cannot be created or edited by authors.

Is there any difference in using editable and static templates while authoring a page?
No. There is no difference and no indication between static and editable templates while creating a page.

Here I will be explaining about working with editable templates.

A template will have the below features.
· Structure - Predefined content that cannot be changed on pages created with the template.
· Initial Content - Predefined content that can be changed on pages created with the template.
· Layout - Helps to the author for a range of devices by defining various layouts.
· Styles - Define the styles to be used with the template and its components.

What is a component?
Components are modular units that realize specific functionality to present the content on a website. They are re-usable.

There are two sets of Adobe-provided AEM components available; Core Components & Foundation Components.

Core Components: Core components are known for flexibility and feature-rich authoring functionality. Core Components were introduced to provide robust and extensible base components.

Features:
-Core components make page authoring more flexible and customizable.
-Built on the latest technology and best practices.
-Extending them to offer custom functionality is simple for the developer.

Examples of AEM 6.4 core components are,
· Breadcrumb
· Form Button
· Form Container
· Content Fragment
· Form Hidden
· Form Options
· Form Text
· Image
· Language Navigation
· List
· Navigation
· Page
· Quick Search
· Social Media Sharing
· Text
· Title

Foundation Components: Out-of-the-box components, which form a subset of the components. Available for a standard installation of AEM.

Note: Foundation components are based on legacy technologies but are no longer enhanced, so the new way is core components.

There are 3 types of foundation components.
· General: For eg. Adaptive Image, Carousel, List
· Columns: For eg. 2 Columns, 3 Columns, Column Control
· Form: For eg. Form (component), Account Name, Address, File Upload, Image Upload