Developers Guide to WebEd

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

Supported operation systems:

• Windows 7 or above
• Windows Server 2008 or above

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

Where to Find the Database for WebEd Cloud: Locating and Accessing Your Database

• 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 is the Connection String? What is the Connection String in WebEd Entities?

• 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.

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

Using Master Templates

Managing the Page Template in WebEd9

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 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.

Form Builder 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

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.

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.

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