an introduction to asp.net web pages 2
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/1.jpg)
An Introduction toASP.NET Web Pages 2
Module 1: Webmatrix Installation and Your First Web Site
Tom Perkins
![Page 2: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/2.jpg)
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
![Page 3: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/3.jpg)
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)
![Page 4: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/4.jpg)
What you’ll need
• A computer running Windows XP SP3 or greater
• A live internet connection (for download)• Administrator privileges (for installation)
![Page 5: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/5.jpg)
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.
![Page 6: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/6.jpg)
What We’ll Do• (Following Mike Pope:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started)
1. Install and basic site development (you are here)2. Learn programming basics3. Create a database4. Create and process a user input form5. Add, update, and delete data in the database6. Deploy to a hosting provider
![Page 7: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/7.jpg)
Class Example Website
![Page 8: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/8.jpg)
And a page to add movie information
![Page 10: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/10.jpg)
CLICK HERE
![Page 11: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/11.jpg)
• Download the Web Platform Installer• Run the Web Platform Installer• Install WebMatrix when prompted
![Page 12: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/12.jpg)
Systems installed:
• WebMatrix• Web Pages• IIS Express• SQL Compact • (All free!)
• Now, from the Start Menu, launch Microsoft WebMatrix
![Page 13: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/13.jpg)
And we’re on our way …
![Page 14: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/14.jpg)
Click on Templates (prebuilt files).
![Page 15: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/15.jpg)
Select “Empty Site”, Enter “WebPagesMovies” (No spaces), then click “Next”
![Page 16: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/16.jpg)
WebMatrix created your site! • Ribbon Bar• Tasks (Display: Site, Files, Databases, Reports)• RHS – Content Pane for Editor and Reports
![Page 17: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/17.jpg)
CREATE YOUR FIRST WEB PAGE
![Page 18: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/18.jpg)
Left Pane: Files and Folders in your site.
Click the arrow under the “New” icon, then “New File”.
![Page 19: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/19.jpg)
Your first page will be called “HelloWorld”. Choose CSHTML (an ASP.NET page) and give it a name of HelloWorld.cshtml. Click OK.
![Page 20: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/20.jpg)
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).
![Page 21: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/21.jpg)
@{
}
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="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.
![Page 22: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/22.jpg)
To test the HelloWorld page:
Right-click here
![Page 23: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/23.jpg)
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.
![Page 24: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/24.jpg)
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.
![Page 25: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/25.jpg)
@{ var currentDateTime = DateTime.Now;}
<p>Right now it's @currentDateTime</p>
At top, enter the following line:
Place this line after the “Hello World” paragraph:
![Page 26: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/26.jpg)
Your web page should look like:
![Page 27: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/27.jpg)
Now, launch the page in the browser:
Try this again in a few minutes – What changes? What is happening with the code?
![Page 28: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/28.jpg)
Display your web page source: (nav path for Chrome)
![Page 29: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/29.jpg)
The HTML file above is what is sent to the browser from the server.
![Page 30: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/30.jpg)
The Browser/Server process: (thanks to Microsoft for the diagram …)
![Page 31: An Introduction to ASP.NET Web Pages 2](https://reader036.vdocuments.us/reader036/viewer/2022062323/568160b0550346895dcfd31e/html5/thumbnails/31.jpg)
Module Recap
• What we accomplished:1. Loaded WebMatrix and its cast of players2. Created a simple web page3. Tested the web page4. Wrote and tested some Razor code5. Walked-thru the Browser/Server process
• Next: Some Programming Concepts …