1 / 12

Dag 5 Til kassen og kundeinfo

Dag 5 Til kassen og kundeinfo. Dagens program: Tilføj Til-kassen-knap Når den klikkes, skal brugerinfo-form vises Når Betaling klikkes, skal brugeres input valideres Formiddagens arbejde: http://eshop.keaweb.dk/eshop/eshop5.php. Navigationsdiagram for Til-kassen. e shop.php.

althea
Télécharger la présentation

Dag 5 Til kassen og kundeinfo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dag 5Til kassen og kundeinfo Dagens program: • Tilføj Til-kassen-knap • Når den klikkes, skal brugerinfo-form vises • Når Betaling klikkes, skal brugeres input valideres Formiddagens arbejde: http://eshop.keaweb.dk/eshop/eshop5.php

  2. Navigationsdiagramfor Til-kassen eshop.php Kundenklikkerpåtil-kassen-knappenud for en vareiindkøbskurven. eshop.php starter forfra, men nu med variablenkassen sat. I phpheddervariablen $_GET['kassen'] Tilkassen kassen

  3. Samlet navigationsdiagram eshop.php Lægikurvklikket vnrantal X klikket sletvnr Til-kassenklikket kassen

  4. Til kassen-knappen Til kassen-knappen skal I selv indsætte – gå bare i gang Hints: Knappen skal udskrives nederst i kurven. Derfor skal den ind som sidste sætning i functionlist_kurv. Men det vil være smart, hvis knappen kun bliver vist, hvis der er indhold i kurven… og hvis der ikke i forvejen er klikket på Til-kassen… Brug et input-felt til knappen: <input type='input' value='til kassen'> Eller brug et billede (ligesom fortryd-knappen) Eller brug en tekst Sæt a-tags udenom. Når der klikkes på knappen, startes en ny inkarnation af eshop.php – find inspiration i a-tags omkring fortryd-knapperne.

  5. Opbygning <?php Class Vare{…} functionlist_katalog(){…} functionlist_kurv(){…} functionlist_kundeinfo(){} //er slet-tast klikket? – så fjern varen fra kurven //er kurven ikke oprettet? - så opret den //er der kommet en ny vare, så læg den ned i kurven //er kataloget ikke oprettet, så opret det ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>eshop</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <div id="main”><?php if (!isset($_GET['kasse'])) list_katalog(); elselist_kundeinfo(); ?> </div> <div id="kurv”><?phpst_kurv(); ?></div> </div> </body> </html> Sæt de blå linjer ind på den rigtige plads i programmet

  6. Functionlist_kundeinfo() Prøv selv at skrive funktionen Hints: Html-koden, der skal udskrives i funktionen er noget i stil med: <h1>Varen skal sendes til:</h1> <form action='betaling.php' method='get'> <input type='text' name='navn' size='25' /> Navn <input type='text' name='gade' size='25' /> Gade <input type='text' name='by' size='25' /> By <input type='text' name='email' size='25' />Email <a href=''><input type='button' value='Køb mere' /></a> <input type='submit' value='Betaling' /> </form> Der skal nok også være noget linje-skift her og der. Skriv sætningerne ud med echo-sætninger i funktionen.

  7. Validering Til validering af inputfelterne er javascript et godt redskab Php er server-sided Javascript er client-sided Javascript eventhandler: <form action='betaling.php' method='get'> -> <form action='betaling.php' method='get’ onsubmit='if(tjek(this)) return true; elsereturn false'>

  8. Php og javascript Forskelle mellem php og javascript: Phpudføresafserveren Phpudskriver html-kode, somsendesvideretilbrowseren Phpkan kun testes, nårdeterblevetuploadettilserveren Phpkanikkeses I browserenskildekode. Her kan man kun seden html-kode, somphpharskrevetpåsiden. I phpskal der være $-tegnførvariabler Phpbruger . tilsammensplejsningafstrenge Phpkanskrivejavascript-kodepåsammemådesom html-kode Javascriptudføresafbrowseren Javascriptændrerogmanipulerer medhtml-kode, somalleredeerblevetsendttilbrowseren Javascriptkan testes lokaltpåcomputeren Javascriptkansesibrowserenskildekode I Javascriptskal der ikkevære $-tegnførvariabler Javascriptbruger + tilsammensplejsningafstrenge Javascripvilaldrigkunneskrivephp-kode

  9. Javascript - eventhandlers Eksempel på javascript i eventhandlers: Ex 1: <p onmouseover="alert('så hold dog op!') ">Hold musen væk fra denne tekst!</p> Ex 2 <div onclick="document.getElementById('viewer').innerHTML=this.innerHTML"> <imgsrc='img/deorollon.jpg' alt='billede' /> </div> <div onclick="document.getElementById('viewer').innerHTML=this.innerHTML"> <imgsrc='img/brille.gif' alt='billede' /> </div> <div id="viewer"></div>

  10. Javascript i scripttags Eksempel på javascript i scripttags: <script type="text/javascript"> var today=new Date(); var h=today.getHours(); if(h>19 && h<=4) alert("godaften"); if(h>4 && h<=19) alert("goddag"); </script> Script-tags placeres nederst i html-koden – lige før body-tagget

  11. Validerings-funktion i javascript … <script type="text/javascript"> function tjek(f){ var alerttekst="" if(f.navn.value=="")alerttekst+="navn mangler\n" if(f.gade.value=="")alerttekst+=" gade mangler\n" if(f.by.value=="")alerttekst+=" by mangler\n" if(!f.email.value.match(/^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]{2,6}$/i)) alerttekst+=f.email.value+" er ikke en gyldig emailadresse" if (alerttekst=="")return true else { alert(alerttekst); return false } } </script> </body> ...

  12. Vigtig læsning til tirsdag Vejledning til opsætning af betalingsform til ePay: http://tech.epay.dk/ePay-Payment-Window-technical-documentation_9.html

More Related