How to create your website from scratch using Orchard CMS. Part 1. Introduction to Orchard CMS (continued)

^{this is the continuation of the article, start reading at this address}
In the first part of the introduction to the Orchard CMS content management system, we got acquainted with the system and in a matter of minutes downloaded and launched the first site. We learned how to automatically download and deploy Orchard using the WebMatrix development tool.

Here is the continuation of the guide, in which we will get acquainted with the Orchard CMS control panel, make the first setup of the site, select the site theme, work with the code and database, analyze the site for potential problems and automatically publish the site on the server .

Let me remind you that automatic download of Orchard is available from the application galleryusing the Web Platform Installer Web Access Tool (click this link to start the installation ).

Office Orchard CMS

The loaded page of the Orchard CMS base project is a nice, light and simple site with a title, navigation bar, four text blocks and a “footer”, which has a Dashboard link to the project administration panel.

Content Editing

Notice that each text block has an Edit element in the upper right corner. This property allows you to quickly change the contents of blocks. If you click on Edit at the first block, you will be taken to the content editing page in the administration panel (Figure 1.14).


Fig. 1.14. Editing the contents of a block in the administration panel

Use the editor and change the title and contents of the text block and click Publish Now. You will see that the new content immediately reflected on your page.

Now go from the main page of the site back to the administration panel via the Dashboard link in the basement. You will see the welcome page of the administration panel (Figure 1.15).

Adding a New Page

As we know, creating a convenient administration panel was one of the important goals of the Orchard CMS developers. Today this panel has a very rich functionality and allows you to solve all the problems facing the content management tool:

• create and delete pages, sections, blogs;
• edit content, download and manage media content;
• load modules and manage installed modules;
• apply themes;
• manage widgets;
• Manage roles and users
• configure a lot of system parameters;
• and much more…

Fig. 1.15. Welcome page of the Orchard admin panel

As an introduction to the administration panel, click on the Page link in the New section. In the editor that appears, you can create a new page for your site. Enter the title and some content on the page. Pay attention to the generated link for your site. Remember it, and if you want, change it (Figure 1.16).


Fig. 1.16 Title and link for a new page

After that, click the Publish Now button to create and publish a new page on the site. You will receive a notification about the successful creation of the page (Fig. 1.17).


Fig. 1.17. New Page Success Notification

Now click on the Navigation link to create a navigation element to our new page. Enter the data in the lower fields in the Add New Item section: the display text in the navigation field, the position in turn in the navigation field and the link to our page (with a slash in front) (Figure 1.18).


Fig. 1.18. Establishing a new navigation item

Click the Add button and make sure that the new navigation item has been added to the top list. Now it's time to make sure the changes on the site.

Go back to the site using the Your Site link in the upper left corner of the administration panel. You will see a new navigation item that leads to a page with our content.


Fig. 1.19. New navigation item on the site page

Change of theme

Now try to change the theme of our site. To do this, return to the Orchard CMS admin panel. Go to the Themes section where there are no downloaded themes yet and click on the Install a theme from the Gallery button . After a while, the list of available themes will be loaded into the administration panel (Figure 1.20).


Fig. 1.20. A list of skins in the Orchard CMS admin panel

Select a topic you like, for example the second one from the list (Association Dark Green - Version: 1.0) and click on the Install link opposite it. After a while, the theme will be automatically uploaded to your site.

Now the theme installation will be available from Themes section (Figure 1.21). Go to it.


Fig. 1.21. Downloaded theme in Themes section.

To set the downloaded theme as the theme for our site, click the Set Current button. After that, return to the main page of your site to make sure that the design of the site has been changed (Figure 1.22).


Fig. 1.22. The appearance of the site in the browser with a new design theme.

We met with the admin panel and some of its basic functions. In further parts of this guide, we’ll take a closer look at all the features of the panel. In the meantime, consider what useful WebMatrix will offer to work with our site.

Using WebMatrix Features

Having launched and set up our site on the Orchard CMS through the administration panel, we will return to WebMatrix and consider the features that will help us develop and maintain the site.

Studying site requests

One of the most important advantages of WebMatrix is ​​its ability to monitor the state of the site throughout its life on the server and during development. For example, WebMatrix monitors all requests to resources and pages of the site while the application is running. This allows you to then track all the problems with access to resources and pages and take appropriate action.

In the main WebMatrix window (Figure 1.10), go to the list of completed requests using the Requests button on the control panel. You will see a list of requests with statuses, lead times and additional information with a description of the type of request and recommended actions.


Fig. 1.23. List of site requests during the application

Using this WebMatrix feature, developers can easily track their site’s problems with access to content: images, scripts, styles, and so on. Untrained specialists can read the description of the status of access to content and even get advice on solving a problem if it arose.

Work with code

The work of a web application developer, one way or another, is always related to writing and editing code. Such code can be source files of dynamic pages, markup and presentation files, design styles and javascript scripts.

WebMatrix is ​​a complete source editor with syntax highlighting for many file types. Select the Files section in the section block at the bottom left. You will receive a list of all files included in the current project of the Orchard CMS website. Using the file tree, you can open and modify any project file as required by the task before you.

For example, you can adjust the downloaded and installed theme for your site. By opening the Site.css styles file located in Themes folder\ AssociationDarkGreen \ Styles , you can change the definition of styles to your taste.

For example, if you want to redefine the font used in the theme for the site title, then look for the style definition for the # branding element in Styles.css . Edit its definition as you want, for example, specify that the font should be Segoe UI , setting the value of the CSS element: font -family : “Segoe UI ” (Figure 1.24) .


Fig. 1.24. WebMatrix Code Editor

Save the file and refresh the site’s home page in a browser. You will make sure that the font has been changed.

Using WebMatrix, you can fully edit, create and delete files and folders in the project of your site. WebMatrix supports syntax highlighting for various file formats. The editor has convenient means for navigating files and offers the function of automatically adding code, for example, when working with styles. The WebMatrix editor is convenient and built on the basis of tabs, which allows you to simultaneously work with several files simultaneously.

Work with a DB

When working with web projects, the developer is constantly faced with working with data warehouses, that is, databases. The developer needs to have the means to create databases, create and edit the structure of databases, and manage the contents of database tables.

WebMatrix offers complete built-in database tools. Click the Databases tab. On the left you will get a list of the current database items. Double-click on the Orchard.sdf item. This is a SQL Server Compact format database file that contains all the data on our site. Expand the Tables element and you will get a list of all the tables created in the database and available for editing.

Locate the table named Navigation_MenuPartRecord and double-click to open its contents. You will get access to the information that is stored in the table. Specifically, in this case, the Navigation_MenuPartRecord table stores information on the navigation points that we created earlier. Now you can directly edit the data bypassing the Orchard CMS control panel.

Click on the field with the contents of Home and edit it so that it takes on the value Home (Figure 1.25).


Fig. 1.25. Editing a database in WebMatrix

Now if you refresh the main page of a site in a browser, you will see a change in the navigation panel. Item Home was renumbered Home .

Care should be taken to make changes directly to the database, especially to the table structure, since the written code assumes that the table structure in the database is reduced to a certain form. Editing the table structure is usually done at the beginning of development when creating a database from scratch.

WebMatrix offers complete access to website databases. You can create databases and tables in them, as well as create and edit information in tables.

Website analysis for problems and errors

A unique feature of WebMatrix is ​​the functionality of analyzing sites for potential problems and building reports based on the results of this analysis. This feature makes WebMatrix not only a functional code and data editor and development tool, but also a site maintenance tool.

Using the built-in reporting tool, you can analyze your site for the following aspects:

• optimization of your site for search services;
• the presence of typical web page layout errors;
• typical steps for client optimization;
• the availability of all resources on the pages and the relevance of the available links;
• speed of access to site resources: pictures, scripts, styles and others.

Open the Reports section and click the Create a report for the site button , which is located in the middle of the screen. You will be asked to enter the name of the report and enter the address from which you want to build the report. By default, the address is set for your current site (Figure 1.26).


Fig. 1.26. Entering report parameters

Click OK to create a new report. Please note that you returned to WebMatrix, and the report is generated in the background (Figure 1.27), so that while analyzing your site, you can continue to work with its files and databases.


Fig. 1.27. Background site analysis and report generation

After the analysis is completed and the report is built, you can analyze it by working with the list of violations found, errors and suggested tips (Fig. 1.28).


Fig. 1.28. Working with analysis results and a report

For the Orchard CMS template start site, the report will contain a number of minor errors and warnings specific to the content management system template. You have yet to create your site structure, page layout and fill this template with the right content. That is when analyzing the site for errors and potential problems comes in handy.

In addition to errors related to content, you can proceed to the analysis of site performance by switching the report to the Performance section in the control panel. This section shows all the discovered resources of the site and the time during which this resource was obtained during the analysis. The faster the resources are obtained, the better. Long periods of time and delays in obtaining pages and other file resources, as a rule, indicate problems of the site itself and need attention from the developer.

In the Performance window, you will find a list of resources with the exact time (in fractions of a second) that took to load a particular resource. Using the element at the top of the table, you can limit the list only to elements with a certain time interval (Figure 1.29).


Fig. 1.29. Screen of performance parameters in the report

In your report, all resources should be returned in a matter of fractions of a second, which indicates the healthy status of the website.

As we have seen, WebMatrix is ​​not only a development tool, but also a website analysis and maintenance tool. By building reports, WebMatrix can offer useful information to the developer not only at the stage of site development, but also when the site is already hosted on the Internet, when the correct, responsive and error-free operation of the site is most important. Thus, WebMatrix can be a useful tool not only for developers, but also for the IT staff who accompanies the website during its work in production.

Publishing the project to the server

Now that we have downloaded, configured and launched our first website on Orchard CMS, edited the content using the code editor or database data using the database editor, analyzed the site for problems and reviewed the reports, now we can only publish it on a server on the Internet .

The task of publishing data to the server is everyday, trivial and very routine. At the same time, publishing updates to the server is a responsible task in which errors can be expensive. Each experienced web developer has in his arsenal several practices and approaches to publishing data to the server: via the FTP protocol, remote RDP connections, or script sets. Be that as it may, publishing data and updates to the server is a process that can take a lot of time from a specialist of any class.

And here WebMatrix once again demonstrates its indispensability, offering support for WebDeploy - an automatic protocol for exchanging data with the server. Using this mechanism, and its built-in support in WebMatrix, the process of placing data and updates on the server becomes a trivial task with a few clicks of the mouse, which any, even the most unprepared developer, will cope with.

In order to post something on the Internet, we need to have a hosting service on which to host sites. It can be either a personal server or a service of some hosting provider.

For our guidance, we will use a special free (for 60 days) hosting for WebMatrix projects, which is located at http://WebMatrixHosting.ru/. This resource allows you to evaluate all the benefits of WebMatrix for free and learn how to use them in practice before buying a paid hosting for hosting real projects.

WebMatrixHosting.ru

In order to start using free hosting at WebMatrixHosting.ru you will need only a few minutes. Follow the link http://WebMatrixHosting.ru/ and register on the site.


Fig. 1.30. The appearance of the webmatrixhosting.ru site in a browser

you will receive several emails with a report on successful registration. One of the letters is especially important, it contains the server settings necessary for publishing sites through WebMatrix. The same letter contains an embedded XML file that contains the same parameters for automating the publication of the site.

Publishing a site from WebMatrix

After registration, everything is immediately ready for publication of your site. Go to WebMatrix on the Site tab and click the Publish button in the toolbar. A window for publishing the site will open before you (Figure 1.31).


Fig. 1.31. Window for publishing a site in WebMatrix

You can fill in the data for publishing parameters with your hands, specifying the server, username, password, site name and website address. But it’s much more correct, faster, more reliable to use the publication file attached to your letter from WebMatrixHosting.ru.

Click the link Import publish settings(import publication settings) and select the XML file to load the settings (you may need to change the type of files in the selection window). You will find that all parameter fields are automatically populated.

Now you can check the correctness of the parameters by clicking the Validate Connection button. If all the data is entered correctly and the connection to the server has been established, then you will be prompted to install a certificate (Figure 1.32), check the box and click Accept Certificate in order to be able to use the server.


Fig. 1.32. Certificate Installation Confirmation

Now click Save to save the settings for subsequent automatic publishing. You will be asked to go through a remote server compatibility check with your site requirements. Currently click NO, as we are confident in compatibility. Later, you may need to conduct such a check if the remote server is not familiar to you or you doubt its parameters.

WebMatrix will begin to search for changes on the server regarding the project loaded in the environment. For a new project and an empty server, such changes will be all project files and the database.


Fig. 1.33. View a list of resources ready for publication

Thus, WebMatrix automatically produces what the developer often does himself - making a list of the required changes for publication on the server. Please note that the database is also listed as a necessary update. At this point, you can uncheck any item that you do not want to update on the server yet.

Click Continue and WebMatrix will begin the fully automatic background process of publishing data to the server (Figure 1.34), during which you can continue to work with the website.


Fig. 1.34. Automatic publication of changes to the server

After some time (depending on the size of the changes) WebMatrix will inform you that the publication has been completed, which will mean that your site is already ready to work on the Internet (Figure 1.35).


Fig. 1.35. The publication is completed, the site is ready for work.

Follow the link to your site installed on the Internet. In my case, the site is located at http://vyunev-2.hosting.parking.ru/ .

WebMatrix offers a simple and affordable way for everyone to publish websites to the server. As you can see, publishing a site on the Internet using WebMatrix takes only a few minutes. Even if you do not have an acquired hosting yet, free registration on the http://WebMatrixHosting.ru project will allow you to receive it in a matter of minutes. Please note that this offer will be valid for 60 days.

Conclusion

In the first part of the guide, we introduced ourselves in detail to the Orchard CMS content management system. In just a few minutes, we downloaded, automatically installed and launched an Orchard-based website using WebMatrix.

Using the Orchard CMS management console, we performed a number of simple administrative tasks with the site and changed the design theme. WebMatrix allowed us to edit project files and a database to make the required changes to the site. Using the accessibility features of WebMatrix, we analyzed the website for errors and potential problems.

In the end, in a matter of minutes, we published our site on a real and free hosting on the Internet, after passing through a quick registration on it. Using the capabilities of WebMatrix, the publishing process is simple and easy.

From the first download of WebMatrix to a working site on the network, no more than 10 minutes have passed. This is efficiency!

In the next part of our guide, we will take a close look at the functionality expansion capabilities offered by the Orchard CMS content management tool: widgets, modules, themes, and others.