Dagens föreläsningar



Relevanta dokument
Dagens föreläsningar

Dagens föreläsning. Ställa in Apache för Python. Skapa ett Pythonscript. Skapa en statisk sida. Lagerdesign för webbkommunikation

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

Webbservrar, severskript & webbproduktion

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Webbprogrammering. Sahand Sadjadee

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Webbprogrammering - 725G54 PHP. Foreläsning II

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Avancerade Webbteknologier

Din egen webserver med Apache

Introduktion till programmering

Elektronisk publicering TNMK30

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

Innehåll. MySQL Grundkurs

Introduktion HTML och PHP 732G16 Databaser design och programmering

Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet

TNMK30 - Elektronisk publicering

Internets historia Tillämpningar

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011

Webbsidor och webbservrar

Arbetsmaterial HTML pass 1 - Grunder

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.

Swedbank Mobile Loadtesting. LoadRunner Mobile App protocol

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Språk för webben introduk4on 4ll HTML

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

Implementationshandledning Version 1.2

Webbprogrammering 725G54

Hemsideutveckling för Anjool AB

Introducerande övningar i HTML

Databaser på webben. Revision Johan Näsholm, johan@nasholm.com

Uniform Resource Locator (URL) JavaServer Pages - JSP. Webbklienter. Webbserver. Hypertext Transfer Protocol (HTTP) HTTP Request

Statistik från webbplatser

Föreläsning 4. CSS Stilmallar för webben

F8 Webbteknologier 1. Dynamiska webbsidor

Lite mer om CGI-programmering

TDP003 Projekt: Egna datormiljön

E12 "Evil is going on"

Strukturering med XML och DTD

Konstruktion av datorspråk

Nätet. Uppgiften. Nivå

Att arbeta med. Müfit Kiper

2I1073 Föreläsning 1. HTML och XHTML XHTML

Webbserver och HTML-sidor i E1000 KI

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

WEBBUTVECKLING Kursplanering

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbteknik II. Föreläsning 5. Restless farewell. John Häggerud, 2011

F02 En första sida. Dagens agenda

Karlstads Universitet, Datavetenskap 1

KUNDREGISTER Sid 2(7) Teknisk specifikation

Kursplanering Utveckling av webbapplikationer

Christer Scheja TAC AB

Innehåll. Dokumentet gäller från och med version

Idag. Webben, HTML och CSS. Live demo. Webbens funktion

Datakommunika,on på Internet

PHP. Dynamiska webbsidor

Webbutveckling Laboration 1: HTML5 och CSS3.

emopluppen Användning av "Ant" Niklas Backlund Version: 1.4 ( 2002/04/26 07:27:52 UTC)

Förra gången. jquery Lab 4 Muddy Cards resultat.

En bortsprungen katt

ASP.NET Thomas Mejtoft

PHP - Fortsättning. PHP och MySQL

12 Webb och kurshemsidor

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php

Elektronisk publicering TNMK30

Tentamen etjänster och webbprogrammering

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

On-line produktion TDDC61

Objektorienterad Programkonstruktion. Föreläsning 10 7 dec 2015

Grundläggande datavetenskap, 4p

Nätverk och Java, grunder Föreläsning 0: 0: Introduktion till Internet

Övning (X)HTML 2. Sidan 1 av

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum:

Webbteknik för ingenjörer

ORDLISTA WEBBDESIGN 100P

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Att bygga enkla webbsidor

Webbserverprogrammering

Labora&on 2 HTML och validering övningar/uppgi:er

Presentera dig själv Laboration 1

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

Tillämpad programmering CASE 1: HTML. Ditt namn

ASP.NET MVC. Copyright Mahmud Al Hakim Innehåll

Lektion 5 HTML, CSS, PHP och MySQL

Översikt. Installation av EasyPHP 1. Ladda ner från Jag använder Release Installera EasyPHP.

Webbdesign vt Innehållsförteckning

Innehålls förteckning

En grundkurs i hemsidor och hur de är uppbyggda

Laboration med Internet och HTML

Transkript:

Webuppgift

Dagens föreläsningar HTTP och hur kontakten sker mellan klient och server. Apache-servern HTML. Exekvera Pythonscript. Formulär. Model-View-Controller på webben. CSS. Presentation av uppgiften. ORM och Zope. Django.

Lagerdesign för webbkommunikation Tre lager (förenklat). Klient och server kommunicerar via protokollet HTTP, HyperText Transfer Protocol. HTTP är tillståndslöst, varje förfrågan behandlas separat.

Ställa in Apache för Python Då WAMP installeras väljs en mapp som är rotkatalog för servern. Standardinställningen är {sökväg till WAMP}\ www till exempel c:\program\wamp\www. För att testa servern anges adressen http:// localhost i en webbläsare.

Skapa en statisk sida. HTML-koden sparas som test01.html i mappen www\ python. Adressen blir därmed http://localhost/python/test01.html.

Skapa ett Pythonscript Pythonkoden sparas som script01.py i mappen www\ python. Adress: http://localhost/python/script01.py.

Exekvera Pythonscript Om vi inte talar om för Apache att Pythonscript ska exekveras kommer de att visas som vanliga textfiler. Steg 1: Lägg till exekvering av script för rotkatalogen. Steg 2: Tala om att py-filer är exekverbara script. Steg 3: Ange i varje script var python.exe finns

Steg 1 <Directory "C:/Program/wamp/www"> # # Possible values for the Options directive are "None", "All", # or any combination of: # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews # # Note that "MultiViews" must be named *explicitly* --- "Options All" # doesn't give it to you. # # The Options directive is both complicated and important. Please see # http://httpd.apache.org/docs/2.2/mod/core.html#options # for more information. # Options Indexes FollowSymLinks ExecCGI # # AllowOverride controls what directives may be placed in.htaccess files. # It can be "All", "None", or any combination of the keywords: # Options FileInfo AuthConfig Limit # AllowOverride all # # Controls who can get stuff from this server. # # onlineoffline tag - don't remove Order Deny,Allow Deny from all Allow from 127.0.0.1 </Directory>

Steg 2: Lägg till py-filer # AddHandler allows you to map certain file extensions to "handlers": # actions unrelated to filetype. These can be either built into the server # or added with the Action directive (see below) # # To use CGI scripts outside of ScriptAliased directories: # (You will also need to add "ExecCGI" to the "Options" directive.) # AddHandler cgi-script.cgi.py </Directory> Därmed är Apache konfigurerat.

Felmeddelanden Studera följande kod som innehåller ett fel: #!d:/program/python25/python.exe print "Content-type: text/html\n\n" print "<p>hej</p>" pri print "Hej igen" Då detta exekveras visas allt som genererats fram till felet. Ingen information om felet visas.

Skriv ut information Lägg till raden import cgitb; cgitb.enable(). #!d:/program/python25/python.exe import cgitb cgitb.enable() print "Content-type: text/html\n\n" print "<p>hej</p>" pri print "Hej igen"

Uppmärkningsspråk Uppmärkningsspråk används för att märka innehållet i en textfil. Märkningen är abstrakt. Man talar om att en text är en rubrik, inte hur rubriken ska se ut. SGML, Standard Generalized Markup Language, är ett metaspråk för uppmärkning. Används inte lika mycket som sina derivat. (1960-talet) XML, extensible Markup Language, är en förenklad variant av SGML som förenklar arbetet att implementera en parser. Därmed mer populärt. XML används som bas för många olika standardformat såsom XHTML, SVG, RSS och SOAP. HTML, HyperText Markup Language, baserades från början på SGML men implementerar inte dess strikta krav på uppmärkningen. (1991)

Introduktion till HTML Som vi redan sett består HTML av ett antal "taggar" som beskriver vad texten inuti taggarna är för typ av text. Taggar skrivs <tagnamn> </tagnamn> eller <tagnamn/>. Varje HTML-dokument bör börja med en <html>- tag. Därefter följer en <head>-tag som innehåller metainformation om dokumentet. Sist kommer <body>-taggen som innehåller själva innehållet. HTML skiljer inte på stora och små bokstäver men w3 rekommenderar användandet av små bokstäver.

Vanliga taggar <html></html> <head></head> <title></title> <body></body> <p></p> <b></b> <i></i> <a></a> <table></table> <img/> <form></form> HTML-dokument metainformation titel Synliga delen av dokumentet paragraf fetstil kursiv text länk tabell bild formulär

Specialtecken Det beror på webservern om man kan använda svenska tecken direkt eller måste ersätta dem med specialtecken. Många fler specialtecken finns. >>> import cgi >>> cgi.escape("<>åäöåäö%&?") '<>\x86\x84\x94\x8f\x8e\x99%&?' Non-breaking space

Attribut för taggar Taggar kan ha attribut som anges med namn och värde.

Bilder

Länkar

Formulär Formulär används för att skicka information från klienten till servern. Eftersom HTTP är tillståndslöst måste kommunikationen ske i flera steg. 1)Servern skickar ett formulär till klienten. 2)Användaren fyller i formuläret och klickar på "Skicka in"-knappen. 3)Servern tar emot informationen från formuläret och utför något beroende på innehållet. 4)Oftast skickar servern tillbaka någon form av information som meddelar vad som hänt med informationen.

Exempel med formulär Ett formulär innesluts av <form/>-taggen och kan innehålla valfritt antal <input/>-taggar. action-attributet anger vilket script som ska hantera formuläret. method-attributet styr hur informationen skickas till det mottagande scriptet. Varje <input/>-tag har en typ och ett namn. <html> <body> <h1>litet formulärexempel</h1> <p>fyll i vad du heter och vilket år du är född:</p> <form action="handleform01.py" method="get"> <input type="text" name="fullname" /><br/><br/> <input type="text" name="year" /><br/><br/> <input type="submit" value="behandla formulär" /> </form> </body> </html>

Formuläret i webbläsaren

Hanteraren

Layout för strukturerade dokument HTML har taggar som styr innehållets utseende, exempelvis <b> och <i>. Typsnitt kan detaljstyras med <font/> och tabeller kan ges en specifik layout genom attributinställningar. (pre HTML 4) Genom att blanda layout och innehåll bryter vi mot designmodellen Model-View-Controller (MVC). En bättre lösning är att ange layout separerat från HTMLdokumentet.

CSS Cascading Style Sheets är ett sätt att definiera en design separat från ett HTMLdokument. Används ofta i kombination.

HTML-koden

CSS-koden

Utan CSS

Med CSS

Inlämningsuppgiften Uppgiften består i att skapa ett bokningssystem för en tandläkarmottagning. Instruktioner och detaljer kring redovisningen finns på kurshemsidan.

Förutsättningar Mottagningen har öppet kl 8-17 måndag till fredag, förutom kl 12-13 då den är lunchstängd. Varje behandling startar på hel timma och pågår 60 minuter. Det räcker om prototypen kan hantera en enda vecka. Det ska finnas en startsida där patienterna hittar länkar till sidor för olika ändamål. När en patient ska boka en tid bör det finnas en veckoöversikt, där det framgår vilka tider som är lediga. En patient bör kunna få upp en förteckning över sina bokade tider, där det är möjligt att avboka besök vid behov. Tandläkaren ska ha en egen vy av veckoöversikten, där hon kan se alla bokade tider och där patientens namn och typen av behandling (undersökning, lagning, rotfyllning med mera) framgår. I övrigt är uppgiften relativt fri. Tveka inte att experimentera. Det viktiga är att öva programmering, inte få till en optimal bokningstjänst.

Val av språk Inlämningsuppgiften nivå 1, får skrivas i Python, PHP, Perl eller Ruby. Nivå 2 får skrivas i Django, Zope, Ruby on Rails eller motsvarande ramverk i något av ovanstående språk. Inga "färdiga" bokningssystem får användas. För andra kombinationer än Python+Django erbjuds tyvärr bara begränsad handledning.

Val av lagringsmodell Valet är fritt: Relationsdatabas (MySQL, SQLite). Textfil. Binär fil. pickle/shelve ORM.

Objektsdatabaser Relationsdatabaser är bra för stora mängder homogen data. Mindre bra för komplexa, heterogena datamängder. För dessa fall kan objektsdatabaser (ODBMS, Object Database Management Systems) vara en bra lösning.

Objektsdatabaser Fördelar: Enkelt att spara objekt från exempelvis Python. Inga extra steg krävs för att spara data från objektorienterade applikationer. Nackdelar: Få standarder. Få verktyg. Inbyggd motsättning mellan OOP:s inkapsling av data och databasers datacentrerade perspektiv. Sämre prestanda än relationsdatabaser.

Mappning En hybridlösning är att skapa en mappning mellan objekt i en applikation och tabeller i en relationsdatabas. Klasser motsvaras av tabeller och attribut av kolumner. Denna process kan enkelt automatiseras. Detta har gjorts med stor framgång i exempelvis Zope (Z Object Database) och Active Records i Ruby on Rails.

Object publishing Alternativt sätt att hantera server-side scripting. CGI-programmering tenderar att resultera i stort fokus på generering av rätt text att skicka tillbaka till klienten. Object publishing innebär att steget från webbadresser till funktions- och metodanrop automatiseras.

Zope Zope är ett web publishing framework. Zope är skrivet i Python. Består av flera komponenter. De viktigaste är: Zope Object Request Broker (Zope ORB) HTML mallar. Separerar logik och layout. Object database. Bygger på samma teknik som shelve, men stöder även bland annat transaktioner och samtidig dataaccess.

Zope ORB Agerar mellanhand mellan CGI-världen och Pythons objektvärld. pythonkod

Zope ORB översätter URL:er En URL (Uniform Resource Locator) anger hur ett objekt eller en tjänst lokaliseras på Internet. Zope ORB översätter en URL till metodanrop för objekt: http://server/path/mod/obj1/obj2/met_name?arg1=val1&arg2=val2 Detta översätts av ZORB:en på server till ett Pythonanrop för ett objekt i sökvägen path: mod.obj1.obj2.met_name(arg1=val1,arg2=val2)

Zope ORB fortsättning Svaret som skapas av Pythonkoden omformateras av Zope (mha HTML-mallar) till HTML och skickas tillbaka till klienten. Klienten märker ingen skillnad. HTML-kod från statiskt innehåll och dynamiskt innehåll, oavsett om det genereras av Pythonscript via CGI direkt eller via Zope, ser likadant ut då det når klienten.

Django och Rails Webbramverk som levereras med en egen webbserver för snabb och enkel utveckling. Kräver få andra programvaror vilket gör det lättinstallerat. http://www.djangoproject.com http://www.rubyonrails.org