drupal upustvo kreiranje sajta - webdizajn.ict.edu.rs · web tehnologije 1 kreiranje sajta u...

Webtehnologije

Visokaškolastrukovnihstudijazainformacioneikomunikacionetehnologije

WebtehnologijeDrupalCMS–kratkouputstvo

Marko Spasojević inž. Spec. Milena Vesić inž. Spec.

VisokaškolastrukovnihstudijazainformacioneikomunikacionetehnologijeWebtehnologije

1

KreiranjesajtauDrupalu U ovom uputstvu biće prikazano kako kreirati sajt namenjen za online prodaju cipela. Nakon opštih podešavanja kao što su kreiranje baze i informacija o sajtu, potrebno je napraviti sledeću strukturu glavnog navigacionog menija: Početna Forum Akcije Muška obuća

o Proleće o Leto o Jesen o Zima

Ženska obuća o Proleće o Leto o Jesen o zima

Kontakt

Nakon instalacije Drupala početna stranica koja se dobija je prikazana na slici 1.

Slika 1 – Početna stranica nakon instalacije


2

Kreiranje glavnog navigacionog menija se izvršava izborom putanje Structure -> Menus -> Main menu , gde treba izabrati operaciju List links kao bi videli trenutni sadržaj menija koji je prikazan na slici 2.

Slika 2 – Main menu S obzirom da link ka početnoj stranici ne treba da nosi naziv HOME, u produžetku tog linka izabraćemo operaciju edit kako bismo promenili naziv (slika 3).

Slika 3 – Editovanje


3

Slika 4 – Editovanje naziva linka Sem naziva linka u polju Manu link title, ne treba izvršiti nikakve promene. Sledeći korak je kreiranje ostalih linkova u glavnom navigacionom meniju.

Slika 5 – Dodavanje linkova Za dodavanje novog linka potrebno je izabrati Add link iznad liste linkova. Dobija se prikaz kao na slici 6.


4

Slika 6 – Dodavanje linkova Potrebno je navesti naziv linka kao i putanju do stranica koja će se otvoriti prilikom klika na ovaj link (polje Path). S obzirom da Drupal ne omogućava da kreirate link ka stranici koja fizički ne postoji, a polje Path je obavezno za popunjavanje, onda ćete u to polje staviti <front>, koji označava da će vas ovaj linkk odvesti ka početnoj stranici. Kada se budu kreirale stranice, onda će se vrednost polja Path zameniti sa pravom putanjom ka stranici. Postupak kreiranja ostalih linkova je isti, sem za linkove Muška obuća i Ženska obuća gde treba navesti da su linkovi proširivi (Show as expanded), odnosno da sadrže podlinkove (slika 7).


5

Slika 7 – Dodavanje linkova koji sadrže podlinkove Za kreiranje podlinkova (Proleće, Leto, Jesen, Zima) ponoviti postupak koji je rađen i za kreiranje linkova u glavnom meniju (slika 8).


6

Slika 8 – Dodavanje podlinkova S obizirom da linkovi Proleće, Leto, Jesen i Zima pripadaju linku Ženska obuća dovoljno je da grafički prevućete te linkove udesno i time nagovestite hijerarhiju linkova (slika 9).


7

Slika 9 – Podešavanja pripadnosti

Podešavanjeulogaidozvolanasajtu Na sajtu postoje dve uloge:

- Administrator (ima sve dozvole), - Kupac (ostavlja komentare).

Potrebno je izabrati iz menija stavku People i nakon toga izabrati karticu Permissions (slika 10).

Slika 10 –Podešavanje uloga


8

Pored postojeće uloge Aministrator koja je dobijena prilikom instalacije Drupala, treba dodati i ulogu Kupac.

Slika 11 – Dodavanje nove uloge

Na kartici Permissions izabrati stavku Roles. Dodati novu ulogu tako što u polje ispod liste uloga, dodate naziv nove uloge i potvrdite klikom na dugme Add role.

Slika 12 – Dodavanje nove uloge kupac Za podešavanje privilegija potrebno je u produžetku naziva uloge izabrati operaciju Edit permissions (slika 13 ).

Slika 13 – Podešavanje privilegija


9

S obzirom da je navedeno da Kupac može da ostavlja komentare, za modul Comments treba čekirati i snimiti sledeće stavke (slika 14):

Slika 14 – Podešavanje privilegija za komentare

Ubacivanjeteme Ukoliko želite da promenite dizajn sajta potrebno je preuzeti neku od tema sa zvaničnog sajta Drupala - https://drupal.org/project/themes i podesiti verziju Drupala koja se koristi.

Slika 15 – Preuzimanje teme

Prilikom preuzimanja teme voditi računa da tema podržava Drop Down Menu zbog organizacije glavnog navigacionog menija.


10

Slika 16 – Preuzimanje teme koja podržava padajući meni Bez obzira što je navedeno prilikom kreiranje linkova da su linkovi Muška obuća i Ženska obuća proširivi, kada se mišem pređe preko tih linkova, njihovi podlinkovi neće biti prikazani zato što default tema koja se koristi ne podržava tu opciju.

Slika 17 – Preuzimanje teme koja podržava padajući meni Na slici 17 je prikazan izgled menija pre instaliranja nove teme, dok je na slici 18b prikazan izgled menija nakon instaliranja nove teme i podešavanja za podržavanje padajućeg menija (slika 18a).


11

Slika 18a – Podešavanje padajućeg menija

Slika 18b – Izgled novog menija


12

Kontaktforma Na stranici Kontakt treba biti postavljena kontakt forma. U Drupalu postoji ugrađen modul Contact koji treba omogućiti i povezati sa stranicom. Iz menija izabrati stavku Modules, zatim u listi modula pronaći modul Contact, čekirati ga i snimiti.

Slika 19 – Instalacija modula Da biste videli izgled kontakt forme potrebno je da u address bar-u gađate stranicu koja je već definisana ovim modulom http://localhost/cipelica/contact.

Slika 20 – Izgled kontakt forme


13

Sledeći korak je povezivanje ove stranice sa linkom Kontakt koji je prethodno definisan u glavnom navigacionom meniju. S obzirom da je na početku definisano da svaki link vodi ka početnoj stranici, sada je potrebno promeniti putanju linka Kontakt. Stranica koja treba da se otvori izborom već pmenutog linka je data na slici 20. Pristupiti podešavanjima za meni, i za link Kontakt izabrati opciju Edit. Promeniti vrednost polja Path. Treba zameniti postojeću vrednost <front> sa nazivom stranice contact (slika 21).

Slika 21 – Promena putanje

Kategorizacija Administrator ima mogućnost da dodaje nove proizvode na stranici. Prilikom dodavanja treba izabrati kojoj kategoriji pripada dati proizvod. Proizvod može da pripada u više kategorija i podkategorija, s toga je potrebno napraviti listu sa ponuđenim kategorijama i podkategorijama. Kategorizacija se realizuje pomoću rečnika (taxonomy). Iz menija izabrati stavku Structure->Taxonomy->Add vocabulary.

Slika 22 – Dodavanje rečnika


14

Upisati naziv rečnika i opcioni opis.

Slika 23 – Kreiranje rečnika Sledeći korak je dodavanje pojmova (term) u kreirani rečnik izborom opcije Add terms.

Slika 24 – Dodavanje pojmova Kao pojmove treba dodati kategorije Muška obuća i Ženska obuća i podkategorije Proleće, Leto, Jesen, Zima za obe kategorije. Prilikom dodavanja pojmova, definisati naziv pojma, opcioni opis, i u Relations izabrati kome pripada taj pojam. Kategorije Muška obuća i Ženska obuća pripadaju root-u, dok podkategorije pripadaju pomenutim kategorijama.


15

Slika 25 – Dodavanje pojma (kategorije)

Prilikom kreiranja pojma koji predstavlja podkategoriju potrebno je samo obeležiti kojoj kategoriji pripada (slika 26).


16

Slika 26 – Dodavanje pojma (podkategorije)

Nakon dodavanja svih pojmova, rečnik polovi treba da izgleda kao na slici 27.


17

Slika 27 – Izgled rečnika

Dodavanjenovogtipasadržaja Prilikom postavljanja proizvoda (cipela), potrebno je uneti naziv, opis, cenu, sliku i kategoriju odnosno podkategoriju tog proizvoda. Izborom opcije Add content imate mogućnost da izaberete tip sadržaja Article i Basic page. Nijedan od ova dva tipa sadržaja nema sve potrebne stavke za unos koju su iznad navedene, s toga treba kreirati nov tip sadržaja koji odgovara potrebama za unos proizvoda. Iz menija izabrati Structure->Content types->Add content type.


18

Slika 28 – Dodavanje novog tipa sadržaja Definisati naziv i opcioni opis tipa sadržaja.

Slika 29 – Dodavanje novog tipa sadržaja Zatim podesiti naziv labele title i ostale parametre.


19

Slika 30a – Dodavanje novog tipa sadržaja (podešavanje parametara)

Slika 30b – Dodavanje novog tipa sadržaja (podešavanje parametara)


20

Slika 30c – Dodavanje novog tipa sadržaja (podešavanje parametara)

Slika 30d – Dodavanje novog tipa sadržaja (podešavanje parametara)


21

Slika 30e – Dodavanje novog tipa sadržaja (podešavanje parametara) Dodavanje polja od kojih će se sastojati ovaj tip sadržaja. Izabrati operaciju Manage fields.

Slika 31 – Dodavanje polja Pored postojećih polja za naziv i opis (body) proizvoda treba dodati polje za cenu, sliku i kategorizaciju proizvoda. Prvo preimenovati Body u Opis, izborom operacije Edit za datu stavku. Pored naziva polja, obeležiti i da je polje obavezno čekiranjem opcije Required field. Number of values je polje kojim se dfiniše koliko će se ovakvih polja pojaviti prilikom unosa proizvoda, za opis je dovoljno jedno polje.


22

Slika 32 – Podešavanja polja Opis

Sledeće polje za unos je polje za cenu. U stavku Add new field uneti naziv polja i izabrati tip polja Field type, nakon toga snimiti unos i podesiti prametre.


23

Slika 33 – Dodavanje novog polja Podesiti maksimalan broj karaktera za unos.

Slika 34a – Podešavanje parametara za polje Cena


24

Slika 34b – Podešavanje parametara za polje Cena

Sledeće polje je slika. Uneti naziv polja, i izabrati Image za tip polja.


25

Slika 35 – Dodavanje polja za sliku Sledeći korak je dodavanje default slike, u ovom slučaju preći na sledeći korak.

Slika 36a – Podešavanje parametara za sliku U sledećem koraku podesiti tipove formata slika koji mogu da se unesu, maksimalne i minimalne dimenzije slika, kao i izgled slike prilikom upload-ovanja.


26

Slika 36b – Podešavanje parametara za sliku Broj slika za unos može biti neograničen, jer više slika može da pripada jednoj kategoriji.


27

Slika 36b – Podešavanje parametara za sliku Sledeće polje za unos su kategorije koje smo prethodno definisali rečnikom i pojmovima. Prilikom dodavanja ovog polja obavezno izabrati da je tip polja Term reference i da će biti prikazano u vidu liste (Select list).

Slika 37 – Dodavanje polja za kategorije Izabrati rečnik na koji se odnosi kategorizacija.


28

Slika 38a – Podešavanje parametara za kategorije


29

Slika 38b – Podešavanje parametara za kategorije

Modulpathautoitoken–automatskogenerisanjeputanje Prilikom kreiranja stranice, bilo kog tipa sadržaja, automatski se kreira i putanja do te stranice koja je u formatu node/broj_stranice. Kako bi kreirali user-friendly nazive stranice, možemo uraditi ručno dodavanjem URL alias-a priliko kreiranja strane, ili instaliranjem modula pathauto i token (ne mogu se instalirati jedan bez drugog), koji će na osnovu šablona koji zadamo automatski da generišu user-friendly naziv strane. Nakon instaliranja modula, izabrati stavku Configuration->URL aliases iz glavnog menija.


30

Slika 39 – URL aliases Nakon toga izabrati karticu Patterns na kojoj ćemo definisati šablone za URL.

Slika 40 – Definisanje šablona za url Na izabranoj kartici se definišu šabloni za svaki tip sadržaja kao i za kategorizaciju definisanu u Taxonomy-ji, uz pomoć uzoraka datih u Replacement patterns. Na primer, sve stranice tipa article, imaće unoformni url artikal/naziv_strane, gde se naziv strane dobija iz taga title svake kreirane strane zahvaljujući pattern-u [node:title].


31

Slika 40 – Definisanje šablona za url Definisanje url-a za kategorizaciju.

Slika 41 – Definisanje šablona za url (kategorizacija) Sa uzorkom [term:pattern] preuzima se naziv kategorije, dok se sa uzorkom [term:name] preuzima naziv podkategorije. Sledeći korak je da u rečniku Polovi podesimo da se URL automatski generiše nakon podešavanja šablona.


32

Structure->Taxonomy->Polovi->List terms->Ženska obuća

Slika 42 – Izgled putanje pre modifikacije

Structure->Taxonomy->Polovi->List terms->Ženska obuća->Edit

Slika 43 – Modifikacija kreiranog pojma


33

Slika 44 – Modifikacija kreiranog pojma

Slika 45 – Izgled putanje nakon modifikacije

Za pojmove koji su podkategorije nije potrebno da se edituje url, automatski će da se povuće na osnovu promene u kategoriji.


34

Slika 46 – Izgled putanje nakon modifikacije (podkategorije)

Unosproizvoda Za unos novog proizvoda izabrati stavku Add content->Proizvod.


35

Slika 47 – Unos novog proizvoda Nakon što se popune svi podaci o proizvodu, snimiti podatke, čime se automatski kreira nova stranica sa user-friendly nazivom strane.


36

Slika 48 – Putanja i strana

Redosled polja se podešava na opciji Manage display za izabrani tip sadržaja. Structure->Content types->Proizvod->Manage display. Nakon svake izmene, snimiti. Na ovoj opciji možete da podesite poziciju labele i samog sadržaja.

Slika 49 – Redosled polja prilikom prikaza stranice


37

Nakon podešavanja stranica će izgledati kao na slici 50.

Slika 50 – Novi izgled strane

Podešavanje stila za prikaz slike

Ukoliko želite da podesite prikaz slika, odnosno da sami definišete neki stil, potrebno je da izaberete Image styles->Add style stavku koja se nalazi na linku Configuration.


38

Slika 51 – Dodavanje stila za prikaz slike

Slika 52 – Naziv stila Nakon podešavanja naziva stila, bira se efekat koji će se primeniti na ovom stilu. Sa leve strane je prikazana originalna slika, dok je sa desne strane prikaz slike sa izabranim efektom. Za ovaj primer izabrati efekat Scale i podesiti parametre na 150x150.


39

Slika 53 – Efekat stila Vratiti se na stavku Manage dipslay za tip sadržaja Proizvod i primetniti definisan stil na sliku.

Slika 54 – Primena stila

Slika 55 – Primena stila Nakon izbora stila moja_slika izabrati dugme Update.


40

Slika 56 – Izgled nakon promene

Slika 57 – Novi izgled slike nakon primene stila

Povezivanjestranasalinkovimauglavnommeniju Nakon kreiranja stranica unosom proizvdoa potrebno je u promeniti putanju za linkove u glavnom navigacionom meniju. Npr., za link Ženska obuća promeniti polje Path koje je imalo vrednost <front> u obuca/ženska-obuća.


41

Slika 58 – Promena putanje Postupak ponoviti i kod linka Muška obuća (obuca/Muška-obuća), a kod linkova u padajućem meniju dodati još podkategoriju.

Slika 59 – Promena putanje (podkategorije)

drupal upustvo kreiranje sajta - webdizajn.ict.edu.rs · web tehnologije 1 kreiranje sajta u...

Documents