Developers Guide to WebEd

WebEd Cloud Demo

Adding site domain from TPP to Cloudflare

Troubleshooting on the Cloudflare Overview

• This will guide you on how you can add/connect domains from TPP to Cloudflare.
• Troubleshooting on the Cloudflare site with an unregistered the domain
  

Managing a domain on TPP

Technology and System Requirements

To run WebEd Cloud, you will need the following installed on your server/computer:

Supported web servers:

• Internet Information Service (IIS) 7.0 or above
• ASP.NET 4.5 (MVC 5.0) and Microsoft .NET Framework 4.5 or above

Supported databases:

• MS SQL Server 2008 or above
• MS SQL Server Compact 4.0 or above

Supported browsers

• Microsoft Internet Explorer 9 and above
• Mozilla Firefox 2.0 and above
• Google Chrome 1.x
• Apple Safari 2.x

MS Visual Studio 2013 or above. Required for developers who want to edit source code.

Installation Guide

WebEd9 Installation Overview

Before you begin the installation, ensure that you and your web host have the minimum requirements to run WebEd Cloud. Then download the required WebEd Cloud software to a local directory and extract the downloaded package. We provide two versions of WebEd Cloud a source code version and a no-source version.

Source Code version

Non-Source Code version

Running the site using IIS (package without source code)

To use IIS, copy the contents of the extracted WebEdCloud folder to an IIS virtual directory (or site root), and then view the site using a browser.

Running the site using Visual Studio (package with source code)

This step describes how to launch a site in Visual Studio:

Getting the "ready to deploy" package (without source code) from a package with source code

WebEd Installation Process

WebEd Cloud requires to write permissions for IIS user account (IUSR) for the directories and files described below:

• \App_Data\
• \Logs\
• \Media\

Before installing WebEd Cloud, ensure you have one of the following databases installed on your system:

• SQL Server 2008 or higher
• SQL Server Express

If you are using SQL Server 2008 or higher, you can use any of the following authentication methods to connect to the server:

• SQL Server Account: When connecting using this method, logins are created in the SQL Server that is not based on the Windows user accounts. Both the user name and the password are created using the SQL Server and are stored in SQL Server. When using this method you must enter your login and password.
• Integrated Windows Authentication: When connecting using this method, the SQL Server validates the account name and password using the Windows principal token in the operating system. This means the user identity is confirmed by Windows. The SQL Server does not request a password and does not perform identity validation. Windows Authentication is the default authentication mode and is much more secure than SQL Server Authentication. Windows Authentication uses Kerberos security protocol, provides password policy enforcement with regard to complexity validation for strong passwords, provides support for account lockout, and supports password expiration. A connection made using Windows Authentication is sometimes called a trusted connection, because SQL Server trusts the credentials provided by Windows.

WebEd Cloud Developer FAQ

WebEd 9 Templates

A Step-by-Step guide on how to build WebEd 9 sites using Master Templates, Page Templates and modules. Outlines the best practises and processes for designers when creating a new site in an empty installation.

WebEd Cloud Developer FAQ

I can not find the database for WebEd Cloud. Where can I find the database for WebEd Cloud?

• WebEd Cloud is developed using ASP.NET MVC and Entity Framework with Code First Approach.
• The framework will create the database itself using the current schema in WebEd.EntityModel library/project.
• All you have to do is to start to debug and follow the steps of WebEd Cloud Setup till it requires you to input the connection string.
• Database step in WebEd Cloud Setup

Where connection string, what is the connection string WebEdEntities?

• The connection string that WebEd Cloud uses is stored in /WebEd.Web/App_Data/Site.config or /App_Data/Site.config
• There is a connection string named WebEdEntities in Web.config by default:
  • The connection string for development only updates the changes from entity context to a database.
  • With Entity Framework and Code First Approach, every change you make to the entity context is migration. For more detail, please find them here.

I got an error with Git on building WebEd Cloud.

• The error would be something like the image below :

• Please copy Git folder from C:\Program Files\ to C:\Program Files (x86)\
• Why did it happen? :
  • WebEd Cloud project has a pre-build event command line "C:\Program Files (x86)\Git\bin\git.exe" rev-parse --short HEAD> "$(ProjectDir)\App_Data\version.txt" to get the current revision on Git to write to WebEd.Web\App_Data\version.txt, so that we will have a version to display on WebEd Cloud Admin.

• • The process to read the version seems to not check where Git was installed, so it blindly picked "C:\Program Files (x86)\Git\bin\git.exe" to execute the command.
  • You must have installed a 64-bit version of Git on your 64-bit machine if you faced this problem. Your Git folder must be at "C:\Program Files\Git\bin\git.exe", so the command to get the current revision could not find git.exe and execute the command.
  • Please do a copy to "C:\Program Files (x86)" as a quick bandage.
  • You can also change the pre-build event command line but please be aware that you should not commit the change to the repository.
• If you are still receiving the error but with a different error code, for error code 128 or error message "Not a git repository", please make sure have check-out the source code properly and completely, because the compiler could not find .git folder, which is for Git repository.

Missing Unable to locate XML License file

About software and source code

• Visual Studio 2013 is required. If you use Visual Studio 2015, Please don't use it.
• Checking earlier version of Browser are required when you are doing checklists, which is a step of handling the site to the customer.
• Works are on Bitbucket. You will have a branch to work on, then just push your work when you complete it.
• We use Entity Framework with code first approach.
• There is a dedicated project in our source code to handle schema, WebEd.Entity Model. It has a folder to contain Migrations.

Managing Page Templates

The Basics of managing Page Templates on WebEd9

Templates in WebEd 9 are 2 types:

• Master
  • This controls the overall layout of a site.
  • This is the place you should put all your JavaScript, CSS and overall "wrapper" for the site.
• Non-Master or Other
  • This is for various areas of the page layouts and gives you granular control over page areas.

Templates can cascade in a parent-child relationship:

• Master
  • Page Template Blah 1
  • Page Template not Blah 1

When you create a new page, you will be prompted for a page template to use.

Sample Layouts

Assume we have the following layouts for the explanation

Layout for home pages	Layout for the following pages
Header Content Footer	Header Content Highlights Footer

Using Master Templates

The simple way

WebEd 9 allows you to have multiple Master templates - one way you can do this is to have two Master pages

• Home Page Master
• Following Page Master

This will allow you to select the template you require for each page type, but what happens if say, the header layout needs to change? You now have to edit in two places and it doubles the work required.

The better way

• Have one Master Template which controls the wrapper or main layout of the page
• Have two child templates that use the Master as a parent
• Master
  • Home Page
  • Following Pages

Now you will have all the static layouts like header and footer in one place and easily managed. Plus the layouts for the following and the homepage are in one place and easy to manage. At the time of page creation, you just select the page layout you want.

How this works is:

• You select the correct page template for the page (say, Home Page)
• The topmost parent for the page is found (Master)
  • Then all page templates which are children, are added to the HTML sent to the browser
    • Master
      • Home Page
• Because templates cascade, you can have very complex template structures if needed.
• Of course, with more complexity comes more maintenance work so we suggest you keep it as simple as possible

Adding Cool Stuff to Specific Pages

Say we have a widget or specific piece of content we need to use in a few places on the site.

• You could just add a piece of content on each page if you need it
• Of course, if it changes, you will need to edit it in multiple places.

Using Cascading Templates, this is a snap

First set up your template structure says:

• Master
  • Home Page
  • Following Page

Then add the widget as a template. You can do this because templates inherit from their parent.

• Master
  • Home Page
  • Following Page
    • My Very Cool Widget Page

Because the Widget page is just a template, you can control the positioning of the Widget using standard HTML or CSS. Now when you create your new page, you select the My Very Cool Widget template and everything gets rendered correctly due to the Rollup/Hierarchy/Cascade nature of the templates.

Over the long term, your maintenance work will be significantly less as you can easily break things down into simple templates for all kinds of stuff.

• Master
  • Home Page
  • Following Page
    • My Very Cool Widget Page
  • Products Page
    • Products with Widgets
• My Special Landing Page Master
  • My Very Cool Form Template
    

Managing the Page Template in WebEd9

Where can I find the Page Template module in the system?

How to create a Page Template?

How to use a Page Template?

Creating a new page

Applying a template to an existing Page

The Technical Stuff

Warning! Danger! Geek speak ahead!

• Working with WebEd 9, all the templates/ scripts/ styles can be stored into the database making maintenance easy.
• There are 2 templates types
  • Page Template for any page layouts
  • File Template
• WebEd 9 template support Razor Syntax and C#
  • You can use most of the features of Razor including:
    • You can define section to render between Page Template: http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor (*)
  • You can also write C# code inside the template
    
• Page Template can be either a Master Template (no parent) or a child template
  • All the content will be placed in {RenderBody} curly bracket
    • If the page template has a parent template, then all of its content (except the (*) section) will be placed in the {RenderBody} of the parent template
      
• There are some extended helpers you can use when editing page template
• You can add dynamic script and style (from Scripts and Styles modules) in the template, more information here: How to manage and use dynamic Script / Style in the CMS?
• Currently, there are 2 default templates for the system is:
  • DefaultMasterTemplateWithRenderContentOnly: this is used for setup some initialize script and HTML for a page like:
    • Edit / Create/ Login / Logout / Site map buttons
    • Some script is the default script that the CMS need to use like some information about user logged-in, user groups, email and id
    • This template will always render as the final template in the system
  • Master: This is used to set up the master HTML of the application where you can define sections and body for the page

Form Builder: Add Custom Controls

Form Builder Overview

• Form Builder provides the ability for users to quickly create forms on the fly and embed them into any website.
• The form builder contains multiple predefined types of a component such as input, button, image, drop-down... and so on.

In this guide, we will demonstrate adding a custom control.

The Architecture

The form components are controlled by the Config.xml in {Solution Folder}\Web\Control\Config.XML

The XML format allows you to define

• Title - the name of the control
• Type - allowed types are:

Models Dropdown

Editing the Login Template Setting

The Login Template Setting are controlled by the login site settings.

Maintenance Mode

When you want to deploy some new changes to your website, you may need to put your whole site under maintenance mode. This will show your client a friendly screen and message rather than a 500-error page

Webpage Load Performance

Webpage Load Performance Overview

This is a documentation of ways you can check your website's loading speed.

Introduction to Webpage Load Performance

Page speed is mostly controlled by the content. For example, you may have a lightly loaded "Contact us" page that has little content loading in under 1 second. On the same site, a page full of large videos or images may take 10 seconds to load. The page size will determine load speed generally.

For basic websites, a loading time of under 3 seconds is our aim. But automotive sites tend to have lots of content and images, so we try to get the sites loading in under 4s, which makes it considered good for an automotive site. This is because some dealers use very large images which then means we miss the target time. Content is the limiting factor.

File Size

The file size checks for how many pixels the image contains in bytes. For example, an image of 2,340,000 pixels has a file size of 2,340,000 bytes or about 2.34 MB (this is because there are 1024 bytes in a kilobyte and 1024 kilobytes in an MB).

The recommended file size of images is less than 100 kilobytes for a fairly small image, and within 200 kilobytes for banners and large images.

Why you need to check your website's page load performance?

• The loading speed of your website affects your user experience, no one wants to wait for a slow-loading page.
• Visitors will wait no more than 3-5 seconds for the web page content to appear before abandoning a site.
• Recent stats show a half a second difference in page load time can make a 10% difference in sales for an online retailer.

How to check a page's load performance - Tip! don't use Google PageSpeed Insights

You might have read several articles telling you to use Google's PageSpeed Insights to measure your website's performance, here's why it is bad advice:

• PageSpeed Insights does not measure the loading time of your pages.
• The PageSpeed grade you get on the result is not an indicator of page speed. It is a score based on some fixed assumptions.
  • For example, it ignores the lazy loading of images which is a known technique to improve the visitor experience.
• In PageSpeed Insights, no website ever gets a perfect grade, so it is impossible to get 100. This means you are targeting between 0 and 80, not 100 as it appears to suggest.
• The score on Page Insights does not correlate to loading speed.

How to measure your website speed?

So given the above cons of PageSpeed Insights, what should I use to accurately measure my website's load performance?

The answer is your browser's Developer Tools.

• Developer Tools is accurate, easy and free.
• It is a true measurement of a page's loading time.
• You can measure the page's load time perceived by your users and the loading time once all Javascript, CSS and files have been loaded.

Learn about using Developer Tools here →

How to use your browser's Developer Tools to check a page's load performance?

See Developer Tools in action

Guide on checking a page's load performance