ics151-hour01

Transcript

1. Instructor: William McDaniel Albritton Slides based on Sams Teach Yourself ASP.NET 4 in 24 Hours, Complete Starter Kit by Scott Mitchell
2. Static Web Pages  When a browser displays a static web page, the display is always the same  Static is a fancy word for “does not change”  Static web pages always have the same code  Of course, a web developer can change the HTML (HyperText Markup Language) code of the web page on the web server’s file system, but this change is not done automatically by the computer
3. Example Static Web Page  Start up a browser  Type in this URL (Uniform Resource Locator):  http://www2.hawaii.edu/~walbritt/ics151/index.htm  Right-click on the webpage  Click View Page Source  You should now see the HTML code
4. Example Static Web Page  Although the home page of our ICS 151 class will change over the semester, this is because I am manually updating the web page  Therefore, the home page of our ICS 151 class is a static web page
5. Sending Static Web Pages  Steps to send a static web page over the Internet 1. Web browser requests a web page 2. Request sent over the Internet to a web server 3. Web server sends request to file system 4. File system returns the web page to web server 5. Web server sends web page over the Internet to your computer 6. Web page is displayed on your browser  (note that on p. 10 & 11 in your textbook, the arrows should be reversed)
6. Web Server  A web server is a software program on a designated computer that keeps waiting for a request over the Internet for a particular web page file  Once a web server receives a request, it must locate the web page file on its file system  Then the web server sends the web page file over the Internet to whatever computer that requested the file  A URL (Uniform Resource Locator) is the address (unique name) of the web page file  For example: http://www2.hawaii.edu/~walbritt/ics151/index.htm
7. Dynamic Web Pages  When a browser displays a dynamic web page, the display is usually different each time  Dynamic is a fancy word for “changes often”  Dynamic web pages produce different code depending on who views the page or what new data has been stored on the server  For example, www.dell.com uses dynamic web pages, so that the website displays their latest products for people to order over their website
8. Dynamic Web Pages  One way to create dynamic web pages is with a web programming technology called ASP.NET  Each time the browser requests a dynamic web page, the ASP.NET engine creates the ASP.NET web page  ASP.NET is one part of the .NET Platform, which has many computer programs to run databases, web applications, and networks
9. ASP.NET Companies  Here are some companies that use the ASP.NET technology for their websites  Microsoft (www.microsoft.com)  Dell (www.dell.com)  MySpace (www.myspace.com)  Shidler College of Business (www.shidler.hawaii.edu)  Hawaii State Bar Association (www.hsba.org)  County of Kauai (www.kauai.gov)  KHON2 (www.khon2.com)
10. Sending Dynamic Web Pages  Steps to send a dynamic web page over Internet 1. Web browser requests a web page 2. Request sent over the Internet to a web server 3. Web server sends request to ASP.NET engine 4. ASP.NET engine sends request to file system 5. File system returns data to ASP.NET engine 6. ASP.NET engine creates the web page 7. Web server sends web page over the Internet to your computer 8. Web page is displayed on your browser
11. ASP.NET Engine  The ASP.NET Engine is a software program that runs the code in the ASP.NET web page to generate the web page that is sent to the Web server  The original ASP.NET web page, stored on the Web server’s file system, is not sent to the browser  Instead, ASP.NET Engine creates a new web page from the original ASP.NET web page  So the web page received by the browser is different than the ASP.NET web page stored on the Web server's file system
12. Making ASP.NET web pages  In order to develop and test ASP.NET web pages, we will use the Visual Web Developer software  We will be using the Visual Web Developer software everyday in class  If you want to download the Visual Web Developer software at home, see the class web page for the link to the download page, as the software is free from Microsoft
13. The Server  While we develop and test ASP.NET web pages, we will use Microsoft SQL Server  This is a lightweight server (mini-server) which is automatically run by Visual Web Developer
14. Create a Web Site  To create a new ASP.NET website: 1. Start Visual Web Developer 2. Click File 3. Click New Web Site 4. Choose ASP.NET Empty Web Site 5. Click the Browse button to save the website on Drive T on your lab computer  You should make a folder with your name (for example, folder “WilliamAlbritton”) to store all of your files 6. Create a new folder called WebSite1 7. So the file path is T:\MyName\WebSite1\ 8. Click the OK button
15. Create a Web Page  To create a new ASP.NET web page: 1. After you create a new folder called WebSite1 2. In the Solution Explorer window (top right side), right click on T:\MyName\WebSite1\ file path 3. Click Add New Item 4. Click Web Form 5. Click the Add button
16. Web Site Files  Your new ASP.NET web site should have the following file: 1. Default.aspx, which has HTML and Web control code that is used to display the web page 2. Default.aspx.vb, which has the Visual Basic programming language code to compute tasks 3. web.config, which has XML (Extensible Markup Language) code to configure the web site
17. Views  We can view the Default.aspx web page file in different ways by clicking on the Design, Split, or Source buttons 1. Design view is a rough approximation of what the page will look like on a browser window 2. Split view shows both views at once 3. Source view shows the HTML and Web control code  Split view is useful in giving you feedback as to how the HTML code works
18. Line Numbers  If Visual Web Developer does not display line numbers, then click the following: 1. Tools 2. Options 3. Unclick “Show all settings” 4. General 5. Line numbers 6. OK button
19. Hello World!  To view the ASP.NET web page on a browser:  Type a greetings, such as “Aloha!”, between the opening <div> tag and the closing </div> tag  Click the “View in Browser” button (located just below the “Window” menu, to the left of the Debug drop-down menu)  Your new ASP.NET web page should display in the default browser window
20. How to Set the Default Browser 1. Right-click on the website name in the Solution Explorer window 2. Click: Browse with 3. Choose the browser you wish 4. Click: Set as Default
21. The URL  The following URL (uniform resource locator) will be displayed at the top of the browser window: http://localhost:PPPP/WebSite1/Default.aspx  http is HyperText Transfer Protocol  localhost means that the request is sent to your computer’s server  PPPP is the port number that servers need in order to communicate across the Internet (or locally)  WebSite1 is the folder where web page is located  Default.aspx is file name of ASP.NET web page