Even YOU can code serverside

Author: Daniel Jozsef April 15th, 2012

, , , ,

I wrote this guide for JavaScript developers who are new to serverside coding. As clients have gotten smarter and smarter, especially with the extensions heralded by HTML5, we have finally reached the level where one can code an immersive, complex application with nothing but knowledge of HTML, CSS and JavaScript.

This is a great time to be a clientside developer, but for a web application to be truly interesting and useful, one cannot sidestep the need to have a central datastore, a server that will make the data of users available on whatever device they use to access your application, and if needed, allow your users to interact with each other as well.

Serverside can be intimidating for the newcomer, but today, it has become extremely easy to build what you need—mostly because what you need isn’t all that much at all. You need a database, and some logic to make it accessible. That logic exists in the form of ready-to-use libraries, and you can relegate most or all business knowledge to the client. That is what I wish to show you—how simple and straightforward serverside can be.

I am going to be showing you how to create a database in Visual Studio, and publish it as an OData data source through a WCF Data Service. OData is a standard REST based data access protocol, that is more-or-less equivalent to direct access to an object database. It is not relational in its philosophy, but most relational queries translate quite easily to OData.

The server code I will show you how to build will be rather simplistic, and lack security features, but my goal here is to help you jump the first wall into the world of server coding. I will give you references to help you secure your service if you wish to deploy it.

Throughout the tutorial, we are going to use Microsoft technologies. If you own a recent Microsoft Windows operating system, you do not need to buy further software, you can follow this tutorial by using free-of-charge components you can download from Microsoft.

What you will need:
  • Visual Studio 2010 (Web Developer Express)
  • SQL Server Compact Edition
Skills I assume you to have:
  • Poweruser skills on Windows
  • Understanding of relational databases
  • Some understanding of object oriented code

Step 1. Prepare the environment

You will need the Microsoft Web Platform Installer. Everything you need can be installed automatically using this tool. You can download it from http://download.microsoft.com/

Unless you have access to a full version of Visual Studio, make sure to install:
  • Visual Web Developer Express 2010 (SP1)
Other components you need (from the Products tab):
  • SQL Server Compact 4.0
  • Visual Studio 2010 Tools for SQL Server Compact

After the install, start Visual Studio Express up. This is all you will need for development.

Step 2. Set up your project

In Visual Studio, select New > Project, and select ASP.NET Empty Web Application from the list of templates. Give a name to your application.

Now you need a database. In the Solution Explorer, right click on the project, and select Add > Add ASP.NET folder > App_Data. Then, on the folder click Add New Item, and select SQL Server Compact 4.0 Local Database.

Now you have a Visual Studio project, and a database to go with it. Now you need to set the database structure up.

Step 3. Create the database structure

This is the step where you will need your knowledge of relational databases, as now you need to create the tables to store the data your application will need. Before this step, in the case of an actual application, you will of course need to do a little architecting.

SQL Server Compact is a lightweight, filesystem-based implementation of SQL, specifically created for light load use, and is extremely useful for development and experimentation purposes, so I am going to keep referencing it in this tutorial.

Of course, the basic workflow can be applied to a “proper” SQL Server database as well, though it will need additional setup steps, but you will find countless tutorials on the web that will help you with it.

To start setting up your database, double-click the .sdf file of the Compact database in the App_Data folder. The Server Explorer tab will open, showing the database.

Here, on the Tables item, you can add new tables by selecting Create Table from the context menu. In the New Table window, you can set up the columns you need, with the necessary Identity and Primary key constraints.

After setting up your tables, it is time to set up Foreign key constraints. Select Table Properties from the context menu, and from there, the Add Relations tab.

With this, the database is complete.and ready for use. In the example, I have created a Category table which matches category codes to names, and an Article table which stores articles, with a foreign key column referencing a category.

Step 4. Let the .NET framework do the work for you

Now that you have a database, all there is left to do is to wire it up and publish it. Using OData, you can make a database available on the Internet for low-level query, which means you can keep the logic in the client.

Auto-generate the model from the SQL Compact database:

Once you are ready, you have a .NET class representation of your database schema.

All that is left before you can start connecting to your serverside is to create the OData endpoint. In the Add new item window, select WCF Data Service.

Now you need to configure your service to publish the data model you just auto-generated. First, find the name of the Entity Context from the auto-generated .cs file of the data model.

Then, copy it into the code of the service:

As you can see, the service endpoint is a class that inherits the DataService abstract generic class. The class used as the type parameter specifies the context that will be served through OData. This service endpoint type can be used for various data sources, feel free to read all about it if you are interested.

Now you need to set allowed operations. You can doing that per entityset (database table), in the InitializeService function body. Here you can set which tables can be updated by your client, and which ones are read-only, or even write-only (say, for auditing and logging information).

The commands to set access for a table looks like this:

The first parameter is the table (entityset) name, and the second one is the access level. If you type EntitySetRights., Visual Studio will offer you a choice of the possible values, most of which are self-explanatory.

For our test drive, my service endpoint class looks like this:

And we are ready to run. First go back to the Server Explorer, click Show Data in the context menu of your tables, and add some test data. Once ready, hit Debug.

Step 5. Test your project

Since the WCF Data Service uses the RESTful webHttp binding, you can test your service from a browser. However, since a browser URL row can only produce GET requests, you’ll need a tool to test updating and adding rows.

I recommend the Silverlight OData Explorer, which you can download for free: http://www.silverlight.net/content/samples/odataexplorer/default.html

Have fun with your database. You have just published a flexible data backend that your clientside code can use as it would use a local SQL database.

Step 6. Moving forward

Of course, the code isn’t ready yet, but you have gotten a feel for how simple serverside can be.

You will still need to add protective measures to your service. Since the WCF Data Service is hosted in a .NET web application, you can use the ASP.NET membership system for logon management.

To enforce user or group rights and critical business rules, there is a little coding you will have to do though, adding so-called interceptor methods to your service class. You can read all about this here:

Further reading:

, , , ,