How to – Sibeesh Passion

Validation Using Template Driven Forms in Angular 5

SibeeshVenu — Sun, 22 Apr 2018 15:58:46 +0000

[toc]

Introduction

In this post, we are going to see how to do validation using template driven forms in Angular 5, this is just a different approach that you can follow, as we have discussed another way in our previous post. At the end of this article, you will get to know how you can implement validations in Angular 5 application using Template Driven Forms. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. We are going to see Template Driven Forms approach here.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Install Bootstrap

Before we begin, let’s install bootstrap in our application.

PS F:\My Projects\ng5> npm install bootstrap --save

As we are developing this application using Angular CLI, we can add the reference of Bootstrap in our Angular-CLI.json file. The styles section of that file will look like below after you add the reference.

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]

Please be noted that there are many other ways to configure Bootstrap in our application, here we are not going to explain that.

Importing ngForm to a variable

Let’s clean codes in our Registration component and add a new form which has a form variable, and this form variable can hold the values of our form. There are many things you can do with this variable, for now, let’s say it is our model values container.


  
    
      
        
          
          Sign up
          Trust us for your data, and sign up

import { OnInit, Component } from "@angular/core";

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}

Implement Validation for User Name field using Template Driven Forms

As we have created our form, now it is time to generate out input controls into it.

What we have above is a simple HTML with template driven form, where we are going to introduce the validation. Let’s modify the userName field now.

What we are trying to achieve by the above code is, creating a reference variable userName and assign the input value to it. Basically, this is a two-way binding, where we can set the data from our component and update it in the form, and vice versa. Now if you run your application, you should see an error as below.

Uncaught Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26025)
    at PropertyWrite.visit (compiler.js:4585)
    at convertActionBinding (compiler.js:25475)
    at eval (compiler.js:27987)
    at Array.forEach ()
    at ViewBuilder._createElementHandleEventFn (compiler.js:27983)
    at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:27620:27)
    at eval (compiler.js:27928)
    at Array.map ()
    at ViewBuilder._createNodeExpressions (compiler.js:27927)

This is because we are using the same name for both model and reference variable. So we should change it. To do so, let’s create a User Model (user.model.ts) and reference it to our Register component.

export class User {
    id: any;
    userName: string;
    email: string;
    userRole: string;
    profileImage: string;
    phoneNumber: string;
    firstName: string;
    lastName: string;
}

import { User } from '../models/user.model'

Now we can change our input as below.

Please make sure that to declare a user in registration component.

export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }
}

Now if you run your application, you can see that the Submit button will be enabled only if the form is valid, that is, only if you enter any values in the username field.

Decorate the validation message

Now we know that our form is working fine, but don’t we need to give a message to the users if they haven’t given any values in the fields? Let’s add few more markups in our HTML.


    
    
                  User Name is required

We are enabling the class “has-error” and “has-success” dynamically by checking the valid and invalid property of userName field. We are also showing our required field message in a new span if there are any required errors in our userName model. Now if you run your app, you can see that the validation is working fine.

But isn’t that validation showing by default, we should show the message only if the user touched our field, and refused to type anything right? Let’s add “userName.touched” in our markup.


    
    
                  User Name is required

Implement the validation for other fields as well

Now it is time to implement the same in other fields.


  
    
      
        
          
          Sign up
          Trust us for your data, and sign up
        
        
          
            
              
                
                
                  User Name is required
                
              
              
                
                
                  Email is required
                
                
                  Email is invalid
                
              
              
                
                
                  Password is required
                
              
              
                
                
                  Confirm password is required

For email validation, we have given an additional attribute and set the condition as [email]=”user.email !== ””, this is for not showing both the required validation and email validation together. This will show the required message if the user touched the field and not giving any values, and the email validation will get fired only if the entered value is not a valid email. Sounds good?

Add register function

Finally, let’s add our function register.

import { OnInit, Component } from "@angular/core";
import { User } from '../models/user.model';
@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }

  register(user: User): void{
    console.log(user);
  }
}

Once it is done, let’s open our browser console and see the data.

Here we have seen how we can implement validation using template driven form. I will write my next article about implementing custom validators using directives in Angular, for comparing our password and confirm password field. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Implement Shared Custom Validator Directive in Angular

SibeeshVenu — Sun, 22 Apr 2018 15:21:33 +0000

[toc]

Introduction

In this post, we are going to see how to create a custom validator directive in Angular 5. We have already seen how to do validation in our previous posts, and we have not done any validations for comparing the password and confirm the password, remember? Here we are going to see that. At the end of this article, you will get to know how to create a new shared directive according to our requirements. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

What Is New and How to Set Up our First Angular 5 Application
Angular 5 Basic Demo Project Overview
Generating Your First Components And Modules in Angular 5 App
Implement Validations in Angular 5 App
Validation Using Template Driven Forms in Angular 5

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. If we create a custom shared directive for creating a compare validator, it would be a great piece of code right, which can be reused.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Creating a custom directive

Let’s just create a new directive in a shared folder and name it equal.validator.directive.ts. Now open that file and start writing the code. Let’s import some of the core components first.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

Now Let’s define our class and @Directive.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

@Directive({
    selector: "[appEqualValidator]",
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: EqualValidatorDirective,
        multi: true
    }]
})
export class EqualValidatorDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        throw new Error("Method not implemented.");
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

As you can see that, we are actually inheriting our new class EqualValidatorDirective from Validator. Now we need to change the implementations of the method inside it. We should also add our new directive in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { EqualValidatorDirective } from './shared/equal.validator.directive';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavComponent } from './nav/nav.component';
import { RegistrationComponent } from './registration/registration.component';
import { LoginComponent } from './login/login.component';

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent,
    EqualValidatorDirective
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement validate

Before we do that, we should add our new cutom directive selector in our confirm password field, because that’s where we are going to use our validator. So we are going to change our markup for confirm password field as below.


    
    
                  Confirm password is required

As you can see, we are using the selector appEqualValidator=”password” in our confirm password field. Please do check my previous posts if you are not sure how to implement other validations like email and required.

Now let’s go back to our custom directive and make some changes.

export class EqualValidatorDirective implements Validator {
    @Input() appEqualValidator: string;
    validate(c: AbstractControl): { [key: string]: any; } {
        const controlToCompare = c.parent.get(this.appEqualValidator)
        if (controlToCompare && controlToCompare.value == c.value)return { "equal": true };
        return { "notEqual": true }
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

Here, we get our confirmPassword control in the absolute control “c”, and in the next line, we are just finding our password control by getting the parent element of confirmPassword. Once we get that, we can easily perform the comparison easily right? So, if it matches we return { “equal”: true }; or else { “notEqual”: true }. Sounds good?

Introduce new span for custom message

Now we have a custom validator which compares two values, and the only thing which pending is, that to create a span for showing our new message in UI. Let’s change our markup now.


    
    
                  Confirm password is required
                
    
                  Password doesn't match

As you can see, we are showing the custom message only if the directive returns notEqual property and there are no required errors. Let’s run our application and see it in action.

Here we have seen how we can implement shared custom validator directive. Let’s connect to a database and save these values in next article. Till then, bye.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Recover your lost data in any Windows machine easily

SibeeshVenu — Thu, 12 Oct 2017 15:36:02 +0000

[toc]

Introduction

Before I write this post, let me ask you a question first, how many of you are worried about losing the data you have on your machine? Wouldn’t it too good to have a recovery software in your machine always? At any point in time, we may lose our data mistakenly, it may be done by yourself, by any family member or friends when they use your system. With a help of a data recovery software, you can still get the data which you thought lost. Here in this post, I am going to write a product review for a recovery software which is Stellar Phoenix Windows Data Recovery – Professional. I hope you will like this. Now let’s begin.

Background

I wouldn’t doubt you if you ask me a question, though we have a lot of data recovery software, why did I choose this one? My answer is straightforward, it is fast, and easy to use, and offering a lot of other advanced options for our easy recovery.

Let’s explore some features of this product

Once you install the product, open it and apply the license key if you have one, however you can always use a free version.

Stellar Phoenix Windows Data Recovery

As you can see you can select any type of files you need. Once you select that, please do not waste time and click on next button. Remember, we have a lot of data to be recovered.

Select location of the files to be recovered

Now you have chosen the location, let’s hit the scan button.

Data recovery scanning

The scanning speed is comparatively good when it compares to other recovery software, that was one of the reasons why I chose this product.

Data recovery scanning result

When it is completed, you will get an alert as above, where you can see the report. Now you can select the items or folder which you want to recover, and click the recover button.

Select the items or folders to be recovered

Last but not the least, you will have to select the location where exactly you need to save the recovered items. You can choose the folder by click the Browse button shown in the system.

Select the location where the recovered data to be saved

Once you select the location, the recovery process will get started and the recovered items will be there for you. Here I have just recovered my driving license, which got deleted somehow.
What are you going to recover using this tool? Let me know your experience using this product, I would love to hear from you. Thanks a lot for reading!.

Follow up

You may find some information about the product Stellar Phoenix WIndows Data Recovery-Professional here.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

How to get NOC from any RTO offices in India

SibeeshVenu — Fri, 22 Sep 2017 19:20:13 +0000

[toc]

Introduction

Many people still think, getting an NOC or No Objection Certificate from an RTO office is a tough job to do. Trust me, I was one among those people. Then I figured it out it isn’t that hard. Here, in this post, we are going to a see how to get a NOC from any RTO in India easily. Though the rules are same, the process may be different for some percentages, but it will be same if you are applying for NOC from Chennai, Tamilnadu, India, as I got my NOC from there. I wanted to reregister my bike in Ernakulam, Kerala. I will be explaining each step that you may need to take to get it, please be noted that the documents mentioned are needed as per the rule when I write this blog. I hope you will like this post. Thanks much for visiting.

Background

Finally, after 6 years of my career in Chennai, I got a transfer to Kochi, Kerala. Though I had to do lots of work like shifting my home, finding a residency in Kochi etc, one thing my mind always curious about was, getting an NOC, because to reregister any vehicle in any cities in India, a must-have document is NOC. When I enquired about it, most of my friends said it is a long process, and some people even said I may need to spend 3000 INR to get it. Before giving money to any agents, who usually ask 2000 INR to 4000 INR, depends on the city you live, I thought of trying it out myself. And luckily the process was not at all hard as I thought. Here in this post, I am going to share you my experience on the same.

Documents needed

As the first step, I visited the Shollinganallure RTO office in Chennai, as my bike was registered in that RTO. The moment I entered the office, I could see a huge crowd, and then my eyes started searching for an agent who can do this work for me. Finally, I could find an agent, and after a discussion with him, I made the below conclusion.

Need to pay 2500 INR

We need to collect the Pollution Certificate by ourself

We need to collect the Certificate from Commissioner Office

And at last, if we give him all the documents, his work is just arranging the documents and submit it to the RTO office which is just 200 meter away. Isn’t it great? I just left his office and decided to do everything my own.

If you are fine with the agents, you can always do that. There will be at least one agent office near to all RTO, just inquire about it, I am sure you will be able to find one.

Ok, let’s try to list down all the documents needed first as I got the list from the Helping Center in RTO office(Usually a person sits near the entrance), then we can discuss how you can get those.

Commissioner Certificate

RC Book Original

Pollution Certificate

Form 28, 3 copies with Chasis pencil print

Insurance Certificate

When I was noting down this document names, my mind was thinking how I am going to get a certificate from Commissioner office, considering the difficulty in getting a document from a government office in India. Let’s leave all that for now, and discuss how to get it.

Getting a Commissioner Certificate for NOC

Google is always my friend, so I just googled the address of the commissioner office in Chennai. When I write this blog, this was the address.

No. 132, Commissioaner Office Building, EVK Sampath Rd, Vepery, Periyamet, Chennai, Tamil Nadu 600007

This is the certificate which will mention about all the penalties you have, all the traffic rule violations. And you will have to pay if you have any fine for any of your act. It was Monday 9.00 AM when I start from my home at Old Pallavaram. I thought I can reach there in one hour, later I found my assumptions were wrong. Finally it was 10.40 AM when I reach as the traffic was more at that time. A normall security will be performed when you enter the campus, once the security guards verified your bags and vehicle, they will ask you to go af collect the temporary ID card, the athority for that, will always be neat to the gate.

You need to enter your address, mobile number, purpose of visit in a registry given and get your temporary ID card. Once you get it, please don’t waste your time. Walk into main building, or say someone about your purpose of visit, they will narate you to the right building. After raeching to the NOC department, I found the mistakes I did. I didn’t even take one photostat of any document, so I had to go down and take those, there I wasted around one hour. Normally the Xerox shops near commissioner office, are always crowded. Trust me, you will find a long queue, just to take a photostat. These are the documents you need.

RC Book Copy

Insurance Certificate

ID proof

Address proof

Please carry all the original documents with you as it is needed for them for verification

As I was staying in Chennai for rent, I was not having any valid address proof except the rental agreement. If you belong to my category, please carry the original rental agreement with you, if you don’t have original please take a xerox copy. Once after you arranged all the documents, give it to the official, after verifying the documents, he/she will give you a form to be filled with your vehicle chasis number, engine number etc.

You will have to pay 20 INR as a processing fee. After you pay the amount, please do not forget to collect the receipt. If you are submitting the document before 12.00 PM, you will get the commissioner certificate on the next day in between 3.00 PM to 5.00 PM. While coming for collecting the certificate, be sure that you have the receipt with you. That is all for that day. I was able to go office from there directly, even though I was late.

On the next day, we planned to go there from office. Me and my friend Divya started from office around 2.00 PM after lunch. It was a long journey as my office was at Thoraipakkam, Chennai. The ride to the destination was really great, I must thank Divya for being such an amazing co-rider. She was able to come even in the hot sun. Thank you Divya.

We reached there at 3.30 and the same security checkin was performed, this time it was not that crowded, so I was able to get a temporary IC card easily. I was rushing towards the NOC department as we both needed to attend a client call at 6.00 PM. So we wanted to be in office at least by 5.50 PM. But I was not lucky on that day, I had to wait for one hour as the official was not available the at desk. It was 4.30 PM when I get the certificate in my hand. I was feeling a bit relaxed after seeing that certificate, because I knew with that certificate, 60% of NOC work is done. By the way we were able to reach office by 5.55 PM, and the call went well, this is just for your information.

Getting a Pollution Certificate

This is an easy job. You can always find a pollution test office near to the RTO office. Please ride your bike there, and ask for the pollution certificate. You may have to pay 50 INR for the work, within 10 minutes you will get a pollution certificate in hand. Below is the sample pollution certificate for your reference.

Sample Pollution Certificate

Form 28, 3 copies with Chasis pencil print

Now take three copies of your Form 28, you can download it from internet. If you don’t like to browse for it, you can find the same here in this link. Now fill all the three copies with appropriate data, and please make sure that you are taking a pencil sketch or print of your vehicles Chasis number. The official will verify whether you have the pencil print in all the three copies.

Submission process

Once you arrange all the document, please give it to the official for the verification. And if everything is fine, you will be asked to go and get it signed with RTO officer. Wait, the process is not yet over. Now you have to go to the cash counter and pay 200 INR as the processing fee. Once you paid, please collect the bill and paste it on the application.

Cool, you have done it. Now give it to the counter and please don’t forget to ask about when you can come and collect from the office.

What if, you are not available for collecting NOC

You can still get the NOC, even if you are not available in the applied city. However you may need to sign an authorization letter saying about your absense and to whom the certicate can be delivered to, with that any of your family/friends can get it for you.

There is an option to get back the road tax you have paid for the initial city, I will share about that in my next post. It can be done only after you reregister the vehicle.

Conclusion

This is the process I was going to get an NOC from Chennai, Tamilnadu. Please be noted that it may vary a bit according to the state government rules.Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on any other Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Upload Contents To Azure Container, CDN in WordPress Folder Format

SibeeshVenu — Mon, 29 May 2017 16:09:25 +0000

[toc]

Introduction

Here, in this article we are going to a see how we upload contents to our Azure container in our CDN storage in a WordPress folder format. You may be thinking what is so special in WrdPress folder format, what makes the difference in other formats? When I say WordPress folder format, I mean one folder in an another folder. In WordPress we usually have the structure as wwwroot/wp-content/uploads/2017/05/. The real problem is, we can not create a container inside a container. Yeah, you heard it right. But, you don’t need to worry about it, there is always few ways we can achieve this need, in this post I am going to show you that. I hope you will like this. Now let’s begin.

Background

I recently created a Azure CDN for my website, and when I was just trying to upload the files to my Azure storage, I got stuck with the problem, that we can not create a container inside a container.

No option to upload a container inside a container

If it is possible, changing URLs of my entire images and other contents would have been pretty much easier, hope you know what I mean? We could have just uploaded the root folder and change the main URL to our CDN endpoint. In my case, change the URL http://sibeeshpassion.com/ to http://cdn.sibeeshpassion.com/ could fix the issues, and with some plugins, we can easily do that.

In this post, we are going to see two possible solution we can use.

Use “/” in the Azure blob

Upload the folders via tools like Storage Explorer

Use “/” in the Azure blob

One good thing here is we can always create virtual folders by having the “/” character as a delimiter/part of the blob name to build the hierarchy we need. In our case it is wwwroot/wp-content/uploads/2017/05/. Though the Blob service in Azure storage is based on flat storage scheme, not a hierarchical scheme, we can still specify a character or string delimiter within a blob name to create a virtual hierarchy. For example, we can always create unique blobs as preceding

/sibeeshpassion.png

/2017/01//sibeeshpassion.png

/wp-content/uploads/2017/01/sibeeshpassion.png

You can follow this post for getting more information abut this.

Upload the folders via tools like Storage Explorer

This step is pretty much easier than the above mentioned way. Here we are going use the tools like Storage Explorer to do the task for us. Uploading each contents manually and renaming them in hierarchical format would be a tough task, am I right? If you are having around 20-50 images or contents in your site, that won’t be a problem. But my case was bit different, as I had around 5000 images and other contents, so I personally selected this method.

To get started, you will have to download the tool Microsoft Azure Storage Explorer, once you download, please install it and open it.

Now, add your Azure account in Storage Explorer.

Add Account in Microsoft Azure Storage Explorer

Once you add your account, the tool wish list down all of your storage and resources you have with that account. Now go to your storage account and create a container. Let’s create and name our container as wp-content.

Creating a BLOB Container

Now what is pending from our end is, uploading the folders. Let’s create one sample folder with one image.

Files and Folders to Upload

Now click on the upload button and select the root folder you need to upload.

Select the Folder to be Uploaded

Once you are done uploading, I am sure that you can see those files in your storage account. Please be noted that it follows the same hierarchy we needed.

Select the Uploaded Files

Now if you just copy the file URL and open it in the browser, you can see the content you have just uploaded.

Please be noted that, the default access policy of a container is private, thus you will not be able to load the contents via browser. Most probably you will be getting a 404 error. To fix this you will have to change the access policy wither to blob or container. You can follow this post: Fix For 404 ResourceNotFound Error After Uploading to Azure Container

Just for the reference you can always login to your Azure portal and check the blob, there you can find the hierarchical blob.

Hierarchy Folder Structure in Azure Storage Container

Thanks for reading, I will come back with another article which explore Azure CDN. Happy Uploading!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Azure Content Delivery Network (CDN) – A Walk Through

SibeeshVenu — Sun, 28 May 2017 04:47:13 +0000

[toc]

Introduction

This post is going to walk through about Azure Content Delivery Network (CDN). Before we go deep into Azure CDN, it is recommended that you must know What is a CDN and What is the use of a CDN? So let’s go and try to answer those.

What is a CDN

In our day to day life, we all open websites many times, how fast you area getting responses from those sites? Some might be loading very fast, others may be slow, have you ever thought why there is such a huge delay in giving response? There are a lot of possible reasons behind it, here we are going to discuss about one reason and a solution that we can do, that is CDN. With the help of a CDN, we can reduce the physical distance between the user and our website server, and we can cache our images and other contents, so that the contents can be serced quickly.

What is a Azure CDN

Azure CDN, caches all the static contents that you have in your website, in different locations. Using a Azure CDN, can reduce the number of riund trips for getting the required contents, hence we get better performance and user experience.

cdn-overview

Image Courtesy: Microsoft Docs

Advantages of having a Azure CDN are listed below.

Better performance for your apps and services
Global distributed network
Highly scalable infrastructure
Active redundancy and failover
High reliability
Robust security

Background

I own a personal website(http://sibeeshpassion.com/) and I wanted to make sure the end users of my site, get a better experience, creating a CDN is the first step towards it. And in this article I am just sharing how a Azure CDN can help in that. I hope you will like this.

Creating a Azure CDN

To create a CDN, you must login to https://portal.azure.com/ and then click on the New icon.

Azure Create New Resource

Now, search for CDN.

Search for CDN

Our next step is to create the CDN profile, to do so, you must fill the form according to your preferences.

Create CDN Profile

Please be sure that you are checking your price tier and, as per your needs, you can select one. Here I am selecting S1 Standard Verizon.

Choose the Pricing Tier

As we have created our CDN Profile, now it is time to create an End Point. Navigate to your CDN profile and click on the End Point.

Endpoint Option in CDN

You must add the required data in the upcoming Add and end point form. Here, the name is the name of your CDN end point, that will be created as .azureedge.net.

Once you are finished, you can see that your CDN end point is in running.

CDN Endpoint Running

Creating a Custom Domain

We have successfully created an Azure CDN, but is that really over? For some people it is, but for others it is not. Let’s see why? We have an option to add a custom domain for our CDN, that’s cool right? If you noticed well, we have created a CDN as https://cdn-sp.azureedge.net but it would be great we can get one as https://cdn.sibeeshpassion.com right?. So here in this step, we are going to see how we can get a custom domain for our CDN.

To start with, login to your Azure Portal and browse for the CDN profile we have just created and click on the end point to which you want to map your custom domain.

Custom Domain Option in CDN

Now login to your Domain Registrar’s website and navigate to DNS records (If you could not find DNS records, search for Domain Name or Name Server Management). Here I am using BigRocks, and the screenshots may be different for other service providers.

Manage DNS in BigRock

Navigate to the CNAME creation page, please check in advanced settings if you could not find it in default settings page. And fill the required fields.

CNAME Creation in DNS Window

Now, go back to azure portal, and give the custom domain name, we created in the DNS management settings(cdn.sibeeshpassion.com), in the Add a custom domain form.

Adding Custom Hostname

Click Add. If everything goes fine, you should be able to enable the custom domain and the process will get started. The process includes the following tasks.

Submitting request
Domain validation
Certificate provisioning
Complete

The domain validation will be automatically done if you had added a CNAME in your host provider DNS configuration which points to your CDN host name. If not, you will get a mail (The mail id in the WHOIS database), please wait for it.

In the certificate provisioning task, you can either have your own certificate in the Azure Key Valut and use it, or an auto generated one from Azure. The process may take up to 6 hours, yes it is quite a lot of time.

If everything goes well, the process will be completed, and you can see it in your custom domain overview.

Certificate Deployed

You can see the complete status when you click on your custom domain.

Azure CDN Custom Domian Overview

Success Notification Custom Domain CDN

Please be noted that, the verification process may take few minutes or hours. If you are sure that the CNAME configuration is correct, please wait some more time and check if you are getting any error.

Update to Premium

I recently changed my Azure CDN to premium, which offers wide variety of services. You can compare the features here. The premium gives you a separate portal to manage your CDN, https://cdn.windowsazure.com. You can see some of the features in the preceding image.

Azure CDN Premium Features

That’s all for today, I will come with another article which explore Azure CDN more. Till then, bye.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Fix for 404 ResourceNotFound Error After Uploading to Azure Container

SibeeshVenu — Sat, 27 May 2017 09:18:15 +0000

[toc]

Introduction

Here, in this post we are going to a see how we can resolve the error 404 ResourceNotFound Error After Uploading to Azure CDN . It is obvious that you may feel very sad, if you are unable to see the image you recently uploaded to Azure container. But, you don’t need to worry about it, as the fix for this error is very simple and in this post I am going to show you that. I hope you will like this. Now let’s begin.

Background

I recently created a new container in my Azure storage account and uploaded one image in it. And when I was just opening that image in my browser, I was just getting an error as preceding.

[xml]
This XML file does not appear to have any style information associated with it. The document tree is shown below.

ResourceNotFound

The specified resource does not exist. RequestId:36bdbcfb-0001-0022-44c6-d60b93000000 Time:2017-05-27T08:55:09.8382429Z

[/xml]

I was able to download that image and the problem exists only when I open it in the browser. Then I came to know about the Access policy of Azure containers. Here we are going to see a bit introduction about that policy.

Solution for Azure 404 Error

Step 1: Login to your Azure Portal and navigate to your container.
Step 2: Now, click on the three dots (…) and then Access Policy.
Step 3: Select the access type you prefer.

Option to see Azure Container Policy

According to Microsoft, Access Policy specifies whether data in the container may be accessed publicly. By default, container data is private to the account owner. Use ‘Blob’ to allow public read access for blobs. Use ‘Container’ to allow public read and list access to the entire container.

So here I am going to give the policy as Blob.

Change the Azure Access Policy to Blob

You can always do this with some C# code as well.

[csharp]
public static void SetPublicContainerPermissions(CloudBlobContainer container)
{
BlobContainerPermissions perm = container.GetPermissions();
perm.PublicAccess = BlobContainerPublicAccessType.Blob;
container.SetPermissions(perm);
}
[/csharp]

Here is the above example, we are accessing the permissions and assigning the Blob access type. You can always use ‘Container’ if you want to limit the access to container. In any case, if you need to remove the permission to anonymous users, you can use BlobContainerPublicAccessType.Off. Once you are done, please reload the URL again the browser, I am sure you will be able to see your image. Happy Uploading!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Do You Know A Wow Game Is Already Installed In Your Android Phone?

SibeeshVenu — Thu, 06 Apr 2017 13:06:49 +0000

New Debugging Features In Visual Studio 2017

SibeeshVenu — Mon, 27 Mar 2017 15:10:52 +0000

Understand the Internal Structure of SQL Database File

Andrew Jackson — Thu, 23 Mar 2017 15:55:59 +0000

You must have thought how to store data in SQL Server? SQL Server is the platform, which provides a proper management of database. There is no doubt that it follows a strategy for the storage of all the files. All the users of SQL are aware with the fact that database objects are stored in MDF file. MDF files are responsible for the management of data in SQL Server. Therefore, in this article, we will learn the storage system of data in SQL Server data files.

Database Files and its Storage Structure in SQL Server

Database in SQL Server has two operating system files:

Data Files
Log File

Data Files

A data file consists of objects and data. Depending upon the needs, data files can be divided into two types:

Primary Database File

Each database has one primary data file. All the tables, database objects, indexes and views are stored in that file. The file extension of primary database file is .mdf.

Secondary Database File

This type is used at the time of exceeding the maximum allocated size for an individual file on Windows. It helps the database to increase in size. File extension for this file is .ndf.

Log File

Whenever users want to recover whole of the database in SQL Server, they require certain information, which are inside a log file. For one database there will be one log file and transactions of database are written on it even before to the data file. The file extension used by it is .ldf. LDF stands for Transactional Log file.

Inner Structure of Data File

Each database has its space to store the data, which is divided into different pages that are numbered from 0 to N. During the expansion of database files from its default size, those pages which are created newly are numbered from the last highest page number plus 1. In the similar way, at the time of shrinking of files it eliminates pages in decreasing order, which in the same manner starts from the highest page number. The basic unit of I/O for SQL Server operations is a page and each page is of 8 KB. A data file is a large array of pages. SQL Server stores different data with the help of multiple pages, Some of them are GAM, Index, IAM, Data, SGAM, and TextMix.

Page Addressing:

Now, if we analyze the pages addressing then we can see that every page in SQL Server is of equal size that is 8192 bytes. Each page has its own address, which is unique. It is a part of single database file. The ID of the file makes the first part of the unique address. Pages are numbered starting from 0. This is the mentioned format in which page address is written:

file number : page number

Data page is very essential among the page types. This is used for the storage of records to a database.

Structure of Data Page:

A data page contains three sections.

Page Header
Page Body
Slot Array or Row offset

Page Header (0-95 bytes)

The first 96 bytes of a particular page is known as page header, which consists of the information of the page.

That is, Page ID, No of records in that page and IDs of previous/next pages.

Page Body

It is that part where actual data is stored. It is followed by the free space and slot array.

Slot Array

Slot array, also known as off-set array, is an array of two-byte values, which is read by the SQL Server in reverse i.e. from the very end of the page. Slot array keep slot points to a byte in the page wherever a record begins. First slot of the record slot array is saved in the last two bytes of the page that points to the page of the first record saved at the page.

Conclusion

One of the essential things that should be kept in mind is that, In SQL Server, the database file (.mdf) store its data as per 8 kb pages and it is important for SQL Server to sustain the sequence of data pages as per their header information. In case of mismatching of information or the data is not stored in sequential order into data pages, there is possibility in the corruption of database or you may face SQL database error like 5172, which is a header corruption error.