How To Create A Page In Aem

In this tutorial, I will show you how to create a website in CQ5 with step by step detailed explanation of each step.

At the end of this tutorial you will learn:

How to create structure of Website in AEM.
How to create a Template in AEM.
How to create a Rendering Component.
How to create a Page in Site Admin in AEM.

Create Structure of Website in AEM (CQ5):

In this section, we will create a directory structure for the website. Follow below steps to create directory structure for website in AEM (CQ5):

Login into CRXDE Lite. In left panel, navigate to the apps folder.
Right click on apps folder. Select Create and Create Folder .
Enter the name as training(This will be your project name)and click OK.
Tip:-Always provide node name in lower case, because they become part of the URL.
click Save All.
+
Repeat the above process to create a directory structure as follows:

Your basic structure of website is completed.

Create a Template using crxde for your website

A template is used to create a page. To create a page, the templates's content (apps/<application name>/templates/<template name>) must be copied to corresponding position in site tree. This happens automatically when we create a page using AEM.

When we create a template, following information gets saved at node repository:

Label: cq:Template – node name
Title: jcr:title – property
Resource Type: sling:resourceType – property
Ranking:ranking – property
Alowed Paths: allowedPaths – property

In this section, we will create a template in AEM:

Right click the templates folder created in previous section.
click Create > Create Template
Enter following details and click Next:

Name	Value
Label	myTemplate
Title	Content Page Template
Description	This is Simply Cracked Content page template
Resource Type	training/components/myComponent( We need to create a component with same name "myComponent")
Ranking	1(ranking indicates the order in which the template appears on the creation page. Setting rank to 1 ensures that the template appears first in the list.When we create a page from site admin)

create a template in website in cq5 simply-cracked

4. Click the + symbol prided with Allowed Path property. The Allowed Path property defines the path where this template is to be used to create pages. Add the following value : /content(/.*)?

create-a-website-in-cq5-aem-allowed-path-aemcq5tutorials

5. click Next on the Allowed Parent screen.

6. click OK on the Allowed children screen.

7. click Save All.

Note: Test the template created.

Create a Page Rendering Component:

Right click the /apps/training/components folder and click Create -> Create Component.

Enter following details.
Note:The Label name should be same as the resource type that we have give at the time of creating Template. create a component in website in cq5 simply-cracked

create a component in website in cq5 simply-cracked

Name	Value
Label	myComponent
Title	My Custom Component
Description	This is Simply Cracked Content Page Component

Click Nextuntil you reach till last screen. Click OK and click Save All changes.
Notice that the myComponent component is created with a default jsp with the same name as component name myComponent .jsp

Double click on myComponent .jsp and replace the jsp code with below code.

<html> <%@include file="/libs/foundation/global.jsp" %> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <head><title>Welcome to Simply Cracked </title></head> <body> <h1>Welcome to Simply Cracked</h1> <h2>I am your rendering script!!</h2> <cq:include path="par" resourceType="foundation/components/parsys" /> </body> </html>

You have successfully created a page-rendering component.
Note:- global.jsp is used to include default scripts and libraries whereas init.jsp is used to display sidekick in authoring.

Create Pages in AEM :

A page is a place where author create and edit content, which will be viewed by site visitors in publish mode.

In this section we are going to create a basic structure of website and pages in aem.

Log in to AEM SiteAdmin.
Click Websites in the left panel.
Create a folder Click -> New -> New Folder -> Enter name as Simply Cracked.
Click New -> New Page.
Enter the title of the page as Home page( This will be our jcr:title ) .
Enter Name as homepage
Tip: Always provide name in lower case as this will be a part of url.
Select Content Page Template as Template and click Create.
As soon as we create a page siteadmin will push our new page to content folder in crxde.
Double click on Home Page to open it. By default it will open in Touch UI. Move to classic UI by replacing editor.html with cf# in url.
The page will look like a below.