Microsoft Azure Tutorial:build your first movie inventory Web App with just a few lines of code

Editor ' s Note: The following is a guest post from Mustafa Mahmutovi?, a Microsoft Student Partner who attends the Faculty of Electric Al Engineering at the University of Sarajevo where he was a computer science Major.

In this tutorial, you'll learn how the built-in features of Visual Studio Community and the. NET Framework does a lot The creating a web App. Using very little code, you ll build a database of a movie collection. So, even if is new to programming, you can use the these tools and services to make something cool.

The ASP. NET MVC is a Web app framework, this gives you a powerful-to build dynamic web apps. You'll use ASP. NET MVC 5 and Entity Framework 6, which gets deployed on Azure app Service–web app and Azure SQL Database .

You'll need Microsoft Azure, Visual Studio Community Edition and Microsoft Azure SDK for. NET (VS 2015)-2.8.2. In addition, you'll need to register and verify yourself as a student if you haven ' t already, which your can do here.

Let ' s get started!

Using your Microsoft account, sign into Microsoft Azure. As can see, there is many options on the Azure portal.

Leave Azure Open in your browser, we'll use it later.

Step one:develop an MVC Web App

Now it's time to develop our MVC Web App on Azure, using the EntityFramework with CRUD (Create, read, update and delete).

1. Open Visual Studio Community and log in to your Azure account.

2. Open Cloud Explorer to see all the projects or apps with on your Azure account:view->other windows->cloud Ex Plorer or View->cloud Explorer (the second option in my version).

3. If you can ' t find ' Cloud Explorer ' on ' Other Windows ', check the ' View ' in the list menu. When you had clicked ' Cloud Explorer ', this was what you'll see in Visual Studio.

Step two:create a New ASP. NET WEB application Project

Now let's create a new ASP. Web Application project.

1. To name a project, go to file->new project->web->asp.net Web application. (For the purposes of this tutorial, I has kept the default option).

2. When you click ' OK ', a new window would pop up. First, choose MVC, then make sure that's using Azure and that ' Host in the Cloud ' is selected. then click OK.

Step three:create an App Service

The next step would help you to create a new app service on Azure. When the ' Configure Microsoft Azure Web Apps Settings ' dialog appears, make sure this is signed in to Azure.

1. First you'll have the to give a unique Web App Name (I named Mine AppName webapplicationooad). If you want to specify a name for your web app, change the value of the ' web App ' name ' the URL of the web app would be ' {name ' }.azurewebsites.net, so the name is unique in the azurewebsites.net domain. The configuration Wizard suggests a unique name by adding a number to the project name ' Webapplicationooad, ' which is fine For the purposes of this tutorial.

2. In the ' Subscription ' box, you'll use your DreamSpark Subscription.

3. For ' Resource group ', type the name of the your new Resource group. You can use one resource group for multiple projects or can create a new resource group for each project that would be On Azure. I have named mine Mvcappgroup.

4. For ' App Service Plan ', double-click on ' new ', then choose the nearest region and click ' OK '.

5. When do you do, you should see something like this (except so you'll have a DreamSpark subscription):

6. Click ' Create '.

Once your project is created, your first view would be the one shown below.

7. Now let's test the default generated view on MVC Web App. Click on the start icon and select Microsoft Edge. Before that, you can see that ASP. Already created Models, views and Controllers for us. The browser'll open your app and you'll see this:

Step Four:add a New Class

Now let's go back to Visual Studio and add a new class to the project (this class represents a table and the properties re Presents the colums of that table).

1. Open the folder named ' Models ', right-click and Add->new Item->class.

2. Give a name to that class (I called it ' Movie ').

3. On the class, create (or Copy/paste) the following code:

4. You'll get a error message on DbContext. Simply Right-click on the error to resolve and add a library to the class:entity or shortcut CTRL +. (dot) Enter, enter. You'll end up with the something like this:

Step Five:add a Controller using Scaffold

The next thing we ' ll create is a Scaffold Item.

1. Right click on controllers->add->new scaffolded Item

2. Now choose, the ' MVC 5 Controller with views, using the Entity Framework ' and click ' Add '.

3. Enter your model name in the empty fields.

4. If An error pops up like the screenshot below, just rebuild a solution and try to add a scaffolded item again.

After the code generation process is complete, you'll see a new controller and an in your project. The Controller was automatically created with a CRUD operations. The views were automatically created (open "views" and you'll see a subfolder, ' Movies ', and then ' Create, ' Delete, ' D Etails, ' Edit. ')

Step Six:add Movies to Web App Display

Now we want to add a link to our main page to add or delete a movie.

1. Select views->shared->_layout.cshtml

2. Find the code for the Navgation bar under <div class = ' navbar-collapse collapse ';. After then line, simply add the following code:

@Html. ActionLink (Displayed,view name,folder Name)

3. Now there is displayed movies, you'll be taken to the Movies index page.

Step seven:create a Server on Azure

Now we is ready for create a server on Azure.

1. Go to Azure. If you had closed that tab or browser, log in again. Important:do not close Visual studio!

2. Go to New->data+storage->sql Database. Fill in the empty fields.

3. Name your database and click on Server->create a new Server. ADD server name, admin, Password and your location (just as App Service location).

4. Click ' OK '.

5. Remember your server name, admin login and password. In my example, it is ooadexample.database.windows.net. Select ' Create '.

You'll see this Azure is creating the database. Wait for it to finish.

Step eight:create Connection Strings

1. Select your database. Under the label ' Connection Strings ', click on ' Show database Connection Strings. ' Select the link in the ADO box and copy it.

2. Go back to Visual Studio. Right click on ' Project ' and click ' Publish. '

3. This action launches the ' Publish Web ' window. Paste the previously copied connection string into the Applicationdbcontext and Moviesdbcontext fields. Then click on the three dots (...).

4. The fields should automatically populate the correct information in the Destination Connection String window shown belo W. If not, enter your the server name (in my example:ooadexample.database.windows.net) and password. Check ' Save my password. ' Important:if password is not filled, enter your password and check "Save my password".

5. Select ' OK '.

Step Nine:test the Published App

Your app would now open in Your browser.

1. Click on ' Movies. '

2. Test it by adding a title, release date, genre and price. Enter mm/dd/yyyy (American date time settings).

3. Creating A title Here'll also add it to your database on Azure. Close the tab and reopen it again to verify.

Step ten:verify Data in Azure

1. To verify this movie data you entered in Step Nine appears in your Azure database, go to Visual Studio. Under ' Cloud Explorer ', right-click on your database and click ' Open in SQL Server Object Explorer '.

2. Now enter your server name, admin and password. Click ' Connect '.

3. Once connected, you'll see that the migration have indeed occurred.

Now you know how to upload an MVC web app to Azure using Entity framework and CRUD. I hope you ' ve found it useful!

Microsoft Imagine, anywhere, anytime:

• Follow us on Twitter, Facebook, Instagram and YouTube.
• Subscribe to We blog to meet students just like you who is changing the world with their exciting new tech. Plus, Stay O n Top of all the new products and offerings for students.
• Get inspiration delivered to your inbox via our monthly Microsoft Imagine Newsletter, featuring the latest tech tips, comp Etition news and all kinds of online tutorials.
• Bookmark Microsoft Imagine for all the student developer news, downloads to free student products, online tutorials and Co Ntests you could want.

Microsoft Azure Tutorial:build your first movie inventory Web App with just a few lines of code