Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DevNext - Web Programming Concepts Using Asp Net

6,166 views

Published on

  • Be the first to comment

  • Be the first to like this

DevNext - Web Programming Concepts Using Asp Net

  1. 1. Web Programming Concepts using ASP.NET Adil Ahmed Mughal Namrah Arif 3rd April, 2010 NED University of Engineering and Technology
  2. 2. Speaker(s) <ul><li>Adil Ahmed Mughal </li></ul><ul><li>Development Executive at Telenor Pakistan </li></ul><ul><li>Microsoft Most Valuable Professional </li></ul><ul><li>Microsoft Certified Professional </li></ul><ul><li>INETA, User Group Leader </li></ul><ul><li>I blog at http://www.adilmughal.com </li></ul><ul><li>Author of few articles on CodeProject.com </li></ul>1
  3. 3. Speaker(s) <ul><li>Namrah Arif </li></ul><ul><li>Software Engineer at Folio3 </li></ul><ul><li>Graduated from NEDUET (CIS Dept.) in 2009 </li></ul><ul><li>Served as head Volunteer of DevNext at NEDUET in 2009 </li></ul><ul><li>Active volunteer of DevNext and Emerging .NET Devs User groups </li></ul>
  4. 4. Agenda <ul><li>Background </li></ul><ul><li>Web Fundamentals </li></ul><ul><ul><li>HTTP Request </li></ul></ul><ul><ul><li>Static and Dynamics Sites </li></ul></ul><ul><ul><li>HTTP Forms </li></ul></ul><ul><ul><li>Role of Web Server </li></ul></ul><ul><li>ASP.NET </li></ul><ul><ul><li>ASP.NET Page Life Cycle </li></ul></ul><ul><ul><li>Client Side vs. Server Side </li></ul></ul><ul><ul><li>Understanding Submit vs. PostBack </li></ul></ul><ul><ul><li>State Management and View State </li></ul></ul>
  5. 5. Pre-requisite <ul><li>Some working knowledge of Object Oriented Programming Language such as C#, VB.NET or Managed C++ </li></ul><ul><li>Basic familiarity with Web and ASP.NET </li></ul><ul><li>Development Tools: </li></ul><ul><ul><li>.NET Framework 3.5+ </li></ul></ul><ul><ul><li>Visual Web Developer or Visual Studio 2008 + </li></ul></ul>
  6. 6. Web Fundamentals <ul><li>HTTP Requests </li></ul><ul><ul><li>The communication mechanism by which Web browsers talk to Web sites </li></ul></ul><ul><ul><li>As a connection protocol, HTTP is built around several basic commands </li></ul></ul><ul><ul><li>GET, HEAD, POST </li></ul></ul><ul><ul><li>HTTP is Stateless Protocol </li></ul></ul>
  7. 7. HTTP GET Request HTML to be rendered by browser Web Browser (Client ) Web Site (Server)
  8. 8. Sample GET Command <ul><li>GET http://www.adilmughal.com HTTP/1.1 </li></ul><ul><li>Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, ... , */* </li></ul><ul><li>Accept-Language: en-us </li></ul><ul><li>Accept-Encoding: gzip, deflate </li></ul><ul><li>User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; ... .NET CLR 3.0.04506.30) </li></ul><ul><li>Host: localhost:80 </li></ul><ul><li>Connection: Keep-Alive </li></ul>
  9. 9. Sample Response <ul><li>HTTP/1.1 200 OK </li></ul><ul><li>Server: Microsoft-IIS/5.1 </li></ul><ul><li>X-Powered-By: ASP.NET </li></ul><ul><li>Date: Thu, 01 Nov 2007 23:44:04 GMT </li></ul><ul><li>Content-Type: text/html </li></ul><ul><li>Accept-Ranges: bytes </li></ul><ul><li>Last-Modified: Mon, 22 Oct 2007 21:54:20 GMT </li></ul><ul><li>ETag: &quot;04e9ace185fc51:bb6&quot; </li></ul><ul><li>Content-Length: 130 </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><h1> Hello World </h1> </li></ul><ul><li>Nothing really showing here yet, except some HTML... </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  10. 10. DEMO <ul><li>Web Request using .NET (With out using Browser) </li></ul>
  11. 11. Web Fundamentals <ul><li>Static Pages </li></ul><ul><ul><li>The earliest web sites were built primarily using static HTML pages. </li></ul></ul><ul><ul><li>HTML eventually evolved to be capable of much more </li></ul></ul><ul><li>HTML Forms </li></ul><ul><ul><li>Notify browser that a section of HTML includes tags representing controls </li></ul></ul><ul><ul><li>The contents of the form will be “posted back” to the server for processing. </li></ul></ul>
  12. 12. Web Fundamentals <ul><li>HTTP Requests </li></ul><ul><ul><li>GET vs. POST </li></ul></ul>
  13. 13. DEMO <ul><li>HTML Forms – GET Vs. POST </li></ul>
  14. 14. GET http://www.abc.com HTML to be rendered by browser POST http://www.abc.com HTML to be rendered by browser Web Browser (Client ) Web Site (Server)
  15. 15. Web Fundamentals <ul><li>Role of Web Server </li></ul><ul><ul><li>A program on server that monitors port 80 for incoming HTTP Requests </li></ul></ul><ul><ul><li>On the Microsoft platform, IIS is the watchdog intercepting HTTP requests from port 80—the normal inbound port for HTTP requests </li></ul></ul>
  16. 16. HTTP GET Request HTML to be rendered by browser Web Browser (Client ) Web Site (Server) IIS (Web Server)
  17. 17. Web Fundamentals <ul><li>Static and Dynamic Web Pages </li></ul><ul><ul><li>“ Dynamic means capable of action and/or change, while </li></ul></ul><ul><ul><li>Static means fixed” </li></ul></ul><ul><ul><li>Static Web Pages: </li></ul></ul><ul><ul><li>The server where the page is stored returns the HTML document to the user's computer and the browser displays it </li></ul></ul><ul><ul><li>The user may interact with the document through clicking available links, or a small program (an applet) may be activated, but the document has no capacity to return information that is not pre-formatted </li></ul></ul>
  18. 18. Web Fundamentals <ul><li>Dynamic Web Pages: </li></ul><ul><ul><li>The user can make requests (often through a form) for data contained in a database on the server that will be assembled on the fly </li></ul></ul><ul><ul><li>The request is relayed to the server using an intermediary, such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the server what information to return </li></ul></ul>
  19. 19. Web Fundamentals <ul><li>What's the difference? </li></ul><ul><ul><li>Static pages are those that send exactly the same response to every request </li></ul></ul><ul><ul><li>Dynamic pages can customize the response on the server to offer personalization based on cookies and information it can get from the visitor. </li></ul></ul><ul><ul><li>IMPORTANT!!! Flash and Shockwave presentations are also classed as static content; despite the fact that user interaction can lead to different ways of presenting the same data, everyone will download the same file from the server </li></ul></ul>
  20. 20. ASP.NET <ul><li>Web application development framework by Microsoft to easily create dynamic websites </li></ul><ul><li>Built on top of CLR allowing programmer to write ASP.NET code using any .NET Languages (such as C#, VB.NET etc.) </li></ul><ul><li>Main advantage is Rapid Application Development </li></ul><ul><li>Works on Code behind model </li></ul>
  21. 21. .NET Framework Overview .NET Class Libraries Operating System/Hardware Internet Information Services .NET Runtime (CLR) ASP.NET Data, LINQ, & XML System Communications & Workflow Windows Presentation Foundation Managed Application
  22. 22. DEMO <ul><li>Simple ASP.NET Web Application </li></ul>
  23. 23. Introduction to ASP.NET Pages HTTP Handler IIS Client Browser
  24. 24. DEMO <ul><li>ASP.NET Page Life Cycle </li></ul>
  25. 25. ASP.NET <ul><li>Client Side vs Server Side </li></ul><ul><ul><li>Client side is what's happening on your computer in your browser. It has nothing to do with the server, or ASP or ASPX pages, or IIS, or the database. </li></ul></ul><ul><ul><li>JavaScript in a web page would be an example of something client side. You don't need the server to help with the functionality of the script. </li></ul></ul><ul><ul><li>when a web page is sitting in your browser after it has been processed by the server and sent &quot;over the wire&quot;, there is absolutely no further connection with the server at this point. </li></ul></ul><ul><ul><li>Client side scripting is usually done in VBScript or JavaScript. Since the code is included in the HTML page, it also poses as a possible security hazard for the client computer. </li></ul></ul>
  26. 26. ASP.NET <ul><ul><li>Server side is when the server is being used to process something. Script or code that is run on the server does not appear on or in the web page that is sent to your browser -- the web page that your browser receives is only the result of the script or database code or processing that happened on the server. </li></ul></ul><ul><ul><li>Server side scripting means that all the script will be executed by the server and interpreted as needed. Client side scripting means that the script will be executed immediately in the browser such as form field validation, clock, email validation, etc. </li></ul></ul>
  27. 27. DEMO <ul><li>Submit Vs. PostBack </li></ul>
  28. 28. State Management <ul><li>The problem of state </li></ul><ul><ul><li>HTTP is a stateless protocol </li></ul></ul><ul><ul><li>Traditional desktop applications have a portion of memory allocated </li></ul></ul><ul><ul><li>Web applications are all together different </li></ul></ul><ul><ul><li>ASP.NET facilitates programmers by creating an illusion of maintaining state using ViewState and other techniques </li></ul></ul>
  29. 29. DEMO <ul><li>ViewState </li></ul>
  30. 30. Web Forms vs. MVC Framework <ul><li>Common Web Presentation Patterns </li></ul><ul><ul><li>MVC </li></ul></ul><ul><ul><ul><li>Ruby on Rails </li></ul></ul></ul><ul><ul><ul><li>ASP.NET MVC </li></ul></ul></ul><ul><ul><ul><li>MonoRail </li></ul></ul></ul><ul><ul><ul><li>Others… </li></ul></ul></ul><ul><ul><li>Web forms </li></ul></ul><ul><ul><li>Other patterns </li></ul></ul><ul><ul><ul><li>MVP </li></ul></ul></ul><ul><ul><ul><li>MVVM </li></ul></ul></ul>
  31. 31. Web Forms <ul><li>Tooling/designer </li></ul><ul><li>Postbacks </li></ul><ul><li>Event driven </li></ul><ul><li>HTML forms and viewstate </li></ul><ul><li>Controls abstraction </li></ul><ul><li>3 rd party component model </li></ul><ul><li>Rapid development </li></ul><ul><li>Declarative syntax </li></ul><ul><li>SharePoint use Web Forms </li></ul>
  32. 32. ASP.NET MVC <ul><li>Full control over markup </li></ul><ul><li>Lightweight views/no Codebehind </li></ul><ul><li>Separation of concerns </li></ul><ul><li>Testing/TDD </li></ul><ul><li>Pluggable view engines </li></ul><ul><li>RESTful </li></ul><ul><li>No postbacks </li></ul><ul><li>No viewstate </li></ul>
  33. 33. Making a choice <ul><li>Personal choice </li></ul><ul><li>Internet versus intranet </li></ul><ul><li>Control over markup </li></ul><ul><li>Familiarity with patterns </li></ul><ul><li>Gradual progression </li></ul><ul><li>RAD controls </li></ul><ul><li>SharePoint </li></ul><ul><li>They can be used together! </li></ul>
  34. 34. THANK YOU! Adil Ahmed Mughal Namrah Arif 3rd April, 2010 Q & A
  35. 35. Useful Links <ul><li>DevNext User Group Blog </li></ul><ul><li>http://www.DevNextUg.org </li></ul><ul><li>Adil’s Weblog </li></ul><ul><li>http://www.adilmughal.com </li></ul><ul><li>DevNext Facebook Page </li></ul><ul><li>http://www.facebook.com/DevNext </li></ul>

×