script - Webs

cabbagepatchtapeInternet και Εφαρμογές Web

5 Φεβ 2013 (πριν από 4 χρόνια και 4 μήνες)

174 εμφανίσεις

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://html5demo
s.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:



myDataContext

db

=
new

myDataConext()


Var

myprd

=
from

p
in

db
.
product


Where

p.id == 1


Select

p;

How to linq?


Insert


Produit

prod =
new

Produit()


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
Products



group

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.U
nion(customerFirstChars)

Intersect


var

productFirstChars

=



from

p

in

products



select

p.ProductName;



var

customerFirstChars

=



from

c

in

customers



select

c.CompanyName;






var

commonFirstChars

=

productFirstChars.I
ntersect(customerFirstChars);

Except


var

productFirstChars

=



from

p

in

products



select

p.ProductName;



var

customerFirstChars

=



from

c

in

customers



select

c.CompanyName;






var

productOnlyFirstChars

=

productFirstCh
ars.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").inner
HTML=
xmlhttp.responseText
;

AJAX


xmlhttp.onreadystatechange=function()



{



if (xmlhttp.readyState==4 &&
xmlhttp.status==200)



{



document.getElementById("myDiv").inner
HTML=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='lo
ading...'

/>";






//

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>