Installing a private package with composer

Most of PHP framework now a day uses composer.json to install packages. In this article I am going to show you an overview on adding PHP packages from your private repository to a composer.json file.

1. Configure Composer

Add this line into your composer.json to point to your private repository.

2. Create an SSH key

Create an SSH Key on the machine on which you want to install the package.

If you are on a development machine, you probably want to add the SSH key to your GitHub or Bitbucket account. This gives you access to all private repositories on your account.

For your reference you can visit the link below:

3. Run composer

Lastly, you can run composer require or composer install to install the package.

That’s it! You can now start adding your packages from your private repositories.  Happy Coding!!

Importing Excel with ASP.NET MVC

Importing excel, In my previous article, I demonstrated how to perform simple way of downloading data into excels. Now, this time I’m going to create a simple way of uploading data from excels.

Let’s Start
Output preview

Importing excel

Import Excel

First, create a new MVC project. You can name it whatever you want, In my case, I name it ImportExcel.

If this is your first time creating  MVC project please refer to this article How to start with ASP.Net MVC.

Second, add reference Excel Data reader using your NuGet Package Manager. To add right click on your project name, from your solution explorer. Like shown below.

Importing excel

Manage NuGet Packages

Then select Manage NuGet Packages and search for ExcelDataReader. Install ExcelDataReader and ExcelDataReader.Dataset.  When a green check is shown like the image below it means that the package is  already installed.

Importing excel

Add Excel Data Reader

Third, create a view for your application. In this topic, the view will look like the image shown below.

Importing excel

Navigate to your default view. If you are using default template of MVC your default controller name is HomeController that makes Home -> index.cshtml as your default view. Navigate to this file and replace all code inside this file with the code below.

Fourth, create post action result in your HomeController, this will be used to read excel file.

Note : We have created two index action result in our HomeController . First index handle HttpGet request and the other one handle HttpPost request.

HttpGet index:
  • This loads default view.

HttpPost index:
  • This received post request from the view.Which is the excel data.

Lastly, run your project by pressing F5 from you keyboard and try exporting sample excel file. Excel file should be in table format.

Sample Excel file:

Importing excel

Excel Format

Click on choose button in importing excel and select your excel file.

Importing excel

Import Excel File

Then click upload. Your final view should look like this.

Importing excel

And we are all set. Thank you for reading… Happy Coding!!

Code Summary:

Home Controller

View > Index.cshtml

 

Export Data to Excel with ASP.NET MVC

In creating a system there are times that we need to export data to excel, it could either be for reports or for data examination. This is what this article is all about.

Below are one of those method. To start, we need to create a fresh project of ASP.NET MVC. If this is your first time in creating ASP.NET MVC, you may refer to this article “How to start with ASP.NET MVC“.

Output Preview:

Export data to excel

Final Output

Let’s start:

I assume you have already created a new project with default MVC template.

First, open HomeController. Located inside Controller folder, remove all action result except for index().

It should look like this:

Export data to excel

Home Controller

Second, let’s create a view where we can display sample data into a table.To open your view navigate to Views->Home->index.cshtml or simply right click inside index action result and select Go to View.

Export data to excel

Navigate to View

Replace all code from your index.cshtml with the code below.

Export to excel

Employee Age Address BirthDate BirthPlace

 

 

Third, create a model class inside Models folder. This will be used in creating our sample data and declare all properties shown below.

Code:

Image preview:

Export data to excel

TableModel

Fourth, Create a sample data. Navigate back to your HomeController and create method sample_data. 

Code:

Fifth, fill html table that we created a while ago using Jquery. Navigate back to your controller view.Add the code below.

Code:

Lastly, create exportToExcel method inside your HomeController.

Code:

And we’re done… To run project simply press F5 key from your keyboard. Thank you for reading.. Happy coding!!

To review your work please refer from the full code below… 🙂

Full Code:

TableModel.cs

HomeController.cs

Index.cshtml

Final output:

Export data to excel

Final Output


Post you may like:

[pt_view id=”2384ae03it”]

ASP.NET MVC Entity Framework:Code First Approach

Populate HTML Table using JQUERY

ASP.NET MVC Entity framework code first approach allows you to create classes and use entity framework to generate your Table base on your design class. It has similarity with the model first approach, however it does not generate edmx file. To determine their differences visit this blog  Entity Framework Model first approach for the actual process on how the database is generated in this approach. To proceed with Code first approach below is the tutorial on how the database is generated in Code first approach.

Let’s start:

      Note:

1. I assume you have already created your project. Let’s proceed by adding class to our project. This will serve as our model so I prefer to put it inside Models folder. To add new item right click Models folder, choose Add then select Class. See image below for your guide.

Entity Framework

Add new item

2. From Add new item window, name your class. In my case I name it as Employee_Listing.

Entity Framework

Name your class

3. Copy the code below. This will serve as our model to be use by entity framework in generating our table design.

Code:

4. Now add another class for the DBContext of entity framework. This binds our model to Entity Framework and generate database schema for our model class.

Entity Framework

Employee_ListingDBContext

5.Open the file we just created and copy the code below.

Code:

6. The image below is the classes I created inside my Models folder.

Entity Framework

Model Folder

7. In order for us to connect to the desired database where we want to create our table. We need to add connection string to our web config file. Open your web.config and find this line <connectionStrings></connectionString>. Inside this line insert your Database connection string.

Note:

  • Employee_ListingDBContext –> DBCOntext class we created earlier. This should be name as the class where you bind your model into Entity Framework.
  • (localdb)\Projects-> This is my local SQL Server .
  • providerName=”System.Data.SqlClient” –> specify your provider name.

 

Code:

8. In order for me to execute the classes I made earlier I inserted a dummy data to the table and create a Table design in my Views. Open your HomeController.cs this is the default controller used to load the default view of your Web Application. See image below to locate file from your solution explorer.

Entity Framework

Solution Explorer

9. Below are the codes I used in my HomeController. From my index function I call my Entity framework class which is Employee_ListingDBContext and added dummy data to my model to be inserted to my table. I also created a list variable with our table model design where I store the data I selected from our database table and pass it to my views where I populate the data to my HTML Table.

Code:

10. Open your Index.cshtml file and copy the code below.To locate your index.cshtml navigate to Views->Home->index.cshtml or by simply right clicking anywhere inside your index function inside your HomeController and selecting Go To View option.

Entity Framework

Go To View

From your view, copy and paste codes below. This will create a table and populate data from our controller.

Note:

  • @model IEnumerable<CodeFirst_Approach.Models.Employee_Listing> – Give as access to the model list we pass from our controller.
  • @ -> drop to C# code.

Code:

11. Lastly, run your application by pressing F5 to run project in debugging mode or CTRL + F5 to run project without debugging mode.

 

Project final output:

Entity Framework

Final output

 

 


Post you may like:

 

[pt_view id=”2384ae03it”]

How: Adding Entity Framework Reference using NuGet

Adding Entity Framework

If you have already added Entity Framework you might want to check this thread ASP.NET MVC using EF for actual using of Entity framework in your code. If this is your first time you can continue reading steps below on Adding Entity Framework.

Let’s Start: – Adding Entity Framework Reference

1. Open NuGet Package Manager to add EntityFramework. Go to Tools->NuGet Package Manager ->Manage NuGet Packages for Solution. 

Adding Entity Framework

2. Search for EntityFramework and click install button.

Adding Entity Framework

Search For EntityFramework

3. Wait for NuGet Package Manager to install EntityFramework.

Adding Entity Framework

4. The image below is the view of Entity Framework after it is already installed.

Adding Entity Framework

5. To check if EntityFramework is successfully added to your project go to your solution explorer and under your reference EntityFramework should be found.

Adding Entity Framework

Project Reference

Entity Framework

You have successfully added Entity Framework to your project. You can now use it in your ASP.NET MVC Web Application.

 


You might want to check this thread..

 

[pt_view id=”d88f6acsu0″]

ASP.NET Entity Framework: Model First Approach (MVC)

Model first Approach is ASP.NET Entity framework functionality which creates a new model using entity framework designer and generate database schema from the model design. This is all found in EDMX(.edmx extension) file.

To fully understand how this entity framework approach work. I have created a simple tutorial on how to execute Model First Approach.

     Note:

Let’s start:
1. First add Add New Item to your project. In my case because it is an MVC Application I prefer placing it inside my Models folder. To add, right click on Models folder and click Add and choose New Item.

Entity Framework

Add New Item

2. Add ADO.NET Entity Data Model. Under Visual C# select Data and in the middle pane select ADO.NET Entity Data Model.

Entity Framework

ADO.NET Entity Data Model

3. Choose Empty Model then click “Finish” .

Entity Framework

Empty Model

4. After you have added ADO.NET Entity Data Model it will automatically create EDMX(.edmx extension) file. Like the image shown below.

Entity Framework

Designer

5. Add entity for your model. Right click anywhere inside EDMX designer click Add New->Entity. Refer to the image below.

Entity Framework

Add New Entity

6. Name your entity. In my case I name it as Employee and Entity Set is automatically generated by the framework as Employees.

Entity Framework

Name Entity

7. Add Scalar Property which represent your table column. To Add, right click anywhere inside your Entity and Select Add New – > Scalar Property.

Entity Framework

Add Scalar property

8. The image below is the overview of the designer with the toolbox that contains tools you can use to design your entity.

Entity Framework

Designer

9. Generate Database from Model. This will generate .sql file inside your EDMX file which contains command used to generate your database. Right click anywhere inside your designer and select Generate Database from Model.

Entity Framework

Generate Database from Model

10. From Generate Database Wizard window click “Next” to proceed.

Entity Framework

Generate Database Wizard

11. Entity Framework generate Data Definition Language(DDL) that contains command in generating Database from your model design. Click “Finish”.

Entity Framework

Data Definition Language

12. It will create .sql file that contains needed command to create your Database Schema.

Entity Framework

Employee.edmx.sql

13. Below are the codes inside Employee.edmx.sql file.

Note:
• USE[master]-> Database name. This is where I created my table when I hit on execute command with my file.

Code:

14. Open Employee.edmx.sql file and execute command to create database. Right click anywhere inside your Employee.edmx.sql editor and select Execute. See image below.

Entity Framework

Execute Command

15. A dialog box will pop-up asking for your server name where you want to create your table.

Entity Framework

Connect to server

16. Message will appear of saying “Command(s) completed successfully” .

Entity Framework

17. The image below is the table created by Entity Framework.

Entity Framework

Employees Table

You have successfully created your table. By this time you can now use Entity Framework Model first approach in your ASP.Net MVC Web application.
Thank you for reading. !!

 


Post you may like:

[pt_view id=”2384ae03it”]

How: ASP.NET MVC using Entity Framework(Database First Approach)

Entity framework is part of .NET Framework it generates necessary database command that execute connection with database without using the standard SQL queries.  To expand our understanding on how Entity Framework works. I created an ASP.NET MVC web application to share what I’ve learned. For beginners like me hopes this helps.

Image below is the table I created for this project. I name the database as Employee_Listing and for the table I name it as Table.  If this is your first time to create a database visit this thread Create Database using Visual Studio  for detailed instruction on how I created this database.

Entity Framework

Application Final UI Output:

Entity Framework

Final Output

Let’s Start:

       Note:

1. I assume you have already created a project and added entity framework if not visit the link from the note above . Now add ADO.NET Entity Data Model. I prefer adding it to my Model folder. To add, right click on the Models folder, click Add and choose New Item.

Entity Framework

Add ADO.NET Entity Data Model

2. From Add New Item window select Data under Visual C# from the left pane and choose ADO.NET Entity Data Model from the middle pane. Then name your model. In my case I name it as Employee_Listing.

Entity Framework

Name Entity Model

3. In the next window select option Generate from Database and then click “Next”

Entity Framework

Generate from database

4. Create new connection by simply clicking New Connection button

Entity Framework

Create New Connection

5. Choose Data source for your database. In my case it is Microsoft SQL Server then click “Continue”.

Entity Framework

Choose SQL Server

6. In connection properties choose your Server name and select your Database name as shown below.

Entity Framework

Choose Server and Database Name

7. To test connection of your database click “Test Connection” button. Then press “OK”.

Entity Framework

Test Connection

8. Click “Next” to proceed.

Entity Framework

Entity Model Wizard

9. Choose Table you want to add to your project.

Entity Framework

Choose Table

10. If security warning pop-up select “OK”.

Entity Framework

Security Warning

11. Visual Studio will create edmx file with the Table model for your database.

Entity Framework

Project View

12. The image below is the full screenshot of my Models folder.

Entity Framework

Models folder

13. Table.cs is the class Model of the Table I added with ADO.NET Entity Data Model.

Entity Framework

Table.cs

Code inside Table.cs

  • This is our Entity Model class. I added [Required] attribute to every property declared from this model for Data Annotation to be used for model binding to our UI form inputs.

Let’s start with the coding part

We are going to use the default Controller for MVC Template which is HomeController. Located under HomeController folder and its default view located under Views->Home->index.cshtml.

Entity Framework

Solution Explorer

1. Create a view for your application. Open Index.cshtml file refer to highlighted text shown in the image above.

Index.cshtml

  • Create a form using html helper to bind our model.
  • @using MVC_Data_Entity.Models -> gain access to our Models folder
  • @model Table -> gain access to our actual Model class which is the class Table inside Table.cs.
  • <script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> Add JQuery script.
  • Get_Data() -> JavaScript function use for transferring data to our view from our Controller
  • Delete(id) -> JavaScript function that call delete function in controller to delete specific data from our database
  • Edit(id) – > JavaScript function that call select function from our controller and fill form with the existing data.
  • table_data(data) -> This is a table design JavaScript function to be fill in our table without a whole page loading.
  • @Html.ValidationSummary -> Show validation error base on the [required] attribute we set in our Table Model.
  • @Html.ValidationMessageFor -> Show validation error for specific inputs.

Code:

2. Next open your HomeController. Let’s create and apply CRUD (Create, Read, Update and Delete) which is the basic function for most of the systems.

 

HomeController.cs

Function summary for HomeController

  • Index() – > Load default view
  • Index(Table model) -> received post request from our UI form.
  • GetData() -> Get all data from our table.
  • Select_data_for_edit(int id) – > Select specific data by id from our database table
  • Delete(int id) -> Delete data from table by id
  • Update()-> Update data entry from database table
  • Insert_data(Table model) -> Insert new entry to database table

Code:

 

3. Layout.cshtml

  • This file is located at Views ->Shared->Layout.cshtml.
  • This is where we can modify sites main menu.

Code:

Final Output:

Entity Framework

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!


Post you may like:

[pt_view id=”2384ae03it”]

Consuming SQL Stored Procedures (ASP.NET MVC Web Application)

For beginners: – SQL Stored Procedures

The objective of this project to get data from a Database Table using a stored procedure and display in a HTML Table .

Note: I’m using ASP.NET MVC Applciation

Summary of the classes I used in creating this example

  • index.cshtml » In MVC framework index is the View. This is responsible for the User Interface in the front end of your website. In this example it is the table design.
  • Controller.cs » Class that is responsible for processing of data that pass to the View.
  • function.js » Most common question asks for beginners in using MVC framework is how to pass data from a controller to a view. This is one of the answers instead of using the normal way of doing it I’m using JavaScript in transmitting data from a controller. This process populates your data in your view without reloading the whole page.
  • function.cs » I created a separate class for calling Store Procedure to modularized our function for easy debugging.

Now that you have known all of the function used for this example. I will go down the line and proceed with copying of code for your personal testing and better understanding.

OUTPUT VIEW:

Project Output

Project File structure:

File Structure

Index.cshtml

This file is responsible for your User Interface design. In ASP.NET MVC framework in every controller there is always a specific views associated with it. In this case we are using HomeController so the folder from Views->Home->index.cshtml is our main view. Navigate to this file and copy and paste code below.

User Interface

 Note:

  • <script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> include JQuery Script from Scripts folder
  • <script src=”~/Scripts/function.js”></script> -> include function.js Script

Code:

 

function.cs

To modularize project I created a separate class use to connect to our store procedure. This is where all code associated to the database are found. I also created a folder called Service where I put this class.

To create a folder right click on your project name and choose Add to show all available option, then selects New Folder. Name your folder as Service.

Create new class name function.cs by right clicking on the folder you have just created. Then Select Add and choose class.

Add Class

Name your class as function.cs

Name your Class

Open the file you have just created and copy the code below.

Service Folder

To manually view Database Connection string visit this blog content How to view Connection String in Visual Studio

Code:

Note: 

  • SelectFromTable -> Name of Stored procedure we created from the previous tutorial. To view visit this blog Creating Stored Procedure.

 

HomeController.cs

This is the default Controller generated during the creation of project. We will use this as our main controller for this project. Navigate to this file and copy and paste code shown below.

Controller folder

Note:

  • Service.function myservice = new function(); -> use to access our method from service-> function.cs class.
  • Basic_Function -> Project Name
  • Service -> Folder name where I created my function.cs
  • function -> class Name

 

Code:

function.js

This script is used to update data to our html table in view. To create script file right click on the Scripts folder, Select Add then click on JavaScript File.

Add JavaScript File

Name your script as function.js

Script Name

Navigate to your file and copy and paste code below.

Script Folder

Note:  “/Home/SelectListing”

  • Home-> Controller name
  • SelectListing-> Method from HomeController

Code:

To run your project simply hit f5 button from your keyboard to run in debugging mode or hit Ctrl + f5 to run without debugging mode.


Related Post:

 

[pt_view id=”2384ae03it”]

ASP.NET MVC File Architecture

Solution Explorer

ASP.NET Web application is created with the MVC template and is auto generated by the Development Environment of Visual studio. Unlike any other framework MVC has very strict guidelines about where to place different elements like a Model should be in the Model Folder, the controller must be in the controller folder, View must be in the View folder and there’s more to it than that. If you put it a wrong place, your application might not work as you expected.

MVC is also created for the purpose of having a clean and organized coding technique. For further knowledge on how this folder is being used in this framework, let’s go down the line and make an overview of each element and folder in our solution explorer.

(You can also see blog post How to start with MVC ASP.NET Web Application)

MVC Architecture C#

The image below is the folders and files generated for a newly created Visual Studio ASP.NET MVC Web Application project. Let’s see significance in each file in the solution explorer.

MVC Architecture C#

Solution Explorer

App_Data

This folder contains application data like local Database used by the application like .mdf file. This folder doesn’t have special meaning in the MVC framework.

App_Start

This contains code that helps configure MVC application. Generally, we don’t modify this part of the code unless you are already familiar with it and wanted to configure it manually. Like RouteConfig.cs which is responsible for the routing of your application web address. BundleConfig.cs which responsible for minification of your JavaScript and CSS files.

MVC Architecture C#

App_start

Content

Content folder contains style sheet for your sites like Site.css.

MVC Architecture C#

Content

Controller

This is the heart of MVC where you can find all the classes that are responsible for the processing of data. The controller is always tied to the View folder.

MVC Architecture C#

Controller

For example, if we have HomeController in the controller folder, then we also have a Home folder in the views folder and if we have AccountController in the controller folder then we also have Account Folder in the views folder. Home Controller must be named with a Controller at the end in order for it to work.

MVC Architecture C#

View

View

This folder contains User interface of your application. See image below.

Account, Home and Manage folder are the View of your Controller while Shared folder contains a template of your Web Application. _layout.cshtml, it’s like a master page and responsible of how all your pages will look like. _LoginPartial.cshtml contains code for partial menu .Error.cshtml is responsible for displaying error. View Start.cshtml it calls the default layout of the page which is _layout.cshtml. Web.config is an app configuration file that contains assemblies needed for the project. 

MVC Architecture C#

Views

Fonts

Contains customize font you want to use in your project.

MVC Architecture C#

Font

Models

This folder contains classes that are responsible for the identification of data. This is where all application requirements are registered.

MVC Architecture C#

Script

Contains all JavaScript file of your application.

MVC Architecture C#

Script Folder

Favicon.ico -> default site logo icon

Packages.config -> this comes from nugget packages.

Web.config -> Configuration settings of your application

MVC Architecture C#

Default files

You can also refer to this link from DotNetmob.com for additional info on ASP.NET MVC Architecture.

Thank you for reading. Hope this helps. Enjoy Coding!!!

 


Related Post:

 

[pt_view id=”2384ae03it”]

1 2