WEB Technológiák

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


#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


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


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


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


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


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


Documents

WEB Technológiák