An Introduction to ASP.NET Web Pages 2 Module 1: Webmatrix Installation and Your First Web Site Tom Perkins

Objectives Upon completion of this module, the participant should be able to – 1) Install WebMatrix on your computer – 2) Create a simple website – 3) Understand the basic concepts of website development

SKILLS REQUIRED Some basic HTML Some CSS (Cascading Style Sheets) Some awareness of database concepts (if you’ve used an Excel Spreadsheet, you’re qualified – or close enough)

What you’ll need A computer running Windows XP SP3 or greater A live internet connection (for download) Administrator privileges (for installation)

Some Definitions Framework: Broad overview, outline, or skeleton of interlinked items which supports a particular approach to a specific objective, and serves as a guide that can be modified as required by adding or deleting items. Web Pages: A framework for developing dynamic web pages – Static pages – only static items (pics, text, etc.) – Dynamic pages – you can modify the page content by using code WebMatrix: MS tool incorporating a page editor, database utility, a web server for testing, and publishing features.

What We’ll Do (Following Mike Pope: pages/tutorials/introducing-aspnet-web-pages-2/getting-started) 1.Install and basic site development (you are here) 2.Learn programming basics 3.Create a database 4.Create and process a user input form 5.Add, update, and delete data in the database 6.Deploy to a hosting provider

Class Example Website

And a page to add movie information

Installation Go to

CLICK HERE

Download the Web Platform Installer Run the Web Platform Installer Install WebMatrix when prompted

Systems installed: WebMatrix Web Pages IIS Express SQL Compact (All free!) Now, from the Start Menu, launch Microsoft WebMatrix

And we’re on our way …

Click on Templates (prebuilt files).

Select “Empty Site”, Enter “WebPagesMovies” (No spaces), then click “Next”

WebMatrix created your site! Ribbon Bar Tasks (Display: Site, Files, Databases, Reports) RHS – Content Pane for Editor and Reports

CREATE YOUR FIRST WEB PAGE

Left Pane: Files and Folders in your site. Click the arrow under the “New” icon, then “New File”.

Your first page will be called “HelloWorld”. Choose CSHTML (an ASP.NET page) and give it a name of HelloWorld.cshtml. Click OK.

WebMatrix has created your first page! (But wait – there’s more!!!) Mostly simple HTML  Note … } at the top. This is where you’ll put your code! Note colored syntax highlighting (not too cool for me and Jeff).

@{ } Hello World Page Hello World Page Hello World! Add the lines of HTML above into your page. Then click on File (on the Menu), then click on Save.

To test the HelloWorld page: Right- click here

Left-click on Launch in browser WebMatrix starts IIS Express, a built-in web server. Your page will be displayed in your default browser. The “local server” refers to your local computer, where the server is running.

Note the port number in the address line – different for each site you create. Now, let’s add some “server side” code. This will dynamically alter the look of the web site at the server.

@{ var currentDateTime = DateTime.Now; } Right now At top, enter the following line: Place this line after the “Hello World” paragraph:

Your web page should look like:

Now, launch the page in the browser: Try this again in a few minutes – What changes? What is happening with the code?

Display your web page source: (nav path for Chrome)

The HTML file above is what is sent to the browser from the server.

The Browser/Server process: (thanks to Microsoft for the diagram …)

Module Recap What we accomplished: 1.Loaded WebMatrix and its cast of players 2.Created a simple web page 3.Tested the web page 4.Wrote and tested some Razor code 5.Walked-thru the Browser/Server process Next: Some Programming Concepts …