uvod u veb dizajn wordpress 1informatika.ff.uns.ac.rs/.../uploads/2017/05/uvod_u_wp1.pdf ·...

Uvod u veb dizajn WORDPRESS – 1

Karlo Bala

dr Zoltan Geler

2/47

Sadržaj

1. Osnovni pojmovi

2. Instalacija WordPress-a

3. Administratorski panel - DashBoard

3/47

Šta je WordPress (WP)?

WP je aplikacija koja se “instalira” na veb serveru

Služi za brzo i lako kreiranje i održavanje veb sajtova bez naprednog poznavanja veb tehnologija (HTML, CSS, JavaScript, jQuery, PHP, MySQL)

Izvorno je zamišljen kao alat za blogovanje Blog (VebLog) je niz hronološki organizovanih unosa

teksta koji su najčešće sortirani od najnovijih ka najstarijima

Aplikacije poput WordPress-a nose zajednički naziv CMS - Content Management System (sistem za upravljanje sadržajem)

4/47

Šta je CMS i koje su osnovne osobine?

Softver koji omogućava pravljenje, čuvanje i prikazivanje različitih sadržaja (teksta, slika, audio i video zapisa itd.)

WCMS – CMS koji omogućava upravljanje sadržajima na World Wide Web-u

Dva interfejsa (tačke komunikacije) WCSM-a

Korisnički - prikaz sadržaja

Administratorski - upravljanje sadržajem

Odvojenost sadržaja i interfejsa

Sadržaj se čuva u bazi podataka

Interfejs se čuva u posebnim fajlovima

5/47

Primeri interfejsa

Korisnički Administratorski

6/47

Napredne osobine WCMS-a

Sistem šablona za lakše menjanje izgleda i rasporeda i korisničkog i administratorskog interfejsa (teme)

Online uređivanje teksta pomoću WYSIWYG (What You See Is What You Get) editora

Modularan sistem - sastoji se iz niza manjih celina poput galerija slika, videa i slično

Upravljanje slikama i fajlovima ostalih formata iz administratorskog interfejsa

7/47

Poznati WCMS-ovi

Besplatni Komercijalni

Wordpress

Drupal

Joomla!

Magento

CraftCMS

ExpressionEngine

Sitecore

Kentico

Oko 27% svih veb sajtova na Internetu pravljeno je koristeći WordPress

Od svih veb sajtova pravljenih pomoću CMS-a, skoro 60% su pravljeni u WordPress-u

8/47

Ugledni korisnici WordPress-a

wordpress.com/notable-users

9/47

Preuzimanje WP-a, tema i dodataka

wordpress.org

10/47

Hostovanje sajta na WP serveru

wordpress.com

11/47

WP zahtevi na serveru

Istaliran “LAMP (WAMP) stack”

Linux (Windows) – operativni sistem

Apache – veb server

MySQL – sistem za upravljanje bazama podataka

PHP – skript jezik

XAMPP

Besplatna (laka) veb server platforma

Apache, MariaDB (verzija MySQL), PHP, Perl

Najčešće se koristi za lokalno testiranje veb sajtova i veb aplikacija

www.apachefriends.org

12/47

Baze podataka

Kolekcija međusobno povezanih podataka

Omogućava efikasno čuvanje, brzo pretraživanje i ažuriranje velikih količina podataka

Dizajneri Kreiraju baze na osnovu potreba korisnika

Korisnici Unose, ažuriraju i pretražuju podatke

Administratori (dba) Održavaju (pristup korisnicima, oporavak baze, itd.)

Sistem za upravljanje bazama podataka DBMS – Database Management System

13/47

Skriptovi (Scrypt)

Skript je programski kod pisan u skript jeziku koji se izvršava unutar nekog programa

Veb skriptovi – skriptovi ugrađeni u veb stranice, u HTML kod

Skript jezici: PHP, Perl, JavaScript, Python

Dve Vrste veb skriptova

Izvršavaju se na serveru, npr. PHP (na slici)

Izvršavaju se na klijentu, npr. JavaScript

14/47

Podela jezika

Jezici za označavanje:

HTML, LaTeX

Skript jezici:

PHP, JavaScript, Python

Programski jezici:

Java, Delphi, Python

Koriste se za pravljenje samostalnih aplikacija

15/47

WP zahtevi na klijentu

Pregledač (browser)

HTML

CSS

JavaScript

Jezik za pisanje skriptova koji se izvršavaju na klijentu

16/47

Upravljanje veb serverom

Podrazumeva upravljanje

Fajlovima i folderima

Bazama podataka

Domenima

Statistikama

Elektronskom poštom

Programi za upravljanje

Besplatni: ZPanel, VestaCP, Webmin

Komercijalni: CPanel, Plesk, DirectAdmin

17/47

Primer programa CPanel

18/47

Sadržaj

1. Osnovni pojmovi

2. Instalacija WordPress-a

3. Administratorski panel - DashBoard

19/47

Šema komunikacije WP

Baza podataka Korisnik baze

WordPress

20/47

Instalacija WP na udaljenom serveru

Zakup domena i prostora na (komercijalnom) serveru

Telekom, EUnet, Orion,...

Priprema servera (CPanel)

1. Kreiranje baze

2. Kreiranje korisnika baze (nema veze sa administratorom budućeg sajta)

3. Povezivanje korisnika i baze

4. Kopiranje WP u folder na serveru

5. Podešavanje parametara

6. Pokretanje instalacije

21/47

Kreiranje baze

Ulogovati se na CPanel

Kliknuti na ikonu MySQL Databases

Uneti naziv baze (levi deo naziva određuje server provajder) i kliknuti na dugme Create Database

22/47

Kreiranje korisnika

Uneti naziv korisnika baze (levi deo određuje server provajder)

Uneti sopstvenu ili odabrati (preporučeno) generičku šifru klikom na Password Generator

Sačuvati šifru za potrebe konfigurisanja WP

Kliknuti na dugme Create a User

23/47

Povezivanje baze i korisnika

U listi User odabrati korisnika, a u listi Database odabrati bazu

Kliknuti na dugme Add

Pristup bazi uvek se vrši preko korisnika!

Jedna baza može imati više različitih korisnika sa različitim privilegijama (čitanje, pisanje, menjanje, itd.)

WP komunicira sa bazom preko korisnika sa svim privilegijama

24/47

Kopiranje WP u Folder na serveru

Kopirati WP arhivu u korenski folder (najčešći naziv je “public_htm” ili “web”) i raspakovati

Moguće je kreirati i poseban podfolder za WP pod bilo kojim nazivom

Nakon raspakivanja, sadržaj foldera u kojem je WP treba da izgleda približno kao na slici

25/47

Podešavanje parametara

Pronaći fajl wp-config-sample.php i otvoriti u tekst editoru (pr. notepad++)

Parametre podesiti na sledeći način

define('DB_NAME', ‘naziv_baze');

define('DB_USER', ‘naziv_korisnika');

define('DB_PASSWORD', ‘šifra_korisnika‘);

define('DB_HOST', 'mysql');

Najčešće ‘mysql’, ali to određuje provajder

ostale parametre ne dirati

Sačuvati otvoreni fajl pod nazivom wp-config.php

26/47

Primer konfiguracionog fajla

27/47

Pokretanje instalacije

Ukucati u pregledač adresu sajta

Automatski se pokreće instalacija koja izgleda približno kao na slici levo (prvi korak) i desno (drugi korak)

28/47

Instalacija WP na kućnom računaru (1)

Preuzeti sa neta portabilnu verziju programa XAMPP i raspakovati u poseban folder (XAMPP)

Pokrenuti program setup_xampp.bat

Detaljno uputstvo može se naći na stranici:

premium.wpmudev.org/blog/setting-up-xampp

Pokrenuti program xammp_control

29/47

Instalacija WP na kućnom računaru (2)

Pokrenuti servise Apache i MySQL (slika levo)

Pokrenuti Admin za MySQL (slika desno)

Nakon pokretanja ovih servisa XAMPP pretvara kućni računar u apache veb server sa MySQL bazom i podrškom za skript jezik PHP

30/47

Instalacija WP na kućnom računaru (3)

Nakon što se u pregledaču otvori phpMyAdmin kreirati bazu pod nazivom “wordpress” (Databases->create)

31/47

Instalacija WP na kućnom računaru (4)

Preuzeti WordPress arhivu sa adrese wordpress.org, ubaciti u folder .../XAMPP/htdocs i raspakovati uz pomoć opcije extract here

U folderu .../XAMPP/htdocs/wordpress pronaći fajl wp-config-sample.php i otvoriti u tekst editoru (pr. notepad++)

Parametre podesiti na sledeći način

define('DB_NAME', 'wordpress');

define('DB_USER', 'root');

define('DB_PASSWORD', '');

ostale paramtre ne dirati

32/47

Instalacija WP na kućnom računaru (5)

Sačuvati otvoreni fajl pod nazivom wp-config.php

Pokrenuti WordPress iz pregledača

http://localhost/wordpress/

Nakon završetka rada sa WordPress-om obavezno zaustaviti servise Apache i MySQL!

Izlaskom iz prozora ne zaustavljaju se pokrenuti servisi!

33/47

Instalacija WordPress-a

Site title

Ime i prezime

Username

admin

Password

web2017

Email

email studenta

34/47

Sadržaj

1. Osnovni pojmovi

2. Instalacija WordPress-a

3. Administratorski panel - DashBoard

35/47

Administracija sajta

Sajtu kreiranom u WP može se pristupiti na dva načina:

1. Kao posetilac (spolja - frontend)

2. Kao administrator (iznutra - backend)

Administrator se loguje preko posebne stranice sajta

adresa_sajta/wp-admin (adresa_sajta/wp-login.php)

Za upravljanje sajtom koristi se alatka koja se zove Dashboard

36/47

Panel za upravljanje – Dashboard

37/47

Dahsboard - ažuriranje

Ažuriranje WordPress-a, dodataka i tema

38/47

Dahsboard - članci

Skladište članaka (posts)

Članak je jedan tekst i predstavlja deo Bloga

Obično su prikazani u hronološkom redosledu počev od najnovijeg

39/47

Dahsboard - medija

Skladište sadržaja

Mogu se aploadovati slike, dokumenti, video materijal i slično

Koristi se za ubacivanje sadržaja u stranice, članke, događaje i slično

40/47

Dahsboard - stranice

Skladište stranica (pages)

Služi za postavljanje statičkog sadržaja na sajt (sadržaj koji se ne menja često)

41/47

Dahsboard - komentari

Skladište komentara

Posetioci mogu komentarisati članke ako je administrator odobrio

42/47

Dahsboard - izgled

Služi za podešavanje izgleda tema, vidžeta, menija i ostalih elemenata WordPress-a

43/47

Dahsboard - dodaci

Skladište dodataka

Dodatak (plugin) omogućava dodatnu funkcionalnost WordPress-u

44/47

Dahsboard - korisnici

Skladište korisnika (users)

Različite vrste korisnika imaju različite privilegije (pretplatnik saradnik, autor, upravnik)

45/47

Dahsboard - alatke

Alatke za eksportovanje i importovanje sadržaja

46/47

Dahsboard - podešavanja

Kompletna podešavanja funkcionalnosti WordPress-a

Opšta podešavanja, pisanje, čitanje, diskusije i slično

47/47

Dahsboard – odjava sa sistema

Uvod u veb dizajn WORDPRESS – 1

Karlo Bala

dr Zoltan Geler