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.

C# Advanced L09-HTML5+ASP

1,000 views

Published on

C# Advanced L09-HTML5+ASP

Published in: Software
  • Be the first to comment

C# Advanced L09-HTML5+ASP

  1. 1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 C# Advanced L09 –HTML5, ASP.NET and ASP.NET MVC
  2. 2. Web Science
  3. 3. Web Security
  4. 4. Mobile FirstBootstrap
  5. 5. MobileAndroid 18k+ devices / Fragmentation
  6. 6. Ubiquitous Computing
  7. 7. APIslike googlemaps, yahoo stocks, etc.
  8. 8. Web Technologies •HTTP / HTTPS (URL, GET/POST) •Client-side: –HTML / XHTML (Extensible HyperTextMarkup Language) –JavaScript / VBScript (client-side scripting) –Applets / ActiveX controls •Server-side: –PHP –Phython –JSP(Java Server Pages) –ASP (Active Server Pages) –ASP.NET (next generation of ASP)
  9. 9. HTTPHyperText Transfer ProtocolRequest/ Response
  10. 10. HTTP | Request / Response Browser Web Service www.google.com <html> <head> <title>Google</title> </head> <body> ... </body> </html>
  11. 11. HTTP | Request / Response Browser Web Service www.google.com
  12. 12. HTTPHyperText Transfer ProtocolRequest/ ResponseHTTP-Method | GET / POST / PUT /DELETE ... HTTP Status-Codes | 200 /404 /403 /500 ...
  13. 13. HTTP | Method / Status Codes Browser Web Service www.google.com <html> <head> <title>Google</title> </head> <body> ... </body> </html> HTTP/1.1 200 OK GET / HTTP/1.1
  14. 14. Server-Side Code •What is Server-Side code? –Software that runs on the server, not the client –Receives input from •URL parameters •HTML form data –Can access server-side databases, e-mail servers, files, mainframes, etc. –Dynamically builds a custom HTML response for a client HTTP request (form data, HTTP header data) HTTP responseHTML, XML ASP/Php/.. page (static HTML, server-side logic)
  15. 15. HTML5
  16. 16. WhatisHTML5 •Next major version of HTML. •The Hypertext Markup Language version 5 (HTML5) is the successor of HTML 4.01, XHTML 1.0 and XHTML 1.1 •Adds new tags, eventhandlers to HTML. Many more…. •HTML5 is not finished 16
  17. 17. HTML5 ≈HTML5 + CSS 3 + JavaScript
  18. 18. A Rough History of Web Standards 91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14 HTML 1 HTML2 HTML 4 XHTML 1 HTML 5 CSS 1 CSS 2 T-less D Web 2.0 CSS3 JS ECMA, DOM DOM 2 Ajax DOM, APIs
  19. 19. A Rough History of Web Standards 91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14 HTML 1 HTML2 HTML 4 XHTML 1 HTML 5 CSS 1 CSS 2 T-less D Web 2.0 CSS3 JS ECMA, DOM DOM 2 Ajax DOM, APIs 2004 WHATWG started 2008 W3C Working Draft 2012 (2010) W3C Candidate Rec 2022 W3C Rec 1996 –CSS 1 W3C Rec 1998 –CSS 2 W3C Rec 1999–CSS 3 Proposed 2005–CSS 2.1 W3C Candidate Rec 2001 –CSS 3 W3C Working Draft HTML 5 CSS
  20. 20. Past, Present, Future •1991 HTMLfirst mentioned –Tim Berners-Lee –HTML Tags •1993 HTML •1993 HTML 2 draft •1995 HTML 2 –W3C •1995 HTML 3 draft •1997 HTML 3.2 –“Wilbur” •1997 HTML 4 -”Cougar” -CSS •1999 HTML 4.01 •2000 XHTMLdraft •2001 XHTML •2008 HTML5 / XHTML5 draft •2011 feature complete HTML5 •2022 HTML5
  21. 21. Rich Internet Applications (RIA) •Space between the internet and the desktop •Apps that look good and behave well •Adobe Air/Flash, Java, Silverlight, Gears •Availability –Anywhere a web browser is available –As a desktop widget or application –Part of a mobile application store
  22. 22. What is HTML? <!--...--> <!doctype> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>
  23. 23. What’s New? •Local Storage •SQL Web openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); function saveState(text){ localStorage["localStorageDemo"] = text; } function restoreState(){ return localStorage["localStorageDemo"]; }
  24. 24. New Input Types
  25. 25. Java Script and jQueryframeworks
  26. 26. ASP.NETServer Side
  27. 27. Server-Side Code •What is Server-Side code? –Software that runs on the server, not the client –Receives input from •URL parameters •HTML form data –Can access server-side databases, e-mail servers, files, mainframes, etc. –Dynamically builds a custom HTML response for a client HTTP request (form data, HTTP header data) HTTP responseHTML, XML ASP/Php/.. page (static HTML, server-side logic)
  28. 28. ASP.NET
  29. 29. ASP.NET
  30. 30. ASP.NET
  31. 31. ASP.NET
  32. 32. ASP.NET
  33. 33. ASP.NETLive Demo
  34. 34. ASP MVCServer Side
  35. 35. ASP.NET Core Web Technologies Presentation
  36. 36. ASP.NET Core Web Technologies Presentation
  37. 37. ASP.NET Core Caching Routes Pages Profile ASP.NET .NET Handlers Controls Roles Globalization … Master Pages Membership Web Technologies Presentation
  38. 38. ASP.NET Core Caching Routes Pages Profile ASP.NET .NET Handlers Controls Roles Globalization … Master Pages Membership Web Technologies Presentation
  39. 39. The MVC Pattern •Model–view–controller (MVC) is a software architecture pattern •Originally formulated in the late 1970s by TrygveReenskaugas part of the Smalltalk •Code reusability and separation of concerns •Originally developed fordesktop, then adaptedfor internet applications
  40. 40. Model-View-Controller •Model –Set of classes that describes the data we are working with as well as the business –Most likely a Data Access Layer •View –Defines how the application’s user interface (UI) will be displayed –May support master views (layouts) and sub-views (partial views or controls) –Web: Template to dynamically generate HTML •Controller –The core MVC component –Process the requests with the help of views and models –A set of classes that handles •Communication from the user •Overall application flow •Application-specific logic –Every controller has one or more "Actions"
  41. 41. MVC Frameworks •CakePHP(PHP) •CodeIgniter(PHP) •Spring(Java) •Perl: Catalyst, Dancer •Python: Django, Flask, Grok •Ruby: Ruby on Rails, Camping, Nitro, Sinatra •JavaScript: AngularJS, JavaScriptMVC, Spine •ASP.NET MVC(.NET Framework) 41
  42. 42. The MVC Pattern for Web HTTP Request /Some/Page/ USER
  43. 43. The MVC Pattern for Web HTTP Request /Some/Page/ USER HTTP Response
  44. 44. The MVC Pattern for Web HTTP Request Front controller (dispatcher) /Some/Page/ USER HTTP Response
  45. 45. The MVC Pattern for Web Controller HTTP Request Front controller (dispatcher) HTTP Response /Some/Page/ Delegate request USER
  46. 46. The MVC Pattern for Web Controller HTTP Request Front controller (dispatcher) Model (data) View (render UI) HTTP Response /Some/Page/ Delegate request CRUD model Select view & pass data USER
  47. 47. The MVC Pattern for Web Controller HTTP Request Front controller (dispatcher) Model (data) View (render UI) HTTP Response /Some/Page/ Use model data Delegate request CRUD model Select view & pass data USER
  48. 48. The MVC Pattern for Web Controller HTTP Request Front controller (dispatcher) Model (data) View (render UI) HTTP Response /Some/Page/ Use model data Delegate request CRUD model Select view & pass data USER
  49. 49. MVC Steps •Incoming request routedto Controller –For web: HTTP request •Controllerprocesses request and creates presentation Model –Controller also selects appropriate result (view) •Modelis passed to View •Viewtransforms Modelinto appropriate output format (HTML) •Response is rendered (HTTP Response) 49
  50. 50. ASP.NET MVC Model
  51. 51. ASP.NET MVC Controller HTTP Request Front controller (dispatcher) Model (data) View (render UI) HTTP Response /Some/Page/ Use model data Delegate request CRUD model Select view & pass data USER
  52. 52. ASP.NET MVC C# Class HTTP Request Front controller (dispatcher) Model (data) View Razor HTTP Response /Some/Page/ Use model data Delegate request CRUD model Select view & pass data USER
  53. 53. The Technologies •Technologies that ASP.NET MVC uses –C# (OOP, Unit Testing, async, etc.) –HTML(5) and CSS –JavaScript (jQuery, KendoUI, etc.) –AJAX, Single-page apps –Databases (MS SQL) –ORM (Entity Framework and LINQ) –Web and HTTP
  54. 54. New ASP.NET MVC Project
  55. 55. Internet App Project Files All controllers and actions Configuration file Application_Start() –The entry point of the application Static files (CSS, Images, etc.) JavaScript files (jQuery, Modernizr, knockout, etc.) View templates _Layout.cshtml–master page (main template)
  56. 56. URL Routning •Normal ASP.NET –http://server/application/Products.aspx?id=4 •ASP.NET MVC –http://server/application/Products/show/beverages •The URL’s are interpreted by a RouteHandler and known as routes to the Controller.
  57. 57. Routing Example, http://localhost/Products/ById/3 57

×