Tutorial: Create a DevMagazine site | MVC
The DevMagazine demo site is the Sitefinity CMS demo project, written in pure MVC and demonstrating MVC 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. You can take a look at the DevMagazineSite GitHub repository.
Overview
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.
Technical overview
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 MVC resource packages. For more information, see Overview: Resource packages.
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 MVC 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 MVC resource packages. For details, see For developers: Create MVC page templates based 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 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. In the selector, you can filter by tags each particular widget, for example News.
Articles
Articles represent News items in Sitefinity with a related author and image. Sitefinity CMS 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 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 Modify widget templates.
The Sitefinity News widget is built to support the Master/Detail functionality. Therefore, two views are used - Index and Details. For more details, see 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 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 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 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.
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:
- In Windows Explorer, open the %localappdata%\NuGet\Cache folder.
- Select all files and delete them.
You need to restore the database files to your SQL Server. To do this:
- In SQL Server Management Studio, open the context menu of Databases and click Restore Database...
- Select Device and click the browse button marked with three dots: [...] .
- Click the Add button and navigate to SitefinityWebApp -> App_Data folder.
- Select the DevMagazine.bak file and click OK.
- 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:
- In Solution Explorer, navigate to SitefinityWebApp -> App_Data -> Sitefinity -> Configuration and select the DataConfig.config file.
- Modify the connectionString value to match your server address.
- Build the solution.
Login
To login to Sitefinity backend, use the following credentials:
Username: admin
Password: password