Site hosting news, tutorials, tips, How Tos and more

Archive for the ‘How-to’ category


Programming 101 Tips: 2 Ways to Add a Loading Icon “Spinner” to Your Website

For budding new web developers, here are two ways to add a “spinner” icon to indicate that your website is busy loading data. The first method uses jQuery’s .ajax method and the second method uses Javascript’s new Fetch API. For the spinner icon, we will use an icon from Font Awesome. I prefer this method because it reduces load time. A well crafted css-styled .png/.gif icon would work as well.

First, install Font Awesome by downloading it (you can get the Free for Web version) and then follow the various instructions on their site to add it to your project (look on the right for Using Font Awesome With). Since I am developing with Visual Studio, I just use NuGet’s Package Manager to install it for me. To add it to your web page, add a stylesheet reference in the <head> element. Since I’m using Visual Studio, my reference looks like this:

<link rel="stylesheet" href="/Content/font-awesome.min.css" />


Next, you will also need to install jQuery and add a reference for it as well:

<script src="/Scripts/jquery-3.4.1.min.js"></script>


jQuery can also be installed via NuGet’s Package Manager in Visual Studio.

Now, add the spinner by adding this line to your page in the <body> element:

<div id="Spinner"><i class="fa fa-spinner fa-3x fa-spin"></i></div>


It can be placed anywhere in the <body> element, but I prefer to place it at the top for organization reasons (i.e. easy reference). The <i> element is used to create the font-awesome icon and the “Spinner” id will be used for further styling. Here is the markup for the “Spinner” css:

#Spinner {
    color: blue;
    left: 47%;
    position: fixed;
    top: 47%;
    visibility: hidden;
    z-index: 1;
}


This should place the spinner in the middle of the page and hides it initially until you activate it (i.e. make it visible) via jQuery. The z-index is used to overlay it over a page.

Now, when making your .ajax call, use the following format:

        $.ajax({
            type: "GET", // GET, POST, DELETE, etc.
            url: "https://www.mysite.com/api/dosomething", // some url
            beforeSend: function () {
                $("#Spinner").css("visibility", "visible");
            },
            complete: function () {
                $("#Spinner").css("visibility", "hidden");
            },
            success: function (response) {
                // do something with response data
            }
        });


By changing the value of css property “visibility” using jQuery, you’re turning the spinner on before the ajax call is made and off after it finishes which gives it the illusion that the site is processing data.

If you plan to use Javascript’s new Fetch API, here is the sample markup:

    $("#Spinner").css("visibility", "visible");
    fetch("https://www.mysite.com/api/dosomething") // some url
        .then(response => response.json())
        .then(function (response) {
            // do something with response data
            $("#Spinner").css("visibility", "hidden");            
        })
        .catch(err => {
           // handle error
           $("#Spinner").css("visibility", "hidden");
        });


The spinner is turned on right before the fetch call is made and then off when it completes. I also added it to the catch clause because the spinner would still remain active when it errors out since the code to deactivate it never executes.

Hope these tips help those young and upcoming rock-star developers. 🙂

Visit Winhost to learn more about our ASP.NET hosting solution



Why is my email so slow? Check the email header.

Having an email message to take forever to arrive can be very annoying and sometimes it leaves people wondering why is this even happening. In this article I’ll show you how to analyze email headers of an email message.

What is an email header?

An email header is a timeline of where the email message went through to get to you and the different email systems it touched during the delivery process. It’s sort of like looking at the tracking information of your UPS delivery. The only way to find out where the slowness is happening is to review the email header of that sluggish email message.

Where can I find the email header?

First, the email message must arrive at the destination before you can review the headers. We have instructions on how to view email headers in our knowledge base. There are multiple ways of viewing the headers. Here is another list that can help you find your email headers.

How to analyze the email header

Email headers can look ugly and hard to understand. Luckily there is a email header analyzing tool provided by MxToolBox.com that can help with that.

Copy and paste that ugly looking email header into the empty field and click on Analyze Header.

In the results, the email server with the longest bar graph is going to be the email server that is causing the most delay.

Why is this occurring?

There are many different reasons why an email message could be slow. One common reason is that the email server that caused the most delay had a large amount of email messages to process. If you see that the latency is happening in one of our email servers, we will gladly check our system for you and the logs to see what might be happening. Please contact our support department via our support portal for assistance.

For the most part most email servers are temporarily handling large volume of emails and will go back to normal performance on their own. However, if you’re seeing this issue keeps happening at a particular email server, you can contact the email administrator of that email system and provide them with the email header as proof.

Visit Winhost to learn more about our Windows hosting solution



How to deploy an InProcess ASP.NET Core 2.2 application

In this tutorial we’ll be using an empty ASP.NET Core application within Visual Studio 2017 and show you how to deploy an ASP.NET Core 2.2 application that is running in InProcess on a Windows IIS Server.

Some information before we get started.

ASP.NET Core 2.2 was recently released and with some new cool features. You are now able to use InProcess with your ASP.NET Core application. By default older versions of ASP.NET Core used OutOfProcess. When using InProcess the ASP.NET Core application only uses the IIS Worker process (w3wp.exe) whereas the OutOfProcess Core application uses the Kestrel server along with the IIS Worker process.

Kestrel is used in ASP.NET Core because it’s supported on different web servers like Apache, IIS, and Nginx. In a Windows server environment, OutOfProcess uses the Kestrel process (dotnet.exe) and IIS Worker process as a reverse proxy to handle the HTTP requests and other various requests normally handled by the IIS Worker Process.

When using InProcess hosting the IIS worker process handles all of the HTTP requests without Kestrel. No more reverse proxies being utilized meaning for a quicker result and a boost in performance.

On Winhost we support both InProcess hosting and OutOfProcess hosting with ASP.NET Core 2.2. If you want to test this on Winhost try to find our hidden promo code within this blog post. (Hint: It’s not a clickable link.)

Let’s get started.

Open a new Visual Studio Project as shown below:

Select ASP.NET Core Web Application.

Click OK and on the next window select Empty making sure ASP.NET Core 2.2 is selected from the drop down menu as well. Click Okay again.

In this project we’re only interested to focus on what process the ASP.NET Core 2.2 is running on. To do this we need to edit the Startup.cs file from the Solution Explorer page.

Go to Line 30 and replace the following code:

await context.Response.WriteAsync("Hello World!");

With the following:

await context.Response.WriteAsync(System.Diagnostics.Process.GetCurrentProcess().ProcessName);

The above code replaces the typical “Hello World!” text from the empty application and displays the process name the application is running on. This step isn’t necessary if you want your application to use InProcess hosting model. We are doing this here just to see what process is being used once it’s been deployed onto the web server.

When selecting a new ASP.NET Core 2.2 project in Visual Studio 2017 the defaults to InProcess within the Application’s Project file. However, you have the ability to check what hosting model your core application is going to use by checking the Project file. See below example:

In the project file on line 5 you should see the following:

<AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>

Deploying your project to Winhost

Log into your Winhost control panel if you haven’t done so already.

In the Publishing information section you will need these settings within Visual Studio when doing a Web Deployment. See below:

If your application is on a IIS server and it’s running InProcess the text you will see in the web browser is: w3wp

If your Core application is running OutOfProcess then it will return: dotnet

In closing, InProcess according to Microsoft is, quicker compared to OutOfProcess. Nicely done Microsoft… Nicely done, indeed.

Visit Winhost to learn more about our ASP.NET Core hosting solution



How to configure WordPress to use SMTP on Winhost

banner-howto

**This article assumes that you have a WordPress site installed at Winhost. If you don’t and want to install WordPress, go to your Winhost control panel and find WordPress under the App Installer.**

To begin you will need to log in to the Admin section of your WordPress site which can be accessed by adding /wp-admin after your domain name such as: HostingAccountDomain.com/wp-admin

Enter your Username and Password and Log In to be taken to the Administrator Dashboard.

From the Dashboard, head down to Plugins – hover over it for a second and in the sub-menu click on “Add New”.

From the Plugins store go to the search bar in the top right and enter “WP Mail SMTP”. The one you’re looking for should be the first option with the bird as the icon. Go ahead and click on “Install Now”. Wait for the plugin to install and click Activate once it has installed.

Now you’re going to want to go to settings and you’ll notice there is now the option for “WP Mail SMTP” Settings.

Click on this to be taken to the screen below:

On this page you can adjust some mail settings. The one we want to focus on is in the Mailer section. We want to change this to “Other SMTP” where the red arrow is pointing to above.

Once you change that, new settings will appear that you must fill out.

SMTP Host: This can be found in the Winhost Control Panel under Email. You will see your Email server information next to SMTP and should look like m##.internalmailserver.net

Encryption: Leave at None for now

SMTP Port: 25

Auto TLS: Leave this on

Authentication: You’ll want to click this “ON”

SMTP Username: Your full email address

SMTP Password: The password for your email account.

After entering your Email information in all the fields click on Save Settings. This will take you back to the top of the page and everything should be all set (if there was no information entered incorrectly).

You should see a tab for Email Test, go ahead and click the tab and enter an email account you have access to and click Send Email to send a test message. You should be receiving an email that looks like below.

If you received this test email, then congratulations! You are all set to send and receive email through your WordPress site.

If you did not and received an error somewhere along the way, submit a support ticket and we will help walk you through the process.

Visit Winhost to learn more about our WordPress hosting solution



MySQL database backup using MySQL Workbench and how to resolve a version mismatch error

banner-howto

We have had a couple tickets come in from customers about backing up their MySQL database and how they followed the steps in a previous blog article and ran in to some trouble. I am going to run through the process I used to get this working and hopefully this should clear up any questions and make the process less confusing.

Before we start you will need the to have MySQL Workbench installed. If you don’t have it, you can get it from here:

https://www.mysql.com/products/workbench/

So once you have Workbench installed go ahead and open up MySQL Workbench and you should see the screen below (minus the red arrow). In this post, I used MySQL Workbench v8.x.

You’ll want to click on that plus sign that the red arrow is pointing to (above) and you will be prompted to enter the following info:

Connection Name: Any name to identify the database.

Hostname: This will be the Database Server found in Control Panel under MySQL | Manage  for the database you want to backup. Should look something like: my##.winhost.com

Username: This will be the Database User found in the same place as the last step.

Password: Click on Store in Vault and you’ll be prompted to enter a password. This will be the password set for the database if you never set it, it will be the same as your control panel password.

You can click on Test Connection or OK and it will verify the information you entered and say connection successful. If you get any errors, please double check the information you entered.

After that you should see something like this

Go ahead and double click on your newest connection to connect to the database.

Now to begin the backup process click on Server > Data Export to be taken to a new page.

Begin by clicking the checkbox next to the database you want to backup. If you wanted to you can choose specific tables you want to include or exclude by clicking on the database. Make sure you click the option for Export to Self-Contained File and then click Start Export.

If you’re lucky everything works right away and you can find your database dump in the specified file path. If you’re like me however, you might get a warning like this.

Now you can go ahead and try clicking Continue Anyway, but you will probably end up getting an error code that ultimately ends with “Operation failed with exitcode 2”. So, you’ll want to take a closer look at that warning you received particularly the version number that I have outlined in red. This could be a different number so make sure to check your warning message and not just use mine in this example.

Go to this link: https://dev.mysql.com/downloads/mysql/

Look at the version that was outlined in red in the previous picture and look for the Community Server with the numbers matching the first two of your version number. In my case I’m looking for Community Server 5.7.

Download the Zip file for your local machines operating system in my case Windows 64-bit.

You can create an account or login if you like, I just go to “No thanks, just start my download”. Once it completes open the zip and move the folder onto your desktop.

Now back to Workbench, go to Edit in the top left then click on Preferences and in there you want to go to the Administration tab on the left highlighted in blue.

Next to “Path to mysqldump Tool” you want to click on the three dots and locate that folder we just downloaded. If it’s on your Desktop, then the path will be This PC > Desktop > mysql-5.7.25-winx64 > bin. Your version number might vary a bit. Once in “bin” look for the application called “mysqldump” and double click it and then click OK.

Now for the moment of truth, click on export and if everything goes to according to plan you should be seeing something like this.

Congratulations! You have successfully backed up your MySQL database.

If you have encounter with this, open a Winhost support ticket.

NOTE: If you wish to avoid this whole manual excercise to backup your database, you may consider our automatic site and database backup service, SiteBackup. SiteBackup is more of a “set-and-forget” system that will make daily backups of your files and data. And you can backup multiple sites/databases hosted at Winhost or elsewhere.

Visit Winhost to learn more about our mySQL hosting solution



How to enable CAPTCHA on your nopCommerce store

banner-howto

One of our nopCommerce hosting customers was getting major spam on their site so we suggested to add CAPTCHA and this helped get rid of the spam and their headaches. In this post, I’ll describe the steps to enable CAPTCHA on your nopCommerce store so you can stop or reduce spamming activities on your site.

CAPTCHA is a great way to prevent bots from running wild. The seemingly simple test can prove to be an difficult task for a computer program attempting to spam your site.

In this post, we are using nopCommerce 4.10.

 

 

 

 

 

**For testing I recommend NOT enabling “on login page” just yet.

 

 

 

 

 

***Note: Be sure to test it before checking the “Show on login page” – if done improperly you can end up getting locked out of your account.

 

I hope that this helps you prevent getting bombarded by spam.

 

Visit Winhost to learn more about our nopCommerce hosting solution



Configuring Elmah for use with ASP.NET Core

howto

Years ago, I wrote an article on how to configure Elmah to be used on Winhost.  You may have noticed that there is no official support for ASP.NET Core, however, you can use ElmahCore by barestan to perform the same logging to a database, and this blog provides an example on how to set that up.

First, we’ll start by creating a New Project in Visual Studio:

 

 

 

 

services.AddElmah<SqlErrorLog>(options =>
{
    options.ConnectionString = @"connection_string";
});
app.UseElmah();

That’s it.  If you want to know if it’s working, you can generate a sample exception like this:

app.Run(async (context) =>
{                
    await context.Response.WriteAsync("Hello World!");
    int[] numbers = new int[5];
    await context.Response.WriteAsync(numbers[6].ToString());
});

That will generate an “Index was outside the bounds of the array.” exception which will be logged into the database.  You can query the dbo.ELMAH_Error table to see the results.

 

Visit Winhost to learn more about our .NET Core hosting solutions



How to Keep WordPress Safe and Secure

This little factoid should freak you out: More than 80,000 websites are hacked every day.

That’s almost one every second, or about 29 million every year. Those numbers translate to a lot of pain and inconvenience for a lot of people. Count yourself lucky if you’ve never been one of them.

There are a quarter of a billion domains with active websites. If 29 million sites are hacked every year, that means we’re living in a world where more than 1 in 10 websites are likely to be compromised. Every year.

How does this happen?

Security starts at home. It’s an old saying, but it applies to a lot of website compromises. We see a lot of hacks that aren’t actually website hacks at all, because the perpetrator is using valid FTP login credentials that were harvested by logging keystrokes or reading log files on a home computer or laptop that has been infected with a virus or malware.

But perhaps the most common way in to a website or server is through old, unpatched third-party software. And a large percentage of that old, unpatched third-party software is WordPress, or WordPress plugins.

Before I give you some tips on locking up your WordPress site, I’d be remiss if I didn’t mention that Winhost has a fully managed WordPress hosting, security and hardening service. The service includes WordPress hardening for maximum security, WordPress-specific support and personalized assistance, and maybe most importantly, monthly updates of WordPress core, Plugins and Themes. The monthly updates consist of one of our in-house WordPress security experts personally examining your WordPress installation for malicious files and signs of compromise. If we discover that your WordPress installation is compromised or hacked, we’ll clean up the mess.

Okay, that’s it for the sales pitch. But if you’ve ever had to clean up a WordPress compromise, I’m pretty sure that you’ll be able to see the value in that service.

Locking down WordPress

The first step in WordPress security doesn’t have anything to do with WordPress itself, but rather site backups. If you always have a current backup, it’s much easier to bounce back from a compromise. Simply identify your most recent “clean” backup, delete everything on your site and upload the clean backup.

We do periodic backups of our entire network for disaster recovery purposes, so if you are compromised you could just request a backup from us. The problem with that approach is we back up every day, and we only retain one copy of those backups. So if you don’t notice that your site has been compromised for a few days, our backup will likely be a copy of the compromised site. That’s not going to be of much help.

So we recommend a cloud backup service. There are a lot of them out there, or you can set one up from your Winhost Control Panel with a few clicks. Our SiteBackup service backs up your website files and databases on a schedule that you choose, retaining as many versions of the backup as you want to keep.

Okay, so that’s a good place to start, with a daily backup of your WordPress site and database. Next are a number of things that you should do to prevent a compromise of your WordPress site.

Update, update, update
How often do you log in to the admin section of your WordPress site? If it’s less than every week – or even every month – you need to start checking in more regularly and updating both the core WordPress files and all of your plugins. If you use a plugin and can’t remember ever updating it, check out the plugin’s page on WordPress.org and make sure it hasn’t been abandoned. If it seems like it has, uninstall it. Chances are there’s a well-maintained plugin out there that will do the same thing.

Kill the admin user
If you installed WordPress some time ago, it may have created a user named “admin” by default. Most brute-force WordPress hacks attempts are on the “admin” username, so you don’t want it to be there. To check, go to your Users page (/wp-admin/users.php) and see if admin is listed there. If it is, create another user or give another existing user the administrator role and delete the default admin user.

Don’t use the default WordPress MySQL table prefix
If the bad guys do manage to find a vulnerability within your site and one of their attempts is to query a table or insert into a table and you used the default table prefix, you could be in trouble. When you’re installing WordPress it’s best to change the table prefix from the default “wp_” to something different. One easy way to do that is to insert random characters after “wp_” – for example wp1od02l_ or wp5434fs_.

Change the WordPress login error
By default, WordPress gives hints about your login when a login fails. One of the steps in our hardening service is to change the login error to “You have entered the wrong Username or Password!” That way someone trying to compromise your site will never know if the username or password is incorrect, making it much more difficult to force or guess a login.

Remove the WordPress version information
It really helps the bad guys to know which WordPress version you’re using. Once they know the version, they can try known vulnerabilities giving them a better chance of getting into your site. They’ll also use Google to find WordPress blogs running a specific version of WordPress that’s easily hackable. You can use a plugin to remove version information.

Disabling Theme and Plugin Editing
The theme editor within WordPress is there to allow you to make quick changes to the code within a theme’s files. Chances are you won’t ever use that feature, but you can be pretty sure that the bad guys will make use of it to enter malicious code. In fact, that is how a lot of WordPress sites get hacked. To prevent that, enter the following rule in your Wp-config.php file, right before the “Stop Editing” tag:

/** Disable File Theme and Plugin Editing */
define('DISALLOW_FILE_EDIT', true);

What else?
The Winhost hosting environment goes the extra mile by disabling executable files from running within the uploads folder, as well as IP restriction of the wp-admin directory. That way the wp-admin directory can only be accessed from IP addresses you specify.

Last but not least, install a Security plugin
If you haven’t already done so, we would highly recommend installing one of the WordPress security plugins. As part of our hardening service we make the security plugin a “Must Use” plugin. That means the plugin can’t be disabled from the admin section of WordPress. The only way to disable it is by deleting the plugin via FTP.

That’s a lot to install, configure and keep track of, but following these recommendations will make your WordPress installation much less susceptible to compromise. If it all sounds good but you don’t really have the time or inclination to do it yourself, let us do it for you.