Category Archives: HTML, CSS, JavaScript (jQuery)

Coding and other solutions related to the HTML (all versions but mostly 5th version), CSS (all versions) and JavaScript (most of the time jQuery as it is simple to write).

Highlighting the faces in uploaded image in ASP.NET web applications

Introduction and Background

Previously, I was thinking we can find the faces in the uploaded image, so why not create a small module that automatically finds the faces and renders them when we want to load the images on our web pages. That was a pretty easy task but I would love to share what and how I did it. The entire procedure may look a bit complex, but trust me it is really very simple and straight-forward. However, you may be required to know about a few framework forehand as I won’t be covering most of the in-depth stuff of that scenario — such as computer vision, which is used to perform actions such as face detection.

In this post, you will learn the basics of many things that range from:

  1. Performing computer vision operations — most basic one, finding the faces in the images.
  2. Sending and receiving content from the web server based on the image data uploaded.
  3. Using the canvas HTML element to render the results.

I won’t be guiding you throughout each and everything of the computer vision, or the processes that are required to perform the facial detection in the images, for that i would like to ask you to go and read this post of mine, Facial biometric authentication on your connected devices. In this post, I’ll cover the basics of how to detect the faces in ASP.NET web application, how to pass the characters of the faces in the images, how to use those properties and to render the faces on the image in the canvas.

Making the web app face-aware

There are two steps that we need to perform in order to make our web applications face aware and to determine whether there is a face in the images that are to be uploaded or not. There are many uses, and I will enlist a few of them in the final words section below. The first step is to configure our web application to be able to consume the image and then render the image for processing. Our image processing toolkit would allow us to find the faces, and the locations of our faces. This part would then forward the request to the client-side, where our client itself would render the face locations on the images.

In this sample, I am going to use a canvas element to draw objects, whereas this can be done using multiple div containers to contain span elements and they can be rendered over the actual image to show the face boxes with their positions set to absolute.

First of all, let us program the ASP.NET web application to get the image, process the image, find the faces and generate the response to be collected on the client-side.

Programming file processing part

On the server-side, we would preferably use the Emgu CV library. This library has been of a great usage in the C# wrappers list of OpenCV library. I will be using the same library, to program the face detectors in ASP.NET. The benefits are:

  1. It is a very light-weight library.
  2. The entire processing can take less than a second or two, and the views would be generated in a second later.
  3. It is better than most of other computer vision libraries; as it is based on OpenCV.

First of all, we would need to create a new controller in our web application that would handle the requests for this purpose, we would later add the POST method handler to the controller action to upload and process the image. You can create any controller, I used the name, “FindFacesController” for this controller in my own application. To create a new Controller, follow: Right click Controllers folder → Select Add → Select Controller…, to add a new controller. Add the name to it as you like and then proceed. By default, this controller is given an action, Index and a folder with the same name is created in the Views folder. First of all, open the Views folder to add the HTML content for which we would later write the backend part. In this example project, we need to use an HTML form, where users would be able to upload the files to the servers for processing.

The following HTML snippet would do this,

<form method="post" enctype="multipart/form-data" id="form">
  <input type="file" name="image" id="image" onchange="this.form.submit()" />
</form>

You can see that this HTML form is enough in itself. There is a special event handler attached to this input element, which would cause the form to automatically submit once the user selects the image. That is because we only want to process one image at a time. I could have written a standalone function, but that would have made no sense and this inline function call is a better way to do this.

Now for the ASP.NET part, I will be using the HttpMethod property of the Request to determine if the request was to upload the image or to just load the page.

if(Request.HttpMethod == "POST") {
   // Image upload code here.
}

Now before I actually write the code I want to show and explain what we want to do in this example. The steps to be performed are as below:

  1. We need to save the image that was uploaded in the request.
  2. We would then get the file that was uploaded, and process that image using Emgu CV.
  3. We would get the locations of the faces in the image and then serialize them to JSON string using Json.NET library.
  4. Later part would be taken care of on the client-side using JavaScript code.

Before I actually write the code, let me first show you the helper objects that I had created. I needed two helper objects, one for storing the location of the faces and other to perform the facial detection in the images.

public class Location
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

// Face detector helper object
public class FaceDetector
{
    public static List<Rectangle> DetectFaces(Mat image)
    {
        List<Rectangle> faces = new List<Rectangle>();
        var facesCascade = HttpContext.Current.Server.MapPath("~/haarcascade_frontalface_default.xml");
        using (CascadeClassifier face = new CascadeClassifier(facesCascade))
        {
            using (UMat ugray = new UMat())
            {
                CvInvoke.CvtColor(image, ugray, Emgu.CV.CvEnum.ColorConversion.Bgr2Gray);

                //normalizes brightness and increases contrast of the image
                CvInvoke.EqualizeHist(ugray, ugray);

                //Detect the faces from the gray scale image and store the locations as rectangle
                //The first dimensional is the channel
                //The second dimension is the index of the rectangle in the specific channel
                Rectangle[] facesDetected = face.DetectMultiScale(
                                                ugray,
                                                1.1,
                                                10,
                                                new Size(20, 20));

                faces.AddRange(facesDetected);
            }
        }
        return faces;
    }
}

These two objects would be used, one for the processing and other for the client-side code to render the boxes on the faces. The action code that I used for this is as below:

public ActionResult Index()
{
    if (Request.HttpMethod == "POST")
    {
         ViewBag.ImageProcessed = true;
         // Try to process the image.
         if (Request.Files.Count > 0)
         {
             // There will be just one file.
             var file = Request.Files[0];

             var fileName = Guid.NewGuid().ToString() + ".jpg";
             file.SaveAs(Server.MapPath("~/Images/" + fileName));

             // Load the saved image, for native processing using Emgu CV.
             var bitmap = new Bitmap(Server.MapPath("~/Images/" + fileName));

             var faces = FaceDetector.DetectFaces(new Image<Bgr, byte>(bitmap).Mat);

             // If faces where found.
             if (faces.Count > 0)
             {
                 ViewBag.FacesDetected = true;
                 ViewBag.FaceCount = faces.Count;

                 var positions = new List<Location>();
                 foreach (var face in faces)
                 {
                     // Add the positions.
                     positions.Add(new Location
                     {
                          X = face.X,
                          Y = face.Y,
                          Width = face.Width,
                          Height = face.Height
                     });
                 }

                 ViewBag.FacePositions = JsonConvert.SerializeObject(positions);
            }

            ViewBag.ImageUrl = fileName;
        }
    }
    return View();
}

The code above does entire processing of the images that we upload to the server. This code is responsible for processing the images, finding and detecting the faces and then returning the results for the views to be rendered in HTML.

Programming client-side canvas elements

You can create a sense of opening a modal popup to show the faces in the images. I used the canvas element on the page itself, because I just wanted to demonstrate the usage of this coding technique. As we have seen, the controller action would generate a few ViewBag properties that we can later use in the HTML content to render the results based on our previous actions.

The View content is as following,

@if (ViewBag.ImageProcessed == true)
{
    // Show the image.
    if (ViewBag.FacesDetected == true)
    {
        // Show the image here.
        <img src="~/Images/@ViewBag.ImageUrl" alt="Image" id="imageElement" style="display: none; height: 0; width: 0;" />

        <p><b>@ViewBag.FaceCount</b> @if (ViewBag.FaceCount == 1) { <text><b>face</b> was</text> } else { <text><b>faces</b> were</text> } detected in the following image.</p>
        <p>A <code>canvas</code> element is being used to render the image and then rectangles are being drawn on the top of that canvas to highlight the faces in the image.</p>

        <canvas id="faceCanvas"></canvas>

        <!-- HTML content has been loaded, run the script now. -->
        
            // Get the canvas.
            var canvas = document.getElementById("faceCanvas");
            var img = document.getElementById("imageElement");
            canvas.height = img.height;
            canvas.width = img.width;

            var myCanvas = canvas.getContext("2d");
            myCanvas.drawImage(img, 0, 0);

            @if(ViewBag.ImageProcessed == true && ViewBag.FacesDetected == true)
            {
            
            img.style.display = "none";
            var facesFound = true;
            var facePositions = JSON.parse(JSON.stringify(@Html.Raw(ViewBag.FacePositions)));
            
            }

            if(facesFound) {
                // Move forward.
                for (face in facePositions) {
                    // Draw the face.
                    myCanvas.lineWidth = 2;
                    myCanvas.strokeStyle = selectColor(face);

                    console.log(selectColor(face));
                    myCanvas.strokeRect(
                                 facePositions[face]["X"],
                                 facePositions[face]["Y"],
                                 facePositions[face]["Width"],
                                 facePositions[face]["Height"]
                             );
               }
           }

           function selectColor(iteration) {
               if (iteration == 0) { iteration = Math.floor(Math.random()); }

               var step = 42.5;
               var randomNumber = Math.floor(Math.random() * 3);

               // Select the colors.
               var red = Math.floor((step * iteration * Math.floor(Math.random() * 3)) % 255);
               var green = Math.floor((step * iteration * Math.floor(Math.random() * 3)) % 255);
               var blue = Math.floor((step * iteration * Math.floor(Math.random() * 3)) % 255);

               // Change the values of rgb, randomly.
               switch (randomNumber) {
                   case 0: red = 0; break;
                   case 1: green = 0; break;
                   case 2: blue = 0; break;
               }

               // Return the string.
               var rgbString = "rgb(" + red + ", " + green + " ," + blue + ")";
               return rgbString;
           }
        
    }
    else
    {
        <p>No faces were found in the following image.</p>

        // Show the image here.
        <img src="~/Images/@ViewBag.ImageUrl" alt="Image" id="imageElement" />
    }
}

This code is the client-side code and would be executed only if there is an upload of image previously. Now let us review what our application is capable of doing at the moment.

Running the application for testing

Since we have developed the application, now it is time that we actually run the application to see if that works as expected. The following are the results generated of multiple images that were passed to the server.

Screenshot (427)

The above image shows the default HTML page that is shown to the users when they visit the page for the first time. Then they will upload the image, and application would process the content of the image that was uploaded. Following images show the results of those images.

Screenshot (428)

I uploaded my image, it found my face and as shown above in bold text, “1 face was detected…”. It also renders the box around the area where the face was detected.

Screenshot (429)

Article would have never been complete, without Eminem being a part of it! 🙂 Love this guy.

Screenshot (426)

Secondly, I wanted to show how this application processed multiple faces. On the top, see that it shows “5 faces were detected…” and it renders 5 boxes around the areas where faces were detected. I also seem to like the photo, as I am a fan of Batman myself.

Screenshot (430)

This image shows what happens if the image does not contain a detected face (by detected, there are many possibilities where a face might not be detected, such as having hairs, wearing glasses etc.) In this image I just used the three logos of companies and the system told me there were no faces in the image. It also rendered the image, but no boxes were made since there were no faces in the image.

Final words

This was it for this post. This method is useful in many facial detection software applications, many areas where you want the users to upload a photo of their faces, not just some photo of a scenery etc. This is an ASP,NET web application project, which means that you can use this code in your own web applications too. The library usage is also very simple and straight-forward as you have already seen in the article above.

There are other uses, such as in the cases where you want to perform analysis of peoples’ faces to detect their emotions, locations and other parameters. You can first of all perform this action to determine if there are faces in the images or not.

A simple guide to setting up home server using IIS and ASP.NET

Hey everyone, it’s been a very long time since I wrote anything at all, my apologies, it had been my exams and I had been very busy these days. But, now I’m back. This time I am writing a guide to setting up your own personal server at home. Typically, I write about stuff from ground up, but for the sake of speed, I will like you to have a bit of background of a few of the things. I will try my best to cover them too, but excuse me if I miss a few things. These are because I want to cover a lot of things in this one single guide, and then I will write about other configurations and updates in a later post.

Introduction and Background

I had been working on ways to allow my family to communicate through proper use of their devices, however, every method required a third-party software to communicate. Plus, it required a working internet connection. If the requirement is just the connectivity and not the Internet-connectivity, I thought why not I create a server for home that would let us to communicate, share items without having to pass it through third-party networks, besides, who trusts them? That was not the main reason, the main reason that I also enjoyed building a server for the family. 🙂

In this post, I will walk you guys through building your own web server, you can for sure then update the web application, configure the services as you need! In this post, I will walk you through the following:

  1. Setting up the server.
    • I am using Windows Server 2012 for my purposes. I will walk you through installation of IIS (Microsoft’s web server) and a few other components required. You can install other components as required.
    • Setting up an IP address to be used on your server.
  2. Setting up ASP.NET environment.
    • You do have to install ASP.NET components before IIS can execute ASP.NET code in your web application.
  3. Setting up Web Deploy.
    • I don’t do web development on server (AKA hosting) environment. Instead, I will be developing the stuff on my own laptop. Then, I will require a service to deploy the stuff on the server.
    • I will walk you through setting up the Web Deploy on server.
    • I will walk you through setting up the publish profile file, to be used while publishing the web application to server through Visual Studio.
  4. Publishing and running the web application.

I assume you have the basic ideas and understanding of how this stuff works, what a server is, how your web applications work, how IP addressing works and what a DNS is. I will try my best to explain these components to you too, but if I miss out anything, excuse me. Sometimes my posts do get hard to understand, if they do, just ping me and I will make things clear, it’s really hard to think of so many things at the same time… 😉

Now, I will break the procedure down and will write about them in steps.

Setting up the server

First of all, let’s talk about setting up the server. Nothing special here, just installation of Windows Server. I could have used other servers, but then I would have needed to add patches to my applications and so on. So, instead of this, I would recommend that you just install Windows Server on your machine. You can get an evaluation copy from Microsoft, Try Windows Server 2012. Later, just install the Windows Server, I am sure you know how to do that. Also before you continue, please read the requirements for Windows Server.

You can find the explanation and procedures for installing Windows Server online. Learning procedures are also very much simple. Microsoft itself has invested a lot of good resources online for teaching and fine-tuning IT professionals. So you can learn using Windows Server from there too.

References:

  1. What’s New in Windows Server 2012 R2 Jump Start
  2. Windows Server 2012: Web and Application Platform

Configuring the IP address to be used

If you have ever been in networking, then you already know that every device has an IP address that is used to communicate with it. Since, our server will be the hub for our communications. We need to ensure that the IP address doesn’t change. So, we would assign the IP address to our server which we would like to be used throughout the network.

Note: I will later talk about using hostnames and how to setup DNS servers on your servers for friendly URLs. For this post, let’s keep things simple and numeric.

To open the configuration window, follow the steps:

  1. Open the Network and Sharing center.
  2. Select “Change adapter settings”
  3. Select the device that you are connecting through. There may be an Ethernet connection and a Wireless connection available. Select the one that you want to use. Right click → Open the Properties Window.
  4. We are going to update the IPv4 settings and we are just going to assign the IP address we want the device to use. So, in the list provided, select the option with “Internet Protocol Version 4 (TCP/IPv4)”. Double click.

By default, mostly, “Obtain an IP address automatically” is selected, we are going to override the default settings so we need to change this option to the one that we want. But remember, we don’t want to tinker with the DNS, Subnet mask and the gateway being used. First things that you need to understand are the local addresses in the IPv4 range. A private IP address belongs to the local network instead of the external networks such as Internet. The local IP address ranges are:

  1. 10.0.0.0 to 10.255.255.255
  2. 172.16.0.0 to 172.31.255.255
  3. 192.168.0.0 to 192.168.255.255

So, you can use any of the range from this, and assign this IP to your server. Your router will be able to detect the computer, however, the request won’t be sent to external networks because that is not where the IP address belongs to; local network’s IP address. So, according to my own address, network system and addresses. I will set things to the default ones that my ISP provides me with but will select a random IP address from the local range.

13271833_1069172973149577_1150434510_o
Figure 1: Configuring the IP address for the server.

Later, we will be using a DNS server to configure how we use the service on our devices and so on. Until this step, our server is set up and we can now install the web server to handle the incoming requests and to forward them to a “web application”. Head on to the next step.

Installing the components — and IIS

In Windows Server, you don’t have to get the executables for everything, instead you just enable and disable the services, much like Turning Windows feature on or off. In Windows Server, open your Server Manager.

13288130_1069204476479760_1806657737_oFigure 2: Server Manager application in Windows Server.

In that,

  1. Select “Add roles and features”. This feature is used to add more services to the environment and to add or remove features from the server.
  2. Select “Role-based or feature-based installation”.
  3. Select the server. By default there will be just one server listed. If you have multiple, select the one that you want to use for the installation of the feature.
  4. Select the features and roles that you want to install on your machine.
    • For this section, I will just install IIS server. Select “Web Server (IIS)” and install. It is also recommended that you install .NET 4.5 features from the features list.
    • Add more features as per requirement of your server and the services that you are going to build for.
  5. Finally Install the selected components.

I typically do a machine restart after installing every component or service. This is not required all the times however, most of the times you should restart the machine to ensure that the components are installed and are running properly.

Now let’s dissect IIS sections in bits and study what we got there… To start IIS manager, open the Start menu and search for “inetmgr“, it would give you the application for IIS server.

13271866_1069204489813092_1090144792_o
Figure 3: IIS server main page shown.

You can see that this portal now lets you create new sites, connect to applications, configure the server properties, their IP addresses, domains. Even it allows you to get helpful material from peers such as TechNet, ASP.NET official website, IIS official website and much more. Navigate down to the server, by default IIS has a “Default Web Site” web site created in the environment, which is used to test whether the server works or not. You can here configure and update the server itself. You can modify the certificates, HTTP handlers, SMTP management and everything that is related to your server. Usually, everything will be managed automatically, you won’t need to do anything complex. However, in many cases you will personally have to change the state of the machine and the framework.

13262522_1069204499813091_532248963_o
Figure 4: Default Web Site home page visible in IIS server.

I had installed other components related to ASP.NET itself, which may not be visible in your machine at the moment. If everything is similar, great, if not, continue reading as I will also teach you about configuring the ASP.NET framework on Windows Server.

Look to the right panel, it contains everything that you want to do with your application. It contains quick actions such as restarting the application, configuring the application, installing more services from built in galleries and much more.

Web Platform Installer

Another excellent feature to talk about here is the Web Platform Installer. This application allows you to install the best of the Microsoft products in no time. It scans your machine, checks it for updates, new software package releases and allows you to install them by directly downloading the packages on your machine.

main-webpi-download
Figure 5: Web Platform Installer can be used to install any software package relative to your machine architecture and operating system.

I wanted to talk about this great product by Microsoft, I have really enjoyed it since my days when I was starting learning how to program using WebMatrix. I really miss that tool too, but since Microsoft is no longer updating it, and Visual Studio is a beast, I don’t use or recommend it to anyone.

References:

  1. Adding Server Roles and Features
  2. Official IIS website

Setting up ASP.NET environment

Installing the IIS itself is not enough, ASP.NET doesn’t come pre-shipped with it. You need to go to Server Manager and install the ASP.NET components, I suggest you install maximum of these components. Although, they are not required and only those components are required which you are going to use and which would be required in the production application. In the roles section, go to, Web Server → Web Server → Application Development.

13275301_1069220659811475_904150246_o
Figure 6: Installation of ASP.NET feature on Windows Server.

Select the frameworks that you want to install on your machine. They are required before you can actually publish the stuff on your server. I selected ASP.NET 4.5 and the platform select the dependencies to be installed. I had already installed the framework so it turned that to gray in color to show that the selection is disabled. If you want to select any more features that you want, such as Classic ASP (by the way, why?) then you can select that from the list and then finally go to the final stage and click, “Install”.

This would take some time, depending on many things, such as internet connection, your machine hardware, etc.

I suggest you restart the machine, to ensure things are working properly. Now that everything has been set up, we now need to publish an application to our server that we would be using through that IP address that we just assigned to our servers. But before we do so, it won’t be a good idea to always go back and copy paste or send the files and then replace the files here and there. Even though this is a personal project, things may get really tough and confusing when you have to publish the changes to the server. So, for that sake, we are going to use Web Deploy tool and we are going to connect our development tools with the server itself. You must be familiar with Web Deploy tool, aren’t you?

Setting up Web Deploy

Before continuing to the final stages, I wanted to ensure that all of my changes can be pushed to the servers without having to change and update the content myself. Microsoft Web Deploy is one such feature. It allows you to deploy the content remotely, updating the registries, files and other stuff. However, we are interested in another feature, “Publish Profile” file generation. This is a plain-XML file, used to configure the deployment process of the machines. Currently, Web Deploy 3.6 has been released.

Web Deploy would allow you to publish the changes to your project to your server, hosting environment, in no time! I really love this feature because I have been working on a few updates for my website and Web Deploy proved itself to be very simple, through the procedures like publish profile files where settings are saved in XML, and Visual Studio takes care of connections and publishing. To install Web Deploy, you need to enable the “Windows Deployment Services” role in Server Manager. This role would allow your server to be connected through remote devices for publishing purposes. Later, you can use the Web Platform Installer to install the Web Deploy service.

13275376_1069247266475481_1528371918_o
Figure 7: Windows Deployment Services option shown in gray; third last.

Web PI manages most of the dependencies itself. So, if you select a framework or package to be installed, Web PI would itself manage the dependencies that a package requires to be existing on the machine environment.

13282745_1069247279808813_340198950_o
Figure 8: Web PI showing the list of Web Deploy packages found on the servers.

We’re — almost — done now. The final step is to configure the publish profile file. We would be using that file in our development environment to publish the web application.

References:

  1. Web Deploy
  2. Installing and Configuring Web Deploy on IIS 8.0 or Later

Configuring deployment options

Every application requires a different directory, thus every web application would require a different profile to be used while deploying the application to the servers. I am going to talk about the default ones. The default web site can be configured to support Web Deploy based remote deployment of the application’s source code.

13282383_1069252993141575_1898688729_o
Figure 9: Configuring the web deploy publishing option in web application in IIS manager.

Next you will select the settings that you want to do for the publishing of the application. They are simple and easy to understand.

13262145_1069254479808093_1777487270_o
Figure 10: Web Deploy configuration window.

I will now walk you through these options that you can configure as per your own needs.

  1. User: This is the user account that you will use to publish the website on behalf of. You should create a separate user account and then use their configuration as the authentication while publishing. I used the administrator account because I wanted to keep things simple.
  2. SQL Server connection string: The connection string to be used, for SQL Server.
  3. MySQL connection string: Same as above, but for MySQL instead.
  4. URL: This is the location where the server resides.
  5. Location: This is where you will find this publish profile file once it has been saved.

Once you are happy with the settings, just click, “Setup”. This would process the settings and will finally create the file for you to send over to your development environment. I will leave the development stages and steps for sake of simplicity, instead I will continue to publishing step. I will, however, be adding the references to my previous posts related to ASP.NET programming.

Publishing and running the web application

Once everything has been done, you can just send the publish profile to your development environment to publish the web application. You can send it through any method, any medium as required.

To proceed, select Build → Publish {ProjectName}. This would allow you to select from a bunch of options, what you want to do. Click on “Import” and then select the publish profile file, this would allow you to select the same settings that you have configured from your server.

Screenshot (7025)
Figure 11: Publish dialog in Visual Studio.

Select the file that you just pushed to the development environment. VIsual Studio would automatically read the file and would fill the fields.

The actual XML file content are:

<?xml version="1.0" encoding="utf-8"?>
<publishData>
  <publishProfile
     publishUrl="https://WIN-UEN6KL61CTO:8172/msdeploy.axd"
     msdeploySite="Default Web Site"
     destinationAppUrl="http://WIN-UEN6KL61CTO:80/"
     mySQLDBConnectionString=""
     SQLServerDBConnectionString=""
     profileName="Default Settings"
     publishMethod="MSDeploy"
     userName="WIN-UEN6KL61CTO\Administrator" />
</publishData>

These are the similar values that we had. Now, we can see in the following image that Visual Studio uses the same values and builds the procedure itself. It would use these values to publish the web application.

Screenshot (7026)
Figure 12: Settings for publish profiles in Visual Studio.

It is not required, but you should at least test the connection. This would allow you to test the connection before pushing the web content to the destination.

Note that the “Password” field is empty. Password was not sent on the wire. We are required to enter the password for that user account; that server password. This step depends on how you design the system to publish the web application, if you use another account which doesn’t require the password, this would be a stupid idea in my opinion. So always keep an account (also, remember to keep an account other than the Admin account) and use its credentials. Use SSL to transfer the content on your production servers. After that, you should be able to submit the web application to the server.

Tuning and configuring

Not all the times a web application would work in its first attempt. You will face many problems, many hurdles. There are many good communities available which you can use to ask for help when you run into trouble. Just ensure that you understand what runtime is your application asking for, and which is available and much more.

I won’t write the ASP.NET code here, instead I will just show the default page content that my application has, before I actually show the rendering result of that page.

<p style="font-size: 10em;">Welcome :-)</p>

That would be enough to test the application. 🙂

Screenshot (7027)
Figure 13: Welcome message shown on the homepage of website.

As expected, notice two things.

  1. The IP address that we had set up for the server.
  2. Message that we had wanted to be shown on the browser screen.

This shows that we have now set up the server as we would want to. We can now continue to add more features to it and keep working on them to bring them to devices. 😉 Also, did you notice that I also have API in the navigation menu. It means that I will also post stuff about consuming the Web API through native mobile devices. Many things are coming during these 2 months. I would like you guys to let me know if you find that I have missed something from the post.

Points of Interest

I did have to go through a few problems, because of the resources being locked by IIS. Then there were a few problems with the .NET framework mismatch. Anyways, the process was very simple, robust and fast. I enjoyed building the server and the consumption of the web application.

I did not introduce database usage, authentication, which will be handled later in other posts. However, this post was just intended to explain the basic concepts of building up your own custom server for your own purposes. I will be posting other stuff that I find interesting in this process. I am also going to write it up as a guide that you may want to download later from C# Corner. I really like their way of publishing the content, you can get more of their eBooks from their community website.

I hope, you find this post interesting and simple to grasp. Phew! See you next time. 🙂

Using C# 6 in ASP.NET 5

Introduction and Background

Previously on my blog, I had talked about the new features of C# 6, I discussed many things about those features as well as I talked about whether those features are “actually” new of just sugar coats. Anyways, no disrespect to the hard work team had put forth in implementing those features and I personally like most of those features. For those of you who are interested in reading that post of mine, please redirect here: Experimenting with C# 6’s new features. I hope you will like the post and consider it to be worth sharing.

In this post, I am going to talk about using those features in ASP.NET 5! I think, this would be my last post about ASP.NET 5, because later I would be talking about ASP.NET Core 1.0 which was introduced as the new name for the technologies from now on. Anyways, until then I am going to use ASP.NET 5 terminology and I will explain how you can use C# 6 features in your ASP.NET 5 applications, to make the processes even better, performance efficient and more readable if you are a team of programmers working together to bring a major project.

So basically, what you are going to learn in this post is:

  1. ASP.NET 5: Not very basics, but enough to allow beginners to understand.
  2. C# 6 features: They have already been discussed, so please read the previous post.
  3. How to improve performance of your web application!

This is another major post of mine, comprising of both ASP.NET and C# topics. Typically, I will use ASP.NET more than I am going to talk about C# itself so that web developers can gain some benefit from this post of mine. So let’s get started…

Using C# 6 features in ASP.NET

What we have in ASP.NET is just a framework used for building web applications. C# is just the language, that we can use to program the applications. However, the smoother, efficient and efficient the programs there would be, the better your web applications would perform. C# 6 is the latest version of C# programming language and would definitely use Roslyn compiler. You can use this language in your previous versions of ASP.NET, like ASP.NET 4.5. But for the sake of this post, I am going to use ASP.NET 5!

ASP.NET 5 itself is very fine tuned… But using the power of C# 6, you can make it even better. In this post, I am going to show you a few methods that you can use C# 6 in. I will start in the similar manner that we had previously (in the previous post) and I will explain the code usage in the terms of ASP.NET web application development scenarios, instead of simple C# programming.

String interpolation

Personally, I am a huge fan of this feature because I have waited for this feature for a very long time. I have always been using string.Format function or StringBuilder objects to generate the strings, but using this feature I can easily write the messages that I want to write…

Now, when you are going to write the strings using dynamic data from the users. I would recommend that you write them using the string interpolation. Like this,

var message = $"Hello {Username}, you have {count} unread messages.";

// Then you can use this value in views, or back-end model management, or in HTML
<p>@message</p>

This way, you won’t have to generate the string representations using concatenations, or to create the string builders. I have already demonstrated that this method is similar to what we had as String.Format() function! Only that this method is much better. A real world example of this usage is, that ASP.NET provides interfaces that you can use to trigger SMS and Email notifications. While previously you had to write the following code:

var message = string.Format("Hello, {0}! Use {1} as your code to activate the service.", username, token);

// Send the code through SMS or email services

Basically, that is a good approach, mostly developers use concatenation. Which is a really very bad approach to build strings. Instead now you can do the following:

var message = $"Hello {username}! Use {token} as your code to activate the service";

This is a really very short way of building the strings, and guess what? They always translate down to string.Format function calls. 🙂

Conditional try…catch

Now, I have been mostly watching the source codes of programmers to be like:

try {
   // Code that may raise exception.
} catch (Exception er) {
   if(er is NullReferenceException) {
      // Log this null error
   } else {
      // Chain the exceptions or just leave...
   }
}

What this is, that it would always enter the catch block. Then, inside that block you would be checking the condition that you want to check. So, in C# 6, you can make it even more readable. You can change that code to be like this:

try {
   // Code that may raise exception.
} catch (Exception e) when (e is NullReferenceException) {
   // Execute this block in case the error was "null" reference.
} catch (Exception e) when (e is UnauthorizedAccessException) {
   // Execute this in case the exception was this one..
}

// You can chain the exception conditions...

This way, you can allow the exception to propagate back if you are not interested in logging the error on your end. The condition would be checked against, and then it would continue to next statement if the condition is not met.

nameof operator

In ASP.NET environment, I think this variable would have the most use! How? Most of the times, developers have to “guess” the variable and then write its own “hardcoded” name. For example like this,

string name = null;

// Now when you will call any function on name, 
// it would raise exception. Like:
int length = name.Length;

// Before C# 6, you would do:
// inside catch block 
var message = "Sorry, name was null.";

That is OK! There is no problem with this one… But, what if you later refactor your code and change the name of that variable? Even if the changes are not going to be reflected on the production environment, you are still going to use the details on your development environment. So what you would have to do is that you would have to change these string literals too, just to depict the changes in the system.

Well, C# 6 got you covered for that. You can now know which variable was the problem in your code.

string name = null;

int length = name.Length;

var message = $"Sorry, {nameof(name)} is null.";

That is same to what we had previously, but what is difference? The difference is that now you will be able to refactor the variable. By refactoring, previously, you would have to edit the strings too, instead in this method, while refactoring the variable names would be updated throughout and nameof() operator would return the “current” name of that variable! Also, if you were making a model and then rendering it…

class Model {
   public string Name { get; set; }
   public string Email { get; set; }
}

// You could do this:
var message = $"{nameof(Email)}: {Name}, {nameof(Email)}: {Email}";

Fully using the power of C# 6!

Null conditional operator

What I have seen in most of the cases, in my experience is that beginners typically get stuck at “NullReferenceException”! Anyways, what I think is that this error is very helpful in many cases and I suggest that you become a friend with this error, as it can be really very helpful in many cases. (Which cases? That requires a separate article post!)

You can then basically minimize the error if the error is to be null reference object. To do that you just append “?” to the variable name, and if that object is null at the time of execution, C# won’t throw an exception instead it would store null in turn.

string message = null;

var length = message?.Length;

In the previous case, it would throw an exception. However, in this case there won’t be any exception. But there is another “exception” to this use. I have already talked about that exception, the thing is… Your “length” variable is now also null, so if you would try to use that variable, it would then raise another error unless you use the same condition to override it.

I recommend that you read the same section in my previous post, and see how this operator “is” useful and how this operator “is not” useful at all.

Auto-properties

In ASP.NET, Models are typically just structures. You don’t have any default value in them, but if you would want to design your structures to hold a default value that you want to display when user is opening the form. You can do so like this:

class SomeForm {
   public string Name { get; set; } = "Your name.";
   public string Email { get; set; } = "youraddress@example.com";
   public string Message { get; set; } = "Enter your message here.";
}

When you would now render these as form elements, you are going to get these by default. You usually enter these in the HTML, hardcoded form. Instead, using this approach you can get a consistent and dissected environment in which you can later focus on the model itself, later.

You can also use the same for getter-only properties. The getter-only (or readonly) fields can also be initialized in the same manner:

public Helpers {
   public static string SMTP { get; } = "smtp.example.com";
}

This would allow you to manage the value in this one line itself, instead of using a constructor to initialize it with a value.

Lambda use in ASP.NET

If not string interpolation, then I am a huge fan of lambda expressions! These expressions come from the realm of functional programming. The benefit of them is that they don’t have any side-effects. By that, I mean that the function is just the evaluation of the values and then the values are returned instead of having a stack created for the function itself.

public int Multiply (int a, int b) { return a * b; }

This can be minimized to the following code,

public int Multiply (int b, int b) => a * b;

There are two benefits to having this.

  1. The code looks more readable.
  2. There is no more stack!
    • The code is evaluated and the value is returned.

So not just this improves the code readability, it also improves the performance of the code! You can try that out, and just to see the working, you should read the previous post.

Another good use of lambdas is in getter-only auto-properties! Old versions of the properties always relied on a backing field. These fields were then called to provide or set the values. However, that caused an extra call to be raised to the backing field. What lambda expressions have is that you can write a field like a  lambda, just as we know that lambda expressions don’t work around with other fields, this way… The lambdas would help us to develop readonly fields in a much better way.

So, for example, if you create a property like this:

public string Name { get; } = "Afzaal Ahmad Zeeshan";

What this is going to do is that it would create a backing field, then this value would be stored to that backing field. In turn, whenever you would call this property, it would then call the backing field to get that value. Another call would be made.

Instead, using lambda expressions you can do this:

public string Name => "Afzaal Ahmad Zeeshan";

What this has as a benefit is that,

  1. Since this is a readonly property:
    • You are not going to update it later.
    • You provide a default value in this.
    • It acts just like a constant field.
    • No overhead calls.
  2. More readable code!

Lambdas not just make your functions better, it also makes your (readonly) properties better! Technically, you can improve the performance of your applications.

Points of Interest

I have not yet covered all of the features that C# 6 introduced, why? Because most of them are not going to be used by “average” developers and only a number of people would be using them. A few of such cases is

  1. Index initialization in the dictionary.
  2. Parameterless constructor of struct type.
  3. So on…

However, this post would help you to understand the use of C# 6 features in ASP.NET web applications. You have already read that not just this improves the syntax, instead it also makes the application perform much better.

I would personally recommend the following uses to be made “must have” in your web applications:

  1. String interpolation
    • Makes your string much more readable.
    • String template can be edited easily.
    • Translates to the better method of generating the strings.
  2. Lambda expressions
    • You have read that lambda expressions make your functions more efficient.
    • The getter-only auto-properties are more like constant fields.
    • Auto-properties are much more readable.

These were a few of the tips that I wanted to give to those ASP.NET web developers who are going to use Roslyn compiler and are going to make use of C# 6 langauge. If you are into C# 6, I “recommend” that you make use of these cool features.

Later, I will share some more of the same tips and recommendations, once I have finished recording them for you. 🙂

Creating a “customizable” personal blog using ASP.NET

Introduction and Background

I don’t want to speak too much in this piece of article, instead I just want to demonstrate the presentation that I have to make today. This article is a short piece of “long report” that can be considered as an answer to most common question, “How to create a blog in ASP.NET?”

Well, I find it most compelling that most people are unaware of what a blog itself is, because if they knew they could just play around with ASP.NET to build one for themselves in a night or two. In this article I will discuss a few steps that are needed to be followed while creating your own blog. I am not a good designer, so please forgive the most annoying design that you are going to witness in coming sections. But I promise I will give you an overview of a “blog in ASP.NET”. The facts that I will talk about, or the reason that you should read this article is that this article is not a “specific” how to for my own procedures. Instead, I am writing this article to give you a brief overview of what a blog is, what ASP.NET has in it for you, how you can create it and not just that, but also, how you can create a blog with all that you have. In most cases, you just have a small area for hosting with less HDD space and no database. I will cover what to do in such cases too. Just read the post.

To add some “content” I wrote a Windows 10 client application to consume the blog posts through ASP.NET Web API. I am sure in most cases this Web API thing for ASP.NET blog posts would interest you.

What is a blog, anyways?

Putting the content here simple, a blog is a place where you can share, what you want, anytime you want, with anyone you want! That is a general type of blog being used. Blog is a short form for weblog (logging, makes sense?). More specific types of blogs come depending on your content. Some of blog categories are as below:

  1. Microblogs
    Compact and straight-forward blogs. 140 characters beast, Twitter, is an example of this type.
  2. Personal blogs
    Anyone can create them and they are very much personal, demonstrating only one person. Your website can be your personal blog.
  3. Media blogs
    You can share the images, videos and other multi-media content in media blogs.

So basically a blog is just a website for sharing the content. If you ever created an online website for sharing the content, current work information, regular “diary”, then you have already worked on developing a personal blog. Blog is just a term given to online log system, where you can “log” your regular discussion topics.

So, in this article post I am going to cover a basic application that can act as a blog for someone. As an additional support I will also give you an idea of using ASP.NET’s Web API to promote your blog on native applications, such as a native Windows 10 application that loads the content from your only blog and display the blog posts to users natively.

Getting started with ASP.NET

Since most of the readers are currently not upgrading themselves to ASP.NET MVC 6, I will use ASP.NET MVC 5 (not ASP.NET 5) to show you how to do it. Things are very much similar in ASP.NET MVC 5 and ASP.NET MVC 6. The common things that I have found to change in the coming versions is that ASP.NET is now cross-platform, so if you continue to write the same application by following my article, in ASP.NET MVC 6, you will be able to run it on a server in Ubuntu, or Mac and so on. But that is not a big deal here, is it?

I will be using ASP.NET MVC 5 (not ASP.NET 5!) to demonstrate how to build your own ASP.NET personal blog. But before I get Visual Studio started, I wanted to explain the term “customizable”, which is used in the title of my current article. By the term “customizable” I mean

  1. A blog that is entirely flexible. You can integrate plugins, or update the theme and so on.
  2. A blog that doesn’t rely on a specific third-party framework, even a data source.
  3. A blog that is built just on top of ASP.NET assemblies and doesn’t require you to do anything at all.
  4. A general blogging platform, which can be then altered to create
    1. Social blogging service.
    2. Personal CV house
    3. Your own website to demonstrate your services
    4. So on and so forth.

In simple, the blog can be altered to your own needs and requirements. After all an ASP.NET blog is just an ASP.NET web application that you have modified to suit your own needs.

At this stage I would ask you to create a new ASP.NET project in your own machine, in the next section I will continue with the next things, like create controllers, defining the Views and so on. So, it would be good for you to create a new project at this moment and continue with the article next.

Building the application

First of all, I would like to share how I actually built the ASP.NET web application to be able to host my blog. I am going to use a web interface and an API interface, to be able to consume the blog from multiple native applications. So, I will talk about the ASP.NET programming in this section and then I will talk about the Windows 10 application programming, to actually consume the blog posts and show it to the users in a “native experience”.

Web interface controller

First of all, I will consider building the web interface to be able to showcase the blog on the internet, using a browser. This is what ASP.NET was initially developed for. To build web sites, and web applications. Web applications were introduced a bit later and then was introduced the Web API and so on. So, I am going to use the very basic concepts of ASP.NET MVC to build a simple web application, that can “act” as a blog.

If you are novice to ASP.NET, because most of the times the question (in the title) is asked by a beginner in ASP.NET, so if you have no idea about ASP.NET, please read the previous posts of mine that cover ASP.NET in a great detail and would help you in understanding and learning every bit of ASP.NET programming, as from a beginner’s perspective.

  1. Understanding ASP.NET MVC using real world example, for beginners and intermediate
  2. Novice to MVC? Read this… (ASP.NET MVC is implementation of MVC pattern of software development, this post talks about MVC not ASP.NET MVC)

I will continue to share more of my articles and posts, as the topic proceeds. I would recommend that you read the above posts if you are new to ASP.NET, most of the concepts like Controller, Views and Models may cause a confusion to you, if you are a newbie!

Almost there…

I am very much fan of JSON data, I prefer using JSON over SQL databases and thus I am a fan of Newtonsoft.Json library. So, please consider installing the library before moving further. This library would be the backbone for our data source.

PM> Install-Package Newtonsoft.Json -Version 7.0.1

Once this package gets installed, please continue to the next section.

1. Build the model for application

In my case, I always prefer building the models first. This gives me an idea of building the controllers and then building the views for the application. So, I would also give you a tip, to always build the models, data structures first and then continue to build the rest of the stuff.

The model we need is just a model for the blog post. So, the structure would just be as easy as the following,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using Newtonsoft.Json;

namespace PersonalBlogTemplateWithServices.Models
{
     public class BlogPostModel
     {
         // General properties
         public int ID { get; set; }
         public string Title { get; set; }
         public string Content { get; set; }
         public List<string> Tags { get; set; }

         // Time based properties
         public DateTime CreateTime { get; set; }

         // Other properties and settings may include UserID, RoleID etc.
      }
 
      // The class to manage the data-sources
      public class PostManager
      {
          // Define the members
          private static string PostsFile = HttpContext.Current.Server.MapPath("~/App_Data/Posts.json");
          private static List<BlogPostModel> posts = new List<BlogPostModel>();

          // The CRUD functions
          public static void Create(string postJson)
          {
              var obj = JsonConvert.DeserializeObject<BlogPostModel>(postJson);

              if(posts.Count > 0)
              {
                  posts = (from post in posts
                           orderby post.CreateTime
                           select post).ToList();
                  obj.ID = posts.Last().ID + 1;
              } else
              {
                  obj.ID = 1;
              }
          }

          posts.Add(obj);
          save();
      }

      public static List<BlogPostModel> Read()
      {
          // Check if the file exists.
          if(!File.Exists(PostsFile))
          {
              File.Create(PostsFile).Close();
              File.WriteAllText(PostsFile, "[]"); // Create the file if it doesn't exist.
          }
          posts = JsonConvert.DeserializeObject<List<BlogPostModel>>(File.ReadAllText(PostsFile));
          return posts;
      }

      public static void Update(int id, string postJson)
      {
          Delete(id);
          Create(postJson);
          save();
      }

      public static void Delete(int id)
      {
          posts.Remove(posts.Find(x => x.ID == id));
          save();
      }

      // Output function
      private static void save()
      {
          File.WriteAllText(PostsFile, JsonConvert.SerializeObject(posts));
       }
    }
}

In the model , I have the following attributes that can be used to identify or describe the blog post at the instance.

  1. ID
  2. Title
  3. Content
  4. Tags (is an array; List)
  5. CreateTime (used to sort the items)

Great, we now have a model, and now we can continue to write the rest of the logic for our application. The model implements the CRUD functions, that we can call from external objects, from both, web interface and from Web API interface. This would allow us to manage the data layer in this class.

2. Creating the controller

Alright, first of all, create the controller. The controller would have the actions that we need to perform in our blog. Please pay attention to the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using PersonalBlogTemplateWithServices.Models;
using Newtonsoft.Json;

namespace PersonalBlogTemplateWithServices.Controllers
{
    public class BlogController : Controller
    {
        // GET: Blog
        public ActionResult Index()
        {
            // Read the list
            var blogs = PostManager.Read();
            if (blogs == null)
            {
                 ViewBag.Empty = true;
                 return View();
            }
            else
            {
                 // Just for sorting.
                 blogs = (from blog in blogs
                          orderby blog.CreateTime descending
                          select blog).ToList();

                 ViewBag.Empty = false;
                 return View(blogs);
            }
        }
 
        [Route("blog/read/{id}")] // Set the ID parameter
        public ActionResult Read(int id)
        {
            // Read one single blog
            var blogs = PostManager.Read();
            BlogPostModel post = null;
 
            if(blogs != null && blogs.Count > 0)
            {
                post = blogs.Find(x => x.ID == id);
            }

            if(post == null)
            {
                ViewBag.PostFound = false;
                return View();
            } else
            {
                ViewBag.PostFound = true;
                return View(post);
            }
        }

        public ActionResult Create()
        {
            if (Request.HttpMethod == "POST")
            {
                 // Post request method
                 var title = Request.Form["title"].ToString();
                 var tags = Request.Form["tags"].ToString().Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                 var content = Request.Form["content"].ToString();

                 // Save content
                 var post = new BlogPostModel { Title = title, CreateTime = DateTime.Now, Content = content, Tags = tags.ToList() };
                 PostManager.Create(JsonConvert.SerializeObject(post));

                 // Redirect
                 Response.Redirect("~/blog");
            }
            return View();
        }

        [Route("blog/edit/{id}")]
        public ActionResult Edit(int id)
        {
             if(Request.HttpMethod == "POST")
             {
                 // Post request method
                 var title = Request.Form["title"].ToString();
                 var tags = Request.Form["tags"].ToString().Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                 var content = Request.Form["content"].ToString();

                 // Save content
                 var post = new BlogPostModel { Title = title, CreateTime = DateTime.Now, Content = content, Tags = tags.ToList() };
                 PostManager.Update(id, JsonConvert.SerializeObject(post));

                 // Redirect
                 Response.Redirect("~/blog");
             } else
             {
                 // Find the required post.
                 var post = PostManager.Read().Find(x => x.ID == id);

                 if (post != null)
                 {
                     // Set the values
                     ViewBag.Found = true;
                     ViewBag.PostTitle = post.Title;
                     ViewBag.Tags = post.Tags;
                     ViewBag.Content = post.Content;
                 }
                 else
                 {
                     ViewBag.Found = false;
                 }
             }

             // Finally return the view.
             return View();
         }
    }
}

The above code, is enough! This code contains the code that you may be needing. Now, I think I need to explain the code a bit.

I have implemented the CRUD functions, in this manner, I created the functions that would allow me to create a new post, read the list of posts, read a single post at the web page or perform other functions, like update the post. You can also see, that most of the codes and functions are being called from the model. That is why, I designed the model before I created the controller. I think now you understand the importance of a model before controller.

The controller would simply capture the request, extract the data from it and then pass the data and request over to the Model. The model would then perform as per our request and return a response, which can then be sent back to the client. The purpose of such a design, is to create a web application being consumed over by Web API too. In the later sections I will consider sharing that too.

Until now, the web application is able to show us messages on the blog. If we have created a post, it will show us the post otherwise it will show us a message that there is no post currently available.

3. Creating the views

Views are simple enough to be understood easily! If you have been developing using HTML, I won’t explain them. If you haven’t, go learn! 🙂

Default page…

The default page for the blog would be simple one, it would either enlist the blog posts otherwise show a message.

For this page, I would instead show the HTML code, and for the rest of the pages I will show the images, because I want to demonstrate how to use the actions.

@model List<PersonalBlogTemplateWithServices.Models.BlogPostModel>
@{
    ViewBag.Title = "My Blog";
}

@if(ViewBag.Message != null)
{
    <h4>@ViewBag.Message</h4>
}

@if(Model == null || Model.Count == 0)
{
    <h4>Blog empty</h4>
    <p>Either under development, or author is busy. Visit back again later! :-)</p>
    <a href="~/blog/create">Create new post</a>
}
else
{
    <h4>My blog</h4>
    <p>Read my blog posts below...</p>
    // Content is available.
    <a href="~/blog/create">Create new post</a>
    foreach (var post in Model)
    {
       int tagIndex = 1;
       <h4><a href="~/blog/read/@post.ID">@post.Title</a></h4>
       <p>
       @foreach (var tag in post.Tags)
       {
           if(tagIndex == post.Tags.Count)
           {
               <span class="tag"><a href="~/blog/tag/@tag">@tag</a></span>
           }
           else
           {
               <span class="tag"><a href="~/blog/tag/@tag">@tag</a></span>
           }

           tagIndex++;
       }
       </p>
   }
}

The page uses the conditional values from the controller. You may have noticed the value from Controller, which is passed as a model (of type of the BlogPostModel). I have checked against that, to see if there are any posts in the data source. That is pretty much simple and straight-forward. The main thing to see, if what happens if there is a new post in the data source. Consider the next section, please!

Creating the post

When you create a new post, you follow the hyperlink, which takes you to a page where you have created a form and so on. I am not much a designer-type, so the UI is very ugly. You can make it better if you want to.

The view for “C” in “CRUD, is something like this.

@{
 ViewBag.Title = "New Post";
}

<h2>Create new blog post</h2>

<form method="post">
    <label>Title</label>
    <input type="text" name="title" style="" class="form-control" placeholder="The headline goes here..." /><br />
    <label>Tags</label>
    <input type="text" name="tags" style="" class="form-control" placeholder="Separate each tag using a comma ','." /><br />
    <label>Content</label>
    <textarea name="content" class="form-control" style="height: 300px;" placeholder="What would you like to write?"></textarea><br />
    <input type="submit" style="width: auto; font-weight: 600;" value="Post" /><br />
</form>

Very simple though, yet powerful! Power is in your hands. Add some, or leave it if you do not want to share the admin panel with anyone. 🙂 Once this page gets loaded, it takes the following web page shape.

Screenshot (219)
Figure 1: Create a new blog post page. Form is filled.

The above HTML takes this shape. The HTML looks clean because of hard work of

  1. ASP.NET team for providing a template.
  2. Bootstrap guys, Twitter bootstrap is being used here (is provided along with ASP.NET template)

You can now submit the post. Alright, until now things are pretty neat and simple. Do you have any questions? Please re-read this section. 🙂

Reviewing the default page now

If you go back to the default page now, you will see that the blog would now enlist the posts (currently only 1). The following is the image, you already have the HTML for this page.

Screenshot (220)
Figure 2: Default page showing one blog in the list. 

Now the page is able to demonstrate that we have a post, it displays the tags and name. Nothing else. After all, why would we show anything else on the default page?

Reading the blog posts, one by one

If you could read the HTML for the default page, you will see that the title of the blog post is actually a URL to the blog post, to be read. I have created the action for that (please read the controller code for Read action). This would let us now read the content,

Screenshot (221).png
Figure 3: Reading the post, shows date time, content and tags. 

This is how I display the content. I agree, a very bad design. But I am very bad at designing the web applications. (I know, my first attempt went wrong because IDs were null and… Ah, you get it the second time, didn’t time? Quit whining!)

I used the following HTML code for this, the thing was that I just wanted to display the blog post, in a very simple way. Indeed in your case, you will write something much more useful. But, at the moment, just read this.

@model PersonalBlogTemplateWithServices.Models.BlogPostModel
@{
    ViewBag.Title = Model.Title;
    var tagIndex = 1;
}

<h4 style="font-weight: bold;">@Model.Title</h4>

<p>@Html.Raw(Model.Content.Replace("\r\n", "<br />"))</p>
<p>Posted by &mdash; Afzaal Ahmad Zeeshan &mdash; on @Model.CreateTime.ToString("MMMM dd, yyyy 'at' hh:mm tt")</p>
<p>
    Tagged under:
    @foreach (var tag in Model.Tags)
    {
        <span class="tag"><a href="~/blog/tag/@tag">@tag</a></span>
        if (tagIndex == Model.Tags.Count)
        {
            // In the end, write the edit hyperlink
            <span><a href="~/blog/edit/@Model.ID">Edit</a></span>
        }

        // Finally increment the index
        tagIndex++;
    }
</p>

So, this code would give us the post. I have many things hardcoded, like, “Posted by &mdash; Afzaal Ahmad Zeeshan &mdash; on {Date Time}”. You can change it, to see who is the author and so on. There are many other things to be taken care of.

One thing to understand is that your HTML is not the same that gets saved in the data source. So, you might need to re-consider the HTML, then render it using Html.Raw function. Have a look at the following code, for example,

<p>@Html.Raw(Model.Content.Replace("\r\n", "<br />"))</p>

Now, each of the occurrence of “\r\n” would be replaced with the breakline object in HTML. This way, you can re-build the HTML and show it as plain text on the HTML web page.

Updating the posts

The final concept that I will be talking about here would be of updating the posts. Updating is similar to creating the new post, but just that you also provide the previous data that you are having. Title, content and other stuff can be provided and then user is allowed to update them as required and then you save it back to the data source.

I have used the same HTML form in this case,

@{
 ViewBag.Title = "Edit the post";

 var tags = string.Join(", ", ViewBag.Tags as List<string>);
}

<h2>Edit the post</h2>

<form method="post">
    <label>Title</label>
    <input type="text" name="title" style="" class="form-control" value="@ViewBag.PostTitle" placeholder="The headline goes here..." /><br />
    <label>Tags</label>
    <input type="text" name="tags" style="" class="form-control" value="@tags" placeholder="Separate each tag using a comma ','." /><br />
    <label>Content</label>
    <textarea name="content" class="form-control" style="height: 300px;" placeholder="What would you like to write?">@ViewBag.Content</textarea><br />
    <input type="submit" style="width: auto; font-weight: 600;" value="Post" /><br />
</form>

This is similar to what we had previously. But it renders along with the previous data we had.

Screenshot (222)
Figure 4: HTML page showing the form to edit the previously updated post.

As you can see, the post contains the previous data, but also allows me to update the post. This is useful, in cases when you want to update the post. I am adding a new paragraph line, which would then be rendered as it is being written.

Tip: This is not WYSIWYG editor, just a plain-textarea. You should get a WYSIWYG editor if you want to be able to use the full power of HTML in your post.

Now, once I will submit this, it would get published as this version. Please revise the controller action,

if(Request.HttpMethod == "POST")
{
    // Post request method
    var title = Request.Form["title"].ToString();
    var tags = Request.Form["tags"].ToString().Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
    var content = Request.Form["content"].ToString();

    // Save content
    var post = new BlogPostModel { Title = title, CreateTime = DateTime.Now, Content = content, Tags = tags.ToList() };
    PostManager.Update(id, JsonConvert.SerializeObject(post));

    // Redirect
    Response.Redirect("~/blog");
 }

This demonstrates, how you will update the post. Once again, we are using PostManager, the object we created in our model to be able to perform the actions. The post is now updated, have a look at the revisit to the post preview. Screenshot (223).png
Figure 5: Updated post preview.

This now shows the updates being made. It is also clear as to how the new line is added to the post. Pretty simple it was, but I wanted to demonstrate the concept of this too.

Adding new posts

One more thing is, to add new posts. This is same, requires just a view. I am about to give you an overview of adding new posts, multiple posts and how does this preview them on the default page.

Screenshot (224).png
Figure 6: Creating a new blog post, second one.

This is similar, the only thing to understand is how is it rendered on the blog.

Screenshot (225).png
Figure 7: Two posts being previewed.

The thing that I wanted to share here, is that ASP.NET won’t automatically sort the posts, you would have to do that yourself. If you pay attention to the LINQ code, you will understand it.

// Just for sorting.
blogs = (from blog in blogs
         orderby blog.CreateTime descending
         select blog).ToList();

This would now sort the blogs, a descending order. That is why, “Two posts” shows above, whereas in the JSON data it would come after the “First blog post!” But we have now sorted the list as per our requirements.

Heading over to Windows 10 application and Web API

Before I actually head over, I want to make a final post, that would be read in the application! Please see the following image, then we continue to the next section.

Screenshot (226).png
Figure 8: Final post online.

Web interface has been discussed enough, the next sections will talk about the Web API and Windows 10 application programming.

Further reading:

If you want to get more in-depth information, please read the following documents and articles.

  1. A tip for ajax developers in ASP.NET MVC framework
  2. Getting Started with LINQ in C#

Web API and Windows 10 client application

In this section, I will first talk about the ASP.NET Web API and then I will build the application to consume the API and show the blogs. In the client application, we do not need any functions, like create, update etc. We just consume and display the data, so the client application won’t have enough functions but it would display the content.

Building the API

Actually, the API is simple and does not need anything to be done! The application has already been completed, so our API would only redirect to the application and load the data from the model and return it. API does not need to have any HTML data or CSS stylesheets, instead API just returns the data in JSON or XML format. I personally recommend and always will recommend using JSON. XML is a very heavy format and is also not efficient. JSON is much simple, lightweight and portable format!

The API is just a controller, with the same actions that we need and a return-type. Since we do not need any functions but C (from CRUD), I defined the API to be as simple as,

using Newtonsoft.Json;
using PersonalBlogTemplateWithServices.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace PersonalBlogTemplateWithServices.Controllers
{
    public class BlogApiController : ApiController
    {
        // In this controller, we just need the Read functions. Nothing else!
        // We do not need the clients to be able to write or update the blogs... Just read them

        [HttpGet]
        [Route("blog/api")]
        public List<BlogPostModel> Get()
        {
            return PostManager.Read();
        }
    }
}

Small, but enough.This would let us consume the API from our client application. There is also no need to edit the API configuration, because I have provided the Routing scheme to the function.

[Route("blog/api")]

This would automatically get routed to this URL. The rest of the functionality is to be provided by the application.

One thing to note, is that this function again, reads the data from the model and returns is, as a collection. This would then be translated as JSON data later. So our application will be able to use the JSON converters to get the data from the API and render it on the application.

I hope things for API are clear upto this stage! If not, please re-read. I think the post is pretty much simple. 🙂

Building the client application; Windows 10 application

Great, until now you have learnt how to build the online blog, that has a web interface and an API interface. I will continue with the next post, to teach you how to consume the API, the post has gone way more than I was expecting (it overwent 4k words).

Read the above article and leave your feedback, I would love to hear it!

Points of interest

Thank you for reading the post, I have shared a common, yet easy and simple way to build your own blog. The post contains the information that you may need to have to create your own online personal blog. I have not shared any third-party library because I want you to be able to add your own. The blog is built on top of native ASP.NET frameworks.

In a later post, I will also share the common concepts for building the data sources, so that the only dependency of “Newtonsoft.Json” would also be removed from this project. Until then, please bear with me.

One more thing, the text editor used is plain-textarea, you can replace it with your favorite WYSIWYG editor to be able to use the power of HTML, then render the HTML on the screen.

In coming days, I will write two more posts:

  1. Consuming the Web API from Windows 10 application.
  2. Building your own custom data sources.

Stay tuned for more of such content! 🙂

How is strong password, a strong password?

Introduction

Using the Internet, well, either that you’re a guest or you’re a member of the website that you’re visiting right now to read this post. If you’re a user, you must have logged in using a form, where you were asked to enter a password. That password is your key to your vault in the server, if misplaced, anyone can use your vault for any purpose. That is why it is mostly asked to use a Strong password and at the very same time a strong-o-meter or a secure-o-meter is also given for the user to understand whether the password that he’s using is a strong one, or not strong.

Password

A password is a set of alphanumeric characters used as a key to let the users authenticate them self to use a service. It can be a few letters long, containing a Capital case, any integer (such as numbers) or some special characters. Making it a stronger combination of the characters in a string which, no one other than himself can know to authenticate himself. Think of it just like the code combination of your locks for the safe. If you share that code with anyone else, he can (if not surely) use that code for some personal uses, might even steal things or read confidential content from your safe.

Websites are just like safe that you use in your houses. On websites you can store your personal data, your contacts or lists that contain a To-do list. The code for the website is known as a Password. At the time of creation of membership account, the users are asked to enter a password that will be used as their key which the user would have to enter before continuing to the service to be consumed by him.

Securing the Password

Once the password has been shared by the user now it is the time for the website owners, more like the developers to try their best to secure the password. The technique they use is called “Password Hashing” in which a hash of the password is generated, which is not identical to password in any way and also it is not-understandable by the humans in any way. This method makes the password secure, not only that any human user can never read and understand the string, but in a way that this string is not convertible back to its original form. There is no chance for the user, or hacker to convert the string saved inside the database to its original form to get the code.

Tips for a strong password:

The above mentioned things are the precautionary measures taken on the service side. User is not involved in this, in any way. The hashing process is completed on the server-side. Before that, the user comes into action and it is his responsibility to choose such a password that is not directly or indirectly guess-able by others but him. This might include special characters, numbers and other alphabets collectively.

Best method to create a strong password, is to avoid usage of words from dictionary and try to make up words from common language, chatters etc. Also you must include numbers, special characters to the password as much as you can. This is why, because most of the times when the hash is generated, it can be regenerated using the same password. Including special characters, numbers would minimize this problem to occur, to prevent cracking of the passwords.

Where to start from?

Many new developers ask the question to themself and to other fellow developers. The question is simple, for me and for old developers but, it is not easy for the new ones. Question is, ‘Where to start the journey?‘. I had the very same question when I started the journey of development.

I first became a Web Developer, I learnt HTML basics and CSS basics at w3schools.com, but I won’t recommend that website to others. They do have an editor and show some of the code. But they’re not good at explaining the code. They just explain that this code would do this. But not, why this code would do this.

I would recommend using Mozilla Developer Network, if you need an editor (currently, Mozilla doesn’t support this feature. If, when you’re visiting this page, Mozilla adds this, comment please) to test your HTML knowledge, you should go with any online text editor like jsfiddle.net. Otherwise, you can even use your very own NotePad to do this. Here is the process for that

  1. Open the Notepad in the Windows, or any other OS. Just make sure you can write the text in it.
  2. Write the HTML codes, make sure, you’re having the HTML elements properly opened and closed.
  3. Saving the file. Here is the main part, just write the file name and add the format of html or htm, like this
    fileName.html

This would create a Browser file for you. Once you click on it, browser would load the file and will show the HTML content to you.

Pretty easy right?

Once you’re good to go with the HTML thing. Try creating something. Like a personal landing page, using all the HTML elements and other stuff like that. After this, you should go for a server-side language and Install the Softwares required and all that kinda thing. I think I had that covered in the other page.

Printing the page

I had to go through the printing process as I got a new project from my cousin. On my way, I never ever did such a job which involved printers or hard copy format for the documents. Now that I had the job for that, I started looking up for some resources. I did know that I can use CTRL + P key command to print. But, how to integrate all that inside the HTML document, I was making up some assumptions. And this was what I got.

First thing was to print the page. So for that you can create a button element inside your HTML document and handle it using jQuery for the print event. Here is the code for that:

<button>Print</button>

/* Script part */
$('button').click(function () {
  window.print();
}

Now the browser would show a simple window, where you would get more options to control the printed version of the page. You can either set them there, or you can use the code to control the page layout even more better. What you would try here is CSS3’s Media Query.

Here is the example, lets assume we’re having a div inside the body element. Which is having the id of printable and all the other body is given the id of non-printable. Now in the CSS you were taught for the usage of Media Query.

You can use this code:

@media print {
  #printable {
    display: block;
  }
  #non-printable {
    display: none;
  }
}

That was enough here. Now you can use this code to view only the printable part of the page. Which would be helpfull to save the page and to get the desired output.

Some other tips you might need to use:

  1. Always use CSS3 media query to stylize the printable version.
  2. Always keep the width larger so that height of the page is less. Saves the page!
  3. Always keep the note on the page by clicking the button or by Print command. To keep a note on the printed version too.
  4. Keep the font-size short and easy to read.
  5. Use short sentences and good punctuations. It makes the document better to be read. Less words save the space
  6. Always remember to remove the margins and paddings from the body element. Printer would automatically add the margin and paddings to the page which would be enough.