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

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

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

I remind you that the automatic download of Orchard is available from the application gallery using the Web Platform Installer's quick access tool (click on this link to start the installation ).
')

Orchard CMS Management

The downloaded Orchard CMS base project page is a cute, light and simple site with a title, a navigation bar, four text boxes and a “basement” with a Dashboard link to the project administration panel.

Content editing

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


Fig. 1.14. Editing block contents in admin 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 is immediately reflected on your page.

Now go back to the administration panel from the site’s main page 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. At the moment, 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. Orchard admin panel welcome page

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


Fig. 1.16 The title and link for the new page

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


Fig. 1.17. Notification of successful creation of a new page

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


Fig. 1.18. Establishing a new navigation item

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

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


Fig. 1.19. New navigation item on the site page

Change Theme

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


Fig. 1.20. The list of themes in the Orchard CMS administration panel

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

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


Fig. 1.21. Uploaded topic in the Themes section

To set the downloaded theme as the theme for our site, click on the Set Current button. After that, go back to the home 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 theme

We met with the administration panel and some of its basic features. In the rest of this manual, we will take a closer look at all the functions of the panel. In the meantime, consider what useful WebMatrix offers to work with our site.

Applying the capabilities of WebMatrix

After launching and slightly configuring our site on the Orchard CMS through the administration panel, we’ll go back to WebMatrix and consider the features that will help us develop and maintain the site.

Examination of requests to the site

One of the most important advantages of WebMatrix is ​​its ability to track the status of the site throughout its life on the server and during development. For example, WebMatrix keeps track of all requests to resources and pages on 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 window of WebMatrix (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, execution time and additional information describing the type of request and recommended actions.


Fig. 1.23. List of requests to the site during the application

Using this feature of WebMatrix, developers can easily track down the problems of their site related to access to content: images, scripts, styles, and so on. Untrained professionals can read the description of the status of access to the content and even get advice on how to solve the problem, if any.

Work with code

The work of a web application developer, one way or another, is always associated with writing and editing code. This code can be the source files of dynamic pages, markup files and views, styles, and javascript scripts.

WebMatrix is ​​a complete source code 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 site. Using the file tree, you can open and edit any project file as required by the task before you.

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

For example, if you want to override the font used in the theme for the site header, then find the style definition for # branding element in Styles.css. Edit its definition as you like, for example, indicate 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 main page of the site in the browser. You will verify that the font has been changed.

With WebMatrix, you can fully edit, create, and delete files and folders in your website project. WebMatrix supports syntax highlighting for various file formats. The editor has convenient tools for navigating files and offers the function of automatic code completion, for example, when working with styles. The WebMatrix editor is convenient and tab-based, which allows you to simultaneously work with several files simultaneously.

Work with DB

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

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

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

Click on the field with the contents of Home and edit it to accept the Home value (Figure 1.25).


Fig. 1.25. Editing a database in WebMatrix

Now if you refresh the main page of the site in the browser, you will see the change in the navigation pane. Home item has become Home item.

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

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

Analysis of the site 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 website in the following ways:

• optimization of your website for search services;
• presence of typical layout errors of web pages;
• typical steps for client optimization;
• the availability of all resources on the pages and the relevance of available links;
• speed of access to the resources of the site: 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 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 build a new report. Please note that you returned to WebMatrix, and the report is generated in the background (Figure 1.27), so during the analysis of 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 made and the report is built, you will be able to analyze it, working with the list of violations found, errors and suggested tips (Fig. 1.28).


Fig. 1.28. Work with analysis results and report

For the starting site of the Orchard CMS template, the report will contain a number of minor errors and warnings typical of the content management system template. You have yet to create your own site structure, page layout and fill this template with the correct content. That's when you can use the site analysis for errors and potential problems.

In addition to the errors associated with the content, you can go to the site performance analysis by switching the report to the Performance section in the control panel. This section lists all detected resources of the site and the time for which this resource was obtained during the analysis. The faster the resources are obtained, the better. Long periods of time and delays in getting pages and other file resources usually indicate problems with 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 seconds) that took to download a particular resource. Using the element at the top of the table, you can limit the list to only elements with a certain time interval (Figure 1.29).


Fig. 1.29. Performance Parameters Screen in Report

In your report, all resources should be given in a matter of seconds, which indicates the healthy status of the website.

As we have seen, WebMatrix is ​​not only a development tool, but also a tool for analyzing and maintaining websites. Using report building, WebMatrix can offer useful information to the developer not only at the site development stage, but also when the site is already hosted on an Internet server, 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 IT staff who accompany a website during its production.

Publishing a project to the server

Now that we downloaded, configured and launched our first site on Orchard CMS, edited the contents using the code editor or database data using the database editor, analyzed the site for problems and read the reports, now we just have to publish it to the 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 crucial task, in which errors can be costly. Each experienced web developer has in his or her arsenal several practices and approaches to publishing data to a server: via FTP, remote RDP connections, or sets of scripts. Anyway, publishing data and updates to the server is a process that can take a long time for a specialist of any class.

And here WebMatrix once again demonstrates its indispensability by offering support for WebDeploy - an automatic protocol for exchanging data with a server. With the help of 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 mouse clicks that any, even the most untrained developer, can handle.

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

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

WebMatrixHosting.ru

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


Fig. 1.30. Appearance of webmatrixhosting.ru site in browser

You will receive several letters 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 a nested 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 the publication of your site. Go to WebMatrix on the Site tab and click the Publish button in the toolbar. You will see the site publishing parameters window (Figure 1.31).


Fig. 1.31. WebMatrix website publishing window

You can fill in the publication parameters data with your hands, specifying the server, username, password, site name and site address. But where it is more correct, faster, more reliable to use the file of publication attached to your letter from WebMatrixHosting.ru.

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

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 with the server has been established, then you will be prompted to install the 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 pass a remote server compatibility check with the requirements of your site. Currently click NO as we are sure of compatibility. You may need to do such a check later, if the remote server is not familiar to you or you are in doubt about its parameters.

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


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

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

Click Continue and WebMatrix will begin a 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 posting of changes to the server

After some time (depending on the size of the changes), WebMatrix will announce the completion of the publication, which will mean that your site is ready to work on the Internet (Figure 1.35).


Fig. 1.35. The publication is complete, the site is ready to work

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

WebMatrix offers a simple and accessible 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 don’t have a hosting yet, free registration on the project http://WebMatrixHosting.ru 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 tutorial, we became familiar with the Orchard CMS content management system. In a few minutes we downloaded, automatically installed and launched the Orchard-based site using WebMatrix.

Using the Orchard CMS management console, we performed a number of simple administrative tasks with the site and changed the theme of the design. WebMatrix allowed us to edit the project files and 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 real and free hosting on the Internet, having previously passed a quick registration on it. Using the capabilities of WebMatrix, the publishing process turned out to be simple and easy.

No more than 10 minutes passed from the first download of WebMatrix to a working site on the network. Here is this efficiency!

In the next part of our guide, we will closely look at the possibilities of expanding the functionality offered by the Orchard CMS content management tool: widgets, modules, themes, and others.