A Simple Mashup Website

Riat Abduramani Menaxhimi me Bazat e t Dhnave, Departamenti i Shkencave Kompjuterike Univerziteti i Evrops Juglindore, Tetov, Maqedoni E-mail: riat.abduramani@gmail.com

ABSTRAKT Objekt i studimit ton n kt tekst do t jet krijimi i ueb faqeve n baz t ueb faqeve tjera duke marr t dhnat e tyre dhe ti procesojm n ueb faqen ton. Sot n kto dit kemi t bjm me Web 2.0, dhe sht teknologjia m e re q na mundson hapsir shum m t gjr n krijimin e ueb faqeve sa m leht ti bashkojm fotografit, videot, qasjet n ueb, leximet e lajmeve, nxjerrja e produkteve e shum elemente tjera n faqen ton personale. Ky projekt sht i thjesht dhe sht orientuar kah fillimi i studiuesve q do ndjekin kt hap, jan marr shembuj t thjesht dhe elemente t vogla. Fjalt kye: api, javascript, php. HYRJE Si e dim edhe sot kemi nj grumbull t dhnash npr ueb faqe t ndryshme, por kjo e bn q ne t jemi pak m t ngadalt n krkimin e tyre. Sot teknologjia na mundson q preferencat q i kemi ti fusim n nj bashksi dhe ta quajm ueb faqe personale. Kjo bhet sipas nevojave t do personi. N kt projekt jan zhvilluar tre lloj API (www.webopedia.com), edhe at njra sht pr t nxjerr videot nga emri i vendosur si prdorues n vimeo, kemi pastaj google map, q kemi prdor api dhe kemi lokacuar vendodhjen e biznesit, dhe e fundit sht flickr, q me an t saj ne i fusim t gjitha fotografit brenda. Sa i prket vimeos e cila sht nj ueb faqe mjaft e madhe me plot video n t, aty kemi marr nj Simple API e cila ka rolin e Public Data Only, q do t thot nxjerr n pah vetm t dhnat q jan publike, dhe nse videot i kemi private ather vimeo na mundson t prdorim Advanced API, poashtu ka edhe oEmbed e cila sht e fshehur nga vimeo por sht i inkorporuar n t ather prdoret kjo metod. (VIMEO) Google map sht nj mnyr mjaft e mir pr ta prdorur n ueb faqe, ku n t ka dy lloj prdoruesish: ato pr qllime t biznesit dhe ato pr qllime personale. Normal, kjo gj i ndan qasjet dhe privilegjet, sepse si i jan dhn privilegjet nj biznesi nuk mund ti jepen atij q sht personale. N rastin e ktij projekti kemi personale, dhe sht nj verzion i skripts 2.0. Flicker sht nj lloj hostingu pr fotografi, e cila n vete prmban mjaft fotografi nga e gjith bota, dikundi 6 bilion fotografi, dhe 51 milion t regjistruar n t, vetm 80 milion vizitor i ka unik. Sot flicker na mundson q t qasemi n ueb faqen e tij edhe nga mnyra t ndryshme, dhe poashtu na ofron nj lloj API q fotografit q i kemi n t ti fusim brenda n ueb faqen ton personale. Pr kt lloj projekti n veanti pr flicker sht prdorur nj skript e cila sht

online (http://phpflickr.com/) e shkruar nga Dan Coulter, skripta sht n PHP dhe shum e leht pr ta prdorur.

MATERIALET DHE METODAT

N vazhdim do t shohim se si e kemi krijuar kt projekt t vogl nprmjet ktyre metodave q na ofrohen. S pari kemi marr nj template t gatshm dhe kemi modifikuar disa elemente n t, pak n dizajn edhe poashtu i kemi hequr disa fotografi q nuk na nevojiten:

N menu e cila quhet Photo kemi vnduar skriptn e Flicker, e cila sht e lidhur shum leht, duke e futur folderin brenda serverit q jemi duke operuar. Ky lloj skripte sht marr nga ueb faqja oficiale http://phpflickr.com/, dhe prmban kto skedare dhe foldera n vete:

Ktu kemi t bjm vet me nj futje t kodit n photos.php e cila ndodhet n root t ueb faqes q jemi duke e krijuar. Kodi i cili duhet t futet n t sht si m posht:

<?php // For paging the thumbnails, get the page we are on // if there isn't one - we are on page 1 $page = isset($_GET['page']) ? $_GET['page'] : 1; //include the core file require_once('flickr/phpFlickr.php'); // include the config file require_once('flickr/config.php'); // Fire up the phpFlickr class $f = new phpFlickr($key); // phpFlickr needs a cache folder // in this case we have a writable folder on the root of our site, with permissions set to 777 $f->enableCache("fs", "cache"); //returns an array $result = $f->people_findByUsername($username); // grab our unique user id from the $result array $nsid = $result["id"]; // Get the user's public photos and show 21 per page //$page at the end specifies which page to start on, that's the page number ($page) that we got at the start $photos = $f->people_getPublicPhotos($nsid, NULL, NULL, 21, $page); // Some bits for paging $pages = $photos[photos][pages]; // returns total number of pages $total = $photos[photos][total]; // returns how many photos there are in total ?>

Ktu nj ndrhyrje e vogl sht br n kodin:

// sht vnduar emri i folderit ku ndodhetskedari phpFlickr.php require_once('flickr/phpFlickr.php'); // sht vnduar emri i folderit ku ndodhet config.php require_once('flickr/config.php');

Ndryshimi tjetr I radhs sht ajo se duhet t futet api dhe emri i prdoruesit n config.php:
<?php //Insert your API key $key = "908597a622ae8eebac3e93faeb8729b1"; /* Now for your Flickr username. */ $username="riat."; ?>

Flicker na mundson q API key ta marrim duke u regjistruar n t dhe URL q t qon deri te ajo sht si m posht:

Pra, pasi q i kemi t dhnat ather i fusim n config.php. N skedarin photos.php q sht jasht folderit t flicker vazhdojm duke i futur edhe kodin pr leximin e t dhnave n t dhe rregullimi i saj me CSS, q t shfaqen sa m mir fotografit.

Poashtu edhe n Vimeo duhet t regjistrohet pr t nxjerr nj API, regjistrimi sht n url: https://developer.vimeo.com/. Pas krijimit t llogari brenda n vimeo ather gjenerojm api ton e cila sht:

Pr implementimin e videove n ueb faqe kemi prdorur javascript e cila sht si m posht:
<script> var var var var var apiEndpoint = 'http://vimeo.com/api/v2/'; oEmbedEndpoint = 'http://vimeo.com/api/oembed.json' oEmbedCallback = 'switchVideo'; videosCallback = 'setupGallery'; vimeoUsername = 'user2801920';

// Get the user's videos $(document).ready(function() { $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback); }); function getVideo(url) { $.getScript(oEmbedEndpoint + '?url=' + url + '&width=504&height=280&callback=' + oEmbedCallback); } function setupGallery(videos) { // Set the user's thumbnail and the page title $('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');

$('#stats h2').text(videos[0].user_name + "'s Videos"); // Load the first video getVideo(videos[0].url); // Add the videos to the gallery for (var i = 0; i < videos.length; i++) { var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />'; html += '<p>' + videos[i].title + '</p></a></li>'; $('#thumbs ul').append(html); } // Switch to the video when a thumbnail is clicked $('#thumbs a').click(function(event) { event.preventDefault(); getVideo(this.href); return false; }); } function switchVideo(video) { $('#embed').html(unescape(video.html)); } </script>

Ktu poashtu kemi br nj ndryshim n kodin q ndodhet n fillim duke e shkruajtur emrin e prdoruesit q ne e kemi:
var vimeoUsername = 'user2801920';

Kjo sht marr nga url e ueb faqs te Vimeo:

Kodi i javascript sht futur brenda skedarit t quajtur video.php brenda tagut <head>...</head>, dhe kodi tjetr I rradhs sht vendosur pr t nxjerr rezultatin:
<div class="title">WATCH THE VIDEO HERE</div> <div class="products_box"><div id="stats"> <h2></h2> <div style="clear: both;"></div> </div> <div id="wrapper"> <div id="embed"></div> <div id="thumbs"> <ul></ul> </div> </div> </div>

Rezultati i ksaj sht si m posht:

Google map sht nj lloj I javascript q gjithashtu sht marr gjat regjistrimit pr API key, dhe sht si n vazhdim:
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACezl5OES8dMDmq_DvDe PXxR1DJfR2IAi0TSZmrrsgSOYoGgsxBTxN5RDergBZIkIAfmbeWXNM3zdtg" type="text/javascript"></script> <script type="text/javascript"> $(function() { // when the document is ready to be manipulated. if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's var map = document.getElementById("myMap"); // Get div element var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.

m.setCenter(new GLatLng(41.986158,20.964864), 13); // pass in latitude, longitude, and zoom level.

m.setMapType(G_NORMAL_MAP); // sets the default mode. G_NORMAL_MAP, G_HYBRID_MAP var c = new GMapTypeControl(); // switch map modes m.addControl(c); m.addControl(new GLargeMapControl()); // creates the zoom feature } else { alert("Ndrysho biznesin!"); } }); </script>

N kt rast kemi ndrruar vetm API key n kod:

src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACezl5OES8dMDmq_DvDe PXxR1DJfR2IAi0TSZmrrsgSOYoGgsxBTxN5RDergBZIkIAfmbeWXNM3zdtg" type="text/javascript"></script>

Dhe poashtu kt kod e kemi vnduar n skedarin t quajtur contact.php, n brendi t tagut <head>..</head>, dhe paraqitja e saj sht br duke prdorur div tagun:
<div id='myMap' style="position:relative; width:700px; height:200px;"></div>

Rezultati I ksaj sht si n vazhdim:

Mund t shikohet n server online ky projekt: www.gidasolution.com/gida