Create new pages from PowerCMS templates

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender

2 ratings | Sign in to rate this tutorial | View comments

next section

What you need to start:

1. Dreamweaver
   
2. A PowerCMS site set up within Dreamweaver
   
3. Web Browser (Chrome, Firefox, Internet Explorer, etc.)

next section

Create the template

The first step in using the using a PowerCMS Template to create new pages, is to create the template that the pages will be based on.

1. Signed into your CMS admin with the Super Admin account
   
2. Choose the green icon from the top of the Content column.
   
3. Enter the name of the template.
   For example, 'BlogPosts'.
   
4. Select the Use as template checkbox.
   
5. Click ADD.

The template is added to PowerCMS like any other page but is distinguished by a different icon.

next section

Add a title content area

Content areas are added to the template just like you would any normal content location (page) in PowerCMS.

1. Choose the template from the Contents column.
   
2. Click the Add Content button located above the existing content areas.
   
3. On the Insert New Content page, click in the Content Area field and enter the content area name.
   For example, 'BlogPostTitle'.
   
4. Click the beautiful Insert button.

You've now successfully created a template for use in PowerCMS.

next section

Create your first CMS page

New pages created under a template will have all the same content areas as the template, but their own unique values for those content areas, allowing you to create multiple pages with the same basic layout, but differing content.

1. Click the green button to the right of your template name.
   
2. On the Add New Page from Template dialog, click in the Content Name field and enter the page name.
   For example, 'Dog Park'.
   
3. Click the Add button.

next section

Editing your content CMS page

This step will populate the newly created content page with some much needed content.

1. Click the Edit link to the right of your title content area name.
   
2. On the Currently editing page, click within the content text editor.
   
3. Enter the Title for your new page.
   For example, 'New Dog Park Opened'.
   
4. Click the Update button to apply the update.
   
5. Click the Edit link to the right of your content area name.
   
6. On the Currently editing page, click within the content text editor.
   
7. There will be some default text in this box, so clear the existing data from the box.
   
8. Enter some text for your first post.
   For example, 'Hello World!' is a classy starter. Lorem Ipsum also looks nice.
   
9. Click the Update button to apply the update.
   
10. Repeat steps 1-9 with different content each time to create 4 pages of content to use later on.

next section

Create your results page

Next up, we're going to show you how to create a results page. This page will dynamically pull all the post titles in from the CMS and display them in a list. Later, we'll make each post title a link to a second page that will display the post's content.

1. In Dreamweaver, make sure your files list is set to the same PHP site we're using for PowerCMS.
   
2. Click File > New in the menu.
   
3. In the New Document window, select the Page from Template tab along the left hand side.
   
4. Select the site used for PowerCMS
   
5. Within the Template for Site list, select the template you are using for your site's design.
   
6. Click Create.
   
7. Save the new page to your site by clicking File > Save As.
   
8. Enter the name for the page in the Save As dialog.
   For example, 'blog-results.php'.
   
9. Click the Save button.
   Now we need to add a recordset to the page so we can pull the PowerCMS content from the database.
   
10. Click Insert > Data Objects > Recordset.
    
    The Recordset dialog might default to the Simple layout. You will need to switch to the advanced layout by clicking the Advanced... button on the right side of the dialog.
    
    
11. Enter the name of your Recordset.
    For example, 'BlogRS'.
    
12. Copy the following code and paste it into the SQL field on the Recordset dialog.
    

    SELECT C2.ContentGroup, C2.ContentPageSetOrder 
    FROM pcms2_contents AS C1 LEFT OUTER JOIN pcms2_contents AS C2 ON C2.ContentPagesetParentID = C1.ContentID 
    WHERE C1.ContentGroup = 'BlogPosts' 
    AND C2.ContentPageSetOrder IS NOT NULL 
    GROUP BY C2.ContentPageSetOrder 
    ORDER BY C2.ContentPageSetOrder DESC

    
    
13. Find the following line in the SQL, and change the text in the single quotes ( in this case it is 'BlogPosts' ) to the name of your PowerCMS template that your set up earlier.
    

    WHERE C1.ContentGroup = 'BlogPosts'

    
    
14. Now click OK to add your shiny new Recordset to the page.
    
15. The next step in our wonderful journey takes us to adding the CMS code to our page.
    
16. Head back to the PowerCMS admin and select the template we created earlier.
    
17. Click the Developer Notes link for the title content area ( which in our case is 'BlogPostTitle' ).
    
18. Copy the code presented at the bottom of the resulting dialog.
    
19. Click Done.
    
20. Return to Dreamweaver, and view the results page.
    
21. Switch to code view for the page, if not already selected.
    
22. Find the content area of the page, and paste the copied code from step 17 into the content area.
    
23. Now, we need to edit this code to display just the titles, so you need to change the following code:
    

    false );

    
    
24. to say
    

    false, $row_BlogRS['ContentPageSetOrder'] );

    
    
    $row_BlogRS is correct if you used our naming examples, but it will be named differently if you named your recordset something else. Change "BlogRS" to the name you used for your recordset if you chose another name.
    
    
25. Click File > Save to save your progress, and preview the page in a browser.
    Notice the title of the last content page you added in PowerCMS is shown, but not the others. Now we need to make the PowerCMS area a repeat region to show all titles of blog posts instead of just one.
    
26. Back in Dreamweaver, switch to design view for the results page we've been working on.
    
27. Select the PHP tag for the PowerCMS code we just added to select the entire PHP region.
    
28. Click Insert > Data Objects > Repeat Region.
    
29. In the resulting dialog, ensure the Recordset selected is the one we created earlier.
    
30. Under the Show option, select All.
    
31. Click OK to apply the Repeat Region.
    
32. Click File > Save to save your progress, and preview the page in a browser.

Now all of your content pages are accounted for!

next section

Create your details page

The time has come to create our details page to display the actual content of each of the posts we've created in PowerCMS. This page will dynamically pull all the post titles and content for the content that was selected on the results page.

1. In Dreamweaver, make sure your files list is set to the same PHP site we're using for PowerCMS.
   
2. Click File > New in the menu.
   
3. In the New Document window, select the Page from Template tab along the left hand side.
   
4. Select the site used for PowerCMS
   
5. Within the Template for Site list, select the template you are using for your site's design.
   
6. Click Create.
   
7. Save the new page to your site by clicking File > Save As.
   
8. Enter the name for the page in the Save As dialog.
   For example, 'blog-details.php'.
   
9. Click the Save button.
   
10. Now return to the results page we created earlier.
    
11. View the Bindings panel. If the panel is not visible, it can be access by clicking Window > Bindings.
    
12. Select the recordset that we created on the results page.
    
13. Click the options button in the Bindings panel ( it looks like a little black arrow pointing down with 4 lines by it ), and click Copy to copy the recordset.
    
14. Return to the details page.
    
15. In the Bindings panel for the details page, click the options button ( again, it looks like a little black arrow pointing down with 4 lines by it ), and click Paste to paste the recordset from the results page.
    You've just copied the recordset over from the results page. It needs to be edited to work on the details page, and we're going to do that now.
    
16. Double click on the recordset in the Bindings panel.
    
17. Now, we need to edit the SQL statement to only pick the blog post that was selected, so you need to change the following code in the SQL field:
    

    AND C2.ContentPageSetOrder IS NOT NULL

    
    
18. to say
    

    AND C2.ContentPageSetOrder = post

    
    
    "post" is a variable that holds the selected post from the results page so the SQL query only pulls the correct data.
    
    
19. Click the button above the variable field on the Recordset dialog.
    
20. On the resulting dialog, enter post in the name field, exactly as it was typed in the SQL query. It needs to match perfectly, or an error will occur.
    
21. Change the Default value field to -1.
    
22. Enter $_GET["ID"] into the Runtime value field.
    
23. Click OK to close the variable dialog and add the variable.
    
24. Click OK again to update the Recordset.
    Now we need to add the CMS code for the title and content areas of our CMS content pages to the details page.
    
25. Back we go to the PowerCMS admin and select the template we created earlier.
    
26. Click the Developer Notes link for the title content area ( which in our case is 'BlogPostTitle' ).
    
27. Copy the code presented at the bottom of the resulting dialog.
    
28. Click Done.
    
29. Return to Dreamweaver, and view the details page.
    
30. Switch to code view for the page, if not already selected.
    
31. Find the content area of the page, and paste the copied code from step 25 into the content area within its own <p> tags.
    
32. Once more unto the breach, dear friends, of the PowerCMS admin and select the template we created earlier.
    
33. Click the Developer Notes link for the main content area ( which in our case is simply called 'Content' ).
    
34. Copy the code presented at the bottom of the resulting dialog.
    
35. Click Done.
    
36. Return to Dreamweaver, and view the details page.
    
37. Switch to code view for the page, if not already selected.
    
38. Find the content area of the page, and paste the copied code from step 33 into the content area within its own <p> tags just under the title <p> tags.
    
39. For both of these freshly pasted CMS content areas, we need to edit the code to show the selected results, so like we did before, change the following code sample:
    

    false );

    
    
40. to say
    

    false, $row_BlogRS['ContentPageSetOrder'] );

    
    
    Like before, $row_BlogRS is correct if you used our naming examples, but it will be named differently if you named your recordset something else. Change "BlogRS" to the name you used for your recordset if you chose another name.
    
    
41. Click File > Save to save your progress.

next section

Add results page links

We now need to edit the results page to turn each CMS content page's title to be a link to the detail page, and make the detail page show the respective content to the selected page.

1. Return to the results page we created earlier.
   
2. In code view, set your cursor just before the beginning of the CMS PHP code chunk.
   
3. Enter the following code before the code chunk to make the link and set a URL variable to the ID:
   

   <a href="blog-details.php?ID=<?php echo $row_BlogRS['ContentPageSetOrder']; ?>">

   
   
   Once again, the details page name, the ID variable, and the $row_BlogRS variable names are correct if you used our naming examples, but it will be named differently if you named them something else. If you used another name, you will need to change the code accordingly.
   
   
4. Add a closing </a> at the end of the CMS PHP code chunk to close off the link.
   
5. Click File > Save to save your progress, and preview the page in a browser.

Now all of your content pages are accounted for!

next section

Adding pagination to the results

Now we are going to add pagination to your results page to make it cleaner if you get a huge number of posts to this nice blog of yours. It's a nice feature to give your site that modern look, and it's pretty easy to implement. I have faith you can do it.

1. In Dreamweaver, view the results page.
   
2. View the Server Behaviors panel. If the panel is not visible, it can be access by clicking Window > Server Behaviors.
   
3. Double click on the Repeat Region server behavior we created earlier on to edit it.
   
4. For this example we're only going to show 2 posts per page, so change the Show field to X options at a time, and change the amount shown to 2.
   
5. Click the OK button to update the repeat region.
   
6. Click Insert > Data Objects > Recordset Paging > Recordset Navigation Bar.
   
7. Ensure the Recordset option is set to the recordset we created on this page ( in this case it is 'BlogRS' ).
   
8. Make sure the Display using option is set to Text
   
9. Click OK to add the navigation to the recordset.
   
10. Click File > Save to save your progress, and preview the page in a browser.

next section

Create a paging details page

Lastly, we are going to create a page that allows you to view the details of a blog post, but also allows you to paginate between the posts one at a time.

1. In Dreamweaver, make sure your files list is set to the same PHP site we're using for PowerCMS.
   
2. Click File > New in the menu.
   
3. In the New Document window, select the Page from Template tab along the left hand side.
   
4. Select the site used for PowerCMS
   
5. Within the Template for Site list, select the template you are using for your site's design.
   
6. Click Create.
   
7. Save the new page to your site by clicking File > Save As.
   
8. Enter the name for the page in the Save As dialog.
   For example, 'blog-all.php'.
   
9. Click the Save button.
   
10. Now return to the results page we created earlier.
    
11. View the Bindings panel. If the panel is not visible, it can be access by clicking Window > Bindings.
    
12. Select the recordset that we created on the results page.
    
13. Click the options button in the Bindings panel ( it looks like a little black arrow pointing down with 4 lines by it ), and click Copy to copy the recordset.
    
14. Return to the blog-all page.
    
15. In the Bindings panel for the blog-all page, click the options button ( again, it looks like a little black arrow pointing down with 4 lines by it ), and click Paste to paste the recordset from the results page.
    
16. Head to the PowerCMS admin and select the template we created earlier.
    
17. Click the Developer Notes link for the title content area ( which in our case is 'BlogPostTitle' ).
    
18. Copy the code presented at the bottom of the resulting dialog.
    
19. Click Done.
    
20. Return to Dreamweaver, and view the blog-all page.
    
21. Switch to code view for the page, if not already selected.
    
22. Just like you did for the other pages, find the content area of the page, and paste the copied code from step 18 into the content area within its own <p> tags.
    
23. For the last time, let's go to the PowerCMS admin and select the template we created earlier.
    
24. Click the Developer Notes link for the main content area ( which in our case is simply called 'Content' ).
    
25. Copy the code presented at the bottom of the resulting dialog.
    
26. Click Done.
    
27. Return to Dreamweaver, and view the blog-all page.
    
28. Switch to code view for the page, if not already selected.
    
29. Find the content area of the page, and paste the copied code from step 25 into the content area within its own <p> tags just under the title <p> tags.
    
30. To spruce up these CMS content areas, we need to edit the code to show the selected results, so like we did before, change the following code sample:
    

    false );

    
    
31. to say
    

    false, $row_BlogRS['ContentPageSetOrder'] );

    
    
    Like before, $row_BlogRS is correct if you used our naming examples, but it will be named differently if you named your recordset something else. Change "BlogRS" to the name you used for your recordset if you chose another name.
    
    
32. Now select all the CMS PHP code you inserted into the page.
    
33. Click Insert > Data Objects > Repeat Region.
    
34. In the resulting dialog, ensure the Recordset selected is the one we created earlier.
    
35. Under the Show option, we only want to show one record at a time, so change the Show field to X options at a time, and change the amount shown to 1.
    
36. Click OK to apply the Repeat Region.
    
37. Click Insert > Data Objects > Recordset Paging > Recordset Navigation Bar.
    
38. Ensure the Recordset option is set to the recordset we created on this page ( in this case it is 'BlogRS' ).
    
39. Make sure the Display using option is set to Text
    
40. Click OK to add the navigation to the recordset.
    
41. Click File > Save to save your progress, and preview the page in a browser.

What to do next...

Well done! you have now created a basic dog park blog for your site! Now you can create more normal blogs, or create the cat park blog you've always wanted.

For a greater challenge, try adding more content areas to your details page, or creating a search feature for your results page!

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

2 ratings | Sign in to rate this tutorial