web technológiák
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
WEB Technológiák
A HTML és a CGI
ME Általános Informatikai Tsz. dr. Kovács László
2
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.
3
A HTML nyelv változataiA 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.
4
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.
5
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:
1. Meghatározzák a dok. szerkezetét és formázását (a böngésző tudja értelmezni és megjeleníteni a dok-ot)
2. Helymegjelölők (a kereső programok megtalálják a dok. főbb részeit)
6
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.
7
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ú
8
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">
<BR> sortörés egy bekezdésen belül.
<P> bekezdés
<Hn ALIGN=”pozició"> Címsor </Hn>
<UL> rendezetlen lista keret </UL><OL> rendezett lista keret </OL> <LH> listafejléc </LH> <LI> lista sor
<A HREF="protokoll://domain/konyvtarak/file.name#jelzo">
<HR SIZE="szám” ALIGN=”hely” WIDTH="szám”>
<DL> definíciós lista keret </DL><DT> definíciós kifejezés <DD> definíciós leírás
9
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>
10
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)
11
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>
12
HTML űrlapok
forrás -->
13
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>
14
CGI kapcsolat
CGI = Common Gateway Interfaceegy általános, platform független interface a WEB serverés az általa indított külső programok között
böngésző
WEB szerver CGI program
k.változók
Std. IO
DB szerver
A CGI programot rendszerint egy megadott könyvtárban kellelhelyezni
Tetszőleges programozási nyelvet, script nyelvet lehet használni
15
CGI kapcsolat
A CGI program elhelyezése, meghívása
Védelmi okok miatt a CGI programok rendszerint csak a megadottkönyvtárakban helyezhetők leEzen 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)
http://rainbow.iit.uni-miskolc.hu/cgi-bin/p1.exe
default port: 80
protokoll domain cím
könyvtár alias= c:\apache\cgi-bin
program file
16
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 neveSERVER_PORT: a WEB szerver port címeSERVER_SOFTWARE: a WEB szerver neveSERVER_PROTOCOL: a kapcsolati protokollSCRIPT_NAME: a CGI program neveREQUEST_METHOD: az igénylő által megadott
paraméter átadási mód (pl. POST, GET,..)REMOTE _USER: az igénylő felhasználó
17
CGI kapcsolat
Fontosabb környezeti változók:
REMOTE_HOST: az igénylő gép domain címeREMOTE_ADDRESS: az igénylő gép IP címeQUERY _ STRING: a CGI programnak küldött
paraméterekPATH_TRANSLATED: az igényelt file OS azonsításaHTTP _*: http spe HTTP_USER _AGENT: az igénylő program típusaCONTENT_TYPE: csatolt adatsor típusaCONTENT _LENGTH: csatolt adatsor méreteAUTH _TYPE: igényelt azonosítási mód
18
CGI kapcsolat
A GET vagy POST átadási metódus jelentése
A CGI program a szerver és a kliens program említett paramétereitmindig a megadott környezeti változókon keresztül kapja megA 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
WEB szerver CGI program
k.változók
Std. IO
POSTGET
19
CGI kapcsolat
A válaszlap generálása
A CGI program által a szabvány OUTPUT csatornára kiküldöttkaraktersorozat 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 dokumentumtípusát:
printf ("Content-type: text/html\n\n");
20
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"));
21
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
22
<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 kapcsolat
23
CGI kapcsolat
24
CGI kapcsolat
25
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)
26
CGI Adatbázis kapcsolat
#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
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
27
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");
28
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;
29
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); }
30
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");}
31
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);}
32
CGI Adatbázis kapcsolat