1 / 31

An Introduction to ASP.NET Web Pages 2

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

ojal
Download Presentation

An Introduction to ASP.NET Web Pages 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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)

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

  5. 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.

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

  7. Class Example Website

  8. And a page to add movie information

  9. Installation • Go to www.asp.net/web-pages

  10. CLICK HERE

  11. Download the Web Platform Installer • Run the Web Platform Installer • Install WebMatrix when prompted

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

  13. And we’re on our way …

  14. Click on Templates (prebuilt files).

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

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

  17. Create your first web page

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

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

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

  21. @{}<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><title>Hello World Page</title></head><body><h1>Hello World Page</h1><p>Hello World!</p></body></html> Add the lines of HTML above into your page. Then click on File (on the Menu), then click on Save.

  22. To test the HelloWorld page: Right-click here

  23. 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.

  24. 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.

  25. At top, enter the following line: @{varcurrentDateTime = DateTime.Now;} Place this line after the “Hello World” paragraph: <p>Right now it's @currentDateTime</p>

  26. Your web page should look like:

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

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

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

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

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

More Related