Embed Size (px)
Citation preview
An Introduction toASP.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:
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
Class Example Website
And a page to add movie information
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 the @{ … } at the top. This is where you’ll put your code!Note colored syntax highlighting (not too cool for me and Jeff).
@{
}
<!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.
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;}
<p>Right now it's @currentDateTime</p>
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 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 …
![Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://img.dokumen.tips/doc/110x75/56649e2a5503460f94b17de9/learning-webmatrix-part-2-of-3-akber-alwani-httptwittercomepdotnet-.jpg)
