Authors Posts by Andrey

Andrey

579 POSTS 1906 COMMENTS
I am a web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design.

0 8525
JavaScript optimization

Who doesn’t want to build interactive websites that involve JavaScript for better user attention? Have you experienced the low responsive websites or applications, only to have nothing happen when you just tapped a link or scroll down? We are pretty sure all of us have been with this. JavaScript is still considered the most expensive resource we utilize for our mobile devices as it can delay interactivity in significant ways mostly byte-for-byte.

0 9475
CRUD Repository Entity Framework

In today’s lesson we will continue developing backend Web API and our goal is database access. We will be creating CRUD API entry points handling GET, POST, PUT and DELETE requests.
As you probably remember that last time we simply hardcoded objects (Users) in the code. Today we will solve this issue.

Prerequisites

First of all, as we are about to store information in database, we need to prepare a new database to work with.
If you haven’t installed SQL Server Management Studio (SSMS) yet, it is time to do it. I recommend to download it from official Microsoft website.
Once it is ready – open it and create new database from ‘Object Explorer’ tree. For now, it is enough to provide only new database name: ‘webapi-db’

database

Now you can open your previously created project in Visual Studio.

Step 1 – Setting up connection string to SQL server

Pretty easy step, open ‘web.config’ (which is in root folder of your project) and add (or update) the following section:


    

If you use a remote SQL server, instead of localhost you need to specify your remote server (e.g. its IP address).

webconfig

Step 2 – A little bit of theory

CRUD abbreviation stands for the four base functions that a model should be able to do – Create, Read, Update, and Delete.

Microsoft introduced a bunch of approaches to work with database: LINQ, Entity Framework (EF) Core, EF using String Path, EF with Lambda Expression, ORM …
You are free to use any of the methods, but need to note that methods have slightly different syntax, own strengths and weaknesses.

LINQ (Language Integrated Query) is a model and certain methodology which adds formal query capabilities into .NET languages. It provides wide and convenient ways for data manipulation.

Entity Framework is an Object Relational Mapper (ORM). Allows to work with database records as with ordinary objects.

Lambda Expression is an anonymous function that you can use to create delegates or expression tree types. By using lambda expressions, you can write local functions that can be passed as arguments or returned as the value of function calls. One of usages of Lambda expressions is writing LINQ query expressions.

Step 3 – database table

We are ready to build a table in our database. You can do it either in Microsoft SQL Server Management Studio or in your Visual Studio. Both ways are pretty straight forward. Lets create the table in Visual Studio. On the left, find ‘Server Explorer’ and select ‘Connect to Database’.
Once the database is connected, select ‘Add New Table’ in ‘Tables’. Here we can define fields of our Users table: id, name, email, phone and role.

create database

Step 4 – Model

We already had the basic User model. In order to link the model with db table, I used LINQ Mapping properties (Table, Column ..). Find below the updated version of the Users model. This is basic model to keep users information.

using System;
using System.Data.Linq.Mapping;
namespace webapi.Models
{
    [Table(Name="dbo.WebApiUsers")]
    public class User
    {
        private Guid _id;
        private string _name;
        private string _email;
        private string _phone;
        private int? _role;
        [Column(Storage = "_id", AutoSync = AutoSync.OnInsert, DbType = "Int NOT NULL IDENTITY", IsPrimaryKey = true, IsDbGenerated = true)]
        public Guid id { get => _id; set => _id = value; }
        [Column(Storage = "_name", DbType = "NChar(32)")]
        public string name { get => _name; set => _name = value; }
        [Column(Storage = "_email", DbType = "NChar(32)")]
        public string email { get => _email; set => _email = value; }
        [Column(Storage = "_phone", DbType = "NChar(32)")]
        public string phone { get => _phone; set => _phone = value; }
        [Column(Storage = "_role", DbType = "int(2)")]
        public int? role { get => _role; set => _role = value; }
    }
}

Here you can see exactly same fields we prepared in our db table. Pay attention that the id field is Guid, which is primary key in this table.

Step 5 – Repository

Repository represents a pattern to control access to the data source. The class implementation thisdoes not contain business logic, does not manage business processes, it only contains operations on data. As a rule, the repository implements a CRUD interface – operations to extract, add, edit, and delete data.

In short, the repository serves to retrieve data from the database. At this stage it is pretty important to understand how it works

repository

All API requests sent to IIS go to API Controller, the controller works via repository.

Now we need to declare a set of CRUD methods in interface

public interface IRepo
{
    T Create(T item);
    T GetOne(Guid id);
    T[] GetAll();
    T Update(UserModel model);
    int Delete(Guid id);
}

UserModel, an another model is used in Update method.

public class UserModel
{
    public Guid id { get; set; }
    public string field { get; set; }
    public string value { get; set; }
}

I decided to make a quick update method (which updates/patches only one field) instead of updating all user fields (which could be heavier).

Now we can start building a repo.

Entity Framework Code First data access approach consider a data access context that is inherited from the DbContext class.
In the beginning I already mentioned various approaches of creation the data contexts and repositories. Let’s review implementations of various approaches.

Linq to Entities/Objects

Linq to Entities offers a simple and intuitive approach for retrieving data using expressions that are close to SQL language.

Working with database, we operate with LINQ queries, but the database understands only queries in the SQL language. Therefore, there is a data provider between LINQ to Entities and the database that allows them to interact. This data provider is EntityClient. It creates an interface for interacting with the ADO.NET provider for SQL Server.

We can use LINQ operators and extensions. Refer to the following realization:

public class UsersDataContextLinq
{
    private DataContext dataContext;
    public DbConnection dbConnection;
    public User[] Users { get; set; }
    public Table usersTable { get; set; }
    public UsersDataContextLinq()
    {
        SqlConnection dbConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["webapiConnectionStrings"].ConnectionString);
        dbConnection.Open();
        var commandText = $@"
            IF NOT EXISTS (SELECT * FROM dbo.sysobjects where id = object_id(N'dbo.WebApiUsers') and OBJECTPROPERTY(id, N'IsTable') = 1)
            BEGIN
                CREATE TABLE [dbo].WebApiUsers(
                    [id] [uniqueidentifier] NOT NULL DEFAULT (newsequentialid()),
                    [name] [nvarchar](128) NOT NULL,
                    [email] [nvarchar](128) NOT NULL,
                    [phone] [nvarchar](128) NOT NULL,
                    [company] [nvarchar](128) NOT NULL,
                    [role] [int] NULL,
                    [status] [int] NULL
                )
            END
        ";
        using (var command = dbConnection.CreateCommand())
        {
            command.CommandText = commandText;
            command.ExecuteNonQuery();
        }
        dataContext = new DataContext(dbConnection);
        usersTable = dataContext.GetTable();
    }
    public User[] GetAll()
    {
        IQueryable users =
            from user in usersTable
            select user;
        return users.ToArray();
    }
    public User Create(User newEntry)
    {
        usersTable.InsertOnSubmit(newEntry);
        dataContext.SubmitChanges();
        return newEntry;
    }
    public int DeleteEntry(Guid id)
    {
        IQueryable deleteUser =
            from user in usersTable
            where user.id == id
            select user;
        usersTable.DeleteOnSubmit(deleteUser.Single());
        try
        {
            dataContext.SubmitChanges();
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            return 0;
        }
        return 1;
    }
    public User UpdateField(Guid entryId, String field, String value)
    {
        User user = usersTable.FirstOrDefault(p => p.id == entryId);
        if (user != null)
        {
            Type userModelType = typeof(User);
            FieldInfo editFieldInfo = userModelType.GetField("_" + field, BindingFlags.NonPublic | BindingFlags.Instance);
            if (editFieldInfo != null)
            {
                Type editFieldType = Nullable.GetUnderlyingType(editFieldInfo.FieldType) ?? editFieldInfo.FieldType;
                object safeValue = (value == null) ? null : Convert.ChangeType(value, editFieldType);
                editFieldInfo.SetValue(user, safeValue);
                dataContext.SubmitChanges();
            }
        }
        return user;
    }
}

Using our webapiConnectionStrings we create a new SqlConnection and open it.
In case if the table was not created earlier (Step 3), it will be added automatically executing commandText in constructor.
Pay attention to SQL like syntax in GetAll and DeleteEntry methods – this is how we can use LINQ operators to work with db table.
System.Reflection is used in ‘PatchField’ method in order to update any of User field (providing just name of the field and new value).
However, using this approach (via System.Reflection) is pretty a big hit to performance. I don’t recommend to use it.

Repository using Core Entity Framework

Quite easy to create the data context

public class UsersDataContext : DbContext
{
    public DbSet Users { get; set; }
    public UsersDataContext() : base(ConfigurationManager.ConnectionStrings["webapiConnectionStrings"].ConnectionString)
    {
    }
}

You only need to pass our connection string into DbContext.
The repository class became more readable and understandable.

public class UsersRepository : IRepo
{
    public UsersDataContext _dataContext { get; set; }
    public DbSet Users { get; set; }
    public UsersRepository(UsersDataContext context) : base()
    {
        _dataContext = context;
        Users = _dataContext.Set();
    }
    public User Create(User newUser)
    {
        newUser.id = Guid.NewGuid();
        Users.Add(newUser);
        _dataContext.SaveChanges();
        return newUser;
    }
    public User[] GetAll()
    {
        return Users.ToArray();
    }
    public User GetOne(Guid id)
    {
        return Users.SingleOrDefault(s => s.id.Equals(id));
    }
    public User Update(UserModel model)
    {
        var user = GetOne(model.id);
        if (model.field.Any())
        {
            switch (model.field)
            {
                case "name":
                    user.name = model.value;
                    break;
                case "email":
                    user.email = model.value;
                    break;
                case "phone":
                    user.phone = model.value;
                    break;
                case "company":
                    user.company = model.value;
                    break;
            }
            _dataContext.SaveChanges();
        }
        return user;
    }
    public int Delete(Guid id)
    {
        Users.Remove(GetOne(id));
        return _dataContext.SaveChanges();
    }
}

We defined DbSet for Users, binded it with the users data context, and now we can operate with it across all CRUD functions.

As you can see, this is applicable for basic single level queries. If you need to include multiple levels, you can use an eager loading – process whereby a query for one type of entity also loads related entities as part of the query. Eager loading is achieved by use of the Include method.
There are several methods of achieving it:

Using Lambda Expression
var extraData = Users /* or _dataContext.Users depending on your context */
    .Include(i => i.ExtraData.Select(it => it.Items))
    .ToList();

The Include method allows the required depth of eager loading to be specified by providing Select expressions to the appropriate depth.

Using String Path
var extraData = Users
    .Include("ExtraData.Items")
    .ToList();
Entity Framework Core
var extraData = Users
    .Include(i => i.ExtraData)
        .ThenInclude(it => it.Items))
    .ToList();

Entity Framework ThenInclude method allows include multiple levels of related data.

Step 6 – UsersController

Finally we need to update our controller to finalize the CRUD:

public class UsersController : ApiController
{
    private readonly UsersRepository _usersRepo;
    public UsersController() : base()
    {
        _usersRepo = new UsersRepository(new UsersDataContext());
    }
    [Route("api/Users/Add"), HttpPost]
    public IHttpActionResult AddUser(User newUser)
    {
        User newUserReturn = _usersRepo.Create(newUser);
        return Json(newUserReturn);
    }
    [Route("api/Users/GetAll"), HttpGet]
    public IHttpActionResult GetObjects()
    {
        var allUsers = _usersRepo.GetAll();
        return Json(allUsers);
    }
    [Route("api/Users/Get/{id}"), HttpGet]
    public IHttpActionResult Get(Guid id)
    {
        var users = _usersRepo.GetOne(id);
        if (users == null)
        {
            return NotFound();
        }
        return Json(users);
    }
    [Route("api/Users/Update"), HttpPut]
    public IHttpActionResult UpdateUser(UserModel updatedUser)
    {
        User user = _usersRepo.Update(updatedUser);
        return Json(user);
    }
    [HttpDelete, Route("api/Users/Delete/{id}")]
    public IHttpActionResult DeleteUser(Guid id)
    {
        int res = _usersRepo.Delete(id);
        return Json("OK");
    }
}

All the methods linked with appropriated repository methods. By this we prepared the following API entry points:

  • api/Users/Add
  • api/Users/GetAll
  • api/Users/Get/{id}
  • api/Users/Update
  • api/Users/Delete/{id}

After you build and run the server, you can test all the created methods (e.g. you can use jQuery):

$.ajax({
    type: 'POST', url: '/api/Users/Add',
    data: {name: 'username', email: 'email', phone: 'phone', company: 'company', role: 1, status: 1},
    success: function(data, success) {
        console.log(data);
    },
    xhrFields: {
        withCredentials: true
    }
});
$.ajax({
    type: 'GET', url: '/api/Users/GetAll',
    success: function(data, success) {
        console.log(data);
    },
    xhrFields: {
        withCredentials: true
    }
});
$.ajax({
    type: 'GET', url: '/api/Users/Get/26f72318-63f4-4a22-a9fb-c04ddea6a6f4',
    success: function(data, success) {
        console.log(data);
    },
    xhrFields: {
        withCredentials: true
    }
});
$.ajax({
    type: 'PUT', url: '/api/Users/Update',
    data: {id: '26f72318-63f4-4a22-a9fb-c04ddea6a6f4', field: 'name', value: 'new name'},
    success: function(data, success) {
        console.log(data);
    },
    xhrFields: {
        withCredentials: true
    }
});
$.ajax({
    type: 'DELETE', url: '/api/Users/Delete/26f72318-63f4-4a22-a9fb-c04ddea6a6f4',
    success: function(data, success) {
        console.log(data);
    },
    xhrFields: {
        withCredentials: true
    }
});

Some hints and conclusions

Speaking about context and performance, fetching objects to the context. What if there are no further actions to change and save them.
If we are not going to modify these objects, AsNoTracking() should be called for this collection

Example:
Users[] ReadonlyUsers = context.Users.AsNoTracking().ToList();


It also can happen that you need to modify your existing db table.
If you create new fields, modify existing, or remove fields, you will need to update your database in Visual Studio.
Next three screenshotes explain how you can do it:
update database - step 1
update database - step 2
update database - step 3

Happy coding!

0 13835
Backend Web API with C#

The question of choosing a language for server backend logic is one of the most important question for almost every developer, especially for a beginner.
At the moment there are already a lot of different languages : java, .net (c#, vb), ruby, python, perl, javascript (node.js), go, c++.
So the question of choice is very actual.

As besides to the syntax features of languages, there are also many other problems / questions. Such as the possibility of expansion, the use of different types of databases, a high entry threshold into language, the requirements for fault tolerance, huge amounts of data and so on.

Which languages are the most popular? Which one should you use? Maybe someone will suggest php, with rich enough features and a low entry threshold in the language. However, the fact remains, and most used languages nowaday are Java and .Net.

This tutorial explains how you can build your own web server (Web API) using C# (ASP.Net). It is important to note that to host your server you will need to have windows-based hosting.

Prerequisites

I think we can begin. First of all, as we are working with C#, you need to use Microsoft Visual Studio (you can get it at official microsoft website).

Also you will need to enable IIS (Internet Information Services). It is pretty easy to enable it in windows:

Open Control Panel in Windows 10, click Programs, then find the “Programs and Features” section and click “Turn Windows features on or off“.

Here, find the Internet Information Services. Click the + icon in front of it to expand all available options under it. You can find FTP Server, Web Management Tools and World Wide Web Services. Now enable the Web Management Tools. Click OK button and the selected feature (or features) will be added and applied to your Windows.

Step 1 – Create new project

Open Microsoft Visual Studio and create a new project (File -> New -> Project). Select “Installed” Templates, select Visual C#. then select Web. In the list of available templates, select ASP.NET Web Application (.NET Framework). Give a name for your project, for my demo, I put “webapi”, click OK.

Visual Studio - New Project
ASP.NET Web Application

In the next modal dialog, you may choose any suitable template. Let’s select Web API, so it will prepare all basic initial files for the project. Click OK.

ASP.NET Web API

Done. Now you can browse the generated folders and files in the Solution Explorer. There are application configs, help page data, few controllers, fonts, css and js files.

ASP.NET Web API Created

Routing Table

By default, the server uses the Routing Table located in App_Start/WebApiConfig.cs.

Default WebApiConfig.cs

Pay attention to routeTemplate: "api/{controller}/{id}", it explains the api routing.

Now, let’s make a basic example. In this tutorial we will prepare API for Users, which is pretty general entity/object of every system.

Adding a User model

The model represents the user, we will include various fields like id, name, email, phone and role.

In Solution Explorer, right-click in the Models folder, select Add then select Class. Then provide class name: User. The model class is ready.

Add new Class
Add new Class - User

Now we just add all the fields we decided to add:

public class User
{
    public int id { get; set; }
    public string name { get; set; }
    public string email { get; set; }
    public string phone { get; set; }
    public int role { get; set; }
}

Add a User controller

In Web API, the controller is an object that handles all HTTP requests. In Solution Explorer, right-click the Controllers. Select Add, then select Controller.

Add new Controller
Web API 2 Controller with read/write actions

In the given dialog, select Web API 2 Controller with read/write actions. Name the controller – UsersController. It will prepare the controller with all CRUD actions.

Users Controller

In this article I prepared a basic example with dummy list of users:

public class UsersController : ApiController
{
    private User[] users = new User[]
    {
        new User { id = 1, name = "Haleemah Redfern", email = "email1@mail.com", phone = "01111111", role = 1},
        new User { id = 2, name = "Aya Bostock", email = "email2@mail.com", phone = "01111111", role = 1},
        new User { id = 3, name = "Sohail Perez", email = "email3@mail.com", phone = "01111111", role = 1},
        new User { id = 4, name = "Merryn Peck", email = "email4@mail.com", phone = "01111111", role = 2},
        new User { id = 5, name = "Cairon Reynolds", email = "email5@mail.com", phone = "01111111", role = 3}
    };
    // GET: api/Users
    [ResponseType(typeof(IEnumerable<User>))]
    public IEnumerable<User> Get()
    {
        return users;
    }
    // GET: api/Users/5
    public IHttpActionResult Get(int id)
    {
        var product = users.FirstOrDefault((p) => p.id == id);
        if (product == null)
        {
            return NotFound();
        }
        return Ok(product);
    }
    ...

Step 2 – Deployment

Now you can build your solution (Ctrl+Shift+B in Visual Studio), once the build is succeeded, you can run it. Click F5 and it will open in your browser automatically at your localhost in an available port (e.g. http://localhost:61024/). Most probably, you don’t want to keep it running in the Visual Studio all the time, and you prefer to keep it as service).

In this case, we can deploy it to a local dedicated server using IIS (Internet Information Services). It is pretty easy.

Firstly, open the IIS, on the left side under Sites – add a New Website (from the right panel or right-click on the Sites). Put the details: Site name “webapi.localhost.net”, Physical path “C:\projects\webapi” (where your solution is located), Binding – http or https, Host name is same – “webapi.localhost.net”. Click OK.

IIS - Add Website

IIS should run the Web API service on webapi.localhost.net.

Now if you try to open webapi.localhost.net in your browser, it won’t open the result we created. It happens because browser tries to resolve this address webapi.localhost.net as global domain. In order to map this domain name with local server we need to modify the local hosts file. On Windows (v10) the hosts file exists at C:\Windows\system32\drivers\etc folder. The file doesn’t have own extension, it is “hosts” file.

Copy it to another location and open it in editor

C:\Windows\system32\drivers\etc\hosts file

You need to add the following in the end of this file:

# Web API host
127.0.0.1       webapi.localhost.net

Now you need to put the modified file back to C:\Windows\system32\drivers\etc folder. As this folder is protected by windows by default, you will get access denied warning message. So you need to copy the file “As Administrator”.

After the file is updated, the webapi.localhost.net should load from your localhost (C:\projects\webapi).

Testing API

It is time to test the API methods we created for our Web server: api/users and api/users/{id}. Open “http://webapi.localhost.net/api/users” in your browser. You should get the following output:

api/users result

As we are creating the external API which should be accessible outside, we need to test our API from another page. The easiest way is to use a development toolbar (which exists in any modern browser). Usually it is activated when you press F12. Go to ‘Console’ tab. Below I prepared two small examples which you can use to test the APIs

In case if jQuery is available, you can use:

$.ajax({
    type: "GET",
    url: 'http://webapi.localhost.net/api/users',
    success: (data) => {
        console.log(data);
    }
});

Otherwise, using native javascript, you can use:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://webapi.localhost.net/api/users');
xhr.onload = function() {
    console.log(xhr.response);
};
xhr.send();

Very likely you will receive the following error

Access-Control-Allow-Origin error

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

The reason is that regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they’re limited by the same origin policy. Extensions aren’t so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

Adjust Cross-Origin Resource Sharing (CORS)

In order to solve this, we need to enable the CORS in our solution. In Visual Studio open Package Manage Console (available in bottom, between of Error List and Output). Run the following:

Install-Package Microsoft.AspNet.WebApi.Cors

It will install the WebApi.Cors reference. Then open “App_Start\WebApiConfig.cs” file. Add config.EnableCors(); before config.MapHttpAttributeRoutes();

Enable WebApi.Cors

Then go back to our UsersController.cs and add [EnableCors(origins: "*", headers: "*", methods: "*")] before the class definition

Enable Cors in Controller

Finally – rebuild the project again. Then try to test the APIs again, now it should work

Successful Web API request

I hope you enjoyed our article and you found it useful.

34 267990
Bootstrap one-page template with Parallax effect
Bootstrap one-page template with Parallax effect

Bootstrap one-page template with Parallax effect

Bootstrap tutorial / parallax scrolling tutorial. It is no secret that the bootstrap is used on many websites now. This allows to save time and create excellent results in a short period of time. In particular it concerns the markup and styles. Last time, when we wrote about the bootstrap, we received many positive comments, so I decided to prepare another lesson on using this framework today. In order to make it more interesting, we’ll create the demonstration with one of the interesting effects – Parallax. We will see the use of different backgrounds when scrolling the page. In order to understand what we intend to do – please have a look at the demo.

0 44160
Three.js - Working with Cameras

Our lessons on webgl continue. Today we review Threejs cameras. Threejs library provides two different cameras: orthographic camera (OrthographicCamera) and perspective camera (PerspectiveCamera). The best way to understand the difference between these cameras – try every one of them with your own eyes.

6 83050
HTML5 Canvas 3D Sphere

HTML5 Canvas 3D Sphere

Our new tutorial tells us about creation of animated 3D Sphere (through direct access to pixels of canvas). The sphere itself is getting around the canvas continuously. This example should work in the most of modern browsers (like Firefox, Chrome, Safari and even in IE).

0 43705
Polaroid gallery

Polaroid – we did not talk about photo galleries for a while, however enough time has already passed and here could be new galleries. Not so long ago, I stumbled on a new jquery plugin gallery, which builds the photos in a stack of Polaroid pictures. It seemed to me it was fun and can please you, because gallery has a very user-friendly and intuitive interface. Implementing it for a ‘stack’ of your photos is not difficult. Today we look at the whole process.

POPULAR TUTORIALS

CSS3 Modal Popups

94 632705
CSS3 Modal Popups CSS popup. Today I will tell you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago,...