U ovom tutorijalu biti će riječ o izradi WordPress dodatka (plugin-a) koji povlači trenutno dostupne proizvode u bazi trgovine OSCommerce i prikazuje ih na našoj web stranici na željeni način. Program napisan u php skriptnom jeziku vršiti će nasumični odabir 3 različita proizvoda iz baze podataka te ih prikazivati kao na slici (ispod naslova stranice – PLUGIN DEVELOPMENT). Svaki put kada se stranica ponovno otvori promijeniti će se lista prikazanih proizvoda. Također unesti ćemo i funkciju za direktno preusmjeravanje na odabrani proizvod kada se pritisne slika ili tekst željenog proizvoda.

Za uspješno praćenje svih koraka za izradu dodatka potrebno je instalirati WordPress i odgovarajući lokalni server te proučiti način rada u phpMyAdmin bazi podataka. Svi koraci za instalaciju WP CMS-a i povezivanje sa lokalnim serverom kao i bazom podataka, opisani su u jednom od prethodnih tutorijala na našem blogu.

wamp, instalacija lokalnog servera

Instalacija OSCommerce aplikacije na računalo

Preuzimanje aplikacije

Preuzmite aplikaciju na stranici: http://www.oscommerce.com/solutions/downloads

preuzimanje datotekeNakon što preuzmete arhiviranu datoteku, raspakirajte sadržaj arhivirane datoteke na svoje osobno računalo. Raspakiranu datoteku nazovite po želji (npr. oscommerce). Sada je potrebno kreirati bazu podataka unutar phpMyAdmin sučelja. Kreiranje nove baze podataka pokazano je u nekom od prethodnih tutorijala. Bazu možemo nazvati oscommerce_db. Nakon što smo kreirali odgovarajuću bazu podataka kopirajnmo mapu oscommerce koju smo prethodno stvorili u mapu www na sljedeći način: “C:\wamp\www\oscommerce”.

Kada otvorite mapu oscommerce trebali bi ste imati sljedeće datoteke i mape u njoj.

Osscommerce prikaz datoteka

Ako već niste, pokrenite Wamp Server i pričekajte dok se svi servisi ne pokrenu (zelena ikona u donjem desnom kutu ekrana) kako bi se ostavrila mogućnost povezivanja sa bazom podataka. Zatim unesite “localhost/oscommerce/catalog” adresu u web preglednik. Nakon toga biti će te automatski preusmjereni na adresu “localhost/oscommerce/catalog/install/index.php”. Započnite instalaciju pritiskom na tipku Start.

Import Databaze

Zatim se pojavljuje Web Server kartica u kojoj ostavljamo podatke kako je već zadano i odabiremo Continue tipku.

Unos podataka u bazu tada je uspješno obavljen. Pojaviti će se nakon toga Online Store Settings stranica kao na sljedećoj slici.

Online store postavke

Kreiranje mapa i datoteka

WordPress sprema sve dodatke u mapu na vašem osobnom računalu. Tako je potrebno prvotno napraviti mapu u koju ćemo spremati sve php, JavaScript, css i slične datoteke. Ovisno o tome koliko je dodatak kompleksan, mapa sadrži jednu ili više programskih datoteka. Naš će dodatak imati dvije php datoteke pri čemu će jedna biti glavna php datoteka, a druga će biti za implementaciju administratorske stranice u kojoj ćemo moći upravljati načinom rada dodatka na našoj web stranici. Za početak radimo mapu pod imenom oscomm-importer (ili nekog drugog naziva po želji) a nakon toga napravimo dvije prazne tekstualne datoteke koje spremamo kao php datoteke. Svi koraci pokazani su na slikama.

U folder oscomm-importer kreiran kao wamp/www/wordpress/wp-content/plugins/oscomm-importer (wordpress u definiranoj putanji može se razlikovati ovisno o tome kako ste ga nazvali pri instalaciji) spremamo dvije datoteke oscommerce_import_admin.php (administratorska datoteka) i oscomm-importer.php (glavna datoteka). Ove dvije datoteke možete nazvati kako god želite. Za lakše praćenje preporučam zadavanje istih naziva.

import

Php datoteke otvarat ćemo u nekom od tekstualnih procesora. Prepouračmo vam da instalirate Notepad++ na vaše računalo kako bi vam programiranje u php i sličnim jezicima bilo što prilagodljivije i preglednije. Kada ste instalirali navedeni tekstualni procesor, desnim klikom pokazivača na oscomm-importer odabiremo Notepad++ za izmjene. Kada se otvori php datoteka dodajte u nju kod kao na gornjoj slici. Na ovaj način definiramo neke bitne parametre kako bi WordPress povezao naš kod sa svojim sučeljem i kako bi nam dodatak bio vidljiv na administratorskoj stranici. Ispunite naziv dodatka, opis, vaše ime i prezime i verziju (1.0 odabiremo kao prvu verziju koju daljnjim izmjenama mijenjamo kao 1.1, 1.2 itd.).

importer

Sada možemo otvoriti WP administratorski panel i vidjeti promjene u kartici Plugins.

administratorsko sučelje

Izrada WordPress plugin-a

Kako bi smo napravili administratorsku stranicu unutar WP sučelja kao na slici moramo dodati kod u oscommerce_import_admin.php datoteku. Ovdje ćemo ispuniti podatke za povezivanje sa bazom podataka na način da unesemo svoj host (u ovom slučaju localhost), naziv kreirane baze podataka, odabranog korisnika i odgovarajuću lozinku. Sve to potrebno je za uspješnu komunikaciju sa bazom podataka OSCommerce internet trgovine. Također, omogućiti ćemo i unos URL-a i odgovarajuće mape sa slikama koje će se prikazati na stranici. To nam je potrebno upravo zbog toga što želimo ostvariti interakciju sa prikazanim proizvodima (slika i tekst) tako da se ponašaju kao linkovi na proizvode na stranici.

Dodajte priloženi kod iz rar arhive u datoteku oscommerce_import_admin.php. Ako želite možete odmah dodati gotove obje php datoteke i pratiti objašnjenje koda u nastavku tutorijala. Ako već niste preuzmite rar arhivu i spremite mapu u Plugins mapu. Za uspješno prikazivanje slika svih proizvoda iz trgovine, obavezno spremite mapu s nazivom „images“ unutar same Plugin mape (www/wamp/wp-content/Plugins).

oscommernce

Za početak samo unesite ovo u oscomm-importer.php datoteku:

function oscimp_admin() {

include(‘oscommerce_import_admin.php’);

}

function oscimp_admin_actions() {

add_options_page(“OSCommerce Product Display”, “OSCommerce Product Display”, 1, “OSCommerce Product Display”, “oscimp_admin”);

}

add_action(‘admin_menu’, ‘oscimp_admin_actions’);

Ovo nam omogućuje prikaz administratorske stranice unutar kartice options_page na slijedeći način:

Pomoću opcije „include“ uključujemo navednu php datoteku za povezivanje administratorske stranice sa bazom podataka. Najprije ćemo ispuniti administratorsku php datoteku a zatim u glavnoj php datoteci napisati kod za manipulaciju s proizvodima spremljenim u bazi podataka.

Funkcija add_options_page(“OSCommerce Product Display”, “OSCommerce Product Display”, 1, “OSCommerce Product Display”, “oscimp_admin”); dodaje naslove naše administratorske stranice unutar polja Settings (Opcije), same stranice i kartice. Pomoću funkcije add_action()izvršavamo zadanu funkciju oscimp_admin_actions’ unutar polja admin_menu na početnoj stranici WP-a. Nazivi php datoteka mogu varirati ovisno o tome kako ste ih nazvali na samom početku. Sad kada imate kompletan kod u obje php datoteke vaš dodatak biti će prikazan na stranici i sve će raditi kompletno.

Izrada i konfiguracija administratorske stranice

U datoteci oscommerce_import_admin.php datoteci primjetite slijedeći kod:

Prvo ćemo napraviti klasu wrap. To je standardna WordPress klasa koja omogućuje da naša stranica izgleda kao svaka druga stranica, unutar administratorskog područja. Našu formu (izgled)  nazovemo primjerice oscimp_form. Forma će koristiti metodu POST da bi bilo moguće slanje povratnih podataka. U tu svrhu možemo dodati update baze podataka u istu datoteku. Koristimo skriveno polje hidden field u svrhu provjere da li je trenutna stranica prikazana ili nije nakon unosa podataka i odabira Update_Options gumba. Ukoliko stranica primi podatke definirane u formu, vrijednost tog polja biti će postavljen kao Y. Nakon toga, u ostatku linija napravili smo polja za unos podataka koji će biti spremljeni u bazu podataka. Vrijednosti parametara postavljeni su prema sadržaju php variabli koje ćemo kasnije pojasniti. Ukoliko bi unutar datoteke oscommerce_import_admin.php ostavili samo gore navedeni kod, nakon unosa podataka u za to predviđena polja na stranici, ponovnim učitavanjem stranice polja bi ostala prazna. Isprobajte sada sami navedenu radnju i pogledajte kako se ponaša stranica i što je upisano u polja nakon ponovnog učitavanja stranice ili odabira gumba Update_Options. Ako ste preuzeli gotove php datoteke samo obrišite prvi dio koda i isprobajte. Za lakše praćenje postavili smo vam nekoliko slika sa našim kodom.

<div class=”wrap”>

<?php    echo “<h2>” . __( ‘OSCommerce Product Display Options’, ‘oscimp_trdom’ ) . “</h2>”; ?>

 

<form name=”oscimp_form” method=”post” action=”<?php echo str_replace( ‘%7E’, ‘~’, $_SERVER[‘REQUEST_URI’]); ?>”>

<input type=”hidden” name=”oscimp_hidden” value=”Y”>

<?php    echo “<h4>” . __( ‘OSCommerce Database Settings’, ‘oscimp_trdom’ ) . “</h4>”; ?>

<p><?php _e(“Database host: ” ); ?><input type=”text” name=”oscimp_dbhost” value=”<?php echo $dbhost; ?>” size=”20″><?php _e(” ex: localhost” ); ?></p>

<p><?php _e(“Database name: ” ); ?><input type=”text” name=”oscimp_dbname” value=”<?php echo $dbname; ?>” size=”20″><?php _e(” ex: oscommerce_shop” ); ?></p>

<p><?php _e(“Database user: ” ); ?><input type=”text” name=”oscimp_dbuser” value=”<?php echo $dbuser; ?>” size=”20″><?php _e(” ex: root” ); ?></p>

<p><?php _e(“Database password: ” ); ?><input type=”text” name=”oscimp_dbpwd” value=”<?php echo $dbpwd; ?>” size=”20″><?php _e(” ex: secretpassword” ); ?></p>

<hr />

<?php    echo “<h4>” . __( ‘OSCommerce Store Settings’, ‘oscimp_trdom’ ) . “</h4>”; ?>

<p><?php _e(“Store URL: ” ); ?><input type=”text” name=”oscimp_store_url” value=”<?php echo $store_url; ?>” size=”20″><?php _e(” ex: http://www.yourstore.com/” ); ?></p>

<p><?php _e(“Product image folder: ” ); ?><input type=”text” name=”oscimp_prod_img_folder” value=”<?php echo $prod_img_folder; ?>” size=”20″><?php _e(” ex: http://www.yourstore.com/images/” ); ?></p>

 

<p class=”submit”>

<input type=”submit” name=”Submit” value=”<?php _e(‘Update Options’, ‘oscimp_trdom’ ) ?>” />

</p>

</form>

</div>

wp plugin
plugin

Ukoliko sada odete na administratorsku stranicu unutar kartice Settings možete provjeriti da se nakon unosa podataka u za to predviđena polja i odabriom gumba „Update Options“ ništa neće dogoditi već će se stranica samo ponovno učitati i polja će biti prazna. To nam svakako ne odgovara, stoga unutar datoteke oscommerce_import_admin.php dodajemo još jedan dio koda iznad ovog već unešenog. To je onaj dio koda koji ste obrisali ako ste preuzeli gotove php datoteke u svrhu isprobavanja gore navedenih radnji. Ukoliko ste dodali ili vratili ostatak koda u navedenoj datoteci onda bi ona trebala izgledati ovako.

plugin prikaz

Ovim dijelom koda pobrinuti ćemo se da podaci uneseni u za to predviđena polja budu zadržani u bazi podataka, ali i prikazani na administratorskoj stranici nakon odabira opcije Update Options na temelju podataka spremljenih u bazi podataka. Najprije provjeravamo da li je trenutna stranica prikazana nakon što korisnik unese podatke i pritisne gumb Update Options. Provjeru vršimo na način da analiziramo prethodno spomenutu vrijednost Y, vrijednost skrivenog polja oscimp_hidden. Nakon toga povlačimo sve podatke unesene u polja i dodajemo ih u bazu funkcijom update_option(). Prvi parametar funkcije update_option() je naziv opcije koji će služiti za otkrivanje i povezivanje sa spremljenom vrijednosti u glavnom programu dodatka. Drugi parametar je vrijednost koja će mu biti pripisana. Unesite ili kopirajte ove opcije za svako polje kao što je gore navedeno. Na kraju dodajemo kod koji koristi funkciju get_option(). Ta funkcija povlači određenu opciju iz baze podataka prema spremljenom imenu funkcije u koraku prije. Zaključno, funkcija if provjerava da li je na stranici odabran gumb Update Options te unosi podatke definirane u poljima na administratorskoj stranici. Funkcija else obavlja povlačenje podataka iz baze podatka u trenutku kada se otvori administratorska stranica.Ovime je završena kompletna php datoteka za upravljanje, unos i prikaz podataka na administratorskoj stranici. Ovako bi trebala izgledati administratorska stranica nakon uspješnog unosa podataka i pritiskom gumba Update Options. Pojaviti će se sada informacija da su podaci spremljeni kao na slici.

wordpress

Sada dodajmo sljedeći kod unutar datoteke oscomm-importer.php i kreirajmo na taj način korisničku funkciju.

wp

Definiramo sada funkciju oscimp_getproducts() unutar koja će se povezati sa bazom podataka kreiranom pri instalaciji OSCommerce aplikacije, povući sve proizvode iz baze i prikazati ih na željeni način nasumičnim odabirom (funkcija rand) između proizvoda spremljenih u bazu podataka. Funkcija prima jedan parametar $product_cnt=1 postavljen na ovaj način da kao zadani broj ima 1 produkt za prikaz. Pozivanjem funkcije na stranici odabiremo tako broj proizvoda koji će se prikazati na njoj. Ukoliko funkciju pozovemo bez unosa parametra u zagradi, prikazati će se samo 1 proizvod kako je zadano, a ako upišemo primjerice 3 tada će se prikazati 3 proizvoda na stranici. Povezivanje sa bazom podataka ostvarujemo na način da definiramo putanju do zadane baze kao varijablu $oscommerce_db te prema tome povlačimo željene varijable iz zadane baze podataka. Varijablu koja sadrži informacije o putanji do zadane baze definiramo dinamički ovisno o tome što je uneseno u polja na adminisratorskoj stranici. Stoga koristimo funkciju get_option za povlačenje podataka. Za kreiranje novog objekta baze podataka koristimo implementiranu klasu wpdb Na taj ćemo način dobiti informacije o odgovarajućoj slici, imenu i linku za svaki proizvod. Kreirana baza podataka oscommerce_db, stvorena na početku pri instalaciji odgovarajuće aplikacije ima unutar sebe podgrupe od kojih su nam bitne one sa nazivom products_images i products_descriptions. Pronađimo ih na način da otvorimo bazu u phpMyAdmin stranici kao na slici.

wp plugin

Petlja za nasumični odabir produkata

For petlju vršimo u rasponu od vrijednosti 0 do vrijednosti varijable product_cnt koju zadajemo prilikom pozivanja funkcije na stranici (default-na vrijednost je 1). Na ovaj način pozivati čemo while petlju za nasumični odabir broja (postavimo kao ID proizvoda). Dakle, odabirom nekog broja od 1 do 28 (jer u bazi imamo spremljena 28 proizvoda), taj odabrani broj postavljamo kao ID broj određenog produkta. Primjerice, ako je nasumično odabran broj 8 tada će varijabla $product_id imati vrijednost 8. Prema odabranom ID-u povlačiti će se odgovarajući proizvod iz baze podataka koji ima ID = 8.

 

Pojašnjenje petlje za nasumični odabir određenog broja proizvoda:

//Dohvaćanje slike, naziva i URL-a proizvoda pod odabranim brojem (ID)

$product_image = $oscommerce_db->get_var(“SELECT image FROM products_images WHERE products_id=$product_id”);

$product_name = $oscommerce_db->get_var(“SELECT products_name FROM products_description WHERE products_id=$product_id”);

$store_url = get_option(‘oscimp_store_url’);

 

U sljedećem dijelu koda, na temelju nasumičnog odabranog products_id broja (8) iz baze u kojoj su pohranjene sve informacije o slikama, odnosno baze s nazivima proizvoda povlači se ime i slike proizvoda pod odgovarajućim products_id brojem.  Prema bazi na slici iznad to bi bio proizvod čija se slika nalazi u mapi dvd i ima odgovarajući naziv i ekstenziju gif na samoj stranici OSCommerce. Za broj 8 to je konkretno u mom slučaju „dvd/a_bugs_life.gif“ iz baze sa products_images, odnosno „A Bug’s Life“ iz baze products_description. Možete provjeriti u obje tablice da su imena i nazivi slika pod jednakim brojem products_id.

 

//Dohvaćanje slike, naziva i URL-a proizvoda pod odabranim brojem (ID)

$product_image = $oscommerce_db->get_var(“SELECT image FROM products_images WHERE products_id=$product_id”);

$product_name = $oscommerce_db->get_var(“SELECT products_name FROM products_description WHERE products_id=$product_id”);

$store_url = get_option(‘oscimp_store_url’);

 

U sljedećem dijelu koda, na temelju nasumičnog odabranog products_id broja (8) iz baze u kojoj su pohranjene sve informacije o slikama, odnosno baze s nazivima proizvoda povlači se ime i slike proizvoda pod odgovarajućim products_id brojem.  Prema bazi na slici iznad to bi bio proizvod čija se slika nalazi u mapi dvd i ima odgovarajući naziv i ekstenziju gif na samoj stranici OSCommerce. Za broj 8 to je konkretno u mom slučaju „dvd/a_bugs_life.gif“ iz baze sa products_images, odnosno „A Bug’s Life“ iz baze products_description. Možete provjeriti u obje tablice da su imena i nazivi slika pod jednakim brojem products_id.

//Dohvaćanje slike, naziva i URL-a proizvoda pod odabranim brojem (ID)

$product_image = $oscommerce_db->get_var(“SELECT image FROM products_images WHERE products_id=$product_id”);

$product_name = $oscommerce_db->get_var(“SELECT products_name FROM products_description WHERE products_id=$product_id”);

$store_url = get_option(‘oscimp_store_url’);

Na kraju nam preostaje samo kreirati HTML kod koji će prikazivati naš proizvod na način da se prvo stvori polje za prikaz, te nakon toga doda slika i naziv proizvoda. Ukoliko želimo da pritiskom na slikom budemo direktno preusmjereni na prikaz proizvoda na stranici OSCommerce, onda moramo dodati referencu koristeći href.  U referencu treba dodati izvor slike i određeni ID, a nakon toga možemo odabrati veličinu slike definirajući joj visinu i širinu. Isto je moguće mijenjati i za sam naziv. To puštam vama na volju. U svom kodu ostavrio sam prikaz slike i naziva proizvoda te omogućio preusmjeravanje na proizvod odabirom slike proizvoda dimenzija 80x80.

if(strpos($product_image,$gif) !== false){

$img_path = get_string_between($product_image, ‘/’, ‘.’);

$img_path1 = ‘images/’ . $img_path . ‘.gif’;

}

//Kreiranje HTML koda

$retval .= ‘<div class=”oscimp_product”>’;

$retval .= ‘<a href=”‘. $store_url . ‘product_info.php?products_id=’ . $product_id . ‘”><img src=”‘ . plugins_url( $img_path1, __FILE__ ) . ‘” width=”80″ height=”80″></a><br />’;

$retval .= $product_name;

$retval .= ‘</div>’;

U kreiranoj mapi „slike“ u kojoj su dodane sve slike u odgovarajuće kategorije svaka je slika spremljena pod odgovarajućim nazivom na jednak način kao i u referenci.  Stoga kao izvor slike korsitimo tu kreiranu mapu na način prikazan gore. Da bi smo korektno pristupili odgovarajućoj mapi i slici u njoj koristimo get_string_between() koju dodajemo na vrh php datoteke prije same funkcije za odabir i prikaz odabranog proizvoda.

function get_string_between($string, $start, $end){

$string = ‘ ‘ . $string;

$ini = strpos($string, $start);

if ($ini == 0) return ”;

$ini += strlen($start);

$len = strpos($string, $end, $ini) – $ini;

return substr($string, $ini, $len);

}

 

Ova će funkcija vratiti string varijablu koja će sadržavati odgovarajući naziv putanje do slike, te nakon što ga dobijemo, prije samog pozivanja putanje u HTML kodu, dodati ćemo putanji nastavk .gif kako bi se ostavrilo uspješno otvaranje izvšne gif datoteke.

 

 

Za kraj dodajte još jednu liniju koda odmah iznad glavne funkcije oscimp_getproducts():

add_shortcode( ‘oscomm-importer’, ‘oscimp_getproducts()’ );

Ovaj shortcode dodaje kako bi smo bili u mogućnosti pozvati našu glavnu funkciju programa bilo gdje na stranici samo pozivanjem funkcije s danim parametrom broja produkata.

Dodavanje shortcode-a na nekom dijelu stranice

Kopirajte ovu liniju koda:

<ul><?php echo oscimp_getproducts(3); ?></ul>

Ovisno o tome koju temu koristite, pronađite mapu themes unutar wp-content mape gdje se nalazi i mapa plugins. Zatim odaberite mapu prema odgovarajućoj temi (npr. twentyfourteen). U odabranoj mapi ovisno o željama zaljepite kod na kraju neke od php datoteka (npr. u datoteku sidebar.php).

 

 

Na ovaj je način završena izrada dodatka za proizvoljni prikaz proizvoda iz internet trgovine na našoj stranici. U ovom tutorijalu naučili ste kako izraditi administratorsku stranicu i kako ju dodati u izbornik s opcijama unutar WP sustava. Također, mogli ste naučiti kako se povezati s MySQL bazom podataka na poslužitelju phpMyAdmin ili nekom sličnom te kako spremati podatke u bazu ili ih povlačiti iz baze. Ukoliko ste se već susretali sa programiranje u php-u i HTML-u ili nekim drugim sličnim skriptnim jezicima nećete imati problema sa shvaćanjem kompletnog koda unutar dvije korištene php datoteke. Izrada ovog dodatka vrlo je jednostavna, a za izradu su potrebna minimalna znanja programiranja u php-u , MySQL-u i HTML-u.

Ukoliko ste sve pažljivo pratili i obavili vaš bi plugin trebao izgledati na slijedeći način.

Odabir proizvoda pritiskom pokazivača na sliku željenog proizvoda: