Računarski praktikum 2 - www

NAPOMENA: Ove vježbe su izuzetno bitne za oba kolokvija, jer ćete rješenja zadataka predavati tako što ćete ih objaviti na svojoj web stranici, a zatim ćete na neku adresu e-mailom poslati link na stranicu s rješenjem zadatka!

  1. zadatak: Pokretanje FrontPagea
    Pokrenite FrontPage i zatvorite sve dokumente koje on automatski otvori:
    File > Close Site (ako je omogućeno) i File > Close
  2. zadatak: Kreiranje novog web sitea
    1. Izaberite: File > New...
    2. FrontPage će s desne strane otvoriti stupac u kojem će ponuditi opcije za kreiranje novog sitea. U sekciji "New Web Site" izaberite "One page Web Site..."
    3. U prozoru koji će se otvoriti izaberite (opet) "One Page Web Site"
    4. U desnoj strani prozora, pod "Specify the location of the new Web site:" upisati direktorij u koji želite snimiti svoj site; npr. C:\share\rp2-fp
  3. zadatak: Dodavanje "vanjske" datoteke
    Pod "vanjskom" datotekom smatramo sve datoteke koje nisu tipično "webovske"; npr. Word DOC, Excel XLS,... ovisno o kontekstu, može to biti čak i Acrobat PDF!
    Datoteke tipične za web su HTML, JPEG i GIF. Da bi dodali "vanjski" file, otvorite u Windows Exploreru direktorij u kojem se taj file nalazi, te ga povucite (drag'n'dropom) u najgornji direktorij projekta u FrontPageu

    Primijetite da se ovo radi na isti način na koji drag'n'dropom možete premještati/kopirati datoteke!
    Smjestite u svoj projekt DOC i XLS datoteke s prošlih vježbi.
    Ovime NE dodajete datoteke na Internet, nego ih samo ugrađujete u svoj projekt (dakle, na razini FrontPagea)!
  4. zadatak: Slanje datoteka na web site (tzv. upload)
    Da bi objavili datoteku na webu, potrebno ju je pohraniti u specijalni direktorij public_html u vašem home-direktoriju na Studentu. Datoteke možete slati na razne načine:
    1. Direktnom kopiranjem - funkcionira samo iz praktikuma!
      Vaš direktorij dostupan Vam je s Desktopa (piše "Home na studentu", a označen je i kao disk X:.
      1. Priprema (treba napraviti samo jednom):
        1. Otvorite "Home na studentu"
        2. Kreirajte direktorij public_html (točno kako piše: sva slova mala i bez razmaka!)
        3. Kliknite desnim gumbom miša na public_html i izaberite "Properties", te u tabu "Security" kliknite na gumb "Advanced". Dozvole pristupa moraju biti kao na slici:

          Važne dozvole pristupa su one koje se odnose na grupu "Everyone". Ako one nisu podešene na type "Allow" i permission "Read & Execute", označite taj redak i kliknite na "Edit", te uključite opcije kao na slici:

          Na identičan način podešavate i prava pristupa za sve direktorije koje kreirate unutar public_html-a.
      2. Kopiranje weba: Datoteke i direktorije svoje web stranice kopirate na jednak način na koji to inače radite pod Windowsima. Jedini je dodatak podešavanja prava pristupa, što se radi na identični način kao i kod direktorija.
        Važno! Na webu se vide samo one datoteke i direktoriji koji se nalaze u direktoriju public_html! Njih trebate ponovno kopirati nakon svakog editiranja (osim ako editirate upravo one datoteke koje se nalaze na samom Studentu, što nije preporučljivo).
      Napomena: Raspored datoteka i direktorija u public_html mora biti identičan rasporedu koji su te datoteke imale dok ste ih editirali u FrontPageu.
    2. Direktno iz FrontPagea - podrška se jako razlikuje od verzije do verzije, pa ju ovdje nećemo obrađivati
    3. FTPom - standardni način koji funkcionira gotovo uvijek; mana mu je nesigurnost (podaci, zajedno sa šifrom korisnika, Internetom "putuju" nekriptirani!)
    4. SCPom - tzv. "secure copy": slično FTPu, ali puno sigurnije, no još uvijek ne tako rašireno i jednostavno kao FTP
    5. ...
    Mi ćemo se poslužiti WinSCP-om.(na kompjuterima u praktikumu 3 je instalirana verzija WinSCP382) . Prednosti pred FTP-om su zadrzavanje grafičkog sučelja, te ravnopravnost local host-a i remote host-a, kao i ravnopravnost svih file-ova koje kopiramo s local directory-ja na remote directory.
    1. Spajanje:
      1. Otvorite WinSCP382. Ukoliko ga nemate na desktopu, pronaći ćete te ga u direktoriju My network places, u pod-direktoriju Public on Hal. Po potrebi ga stavite i na desktop.
      2. U polje "Host Name" upišite adresu:  student (ukoliko se spajate iznutra, npr. iz praktikuma), odnosno student.math.hr  ili student.studenti.math.hr (za spajanje izvana, npr. od kuće)
      3. U polje "Port number" upišite 22
      4. U polje "User name" upišite vaše korisničko ime na Studentu; ono isto koje koristite u e-mail adresi. Za početak, u polje Password nemojte upisivati vašu lozinku.
      5. NIKAKO NEMOJTE PRITISKATI GUMB "SAVE"!!!
        Snimljeni password omogućuje drugima da se spoje pod vašim imenom, što je strogo zabranjeno jer može dovesti do ozbiljnih problema (gubitka vaših datoteka, netko vam može čitati poštu i sl.)
      6. U polju "Protocol" odaberite srednju opciju "SFTP(allow SCP fallback)".
        Pritisnite tipku  <Login>.
        WinSCP će se pokušati spojiti na Student, što može potrajati od nekoliko sekundi do minutu-dvije. Ako uspješno identificira remote host-a, tražit će vaš password.


     

    7. Ako se uspješno prijavite, vidjet ćete sadržaj svog korisničkog direktorija na Studentu na desnoj strani prozora. Sada mu možete pristupati kao i svakom drugom direktoriju na računalu (iako se ovaj fizički nalazi na Studentu, a ne na vašem računalu!) Na lijevoj strani prozora nalazi se vaš lokalni direktorij na stroju na kojem radite. U WinSCP-u obje konfiguracije su potpuno ravnopravne. Sve što možete raditi na lokalnom direktoriju, možete i na remote direktoriju na studentu. Na gornjoj slici aktivan je lokalni direktorij na C disku, što vidimo iz jarke plave boje, dok je blijeda plava boja oznaka neaktivne polovice prozora, koja je na gornjem primjeru home direktorij ("andrijar") na studentu. 

     

    2. Podešavanje opcija.  Materijali koji slijede su rađeni uz odabir "Nortorn Commander Interface" stila u izborniku "Preferences". Da biste provjerili da li vaše sučelje ima podešenu istu opciju, kliknite lijevim gumbom na mišu na gumb u obliku "crnog cvijetića" u lijevom gornjem kutu vašeg WinSCP sučelja (odmah ispod "Local"). Time ćete otvoriti izbornik "Preferences".

    Nakon toga odaberite opciju "Interface". Tada biste trebali imati podešene opcije kao na donjoj slici.

     

    Također, važna je i opcija "Transfer". Vaše opcije bi trebale biti podešene kao dolje. Ukoliko nije tako, podesite ih, inače nećete moći reproducirati sve naredbe iz WinSCP-a koje su prikazane u ovim materijalima.

    3. Listanje direktorija. Na sljedećih nekoliko slika možete vidjeti kako listati direktorije u WinSCP-u(zapravo potpuno isto kao da na lokalnom disku listate windows explorerom, s time da možete najnormalnije, unutar WinSCP-a, listati i remote directory-je na studentu). Ako želite učiniti aktivnim remote host student, samo kliknite na blijedu plavu prugu na lijevom dijelu prozora, koja će poprimiti jarku plavu boju.  

    4. Kopiranje: kopiranje file-ova i-ili direktorija obavljate kao na slikama dolje preko drag-and-drop-a: mišem povlačite file s njegove trenutne lokacije na željenu lokaciju.

    Na gornjim slikama smo prikazali kako izgleda prebacivanje file-a s Bethovenovom simfonijom s local directory-ja na remote directory andrijar na studentu. Sami odaberite neki file s lokalnog diska  i prebacite ga na student. Prebacivanje možete obaviti i u suprotnom smjeru. Na primjer, na donjim slikama prikazano je prebacivanje foldera ana, vježbe-pr2 sa studenta na po volji odabrani lokalni direktorij, koji se može i  razlikovati od posljednjeg aktivnog direktorija s lijeve strane prozora WinSCP-a. 

     

    5. Kreiranje direktorija:
    Sada možete kreirati direktorij onako kako smo to radili na trećim vježbama u prvom semestru (zadatak 2). Naravno, ovdje je važno da direktorij možemo kreirati ne samo u C:, nego u student.math.hr.  Na donjim slikama možete pogledati operacije kreiranja fileova i direktorija. Ne zaboravite da se prilikom kreiranja na donjoj slici podrazumijeva će se novi direktorij nalaziti u aktivnom prozoru, na  lokaciji koju ste "napustili". Kasnije ćemo pokazati kako možete sami odabirati lokaciju u hijerarhiji direktorija(ako ste na studentu, postojat će neka ograničenja, o tome više u koraku 2.).

    6.Ovlaštenja (prava) za rad s file-ovima i datotekama:  Na studentu ne možete s jednakim pravima pristupati svim direktorijima i datotekama. Prava dijelimo na 3 vrste (čitanje, pisanje, izvšavanje-read, write, execute), dok su prava odredjena do na tri skupine: vlasnik(owner), grupa(group) i ostali(others). Vlasnik datoteke može mijenjati konfiguraciju ovlaštenja po volji. Na primjer, na gornjoj slici 4 datoteke imaju podešena ovlaštenja tako da ih jedino vlasnik može čitati ili pisati po njima, dok nitko drugi nema nikakva prava. To se vidi iz stupca "Rights", gdje je oznaka rw-------. od ukupno 9 mjesta po tri redom se odnose na prava vlasnika(read,write,execute), prava grupe(read,write,execute) i prava ostalih(read,write,execute). Na primjer, oznaka r--r--r-- bi značila da svi imaju pravo čitati datoteku, ali nitko ne može ni pisati ni izvršavati, dok bi oznaka rwxrw-rw- značila da vlasnik može sve, dok grupa i ostali mogu samo čitati i pisati. Više o tome na donjim slikama, gdje pokušavamo pristupiti sadržaju direktoija Prof. Igaly-ja na studentu, za što nemamo ovlaštenje:

     Sada ćemo kreirati vlastiti file proba.txt, i pokušati ga snimiti u root direktorij na studentu.

    Pošto se nalazimo u direktoriju root na studentu u kojem nemamo pravo pisanja, tj. kreiranja datoteka, nismo uspjeli sacuvati datoteku proba.txt. No, ukoliko se nalazimo u svom direktoriju na studentu, imamo pravo pisanja, pa ćemo uspješno stvoriti datoteu proba3 i spremiti je unutar direktorija na studentu(u našem primjeru je to direktorij andrijar):

    7. Promjena ovlaštenja: Trenutno datoteka proba3 ima podešena ovlaštenja tako da vlasnik može čitati i pisati. No vlasnik može u svakom trenutku promijeniti ta ovlaštenja kako želi. To radimo tako da kliknemo na datoteku proba3, odaberemo Properties, na prozoru koji se otvori dodamo "kvačice" u kućice koje odgovaraju ovlaštenjima koje želimo dati.

    Na gornjem primjeru smo dozvolili vlasniku i grupi čitanje, pisanje i izvršavanje datoteke proba3. Ako želimo provjeriti da li je promjena ovlaštenja uspjela, ponovno pogledamo u stupac "Rights" na prozoru

    u WinSCP-u. Uočavamo da se ranija oznaka rw------- promijenila u rxwrwx---, dakle ovlaštenja smo uspješno promijenili. Primjetite da se i broj u kućici kod oznake octal otakođer promijenio(najprije j bio 0660, a onda 0770), i taj broj zapravo jednoznačno opisuje dana ovlaštenja. Sve rečeno o ovlaštenjima vrijedi i za direktorije. Za vježbu sami odaberite dvije datoteke i dva direktorija,  promijenite im ovlaštenja, te se uvjerite da li je promjena uspjela.

     

    Zadatak. U dogovoru sa kolegom koji sjedi do vas u praktikumu, privremeno promijenite ovlaštenja za pristup vašem home direktoriju na studentu, tako da dopustite čitavoj grupi čitanje, pisanje, i izvršavanje.Isto treba načiniti i vaš susjed. Uvjerite se da možete prisupati direktoriju vašeg susjeda bez ograničenja. Također, ukoliko u direktoriju vašeg susjeda ima datoteka koje dopuštaju da ih grupa čita ili piše po njima, moći čete i to načiniti. Isto vrijedi i za vašeh susjeda. Po završetku ovog zadatka, oduzmite ta ovlaštenja, jer će inače svi studenti s loginom na studentu moći "vršljati" po vašem home direktoriju. Dakle, u nakon što završite s ovim zadatkom, vaš home direktorij bi trebao imati ovlaštenja rwx-----x.

    8.Slanje/skidanje datoteke na web/s weba:

        1. Prvo će nas zanimati kreiranje direktorija na studentu s imenom public_html. Ukoliko "uđete" u taj direktorij; on trebao biti prazan.

    2. Ovlaštenja za rad s direktorijem public_html podesite kao na slici dolje. Tako će svi korisnici moći "vidjeti" sadržaj vaše web stranice.

    3. Datoteke koje želite objaviti na vašoj www stranici trebate "staviti" u direktorij public_html na studentu. Na donjem primjeru odabiremo te file-ove iz direktorija fileovi-za-web na lokalnom disku.

    4. Da bi drugi korisnici koji gledaju vašu web stranicu zaista mogli čitati file-ove (tj. otvoriti ih) koje ste stavili na web, ti fileovi moraju imati zadovoljavajuće podešena prava pristupa.

    Konkretno, u našem primjeru želimo da svi mogu čitati file doktorat5.pdf s web-a. Zato podesimo ovlaštenja kao dolje:

    5. Također, postojat će i file-ovi za koje ne želimo da ih baš svi mogu skidati s web-a. Recimo za exe file irfan viewer kao dolje:

    9. Prestanak rada s WinSCP-om:

    10.   U Internet Exploreru otvorite stranicu: http://web.studenti.math.hr/~login/
    Kao i do sada, umjesto login napišite svoje korisničko ime.

    1. Ukoliko su pogrešno podešena prava pristupa,
      trebala bi se pojaviti stranica koja će izgledati otprilike ovako:

      Forbidden

      You don't have permission to access /~vsego/ on this server.


      Apache/1.3.28 Server at web.studenti.math.hr Port 80
      To znači da posjetitelji i dalje ne mogu vidjeti vašu stranicu. Razlog tome je što još niste eksplicitno SVIMA dozvolili čitanje vaše stranice.
      1. Vratite se (u WinSCP-u) u student.math.hr
      2. U popisu datoteka (lijevi podprozor) desnim gumbom miša kliknite na public_html i izaberite "Properties" te dajte ovlaštenja za sve korisnike u stupcima "Read"i "Execute".
      3. Potvrdite promjenu klikom na "Ok". 
      4. Provjera web stranice: Ponovno otvorite svoju stranicu u Internet Exploreru. Ako ju već negdje imate otvorenu, možete ju ponovno osvježiti klikom na "Refresh".
        Ako i dalje dobijate poruku o greški, obratite se asistentu/asistentici!
        Trebali biste dobiti popis datoteka koje sadrži vaš publi_html direktorij. Popis bi trebao sadržavati onu datoteku koju ste poslali na Student. Kliknite na tu datoteku. Ako ju Internet Explorer uspješno učita, uspješno ste riješili zadatak. Ako dođe do neke greške, zamolite za pomoć!

      5. Pokušajte pristupiti "skrivenoj" datoteci na vašoj web stranici. Ukoliko niste pravilno podesili prava pristupa, dobit ćete poruku kao dolje: 

       

      6. Datoteku s pravilno podešenim pravima pristupa moći ćete otvoriti.

    7. (Nije obavezno!) Ovlaštenja svih datoteka možete vidjeti u lijevom prozoru WinSCP-a, ali i na Studentu  (logirajući se preko telnet-a ili preko PuTTY-ja). Da uđete u public_html direktorij, napišite cd public_html ("change directory to public_html"), pritisnite enter, i preselit ćete se iz home direktorija u public_html direktorij. Preko naredbe "ls -al"  možete usporediti prava pristupa koje ste dali datoteci koju niste uspjeli otvoriti s datotekom koju ste uspješno otvorili.

    U gornjem primjeru datoteka je bila exe-tipa, pa bi trebalo označtiti "execute" kućicu uz "all users". Na taj način ste svima dali mogućnost za skidanje i aktiviranje te datoteke.

    8. Ukoliko želite, možete dopustiti korištenje exe datoteke cijeloj grupi:

    Tada bi i kolega do vas trebao moći otvoriti vašu stranicu i skinuti irfan viewer.

    U načelu, sve ono što se nalazi u direktoriju public_html treba imati ovlaštenja bez prevelikih restrikcija, da bi korisnici mogli pogledati ili skinuti ono što imate na vašoj web stranici. Recimo, prirodno je staviti  (najmanje) sljedeća ovlaštenja:  rw-r--r-- za file-ove , i rwxr-xr-x za direktorije.

  5. zadatak: Pošaljite i drugu datoteku na Student, u direktorij public_html, tako da tamo budu i jedna Wordova DOC datoteka i jedna excelova XLS datoteka
  6. zadatak: Indeksi
    Do sada ste uspješno na Internetu objavili dvije datoteke, no pregledom "stranice" dobijate samo popis datoteka u direktoriju. Da bi se popis "sakrio" i umjesto njega pojavila stranica, potrebno je u direktorij snimiti datoteku s imenom index.html ili index.htm.
    Vratite se u FrontPage i tamo otvorite datoteku index.htm (ili kreirajte novu). Stavite nekakav naslov i ponešto teksta, npr. ovako:

    Moja prva stranica

    Ovo je moja prva web stranica...

    Ovdje će jednog dana pisati nešto strašno pametno, no za sada nemam inspiracije...

    Pronađite datoteku index.htm na disku i prebacite ju na Student (u direktorij public_html), kako ste to napravili s DOC i XLS datotekama u prethodna dva zadatka.
    Ponovno učitajte svoju stranicu; umjesto popisa datoteka trebali biste vidjeti svoju stranicu!
    Ako ima problema, pozovite asistenta/asistenticu!
  7. zadatak: Dodavanje linkova na lokalne dokumente
    Stranica je praktična jer ju je moguće uređivati po volji, no ona je i "sakrila" datoteke. Tko ne zna da su one tamo, ne može ih učitati.
    Dodajte link na DOC datoteku koju ste snimili na Student:
    1. Kliknite na Insert i izaberite Hyperlink.
    2. Upišite ime datoteke (zajedno s ekstenzijom .doc) u polje "URL:" i kliknite "Ok".
    Na isti način dodajte i link na XLS datoteku. Između tih linkova napišite nešto teksta, da baš ne ostanu slijepljeni.
  8. zadatak: Ažuriranje stranice
    Ponovno učitajte svoju stranicu. Stranica se nije promijenila! Zašto?
    Naime, linkove ste dodali u datoteku index.htm koja se nalazi na vašem lokalno disku (na vašem računalu), što nema veze s kopijom na studentu!
    => Nakon SVAKE PROMJENE stranicu je potrebno ponovno kopirati na Student, u direktorij public_html!
    Ponovno prebacite datoteku index.htm na Student, te ju ponovno učitajte.
  9. zadatak: Dodavanje linkova na druge stranice
    Na kraj stranice dodajte tri linka na svoje omiljene stranice. To napravite isto kao i za dokumente (u zadatku 7), samo pod "URL" trebate upisati punu adresu stranice (npr. http://degiorgi.math.hr/forum/).
    Tako promijenjenu stranicu snimite na Studentu i provjerite rezultat.

Kućni uradak: Kako idući tjedan nema vježbi (zbog ispitnog roka), u ova dva tjedna do idućih vježbi uredite svoju stranicu. Pronađite kako se mijenjaju boja pozadine, teksta i linkova. Zatim složite stranicu tako da smisleno izgleda i da linkovi koje smo dodali budu logično objašnjeni. Ako naiđete na probleme, možete se obratiti demonstratorima ili asistentu/asistentici.
Na idućim vježbama ćemo smatrati da ste uredili svoju stranicu, što ulazi i u kolokvij!