Csempe kalkula tor 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-language" content="hu" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html> Legyen a címke: Csempe kalkulátor <title>csempe kalkulátor</title>
Írd ki 1-es címsorral szintén, hogy Csempe kalkulátor <h1>csempe kalkulátor</h1> Hozz létre egy űrlapot, amelyben az adatokat fogod bekérni. <form name= adat method= get action= > </form> 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. <table style= width: 500px > <td> A vevő e-mail címe:</td> <td> <input name="emailcim" type="text" /></td> </table> 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: <table cellspacing="0" cellpadding="0" style="width: 500px"> <td style="width: 80px" colspan= 2 > Szoba adatai:</td> <td> </td> <td style="width: 80px">mélység:</td> <td><input name="me" type="text" value="" /> cm</td> <td rowspan="3" style="width: 175px" valign="top"> <div id="eredmeny"></div> </td> <td style="width: 80px">szélesség:</td> <td><input name="sz" type="text" value="" /> cm</td> <td style="width: 80px">magasság:</td> <td><input name="ma" type="text" value="" /> cm</td> <td style="width: 80px"> </td> <td> <input name="szamol" type="button" value="számol" /></td> <td class="jobbra"> <input name="elkuld" type="submit" value="elküld" /></td> </table>
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="<b />Szükséges csempe:<br />"; 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"></script> 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 onchange onclick ondblclick onfocus onkeypress onload onunload onmouseover onmouseout végrehajtódik amikor a tartalom megváltozik egérrel kattint az objektumon egérrel duplán kattint az objektumon az objektum fókuszba kerül a billentyű meg lett nyomva az oldal vagy a kép teljesen betöltődött a felhasználó bezárta az oldalt az egér az objektum felé kerül 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 <form> 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 <form>-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) <form name="adat" method="get" action="rogzit.php" onsubmit="return emailcheck()"> 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. <? if (isset($_get["emailcim"]) && isset($_get["me"]) && isset($_get["sz"]) && isset($_get["ma"])) { $emailcim = $_GET["emailcim"]; $me = $_GET["me"]; $sz = $_GET["sz"]; $ma = $_GET["ma"]; $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"]);