How to Install Free SSL on a Shared Hosting

In this tutorial, I am going to show you how to generate free SSL certificate and install it in your shared hosting. I am using Hostinger for my hosting and we are going to use SSL For Free.

1. On SSL For Free website enter your website url and press on create free ssl certificate.

2. Select Manual Verification.

3. Then click on Manual Verify Domain

4. Scroll down and find the Verification Files. Download the files,Files#1 and Files #2. Do not close the page.

5. Access your Cpanel Files Manager and navigate to your root directory which is public_html.

6. Create a new folder named .well-known, and another one inside called acme-challenge. Upload both verification files to the acme-challenge folder. This is how my File Manager looks in my hosting.

7. Navigate back to your SSL for Free and download SSL Certificate to generate three sets of keys certificate, private key, and CA bundle.

8. From your hosting, in my case it’s Hostinger, Open SSL from advance option.

9. Paste the keys you have obtained from SSL for free to the appointed boxes, then click Install.

10. If the installation process is successful, the SSL details should appear in the List of Installed SSL section.

And that’s all, we have successfully installed SSL certificate on Shared Hosting.

GET and POST Request using HttpClient(C#)

GET and POST Request using HttpClient

GET and POST Request using HttpClient – Requesting data is one of the most common things in client projects. That include GET request to get specific data from server and post request to insert data into the server. There are two ways to implement this request it can be done using WebClient or HttpClient.

But this post is to show you how to use HttpClient for GET and POST Http request in C#. This will show you how simple it is to implement an Http request using HTTPClient.

HttpClient can be added using NugetPackage Manager(System.Net.Http).

GET using HTTPClient

This is how to implement GET request:

That is how simple it is to perform GET request.

POST using HttpClient

As you can see it is very similar to GET. You will also notice that we just added PostAsync and parameter to execute Post request.

HttpClient reference can be added using Nuget Package Manager of Visual Studio. And easily implemented using C#.

HttpClient: Happy Coding!

Apache Installation on Windows(Apache 2.4, PHP7)

For Web Developers, one of the requirements for testing web application is having a web server. Apache is one the popular Web Server used for most Web Server. The Apache HTTP server is an open-source Web server application developed by the Apache Software Foundation. The server software is freely distributed, and the open source license means users can edit the underlying code to tweak performance and contribute to the future development of the program.

In this article, I will show you steps on how to install Apache Server on Windows Machine.

How to install Apache 2.4 and PHP 7?

Let’s start:

To get started, download necessary files for this installation.

1. After you download Apache zip files extract the files into your root directory C:/Apache24.

Apache Installation on Windows

2 . Navigate to your Apache directory C:/Apache24/Conf and open file httpd.conf.

Apache Installation on Windows

3. Find and replace the following line below from httpd.conf file.

4. Register Apache Service using a command prompt. Change the CMD directory to C:\Apache24/bin

Apache Installation on Windows

Then, execute command httpd –k install . To install  Apache to your local machine.

Apache Installation on Windows

5. Verify Apache installation using services.msc. Open run command and type services.msc.

Apache Installation on Windows

Services window will open. Search for Apache2.4 service. If it looks like the image below then you have successfully installed Apache and it is already running.

Apache Installation on Windows

6. Create an index.html file inside folder C:\Apache24\htdocs.

Apache Installation on Windows

Run localhost:8080 from your browser to check if it is working.

Apache Installation on Windows

PHP Installation (7.0.13)

To complete Apache Server we also need to install PHP. In my case, I used PHP version 7.0.13. I assume you have already downloaded the files using the link from the beginning of this post.

Apache Installation on Windows

Let’s Start:

1.  Extract the PHP zip files to your root directory which is C://.

Apache Installation on Windows

2. Now open PHP folder and locate files naming Php.ini – development. Rename it to Php.ini

Apache Installation on Windows

3. Open Php.ini files and remove the semicolon to uncomment the lines of code shown below. This will load PHP extensions you need for your development server.

  • extension=msql.dll
  • extension=php_curl.dll
  • extension=php_ftp.dll
  • extension=php_mysqli.dll
  • extension=php_openssl.dll
  • extension=php_pdo_mysql.dll

4. To integrate Php to Apache open httpd.conf from you Apache folder(C:\Apache24\C:\Apache24\conf).Find and replace the lines shown below and make sure that the directory is pointing to your PHP folder(C:/Php).

5. Restart Apache using httpd –k restart.

Apache Installation on Windows

Check if PHP is working.

Open index.html from C:\Apache24\htdocs and modify code using the line below.

Open your browser and run localhost:8080 to see if it echoed the word hello world.

Apache Installation on Windows

And we are done. Hope this help!

Happy Coding!!

Offline Installer for Visual Studio 2017

Offline Installer for Visual Studio 2017 – Visual Studio 2017 does not offer an offline installer but instead, they offer to download a layout of the installer in case you have unreliable network environments or no internet at all. Basically, this method does,is to create a copy of the installer itself having the option of selecting the specific tools you need.

You can visit this link for instructions from Microsoft. Create an offline installer(Microsoft)

Offline Installer for Visual Studio 2017

Note: This installer layout will only last for 30 days as stated from the link above and this process needs internet for the downloading of files needed for offline installation.

To start, download visual studio 2017 installer. You can download the community version, This is the free version of visual studio.

You can use this link to download a fresh copy of https://visualstudio.microsoft.com/downloads.

Let’s start:

First,  Locate visual studio installer you just downloaded a while ago. In my case it is inside C:\Users\username\Downloads\ vs_community.exe.

Second, Open your command prompt(cmd) and navigate to C:\Users\username\Downloads\ which is where your installer located.

Offline Installer for Visual Studio 2017

Cd Downloads

Third, run the code below in your command prompt to create a local cache for the visual studio 2017 installer. This will create a folder c:\vs2017layout containing visual studio installation files.

  • vs_community.exe –layout c:\vs2017layout –add Microsoft.VisualStudio.Workload.ManagedDesktop –add Microsoft.VisualStudio.Workload.NetWeb –add Component.GitHub.VisualStudio –includeOptional –lang en-US

You can visit this link from Microsoft to get additional command to download other visual studio tools. Install Visual Studio 2017 on low bandwidth or unreliable network environments

Run the command and it will open a window and start downloading necessary files to transfer to your local directory.

Offline Installer for Visual Studio 2017

Run Command

See the image below.

Offline Installer for Visual Studio 2017

Visual Studio Installer

After that, another command prompt will open showing you the progress of downloaded files.

Lastly, Let’s check if the files are created inside c:\vs2017layout. After this process, you can copy this files into your drive and you can install it without using the internet.

That’s it! Hopes this helps!

Happy coding!!

Reading PDF File (ItextSharp) in CSharp

Reading PDF File

Reading PDF File – I started my day searching a solution on how to read PDF  file and finally I was able to search for a solution . Here is a solution from stack overflow.
I am posting this to be able to help readers from this blog who have also searching for this problem.

Credit to stackoverflow:

Link: https://stackoverflow.com

Here’s a code found on this link which helps me a lot.

If you are using Visual Studio , you can add reference to ItextSharp using Manage Nuget Packages.To open Manage Nuget Packages, go to your solution explorer and right-click on your project name then scroll down for Manager Nuget Packages. To search for ItextSharp, simply search for ItextSharp then if the search result appears select the first option and click the  install button on the right side of the result.

Below is the image of ItextSharp from Manage Nuget Packages option. Reading PDF File

After successfully adding this reference you can now use it by adding this reference from your code.

  • using iTextSharp.text.pdf;
  • using iTextSharp.text.pdf.parser;

And now, you can already use iTextSharp from your code.

Thank you for reading!

Hopes that this simple solution can help you.

Happy coding!!

AngularJS CRUD Operation using ASP.NET MVC

I am a .NET Developer and I’m new in AngularJS. I started using AngularJS in about a week ago and I decided to create a full AngularJS CRUD Operation using ASP.NET MVC. This article will show you how I created a project with CRUD functionality using AngularJS.

For an overview of AngularJS, you can visit  AngularJS introduction from this site  https://docs.angularjs.org/guide/introduction.

AgularJS

To start, below are the summary of the steps I have done to fully implement AngularJS CRUD project.

AngularJS CRUD Operation using ASP.NET
  • Create SQL Database
  • Create CRUD Stored Procedure
  • Start a New ASP.NET MVC project
  • Create a separate Class for CRUD functions
  • Create CRUD Action Result in main controller( HomeController)
  • Design a View (Front End Design) with AngularJS App

To make this article much easier I copied all the code I have used in every associated class file in the steps above.

Let’s Start:

1. Create SQL Database:

To execute CRUD operation we need to have data storage. I assume you have already used SQL Database. Create a database and a table. In my case, I created a database named EmployeeDB and a table named EmployeeRecord. Image below.

AngularJS CRUD Operation using ASP.NET

2. Create CRUD Stored Procedure

If this is your first time using a SQL stored procedure you can refer to my previous article How to create a stored procedure.  Below are the Stored Procedures and the associated code I used.

AngularJS CRUD Operation using ASP.NET

 

Code:
DeleteEmployee Procedure

SQL Stored Procedure – InsertEmployee

SelectEmployee Procedure

UpdateEmployee Procedure

3. Start a New ASP.NET MVC project

Now, that we have already prepared our backend, which is the SQL Database and stored procedures. We can now start creating our project. Open your Visual Studio and create a new ASP.NET Web Application using MVC template. If you have no idea how to start a project you can visit my previous article on how to start in ASP.NET MVC.

4. Create a separate Class for CRUD functions

To organize our code I suggest we create a separate class containing all the connection we need to established connectivity to our SQL Stored Procedures.

But first, let’s create a folder inside our solution explorer by simply right-clicking on the project name and selecting Add > New Folder. See image below

AngularJS CRUD Operation using ASP.NET

Inside that folder create a Class. Add  Class by simply right-clicking your project name and select Add > Class. Below are the folder and class I created.

AngularJS CRUD Operation using ASP.NET

As you can see from the image above I named my folder as CRUD_function and my class as CRUD. Now, let’s start adding code. Open CRUD.cs and copy the code snippet below. This is where we put all our connection to the SQL Stored procedures.

Note:  To view your connection string you can refer to my previous article Manual viewing SQL Connection String.

CRUD.cs – Code:

5. Create CRUD Action Result in main controller( HomeController)

In this step, we will create an Action Result method in our main controller. If you are using the default MVC template, your default controller is HomeController. Located inside the folder Controller. Open HomeController. Copy the code snippet below.

HomeController.cs – Codes:

6. Design a View (Front End Design) with AngularJS App

After we have fully created all the necessary CRUD functions that we need, let’s start creating our front-end design with AngularJS framework. Navigate to your default view which is located inside the folder Views > Home > index.cshtml .Open index.cshtml and replace the code with the snippet below.

Project Preview:

AngularJS CRUD Operation using ASP.NET

Add of employee preview

AngularJS CRUD Operation using ASP.NET

Index.cshtml – Code: 

Note: with AngularJS Script

And we are done. Run your project and see if it works. You can comment below for technical questions about this article.

Thank you for reading!!

Happy Coding!!

SignalR Chat Application with ASP.NET MVC

SignalR Chat App With ASP.NET

SignalR Chat App With ASP.NET – This article will show you an actual application using SignalR in ASP.NET MVC. The main goal for this project is to have an idea of how we can use SignalR in a real-time web application.

As stated on this site https://www.asp.net/signalr:

“ASP.NET SignalR is a library for ASP.NET developers that makes developing real-time web functionality easy. SignalR allows bi-directional communication between server and client. Servers can now push content to connected clients instantly as it becomes available.

SignalR allows us to create a real-time application over HTTP. HTTP is a standard protocol used to communicate between a client and a server. Below is sample diagram of HTTP request from a client and a server.

SignalR Chat App With ASP.NET

As you can see from the diagram above their is disconnected state between client and a server. While SignalR is like a tunnel that has a bi-directional connectivity. Please see image below.

SignalR Chat App with ASP.NET

To see how SignalR works in real time. Let’s create a Web Chat Application. This application will show a real-time and stateless manner of SignalR.

SignalR Chat App With ASP.NET

Overview:

Note:  I’m using the default MVC template of ASP.NET

I assume you have already created a project or if not you can refer to this blog post How to start with asp.net MVC.

Let’s start:

First, open Nuget Package Manager. To open go to your solution explorer and right-click on your project name. Once Nuget package manager is opened, search for SignalR and install.

SignalR Chat App with ASP.NET

To verify if the assembly reference is installed. It should look like the image below.

SignalR Chat App with ASP.NET

Second, add SignalR Hub Class. To add, right-click on your project name and select add > add new item then search for hub. Then rename your hub. In my case, I name it as ChatHub.

SignalR Chat App With ASP.NET

Open your hub class and copy the code below.

Code:

Third, open your default controller which is HomeController and create a new action result. This will return our ChatView design that we are about to create in our next steps.

Code:

Fourth,create ChatView.cshtml. Go to your solution explorer and navigate to Views >Home folder then create a new view. Right-click on Home Folder and then select add > MVC 5 View Page with Razor. Choose Layout.cshml as your layout page for your view.

SignalR Chat App With ASP.NET

Copy code below to your ChatView.cshtml

Code:

Fifth, establish a connection with your SignalR library using Jquery. Copy code below to your ChatView.cshtml.

Lastly, redesign your default view which is index.cshtml inside your Views>Home Folder. Open the file and replace content with the code below.

Code:

And we are good to go. To see the final output of this project. Run your project by pressing F5. Then register two new users for testing purposes. Then open this project in Mozilla and google chrome to see a real-time chat application. See image below.

SignalR Chat App With ASP.NET

Thank you for reading!!

Happy coding!!

Code Summary:

ChatHub.cs > Hub Class

Code:

HomeController.cs > Controller

Code:

ChatView.cshtml > View

Code:

 

Index.cshtml > Home Page View

Code:

Submit Forms using AgularJS with ASP.NET MVC

AgularJS
Ways on how to submit forms using AngularJS:

I’m new to AngularJS and I was trying to create a CRUD application. While I was working on this project I run into some problem:

“How to submit a form using AngularJS with ASP.NET MVC model binding”

In this article, I would like to share with you a method I found on the internet. To start, you need to create a new MVC Project. If this is your first time in creating a project you can visit this article for a guide on how to create MVC Project in ASP.NET How to start with ASP.NET MVC.

I assume you have already created a project. To have an overview of what view we are about to create, below is the image of my final form view.

Output Preview: – Submit Forms using AgularJS

Submit Forms using AgularJS

Let’s Start:

First, create a model class. To put every file in place it is best to put your model class in your Model folder. Then declare all properties you need for your inputs in your forms.

Submit Forms using AgularJS

Model Properties:

Second, create your view. If you are using the default template of ASP.NET MVC you default controller would probably be HomeController and your default view is found under View Folder Home > index.chtml. Open the file and replace code using the snippet below.

  • Declare @using AngularCrudOperation.Models > to make model class we created a while ago accessible from the view.

There are two ways of implementing input in ASP.NET MVC view, you can either use Html Helper or proceed using a plain HTML input.

Inputs > HTML Helper

  • @Html.EditorFor(m => m.Email, new { @placeholder = “Enter email”, @class = “form-control”, required = “required”, ng_model = “model.Email” })

Code:

Third, create AngularJS script for your application. There are two scopes or function we need to create base on the view we created a while ago.

  • model > binding models with AngularJS
  • AddEmployee > function used to submit our form input using post request.
Code:

Fourth, create a POST method in your HomeController where we direct our POST request from our AngularJS App. For presentation I created an empty method with no functionality at all just to show you if the data from the input is successfully pass to the method we created. Copy the code below and test if it works.

Code:

And that is all you need to do to submit a form using angularJS. This is just a part of the CRUD application I was about to create. Stay connected with this blog and check for my latest post to be updated. Thank you for reading happy coding.

Share this post if this helps you!

Code Summary:
Model Class

HomeController

Index.cshtml

 

How: Creating Self Signed Certificate

Self Signed Certificate

As defined in sslshopper.com. A self-signed certificate is a certificate that is signed by the person creating it rather than a trusted certificate authority.

In my present job, I was given a task to integrate Third party API that uses token-based authentication and a Self-signed certificate. After days of searching, I found a way of generating an x509 certificate using OpenSSL application. To share with you how I generate an x509 certificate, below are the steps to generate a Self-signed certificate using OpenSSL.

Requirements:

Download OpenSSL for windows from the link below.

Self Signed Certificate

After you have downloaded the EXE file proceed with Installing the application. I prefer installing it in C Drive root directory. See image below.

Self Signed Certificate

After the installation navigates to your installation folder in my case it is C:\OpenSSL-Win64\bin. Copy the full path and paste it in your Environment Variable.  See Image below.

Self Signed Certificate

Environment Variable:

To open environment variables right click on My Computer or This PC for Windows 10 and choose properties.

Self Signed Certificate

System window will appear click change settings.

Self Signed Certificate

Then select the advanced tab and open Environment Variables located at the bottom right of the advance tab.

Self Signed Certificate

Now you can open Environment Variables. Copy and paste your installation directory (C:\OpenSSL-Win64\bin) to your Environment Variables path separating it with a semicolon. Now you can directly access OpenSSL using cmd.

Self Signed Certificate

Let’s start creating a Self Signed Certificate:

Step 1. Open command prompt or cmd to start creating a self-signed certificate. Create a folder from anywhere on your PC. In my case, I created a folder inside D:\sample cert. Please refer to the image below to change cmd directory to the folder you created.Type OpenSSL to start the application.

Self Signed Certificate

Step 2. Create a key and a certificate using the command below. Fill additional details for your Self-Signed certificate. Refer to the image shown below.

  • openssl req -x509 -days 365 -newkey rsa:2048 -keyout mykey.pem -out mycert.pem

Self Signed Certificate

This will create a key and certificate.

Self Signed Certificate

Step 3.  Put your key and certificate in one file using a pfx file. Self Signed CertificateUse the command below

  • openssl pkcs12 -export -in mycert.pem -inkey mykey.pem -out mycert.pfx

This will create a pfx file.

Self Signed Certificate

Step 4. Extract a public certificate from your pfx. Use the command below.

  • openssl pkcs12 -in mycert.pfx -clcerts -nokeys -out public_cert.pem

This will generate a public_cert.pem file.

Self Signed Certificate

See image below to see the files created using this steps.

Self Signed Certificate

And now your Self Signed certificate is now ready for live action. Thank you for reading. Happy Coding!!.

AngularJS with Asp.Net MVC

AngularJS
What is Angular?

AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application.

AngularJS with Asp.Net MVC

Definition of Angular JS from its Official Page:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

To help us understand how this framework works I create a simple asp.net MVC application that uses Angular JS framework to populate HTML table.

Output Preview:

AngularJS with Asp.Net MVC

Let’s Start:
Sample Angular JS project with asp.net MVC

First, create a fresh copy of asp.net MVC Application using Visual Studio. If this is first time creating one visit this blog post  How To Start with ASP.NET MVC Web Application.

AngularJS with Asp.Net MVC

AngularJS with Asp.Net MVC

Second, include AngularJS file inside your view (index.cshtml) to use Angular Framework

  • https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js

AngularJS with Asp.Net MVC

Third, create your HTML table view. If you are using default MVC template of ASP.NET MVC your default controller is HomeController and your default view is located at Home > index.cshtml. Open index file and replace code inside the file using the code below.

Code:

Third,  Create new action result in your controller. This will be used for the sample JSON data use to populate to our HTML table.  Refer to the code below. I used model binding for my sample JSON data.

Model – NameModel
  • Create class inside Model folder this will serve as our model properties for our sample data.

From your HomeController copy and paste code below.

Sample JSON

Fourth, From your view(Index.cshtml) create a script to call this action result (sample_JSON).

Code:

For a successful request your call response will look like this:

To get the value of the actual data we pass, you can call it using response.data  and stringtify( ex. JSON.stringtify(response.data  ))  to convert into string and output “[{\”Name\”:\”Regie\”,\”LastName\”:\”Baquero\”}]”.

And we’re done. Thank you for reading! Happy Coding!!

You can review your code using the Full Code summary below.

Model:

Home Controller

Index.cshmtl

 

1 2 3 5