Csempe kalkulator A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a megadott méretek, alapján megkereshessük egy árajánlattal. A feladat rendkívül egyszerűnek tűnik. Program csempekalkulátor Be mélység, szélesség, magasság csempeszükséglet = mélység * szélesség + 2 * mélység * magasság + 2 * szélesség * magasság Ki csempeszükséglet Ha elküld akkor adat adatbázisba Program vége Persze, ha ezt az interneten szeretnénk publikálni, akkor a HTML kevés. Mire van szükségünk?    

HTML Tags, hiszen ezen a nyelven publikáljuk dokumentumainkat. CSS, hiszen ki kell nézni valahogy, ráadásul jól. JAVASCRIPT, hiszen számolnunk kell. PHP, MYSQL, hiszen tárolni szeretnénk a megkereséseket és majd reagálni rá.

Kezdjünk hozzá: Notepad++ A későbbi kellemetlenségek elkerülése véget állítsuk be az új dokumentumok kódolását UTF-8-ra. Beállítások Program beállítások  Új dokumentum/Alapértelmezett mappa  Kódolás UTF-8 és ugyan itt az alapértelmezett nyelv: HTML legyen. File  Új dokumentum File  Mentés másként  index.html Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Kivételesen másold be az alapstruktúrát innen. <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Legyen a címke: Csempe kalkulátor

Írd ki 1-es címsorral szintén, hogy Csempe kalkulátor

Csempe kalkulátor

Hozz létre egy űrlapot, amelyben az adatokat fogod bekérni.

Illessz be egy 1 soros 2 oszlopos táblát az űrlapba, legyen a szélessége 500 px. Az első cellába az „A vevő e-mail címe:” szöveg kerüljön. A második cellába pedig egy beviteli mezőt illessz, amelyikbe a felhasználó beírhatja az e-mail címét.

A vevő e-mail címe:

Illessz be még egy új táblázatot az űrlapba, legyen 500 px széles és 5 soros és 3 oszlopos legyen. Nézd meg a kódot és rajzold le a táblát:

Szoba adatai:
mélység:	cm
szélesség:	cm
magasság:	cm

JAVASCRIPT Notepad++ Hozz létre egy új dokumentumot és mentsd el script.js néven (Figyelj oda, hogy a file típusa javascript legyen), valamint arra is ügyelj, hogy a csempe könyvtárba kerüljön.

Készítsd el a következő függvényt: function szamolj() { var e; var szoveg="Szükséges csempe:
"; e = (adat.me.value * adat.sz.value); e += 2*(adat.me.value * adat.ma.value); e += 2*(adat.sz.value * adat.ma.value) ; szoveg = szoveg + e/10000 + " m2"; document.getElementById("eredmeny").innerHTML=szoveg; }

Mentsd el a script.js állományt. Ahhoz azonban, hogy működjön, rá kell vennünk az index.html állományt, hogy betöltse a script.js állományt is. Valamint rá kell, hogy vegyük a „számolj” feliratú gombot, hogy meghívja a függvényt.

Illeszd be a következő utasítást az index.html állományba. <script type="text/javascript" src="script.js">

Keresd meg a „számolj” feliratú gombot beillesztő utasítást és egészítsd ki a következő attribútummal. onclick = ”szamolj()” Ez egy eseménykezelő tulajdonság, amely akkor hajtódik végre, amikor rákattintasz a „számolj” feliratú gombra kattint a felhasználó. Az teljes eseménykezelő tulajdonságlistát a http://www.w3schools.com/jsref/dom_obj_event.asp oldalon találjátok. Ez itt néhány gyakran használt eseményhez a magyarázat: Eseménykezelő tulajdonság

végrehajtódik amikor …

onchange

a tartalom megváltozik

onclick

egérrel kattint az objektumon

ondblclick

egérrel duplán kattint az objektumon

onfocus

az objektum fókuszba kerül

onkeypress

a billentyű meg lett nyomva

onload

az oldal vagy a kép teljesen betöltődött

onunload

a felhasználó bezárta az oldalt

onmouseover

az egér az objektum felé kerül

onmouseout

az egér az objektumot elhagyja

Mentsd el a változásokat és próbáld ki! Sajnos elég egyszerű, és ha minden jól megy, működik. A feladatod csak annyi, hogy a bevitt adatokat ellenőrizd:  Az e-mail valóban e-mail formátumú-e, hiszen a valódiságát nem tudjuk ellenőrizni.  A bevitt centiméter értékek valóban számok-e.

Az e-mail cím ellenőrzésére vedd igénybe az internetet, ha a keresőbe beírod, „javascript e-mail ellenőrzés” akkor, a kapott találatok között biztos találsz egy használható leírást. Hirtelen használjuk ezt: http://hup.hu/node/28297

Mindig érdemes több lehetséges megoldást is megnézni, mert van köztük jobb is rosszabb is. Természetesen a megoldást adaptálni kell a mi környezetünkre, de hát csak az étteremben kapni készételt. function emailCheck() { var elsopont = document.adat.emailcim.value.indexOf('.',0); var lastpont = document.adat.emailcim.value.lastIndexOf('.'); var kukac = document.adat.emailcim.value.indexOf('@',0); var last_kukac = document.adat.emailcim.value.lastIndexOf('@'); var email_size = document.adat.emailcim.value.length; if (document.adat.emailcim.value=='' || kukac==(-1) || kukac==0 || elsopont==0 || elsopont==(-1) || (lastpont==(email_size-1)) || (kukac==(email_size-1)) || ((kukac+1)==elsopont) || (kukac!=last_kukac)) { alert('Hibás email cím formátum!') document.adat.emailcim.focus() document.adat.emailcim.select() return false; } return true; }

Nincs más hátra, mint rávenni az index.html, hogy valamikor meghívja az emailCheck() függvényt. Vagyis ki kellene találni, melyik eseményhez rendeld hozzá! Az eredeti feladatleírásban a

elhagyásakor, vagyis a submit gomb lenyomásakor az onSubmit eseményhez rendeli a függvény meghívását. De csak akkor hagyja el a -t, ha a függvény visszatérési értéke true (igaz), vagyis az e-mail cím formátuma rendben van. Ekkor meghívásra kerül az action tulajdonságban leírt URL. Természetesen ez lesz a rögzítése az adatoknak. (rogzit.php)

A számok ellenőrzését sajnos már neked kell kitalálni.  Ments és próbálkozz! Sajnos még mindig elég egyszerű, és ha minden jól megy, működik.

PHP, MYSQL Az utolsó feladat, hogy ha leellenőrizted a kliens oldalon az adatokat, akkor a server oldalon egy adatbázisba rögzítsd, hogy később egy ajánlattal megkereshesd a csempe iránt érdeklődőket.

Notepad++ Hozz létre egy új dokumentumot. Mentsd el rogzit.php néven. Ügyelj a fájl típusára, állítsd át php-re mentéskor. Hozz létre egy adatbázist. A 000webhost.com tárhelyen 2 adatbázis létrehozására van lehetőség, de azokban korlátlan mennyiségű tábla hozható létre. Az adatbázist létrehozásakor a kapcsolathoz szükséges adatokat másold át rogzit.php állományba, és nagyon pontosan jegyzeteld is le, hiszen mindig ezekkel az adatokkal fogsz tudni csatlakozni az adatbázishoz.

Indítsd el a phpmyadmin-t és importáld be az adatbázisba a csempe.sql SQL állományt. Ezzel létrehoztál egy táblát, amelyben rögzíteni fogjuk az adatokat az űrlapból.

Eddig ez a rogzit.php tartalma, természetesen a te adataiddal: $mysql_host = "mysql3.000webhost.com"; $mysql_database = "a6451800_csempe"; $mysql_user = "a6451800_user"; $mysql_password = "";

Először a kapott adatokat kell ellenőrizni.
&&

$mysql_host = "mysql3.000webhost.com"; $mysql_database = "a6451800_csempe"; $mysql_user = "a6451800_user"; $mysql_password = ""; ***** } ?>

Majd felépíteni az adatbázissal a kapcsolatot. A ***** résznél kell folytatni ***** $kapcsolat = mysql_connect($mysql_host, $mysql_user, $mysql_password); if (!$kapcsolat) { die("A kapcsolat az adatbázissal nem hozható létre!"); } *****

Ha a kapcsolat rendben van, és az adatok is megérkeztek, akkor be lehet az adatokat illeszteni az adatbázisba. ***** else { $adatbazis = mysql_select_db($mysql_database, $kapcsolat); $sql = "INSERT INTO `$mysql_database`.`csempe` "; $sql .= ”(`emailcim`, `me`, `sz`, `ma`) VALUES "; $sql .= "('$emailcim', $me, $sz, $ma)"; mysql_query($sql); echo "adatok rögzítve!"; } mysql_close($kapcsolat); Természetesen itt is nagyok a biztonsági problémák, hiszen a rogzit.php bárki meghívhatja és bármit átadhat a $_GET tömbbe, amit később feldolgozva kihasználhatnak rosszindulatúan. Ezért például érdemes a $_GET tömbből kivétel után, megszabadítani a STRING-eket a HTML tag-aktől így nem lehet futatható kódot elhelyezni a beviteli mezőben.

Cseréld le a sorokat a biztonság kedvéért: $emailcim = strip_tags($_GET["emailcim"]); $me = strip_tags($_GET["me"]); $sz = strip_tags($_GET["sz"]); $ma = strip_tags($_GET["ma"]);