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

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.

ASP.NET MVC

Creating New ASP.NET MVC Project Visual Studio 2019

by Junaid May 28, 2019

written by Junaid

I am going to create ASP.NET MVC Project in Visual Studio 2019. It contain all the features you need to create, test and deploy dot Net Framework application. We will create a simple application in which I will cover the basic structure of ASP.NET MVC application.

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

When you will open Visual Studio Visual Studio 2019 you have to view a following alike screen.

Visual Studio Preview Page

In which you can see two parts, the left one will show list of project in which you have recently worked. In the right panel you can see built in options to create, clone, open project and solution.

We have to click on “Create a new project”.

select type of new project in visual studio

A new screen appears in which you have to select which type of application you want to create. Because in the previous step you didn’t selected the type so you must have to define what you want to develop.

I have recently used to developed “ASP.NET Core Web Application Project” that’s why it’s appearing in the left panel. But we are covering MVC project so we have to select that.

Create new ASP MVC Project

Just scroll down and search for the “ASP.NET Web Application (.NET Framework)” and clicked on next button.

configure you new project in visual studio 2019

A new screen appears in which you have to define the name of your project & the location where you want to reserve the application files. Even that you can also select the “.NET Framwork Version”. I’m just going to change the name of application and rest of settings remains same as above image, In the last click on create button.

select structural type of asp application

Then a new screen appears in which Visual Studio 2019 will ask you about the structural type of you “ASP.NET MVC Application” and we are going to select the Empty and select MVC in core references and then click on create button.

If you will select EMPTY, a new project is created without any default data.
If you will select MVC, the project is created with the empty Model, View, Controller folder.

After this process of creating project is started which takes 1 to 3 minutes according the specs of your machine. I’m not attaching the image of progress bar here.

asp mvc project created

So here is the first look of your newly created ASP.NET MVC Project. We will not go in the depth of other things expect of important features which you need to know before started with project. In the right sidebar you can see folders and files. These are essentials of your project, technically we will call this right sidebar as Solution Explorer.

In which the highlighted “JunaidShahidBlog” is the name of your project. All files and folders are under this project, you can add multiple projects under the same solution (this approach is practiced by the enterprises to develop one stop solution).

Understand Files & Folders

AssemblyInfo.cs contain info regarding the assembly as the named reflecting the purpose. Such as the description, version and name etc. You can get more understanding by reading the brief comments inside file.

References have the list of the libraries which you are consuming in your application. Such as if you are using Entity Framework you will found the name in the references too.

RouteConfig is used to define the application routing. You can also get idea from the name, by default one route is defined but you can add your own custom routes as you are wanted.

Controller Folder is used to placed the controller of application, which are used to control the data flow & application.

Model Folder is used to placed the model (model classes, view model, data transfer object) of application, which are used to transfer data from database to view.

View Folder is used to placed the view (html pages) of application, which are used to visualize user interface.

Global.asax which contains the higher level events of your application such as the start event (Application_Start).

Packages.config is used maintain the packages by project references. It will allow the NuGet Package Manager to easily restore individual project dependence whenever you will migrate your solution to other servers.

Web.config file contain the essential configuration of your whole application. Your application dependencies and their versions are configured here automatically. Even that you can some custom keys to fetch their data in whole application. Somehow you can see that mostly developed used to place their database connection string in this file.

Conclusion

In this tutorial you have learned to Creating New ASP.NET MVC Project in Visual Studio 2019. You are now able to create your own projects. I have tried to explain each and essential file of project which can make you better in sense during development. If you found any flaw in my knowledge correct me because sharing is caring. If you like this piece of knowledge must share and get connect with my social circle.