Author

Junaid

Hi, my name is Junaid. I worked in Android, SEO, .NET and CodeIgniter. I'm also a formal author of TEP YouTube Channel and several courses at Udemy. I'm providing services of my skills and knowledge via this site. Keep connected and stay tuned.

Software Development Tool

GitLab Integration With Visual Studio 2019

by Junaid July 15, 2019

written by Junaid

Gitlab is an amazing repository to develop and deploy your application in continuous integration. You can get more information about gitlab on Google but this article is just about the configuration and integration of Gitlab with Visual Studio 2019.

I was writing this because I am working on a project which I have to share with multiple developers and we are working in multiple Nations. So to integrate everyone’s changing in single repository we are using Gitlab as mid layer.

Download Git

First of all you need to install get in your machine, remember that get is totally free of post you can download from here. After successful installation of Git, now the next move is to install Gitlab extension in your Visual Studio 2019.

GitLab Extension for Visual Studio

download gitlab extension for visual studio 2019

Open the extensions drop down, then click on manage extensions.
Click online.
Then search for “GitLab Extension for Visual Studio“ and download.

It will take couple of minutes to download and install this extension in your visual Studio 2019.

gitlab installation in visual studio 2019

Generating Git SSH key

Now it’s time to generate your ssh key for successful configuration of gitlab.

If you are Windows user then you need to open your Bash CLI (CMD, Powershell). Execute the following command and get your key.

ssh-keygen -t ed25519 -C "email@example.com"

1	ssh-keygen -t ed25519 -C "email@example.com"

Then it will ask you for the name of file in which you want to store this key.
Then you have to write the password if you want to protected the file.

generate git ssh key

Even that you can generate this key from Git GUI.

Open Git GUI
Click on Help
Generate Key

Generate new SSH Key in GIT GUI

Add Git SSH key in GitLab

After getting the key, it’s time to add this in your Git Lab Id.

Just logged In and goto settings.

On your left menu there is SSH Keys.

Now paste the Git GUI Key here.

add SSH key from Git GUI to Gitlab

Give meaningful title.
Click Add Key.

Now we have successfully configured Git & Git Lab in windows. Next phase is to integrate this with Visual Studio 2019.

Integrate Git Lab in Visual Studio 2019

Open your Visual Studio Team Explorer.
Go to Settings.
Go To Repository Settings
Enter User Name & Email
Done !

List of Gitlab projects

Now you can add new repository by clicking on Add.
Download Already existing projects by clicking on Clone.

Conclusion

Finally we are done with this tutorial. I hope it will give you a kick start with GitLab. Onward I’m working on WordPress to ASP.NET Core Migration Series in which I have used this approach. So interested techies can get copy of my work and purse their individual copies of code to next level solution.

Integrate GitHub With Visual Studio 2015

WordPress to ASP.NET Core Migration

Software Development Tool

Free Code Editor Codelobster IDE – Review

by Junaid June 20, 2019

written by Junaid

In this article, we suggest you to get acquainted with the free editor of web languages – Codelobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

Codelobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

Check other 13 Best Code Editor for Programmers 2019 including this.

If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript code, which is contained in HTML files.

The program includes auto-completion function, which greatly speeds up the programmer’s work and eliminates the possibility of errors.

Codelobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript function by pressing the F1 key.

The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

You can view the HTML templates directly in the editor, highlight the interesting elements on the page and explore the associated CSS styles. HTML and CSS inspector works by the principle of all known FireBug.

Other useful functions and features of the IDE:

A pair highlighting of parentheses and tags – you will never have to count parentheses or quotation marks, the editor will take care of it.
Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects – these functions ensure easy work with projects of any scale.
Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.

The professional version of Codelobster IDE provides the programmer with even more features.

For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

In addition the professional version includes an extensive set of plug-ins:

Fully implemented support for JavaScript libraries, such as jQuery, Node.js, AngularJS, BackboneJS and MeteorJS.
A large set of extensions that help to work with PHP frameworks – CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
Plugins for working with the most popular CMS – Drupal, Joomla, Magento and WordPress.

We can download and install any framework directly from the program without being distracted from the main tasks.

In general, for a year of work, our team had no complaints against the editor. Codelobster IDE works fast, does not hang and allows us to work even with large PHP projects.

You can download Codelobster IDE from the official website http://codelobsteride.com.

ASP.NET MVC

Creating Forms in ASP.NET MVC

by Junaid June 16, 2019

written by Junaid

Let’s learn about the forms, which are widely used to take input from end users. In this post we are going to Creating Forms in ASP.NET MVC. Typically developers are not aware with all the types of forms. Because their major task is to developed the requirement but forms are getting changed according to the requirements.

When I was getting started with website developed in Core PHP I’m also not aware of these types but slowly when I have worked with other professional software engineers I get to know the reasons of each element usage.

There are four types of forms which are commercially used. We are going to experience all the forms which can be differentiate by the process of execution like Synchronous and Asynchronous.

Subscribe YouTube For More Videos | Video is in Hindi – URDU

Four types of forms:

Weakly Typed Synchronous-Forms
Strongly Typed Synchronous-Forms
Strongly Typed AJAX Forms
jQuery with AJAX form data

Before getting into the depth of forms you need to understand the basic structure of any form. It may contain least 3 elements if form is designed to send information.

<form> tag
<input> tag
submit button (which can be input with type submit or simple button with type submit)

Weakly Typed Synchronous Forms

These type of forms are designed to send limited information. Each input field hold a unique name which allow server to receive data. Remember that if name of field is not matched with the parameter of server Action, then it will not allow to bind data. On other hand until the form execution is not completed you can’t do anything on the web-page. That’s why it’s called weakly typed synchronous form.

Form Code:

<form action="/Form/Index" method="post">
   <input type="text" name="textBoxStringData" />
   <input type="checkbox" name="checkboxData" />
   <input type="number" name="textBoxIntData" />
   <input type="submit" value="Submit" />
</form>

</form>

Server Code:

[HttpPost]
public void Index(string textBoxStringData, int textBoxIntData, string checkboxData)
{
    //Do something
}

[HttpPost]

public void Index(string textBoxStringData, int textBoxIntData, string checkboxData)

{

//Do something

}

Strongly Typed Synchronous-Forms

It is same as “Weakly Typed Synchronous Forms” but slight difference. It will not send information in parameters, it’s send information in form of object to server. It will allow you to send direct values instead of primitives. It get advantage because of it’s maintainability. You just need to add razor field and add property in ASP Model then it will automatically bind with that. The best part of using these forms are you even don’t do typo mistakes and all the code is developed in razor which is C# client side code.

Form Code:

@using (Html.BeginForm(“Index", "Form", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(model => model.CheckboxData)
    @Html.TextBoxFor(model => model.TextBoxIntData)

    <input type="submit" value="Submit" />
}

@using (Html.BeginForm(“Index", "Form", FormMethod.Post))

{

@Html.TextBoxFor(m => m.TextBoxStringData)

@Html.CheckBoxFor(model => model.CheckboxData)

@Html.TextBoxFor(model => model.TextBoxIntData)

}

Index is Action Name & Form is Controller Name.

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

[HttpPost]

public void Index(Models.FormData formData)

{

//Do something with formData

}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

Strongly Typed AJAX Forms

This form is the advanced version of above form. Means if you will submit information the page will not stuck, it will allow to perform other things on the screen which will give ease to end user. You can take example of Facebook, if you are doing chat on the same time you can post status to and that’s because of Asynchronous forms.

Form Code:

@using (Ajax.BeginForm(“Index", "Form", 
	new AjaxOptions { LoadingElementId = "loader", OnSuccess = "onSuccess" }))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(m => m.CheckboxData)
    @Html.TextBoxFor(m => m.TextBoxIntData)

    <input type="submit" value="Submit" />
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@using (Ajax.BeginForm(“Index", "Form",

new AjaxOptions { LoadingElementId = "loader", OnSuccess = "onSuccess" }))

{

@Html.TextBoxFor(m => m.TextBoxStringData)

@Html.CheckBoxFor(m => m.CheckboxData)

@Html.TextBoxFor(m => m.TextBoxIntData)

}

Unobtrusive library is used for the validation of form. Index is the name of Action and Form is the name of Controller.

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

[HttpPost]

public void Index(Models.FormData formData)

{

//Do something with formData

}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

jQuery with AJAX form data

These kind of forms are used for customized data processing. Like you want to send multiple images from multiple input fields then you need to used these form.

Form Code:

<input type="text" id="text" />
<input type="checkbox" id="checkbox" />
<input type="number" id="number" />

<button onclick="submit()">Post with jQuery AJAX</button>

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

    //submit data with jQuery AJAX
    function submit() {
        var data = {
            TextBoxStringData: $('#text').val(),
            TextBoxIntData: $('#number').val(),
            CheckboxData: $('#checkbox').is(':checked')
        };

        $.post("/Form/Index", { formData: data }, 
         function () { alert('Successfully posted to server') });
    }

<button onclick="submit()">Post with jQuery AJAX</button>

//submit data with jQuery AJAX

function submit() {

var data = {

TextBoxStringData: $('#text').val(),

TextBoxIntData: $('#number').val(),

CheckboxData: $('#checkbox').is(':checked')

};

$.post("/Form/Index", { formData: data },

function () { alert('Successfully posted to server') });

}

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

[HttpPost]

public void Index(Models.FormData formData)

{

//Do something with formData

}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

Conclusion

In this tutorial we have learned about four types of forms and how to Creating Forms in ASP.NET MVC. I have tried to explain in the depth of usage and also shared the video above. If you found any flaw in this piece of content let me know through your precious comments.

ASP.NET MVC

Model View Controller ASP.NET MVC Pattern

by Junaid June 2, 2019

written by Junaid

In the previous I have explained how to Creating New ASP.NET MVC Project Visual Studio 2019. Now we are going to understand the MVC structure or model view controller in ASP.NET MVC. When I was just about to start with .NET I have read many articles and found nothing informative as a beginner. Because I didn’t know about development pretty much & now I’m near to be master in my own thoughts (May be).

For More depth knowledge have a visit on .NET Official Site

It’s really simple to understand MVC, it’s not about just .NET it will be applicable to any cutting edge web technology. In MVC we just isolated each concern (usage).

There are three aspects in web development on which MVC is based.

Understand Model

Model which is nothing but a class. A simple class holding properties (attributes). When I was doing study in university I just came to know only few datatypes like (int, string, bool) etc. But you can create your own user-define datatypes too which we are going to learn soon. You can create properties of your own datatypes, you can create complex class which will based on inheritance, abstraction, static methods and so on complexes things. It’s hard to understand first but after few days practice make you enough stronger that, it will be really easy for your. In short if you need to get data and want to update data you need a path (medium) which will help you to transfer data and Model is the best medium here.

Subscribe YouTube For More Videos | Video is in Hindi – URDU

Understand View

It is a page holding some HTML code. In case of different server side languages it may have server side code too, like in .NET you can use Razor (server side code in .NET) and dynamic properties in View too for extension of features. In ASP.NET view have extension of (.cshtml) which means you can also write C# code inside these pages. Which gives a huge favor to C# developers to get started with ASP.NET Framework. So finally we have conclusion here about View is that, it holds font-end or client side code. From which user have to interacted like (dropdowns, input fields, progress bars, date time picker) etc.

Subscribe YouTube For More Videos | Video is in Hindi – URDU

Understand Controller

It’s also the C# based class but in this we are going to write server side code. A code which will be responsible for the functionality of whole application. Like the path where a page exist and from where data will be released and processed. As name reflects it’s tasks such as Control the flow of model & view. A controller contains actions which are just member function (methods). If you are familiar with object oriented programming, then you also get to know that classes are composition of data member (properties) and data method (functions).

Key Benefits of ASP.NET MVC

Same case is here, we will call data method (actions). Each action have their own return type such as ActionResults which means if you will call this action it will return you a View (A page of cshtml). So it’s upon you, what you want to return when user will call your action. If you want to transfer any data you can use model inside your controller action to process information and return it to view so that user can interact with that.

Subscribe YouTube For More Videos | Video is in Hindi – URDU

Conclusion

Here you have learned a brief about the Model View Controller in ASP.NET MVC aspect. This is what I have learned after practiced alot. If you found any flaw in this piece of words (knowledge) then must share it will me so that I can improve the quality of content.

Creating New ASP.NET MVC Project Visual Studio 2019

MVC is just a pattern and way to develop application with separation of concerned. So each entity will be independent and reusable. Remember MVC is purely based on OOP. You can create your own patters too like you have haired about MVVM etc that are same as MVC but with some different aspect of programming.