Algoritmus terv. 1. Algoritmus általános áttekintése. 2. Inputok és outputok definiálása. 3. Folyamatok meghatározása. 4. Programozási utasítások

Hasonló dokumentumok
Algoritmus terv 3. Fejezet: Folyamatok meghatározása

HTML sablon tervezése

Multimédia 2017/2018 II.

Algoritmus terv. 1. Algoritmus általános áttekintése. 2. Inputok és outputok definiálása. 3. Folyamatok meghatározása. 4. Programozási utasítások

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

5-ös lottó játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció

Web programozás. 3. előadás

Internet TV Broadcaster kézikönyv

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

(statikus) HTML (XHTML) oldalak, stíluslapok

Tamás Ferenc: CSS táblázatok 2.

font-size:12px; display:block; text-shadow: 0 1px 0 #FFFFFF;}

Webprogramozás szakkör

HTML ÉS PHP ŐSZI FÉLÉV

Algoritmus terv. Algoritmus általános áttekintése. Inputok és outputok definiálása. Folyamatok meghatározása.

Tili-Toli játék. Felhasználói dokumentáció

Megoldás (HTML) <!DOCTYPE HTML> <html>

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

Webshop készítése ASP.NET 3.5 ben I.

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.

WCSS (Wap CSS), Wireless CSS

Sakk-játék. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

PC Connect. Unique ewsletter. program leírás

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

SQL*Plus. Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP (dolgozó), DEPT (osztály) "közönséges" felhasználók

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa

Lenyíló menük készítése. Összetett programok készítése

HTML kódok. A www jelentése World Wide Web.


Adatbázis Rendszerek II. 5. PLSQL Csomagok 16/1B IT MAN

Javascript dátum, idő, számláló megjelenítő Használati útmutató

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

8. Gyakorlat AWK 1, CSS

1. fejezet Bevezetés a web programozásába (Balássy György munkája) Az internet működése... 11

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Böngésző kompatibilitás

Stíluslapok használata (CSS)

ÚTMUTATÓ A KREATÍVOK ELKÉSZÍTÉSÉHEZ

XML-HMTL Beadandó Dolgozat. Avagy, mit sikerült validálnunk fél év alatt

HTML alapok. A HTML az Internetes oldalak nyelve.

Java és web programozás

PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT

HTML 5 - Start. Turóczy Attila Livesoft Kft

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:

ONLINE SZAKÉRTŐI KERETRENDSZER

Java és web programozás

INFO1 WEB, HTML, CSS

2. Készítsen awk szkriptet, amely kiírja az aktuális könyvtár összes alkönyvtárának nevét, amely februári keltezésű (bármely év).

JavaServer Pages (JSP) (folytatás)

S z á m í t ó g é p e s a l a p i s m e r e t e k

PHP-MySQL. Adatbázisok gyakorlat

(statikus) HTML (XHTML) oldalak, stíluslapok

CĺM: Bogdana Šuputa Novi Sad Serbia

Stateless Session Bean

Felhasználói útmutató Created vasárnap 08 február 2015

Webkezdő. A modul célja

API tervezése mobil környezetbe. gyakorlat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

New Default Standard.ipt

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)

HTML é s wéblapféjlészté s

Egészítsük ki a Drupal-t. Drupal modul fejlesztés

Tartalomjegyzék BEVEZETÉS... IX WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1. II. Háttér beállítása I. Elsõ weblapunk III. Karakterformázás...

BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF

Adatbázis Rendszerek II. 2. Gyakorló környezet

Anyagcsere serkentő, zsírégető epigallokatekin-3-gallát (EGCG)

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők

Albacomp RI Rendszerintegrációs Kft Székesfehérvár, Mártírok útja 9. E K O P - 1. A. 2 - A D A T Á L L O M Á N Y O K

PHP. Adatbázisok gyakorlat

Az SQL*Plus használata

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

SZÁMÍTÓGÉPES ADATBÁZIS-KEZELÉS. A MySQL adatbáziskezelő A PHP programozási nyelv JDBC, ODBC

Elektronikus levelek. Az informatikai biztonság alapjai II.

Információs technológiák 1. Gy: HTML alapok

PHP. Telepítése: Indítás/újraindítás/leállítás: Beállítások: A PHP nyelv

Webtárhely létrehozása a helyen. Lépések Teendő 1. Böngészőbe beírni: 2. Jobb oldalon regisztrálni (tárhelyigénylés).

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.

Java Programozás 11. Ea: MVC modell

Petőfi Irodalmi Múzeum. megújuló rendszere technológiaváltás

MVC. Model View Controller

Java és web programozás

RTCM alapú VITEL transzformáció felhasználó oldali beállítása Spectra Precision Survey Pro Recon szoftver használata esetén

Web-fejlesztés NGM_IN002_1

Adatbázisok elleni fenyegetések rendszerezése. Fleiner Rita BMF/NIK Robothadviselés 2009

Webprogramozás HTML alapok előadás

HTML. Dr. Nyéki Lajos 2016

Parlagfű Bejelentő Rendszer

Példa webáruház kialakítás rendszerdokumentáció

Web-fejlesztés NGM_IN002_1

Programozási technológia

Webapp (in)security. Gyakori hibákról és azok kivédéséről fejlesztőknek és üzemeltetőknek egyaránt. Veres-Szentkirályi András

Java Programozás 9. Gy: Java alapok. Adatkezelő 5.rész

9.óra CodeIgniter Framework #1. Gyimesi Ákos

Átírás:

Ez a kép most nem jeleníthető meg. Algoritmus terv 1. Algoritmus általános áttekintése 2. Inputok és outputok definiálása 3. Folyamatok meghatározása 4. Programozási utasítások Készült az Agora Alapítvány és az IT Carei Egyesület részére TeTT Consult www.tettconsult.eu

Az algoritmus terv az The Creation of the Elastic Survey Editor c. projekt keretében készült. Az algoritmus terv első három fejezet a Vezető Patner, az utolsó fejezet a Projekt Partner megbízásából készült. Az Elastic Survey projekt a Magyarország-Románia Határon Átnyúló Együttműködési Program 2007-2013 keretében valósul meg (www.huro-cbc.eu), az Európai Unió támogatásával, az Európai Regionális Fejlesztési Alap valamint a Magyar Köztársaság és Románia társfinanszírozásával. A program célja közelebb hozni egymáshoz a határmenti térségben élő embereket, közösségeket és gazdasági szereplőket az együttműködésbe bevont térség közös fejlesztésének elősegítése érdekében, a határmenti térség alapvető erősségeire építve. Vezető Partner: Agora Alapítvány a Társadalomkutatásért Projekt Partner: Asociația IT Carei (Asociația Infotour Carei) Projekt teljes költségvetése: 49.400 Euro ERFA támogatás: 41.595,60 Euro A jelen tanulmány nem feltétlenül tükrözi az Európai Unió hivatalos álláspontját. 2

Tartalomjegyzék IV. Programozási utasítások... 19 1. Értelmezési irányvonal... 19 2. A weblap alapértelmezett oldala (Html-ben)... 20 3. Az adatbázis szerkezete... 24 4. Az Elastic Survey alkalmazás funkciói... 26 A felhasználói felület és a backend közötti kommunikáció... 26 A regisztrációs folyamat... 26 A kérdőívkésztés folyamata... 27 A Html szegmens generálási folyamata... 28 A kérdőívkitöltési eljárás... 29 3

IV. Programozási utasítások 1. Értelmezési irányvonal Ezt a pszeudo kódban létrehozott algoritmus tervet az Elastic Survey alkalmazás az Elastic Survey: The Creation of the Elastic Survey editor című projekt keretén belül leírt működése alapján került kidolgozásra. Ez az algoritmus terv az Elastic Survey algoritmus két leírási stílusát tartalmazza. Vannak olyan pszeudo kód elemek, amelyek bármilyen modern programozási nyelvre átírhatóak, továbbá létezik még a bizonyos funkciók lerását, illetve bizonyos pszeudo kód szegmensek pontosítására szolgáló román nyelven írt kapcsolódó megjegyzés. Ezek a pontosítások két dőlt vonallal // vannak jelölve, ami azt jelenti, hogy ezen szegmensek nem részei a pszeudo kódnak, így a statisztika összeállítók ezeket nem veszik majd figyelembe. Mivel ez egy weboldal mögött futó alkalmazás, a Html része is le van írva, viszont ez már csak egy egyszerű útmutató, mely kontextust teremt az alkalmazás köré, az interfészhez és a grafikai tervezéshez kapcsolódó egyértelmű részek pedig nincsenek leírva. Az algoritmus terv pszeudo kódban írja le az Elastic Survey alkalmazás back-end (programozási rész) részében végbemenő folyamatokat. 19

2. A weblap alapértelmezett oldala (Html-ben) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="content- Type" /> <title>elastic Survey</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <img src="img/header.jpg" /> <nav id="mainmenu"> <ul> <li><a class="thislink" href="default.html">kezdőlap</a> </li><li><a href="chestflex.html">rugalmas kérdőív</a> </li><li><a href="bemutatas.html">bemutatás</a> </li><li><a href="ujkerdoiv.html">új kérdőív</a> </li><li><a href="kerdoivek.html">kérdőveim</a> </li><li><a href="kapcsolat.html">kapcsolat</a> </ul> <a class="langlink" href="default.html">ro</a> <a class="langlink" href="hu/default.html">hu</a> </nav> <div class="content"> // Ide jön a tartalom </div> </div> </body> </html> 20

Ez az Elastic Survey alkalmazás honlapja szerkezeti leírása Html-ben, mely egy, a tervezők igényei alapján módosítható és bővíthető alapszerkezet. Az oldal minimális stilizálásának leírása a következő CSS (cascading style sheet) szegmensben található. * { margin:0; padding:0; body { background-color:#756f39;.langlink{ font-family:"trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; text-decoration:none; font-weight:bold; color:#ffffff; padding:3px 10px; background-color:#ff9933; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; float:right; margin:6px 6px 0px 0px;.langlink:hover{ background-color:#993300; color:#ffffff; 21

#wrap { margin:15px auto; background-color:white; width:790px; -moz-box-shadow: 0 0 2px 2px #000; -webkit-box-shadow: 0 0 2px 2px #000; box-shadow: 0 0 2px 2px #000; #mainmenu { background-color:aqua; border-bottom-color:black; border-bottom-style:solid; border-bottom-width:1px; #mainmenu ul{ list-style-type: none; display:inline-block; #mainmenu ul li{ display:inline-block; margin:0; padding:0; #mainmenu ul li a{ text-decoration:none; color:#808080; font-family:"trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size:large; display:block; 22

padding:8px; #mainmenu ul li a:hover{ background-color:#0066cc; color:#ccffff; #mainmenu.thislink { background-color:blue; color:#ccffff 23

3. Az adatbázis szerkezete Az Elastic Survey alkalmazás egy szilárd és világos szerkezetű adatbázison alapszik. Az Elastic Survey program valamennyi adatot ebbe az adatbázisba menti el (a felhasználókkal, kérdőívekkel és a válaszokkal kapcsolatos adatok). Az adatbázis kialakításának legfőbb célja az, hogy a lehető legkevesebbet használjon el azon szerver erőforrásaiból, amelyen az alkalmazás fut, azaz hogy a merevlemezen és a RAM-ban minimális helyet foglaljon. Egy másik alapvető célkítűzés az, hogy az adatbázis felépítése lehetővé tegye az alkalmazás egyazon időben több száz felhasználó által történő hibamentes, adatvesztés, illetve adatfelülírás nélküli használatát. Ami a felhasználókat illeti, fontos az, hogy a kérdőívekre adott válaszokkal kapcsolatos adatok úgy legyenek csoportosítva, hogy azok fájlokba való exportálása Excelben vagy SPSS-ben történő feldolgozás érdekében könnyen és egyszerűen menjen. Az algoritmustervben az adatbázis neve esdb, és kétféle táblázatból tevődik össze: esdb.felhasználók, egy a honlapon regisztrált felhasználók adatait, valamint az általuk készített valamennyi kérdőív linkjeit tartalmazó táblázat; és az esdb.kérdőív, mely egy, a kérdőívek kérdéseit és azok válaszlehetőségeit, valamint a válaszolók által az illető kérdőívre adott válaszokat is tartalmazza. Az esdb.felhasználók táblázattípus egyetlen részből tevődik össze, míg az esdb.kérdőív táblázat külön felületet hoz létre minden egyes, az Elastic Survey alkalmazással készített kérdőív esetén. A táblázatok meghatározása az adatbázisban: esdb.felhasználók //a táblázat oszlopai string Usarname //felhasználónév string Password //a felhasználó jelszava string Mail int Kerdsz. //kérdőívek száma (kezdetben 0) record[] Kérdőívek string KerdNev //kérdőív címe table KerdPoint //pointer a kérdőív táblázatához end //a kérdőív adatait tartalmazza egy sor nyilvántartásban Az esdb.felhasznalok valamennyi sora egyetlen felhasználó adatait tartalmazza. esdb.kerdoiv //a tablazat oszlopai 24

string valaszok Az esdb.kerdoiv egyetlen oszlopból áll. Ezen oszlop első sora egy string típusú változó, mely több sorból tevődik össze. A string első sora a kérdőív kérdése (a nap kérdése). A string következő sorai a lehetséges válaszok. A táblázat többi sora pedig a válaszadók a nap kérdésére adott válaszait tartalmazzák. 25

4. Az Elastic Survey alkalmazás funkciói A felhasználói felület és a backend közötti kommunikáció Az egyszerűség kedvéért ebben az algoritmus tervben az Elastic Survey webhely és a szerveren futó program közötti kommunikáció két objektumon keresztül megy végbe: az infobagin-en és az infobagout-on. Az infobagin-t program funkciói paraméterként értelmezik, mely tartalmazni fogja a felhasználó által megadott adatokat (például a nap kérdése, illetve az ezzel kapcsolatos lehetséges válaszok). Az infobagout pedig a felhasználó kérésének az eredményét képezi, olyan információkat tartalmaz, melyek a műveletet követően jelenítődnek meg (például az exportált file linkje). Az infobagout-ból származó adatok Html-ben a CSS content osztály <div>-jébe kerülnek elhelyezésre. A regisztrációs folyamat Az infobagin objektum meghatározása infobagin string Username string Password string Mail Regisztrációs funkció Azt követően, hogy a felhasználó megadta regisztrációs adatait a webhelyen, illetve megnyomta a Küldés opciót, a webhely elküldi a programnak az infobagin objektumot. function NewUser (infobagin) if (infobagin.username.length!= 0) & (infobagin.password.length >= 8) & (infobagin.mail.length!= 0) { Felhasznalo newreg = new Felhasznalo newreg.username = infobagin.username newreg.password = infobagin.password 26

newreg.mail = infobagin.mail newreg.nrchest = 0 esdb.felhasznalok.insert(newreg) infobagout.message = Ön sikeresen regisztrált. Üdvözöljük! infobagout.url = default.html else { infobagout.message = Kérjük, adatait a meghatározott formátumban adja meg! return infobagout end A kérdőívkésztés folyamata Az infobagin objektum meghatározása infobagin string KerdNev string Kerdes string Valaszok felhasznalo User Kérdőívszerkesztési funkció Azt követően, hogy a felhasználó megnyomja a nap kérdése típusú új kérdőív készítésére vonatkozó gombot, megjelenik a kérdőívszerkesztő oldal, ahol a felhasználó maga határozza meg a kérdést, illetve a kapcsolódó válaszlehetőségeket. A Küldés parancs megnyomásával a webhely elküldi a programnak az infobagin objektumot. function createkerd (infobagin) if (infobagin.kerdnev.length = 0) 27

infobagout.message = Kérjük, adjon nevet a kérdőívnek! elseif (infobagin.kerdes.length = 0) infobagout.message = Kérjük, adjon meg egy kérdést! elseif (infobagin.valaszok.lines <=2) infobagout.message = Adjon meg legalább 2 lehetséges választ. else { table ujkerd = new table string valaszok end infobagin.user.kerdsz. += 1 infobagin.user.kerdpoint[infobagin.user.kerdsz.] = ujkerd infobagin.user.kerdpoint[infobagin.user.kerdsz.] = infobagin.kerdnev ujkerd firstline = new ujkerd firstline.valaszok = infobagin.kerdes + \n foreach (string line in infobagin.valaszok) firstline.valaszok += line + \n end ujkerd.insert(firstline) esdb.insert(ujkerd) infobagout.message = A kérdőív ezennel elkészült! infobagout.url = default.html Return infobagout end A Html szegmens generálási folyamata Az infobagin objektum meghatározása 28

infobagin felhasznalo User string KerdNev Miután a felhasználó megnyomja a Kérdőíveim gombot, kijelölhet és közzétehet egy kérdőívet (azaz létrehoz egy Html elemet). Amikor pedig elküldi a Közzétesz parancsot, a webhely elküldi a programnak az infobagin objektumot az illető elemmel kapcsolatos adatokkal együtt. Html-elem-generáló funkció function HtmlGenerate (infobagin) string htmlelm table q = from k in infobagin.user.kerdoivek where k.kerdnev = infobagin.kerdnev select k.kerdpoint htmlelm += <div class= question > <p> +q[0].valaszok.line[0]+ </p></div> htmlelm += <form class= inputform > foreach (string line in q[0].valaszok) if (line!= q[0].valaszok.line[0]) htmlelm += < input type="checkbox" name="grp" value="+line+">+line+<br> end htmlelm += </form> infobagout = htmlelm return infobagout end A kérdőívkitöltési eljárás Az infobagin objektum meghatározása infobagin table KerdEz 29

bool UjValasz string Val Valamennyi válaszadó nemcsak a kutató (a kérdőív készítője) által meghatározott válaszok közül választhat, hanem lehetősége van egy új választ hozzáadni a válaszlistához. Az infobagin objektum a válaszadó által megadott választ tartalmazza, valamint arról is információt ad, hogy a válaszadó adott-e új választ. A válaszok összegyűjtésére irányuló funkció function fill (infobagin) if!ujvalasz { infobagin.kerdez valasz = new infobagin. KerdEz valasz.valaszok = infobagin.val infobagin.kerdez.insert(valasz) else { infobagin. KerdEz[0].valaszok[0] += \n +infobagin.val infobagin.kerdez valasz = new infobagin.kerdez valasz.valaszok = infobagin.valp infobagin.kerdez.insert(valasz) regeneratehtml() //ez a funkció újraképezi //a Html elemet az új válaszlehetőséggel, amely éppen úgy fog megjelenni //mintha azt a kutató tette volna End 30