Feather: Create a DevMagazine site

The DevMagazine demo site is the Sitefinity demo project, written in pure MVC and demonstrating Feather functionality and capabilities. The demo site is primarily aimed at frontend developers, as it showcases how they can easily and quickly create any Sitefinity site using intuitive methods for developing UI components. 

Click here to browse the DevMagazine web site.

The DevMagazine site is an online magazine where you can read technical articles on IT topics. You can view the demo site on a variety of devices - desktop computers, tablets, and smartphones, as it is designed with using responsive web design methods. Each article on the site is associated to a certain issue that the article attempts to resolve. You have a number of options to filter the articles:

• By topics - .NET, Mobile, Testing, Web, etc.
  To filter articles by topics, select the topics in the navigation bar.

• By issues to which the articles are associated.
  To filter the articles by issue, from the navigation bar click Issues and select an issue.

• By authors - you can find all articles written by a specific author.
  For each article, you can see information about its author - short biography, job title, avatar, etc. To search by author, on the home page scroll and find the Authors section. When you click on the author's image or name, you are redirected to the author's details, which includes all articles written by the author.

The DevMagazine demo site is based on the popular frontend framework Bootstrap. By using the Bootstrap framework, you can build a responsive, mobile-first design and project by taking advantage of Feather's resource packages. Feather uses the Bootstrap framework because of its popularity, but you can built packages with any other frontend framework, for example, SemanticUI or Foundation.

Structure

The DevMagazine project consists of three parts - the SitefinityWebApp and a code library - DevMagazine.Core.

DevMagazine.Core - this code library contains generic methods that work with the Sitefinity API.

SitefinityWebApp - as any other Sitefinity application, the SitefinityWebApp contains all the information required for a Sitefinity site plus the Feather resource packages (Bootstrap), and all widget templates.

Pages and templates

Similar to any Sitefinity site, the DevMagazine demo site is organized by pages and a page template. The page template is based on the Bootstrap framework, backed by Feather's resource packages. For details, see Feather: Base page templates on layout files. Several Sitefinity pages are created just to serve or preview specific content - Issues, Authors, Topics, etc.

Navigation

The DevMagazine demo site has fixed navigation to make filtering of the articles by topics easier and the search capabilities faster. As this navigation is part of every page, you drag the Feather Navigation widget on the page template itself. Each topic represents a tag and each article is classified by a tag field. The filtering is achieved by the taxonomy selector provided by Sitefinity Feather. In the selector, you can filter by tags each particular Feather widget, for example News.

Articles

Articles represent News items in Sitefinity with a related author and image. Feather provides several ready-to-use content widgets: News, Content Blocks, and Navigation. As articles are representing Sitefinity News items, they are displayed on the site by the Feather News widget. Since there are specific appearance requirements, you replace the template of the widget with a custom one. For details how to do this, see Feather: Modify widget templates.

Similar to any other Sitefinity widget, the News widget in Feather is built to support the Master/Detail functionality. Therefore, two views are used - Index and Details. For more details, see Feather: Implement Master Detail content controllers.
Filtering of articles by topic is achieved by using a taxa selector in the designer of the News widget. For details how to do this, see Feather: Flat taxon selector.

Authors

Authors are represented by the dynamic content type Authors. The author's details and information are populated in the corresponding field and the avatar of the author is created by using a related media field - an image. For more details, see Content relations. To display a list of all the authors on the site, you use the Feather Dynamic content widget. Sitefinity automatically generates separate widgets for each dynamic content type so you only have to change their templates according to the appearance requirements.

Issues

Issues in the DevMagazine demo site are also represented by a dynamic content type Issues. Each issue has a Title, IssueNumber, and Description. These fields are standart Short text fields. However, to display the relations between issues and other items, you create several related data items:

• FeaturedArticle - related data item pointing to the featured article
• IssueCover - each issue has a cover photo which is saved in the Sitefinity Images library. This field relates the issue and the image.
• IssueDocument - each issue is a document that users can download. As documents are stored in the Sitefinity Documents library, this field relates the issue and the document.
• Articles - each issue has a relationship to one or many articles and the field represents this relationship.

You use the generated Issues MVC widget to display a list of issues with paging and issue's details.

Topics

Topics are displayed in the navigation bar as items that you can select - .NET, Web, Testing, Cloud, Desktop, Mobile. Each topic leads to a list of related articles. Topics represent Sitefinity pages with News widgets on each of them. You can filter each News widget by tags using the tag selector in the designer.

Search

The DevMagazine provides search capability, as well, via the Search button next to the Navigation bar. Once you hit the Enter key, the window location is redirected to the Results page. The search functionality is achieved by using combination of build-in Feather widgets - SearchBox and SearchResults. These widgets utilize the Sitefinity Search engine and enhance its capabilities and speed.

Social sharing

As any website nowadays, the DevMagazine demo site provides a social share widget. In it you can see two different approaches for displaying social share buttons:

• Through a Content widget placed in the page template. The widget contains icons and the corresponding URLs.
• By droping the SocialShare widget on the page or page template.
• By enabling option "EnableSocialSharing" of the News or ContentBlock widget which will show the build in SocialShare widget.

Requirements

• Sitefinity license

• .NET Framework 4

• Visual Studio 2012

• Microsoft SQL Server Express and SQL Server 2008R2 or later versions

NOTE: If you do not have an SQL Server Express installed on your computer, you can download it from the Microsoft official site.

Prerequisites

Clear the NuGet cache files. To do this:

1. In Windows Explorer, open the %localappdata%\NuGet\Cache folder.
2. Select all files and delete them.

You need to restore the database files to your SQL Server. To do this:

1. In SQL Server Management Studio, open the context menu of Databases and click Restore Database...
2. Select Device and click the browse button marked with three dots: [...] .
3. Click the Add button and navigate to SitefinityWebApp -> App_Data folder.
4. Select the DevMagazine.bak file and click OK.
5. Click OK.

IMPORTANT : You must have the following permissions set to the database in order to run the DevMagazine project:

The application pool identity should be assigned as db_owner for the Membership and DB schema as it should perform all CRUD operations, including "create" and "drop" (creating/deleting using Sitefinity backend GUI custom fields, custom modules or upgrading). The user that you are using to authenticate on the SQL server must have permissions to read and write to tables and to alter the database schema. The user must be assigned to db_datareader, db_datawriter, and db_ddladmin database roles.

Installation instructions:

1. In Solution Explorer, navigate to SitefinityWebApp -> App_Data -> Sitefinity -> Configuration and select the DataConfig.config file.
2. Modify the connectionString value to match your server address.
3. Build the solution.

Login

To login to Sitefinity backend, use the following credentials:

Username: admin

Password: password