Introduction à ASP.NET

Introduction à ASP.NET

Développement Web • Généralités sur le web • Passage du Native apps au web apps • Architecture client/server • Les langages web • Introduction au Web 2.0 • RIA ( Rich Interface Application) • Exemples

ASP. NET • Visual studio et les Frameworks • Architecture et syntaxe

Généralités sur le web • Native apps Vs Web apps

Généralités sur le web • Architecture client/server

Développement Web • Les langages web • PHP • JAVA (JSP/Servlet) • ASP.NET (C# / Vb) • Ruby and Rails • Python

Introduction au Web 2.0 • RIA ( Rich Interface Application) • Social Web • AJAX • CSS/XHTML • Web Service (xml ,soap,rest)

Introduction au Web 2.0 • Future • HTML 5 • Web 3 (WebOS) • Google Chrome OS • Microsoft azure

Introduction au Web 2.0 • Exemples • http://www.beautyoftheweb.com/ • http://html5demos.com

Introduction au Web 2.0 • réussir son interface • Wireframe • http://builds.balsamiq.com/b/mockups-web-demo/ • https://iplotz.com/app/ • Adobe Fireworks • réussir son interface • Wireframe • http://builds.balsamiq.com/b/mockups-web-demo/ • https://iplotz.com/app/ • Adobe Fireworks

ASP. NET • Visual studio et les Frameworks • VS 2008 Framework 3.5 • LINQ • WCF • VS 2010 Framework 4 • Microsoft Ajax • Microsoft MVC • WPF • Silverlight

Framework?

Architecture • Client / Server

syntaxe • <head> <script language= "c#" runat="server"> type fct (type i) { … } </script> • <script language= "javascript"> function f ; </script> • </head> • <body> • <asp :Label [Propriétés]> • </asp :Label> <% =fct(5) %> </body>

Session • Session[“username"]

User Control • <%@ Register TagPrefix="My" TagName="UserInfoBoxControl" Src="~/UserInfoBoxControl.ascx" %> • <My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" />

Mini Projets • Site d’annonces : http://www.cityzen.ma/http://www.marocannonces.com/ • Site des films : http://flixster.rottentomatoes.com • Journal http://gabfirethemes.com/category/themes/ • Twitter http://www.twitter.com

LINQ • Language Integrated Query • évolution majeure de l’accès • aux données dans le Framework .NET • projet de requêtage de données • LINQ To ADO.NET • LINQ pour les autres type de donnée

LINQ To ADO.NET • LINQ To DataSet • Il est utile pour obtenir une copie déconnecté de données • LINQ To Entities • LINQ To SQL • exécuter des requêtes sur une base de données • faire du mapping objet-relationnel

LINQ pour les autres type de donnée • LINQ To XML • LINQ To Objects

Linq to SQL • utiliser LINQ pour exécuter des requêtes SQL • LINQ transformer objects to requêtes SQL • Objet/Relationnel

Why Linq? • Syntaxe Simple • limiter très fortement les risques d'injection SQL • ne nécessitent pas de connaissances approfondies du code SQL • Le compilateur ne vérifiait pas le contenu de ce qui était entre double quotes • Il n’y avait pas de vérification de type sur les valeurs retournées

How to linq? • Select: • myDataContextdb = newmyDataConext() • Varmyprd = from p indb.product • Where p.id == 1 • Select p;

How to linq? • Insert • Produit prod = newProduit() • Prod.price = 109 • Prod.desc = ‘nice product’ • Prod.InsertOnSubmit() • Db.SubmitChanges()

How to linq? • Update • product prodt; • prodt = db.product.First(p => p.id == idp); • prodt.title = prod.Text; • prodt.desc = desc.Text; • Db.SubmitChanges()

How to linq? • Delete • product pp • pp = db.product.Single(p => p.id == 1); • db.product.DeleteOnSubmit(pp); • db.SubmitChanges();

Bind Data • GridView • Datalist • Repeater • Listdata

Linq • Top N • var data = (from p in people select p).Take(100); • Skip • var data = (from p in people select p).Skip(5).Take(100);

Join Operators • var q = from c in categories • join p in products on c.Category equals p.Category • select new { myCategory = c.Category, p.ProductName };

Group by • var query = from product in Productsgroup product by StartsWith = product.ProductName[0] into myGroup • select myGroup;

Distinct • var categoryNames = ( • from p in products • select p.Category) • .Distinct();

Union • var productFirstChars = • from p in products • select p.ProductName; • var customerFirstChars = • from c in customers • select c. ProductName; • var uniqueFirstChars = productFirstChars.Union(customerFirstChars)

Intersect • var productFirstChars = • from p in products • select p.ProductName; • var customerFirstChars = • from c in customers • select c.CompanyName; • var commonFirstChars = productFirstChars.Intersect(customerFirstChars);

Except • var productFirstChars = • from p in products • select p.ProductName; • var customerFirstChars = • from c in customers • select c.CompanyName; • var productOnlyFirstChars = productFirstChars.Except(customerFirstChars);

AJAX • asynchronous JavaScript and XML • HTML , XHTML , CSS = presentation • XMLHttpRequest = communication • Javascript = interaction

Ajax • var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

Ajax • xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

Ajax • document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX • xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

AJAX JQuery • jQuery est une bibliothèque JavaScript (comprenant AJAX) pour but de simplifier des commandes communes de JavaScript • Parcours et modification du HTML • Effets et animations ; • Manipulations des CSS (ajout/suppression des classes, d'attributs…) ; • AJAX ;

animation • //Quand le document est chargé on exécute une fonction • jQuery(document).ready(function() {jQuery("#container").fadeIn("slow"); jQuery("#div_a_effacer").slideUp("fast"); });

Syntax • $("p") $("img") $("a") // select balise HTML • $("#id") //Select Element by ID • $(".class") // select by class css name

Events • Click • $("button").click ( Function ) • <script> $("button").click(function () { • Alert("hello") • }); </script> • Html content • $('div).html('<p>All new content. <em>You bet!</em></p>');

Attribute • $("#myImage ").attr("title"); • $("#myImage ").attr("src"); • <img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image"/> • Add Class Css • $("#myImage").addClass("selected"); • Before and after • $(div).before('<div class="div"></div>' );

Ajax • $('div').bind('click', function( event ){ alert('Hi there!'); }); • $('div').bind(‘keypress ', function( event ){ alert('Hi there!'); });

AJAX • var ajax_load = "<img src='img/load.gif' alt='loading...' />"; • // load() functions • var loadUrl = "ajax/load.php"; • $("#load_basic").click(function(){ • $("#result").html(ajax_load).load(loadUrl); • });

Jquery Ajax • Méthode GET • $("#load_get").click(function(){ • $("#result") • .html(ajax_load) • .load(loadUrl, "language=asp&version=4"); • });

Ajax jquery • Méthode Post • $("#load_post").click(function(){ • $("#result") • .html(ajax_load) • .load(loadUrl, {language: "php", version: 5}); • });

Exemple Ajax • <html> <head><title>the title</title> • <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> • <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ $('#stage').load('/jquery/result.html'); }); }); </script> • </head> <body> <p>Click on the button to load result.html file:</p><div id="stage" style="background-color:blue;"> STAGE </div> <input type="button" id="driver" value="Load Data" /></body> </html>

Introduction à ASP.NET