Download
1 / 32
320 likes | 397 Views
WEB Technológiák. A HTML és a CGI. dr. Kovács László. ME Általános Informatikai Tsz. A HTML nyelv. Hypertext Markup Language, az SGML (Standard Generalized Markup Language, spec. jelölőrendszert használó nyelv kialakításának szabványa 1986 óta) egyik megvalósítása
E N D
WEB Technológiák A HTML és a CGI dr. Kovács László ME Általános Informatikai Tsz.
A HTML nyelv • Hypertext Markup Language, az SGML (Standard Generalized Markup Language, spec. jelölőrendszert használó nyelv kialakításának szabványa 1986 óta) egyik megvalósítása • Olyan jelölőnyelv, melynek segítségével platform-független dokumentumok hozhatók létre. • A HTML szintaxisának formális leírása: HTML DTD • Nem programozási nyelv! • A szöveges dokumentum különböző helyein tag-eket v. karakterhelyettesítőket (character entity references) helyezünk el, amellyel előírjuk, h. egy alkalmazás milyen műveletet végezzen el a dok. adott részén.
A HTML nyelv változatai A HTML a W3C hivatalos ajánlása és a főbb böngészők (MS IE és NN) általában ragaszkodnak hozzá, de további nem-szabványos kódokat is biztosítanak és néhány sajátosságot másként valósítanak meg. Az aktuális változat a HTML 4.0. A leghaladottabb jellegzetességeire célszerű két változatot fejleszteni és a megfelelőt küldeni a böngészőnek. A HTML 4 változatot általában dinamikus HTML-nek nevezik. A HTML bővíthető formájára, az Extensible Hypertext Markup Language-re (XHTML) HTML 5-ként is szokás hivatkozni.
A HTML 4 főbb újdonságai • Cascading Style Sheet (CSS): többszintű Weblap tartalom vezérlés, • igényesebb űrlapok készítése, • keretek támogatása (a főbb böngészők már támogatták), • táblázatok továbbfejlesztése a feliratok (caption) használatára (Braille, felovasók részére), • az oldalak többnyelvű kezelése és továbbítása.
A HTML elemei Leíró címkékkel (tag) azonosítja a dok. különböző részeit. A címkéknek kettős feladatuk van: • Meghatározzák a dok. szerkezetét és formázását (a böngésző tudja értelmezni és megjeleníteni a dok-ot) • Helymegjelölők (a kereső programok megtalálják a dok. főbb részeit)
Hypertext A HTML dokumentum egy meghatározott része. Olyan szöveg, ami egy másik, rendszerint Web dokumentumban lévő információra történő hivatkozást tartalmaz. • A normál szövegtől megkülönböztetve jelenik meg. • Kijelöli a Web dokumentum kapcsolódási pontjait.
HTML alapok <!DOCTYPE ...>Dokumentum specifikáció<HTML> <HEAD> Fejléc <TITLE> Cím </TITLE> </HEAD> <BODY> Törzs </BODY> </HTML> <BODY BACKGROUND="file.name" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" ...> ahol a színkód: rrggbb (r,g,b: 0-F) alakú
HTML alapok <B>Félkövér</B> <I>Dõlt</I> <U>Aláhúzott</U> <SUP>Felsõindex</SUP> <SUB>Alsóindex</SUB> <FONT FACE="betütípus elnevezése" COLOR="színkód" SIZE="szám"> <HR SIZE="szám” ALIGN=”hely” WIDTH="szám”> <BR> sortörés egy bekezdésen belül. <P> bekezdés <Hn ALIGN=”pozició"> Címsor </Hn> <UL> rendezetlenlista keret </UL> <OL> rendezett lista keret </OL> <LH> listafejléc </LH> <LI> lista sor <DL> definícióslista keret </DL> <DT> definíciós kifejezés<DD> definíciós leírás <A HREF="protokoll://domain/konyvtarak/file.name#jelzo">
HTML alapok <TABLE BORDER="szám" ALIGN="hely" NOWRAP WIDTH="% vagy pixel"> <CAPTION ALIGN="hely">Táblázat címe</CAPTION> <TR> táblázati sor <TH> oszlop-/sorfejléc <TD COLSPAN="szám" ROWSPAN="szám" ALIGN="hely" VALIGN="hely" WIDTH="% vagy pixel" HEIGHT="% vagy pixel"> < IMG SRC =”állomány” HEIGHT= ="szám” WIDTH ="szám” ALIGN=”poz”> <FRAMESET rows=”%n,%m"><FRAME SRC=”állomány"></FRAMESET><NOFRAME> </NOFRAME>
HTML űrlapok • Felhasználói adatbevitelt tesz lehetővé • Az elküldött információkat egy kiszolgálón futó program dolgozza fel (ált. CGI szkript)
HTML űrapok <FORM METHOD="POST|GET” ACTION=”URL”> vezérlő elemek </FORM> <INPUT NAME=”név” TYPE=”tipus” VALUE=”érték” SIZE=”méret”> típus: TEXT, PASSWORD, RADIO, CHECKBOX, IMAGE, RANGE, HIDDEN, SUBMIT, RESET <TEXTAREA NAME=”név” ROWS=”méret” COLS=”méret"> </TEXTAREA> <SELECT NAME=”név" MULTIPLE> <OPTION> </SELECT> <PRE> </PRE>
HTML űrlapok forrás -->
HTML űrlapok <HTML> <HEAD><TITLE>Indulo lap</TITLE></HEAD <BODY> <BR><B> DOLGOZO</B> adatai <BR><BR> <FORM ACTION="/cgi-bin/p1.exe" METHOD="GET"> <TABLE> <TR> <TD>TEXT: <TD><INPUT NAME=TEXT1 TYPE=TEXT> <TR> <TD>TEXTAREA: <TD><TEXTAREA NAME=TEXTAREA1 ROWS=5 COLS=20></TEXTAREA> <TR> <TD>PASSWORD: <TD><INPUT NAME=PASSWORD1 TYPE=PASSWORD> <TR><TD>RADIO: <TD><INPUT NAME=RADIO1 TYPE=RADIO VALUE=V1><INPUT NAME=RADIO1 TYPE=RADIO VALUE=V2> <TR> <TD>CHECKBOX: <TD><INPUT NAME=CHECKBOX1 TYPE=CHECKBOX> <TR> <TD>SELECT: <TD><SELECT NAME=SELECT1> <OPTION>O1<OPTION>O2</SELECT><TR> <TR><TD><TD><INPUT NAME=SUBMIT1 TYPE=SUBMIT VALUE=TOVABB> </TABLE> </FORM></BODY> </HTML>
CGI kapcsolat CGI = Common Gateway Interface egy általános, platform független interface a WEB server és az általa indított külső programok között böngésző DB szerver k.változók WEB szerver CGI program Std. IO A CGI programot rendszerint egy megadott könyvtárban kell elhelyezni Tetszőleges programozási nyelvet, script nyelvet lehet használni
CGI kapcsolat A CGI program elhelyezése, meghívása Védelmi okok miatt a CGI programok rendszerint csak a megadott könyvtárakban helyezhetők le Ezen könyvtárakat a WEB Server konfigurációjánál adjuk meg Az URL-ben a könyvtár alias nevére kell hivatkozni (szintén a a WEB Server konfigurációs állományban adott) protokoll program file domain cím http://rainbow.iit.uni-miskolc.hu/cgi-bin/p1.exe default port: 80 könyvtár alias = c:\apache\cgi-bin
CGI kapcsolat Paraméter küldése a programhoz nem parancssori paraméterekkel, hanem környezeti változókkal vagy a szabvány IO csatornán keresztül lehetséges. Fontosabb környezeti változók: SERVER_NAME: a WEB szerver IP vagy domain neve SERVER_PORT: a WEB szerver port címe SERVER_SOFTWARE: a WEB szerver neve SERVER_PROTOCOL: a kapcsolati protokoll SCRIPT_NAME: a CGI program neve REQUEST_METHOD: az igénylő által megadott paraméter átadási mód (pl. POST, GET,..) REMOTE _USER: az igénylő felhasználó
CGI kapcsolat Fontosabb környezeti változók: REMOTE_HOST: az igénylő gép domain címe REMOTE_ADDRESS: az igénylő gép IP címe QUERY _ STRING: a CGI programnak küldött paraméterek PATH_TRANSLATED: az igényelt file OS azonsítása HTTP _*: http spe HTTP_USER _AGENT: az igénylő program típusa CONTENT_TYPE: csatolt adatsor típusa CONTENT _LENGTH: csatolt adatsor mérete AUTH _TYPE: igényelt azonosítási mód
CGI kapcsolat A GET vagy POST átadási metódus jelentése A CGI program a szerver és a kliens program említett paramétereit mindig a megadott környezeti változókon keresztül kapja meg A kliens űrlap (FORM) mezőinek paramétereit viszont megkaphatja - környezeti változókban (GET mód) - szabvány INPUT csatornán (POST mód) A GET módban a paraméterlista az URL része lesz FORM GET k.változók POST WEB szerver CGI program Std. IO
CGI kapcsolat A válaszlap generálása A CGI program által a szabvány OUTPUT csatornára kiküldött karaktersorozat lesz a kliensnek elküldött válaszlap tartalma. Pl. C-ben: ... printf(“<H1>Cimlap %s<H1>\n”, szoveg); … Ügyelni arra, hogy a válaszlap első sora adja meg a dokumentum típusát: printf ("Content-type: text/html\n\n");
CGI kapcsolat #include <stdio.h> #include <stdlib.h> #include <string.h> main() { char line[300]; printf ("Content-type: text/html\n\n"); printf ("<HTML>\n"); printf ("SERVER_NAME : %s<BR>\n",getenv("SERVER_NAME")); printf ("SERVER_PORT : %s<BR>\n",getenv("SERVER_PORT")); printf ("SERVER_PROTOCOL : %s<BR>\n",getenv("SERVER_PROTOCOL")); printf ("SERVER_SOFTWARE : %s<BR>\n",getenv("SERVER_SOFTWARE")); printf ("SCRIPT_NAME : %s<BR>\n",getenv("SCRIPT_NAME")); printf ("REQUEST_METHOD : %s<BR>\n",getenv("REQUEST_METHOD")); printf ("REMOTE_USER : %s<BR>\n",getenv("REMOTE_USER")); printf ("REMOTE_IDENT : %s<BR>\n",getenv("REMOTE_IDENT")); printf ("REMOTE_HOST : %s<BR>\n",getenv("REMOTE_HOST")); printf ("REMOTE_ADDR : %s<BR>\n",getenv("REMOTE_ADDR"));
CGI kapcsolat printf ("QUERY_STRING : %s<BR>\n",getenv("QUERY_STRING")); printf ("SERVER_NAME : %s<BR>\n",getenv("SERVER_NAME")); printf ("PATH_TANSLATED : %s<BR>\n",getenv("PATH_TRANSLATED")); printf ("PATH_INFO : %s<BR>\n",getenv("PATH_INFO")); printf ("GATWAY_INTERFACE : %s<BR>\n",getenv("GATWAY_INTERFACE")); printf ("CONTENT_TYPE : %s<BR>\n",getenv("CONTENT_TYPE")); printf ("CONTENT_LENGTH : %s<BR>\n",getenv("CONTENT_LENGTH")); printf ("AUTH_TYPE : %s<BR>\n",getenv("AUTH_TYPE")); printf ("HTTP_USER_AGENT : %s<BR>\n",getenv("HTTP_USER_AGENT")); if (!strcmp(getenv("REQUEST_METHOD"),"POST")) { gets(line); printf ("Input line: %s<BR>\n",line); } printf ("</HTML>\n"); }
CGI kapcsolat <HTML> <HEAD><TITLE>Indulo lap</TITLE></HEAD> <BODY> <FORM ACTION="/cgi-bin/p1.exe" METHOD="GET"> <INPUT NAME=TEXT1 TYPE=TEXT> <TEXTAREA NAME=TEXTAREA1 ROWS=5 COLS=20></TEXTAREA> <INPUT NAME=SUBMIT1 TYPE=SUBMIT> </FORM> </BODY> </HTML>
CGI Adatbázis kapcsolat A CGI program kapcsolódása az adatbázishoz adatbázis és forrásnyelv függő. Pl. OCI interface kell az Oracle - C kapcsolatnál. olog(&lda, (ub1 *)hda, username, -1, password, -1,…) oopen(&cda1, &lda, …) oparse(&cda1, parancs,…) odefin(&cda1, 1, (ub1 *) &valtozo,…) odescr(&cda1, 1, &valtozo,…) obndrv(&cda1, (text *) ":NEV”,…) oexec(&cda2) ofetch(&cda2) oexfet(&cda1, (ub4) 1,...) oclose(&cda1) ologof(&lda)
CGI Adatbázis kapcsolat Mintaprogram, amely a beolvasott érték alapján elvégez egy adatbázis lekérdezést, s az eredményt kiírja a válaszlapra #include <stdio.h> #include <stdlib.h> #include <ctype.h> #include <string.h> #include <oratypes.h> #include <ocidfn.h> /* LDA es CDA strukturak */ #ifdef __STDC__ #include <ociapr.h> #else #include <ocikpr.h> #endif #include <ocidem.h> #define DEFER_PARSE 1 /* oparse jelzok */ #define NATIVE 1 #define VERSION_7 2
CGI Adatbázis kapcsolat text *username = (text *) "SCOTT"; text *password = (text *) "TIGER"; Lda_Def lda; /* LDA, HDA es cursor strukturak */ ub4 hda[HDA_SIZE/sizeof(ub4)]; Cda_Def cda1; Cda_Def cda2; void do_exit(); main() { char line[300]; char *c; char ert[100]; int i; char parancs[100]; sword kor; printf ("Content-type: text/html\n\n"); printf ("<HTML>\n");
CGI Adatbázis kapcsolat if (olog(&lda, (ub1 *)hda, username, -1, password, -1, (text *) 0, -1, (ub4)OCI_LM_DEF)) { printf ("nyitasi hiba<BR>\n"); exit(EXIT_FAILURE); } printf("Kapcsolodas az ORACLE-hez (%s) sikeres<BR>\n", username); if (oopen(&cda1, &lda, (text *) 0, -1, -1, (text *) 0, -1)) { printf ("parancs nyitasi hiba<BR>\n"); do_exit(EXIT_FAILURE); } if (!strcmp(getenv("REQUEST_METHOD"),"POST")) { gets(line); c = strstr(line,"TEXT1"); c += 6; i = 0;
CGI Adatbázis kapcsolat if (!strcmp(getenv("REQUEST_METHOD"),"POST")) { gets(line); c = strstr(line,"TEXT1"); c += 6; i = 0; while (*c != '&' && *c) {ert[i++] = *c++;} ert[i] = '\0'; printf ("Nev = %s<BR>\n",ert); sprintf (parancs,"SELECT KOR FROM DOLGOZO WHERE KOD=%s ",ert); if (oparse(&cda1, parancs, (sb4) -1, DEFER_PARSE, (ub4) VERSION_7)) { do_exit(EXIT_FAILURE); } if (odefin(&cda1, 1, (ub1 *) &kor, (sword) sizeof(sword), (sword) INT_TYPE, (sword) -1, (sb2 *) 0, (text *) 0, -1, -1, (ub2 *) 0, (ub2 *) 0)) { do_exit(EXIT_FAILURE); }
CGI Adatbázis kapcsolat if (oexfet(&cda1, (ub4) 1, FALSE, FALSE)) { if (cda1.rc == NO_DATA_FOUND) kor = 10; else { do_exit(EXIT_FAILURE); } } printf ("KOR = %d<BR>\n", kor); do_exit(EXIT_SUCCESS); } printf ("</HTML>\n"); }
CGI Adatbázis kapcsolat void do_exit(exit_code) sword exit_code; { sword error = 0; if (oclose(&cda1)) { fprintf(stderr, "Error closing cursor 1.\n"); error++; } if (ologof(&lda)) { fprintf(stderr, "Error on disconnect.\n"); error++; } if (error == 0 && exit_code == EXIT_SUCCESS) printf ("\nG'day\n"); exit(exit_code); }
