How to create web application

Tutorial: Create the Web Application and Data Models for EF Database First with ASP.NET MVC

Using MVC, Entity Framework, and ASP.NET Scaffolding, you can create a web application that provides an interface to an existing database. This tutorial series shows you how to automatically generate code that enables users to display, edit, create, and delete data that resides in a database table. The generated code corresponds to the columns in the database table.

This tutorial focuses on creating the web application, and generating the data models based on your database tables.

In this tutorial, you:

Prerequisites

Create an ASP.NET web app

In either a new solution or the same solution as the database project, create a new project in Visual Studio and select the ASP.NET Web Application template. Name the project ContosoSite.

Click OK.

In the New ASP.NET Project window, select the MVC template. You can clear the Host in the cloud option for now because you will deploy the application to the cloud later. Click OK to create the application.

The project is created with the default files and folders.

In this tutorial, you will use Entity Framework 6. You can double-check the version of Entity Framework in your project through the Manage NuGet Packages window. If necessary, update your version of Entity Framework.

Generate the models

You will now create Entity Framework models from the database tables. These models are classes that you will use to work with the data. Each model mirrors a table in the database and contains properties that correspond to the columns in the table.

Right-click the Models folder, and select Add and New Item.

In the Add New Item window, select Data in the left pane and ADO.NET Entity Data Model from the options in the center pane. Name the new model file ContosoModel.

Click Add.

In the Entity Data Model Wizard, select EF Designer from database.

Click Next.

If you have database connections defined within your development environment, you may see one of these connections pre-selected. However, you want to create a new connection to the database you created in the first part of this tutorial. Click the New Connection button.

In the Connection Properties window, provide the name of the local server where your database was created (in this case (localdb)\ProjectsV13). After providing the server name, select the ContosoUniversityData from the available databases.

Click OK.

The correct connection properties are now displayed. You can use the default name for connection in the Web.Config file.

Click Next.

Select the latest version of Entity Framework.

Click Next.

Select Tables to generate models for all three tables.

Click Finish.

If you receive a security warning, select OK to continue running the template.

The models are generated from the database tables, and a diagram is displayed that shows the properties and relationships between the tables.

The Models folder now includes many new files related to the models that were generated from the database.

The ContosoModel.Context.cs file contains a class that derives from the DbContext class, and provides a property for each model class that corresponds to a database table. The Course.cs, Enrollment.cs, and Student.cs files contain the model classes that represent the databases tables. You will use both the context class and the model classes when working with scaffolding.

Before proceeding with this tutorial, build the project. In the next section, you will generate code based on the data models, but that section will not work if the project has not been built.

Next steps

In this tutorial, you:

Advance to the next tutorial to learn how to create generate code based on the data models.

How to Create a Web App: A Step-by-Step Guide (2022)

Learn how to make an app for free with no-code tools like Bubble in just 11 steps.

Vivienne Chen

Vivienne is Bubble’s Content Manager & Writer. She is a storyteller and is passionate about meaningful ways technology can help foster social solidarity.

More posts by Vivienne Chen.

Vivienne Chen

If you’ve never created a web application before, this is a guide to help you understand how to get started and overcome potential barriers that might hold you back. Using a no-code web app builder like Bubble, you can go from idea to fully fledged digital product in less time than it would take to find a technical co-founder and for a fraction of the cost of outsourcing your development.

How is a web application different from a website? The basic distinction is that a website is a collection of pages that display usually static content, while a web application is a piece of software with dynamic content and more complex user interactions; in a web app, you can leverage APIs or trigger actions from other software services. Both websites and web apps are accessible through your web browser (such as Chrome, Firefox, Microsoft Edge, Safari, etc.).

Examples of web applications: Facebook, Twitter, Gmail, and Amazon.com are all examples of web applications.

Examples of websites: Landing pages for corporate brands, local businesses, or traditional blogs.

But these days, many websites’ landing pages actually have web apps connected to them.

How do I start building a web app?

Option 1: No-code web app builders

No-code tools like Bubble are a great way to learn how to create a web application. Simplifying the design, development, and deployment of a web app makes it easier and faster to get your idea off the ground. Using Bubble, you can learn how to make an app for free.

Pros of Using No-Code Tools:

Cons of using no-code tools:

Option 2: Traditional coding frameworks

Web apps can be built by coding in many programming languages, including Javascript, Python, and Java. Learning to code takes time, and choosing the right languages for your product can be daunting for first-timers. If you don’t know how to code or you want to save time while learning how to create an app, you can try a no-code web app development platform.

Pros of traditional coding:

Cons of Traditional Coding:

Step 1: Have an idea (that makes sense).

Not every idea needs “an app for that.” Do your research first! Ask yourself, “what is this problem I want to solve?” Look into why this problem exists and think about what technology can do to address it. Interview people who might experience that problem, and get their feedback on possible solutions. If you find the answer is obvious and a web application makes everyone’s lives easier, great! You’re now ready to move on to the next phase.

Step 2: Brainstorm key features that your app must have.

In order to address the problem in Step 1, you now need to come up with a list of features that your app will have that address this problem. Examples of basic features for an app to collect money donations for charity causes might include: the ability to create charity profiles or causes that can receive donations, the ability to link a user’s credit card to donate money, and the ability to see how much money has been donated.

Step 3: Draft up your «MVP» (minimum viable product).

If you try to imagine your app in its complete form first, you might get caught up in all the bells and whistles your platform could have (with all the integrations you could imagine) and never get your idea completed. That’s why when you’re learning how to develop an app, it’s best to leverage the idea of an MVP: a basic but complete version of your app that showcases your app’s core features from Step 2. You can even draw this out on paper with basic workflows («when my user clicks this button, they’ll go here») attached to your design. In the case of our charity platform example, you may eventually want ways to share the fact that people donated, have users update people on the results of the charity, or create even more complex features like those of Kickstarter or GoFundMe. But by starting with just your core features, you increase the chance for success and can prove your platform works before investing time into more complexities.

Step 4: Take some time to get familiar with your no-code platform.

After you register your free account on Bubble, it’s common to need a bit of time to learn some of the basics of the platform. If you have a background in design tools, Bubble’s UI builder should look pretty familiar to you. Developers will probably catch onto Bubble’s workflow and data logic pretty quickly, as Bubble is built as a true visual programming language. But for someone who might have only encountered basic website builders, it’s important to realize that Bubble is much more powerful than Squarespace or Wix and will require you to do a little more thinking to make the thing you want.

Easy ways to get started for new Bubblers:

You don’t need to be an expert to start building, so don’t be afraid to learn as you go. You can always ask for help on our forums to get help from professional Bubblers.

Step 5: Think like a programmer, even without needing to code.

The most important differences between building a web app from scratch and building a simple website are the logic for the database that stores your app’s information and the workflow rules that determine how users interact with your app. Database engineering isn’t the sexiest stuff, but there are ways to think like a programmer would about your database while learning how to develop an app with no code.

Even before you start playing around with your web app’s design, you should navigate to Bubble’s Data tab, and answer these questions:

If you forget something or want to add a new thing to your database, it’s easy in Bubble to add a new field or data type after the fact. (For instance, you can later include a field for Photo images to your Restaurant tab so that users can upload photos). Note: Be careful when modifying your data types after you’ve built workflows! This might mess with existing logic in your app.

Step 6: Design your app.

Now it’s time to start building the basic pages and reusable elements you will need. Examples for pages most web apps will need include:

You can design these pages individually in Bubble and connect them together with navigational workflows or links in your site’s header or footer, hamburger menu, or buttons/pop-ups on your page.

Pro tip: For any app that makes use of multiple repeating components (lists of movies, marketplace store items, comment threads, etc.), use Bubble’s Repeating Group element to generate dynamic content on your pages.

Step 7: Activate your elements with workflows!

Workflows are where the magic happens with no-code web app builders like Bubble. In Bubble’s Workflow tab, you create the logic to:

Workflows are pretty powerful and open-ended. The Bubble UI builder doesn’t assume anything about what you want to do, so building workflows will help connect your data to your design and make your app fully functional! With traditional coding, this step may be the most time consuming to specify and deploy, but Bubble’s editor allows you to point-and-click through building your workflows and will have your app up and running in a fraction of the time.

Step 8: Set up your privacy settings.

Web apps need custom permissions, because (again) it’s not assumed that anyone but you understands what you want your users to see or not see. Go to the Data tab and click Privacy and learn how to set privacy settings in your app.

Step 9: Test and troubleshoot.

Test mode allows you to preview your app before you publish it. Try out your app in run mode and see if it behaves as you expect. If you noticed something wrong, Bubble comes with a handy debug mode and issue checker in the editor. You should also go back to the editor to see if your elements, workflows, and privacy rules are working as intended. If you need help, visit our Support Center or ask on our forums.

Step 10: Go live!

When you are ready to launch your app or connect your own custom domain to Bubble, you can do that by upgrading to a paid plan. Plans also unlock improved analytics and other feature perks.

Bonus Step: Iterate on your app after you go live. Adjusting to user feedback after launch is easy in Bubble. Redeploying your app is as simple as clicking a button, and with version control, you can always roll back to a previous update if needed.

Bubble is designed to help you build web apps faster and more affordably, without relying on expensive engineering resources. Getting your idea out into the world with no code is no problem, if you’re building on Bubble.

What’s the difference between a web app and a mobile app? There is no specific software-development kit (SDK) for web app development, unlike mobile apps made for iOS or Android. Mobile apps, also sometimes called native apps, are deployed on your smartphone via its app store (Google Play Store, Apple App Store, etc.). Web apps can still be accessed on your phone via a web browser app. If you want to turn your web app into a mobile app, there are ways to use custom native wrappers to save you time.

About Bubble

Developing Web Applications, Servlets, and JSPs for WebLogic Server

Creating and Configuring Web Applications

The following sections describe how to create and configure Web application resources.

Directory Structure

Web applications use a standard directory structure defined in the J2EE specification. You can deploy a Web application as a collection of files that use this directory structure, known as exploded directory format, or as an archived file called a WAR file. BEA recommends that you package and deploy your exploded Web application as part of an Enterprise application. This is a BEA best practice, which allows for easier application migration, additions, and changes. Also, packaging your Web application as part of an Enterprise application allows you to take advantage of the split development directory structure, which provides a number of benefits over the traditional single directory structure.

The WEB-INF directory contains the deployment descriptors for the Web application (web.xml and weblogic.xml) and two subdirectories for storing compiled Java classes and library JAR files. These subdirectories are respectively named classes and lib. JSP taglibs are stored in the WEB-INF directory at the top level of the staging directory. The Java classes include servlets, helper classes and, if desired, precompiled JSPs.

All servlets, classes, static files, and other resources belonging to a Web application are organized under a directory hierarchy.

DefaultWebApp/

DefaultWebApp/WEB-INF/web.xml

DefaultWebApp/WEB-INF/weblogic.xml

DefaultWebApp/WEB-INF/classes

DefaultWebApp/WEB-INF/lib

The entire directory, once staged, is bundled into a WAR file using the jar command. The WAR file can be deployed alone or as part of an Enterprise application (recommended) with other application components, including other Web applications, EJB components, and WebLogic Server components.

JSP pages and HTTP servlets can access all services and APIs available in WebLogic Server. These services include EJBs, database connections through Java Database Connectivity (JDBC), JavaMessaging Service (JMS), XML, and more.

Accessing Information in WEB-INF

The WEB-INF directory is not part of the public document tree of the application. No file contained in the WEB-INF directory can be served directly to a client by the container. However, the contents of the WEB-INF directory are visible to servlet code using the getResource and getResourceAsStream() method calls on the ServletContext or includes/forwards using the RequestDispatcher. Hence, if the application developer needs access, from servlet code, to application specific configuration information that should not be exposed directly to the Web client, the application developer may place it under this directory.

Since requests are matched to resource mappings in a case-sensitive manner, client requests for ‘/WEB-INF/foo’, ‘/WEb-iNf/foo’, for example, should not result in contents of the Web application located under /WEB-INF being returned, nor any form of directory listing thereof.

Directory Structure Example

The following is an example of a Web application directory structure, in which myWebApp/ is the staging directory:

Main Steps to Create and Configure a Web Application

Step One: Create the Enterprise Application Wrapper

Step Two: Create the Web Application

Step Three: Creating the build.xml File

Once you have set up your directory structure, you create the build.xml file using the weblogic.BuildXMLGen utility.

Step Four: Execute the Split Development Directory Structure Ant Tasks

Configuring How a Client Accesses a Web Application

You construct the URL that a client uses to access a Web application using the following pattern:

http:// hoststring / ContextPath / servletPath / pathInfo

hoststring

ContextPath

servletPath

pathInfo

If you are using virtual hosting, you can substitute the virtual host name for the hoststring portion of the URL.

Configuring Virtual Hosts for Web Applications

WebLogic Server supports two methods for configuring virtual hosts for Web applications:

Configuring a Channel-based Virtual Host

The following is an example of how to configure a channel-based virtual host:

Where Channel1 and Channel2 are the names of NetworkAccessPoint configured in the config.xml file. NetworkAccessPoint represents the dedicated server channel name for which the virtual host serves HTTP requests. If the NetworkAccessPoint for a given HTTP request does not match the NetworkAccessPoint of any virtual host, the incoming HOST header is matched with the VirtualHostNames in order to resolve the correct virtual host. If an incoming request does not match a virtual host, the request will be served by the default Web server.

Configuring a Host-based Virtual Host

The following is an example of how to configure a host-based virtual host:

Targeting Web Applications to Virtual Hosts

A Web application component can be targeted to servers and virtual hosts using the WebLogic Administration Console.

If you are migrating from previous versions of WebLogic Server, note that in the config.xml file, all Web application targets must be specified in the targets attribute. The targets attribute has replaced the virtual hosts attribute and a virtual host cannot have the same name as a server or cluster in the same domain. The following is an example of how to target a Web application to a virtual host:

Loading Servlets, Context Listeners, and Filters

Servlets, Context Listeners, and Filters are loaded and destroyed in the following order:

Order of loading:

Order of destruction:

Servlets and filters are loaded in the same order they are defined in the web.xml file and unloaded in reverse order. Context listeners are loaded in the following order:

Shared J2EE Web Application Libraries

A J2EE Web application library is a standalone Web application module registered with the J2EE application container upon deployment. Using WebLogic Server 9.2, multiple Web applications can easily share a single Web application module or collection of modules.

A Web application may reference one or more Web application libraries, but cannot reference other library types (EJBs, EAR files, plain JAR files).

Web application libraries are Web application modules deployed as libraries. They are referenced from the weblogic.xml file using the same syntax that is used to reference application libraries in the weblogic-application.xml file, except that the element is ignored.

At deployment time, the classpath of each referenced library is appended to the Web application’s classpath. Therefore, the search for all resources and classes occurs first in the original Web application and then in the referenced library.

Using JSF and JSTL With Web Applic ations

Three JSF (JavaServer™ Faces) and JSTL (JSP™ Standard Tag Library) packages are bundled with WebLogic Server as WebApp libraries. These libraries can be referenced by standard Web applications that use JSF or JSTL functionality.

The following three packages are being made available as WebApp libraries in release 9.2:

The libraries are located in the WL_HOME /common/deployable-libraries directory. The JSF libraries include the JSTL JAR files for convenience, so that if an application references a JSF library, it automatically gets JSTL support as well.

The following tables list the JSF and JSTL library file names and their MANIFEST entries:

Learning How to Build a Web Application

Lessons Learned on Web Development, Data Visualization, and Beyond

Motivation

Back in my undergraduate days, I did a LOT of mathematical proofs (e.g. Linear Algebra, Real Analysis, and my all time favorite/nightmare Measure Theory). In addition to learning how to think, I also learned to recognize many, and I mean many Greek and Hebrew letters.

However, as I took on more empirical work in graduate school, I realized that data visualization was often far more effective in communication than LaTeX alone. From crafting what information to convey to my readers, I learned that the art of presentation is far more important than I originally thought.

Luckily, I have always been a rather visual learner, so when it comes to beautiful data visualizations, they always grabbed my attentions and propel me to learn more. I began to wonder how people published their beautiful works on web; I became a frequent visitor of Nathan Yau’s FlowingData blog; And I am continued to be in awe when discovering visualizations like this, this, and this.

After many moments of envy, I couldn’t resist but to learn how to create them myself. This post is about the journey that I took to piece the puzzles together. By presenting my lessons learned here, I hope it can inspire all those who are interested in learning web development and data visualization to get started!

Setting Learning Goals

For this learning project, one of the things that I did early on was to consult with experts on what essential skills to learn. Fortunately, I received a very detailed answer from Alexander Blocker, a statistician at Google. In his words:

Learning Goals

My favorite part of his answer is the following paragraphs:

Finally, a bit on mindset. I like to think of building web applications as another way to express your ideas, just like giving talks, writing papers, or distributing R[Python] packages. A working prototype based on a new algorithm or dataset is often far more compelling than a report or command-line tool, especially to non-data-scientists.

Your web apps don’t have to be completely polished and productionised to be useful in this capacity. But, you do need to communicate your work just as clearly in an interactive app as would in any other medium.

I knew the only way that I could learn how these technologies work together is to build something integral, useful and fun. After some planning, I decided to build a Calendar Visualizer that OAuth to my Google Calendar and display how I allocate and spend my spare time.

Web Development 101 (with Flask)

When starting out, the first obstacle I ran into was to decide which language to use. I considered both Ruby and Python, but went with Python because I already have some familiarity with the language. Picking between frameworks such as Django and Flask was a bit harder, but eventually I chose Flask because the micro-framework feels more approachable to me — I could build things bottom-up and extend my web application as needed.

What is a Web Framework?

Coming from a non-CS background, the first transition that I needed to make was to think beyond scientific computing, i.e. imperative style scripting. At first, I was confused by what a Framework meant or why one would need it. It’s not until reading Jeff Knupp’s well articulated post “What is a Web Framework?” did I realize:

The Big Picture

To hone in on the above points, here is a schematic that illustrates how a web application works in its essence. Client makes request through HTTP network, Server then processes this request and figures out the right response to return to the Browser. This model is called the client-server architecture.

A More Granular Picture

We can zoom in further to take a closer look at the typical architecture of a modern web application:

Generally speaking, there are three essential layers in a web application:

Depending on your interests and goals, you might develop more specific skills in one area than the other. Given that my goal was to see how everything worked together, I took a breadth-first search approach and learned just enough to see how each layer works. In the following sections, I will dive into each layer in more details and highlight some of the big ideas and lessons learned.

Application Layer

Let’s start our journey by revisiting the fundamental question — How does a web server know what information to return for a given request? The key lies in the Application Layer. Web Frameworks like Flask enable us to leverage Routes and Templates which make the presentation logic so much easier.

Routes

In Flask, Routes are enabled by decorators. In case you don’t know what a decorator is, check out Simeon Franklin’s awesome post to learn more! Conceptually, the @route decorators notify the framework about the existence of specific URLs and the function meant to handle them. Flask calls our functions that get a request and return a response views.

When Flask processes an HTTP request it uses this information to figure out which views it should pass the request to. The function can then return data in a variety of formats (HTML, JSON, plain text) that will be used by Flask to create an HTTP response. Let us demonstrate this by an example:

The decorator webapp.route, upon receiving a request from /user, evokes the view which returns a HTML table. This is what happened under the hood when a user visits the /user page (see screenshot below).

B ig Idea / Lesson Learned: Routes are the fundamental building blocks that enables client-server interaction! To see another simple example how this works, see Philip Guo’s short but instructive tutorial.

Templates

The above example was rather simple, we could hardcode the entire HTML page inline. However, real HTML pages are often more complex, and coding contents inline is simply too tedious, error-prone, and repetitive. In addition, Flask’s philosophy is to make method definitions as simple and as self-explanatory as possible. What can we do? Here comes templates!

The most intuitive explanation of templates again come from Jeff Knupp:

HTML Templating is similar to using str.format(): the desired output is written with placeholders for dynamic values. These are later replaced by arguments to the str.format() function. Imagine writing an entire web page as a single string, marking dynamic data with braces, and calling str.format() at the end. Both Django templates and jinja2, the template engine Flask uses, are designed to be used in this way.

This design enables us to create scaffolds for different but similarly structured HTML pages. It makes presentation logic very customizable and reusable. Let’s revisit our view and see how a template can help:

Functionality wise, this view does the exact same thing as before, it returns the same HTML table. However, the only difference is that the method definition is now much more readable — to render HTML. Where is the HTML code then? It is actually modularized in user.html:

Notice that this file does not look like our typical HTML page. It is, in fact, templatized:

All these constructs facilitate us to write flexible HTML templates, and allow us to separate what to present from how to present.

B ig Idea / Lesson Learned: Templates do not change what is presented to the users, but it makes the how much more organized, customizable, and extensible. To learn more examples, check out this detailed Jinja template documentation.

Data Layer + RESTful APIs

We now see how routes and templates enable client-server interactions, but where do all the data come from? Introducing database — the most common way to persistently store data.

Database, SQL, and CRUD operations

Depending on the scale, different databases might be more suitable for handling different traffics. One of the simplest databases is SQLite, where data is persisted in a single local file. However, it is generally not the right choice for data intensive applications (instead, MySQL is the more standard choice). Given that our application analyzes and visualizes events, let’s see how a database can help us to persist this data. First, let us define a data model named dim_events that keeps track of event date, event name, and its duration:

With the table created, we can execute SQL statements to populate the table and perform additional CRUD (Create/Read/Update/Delete) operations. When the application needs to query this data, our database is responsible for handing the data from the data layer to the application layer:

As an example, the show_all_events view needs to display all the events. And one particular way to surface this data is to execute a SQL query inside the view function. The code is simple, readable, but unfortunately problematic:

ORM and SQLAlchemy

How can we improve this? We need the concept of Object-Relational Mappers (ORM). My favorite explanation of ORM is from Full Stack Python:

An object-relational mapper (ORM) is a code library that automates the transfer of data stored in relational databases tables into objects that are more commonly used in application code. It allow developers to access data from a backend by writing Python code instead of SQL queries.

One of the most popular ORMs in Flask is SQLAlchemy. Instead of creating the dim_events table in SQLite directly, it allows us to initialize the same events table in Python as a Class:

More importantly, SQLAlchemy allows us to represent data models as Class instances, so interacting with databases in the application layer is now much more natural in the application code. The example below only uses all and filter operators (which is equivalent to SELECT * AND WHERE in SQL respectively), but SQLAlchemy is much more versatile than that!

Let’s see all of these hard works in action when we visit /dbdisplay/Exercise:

B ig Idea / Lesson Learn: A database enables data to persist in an application. The proper way to query data in the application code is to leverage ORM such as SQLAlchemy. To learn more, check out the official documentation & tutorial.

RESTful API endpoints

Often time, it is useful to expand data access beyond our own applications to third party developers (see here, here, and here). More openness enables more creative usage of data, which means more innovation. One of the most popular standards to expose proprietary data to the public is via RESTful APIs.

A good way to think about RESTful APIs is that they act as functions — functions that take in specific parameters as inputs and output standardized data in a controlled manner. The entire execution of the “function call” happens via HTTP: arguments are passed as part of the URL parameters, and data is returned by the function as a HTTP response.

With tools like SQLAlchemy, building API endpoints is actually not too different from what we have already done. Views take in the URLs and issue specific queries in order to return the results based on the parameters. Below are the two views that we have seen before, but slightly modified. Notice the only thing that really changes is the return type of the data is now in JSON.

Let’s see how things work when we hit these API endpoints:

B ig Idea / Lesson Learned: APIs are convenient endpoints for developers to expose proprietary data to the outside world in a controlled manner. The specification of the data request is often composed as parameters in the URL, data are returned via HTTP, and often are presented in JSON form. I highly recommend reading Miguel Grinberg’s long but engaging post to learn more.

Next up, we will see how everything (routes, templates, database, API endpoints) fits together to create what we are going after in the first place — data visualizations.

Front End Layer

The front end layer is the closest layer to the end users, and requires a lot of design and creativity. For the scope of this post, we will focus on how to display data visualizations using D3.

Creating Interactive Charts with D3.js

First of all, if you don’t already know D3, I highly recommend Scott Murray’s Interactive Data Visualization, it was one of the most valuable resources for me to start learning D3! Like many others, my first exposures to D3 came from tutorials. Typically, a simple example would hardcode a fake dataset, and explain in length how to create a bar/pie/line chart out from it.

While they are educational, I always had little idea on how things really work in a real application, i.e. Where do data come from? As I gained more experiences, I learned that D3 actually offers a wide range of options to load data into the browser, one particular method is called d3.json.

This makeGraph function takes two arguments — an URL and a callback function (not implemented in the above code snippet).

The callback function will take that data, bind it with DOM elements, and display the actual visualizations on the browser. This is usually the place where we write our D3 visualization code.

Let us see this through by a more elaborate example. In my web app, there is a tab called “Calendar View” that allows a user to display her activities in the form of calendar heatmaps:

For this visualization, each cell here represent a single day. The color intensity represents how much time I spent on a particular activity on that day. In the plot above, each highlighted block means that I did some form of exercise on that day. It’s obvious from the chart above that my New Year Resolution is to exercise more regularly in 2016.

Where does it fetch the data, and how does it display this information? How does one construct a calendar? Let’s deconstruct this step by step:

For each of the visualization that is being rendered, that’s essentially what is happening under the hood:

B ig Idea / Lesson Learned: When a request triggers a view, the view will attempt to render the HTML and execute the Javascript file. The D3 code in the Javascript file will issue a query to the API endpoint, and returned data will be bind to actual DOM elements to be shown on the web browser. Routes, templates, databases, and APIs all work together to get this done! To learn more, here is another illustrative example that study BART data.

Beautify-ing UI Using Twitter Bootstrap

Now that we have all the essential components for a functional web application, the last touch is to beautify the look and feel of this application. During my time at Twitter, I noticed that a lot of the internal tools tend to have the same looks, then our designer pointed out to me Twitter Bootstrap:

A front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny resource.”

Twitter Bootstrap is extremely powerful because it enables us to upgrade the look and feel of my application very easily. Below is an example where headers and table formatting essentially come free because of Twitter Bootstrap:

B ig Idea / Lesson Learned: If you are interested in Design and UI, don’t re-invent the wheels. There is no shortage of layouts, components, and widgets to play with in Twitter Bootstrap. To learn more, I recommend this tutorial.

Summary

In this blog post, I barely scratch the surface of web development, but the goal was never to be comprehensive. Rather, I am interested in sharing my experience and point other enthusiasts to great resources in order to learn more. A little effort goes a long way, I am now able to present my analyses in more expressive and interactive ways!

For Data Scientists, there are certainly more lightweight approaches to produce (interactive) data visualizations, using tools such as ggplot2, ggviz, or shiny. But I think learning how a web application works in general also make one a stronger DS. For example, if you ever need to figure out how data is logged in an application, knowing how web application tend to be built can help you so much in navigating the codebase to do data detective works. This knowledge also helps you to establish common languages with the engineers in more technical engineering discussions.

If you are inspired, there are many more resources written by programmers who are much more qualified than I am on this topic (see here and here).

Start Flasking and keep hacking!

Tutorial: Get started with EF Core in an ASP.NET MVC web app

This tutorial teaches ASP.NET Core MVC and Entity Framework Core with controllers and views. Razor Pages is an alternative programming model. For new development, we recommend Razor Pages over MVC with controllers and views. See the Razor Pages version of this tutorial. Each tutorial covers some material the other doesn’t:

Some things this MVC tutorial has that the Razor Pages tutorial doesn’t:

Some things the Razor Pages tutorial has that this one doesn’t:

The Contoso University sample web app demonstrates how to create an ASP.NET Core MVC web app using Entity Framework (EF) Core and Visual Studio.

The sample app is a web site for a fictional Contoso University. It includes functionality such as student admission, course creation, and instructor assignments. This is the first in a series of tutorials that explain how to build the Contoso University sample app.

Prerequisites

Database engines

The Visual Studio instructions use SQL Server LocalDB, a version of SQL Server Express that runs only on Windows.

Solve problems and troubleshoot

If you run into a problem you can’t resolve, you can generally find the solution by comparing your code to the completed project. For a list of common errors and how to solve them, see the Troubleshooting section of the last tutorial in the series. If you don’t find what you need there, you can post a question to StackOverflow.com for ASP.NET Core or EF Core.

This is a series of 10 tutorials, each of which builds on what is done in earlier tutorials. Consider saving a copy of the project after each successful tutorial completion. Then if you run into problems, you can start over from the previous tutorial instead of going back to the beginning of the whole series.

Contoso University web app

The app built in these tutorials is a basic university web site.

Users can view and update student, course, and instructor information. Here are a few of the screens in the app:

Create web app

Set up the site style

A few basic changes set up the site menu, layout, and home page.

Open Views/Shared/_Layout.cshtml and make the following changes:

The preceding changes are highlighted in the following code:

Press CTRL+F5 to run the project or choose Debug > Start Without Debugging from the menu. The home page is displayed with tabs for the pages created in this tutorial.

EF Core NuGet packages

This tutorial uses SQL Server, and the provider package is Microsoft.EntityFrameworkCore.SqlServer.

Add the Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore NuGet package. In the Package Manager Console (PMC), enter the following commands to add the NuGet packages:

The Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore NuGet package provides ASP.NET Core middleware for EF Core error pages. This middleware helps to detect and diagnose errors with EF Core migrations.

For information about other database providers that are available for EF Core, see Database providers.

Create the data model

The following entity classes are created for this app:

The preceding entities have the following relationships:

In the following sections, a class is created for each of these entities.

The Student entity

In the Models folder, create the Student class with the following code:

The Enrollments property is a navigation property. Navigation properties hold other entities that are related to this entity. The Enrollments property of a Student entity:

Enrollment rows contain a student’s PK value in the StudentID foreign key (FK) column.

If a navigation property can hold multiple entities:

Many-to-many and one-to-many navigation relationships can contain multiple entities. When ICollection is used, EF creates a HashSet collection by default.

The Enrollment entity

In the Models folder, create the Enrollment class with the following code:

The EnrollmentID property is the PK. This entity uses the classnameID pattern instead of ID by itself. The Student entity used the ID pattern. Some developers prefer to use one pattern throughout the data model. In this tutorial, the variation illustrates that either pattern can be used. A later tutorial shows how using ID without classname makes it easier to implement inheritance in the data model.

The Course entity

In the Models folder, create the Course class with the following code:

The Enrollments property is a navigation property. A Course entity can be related to any number of Enrollment entities.

The DatabaseGenerated attribute is explained in a later tutorial. This attribute allows entering the PK for the course rather than having the database generate it.

Create the database context

In the Data folder create a SchoolContext class with the following code:

The preceding code creates a DbSet property for each entity set. In EF terminology:

The DbSet and DbSet statements could be omitted and it would work the same. EF would include them implicitly because:

Register the SchoolContext

ASP.NET Core includes dependency injection. Services, such as the EF database context, are registered with dependency injection during app startup. Components that require these services, such as MVC controllers, are provided these services via constructor parameters. The controller constructor code that gets a context instance is shown later in this tutorial.

The name of the connection string is passed in to the context by calling a method on a DbContextOptionsBuilder object. For local development, the ASP.NET Core configuration system reads the connection string from the appsettings.json file.

Open the appsettings.json file and add a connection string as shown in the following markup:

Add the database exception filter

Add AddDatabaseDeveloperPageExceptionFilter to ConfigureServices as shown in the following code:

The AddDatabaseDeveloperPageExceptionFilter provides helpful error information in the development environment.

SQL Server Express LocalDB

The connection string specifies SQL Server LocalDB. LocalDB is a lightweight version of the SQL Server Express Database Engine and is intended for app development, not production use. LocalDB starts on demand and runs in user mode, so there’s no complex configuration. By default, LocalDB creates .mdf DB files in the C:/Users/ directory.

Initialize DB with test data

EF creates an empty database. In this section, a method is added that’s called after the database is created in order to populate it with test data.

The EnsureCreated method is used to automatically create the database. In a later tutorial, you see how to handle model changes by using Code First Migrations to change the database schema instead of dropping and re-creating the database.

In the Data folder, create a new class named DbInitializer with the following code:

The preceding code checks if the database exists:

Update Program.cs with the following code:

Program.cs does the following on app startup:

The first time the app is run, the database is created and loaded with test data. Whenever the data model changes:

In later tutorials, the database is modified when the data model changes, without deleting and re-creating it. No data is lost when the data model changes.

Create controller and views

Use the scaffolding engine in Visual Studio to add an MVC controller and views that will use EF to query and save data.

The automatic creation of CRUD action methods and views is known as scaffolding.

The Visual Studio scaffolding engine creates a StudentsController.cs file and a set of views ( *.cshtml files) that work with the controller.

Notice the controller takes a SchoolContext as a constructor parameter.

ASP.NET Core dependency injection takes care of passing an instance of SchoolContext into the controller. You configured that in the Startup class.

The controller contains an Index action method, which displays all students in the database. The method gets a list of students from the Students entity set by reading the Students property of the database context instance:

The asynchronous programming elements in this code are explained later in the tutorial.

The Views/Students/Index.cshtml view displays this list in a table:

Press CTRL+F5 to run the project or choose Debug > Start Without Debugging from the menu.

Click the Students tab to see the test data that the DbInitializer.Initialize method inserted. Depending on how narrow your browser window is, you’ll see the Students tab link at the top of the page or you’ll have to click the navigation icon in the upper right corner to see the link.

View the database

Use SQL Server Object Explorer (SSOX) to view the database in Visual Studio:

Right-click the Student table and click View Data to see the data in the table.

The *.mdf and *.ldf database files are in the C:\Users\ folder.

Because EnsureCreated is called in the initializer method that runs on app start, you could:

For example, if an EmailAddress property is added to the Student class, a new EmailAddress column in the re-created table. The view won’t display the new EmailAddress property.

Conventions

The amount of code written in order for the EF to create a complete database is minimal because of the use of the conventions EF uses:

Conventional behavior can be overridden. For example, table names can be explicitly specified, as shown earlier in this tutorial. Column names and any property can be set as a PK or FK.

Asynchronous code

Asynchronous programming is the default mode for ASP.NET Core and EF Core.

A web server has a limited number of threads available, and in high load situations all of the available threads might be in use. When that happens, the server can’t process new requests until the threads are freed up. With synchronous code, many threads may be tied up while they aren’t actually doing any work because they’re waiting for I/O to complete. With asynchronous code, when a process is waiting for I/O to complete, its thread is freed up for the server to use for processing other requests. As a result, asynchronous code enables server resources to be used more efficiently, and the server is enabled to handle more traffic without delays.

Asynchronous code does introduce a small amount of overhead at run time, but for low traffic situations the performance hit is negligible, while for high traffic situations, the potential performance improvement is substantial.

Some things to be aware of when writing asynchronous code that uses EF:

Limit entities fetched

See Performance considerations for information on limiting the number of entities returned from a query.

SQL Logging of Entity Framework Core

Logging configuration is commonly provided by the Logging section of appsettings..json files. To log SQL statements, add «Microsoft.EntityFrameworkCore.Database.Command»: «Information» to the appsettings.Development.json file:

With the preceding JSON, SQL statements are displayed on the command line and in the Visual Studio output window.

Advance to the next tutorial to learn how to perform basic CRUD (create, read, update, delete) operations.

This tutorial teaches ASP.NET Core MVC and Entity Framework Core with controllers and views. Razor Pages is an alternative programming model. For new development, we recommend Razor Pages over MVC with controllers and views. See the Razor Pages version of this tutorial. Each tutorial covers some material the other doesn’t:

Some things this MVC tutorial has that the Razor Pages tutorial doesn’t:

Some things the Razor Pages tutorial has that this one doesn’t:

The Contoso University sample web application demonstrates how to create ASP.NET Core 2.2 MVC web applications using Entity Framework (EF) Core 2.2 and Visual Studio 2017 or 2019.

This tutorial has not been updated for ASP.NET Core 3.1. It has been updated for ASP.NET Core 5.0.

The sample application is a web site for a fictional Contoso University. It includes functionality such as student admission, course creation, and instructor assignments. This is the first in a series of tutorials that explain how to build the Contoso University sample application from scratch.

Prerequisites

Troubleshooting

If you run into a problem you can’t resolve, you can generally find the solution by comparing your code to the completed project. For a list of common errors and how to solve them, see the Troubleshooting section of the last tutorial in the series. If you don’t find what you need there, you can post a question to StackOverflow.com for ASP.NET Core or EF Core.

This is a series of 10 tutorials, each of which builds on what is done in earlier tutorials. Consider saving a copy of the project after each successful tutorial completion. Then if you run into problems, you can start over from the previous tutorial instead of going back to the beginning of the whole series.

Contoso University web app

The application you’ll be building in these tutorials is a simple university web site.

Users can view and update student, course, and instructor information. Here are a few of the screens you’ll create.

Create web app

Open Visual Studio.

From the File menu, select New > Project.

From the left pane, select Installed > Visual C# > Web.

Select the ASP.NET Core Web Application project template.

Enter ContosoUniversity as the name and click OK.

Wait for the New ASP.NET Core Web Application dialog to appear.

Select .NET Core, ASP.NET Core 2.2 and the Web Application (Model-View-Controller) template.

Make sure Authentication is set to No Authentication.

Select OK

Set up the site style

A few simple changes will set up the site menu, layout, and home page.

Open Views/Shared/_Layout.cshtml and make the following changes:

Change each occurrence of «ContosoUniversity» to «Contoso University». There are three occurrences.

Add menu entries for About, Students, Courses, Instructors, and Departments, and delete the Privacy menu entry.

The changes are highlighted.

Press CTRL+F5 to run the project or choose Debug > Start Without Debugging from the menu. You see the home page with tabs for the pages you’ll create in these tutorials.

About EF Core NuGet packages

To add EF Core support to a project, install the database provider that you want to target. This tutorial uses SQL Server, and the provider package is Microsoft.EntityFrameworkCore.SqlServer. This package is included in the Microsoft.AspNetCore.App metapackage, so you don’t need to reference the package.

The EF SQL Server package and its dependencies ( Microsoft.EntityFrameworkCore and Microsoft.EntityFrameworkCore.Relational ) provide runtime support for EF. You’ll add a tooling package later, in the Migrations tutorial.

For information about other database providers that are available for Entity Framework Core, see Database providers.

Create the data model

Next you’ll create entity classes for the Contoso University application. You’ll start with the following three entities.

There’s a one-to-many relationship between Student and Enrollment entities, and there’s a one-to-many relationship between Course and Enrollment entities. In other words, a student can be enrolled in any number of courses, and a course can have any number of students enrolled in it.

In the following sections you’ll create a class for each one of these entities.

The Student entity

In the Models folder, create a class file named Student.cs and replace the template code with the following code.

The ID property will become the primary key column of the database table that corresponds to this class. By default, the Entity Framework interprets a property that’s named ID or classnameID as the primary key.

The Enrollments property is a navigation property. Navigation properties hold other entities that are related to this entity. In this case, the Enrollments property of a Student entity will hold all of the Enrollment entities that are related to that Student entity. In other words, if a Student row in the database has two related Enrollment rows (rows that contain that student’s primary key value in their StudentID foreign key column), that Student entity’s Enrollments navigation property will contain those two Enrollment entities.

The Enrollment entity

In the Models folder, create Enrollment.cs and replace the existing code with the following code:

The EnrollmentID property will be the primary key; this entity uses the classnameID pattern instead of ID by itself as you saw in the Student entity. Ordinarily you would choose one pattern and use it throughout your data model. Here, the variation illustrates that you can use either pattern. In a later tutorial, you’ll see how using ID without classname makes it easier to implement inheritance in the data model.

Entity Framework interprets a property as a foreign key property if it’s named