Načrtovanje in razvoj spletnih aplikacij (RSA)

Islam Mušić, prof.

Elektro in računalniška šola

Snov

Internet in storitve interneta. Internetni protokoli.

Splet. Html. Css. XML.

Skriptno programiranje. Objektno programiranje.

Spletni portali – uporaba.

Komuniciranje s strankami. Dokumentacija. Testiranje.

Varnost. Zaščita. JavaScript. Ajax.

Framework (Ogrodja). MVC.

WEB 2.0

Cilji

Pri tem modulu bomo izdelali …

KAJ????

Vprašanja, ideje ...

Splet???

Splet, internet

Poišči na Googlu kaj je eno in kaj drugo.

Napiši si storitve interneta.

Odgovori zakaj internet in splet nista eno in isto.

Internet - ponovitev

Medmrežje – omrežje omrežji.

Je globalni sistem med seboj povezanih omrežij, ki

med seboj izmenjujejo podatke s pomočjo

internetnih protokolov (Fikcija, marec 1946).

TCP/IP.

Storitve:

Splet, E-pošta, FTP, IPTV, VoIP, IM, ...

Referati?

Omrežja – Internetni protokoli

Je skupina komunikacijskih protokolov, ki se

uporabljajo za internet in podobna omrežja

EKI, VOS

Najpomembnejša protokola sta:

IP – Internet Protocol

TCP – Transmission Control Protocol

IP

Dostavlja

pakete od pošiljatelja do naslovnika

Najbolj razširjen je IPv4 (IETF: RFC 791, september 1981)

Najnovejši je IPv6 (IETF: RFC 2460, od 1996 naprej) – večji naslovni prostor

TCP

Zagotavlja

zanesljivo dostavo paketov v pravilnem vrstnem redu

Nadzoruje velikost sporočil

Nadzoruje hitrost izmenjave sporočil

Nadzoruje zasedenost omrežja

Vrata

Določajo končno točko prejemnika v enem gostitelju

16-bitna vrednost (0-65535)

WIKI ???

http://im.scv.si/wiki

Oglejmo si …

Splet

Začetnik je Sir Tim Berners-Lee, ki je predlagal

hipertekstni informacijski sistem v CERN-u

Sistem kasneje preimenovan v “World Wide Web”

Do konca leta 1990 je Berners-Lee implementiral

prototip HTTP protokola

Sredi leta 1991 sta bila v CERN-u na voljo strežnik

in brskalnik (odjemalec)

V začetku 1993 je 50 spletnih mest uporabljalo

HTTP strežnike, 200 do jeseni

HTTP

Je WWW protokol (poznan tudi kot Request & Response)

Brskalniki komunicirajo preko http

Strežniki komunicirajo preko http

Torej je komunikacijski protokol med strežnikom in odjemalcem

(brskalnikom)

Delovanje http

HTTP uporablja preprost pogovorni vzorec:

brskalnik se poveže s strežnikom preko porta

začne dialog s prošnjo za datoteko na strežniku

strežnik nato odgovori brskalniku nazaj in pošlje datoteko

Request & Response

Prikaz strani

Brskalnik dobi od strežnika datoteko v obliki HTML (povezave, slike ...).

Analiza HTML

Ugotovi, da potrebuje še vsebine za pravilen prikaz strani (recimo sliko).

Ko se to zgodi, brskalnik začne še eno HTTP zahtevo za vsako sliko.

Prikaz strani

Vrste vsebine

Poznamo več vrst vsebine, od tega je odvisno kako

vsebino obravnava odjemalec (npr. brskalnik):

text/plain

text/html

text/xml

application/pdf

Protokol s stanjem

Kadar protokol podpira stanje, to pomeni, da

omogoča izmenjavo vrste ukazov med odjemalcem

in strežnikom.

Strežnik pri tem ves čas “ohranja stanje” odprte

povezave, ki se imenuje tudi seja.

Med protokole s stanjem štejemo FTP, SMTP, POP3

Protokol brez stanja

Življenjska doba povezave je le v času izmenjave

sporočila zahteva/odgovor.

Zato ne obstaja avtomatski način vzdrževanja seje

med več zaporednimi sporočili zahteva/odgovor.

Posledica je, da ne moremo združiti več zahtev v

eno – npr. zahtevati spletne strani skupaj z vsemi

slikami.

Zahteva / Odgovor

Majhen test

telnet google.com 80

GET /search?q=Islam+Mušić

Results (HTTP/1.0 200 OK...)

Enostavno

Http zahtevki

GET Najbolj pogosta metoda za pridobitev vsebine datoteke.

POST Podobno kot GET, samo da je telo zahtevka vsebuje podatke ki jih želimo

sporočiti strežniku.

PUT Se uporablja za pošiljanje datotek na ciljni spletni strežnik.

DELETE Redko implementirani.. zbriše dotično datoteko z strežnika.

Nekaj rezultatov

200 OK (datoteka najdena)

404 (File not found)

302 (Resource has moved)

500 (Internal server error)

Statusne kode

Imajo več razredov:

1xx: informativne

2xx: označujejo uspešne odgovore

3xx: zahtevajo preusmeritev

4xx: napake na strani zahteve (odjemalca)

5xx: napake na strani strežnika

URI – Universal Resource Identifier

Največkrat ga srečamo pod drugim imenom:

URL – Universal Resource Locator

Čeprav ne gre za isti pojem se v praksi največkrat

uporablja URL

Struktura URL

shema://gostitelj[:vrata#]/pot/;[parametri]

[?poizvedovalni-niz]

[#sidro]

Shema določa protokol s katerim je možno dostopati do vira, npr. HTTP

Gostitelj – ime ali IP naslov strežnika, na katerem je dostopen vir

Vrata – neobvezen del naslova, ki določa vrata na katerih posluša strežnik. Za HTTP običajno

80

Struktura URL

Pot – logično gledano je to struktura imenikov, ki vodi

do vira, kar je običajno pri FTP, HTTP strežnikih

URL parametri – neobvezni, včasih se niso toliko

uporabljali, danes se predvsem za prenos podatkov o

seji z Java Servlet API – naveden je takoj za podpičjem

Struktura URL

Poizvedovalni niz – neobvezni del URL, vsebuje

dinamične parametre, ki so povezani z zahtevo. Od

poti je ločen z znakom “?”, več parametrov je ločenih z

znakom &, ime parametra je ločeno od spremenljivke z

enačajem

Struktura URL

Sidro – neobvezni del URL, določa ime pozicijske

oznake v okviru vsebine, ki jo nalagamo – podobno

označbi v knjigi

Relativni/absolutni URL

Pri odpiranju spletnih strani običajno uporabljamo

absolutni URL, npr: http://www.google.com

V okviru ene spletne strani običajno uporabljamo

relativne naslove za dostop do dodatnih virov

/index.html

/scripts/skripte.js

../images/slika.jpg

HTML (HyperText Markup

Language)

je označevalni jezik za izdelavo spletnih strani

Tim Berners-Lee (W3C)

Internet Engineering Task Force (IETF)

HTML 4.01 (24.12.1999)

HTML5 (v razvoju; cca. 2012)

HTML

ni programski jezik

koda zapisana v ASCII (sistemska neodvisnost)

TAG (značke, oznake)

Uvod

HTML je kratica za HyperText Markup Language

je jezik za objavljanje na svetovnem spletu

podmnožica mednarodnega standarda za izmenjavo elektronskih dokumentov

imenovan SGML (Standard Generalized Markup Language)

HTML ponuja: elektronsko objavo dokumentov z besedili, tabelami,

fotografijami, preusmeritve, uporaba obrazcev,…

HTML - oznake

oznaka je vedno zaprta med znaka za večji in manjši < in >

oznaka velja od mesta klica do mesta preklica, za preklic oznake pred oznako

postavimo poševnico /

nekatere oznake in elementi lahko vsebujejo tudi atribute

XHTML - uvod

XHTML je naslednji korak v razvoju jezikov, ki se uporabljajo za objavljanje v spletu.

Je jezik, ki zadostuje vsem pravilom jezika XML. Dokumente XHTML 1 je mogoče napisati tako, da so popolnoma združljivi z različicami

jezika HTML 4.01.

XHTML

Uporablja HTML značke, ki pa jih je potrebno zapisati po pravilih pisanja

XML

Obstajajo razlike med XHTML in HTML

XHTML

Vsak XHTML dokument se mora začeti z deklaracijo tipa dokumenta (Document

Type Definition).

DOCTYPE deklarira različico XHTML, na kateri temelji dokument. Poznamo tri

različne deklaracije (Strict, Transitional, Frameset).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML

XHTML 1.0 Strict – prepovedana uporaba značk, ki opisujejo izgled spletne strani

XHTML 1.0 Transitional – dovoljena uporaba značk, ki opisujejo izgled spletne strani

XHTML 1.0 Frameset – Dovoljena uporaba „frameov“

XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML

Mala začetnica

Vsi elementi morajo biti zaključeni

Gnezdenje

Atributi se ne smejo krajšat

XHTML

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl">

<head>   <title>naslov dokumenta v naslovni vrstici </title>     </head>     <body>        <!-- telo oz. vsebina -->     </body> </html>

Spletni portali

Kaj je spletni portal?

Zakaj spletni portal?

Prednosti vs. Slabosti

Spletni portali

Poznamo več vrst spletnih portalov, ki se običajno delijo glede na uporabo

CMS (content management system)

LMS (learning management system)

Groupware (collaborative web software)

ECM (enterprise content management)

Bug tracking system

...

CMS

urejanje strani brez znanja označevalnega

jezika HTML.

samostojno spreminjamo besedila, slike in druge elemente spletne strani brez pomoči

Joomla. WordPress. Drupal. TYPO3. e107.org. Serendipity. CMS Made Simple.

Ocportal. ImpressCMS. XOOPS. …

Referati!!!

LMS

Sistem za upravljanje učenja.

Dostavo učnih vsebin, ki omogočajo dostopnost kadarkoli in kjerkoli.

Moodle. Dokeos. aTutor. Sakai. Claroline. Chamilo. eFront. ILIAS. OLAT.

Referati!!!

Groupware

namenjene za pomoč ljudem, ki so vključenih v skupni nalogi, da bi lažje

dosegli svoje cilje.

Zimbra. Collabtive. DotNetNuke. eGroupWare. Group-Office. Jumper 2.0.

Tiki Wiki CMS Groupware.

Referati!!!

Groupware

Čas in stroške upravljanja

Online chat, takojšnje sporočanje, telefonija, videokonference, spletne konference, Data

konference

Souporaba aplikacij, E-pošta, faksiranje, glasovne pošte,

Wikiji, spletno objavljanje, Revizijski nadzor, Grafi/Statistika

Različice dokumenta, delitev dokumentov, dokumentno skladišče, vrednotenje in ankete

ECM

Enterprise content management

Namenjen za lažje poslovanje oz. podjetjem, da lažje poenotijo vse vrste poslovanja.

ECM kontolira več vrst dokumentov (doc, img …) in jih objavlja tudi po drugih „mrežah“ ne

le na spletu.

Z ECM lahko: Ustvarjamo vsebine, beležimo spremembe dokumentov, definiramo potek

dela, iskalnik, kreiranje XML/PDF/HTML, omogoča razširitev, podpora certifikatom,

kontrola dostopa ...

ECM

V ECM običajno najdemo:

Dokumentni sistem (Document Management),

Web Content Management (CMS),

Records Management (Upravljanje z zapisi),

Document Imaging (Digitalizacija dokumentov),

Document-Centric Collaboration (Sodelovanje več članov določenega tim pri določenih

nalogah).

Bugtracking (Issue tracking system)???

Je spletni portal narejen za doseganje boljše kakovosti storitev, ki jih ponujate, saj uporabniki preko portala objavljajo

napake.

Običajno je ta sistem vključen v druge večje sisteme (ECM).

V veliko pomoč je nadzornikom, saj omogoča spremljanje celotno pot

odpravljanje neke napke.

Primer: MantisBT, Bugzilla, Redmine ...

Namestitev spletnega strežnika

BITNAMI, AppServ, XAMPP, LAMP …

Apache, PhP, MySQL (PostgreSQL ...), phpmyadmin, (phppgadmin)

http://localhost

http://127.0.0.1

Apache

Spletni strežnik

Windows / Linux

Razširjenost

MySQL

SUPB

Prosto dostopen

Razširjen v praksi in literaturi

PhP

Skriptni jezik

Na zaslon uporabnika izpisujemo (X)HTML

Podoben C++

Razširjen v praksi

Velika skupnost

<?php phpinfo(); ?>

PhP

Končnica .php

<?php

…

?>

Komentar // ali /* in */

Kombinacija HTML in PhP

Web 2.0

Web 1.0 (1991-2003)

2004 -

Tim O'Reilly

Web as Platform

občinstvo = ustvarjalci

Skupnosti okrog storitev

Web 2.0

Web 2.0

FaceBook, MySpace, YouTube, Gmail, Flickr …

Blog, socialna omrežja, wiki, RSS, AJAX, mobilnost, CSS, template, standardizacija,

dostopnost, modularnost …

LJUDJE, SKUPNOST, JAZ, MI

Oglaševanje za mene (ozek cilj)

MARKETING (prepoznavnost)

Web 2.0

Law of Attraction

Povezovanje ljudi (brezplačno)

FaceBook > Google

Ustrezno filtriranje, kategoriziranje vsebine

Mashup (kobinacija več podatkovnih virov)

formiranja hipne množice okrog poljubnega anonimneža

MafiaWars

Web 2.0

RIA (Rich Internet Applications)

Prenesti zmogljivost namiznih aplikacij na splet

SOA (Services Oriented Architecture)

Razširiti možnosti uporabe

PERSONALIZACIJA