2.0 - webdizajn.ict.edu.rswebdizajn.ict.edu.rs/.../dipl_php_andrija...16_14.docx · Web viewAndrija Gligorijević 16/14. Beograd, 2017. VISOKA ŠKOLA STRUKOVNIH STUDIJA. ZA INFORMACIONE

VISOKA ŠKOLA STRUKOVNIH STUDIJA

ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

Jedno rešenje socijalne mreže realizovano pomoću PHPa - “andrijaBook”

ZAVRŠNI RAD

Mentor: Student:

Dr Nenad Kojić Andrija Gligorijević 16/14

Beograd, 2017.

1

VISOKA ŠKOLA STRUKOVNIH STUDIJA

ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

Internet Tehnologije

Predmet: Web programiranje – PHP1

Tema: Jedno rešenje socijalne mreže realizovano pomoću PHPa - “andrijaBook”

Ocena ___ ( )

Članovi komisije:

1. ______________________

2. ______________________

3. ______________________

2

Sadržaj

Contents1.0 Uvod……………………………………………………………………………………………...42.0 Web strane......................................................................................................................................52.1 Stranice...........................................................................................................................................6

2.1.1 – Početna strana (index.php)...................................................................................................62.1.2 – Glavna stranica (home.php).................................................................................................7

2.1. 3 – Profil (profile.php)..............................................................................................................8

2.1. 4 – Objava (post.php)................................................................................................................9

2.1. 5 – Admin panel (limunada.php)............................................................................................10

3.1 Kodovi stranica:...........................................................................................................................11

3.1.1 – index.php............................................................................................................................11

3.1.2 – home.php............................................................................................................................16

3.1.3 – profile.php..........................................................................................................................25

3.1.4 – post.php..............................................................................................................................40

3.1.5 – limunada.php......................................................................................................................47

3.2 Ostali kodovi................................................................................................................................533.2.1 – style.css..............................................................................................................................53

3.2.2 – responsive.css.....................................................................................................................703.2.3 – mojScript.js........................................................................................................................74

3.2.4 Strane koje se includuju:.......................................................................................................863.2.5 AJAX....................................................................................................................................94

4.1 Struktura baze podataka.............................................................................................................110

3

1 Uvod

Ideja ovog završnog rada je da se pokažu osnovne funkicionalnosti jedne društvene mreže. Korisnicima treba da bude omogućeno da se međusobno povežu i na taj način dobiju ažurne informacije o objavama svojih prijatelje, kao i mogućnost interakcije u vidu ostavljanja komentara ili jednostavnog “lajka”.

Web aplikaciju koriste obični korisnici koji se moraju prethodno registrovati i potvrditi registraciju praćenjem linka poslatog na njihov mail, i administratori koji imaju veće mogućnosti u smislu kontrole svog sadržaja i pristupa korisnika.

Korisnike treba obavestiti kada neko komentariše ili “lajkuje” neku njihovu obajavu. Svaki korisnik može videti svoj profil ili profil bilo kog prijatelja i tako videti istoriju objava, okacenih slika, listu njihovih ili svojih prijatelja itd..

Sajt treba da omogući pregledanje na više različitih uređaja, televizora, monitora, tableta i telefona.

Većina funckionalnosti biće izradjena pomoću ajax tehnologije, što će korisnicima pružiti brzu i laku interakciju sa web aplikacijom

4

2 Organizacija

2.0 Web strane

Za izradu backenda aplikacije je korišćen proceduralni PHP dok su za frontend korišćeni HTML,CSS i JavaScript sa Jquery.

Struktura fajlova:

2.3 slike i include fajlovi2.1 gruba struktura fajlova

2.2 struktura ajax fajlova

2.6 koriscnei JavaScript fajlovi

2.4 korisnicki fajlovi i stranice 2.5 korisceni css fajlovi

5

2.1 Stranice

2.1.1 – Početna strana (index.php)

Stranica koja doceka korisnika, sadrzi formu za logovanje i registraciju.

2.1.1 index stranica

6

2.1.2 – Glavna stranica (home.php)

Glavna stranica na kojoj se nalaze forma za novu objavu, sve objave korisnikovih prijatelja, spisak prijatelja, ikonica za notifikacije, itd..

2.1.2 Glavna (Home) stranica

7

2.1. 3 – Profil (profile.php)

Stranica na kojoj se nalaze sve informacije o jednom korisniku, profilna slika, sve njegove objave, druge drustvene mreze, prijatelji, slike, itd..

2.1.3 Profil stranica

8

2.1. 4 – Objava (post.php)

Ova stranica je namenjena prikazu jedne objave, u svrhu toga da se istakne jedna objava koja je komentarisana ili lajkovana.

2.1.4 Stranica za objavu

9

2.1. 5 – Admin panel (limunada.php)

Stranica namenjena samo administratorima. Obicnim korisnicima nije dozvoljen pristup. Sa ove stranice administratori upravljaju korisnicima, menjaju im uloge, blokiraju ih itd.. Na ovoj stranici se jos nalaze i podaci o autoru sajta.

2.1.5 Admin panel

10

3 Kodovi

3.1 Kodovi stranica:

3.1.1 – index.php

<?phpsession_start();if(isset($_GET['logout'])){

session_unset();session_destroy();

}//logovanjeif(isset($_POST['btnLogin'])){

$username = trim($_POST['tbEmail']);$password = md5(trim($_POST['tbPassword']));include('inc/connection.inc');$query = "Select * From ab_users Where email = '".

$username."' And password = '".$password."'";$rez = mysql_query($query,$konekcija);mysql_close($konekcija);$red = mysql_fetch_array($rez);if(mysql_num_rows($rez) == 1){

if($red['status'] == 1){//echo var_dump(mysql_num_rows($rez));$_SESSION['id_user'] = $red['id_user']; $_SESSION['first_name'] = $red['first_name']; $_SESSION['id_role'] = $red['role']; $_SESSION['picture'] = $red['profile_pic']; $_SESSION['id_notification'] =

$red['id_notification']; }elseif($red['status'] == 2){

$porukaLogovanje = "Your account has been blocked or is awaiting confirmation";

}elseif($red['status'] == 3){

$porukaLogovanje = "Awaitnig email confirmation";

}}elseif(mysql_num_rows($rez) == 0){

$porukaLogovanje = "Incorrect username or password";

}else{$porukaLogovanje = "Login error";

}}//redirekcija

11

if(isset($_SESSION['id_user'])){$porukaLogovanje = "Uspesno";Header("Location: home.php");

}if(isset($_GET['activate'])){

$code = $_GET['activate'];$upit = "Select * From ab_users Where random = ".$code;include('inc/connection.inc');$rez = mysql_query($upit,$konekcija);

if(mysql_num_rows($rez) != 0){$upit2 = "Update ab_users Set status = 1 Where

random = ".$code;mysql_query($upit2,$konekcija);$UspesnoAktiviran = true;

}mysql_close($konekcija);

}?><!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>andrijaBook</title> <meta name="description" content="">  <link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/responsive.css"><link rel="shortcut icon" type="image/x-icon"

href="images/logo/favicon.ico" /><link rel="icon" type="image/x-icon"

href="images/logo/favicon.ico" /><meta name="viewport" content="width=device-width, initial-

scale=1, maximum-scale=1, user-scalable=0">

</head><body>

<div id="headerLogin" class="paint"><div class="content">

<h1><img src="images/logo/bigLogo.jpg" width="200px" height="50px" class="left"/></h1>

<div id="login" class="right"><form action="index.php" method="POST">

<input type="email" placeholder="Your email" name="tbEmail"/>

<input type="password" placeholder="Your password" name="tbPassword"/>

12

<input type="submit" class="paint" value="Log in" name="btnLogin"/>

</form></div><div class="clear"></div>

</div></div><div id="wrapperLogin"><div class="content" style="min-height: 445px; background-

image: url(images/misc/index-bg.png); background-size: 391px; background-repeat: no-repeat; background-position: 0% 76%;">

<div id="signUp" class="right"><?php if(isset($porukaLogovanje)){echo "<div

style='color:red'>$porukaLogovanje</div>";}?><h2>Sign up</h2><h3>An awesome alternative</h3><form action="index.php" method="POST">

<input type="text" placeholder="First name" class="left" name="inputFirstName" onBlur="nameCheck(this)" required

value="<?php if(isset($_POST['inputFirstName'])){echo $_POST['inputFirstName'];} ?>"

/>   <input type="text" placeholder="Last name"

class="left" name="inputLastName" onBlur="lastnameCheck(this)" required

value="<?php if(isset($_POST['inputLastName'])){echo $_POST['inputLastName'];} ?>"

/><div class="clear"></div><input type="email" placeholder="Your email"

name="inputEmail" required onBlur="emailCheck(this)"value="<?php

if(isset($_POST['inputEmail'])){echo $_POST['inputEmail'];} ?>"/><br/><span style="font-

size:0.9em;color:#4a70ad;">Date of birth:</span><input id="datePicker" type="date"

placeholder="Your birthday" name="inputBday" requiredvalue="<?php

if(isset($_POST['inputBday'])){echo $_POST['inputBday'];} ?>"/><input type="password" placeholder="Enter new

pasword" name="inputPassword" onBlur="passCheck(this)" required/><input type="password" placeholder="Confirm

pasword" name="inputPassword2"/>

13

<input type="submit" value="Create account" name="btnSignup" />

</form><div>

<?phpif(isset($_POST['btnSignup'])){

$fname = $_POST['inputFirstName'];

$lname = $_POST['inputLastName'];

$email = $_POST['inputEmail'];$p1 =

$_POST['inputPassword'];$p2 =

$_POST['inputPassword2'];$bday = $_POST['inputBday'];

$regName = "/^[A-ZČĆŽĐŠ][a-zčđš]{1,15}$/";

$regLast = "/^[A-ZČĆŽĐŠ][a-zčđš]{1,25}$/";

$regEmail = "/^\S{1,30}\@\S{1,20}(\.\S{1,10})+$/";

$regP = "/^\S{4,10}$/";$regBday = "/^\d{4}\-\d{2}\-\

d{2}$/";

if(preg_match($regBday,$bday)&& preg_match($regName,$fname) && preg_match($regLast,$lname) && preg_match($regEmail,

$email) && preg_match($regP,$p1)&& $p1 == $p2){

//formatiranje datuma$pieces =

explode("-",$bday);$dan = $pieces[2];$mesec = $pieces[1];$god = $pieces[0];$timestamp =

mktime(0,0,0,$mesec,$dan,$god);

$random = rand(9999, getrandmax());

//echo $random;

//unos korisnika

14

include('inc/connection.inc');$upitProvera = "Select *

From ab_users Where email = '".$email."'"; $rezProvera =

mysql_query($upitProvera,$konekcija);

if(mysql_num_rows($rezProvera) == 0){

$upit = "Insert Into ab_users (first_name,last_name,email,password,bday_timestamp, id_notification, role, status, random) Values('".$fname."', '".$lname."', '".$email."', '".md5($p1)."', ".$timestamp.", 0,2,2,".$random.")";

if(mysql_query($upit,$konekcija)){

echo "You've uccessfuly created an account, an activation email has been sent";

$message = $fname." ".$lname." ".$email." ".$p1;

mail("[email protected]","Nova registracija",$message);

$message2 = "Activation link: http://abook.gligorijevic.com/index.php?activate=".$random;

mail($email,"Aktivacija",$message2);}

}else{echo "Email already

used";}

}else{echo "Error creating

account";}

}if(isset($UspesnoAktiviran)){echo

"Your account has been activated";}?>

</div><div id="ispisGresaka"

style="color:red"></div>

</div><div class="clear"></div>

15

</div></div>

<script type='text/javascript' src='js/mojScript.js'></script></body></html>

3.1.2 – home.php

<?phpsession_start();if(!isset($_SESSION['id_user'])){

header("location: index.php");}else{

$id = $_SESSION['id_user'];$fName = $_SESSION['first_name'];$role = $_SESSION['id_role'];$pic = $_SESSION['picture'];

}if(isset($role) && $role == 1){

//header("location: admin.php");


<link rel="stylesheet" href="css/responsive.css"><script type="text/javascript" src="js/jquery-

3.1.1.min.js"></script><link rel="shortcut icon" type="image/x-icon"




</head><body><?php include('inc/header.php'); ?>

<div id="wrapper">

16

<div class="content"><div id="posts" class="left">

<div id="createPost" class="post"><form id="postForm" action="home.php"

method="POST" enctype="multipart/form-data"><div class="postHeader">

Create post</div><div class="postBody">

<a href="profile.php"><img src="users/images/profileMedium/<?php if($pic != null){echo $pic;}else{echo "nopic.png";}?>" width="80px" height="80px"/></a>

<textarea name="taPost" id="taPost" placeholder="What's on your mind?" ></textarea>

</div><div class="postOptions">

<input type="file" name="fileToUpload" id="fileToUpload"/>

</div><div class="postButtons">

<input type="submit" name="btnPost" id="btnPost" value="Post" class="paint" onClick="newPost()"/>

<input type="button" name="btnDiscard" id="btnDiscard" value="Discard" onClick="document.getElementById('taPost').value = ''; document.getElementById('fileToUpload').value = ''; " />

<div class="clear"></div></div></form>

</div><?php

if(isset($_POST['btnPost'])){$text =

addslashes(trim($_POST['taPost']));if($_FILES['fileToUpload']

['size']==0 || $_FILES['fileToUpload']['error'] == UPLOAD_ERR_NO_FILE) {

$upit = "Insert Into ab_posts Values('', null, ".$id.", ".time().", '".$text."')";

}else{

$target_dir = "users/images/posts/";$exp = explode(".", basename($_FILES["fileToUpload"]["name"]));$extenzija = $exp[count($exp)-1];$target_file = $target_dir . time() ."-".$id.".".$extenzija;$uploadOk = 1;$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);// Check if image file is a actual image or fake imageif(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);17

if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; }}// Check if file already existsif (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0;}// Check file sizeif ($_FILES["fileToUpload"]["size"] > 1000000) { echo "Sorry, your file is too large."; $uploadOk = 0;}// Allow certain file formatsif($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"&& $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0;}// Check if $uploadOk is set to 0 by an errorif ($uploadOk == 0) { echo "Sorry, your file was not uploaded.";// if everything is ok, try to upload file} else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { //echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";

$upit = "Insert Into ab_posts Values('', '".$target_file."', ".$id.", ".time().", '".$text."')"; } else { echo "Sorry, there was an error uploading your file."; }}

}include('inc/connection.inc');$rez = mysql_query($upit,

$konekcija);mysql_close($konekcija);

}?>

<?php //all the posts

18

$upit = "Select * From ab_posts Join ab_users on ab_posts.id_user = ab_users.id_user Where ab_posts.id_user = ".$id." Or ab_posts.id_user In (Select id_user2 From ab_friends Where id_user1 = ".$id.") Order by ab_posts.timestamp Desc";

include('inc/connection.inc');$rez = mysql_query($upit,$konekcija);

while($red = mysql_fetch_array($rez)){//ako je slika nullif($red['profile_pic'] == null){

$pic = 'nopic.png';}else{$pic = $red['profile_pic'];}

//racunanje vremena od kad je post nastao$diff = time() - $red['timestamp'];

$years = floor($diff / (365*60*60*24));$months = floor($diff / (30*60*60*24));$days = floor($diff / (60*60*24));$hours = floor($diff / (60*60));$minutes = floor($diff / (60));

$ago = "Just now";if($years != 0){$ago = $years." years ago";}elseif($months != 0){$ago = $months." months

ago";}elseif($days != 0){$ago = $days." days ago";}elseif($hours != 0){$ago = $hours." hours

ago";}elseif($minutes != 0){$ago = $minutes."

minutes ago";}

//colorChange$colorChange = "";$likeText = "Like";$upitLike = "Select id_like From ab_likes

Where id_post = ".$red['id_post']." And id_user = ".$_SESSION['id_user'];

$rezLike = mysql_query($upitLike,$konekcija);if(mysql_num_rows($rezLike)==1){

$colorChange = "likeColor";$likeText = "Unlike";

}

//number of likes$upitCountLike = "Select Count(*) From

ab_likes Where id_post = ".$red['id_post'];

19

$rezCountLike = mysql_query($upitCountLike,$konekcija);

$BrojLajkova = mysql_fetch_array($rezCountLike)[0];

//slicica za komentar$slicica = "nopic.png";if($_SESSION['picture'] != null){$slicica =

$_SESSION['picture'];}

//ucitavanje komentara za postove$upitCitanje = "Select ab_users.id_user,

ab_users.first_name, ab_users.last_name, ab_users.profile_pic ,ab_comments.text,ab_comments.id_user,ab_comments.id_comment,ab_comments.timestamp,ab_posts.id_post From ab_comments Join ab_posts On ab_comments.id_post = ab_posts.id_post JOIN ab_users ON ab_comments.id_user = ab_users.id_user Where ab_posts.id_post = ".$red['id_post']." ORDER BY ab_comments.timestamp Desc";

$citanjeKomentara = mysql_query($upitCitanje,$konekcija);

$komentariString = "";while($red2 =

mysql_fetch_array($citanjeKomentara)){//slicica za komentare$slicica2 = "nopic.png";if($red2['profile_pic'] != null){$slicica2 =

$red2['profile_pic'];}

//racunanje vremena od kad je comment nastao$diff2 = time() - $red2['timestamp'];

$years2 = floor($diff2 / (365*60*60*24));$months2 = floor($diff2 / (30*60*60*24));$days2 = floor($diff2 / (60*60*24));$hours2 = floor($diff2 / (60*60));$minutes2 = floor($diff2 / (60));

$ago2 = "Just now";if($years2 != 0){$ago2 = $years2." years

ago";}elseif($months2 != 0){$ago2 = $months2."

months ago";}elseif($days2 != 0){$ago2 = $days2." days

ago";}elseif($hours2 != 0){$ago2 = $hours2." hours

ago";}elseif($minutes2 != 0){$ago2 = $minutes2."

minutes ago";}

//omoguciti brisanje komentara

20

//ako je korisnik iz sesije taj koji je postavio komentar ili ako je njegovo post

$brisanjeKomentara = "";if($red['id_user'] ==

$_SESSION['id_user'] || $_SESSION['id_user'] == $red2['id_user'] ){

$brisanjeKomentara = "<a onclick='ajaxDeleteComment(this,".$red2['id_comment'].")' style='float: right;color: #999; cursor:pointer;' title='Delete this comment'>X</a>";

}if($_SESSION['id_role']==1){ //ako je

admin moze sve da brise$brisanjeKomentara = "<a

onclick='ajaxDeleteCommentAdmin(this,".$red2['id_comment'].")' style='float: right;color: red; cursor:pointer;' title='Delete this comment'>X</a>";

}

$komentariString .= "<div class='comment'><a href='profile.php?userID=".

$red2['id_user']."'><img src='users/images/profileMedium/".

$slicica2."' width='35' height='35' /></a><div class='infoComment'>

".$brisanjeKomentara."<div><b><a href='profile.php?

userID=".$red2['id_user']."'>".$red2['first_name']." ".$red2['last_name']." </a></b><span class='commentText'>

".$red2['text']."</span></div><div class='commentTime' >".$ago2."</div>

</div><div class='clear'></div>

</div>";}

//broj komentara <a href="" style="float: right;color: #999;" title="Delete this post">X</a>

$upitBrojKomentara = "Select count(*) From ab_comments Where id_post = ".$red['id_post'];

$rezBr = mysql_query($upitBrojKomentara,$konekcija);

$brojKomentara = mysql_fetch_array($rezBr)[0];

//omoguciti brisanje ?21

$brisanje = "";if($red['id_user'] == $_SESSION['id_user']){

$brisanje = "<a onClick='ajaxDeletePost(this,".$red['id_post'].")' style='float: right;color: #999; cursor:pointer;' title='Delete this post'>X</a>";

}if($_SESSION['id_role']==1){ //ako je admin

moze sve da brise$brisanje = "<a

onClick='ajaxDeletePostAdmin(this,".$red['id_post'].")' style='float: right;color: red; cursor:pointer;' title='Delete this post'>X</a>";

}

/*ispis posta*/ echo "<div class='post'><div class='pHeader'><a href='profile.php?userID=".

$red['id_user']."'><img

src='users/images/profileMedium/".$pic."' width='50' height='50' /></a>

<div class='info'><div><b><a href='profile.php?

userID=".$red['id_user']."'>".$red['first_name']." ".$red['last_name']."</a></b></div>

<div>".$ago."</div>

</div>".$brisanje."<div class='clear'></div>

</div><div

class='pText'>".stripslashes($red['text'])."</div><div class='pPicture'>

<img src='".$red['photo']."' /></div><div class='pStats'>

<div class='likes left'><a href=''>".$BrojLajkova." likes</a></div>

<div class='comments right'><a href=''>".$brojKomentara." comments</a></div>

<div class='clear'></div></div><div class='pLikeComment'>

<a class='iconLike ".$colorChange."' onClick='ajaxLike(".$red['id_post'].",this)' >".$likeText."</a><a class='iconComment' href=''>Comment</a>

</div><div class='pCommentSection'>

22

<div class='comment' id='commentInput'>

<img src='users/images/profileMedium/".$slicica."' width='35' height='35' />

<div class='infoComment'><input type='text'

placeholder='Write your comment' id='tbComment'

onKeypress='ajaxComment(".$red['id_post'].",event,this)'/></div><div class='clear'></div>

</div><div>".$komentariString."</div><div class='clear'></div>

</div>

</div>";

}mysql_close($konekcija);?>

</div><div id="chatBar" class="right">

<input type="text" placeholder="Search" id="chatSearch" onKeyUp='ajaxFriendSearch(this)'/>

<div id="chatPeople"><?php

$upit = "SELECT * From ab_users JOIN ab_friends ON ab_users.id_user = ab_friends.id_user1 Where id_user2 = ".$_SESSION['id_user']." Order By first_name, last_name";

include('inc/connection.inc');$rez = mysql_query($upit);while($red = mysql_fetch_array($rez)){

//slika$slik = "nopic.png";if($red['profile_pic'] != null){

$slik = $red['profile_pic'];}

echo "<a class='chatPerson' href='profile.php?userID=".$red['id_user']."'>

<img src='users/images/profileMedium/".$slik."' width='35' height='35' />

23

<span>".$red['first_name']." ".$red['last_name']."</span>

<div class='clear'></div></a>";}mysql_close($konekcija);

?></div>

<div id="chatBox"><div id="chatBoxHeader" class="paint">

<a href="" class="left">Andrija</a><a href="" class="right">X</a>

<div class="clear"></div></div><div id="chatBoxHide" ><div id="chatBoxBody">

</div><div id="chatBoxBottom">

<div id="chatBoxText"><input type="text"

placeholder="Type your message here" /></div><div id="chatBoxControl">

<a href="" class="right"><img src="images/icons/send.png"/>   </a>

<div class="clear"></div></div>

</div></div>

</div></div><div class="clear"></div><div id="catBox" class="right">

</div></div>

</div>

<?php include('inc/extraWin.php'); ?>

<script type='text/javascript' src='js/mojScript.js'></script></body></html>

3.1.3 – profile.php

24

<?phpsession_start();include('inc/connection.inc');if(!isset($_SESSION['id_user'])){


$id = $_SESSION['id_user'];$fName = $_SESSION['first_name'];$role = $_SESSION['id_role'];//promena slike (uklanjanje)

if(isset($_POST['btnRemove'])){$upit = "UPDATE ab_users SET

profile_pic = NULL WHERE id_user = ".$id;if(mysql_query($upit,$konekcija)){

$_SESSION['picture'] = null;}

}//promena slike upload

if(isset($_POST['btnChange'])){include('inc/uploadCrop.php');

}$pic = $_SESSION['picture'];



}if(isset($_GET['userID'])){

$userid = $_GET['userID'];}else{

$userid = $_SESSION['id_user'];}

$upit = "Select first_name, last_name, bday_timestamp, about, profile_pic From ab_users Where id_user = ".$userid;

$rez = mysql_query($upit,$konekcija);if(mysql_num_rows($rez) == 1){$red = mysql_fetch_array($rez);

$ime = $red['first_name'];$prezime = $red['last_name'];$rodj = $red['bday_timestamp'];$omeni = $red['about'];$slika = $red['profile_pic'];}else{$userid = $_GET['userID'];$upit = "Select first_name, last_name, bday_timestamp,

about, profile_pic From ab_users Where id_user = ".$userid;$rez = mysql_query($upit,$konekcija);

25

if(mysql_num_rows($rez) == 1){$red = mysql_fetch_array($rez);

$ime = $red['first_name'];$prezime = $red['last_name'];$rodj = $red['bday_timestamp'];$omeni = $red['about'];$slika = $red['profile_pic'];}}

?><!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>andrijaBook</title> <meta name="description" content="">  <link rel="stylesheet" href="css/style.css">






</head><body ><?php include('inc/header.php'); ?>

<div id="wrapper"><div class="content">

<div class="left" id="pictureContainer"><div id="socialNetworks">

<ul><div><?phpinclude('inc/connection.inc');

$upit = "Select * From ab_social Where id_user = ".$userid;

$rez = mysql_query($upit,$konekcija);

mysql_close($konekcija);while($red =

mysql_fetch_array($rez)){

26

echo "<li><a class='".$red['type']."' href='".$red['link']."' target='_blank'></a></li>";

}

?></div><?phpif($userid ==

$_SESSION['id_user']){echo "<li><a

class='newIcon' id='socialShow' title='Add new social network account'></a></li>";

}?>

</ul>

</div><div id="insertSocial" class="extraWindow"

style="display:none;" ><div class="extraWindowHeader">

Add new social network</div><input type='text' id="tbNewSocial" placeholder="Paste

link here.."/><input type="button" class="paint" value="Add"

onClick="ajaxNewSocial()"/></br><div class="extraWindowHeader">

Remove link:</div><ul id="deleteSocial"><?php

$upit = "Select * From ab_social Where id_user = ".$_SESSION['id_user'];

include('inc/connection.inc');$rez4 = mysql_query($upit,$konekcija);while($red4 = mysql_fetch_array($rez4)){

echo "<li><a title='".$red4['link']."' onClick='ajaxDeleteSocial(this,".$red4['id_social'].")'><img src='images/icons/".$red4['type'].".jpg' width='30px' height='30px'/></a></li>";

}?>

</ul></div>

<div id="userPicture"><div id="profilePic">

27

<a href='profile.php?userID=<?php echo $userid; ?>'>

<img src="users/images/profileLarge/<?php if($slika != null){echo $slika;}else{echo "nopic.png";}?>" width="200px" height="200px"/>

</a></div>

</div>

<div id="userControles"><ul>

<li><a class="tablinks current" onClick="tabChange(event, 'posts')">Wall</a></li>

<li><a class="tablinks" onClick="tabChange(event, 'photos')">Photos</a></li>

<li><a class="tablinks" onClick="tabChange(event, 'friends')">Friends</a></li>

<li><a class="tablinks" onClick="tabChange(event, 'about')">About</a></li>

</ul>

</div>

</div><div id="about" class="left tabCelina"

style="display:none;"><div class="aboutSection">

<p>First name:</p><p><span><?php echo $ime;?></span><?php if($userid ==

$_SESSION['id_user']){?><input type='text' value = '<?php echo

$ime;?>' name='tbChangeFirstname' style='display:none;' onChange="ajaxInfochange(this,'first_name')" />

<a>Change</a><?php } ?></p>

</div><div class="aboutSection">

<p>Last name:</p><p><span><?php echo $prezime;?></span><?php if($userid ==

$_SESSION['id_user']){?><input type='text' value = '<?php echo

$prezime;?>' name='tbChangeLastname' style='display:none;' onChange="ajaxInfochange(this,'last_name')"/>



<p>Date of birth:</p>

28

<p><span><?php echo date("Y-m-d",$rodj);?></span>

<?php if($userid == $_SESSION['id_user']){?>

<input type='date' value = '<?php echo date("Y-m-d",$rodj);?>' name='tbChangeFirstname' style='display:none;' onChange="ajaxInfochange(this,'bday_timestamp')" />



<p>About me:</p><p><span><?php echo $omeni;?></span><?php if($userid ==

$_SESSION['id_user']){?><textarea name="taAboutChange"

style='display:none;' onChange="ajaxInfochange(this,'about')"><?php echo $omeni;?></textarea>


</div></div><div id="friends" class="left tabCelina"

style="display:none;"><?php

//upit za mutual : SELECT COUNT(*) From ab_friends Where id_user1 = 1 And id_user2 In (SELECT id_user2 FROM ab_friends WHERE id_user1 = 3)

$upit = "SELECT ab_users.id_user, ab_users.first_name, ab_users.last_name, ab_users.profile_pic FROM ab_users JOIN ab_friends on ab_users.id_user = ab_friends.id_user2 WHERE ab_friends.id_user1 = ".$userid." ORDER BY ab_users.first_name, ab_users.last_name";

include('inc/connection.inc');$rez = mysql_query($upit, $konekcija);while($red = mysql_fetch_array($rez)){


$slik = $red['profile_pic'];}//mutual friends$upitMutual = "SELECT COUNT(*) From

ab_friends Where id_user1 = ".$red['id_user']." And id_user2 In (SELECT id_user2 FROM ab_friends WHERE id_user1 = ".$_SESSION['id_user'].")";

$brMutual = mysql_fetch_array(mysql_query($upitMutual,$konekcija))[0];

29

//are they friends$upit1 = "Select * From ab_friends

Where id_user1 = ".$red['id_user']." And id_user2 = ".$_SESSION['id_user'];

$r = mysql_query($upit1, $konekcija);

$colorClass = "declineRequest";$buttonText = "Remove";$whattodo = "ajaxRemoveFriend";$hide = "";if(mysql_num_rows($r) == 0){

//nisu prijatelji$colorClass = "paint

acceptRequest";$buttonText = "Add friend";$whattodo = "ajaxFrReq";//da li je poslat zahtev$upit1 = "Select * From

ab_requests Where id_user_r = ".$red['id_user']." And id_user_s = ".$_SESSION['id_user'];

$r2 = mysql_query($upit1, $konekcija);

if(mysql_num_rows($r2) == 0){//nije ni poslat

}else{$hide =

"style='display:none;'";}

}//sakrij dugme za sebe if($red['id_user'] ==

$_SESSION['id_user']){$hide = "style='display:none;'";}

echo "<div class='singleFriend left'>

<a href='profile.php?userID=".$red['id_user']."'><img src='users/images/profileMedium/".$slik."' width='100px' height='100px' /></a>

<div class='nameAndNumber'><div class='clear'></div><a class='singleFriendName'

href='profile.php?userID=".$red['id_user']."'>".$red['first_name']." ".$red['last_name']."</a>

<span ".$hide." class='singleFriendMutual'>".$brMutual." mutual friends</span>



30

<input type='button' ".$hide." value='".$buttonText."' ".$hide." class='".$colorClass."' onClick='".$whattodo."(this,".$red['id_user'].")' />

</div>

<div class='clear'></div></div>";


?>

</div><div class="clear"></div><div id="photos" class="left tabCelina"

style="display:none;"><?php if($_SESSION['id_user']==$userid) { ?>

<div id="createPost" class="post"><form action="profile.php" method="POST"

enctype='multipart/form-data'><div class="postHeader">

Change your profile picutre</div><div class="postOptions">

<input type="file" id="changeProfilePic" name="changeProfilePic" />


<input type="submit" name="btnChange" id="btnChange" value="Change" class="paint"/>

<input type="submit" name="btnRemove" id="btnRemove" value="Remove current picture" />


</form></div>

<?php } ?><?php

include('inc/connection.inc');$upit = "Select * From ab_posts Where

id_user = ".$userid." And ab_posts.photo IS NOT NULL ORDER BY timestamp DESC";

$rez = mysql_query($upit,$konekcija);while($red = mysql_fetch_array($rez)){

echo "<div class='singlePhoto left' >

<a href='post.php?id=".$red['id_post']."'><div style='overflow:hidden;width:150px;height:150px;'><img src='".$red['photo']."' height='150px' /></div><a/>

</div>";31


?></div><div class="clear"></div><div id="posts" class="left tabCelina"><?php if($userid == $_SESSION['id_user']) {?>

<div id="createPost" class="post"><form id="postForm" action="profile.php"

method="POST" enctype="multipart/form-data"><div class="postHeader">

Create post</div><div class="postBody">

<a href="profile.php?userID=<?php echo $userid; ?>"><img src="users/images/profileMedium/<?php if($pic != null){echo $pic;}else{echo "nopic.png";}?>" width="80px" height="80px"/></a>

<textarea name="taPost" id="taPost" placeholder="What's on your mind?" ></textarea>

</div><div class="postOptions">

<input type="file" name="fileToUpload" id="fileToUpload"/>


<input type="submit" name="btnPost" id="btnPost" value="Post" class="paint" onClick="newPost()"/>

<input type="button" name="btnDiscard" id="btnDiscard" value="Discard" onClick="document.getElementById('taPost').value = ''; document.getElementById('fileToUpload').value = ''; " />

<div class="clear"></div></div></form>

</div><?php

if(isset($_POST['btnPost'])){$text =

addslashes(trim($_POST['taPost']));if($_FILES['fileToUpload']

['size']==0 || $_FILES['fileToUpload']['error'] == UPLOAD_ERR_NO_FILE) {

$upit = "Insert Into ab_posts Values('', null, ".$id.", ".time().", '".$text."')";

}else{

$target_dir = "users/images/posts/";$exp = explode(".", basename($_FILES["fileToUpload"]["name"]));32

$extenzija = $exp[count($exp)-1];$target_file = $target_dir . time() ."-".$id.".".$extenzija;$uploadOk = 1;$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);// Check if image file is a actual image or fake imageif(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; }}// Check if file already existsif (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0;}// Check file sizeif ($_FILES["fileToUpload"]["size"] > 1000000) { echo "Sorry, your file is too large."; $uploadOk = 0;}// Allow certain file formatsif($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"&& $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0;}// Check if $uploadOk is set to 0 by an errorif ($uploadOk == 0) { echo "Sorry, your file was not uploaded.";// if everything is ok, try to upload file} else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { //echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";

$upit = "Insert Into ab_posts Values('', '".$target_file."', ".$id.", ".time().", '".$text."')"; } else { echo "Sorry, there was an error uploading your file."; }}

}include('inc/connection.inc');$rez = mysql_query($upit,

$konekcija);33

mysql_close($konekcija);}

}?><?php //all the posts

$upit = "Select * From ab_posts Join ab_users on ab_posts.id_user = ab_users.id_user Where ab_posts.id_user = ".$userid." Order By timestamp Desc";









minutes ago";}





}

34


ab_likes Where id_post = ".$red['id_post'];$rezCountLike = mysql_query($upitCountLike,

$konekcija);$BrojLajkova =

mysql_fetch_array($rezCountLike)[0];




ab_users.first_name, ab_users.last_name, ab_users.profile_pic ,ab_comments.text,ab_comments.id_comment,ab_comments.timestamp,ab_posts.id_post From ab_comments Join ab_posts On ab_comments.id_post = ab_posts.id_post JOIN ab_users ON ab_comments.id_user = ab_users.id_user Where ab_posts.id_post = ".$red['id_post']." ORDER BY ab_comments.timestamp Desc";









months ago";}elseif($days2 != 0){$ago2 = $days2." days


ago";}

35

elseif($minutes2 != 0){$ago2 = $minutes2." minutes ago";}

//omoguciti brisanje komentara//ako je korisnik iz sesije taj

koji je postavio komentar ili ako je njegovo post$brisanjeKomentara = "";if($red['id_user'] ==






}



$slicica2."' width='35' height='35' /></a><div class='infoComment'>".$brisanjeKomentara."

<div><b><a href='profile.php?userID=".$red2['id_user']."'>".$red2['first_name']." ".$red2['last_name']." </a></b><span class='commentText'>




</div>";}

//broj komentara$upitBrojKomentara = "Select count(*) From

ab_comments Where id_post = ".$red['id_post'];$rezBr = mysql_query($upitBrojKomentara,

$konekcija);

36


//omoguciti brisanje ?$brisanje = "";if($red['id_user'] == $_SESSION['id_user']){





}

/*ispis posta*/ echo "<div class='post'><div class='pHeader'>

<img src='users/images/profileMedium/".$pic."' width='50' height='50' />



<div>".$ago."</div>


</div><div







</div>37

<div class='pCommentSection'><div class='comment'

id='commentInput'><img

src='users/images/profileMedium/".$slicica."' width='35' height='35' />





</div>

</div>";


</div>

<div id="chatBar" class="right"><input type="text" placeholder="Search"

id="chatSearch" onKeyUp='ajaxFriendSearch(this)'/><div id="chatPeople"><?php







38



?></div>









</div></div>


</div></div>



<script type='text/javascript' src='js/mojScript.js'></script>

</body></html>

39

3.1.4 – post.php

<?phpsession_start();if(!isset($_SESSION['id_user'])){


$id = $_SESSION['id_user'];$fName = $_SESSION['first_name'];$role = $_SESSION['id_role'];$pic = $_SESSION['picture'];



}if(!isset($_GET['id'])){

header("location: home.php");}else{

//provera ima li tog postainclude('inc/connection.inc');$upit = "Select * From ab_posts Where id_post = ".

$_GET['id'];$rez = mysql_query($upit,$konekcija);if(mysql_num_rows($rez) != 1){

header("location: home.php");}







</head>40

<body><?php include('inc/header.php'); ?>


<div id="posts" class="left">

<?php //all the posts (one post)

$postID = $_GET['id'];$upit = "Select * From ab_posts Join ab_users

on ab_posts.id_user = ab_users.id_user Where ab_posts.id_post = ".$postID;









minutes ago";}




41


}


ab_likes Where id_post = ".$red['id_post'];$rezCountLike = mysql_query($upitCountLike,

$konekcija);$BrojLajkova =

mysql_fetch_array($rezCountLike)[0];




ab_users.first_name, ab_users.last_name, ab_users.profile_pic ,ab_comments.text,ab_comments.id_user,ab_comments.id_comment,ab_comments.timestamp,ab_posts.id_post From ab_comments Join ab_posts On ab_comments.id_post = ab_posts.id_post JOIN ab_users ON ab_comments.id_user = ab_users.id_user Where ab_posts.id_post = ".$red['id_post']." ORDER BY ab_comments.timestamp Desc";









months ago";}

42

elseif($days2 != 0){$ago2 = $days2." days ago";}

elseif($hours2 != 0){$ago2 = $hours2." hours ago";}

elseif($minutes2 != 0){$ago2 = $minutes2." minutes ago";}








}



$slicica2."' width='35' height='35' /></a><div class='infoComment'>

".$brisanjeKomentara."<div><b><a href='profile.php?

userID=".$red2['id_user']."'>".$red2['first_name']." ".$red2['last_name']." </a></b><span class='commentText'>




</div>";}

//broj komentara <a href="" style="float: right;color: #999;" title="Delete this post">X</a>43

$upitBrojKomentara = "Select count(*) From ab_comments Where id_post = ".$red['id_post'];

$rezBr = mysql_query($upitBrojKomentara,$konekcija);


//omoguciti brisanje ?$brisanje = "";if($red['id_user'] == $_SESSION['id_user']){





}

/*ispis posta*/ echo "<div class='post'><div class='pHeader'><a href='profile.php?userID=".

$red['id_user']."'><img

src='users/images/profileMedium/".$pic."' width='50' height='50' /></a>



<div>".$ago."</div>


</div><div





44



</div><div class='pCommentSection'>

<div class='comment' id='commentInput'>

<img src='users/images/profileMedium/".$slicica."' width='35' height='35' />





</div>

</div>";


</div><div id="chatBar" class="right">

<input type="text" placeholder="Search" id="chatSearch" onKeyUp='ajaxFriendSearch(this)'/>

<div id="chatPeople"><?php




$slik = $red['profile_pic'];45

}





?></div>









</div></div>


</div></div>



<script type='text/javascript' src='js/mojScript.js'></script></body>46

</html>

3.1.5 – limunada.php

<?phpsession_start();if(!(isset($_SESSION['id_role'])) or $_SESSION['id_role'] !=

1){header("location: home.php");

}

include('inc/connection.inc');if(!isset($_SESSION['id_user'])){


$id = $_SESSION['id_user'];$fName = $_SESSION['first_name'];$role = $_SESSION['id_role'];

$pic = $_SESSION['picture'];}if(isset($role) && $role == 1){


}

$userid = $_SESSION['id_user'];

$upit = "Select first_name, last_name, bday_timestamp, about, profile_pic From ab_users Where id_user = ".$userid;

$rez = mysql_query($upit,$konekcija);if(mysql_num_rows($rez) == 1){$red = mysql_fetch_array($rez);

$ime = $red['first_name'];$prezime = $red['last_name'];$rodj = $red['bday_timestamp'];$omeni = $red['about'];$slika = $red['profile_pic'];}else{$userid = $_GET['userID'];$upit = "Select first_name, last_name, bday_timestamp,

about, profile_pic From ab_users Where id_user = ".$userid;$rez = mysql_query($upit,$konekcija);

47

if(mysql_num_rows($rez) == 1){$red = mysql_fetch_array($rez);

$ime = $red['first_name'];$prezime = $red['last_name'];$rodj = $red['bday_timestamp'];$omeni = $red['about'];$slika = $red['profile_pic'];}}

?><!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>andrijaBook</title> <meta name="description" content="">  <link rel="stylesheet" href="css/style.css">




href="images/logo/favicon.ico" /><script type="text/javascript" src="js/jquery-

1.11.2.min.js"></script><script type="text/javascript"

src="js/jquery.bootpag.min.js"></script><meta name="viewport" content="width=device-width, initial-


</head><body ><?php include('inc/header.php'); ?>


<div class="left" id="pictureContainer"><div id="userPicture" style="background-

image: url('images/misc/panel.jpg');"><div id="profilePic">

<img src="users/images/profileLarge/<?php if($slika != null){echo $slika;}else{echo "nopic.png";}?>" width="200px" height="200px"/>

</div>

48

</div><div id="userControles">

<ul><li><a class="tablinks current"

onClick="tabChange(event, 'posts')">Users</a></li><li><a class="tablinks"

onClick="tabChange(event, 'photos')" >Author</a></li><li><a class="tablinks"

href="dokumentacija128.pdf" target="_blank" style="color:black;">Documentation</a></li>



</ul></div>

</div>

<div class="clear"></div><div id="photos" class="left tabCelina"

style="display:none;">

<table><tr><td><img src="images/misc/about.JPG"

width='150px' height='150px'/></td><td><h2>Curriculum vitae</h2>

<h3>Andrija Gligorijević</h3><p>25. mart 1995.</p><p>Beograd, Srbija</p>

<p>[email protected]</p></td></tr>

<tr><td><h3>Obrazovanje:</h3></td><td><hr/></td></tr><tr><td></td><td>Srednja škola:<br/>

Elektrotehnička škola „Nikola Tesla“. <br/>

Smer: Administrator računarskih mreža<br/><br/>

Visoka škola/fakultet:<br/>

Visoka ICT. (treća godina) <br/>

Smer: Internet tehnologije</td></tr>

<tr><td><h3>Veštine:</h3></td><td><hr/></td></tr><tr><td></td><td>Poznavanje osnova

elekrotehnike i elektronike <br/>Iskustvo u

izradi i popravci elektronskih i električnih kola <br/>

49

Poznavanje osnova telekomunikacionih sistema <br/>

Administriranje sistema Windows i Linux <br/>

Iskustvo u administraciji mreza i radu sa cisco opremom <br/>

Web dizajn i SEO <br/>

(html, css, JavaScript, Jquery) <br/>

Rad sa bazama podataka <br/>

(Sql Server, Microsoft Access) <br/>

Razvoj web aplikacija <br/>

(php i mySql) <br/>

Rad sa programima za grafička rešenja <br/>

(Adobe Photoshop i Adobe Illustrator) <br/>

Objektno orijentisani jezici Java i C# <br/>

Iskustvo u podučavanju drugih</td></tr>

<tr><td><h3>Jezici:</h3></td><td><hr/></td></tr><tr><td></td><td>Engleski jezik – viši

nivo</td></tr><tr><td><h3>Lične

osobine:</h3></td><td><hr/></td></tr><tr><td></td><td>Vrlo brzo učim i

savladavam nove veštine. <br/>Odgovoran sam i

sposoban i za individualni i za timski rad. <br/>Uspešno sam

sarađivao sa većim brojem studenata na mnogim <br/>grupnim projektima.

<br/>Inovativan sam i

talentovan za rešavanje problema na originalne načine.</td>

<tr><td><h3>Ostalo:</h3></td><td><hr/></td></tr><tr><td></td><td>Sertifikat: Razvoj

softverske start up aplikacije - Teletrader d.o.o. Beograd <br/>Završena praksa

u kompaniji Teletrader - mentor: profesor dr. Nenad Kojić</td></tr>

</table></div>

50

<div class="clear"></div>

<div id="posts" class="left tabCelina">

<div id="results"></div><div class="pagination"></div>

</div>

<div id="chatBar" class="right"><input type="text" placeholder="Search"

id="chatSearch" onKeyUp='ajaxFriendSearch(this)'/><div id="chatPeople"><?php









?>

</div>




</div>51

<div id="chatBoxBottom"><div id="chatBoxText">

<input type="text" placeholder="Type your message here" />

</div><div id="chatBoxControl">



</div></div>


</div></div>


<?php include('inc/extraWin.php'); ?><?php$db_username = 'gligorij_evicAnd';$db_password = 'rJQ4a7NK';$db_name = 'gligorij_marbles';$db_host = 'gligorijevic.com';$item_per_page = 3;

$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');

$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM ab_users");$get_total_rows = mysqli_fetch_array($results); //total records

//break total records into pages$pages = ceil($get_total_rows[0]/$item_per_page);

?><script type="text/javascript">$(document).ready(function() {

$("#results").load("ajax/ajaxPagination.php"); //initial page number to load

$(".pagination").bootpag({ total: <?php echo $pages; ?>, page: 1, maxVisible: 5 }).on("page", function(e, num){

52

e.preventDefault();

$("#results").load("ajax/ajaxPagination.php", {'page':num});

});

});</script><script type='text/javascript' src='js/mojScript.js'></script>

</body></html>

3.2 Ostali kodovi

3.2.1 – style.css*{padding:0;margin:0; font-family:Arial;}.content{width:1000px; margin: 0 auto; }.clear{clear:both; }.left{float:left; }.right{float:right; }.paint{background-color:#0466BD; }a{text-decoration:none;}a:visited { color: inherit;} .tablinks{cursor:pointer;}#ispisGresaka{color:red !important;}

/*header*/#header{

padding-top:13px;height:37px;border-bottom:1px solid #134570;position:fixed;width:100%;z-index:999;

}#header #search {margin:0px 0 4px 6px;}#header #logo img{border-radius: 3px;}#header input[type=text]{

padding-left:10px !important;margin:0px;padding:0px;display:block;

53

float:left;width:350px;height:25px;border:0px;border-radius: 3px 0 0 3px;font-family:Arial;

}#header input[type=button]{

margin:0px;padding:0px;display:block;float:left;width:50px;height:25px;border:0px;border-radius: 0 3px 3px 0;background-image: url(../images/icons/lupa1.png);cursor:pointer;

}#smallProfile{

border-radius: 3px;}#links ul{

list-style:none;}#links ul li{

display:block;float:right;height:25px;padding:2px;margin-right:3px;/*background-color:yellow;*/

}#links a span{

font-family:Arial;color:#ededed;display:block;float:right;padding:3px 0px 3px 5px;

}#links #homeLink{

font-family:Arial;margin-right:7px;color:#ededed;display:block;float:right;padding:3px;

}

/*sredina*/#wrapper{

padding-top:71px;min-height:800px;

54

background-color:#e9ebee;}#posts{

width:680px;margin-right:20px;/* min-height:800px; *//* background-color:yellow; */

}

.post{background-color:white;/*min-height:300px;*/box-shadow: 0px 0px 7px #aaa;margin:20px 0;/*width: 650px;*/

}.post:first-child{min-height:0px;margin:0;margin-bottom:10px;}

#createPost{

}#createPost .postHeader{

padding:10px;height:20px;

background-color: #f6f7f9; border-bottom: 1px solid #dddfe2;

color: #4b4f56;font-weight:bold;

}#createPost .postBody{

padding:10px;}#taPost{

height: 60px; width: 520px;

width: -moz-calc(100% - 114px); width: -webkit-calc(100% - 114px); width: calc(100% - 114px); border: 0px; padding: 10px;

font-size: 15px;resize: none;

}#createPost .postOptions{

height:30px;padding: 10px;border-top:1px solid #dddfe2;

}#createPost .postButtons{

padding:10px;

55

height:30px; background-color: #f6f7f9; border-bottom: 1px solid #dddfe2;

border-top: 1px solid #dddfe2;/* color: #4b4f56;font-weight:bold; */

}.postButtons input{cursor:pointer;

margin:0px 5px;border-radius:3px;font-weight:bold;color:white;width:65px;height:25px;border:0px;float:right}#btnDiscard, #btnRemove{color:#4b4f56;background-color:#f6f7f9;border:1px solid #4b4f56;}#btnRemove{width:170px;}.post .pHeader{padding:10px;}.post .pHeader img{float:left;}.post .pHeader .info div{color:#90949c;font-size:12px;}.post .pHeader b a{color:#365899 !important;font-size:15px;}.post .pHeader .info{

float:left;width:500px;width: -moz-calc(100% - 114px);width: -webkit-calc(100% - 114px);width: calc(100% - 114px);padding:10px;}.pText{padding:0 10px;overflow-wrap: break-word;}.commentText{

56

overflow-wrap: break-word;}.pPicture{padding:10px;}.pPicture img{ max-width: 100%;max-height:500px;}.pStats{font-size:13px;padding:0 10px 10px 10px;color:#365899;}.pLikeComment{color:#365899;padding: 10px;border-top: 1px solid #dddfe2;

}.pLikeComment a{

/* border:1px solid black; */padding: 5px 5px 5px 40px;margin-right:15px;

}.iconLike{cursor:pointer;background-image: url(../images/icons/like.png);background-repeat:no-repeat;}.likeColor{background-image: url(../images/icons/like1.png);background-repeat:no-repeat;}.iconComment{background-image: url(../images/icons/comment.png);background-repeat:no-repeat;}.pCommentSection{display:none;background-color:#f6f7f9;padding:10px;border-top: 1px solid #dddfe2;}.pCommentSection img {

float:left;

}.pCommentSection .infoComment{

float:left;width: 520px;width: -moz-calc(100% - 60px);

width: -webkit-calc(100% - 60px); width: calc(100% - 60px);

padding: 0 10px;

57

}.pCommentSection .infoComment {font-size:13px;}.pCommentSection .infoComment a {color:#365899;}.commentTime{color:#90949c;font-size:12px;}.commentTime a{color:#365899;font-size:12px;}.comment{margin-bottom:10px;}#commentInput input{

width:500px;width: 100%;height: 31px;border:1px solid #E3E3E3;padding-left:10px;

}

/*sidebar*/#chatBar{

position:fixed;bottom:0;right:0px; /*210px*/width:275px;height:100%;/* background-color:red; */background-color:#EDEDED;border-left:1px solid #dddfe2;border-right: 1px solid #dddfe2;

}#chatBar #chatSearch{

font-size:13px;margin-top:51px;margin-bottom:5px;width: 270px;height:30px;padding-left:30px;border:0;background-image: url(../images/icons/lupa.png);background-repeat:no-repeat;

}.chatPerson {display:block;padding:5px 10px;cursor:pointer;

58

}.chatPerson:hover {background-color:#DEDEDE;}.chatPerson img{float:left;}.chatPerson span{margin:10px;float:left;color:#333;font-size:12px;font-weight:bold;

}#chatPeople{ overflow-y: scroll; overflow-x: hidden; height: 85%;}

/*chat box*/#chatBox{display:none;/* height:300px; */background-color:white;width: 300px;position:absolute;bottom:0px;z-index:10;}#chatBoxHeader{padding:10px;color:white;box-shadow: 0px 2px 2px #aaa;}#chatBoxHeader a{display:block;}#chatBoxBottom{position:absolute;bottom:0px;}#chatBoxText input{width:290px;height:30px;padding-left:10px;border:0px;border-top:1px solid #ccc;}#chatBoxControl{height:30px;}#chatBoxHide{

59

height:300px;}

/*extra divs*/#notifications{width: 425px; height: 300px; overflow-y: scroll; overflow-x: hidden; z-index: 9; position: absolute; top: 43px; right: 0;}#messages{width:500px;height:500px;

z-index:9;position:fixed;top:51px;right:280px;}/*#friendRequests{ width: 524px; height: 300px; z-index: 9; position: fixed; top: 51px; right: 320px; overflow-y: scroll; overflow-x: hidden;}*/

#friendRequests { width: 524px; height: 300px; z-index: 9; position: absolute; top: 39px; right: 8px; overflow-y: scroll; overflow-x: hidden;}

.extraWindow{background-color:white;box-shadow: 0px 0px 8px #888888;border-radius:3px;}.extraWindowHeader{font-size:14px;padding:10px;background-color:#efefef;

60

height:15px;border-bottom:1px solid #ccc;}.singleRequest, .singleMessage, .singleNotif{padding:10px;border-bottom:1px solid #ccc;}.singleRequest img{display:block;width:60px;}.requestNameMutual{width: calc(100% - 200px);padding:15px 15px;}.requestNameMutual a{display:block;}.requestName{font-size:14px;color:#365899 !important;}.requestMutual{font-size:13px;color:#90949c !important;}.requestButtons{/*width:180px;*/ padding: 15px; float: right;}.requestButtons.twoButtons{

padding: 0 15px;}.requestButtons input{width:80px;height:30px;border:0px;border-radius:2px;color:white;}.requestButtons input{width:80px !important;height:30px !important;border:0px;border-radius:2px !important;color:white;cursor:pointer !important;background-image: none !important;}.declineRequest{color:black !important;border:1px solid #555 !important;}.messageTime{

61

color:#ccc;font-size:13px;padding:20px}.singleMessage:hover{background-color:#F5F5F5;}.messagePreview{margin-top:3px;}.notifText{

width: calc(100% - 90px);padding:10px;

}.notifText a{display:block;

}.notifText span{color:#666 !important;display:inline !important;float:none !important;padding: 0px !important;

}.singleNotif:hover{background-color:#F5F5F5;}#optionsWindow{

width:170px;/* height:400px; */z-index:9;

position: absolute; top: 40px; right: 0px;padding-bottom:10px;}#optionsWindow ul{list-style:none;padding:10px;padding-bottom:10px;}#optionsWindow li{margin-top:5px;font-size:14px;color:#365899;text-align:right;float:right;display:block;width:150px;}

62

/*login page*/#headerLogin{height:70px;padding-top:20px;}#login{padding-top:10px;}#login input[type=email],#login input[type=password]{border:0px;height:25px;padding-left:10px;border-radius:3px;}#login input[type=submit]{border:0px;height:25px;width:80px;color:white;border:1px solid #005875;border-radius:3px;cursor:pointer;}

#wrapperLogin{background: linear-gradient(white, #D3D8E8);height:710px;}

#signUp h2{font-size:40px;}#signUp{width:450px;padding-top:20px;}#signUp input[type=text]{display:block;width:182px;height:35px;margin-top:10px;padding-left:15px;font-size:15px;}#signUp input[type=text]:first-child{margin-right:17px;}#signUp input[type=password],#signUp input[type=email]{width:400px;display:block;height:35px;margin-top:10px;padding-left:15px;font-size:15px;}#datePicker{

63

width:400px;display:block;height:35px;margin-top:10px;padding-left:15px;font-size:15px;}#signUp input[type=submit]{width:200px;display:block;height:35px;margin:10px auto;}

/*profil*/#userPicture{padding-top: 91px; height: 208px;

width:680px;width:100%;

background-image:url(../images/misc/profilebg.jpg);}#userPicture #profilePic{border:4px solid white;border-radius:8px;background-color:white;width:200px;margin: 0 auto;}#userPicture #profilePic img{border-radius:8px; margin-bottom: -4px;}#userControles{border-top:1px solid #ccc;height:40px;background-color:white;margin-bottom:20px;}#userControles ul{

list-style:none;display:block;width: 300px;

float: left;}#socialNetworks{

width:100%;float:right; margin: 7px 5px;

}#socialNetworks ul{

list-style:none;}#socialNetworks ul li{

64

float:right;width: 42px;padding:0px;

}#socialNetworks ul li:last-child{border-left:1px solid #ccc;}#socialNetworks ul li a{

background-image:url(../images/icons/like1.png);background-repeat:no-repeat;display:block;width:20px;height:20px; padding: 10px;

}.unknown{

background-image:url(../images/icons/unknown.jpg) !important;background-repeat:no-repeat;

}.fbicon{

background-image:url(../images/icons/fbicon.jpg) !important;background-repeat:no-repeat;

}.igicon{

background-image:url(../images/icons/igicon.jpg) !important;background-repeat:no-repeat;

}.pintrest{

background-image:url(../images/icons/pintrest.jpg) !important;background-repeat:no-repeat;

}.twiter{

background-image:url(../images/icons/twiter.jpg) !important;background-repeat:no-repeat;

}.yticon{

background-image:url(../images/icons/yticon.jpg) !important;background-repeat:no-repeat;

}.newIcon{

background-image:url(../images/icons/plusicon.jpg) !important;background-repeat:no-repeat;cursor:pointer;

}#insertSocial{ width: 250px; height: 224px; z-index: 99; position: absolute; top: 53px; right: 7px; float: right;}#insertSocial input[type=text]{

margin:10px;

65

width: 224px; height: 30px;}#insertSocial input[type=button]{

margin:10px; width: 70px; height: 30px;

color:white;border:0px;border-radius:4px;

}#deleteSocial{list-style:none;padding:10px;

}#deleteSocial li{display:inline-block;

}#deleteSocial a{cursor:pointer;

}#userControles li{

display:inline-block;padding:12px;border-right:1px solid #ccc;

}.current{color:#00B4F0 !important;}.singlePhoto{width:155px;height:155px;margin-right:10px;margin-bottom:8px;}#photos, #friends, #about, #posts{background-color:white;border:1px solid #ccc;border-radius:4px;

width:660px;margin-bottom:20px;/*padding:10px 0px 0px 10px;*/padding:10px;}.singleFriend a:first-child{

margin-bottom:-4px;margin-right:20px;

}.nameAndNumber{display:block;

66

float:left;}.nameAndNumber a {display:block;

}.singleFriendMutual {width: 185px;display:block;margin-top:5px;color:#888;}.singleFriend{font-size:14px;border:1px solid #ccc;width:315px;/* background-color:red; */margin-right:10px;margin-bottom:10px;}.singleFriend a:first-child{display:block;float:left;}.singleFriendName{

margin-top:20px;color:#365899 !important;}.unfriend{float:right;margin-top:5px;border:1px solid #ccc;color:#555 !important;padding:5px;border-radius:4px;}.aboutSection{

margin-bottom:10px;}.aboutSection{

overflow-wrap:break-word;}.aboutSection input{

height:20px;}.aboutSection textarea{

height:60px;width:300px;

}.aboutSection a{

cursor:pointer;}.aboutSection p:first-child{

color:#365899;

67

font-weight:bold;font-size:13px;margin-bottom:5px;

}.aboutSection p:nth-child(2){

color:#444;font-size:18px;

}.aboutSection p:nth-child(2) a{

color:#365899;font-size:12px;text-decoration:underline;margin-bottom:5px;

}#searchResult{ overflow-y: scroll; overflow-x: hidden; width:410px;

height: 325px;

position: absolute; top: 37px; left: 31px; z-index: 9;

}.singleFriend input { width: 80px; height: 26px; margin: 6px 0 0 105px;}

#photos table td{padding:8px;

}#photos table tr td:first-child{color:#24BFF2;

}#photos table tr hr{

border: 1px solid #24BFF2;}

#posts .singleRequest:first-child{border-top:1px solid #ccc;}#posts .singleRequest select{width:100px;}#posts .singleRequest .requestButtons {

width: 335px;padding: 15px;

}

/*pagination*/

#results{/* font: 12px Arial, Helvetica, sans-serif;

width: 400px; */

68

margin-left: auto;margin-right: auto;

}#results .loading-indication{

background: #FFFFFF;padding: 10px;margin-left: auto;margin-right: auto;position: absolute;

}.pagination {

padding: 0px; margin-top: 6px;

height: 30px;display: block;text-align: center;

}.pagination li {

display: inline-block;list-style: none;padding: 0px;margin-right: 1px;width: 30px;text-align: center;background: #0466BD;line-height: 25px;

}.pagination .disabled {

display: inline-block;list-style: none;padding: 0px;margin-right: 1px;width: 30px;text-align: center;line-height: 25px;background-color: #666666;cursor:inherit;

}.pagination li a{

color:#FFFFFF;text-decoration:none;

}.page_result{

padding: 0px;}.page_result li{

background: #E4E4E4;margin-bottom: 5px;padding: 10px;list-style: none;

}.page_result .page_name {

font-size: 14px;font-weight: bold;

69

margin-right: 5px;}

#pictureContainer{width: 680px;position:relative;

}

3.2.2 – responsive.css

.content { margin: 0 auto; padding: 0 15px; width: 100%;

}

@media screen and (min-width: 576px) {.content{ max-width: 540px;}}

@media screen and (min-width: 768px) {.content{ max-width: 720px;}}

@media (min-width: 992px) {.content{ max-width: 960px;}}

@media (min-width: 1200px) {.content{ max-width: 1000px;}}

@media screen and (max-width: 767px) {#homeLink{display:none !important;

}

70

.content{padding:0;

}#wrapperLogin{

width:100%;padding:0;max-height:500px;

}#headerLogin{

height:160px;}#headerLogin h1{

display:block;width:200px;margin: 0 auto;

}#headerLogin #login{float:none;margin:0 auto;

}#headerLogin #login input{

display:block;margin:5px auto;

}#signUp{

float:none;margin:0 auto;width:70%;

}#signUp form input{

width:100% !important;}#signUp h2,#signUp h3{

text-align:center;}/*glavne stranice*/#header{

height:80px;}#wrapper{

padding-top:114px;}

#header{text-align:center;

}#header .right{

float:none;

71

display:inline-block;margin:0 auto;

}#header #leftHeader.left{

padding-top:3px;float:none;display:inline-block;margin:0 auto;

}#logo{position: relative;

top: 0;}

#photos, #friends, #about, #posts{max-width:92%;margin:0 auto;

}.singleFriend{

width:100%;}.singleFriendMutual{

width:100%;}.singleFriend input {

float: right; margin-right: 15px;}

.nameAndNumber {width: -moz-calc(100% - 120px);

width: -webkit-calc(100% - 120px); width: calc(100% - 120px);

}

#pictureContainer{max-width:96%;margin:0 auto;

}

#searchResult { overflow-y: scroll; overflow-x: hidden; width: 330px; height: 246px; position: absolute; top: 37px; left: -30px; z-index: 9;}72

#friendRequests{width:350px;left:-163px;

}

#notifications{text-align:left;width:320px; right: -100px;

}

}

@media screen and (max-width:991px){#chatBar{

display:none;}/*#header{

height:80px;}#wrapper{

padding-top:114px;}*/#header input[type=text] {

width:159px;}#search > input[type="button"]:nth-child(2){

margin-right: 22px;}#header .right{

margin:0 40px;}#header #leftHeader.left{

margin:0 20px;}

}@media screen and (max-width:350px){

#header input[type=text] { width: 100px;}}

73

3.2.3 – mojScript.js

function ajaxDeleteCommentAdmin(obj,id){if( confirm("Are you sure?")){

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

//alert(this.responseText);if(this.responseText == 'true'){

//obj.parentNode.style.backgroundColor = "red";

//obj.parentNode.parentNode.style.display = "none";var comStr =

obj.parentNode.parentNode.parentNode.previousElementSibling.parentNode.previousElementSibling.previousElementSibling.firstChild.nextElementSibling.nextElementSibling.firstChild.innerHTML;

var numComStr = comStr.split(" ")[0];var numCom = parseInt(numComStr) - 1;

obj.parentNode.parentNode.parentNode.previousElementSibling.parentNode.previousElementSibling.previousElementSibling.firstChild.nextElementSibling.nextElementSibling.firstChild.innerHTML = numCom + " comments";

obj.parentNode.parentNode.style.display = "none";

}}};xhttp.open("GET",

"ajax/ajaxDeleteCommentAdmin.php?id="+id, true);xhttp.send();}

}

function ajaxDeletePostAdmin(obj,id){if( confirm("Are you sure?")){




}}};

74

xhttp.open("GET", "ajax/ajaxDeletePostAdmin.php?id="+id, true);

xhttp.send();}

}function ajaxDeleteComment(obj,id){

if( confirm("Are you sure?")){ var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {



}}};xhttp.open("GET", "ajax/ajaxDeleteComment.php?

id="+id, true);xhttp.send();}

}

function ajaxDeletePost(obj,id){if( confirm("Are you sure?")){




}}};xhttp.open("GET", "ajax/ajaxDeletePost.php?

id="+id, true);xhttp.send();}

}function ajaxComment(id,event,obj){

var dugme = event.keyCode;var text = obj.value;if(dugme == 13 && text != ""){

//alert(text);//kad se stisne entervar xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

75

var respText = this.responseText;//alert(respText);if(respText != ""){

var prviDeo = respText.split("##")[0];//alert(respText);

obj.parentNode.parentNode.nextElementSibling.innerHTML = prviDeo;

obj.value="";

var drugiDeo = respText.split("##")[1];

obj.parentNode.parentNode.parentNode.previousElementSibling.previousElementSibling.firstChild.nextElementSibling.nextElementSibling.firstChild.innerHTML = drugiDeo+" comments";

}}};xhttp.open("GET", "ajax/comment.php?

id="+id+"&text="+text, false);xhttp.send();

}}

function ajaxLike(id,obj){//obj.preventDefault();

var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) {

var respText = this.responseText;if(respText.split("##")[0] == "like"){

obj.style.backgroundImage = "url('images/icons/like1.png')";

obj.innerHTML = "Unlike";}else{

obj.style.backgroundImage = "url('images/icons/like.png')";

obj.innerHTML = "Like";}var brojLajkova = respText.split("##")[1];

obj.parentNode.previousElementSibling.firstElementChild.firstElementChild.innerHTML = brojLajkova+" likes";

//obj.parentNode.previousSibling.firstChild.firstChild.innerHTML = brojLajkova+" likes"; } };

76

xhttp.open("GET", "ajax/like.php?id="+id, true); xhttp.send();

return false;}

$(document).ready(function(){//option window$('#optionsWindow').hide();$('#options').click(function(event){

event.preventDefault();$('#optionsWindow').toggle();

});//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#optionsWindow').hover(function(){

mouse_is_inside=true; }, function(){

mouse_is_inside=false; });

$("body").mouseup(function(){ if(! mouse_is_inside) $('#optionsWindow').hide();

});

//friendRequests$('#friendRequests').hide();$('#frReq').click(function(event){

event.preventDefault();$('#friendRequests').toggle();

});

//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#searchResult').hover(function(){



$("body").mouseup(function(){ if(! mouse_is_inside) $('#searchResult').hide();

});

//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#friendRequests').hover(function(){


77


$("body").mouseup(function(){ if(! mouse_is_inside) $('#friendRequests').hide();

});

//messages$('#messages').hide();$('#msg').click(function(event){

event.preventDefault();$('#messages').toggle();

});//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#messages').hover(function(){



$("body").mouseup(function(){ if(! mouse_is_inside) $('#messages').hide();

});

//notifications $('#notifications').hide();$('#notif').click(function(event){

event.preventDefault();$('#notifications').toggle();

});//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#notifications').hover(function(){



$("body").mouseup(function(){ if(! mouse_is_inside) $('#notifications').hide();

});

//sakrivanje komentara $('.iconComment').click(function(e){

e.preventDefault();$(this).parent().next().toggle();

});

78

$('.comments').find('a').click(function(e){e.preventDefault();$(this).parent().parent().next().next().toggle();

});

//sakrivanje elementa na klik vanvar mouse_is_inside = false;$('#insertSocial').hover(function(){



$("body").mouseup(function(){ if(! mouse_is_inside) $('#insertSocial').hide();

});

$('#insertSocial').hide();$('#socialShow').click(function(event){

event.preventDefault();$('#insertSocial').toggle();

});

//promena info #insertSocial $('.aboutSection').find('a').click(function(){

$(this).parent().parent().find('span').toggle();

$(this).parent().parent().find('input').toggle();

$(this).parent().parent().find('textarea').toggle();

});

});

function ajaxFriendSearch(obj){var string = obj.value; var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

document.getElementById("chatPeople").innerHTML =this.responseText;

}};xhttp.open("GET", "ajax/ajaxFriendSearch.php?

string="+string, true);

79

xhttp.send();

}

function nameCheck(obj){var ime = obj.value;var regex = /^[A-ZČĆŽĐŠ][a-zčđš]

{1,15}$/;if(!regex.test(ime) && ime != ""){

obj.style.border = "1px solid red";

document.getElementById('ispisGresaka').innerHTML = "Bad name format";

}else{obj.style.border = null;

document.getElementById('ispisGresaka').innerHTML = "";}

}function emailCheck(obj){

var ime = obj.value;var regex = /^\S{1,30}\@\S{1,20}(\.\

S{1,10})+$/;if(!regex.test(ime) && ime != ""){


document.getElementById('ispisGresaka').innerHTML = "Bad email format";



}function lastnameCheck(obj){

var ime = obj.value;var regex = /^[A-ZČĆŽĐŠ][a-zčđš]

{1,25}$/;if(!regex.test(ime) && ime != ""){


document.getElementById('ispisGresaka').innerHTML = "Bad lastname format";



80

}function passCheck(obj){

var ime = obj.value;var regex = /^(\S){4,10}$/;if(!regex.test(ime) && ime != ""){


document.getElementById('ispisGresaka').innerHTML = "4 to 10 characters";



}

function ajaxInfochange(obj,what){var vrednost = obj.value;var sta = what;var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

obj.previousElementSibling.innerHTML = vrednost;

}};xhttp.open("GET", "ajax/ajaxInfochange.php?

value="+vrednost+"&what="+sta, true);xhttp.send();

}

function ajaxInfochange(obj,what){var vrednost = obj.value;var sta = what;var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

obj.previousElementSibling.innerHTML = vrednost;

}};xhttp.open("GET", "ajax/ajaxInfochange.php?

value="+vrednost+"&what="+sta, true);xhttp.send();

}

81

function tabChange(event, cityName) {var i, tabcontent, tablinks;tabcontent =

document.getElementsByClassName("tabCelina");for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";}tablinks =

document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" current", "");

}

document.getElementById(cityName).style.display = "block";event.currentTarget.className += " current";

}

function ajaxChangeStatus(obj,idUser){var newRole = obj.value; var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

}};xhttp.open("GET",

"ajax/ajaxChangeStatus.php?id="+newRole+"&user="+idUser, true);xhttp.send();

}function ajaxChangeRole(obj,idUser){

var newRole = obj.value; var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {



"ajax/ajaxChangeRole.php?id="+newRole+"&user="+idUser, true);xhttp.send();

}function ajaxDeleteSocial(obj,id){

//obj.style.display = "none";

82

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {


//alert(this.responseText);var povratniText = this.responseText;

document.getElementById('socialNetworks').firstElementChild.firstElementChild.innerHTML = povratniText.split('##')[0];

document.getElementById('deleteSocial').innerHTML = povratniText.split('##')[1];

}};xhttp.open("GET", "ajax/deleteSocial.php?

id="+id, true);xhttp.send();

}

function ajaxNewSocial(){var link =

document.getElementById('tbNewSocial').value;//var split = link.split("www.");if(link != ""){ var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status

== 200) {//alert(this.responseText);var povratniText = this.responseText;

document.getElementById('socialNetworks').firstElementChild.firstElementChild.innerHTML = povratniText.split('##')[0];

document.getElementById('deleteSocial').innerHTML = povratniText.split('##')[1];

document.getElementById('tbNewSocial').value = "";}

};xhttp.open("GET", "ajax/newSocial.php?

link="+link, true);xhttp.send();

}}

83

function ajaxDecline(obj,reqID){var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status

== 200) {//alert(this.responseText);if(this.responseText == 'true'){

obj.parentNode.parentNode.style.display = "none";}

}};xhttp.open("GET", "ajax/ajaxDecline.php?

id="+reqID, true);xhttp.send();

}function ajaxAccept(obj,reqID){

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status

== 200) {//alert(this.responseText);if(this.responseText == 'true'){

obj.parentNode.parentNode.style.display = "none";}

}};xhttp.open("GET", "ajax/ajaxAccept.php?

id="+reqID, true);xhttp.send();

}

function ajaxRemoveFriend(obj,id){

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status ==

200) {if(this.responseText == 'true'){

obj.value = "Add friend";obj.className = "paint

acceptRequest";obj.style.display = "none";

}}};

xhttp.open("GET", "ajax/ajaxRemoveFriend.php?id="+id, true);

xhttp.send();

84

}function ajaxFrReq(obj,id){


200) {if(this.responseText == 'true'){

obj.value = "Sent";obj.className =

"declineRequest";}

}};

xhttp.open("GET", "ajax/ajaxFrReq.php?id="+id, true);

xhttp.send();

}function ajaxSearch(){

var searchString = document.getElementById('searchString').value;


200) {

document.getElementById("searchResult").innerHTML =this.responseText;

document.getElementById("searchResult").style.display = "block";

//alert(this.responseText);}};

xhttp.open("GET", "ajax/ajaxSearch.php?string="+searchString, true);

xhttp.send();}

//notifications

function proveri_notifikacije(){


200) {

85

if(this.responseText != ""){//alert(this.responseText);if(this.responseText == 'true'){

document.getElementById('notif').innerHTML = "<img src='images/icons/notif2.png'>";

//boolNotif = true;}

}}};

xhttp.open("GET", "ajax/ajaxNotif.php", true);xhttp.send();

}function svakihDeset(){

proveri_notifikacije();setTimeout(function(){ svakihDeset(); }, 10000);}svakihDeset();

3.2.4 Strane koje se includuju:

3.2.4.1 Connection.inc:

<?php$host='gligorijevic.com';$korisnik='gligorij_evicAnd';

$lozinka='rJQ4a7NK';$nazivBaze='gligorij_marbles';

$konekcija=mysql_connect($host, $korisnik, $lozinka) or die("Konekcija sa serverom nije uspela");

$baza=mysql_select_db($nazivBaze, $konekcija) or die("Konekcija sa bazom nije uspela");

$charset = mysql_set_charset("utf8");?>

3.2.4.2 ExtraWin.php:

<div id="searchResult" class="extraWindow" style="display:none;"> <div class="singleRequest">

<img src="" width="60" height="60" class="left" /> <div class="requestNameMutual left" >

<a href="" class="requestName">AndrijaGligorijevic</a>

<a href="" class="requestMutual">23 mutualfriends</a>

</div><div class="requestButtons left">

<input type="button" value="Accept"class="paint acceptRequest"/>

86

<input type="button" value="Decline"class="declineRequest" />


</div><div class="singleRequest">

<img src="" width="60" height="60" class="left" /> <div class="requestNameMutual left" >


<a href="" class="requestMutual">23 mutualfriends</a>

</div><div class="requestButtons left">

<input type="button" value="Accept"class="paint acceptRequest"/>

<input type="button" value="Decline"class="declineRequest" />


</div>

</div><div id="insertSocial" class="extraWindow"

style="display:none;"> <div class="extraWindowHeader">Add new social network

</div><input type='text' id="tbNewSocial" placeholder="Paste link

here.."/><input type="button" class="paint" value="Add"

onClick="ajaxNewSocial()"/></br><div class="extraWindowHeader">

Remove link:</div><ul id="deleteSocial"><?php

$upit = "Select * From ab_social Where id_user = ".$_SESSION['id_user'];

include('inc/connection.inc');$rez = mysql_query($upit,$konekcija);while($red = mysql_fetch_array($rez)){

echo "<li><a title='".$red['link']."'onClick='ajaxDeleteSocial(this,".$red['id_social'].")'><img src='images/icons/".$red['type'].".jpg' width='30px' height='30px'/></a></li>";

}?>

</ul></div>

<div id="notifications" class="extraWindow" style="display:none;"> <div class="extraWindowHeader">

Notifications</div><div id="notificationsDisplay"><?phpinclude('inc/connection.inc');

87

$upit = "SELECT ab_posts.id_post,ab_notifications.id_notification, ab_users.id_user, ab_users.profile_pic,ab_users.first_name, ab_users.last_name, ab_notification_types.description,ab_notifications.timestamp FROM ab_posts Join ab_notifications ONab_posts.id_post = ab_notifications.id_post Join ab_users ON ab_users.id_user= ab_notifications.id_user_from Join ab_notification_types on ab_notification_types.id_notification_type = ab_notifications.id_notification_type Where ab_posts.id_user = ".$_SESSION['id_user']." And ab_users.id_user != ".$_SESSION['id_user']." Order By ab_notifications.timestamp Desc";

$rez = mysql_query($upit,$konekcija);while($red = mysql_fetch_array($rez)){

//slika$slika = "nopic.png";if($red['profile_pic'] != null){$slika =

$red['profile_pic'];}//racunanje vremena od kad je comment nastao $diff2 = time() - $red['timestamp'];

$years2 = floor($diff2 / (365*60*60*24)); $months2 = floor($diff2 / (30*60*60*24)); $days2 = floor($diff2 / (60*60*24)); $hours2 = floor($diff2 / (60*60)); $minutes2 = floor($diff2 / (60));

$ago2 = "Just now";if($years2 != 0){$ago2 = $years2." years ago";} elseif($months2 != 0){$ago2 = $months2." months

ago";}elseif($days2 != 0){$ago2 = $days2." days



minutes ago";}

//TREBA IMPLEMENTIRATI STRANICU ZA POSTOVE echo "<div class='singleNotif'>

<img src='users/images/profileMedium/".$slika."' width='60' height='60' class='left' />

<div class='notifText left' ><a href=''

class='requestName'>".$red['first_name']." ".$red['last_name']." <span>".$red['description']."</span></a>

<a href='' class='requestMutualmessagePreview'>".$ago2."</a>

</div>

<div class='clear'></div></div>";}?></div>

</div><div id="messages" class="extraWindow" style="display:none;">

<div class="extraWindowHeader">Messages (Soon to be implemented)

</div>

88

<div class="singleMessage">

<img src="images/misc/nopic.png" width="60" height="60"class="left" />

<div class="requestNameMutual left" ><a href="" class="requestName">John Doe</a> <a href="" class="requestMutual

messagePreview">.......</a></div><div class="messageTime right">

<span>18:34 am</span></div><div class="clear"></div>

</div>

</div><div id="friendRequests" class="extraWindow" style="display:none;"><div class="extraWindowHeader">Friend Requests

</div><?php

include('inc/connection.inc');$upit = "Select * From ab_users Join ab_requests

On ab_users.id_user = ab_requests.id_user_s Where ab_requests.id_user_r = ".$_SESSION['id_user'];

$rez = mysql_query($upit, $konekcija);while($red = mysql_fetch_array($rez)){


$red['profile_pic'];}//mutual friends$upitMutual = "SELECT COUNT(*) From ab_friends

Where id_user1 = ".$red['id_user']." And id_user2 In (SELECT id_user2 FROM ab_friends WHERE id_user1 = ".$_SESSION['id_user'].")";

$brMutual =mysql_fetch_array(mysql_query($upitMutual,$konekcija))[0];

echo "<div class='singleRequest'><img src='users/images/profileMedium/".$slika."'

width='60' height='60' class='left' /><div class='requestNameMutual left' >

<a href=''class='requestName'>".$red['first_name']." ".$red['last_name']."</a>

<a class='requestMutual'>".$brMutual." mutualfriends</a>

</div>89

<div class='requestButtons left'><input type='button' value='Accept'

class='paint acceptRequest' onClick='ajaxAccept(this,".$red['id_request'].")'/>

<input type='button' value='Decline'class='declineRequest' onClick='ajaxDecline(this,".$red['id_request'].")'/>


</div>";}

mysql_close($konekcija);

?>

</div><div class="extraWindow" id="optionsWindow" style="display:none;"> <div class="extraWindowHeader">

Options</div><ul><?php if($_SESSION['id_role'] == 1){echo "<li><a

href='limunada.php'>Admin panel</a></li>";}?> <li><a href="index.php?logout=true">Log out</a></li>

</ul><div class="clear"></div>

</div>

3.2.4.3 Header.php:

<div id="header" class="paint"><div class="content">

<div class="left"><a href="#" id="logo" class="left"

><img src="images/logo/logo.png" /></a><div id="search" class="left">

<input type="text" placeholder="Searchfor your friends" id="searchString"/>

<input type="button"onClick="ajaxSearch()"/>

</div></div><div class="right" id="links">

<ul><li><a href="" id="options"><img

src="images/icons/options.png" /></a></li><li><a href="" id="notif"

onClick="ajaxRecordNotif()"><img src="images/icons/notif.png" /></a></li> <script type="text/javascript">

//var boolNotif = true; //da lida salje ajax

function ajaxRecordNotif(){//if(boolNotif){var xhttp = new

XMLHttpRequest();xhttp.onreadystatechange= function() {

if(this.readyState == 4 && this.status == 200) {

90

//alert(this.responseText);

document.getElementById("notificationsDisplay").innerHTML = this.responseText;

document.getElementById('notif').innerHTML = "<img src='images/icons/notif.png'>";

//boolNotif =false;


"ajax/ajaxRecordNotif.php", true);xhttp.send();

//}}

</script><li><a href="" id="msg" ><img

src="images/icons/msg.png" /></a></li><li><a href="" id="frReq" ><img

src="images/icons/<?php$upit = "Select Count(*) From

ab_requests Where id_user_r = ".$_SESSION['id_user'];include('inc/connection.inc');$rez =

mysql_fetch_array(mysql_query($upit,$konekcija))[0];if($rez > 0){echo

"frreq2.png";}else{echo "frreq.png";}?>"/></a></li><li><a href="home.php"

id="homeLink">Home</a></li><li><a href="profile.php">

<img id="smallProfile"src="users/images/profileSmall/

<?php if($pic != null){echo$pic;}else{echo "nopic.png";}?>" width="24px" height="24px"/><span><?php echo $fName;?><span>

</a></li>

</ul>


</div></div>

3.2.4.4 UploadCrop.php:

<?php$target_dir1 = "users/images/profileTemp/";$target_dir2 = "users/images/profileMedium/"; $target_dir3 = "users/images/profileSmall/"; $target_dir4 = "users/images/profileLarge/";

$delovi = explode(".",basename($_FILES["changeProfilePic"]["name"]));$samoIme = time()."-".$_SESSION['id_user'].".".$delovi[count($delovi) - 1]; $target_file = $target_dir1 . $samoIme; $uploadOk = 1;91

$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if image file is a actual image or fake image

$check = getimagesize($_FILES["changeProfilePic"]["tmp_name"]); if($check !== false) {

/ echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1;

} else {/ echo "File is not an image.";$uploadOk = 0;

}

// Check file sizeif ($_FILES["changeProfilePic"]["size"] > 500000)

{ echo "Sorry, your file is too large."; $uploadOk = 0;

}// Allow certain file formatsif($imageFileType != "jpg" && $imageFileType != "jpeg" )

{ echo "Sorry, only JPG, JPEG files are allowed."; $uploadOk = 0;

}/ Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) {

echo "Sorry, your file was not uploaded.";/ if everything is ok, try to upload file} else {

if (move_uploaded_file($_FILES["changeProfilePic"]["tmp_name"], $target_file)) {

//sad crop

// The file$filename = $target_file;

/ Set a maximum height and width $width = 200;$height = 200;

//crop$im = imagecreatefromjpeg($filename);

$w = imagesx($im);$h = imagesy($im);$x = 0;$y = 0;if($h > $w){

$y = ($h-$w)/2;}else{

$x = ($w-$h)/2;}

$size = min(imagesx($im), imagesy($im));$im2 = imagecrop($im, ['x' => $x, 'y' => $y, 'width' => $size,

'height' => $size]);if ($im2 !== FALSE) {

$bool1 = imagejpeg($im2, $target_dir4.$samoIme);

// Resample za 100x100

92

$image_p = imagecreatetruecolor(100, 100);$image = imagecreatefromjpeg($target_dir4.$samoIme); imagecopyresampled($image_p, $image, 0, 0, 0, 0, 100,

100, $size, $size);//output$bool2 = imagejpeg($image_p, $target_dir2.$samoIme,

100);

// Resample za 30x30$image_p = imagecreatetruecolor(30, 30);$image = imagecreatefromjpeg($target_dir4.$samoIme); imagecopyresampled($image_p, $image, 0, 0, 0, 0, 30,

30, $size, $size);//output$bool3 = imagejpeg($image_p, $target_dir3.$samoIme,

100);

if($bool1 && $bool2 && $bool3){

$upit = "Update ab_users Set profile_pic ='".$samoIme."' Where id_user = ".$_SESSION['id_user'];

if(mysql_query($upit,$konekcija)){$_SESSION['picture'] = $samoIme;//echo "OVDE";

}}

}

} else {echo "Sorry, there was an error uploading your file.";

}}

?>

3.2.5 AJAX

3.2.5.1 ajaxAccept.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$povratniString = 'false';$idRequest = $_GET['id'];include('../inc/connection.inc');$upit = "Select * From ab_requests Where id_request =

".$idRequest." And id_user_r =".$_SESSION['id_user'];

102

93

$rez1 = mysql_query($upit,$konekcija);if(mysql_num_rows($rez1) == 1){

$idZahtevaoca =mysql_fetch_array($rez1)['id_user_s'];

$time = time();$upit2 = "Insert Into ab_friends Values('',

".$idZahtevaoca.", ".$_SESSION['id_user'].", ".$time.")";$upit3 = "Insert Into ab_friends Values('',

".$_SESSION['id_user'].", ".$idZahtevaoca.", ".$time.")";if(mysql_query($upit2,$konekcija) &&

mysql_query($upit3,$konekcija)){$upit4 = "Delete From ab_requests Where

id_request = ".$idRequest." And id_user_r =".$_SESSION['id_user'];if(mysql_query($upit4,$konekcija)){$povratniString = 'true';

}}

}echo $povratniString;

}

}?>

3.2.5.2 ajaxChangeRole.php<?phpsession_start();if(isset($_SESSION['id_role']) && $_SESSION['id_role'] == 1)

{ if(isset($_GET['id']) and ($_GET['id']==1 or $_GET['id']==2) ){if(isset($_GET['user'])){

$role = $_GET['id'];$user = $_GET['user'];$upit = "Update ab_users Set role = ".$role." Where

id_user = ".$user;include('../inc/connection.inc');mysql_query($upit, $konekcija);mysql_close($konekcija);

}

}}?>

3.2.5.3 ajaxChangeStatus.php<?phpsession_start();if(isset($_SESSION['id_role']) && $_SESSION['id_role'] == 1)

{ if(isset($_GET['id']) and ($_GET['id']==1 or $_GET['id']==2) ){if(isset($_GET['user'])){

$role = $_GET['id'];$user = $_GET['user'];$upit = "Update ab_users Set status = ".$role." Where

id_user = ".$user;include('../inc/connection.inc');

mysql_query($upit, $konekcija);mysql_close($konekcija);

94

}

}}?>

3.2.5.4 ajaxDecline.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$povratniString = 'false';$idRequest = $_GET['id'];include('../inc/connection.inc');$upit = "Select * From ab_requests Where id_request =

".$idRequest." And id_user_r =".$_SESSION['id_user'];$rez1 = mysql_query($upit,$konekcija);if(mysql_num_rows($rez1) == 1){

$upit4 = "Delete From ab_requests Whereid_request = ".$idRequest." And id_user_r =".$_SESSION['id_user']; if(mysql_query($upit4,$konekcija)){

$povratniString = 'true';

}}echo $povratniString;

}

}?>

3.2.5.5 ajaxDeleteComment.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$povratniString = 'false';$idComment = $_GET['id'];include('../inc/connection.inc');$upitProvera = "Select * From ab_comments Where id_comment =

".$idComment." And id_user = ".$_SESSION['id_user'];$upitProvera2 = "SELECT ab_comments.id_user as comm_user ,

ab_posts.id_user as post_user FROM `ab_comments` Join ab_posts onab_comments.id_post = ab_posts.id_post Where id_comment = ".$idComment;

$rezPr2 =mysql_fetch_array(mysql_query($upitProvera2,$konekcija));

//echo $rezPr2."<--";if(mysql_num_rows(mysql_query($upitProvera,$konekcija)) == 1

|| $rezPr2['post_user'] == $_SESSION['id_user']){$upit3 = "Delete From ab_comments Where id_comment =

".$idComment;if(mysql_query($upit3,$konekcija)){

$povratniString = 'true';}

}echo $povratniString;mysql_close($konekcija);

}

95

}?>

3.2.5.6 ajaxDeleteCommentAdmin.php<?phpsession_start();if(isset($_SESSION['id_user'])){

//provera za adminaif(isset($_SESSION['id_role']) and $_SESSION['id_role'] == 1){ if(isset($_GET['id'])){

$povratniString = 'false';$idComment = $_GET['id'];include('../inc/connection.inc');$upitProvera = "Select * From ab_comments Where id_comment =

".$idComment;$upitProvera2 = "SELECT ab_comments.id_user as comm_user ,

ab_posts.id_user as post_user FROM `ab_comments` Join ab_posts onab_comments.id_post = ab_posts.id_post Where id_comment = ".$idComment;

$rezPr2 =mysql_fetch_array(mysql_query($upitProvera2,$konekcija));

//echo $rezPr2."<--";

$upit3 = "Delete From ab_comments Where id_comment =".$idComment;

if(mysql_query($upit3,$konekcija)){$povratniString = 'true';

}

echo $povratniString;mysql_close($konekcija);

}}

}?>

3.2.5.7 ajaxDeletePost.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$povratniString = 'false';$idPost = $_GET['id'];include('../inc/connection.inc');$upitProvera = "Select * From ab_posts Where id_post =

".$idPost." And id_user = ".$_SESSION['id_user'];if(mysql_num_rows(mysql_query($upitProvera,$konekcija)) == 1){

//post postoji$upit1 = "Delete From ab_posts Where id_post

= ".$idPost." And id_user = ".$_SESSION['id_user'];

105

96

$upit2 = "Delete From ab_likes Where id_post =".$idPost;

$upit3 = "Delete From ab_comments Where id_post =".$idPost;

if(mysql_query($upit1,$konekcija)){mysql_query($upit2,$konekcija);mysql_query($upit3,$konekcija);$povratniString = 'true';

}}echo $povratniString;mysql_close($konekcija);

}

}?>

3.2.5.8 ajaxDeletePostAdmin.php<?phpsession_start();if(isset($_SESSION['id_user'])){

//provera za adminaif(isset($_SESSION['id_role']) and $_SESSION['id_role'] == 1){ if(isset($_GET['id'])){

$povratniString = 'false';$idPost = $_GET['id'];include('../inc/connection.inc');$upitProvera = "Select * From ab_posts Where id_post =

".$idPost;if(mysql_num_rows(mysql_query($upitProvera,$konekcija)) ==

1){ //post postoji$upit1 = "Delete From ab_posts Where id_post =

".$idPost;$upit2 = "Delete From ab_likes Where id_post =

".$idPost;$upit3 = "Delete From ab_comments Where id_post =

".$idPost;if(mysql_query($upit1,$konekcija)){

mysql_query($upit2,$konekcija);mysql_query($upit3,$konekcija);$povratniString = 'true';

}}echo $povratniString;mysql_close($konekcija);

}}

}?>

3.2.5.9 ajaxFriendSearch.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['string'])){$string = trim($_GET['string']);

$povratniString = "";$upit = "SELECT * From ab_users JOIN ab_friends ON

ab_users.id_user = ab_friends.id_user1 Where id_user2 = ".$_SESSION['id_user']." And CONCAT(first_name,' ',last_name) Like '%".$string."%' Order By first_name, last_name";

include('../inc/connection.inc');$rez = mysql_query($upit);

97

while($red = mysql_fetch_array($rez)){


$slik =$red['profile_pic'];

}

$povratniString .= "<aclass='chatPerson' href='profile.php?userID=".$red['id_user']."'> <img

src='users/images/profileMedium/".$slik."' width='35' height='35' /> <span>".$red['first_name']."

".$red['last_name']."</span><div class='clear'></div>

</a>";}echo $povratniString;mysql_close($konekcija);

}}?>

3.2.5.10 ajaxFrReq.php<?phpsession_start();if(isset($_SESSION['id_user']))

{ include('../inc/connection.inc'); if(isset($_GET['id'])){

$povratniString = "";$idKome = $_GET['id'];$upitProvera = "Select * From ab_requests Where

id_user_s = ".$_SESSION['id_user']." And id_user_r = ".$idKome;$rezProvera = mysql_query($upitProvera,$konekcija); if(mysql_num_rows($rezProvera) == 0){

$upit = "Insert Into ab_requests Values('', ".$_SESSION['id_user'].", ".$idKome.", ".time().")";

$rez = mysql_query($upit,$konekcija);if($rez){$povratniString = "true";}else{$povratniString = "false";}

echo $povratniString ;}


}?>

3.2.5.11 ajaxInfochange.php<?phpsession_start();if(isset($_SESSION['id_user'])){

$idUser = $_SESSION['id_user'];if(isset($_GET['value']) && isset($_GET['what']))

{ $vrednost = addslashes($_GET['value']);

98

$staMenjamo = $_GET['what']; //echo($vrednost." ".$staMenjamo);if($staMenjamo == "about" || $staMenjamo == "bday_timestamp"

| $staMenjamo == "last_name" || $staMenjamo == "first_name"){ if($staMenjamo == "bday_timestamp"){

$pieces = explode("-",$vrednost); $year = $pieces[0];$month = $pieces[1]; $day = $pieces[2];$timestamp = mktime(0,0,0,$month,$day,$year); $vrednost = $timestamp;

}$upit = "Update ab_users Set ".$staMenjamo." =

'".$vrednost."' Where id_user = ".$_SESSION['id_user']; include('../inc/connection.inc'); if(mysql_query($upit,$konekcija)){

//nistaa


}}

}?>

3.2.5.12 ajaxPagination.php<?phpsession_start();$db_username = 'gligorij_evicAnd';$db_password = 'rJQ4a7NK';$db_name = 'gligorij_marbles';$db_host = 'gligorijevic.com';$item_per_page = 3;

$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');

//sanitize post valueif(isset($_POST["page"])){

$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

if(!is_numeric($page_number)){die('Invalid page number!');} //incase

of invalid page number}else{

$page_number = 1;}

//get current starting point of records$position = (($page_number-1) * $item_per_page);

//Limit our results within a specified range.$results = mysqli_query($connecDB, "Select * From ab_users Where id_user != ".$_SESSION['id_user']." Order By first_name, last_name ASC LIMIT ".$position.", ".$item_per_page);

99

//output results from databaseecho '<ul class="page_result">';while($row = mysqli_fetch_array($results)){

$upitRoles = "Select * from ab_roles"; $upitStatusi = "Select * From ab_user_status"; include('../inc/connection.inc'); //dohvati sve uloge$rezRoles = mysql_query($upitRoles,$konekcija); $uloge = array();while($red = mysql_fetch_array($rezRoles))

{ $uloge[] = $red;}//dohvati sve statusi$rezStatus =

mysql_query($upitStatusi,$konekcija);$statusi = array();while($red = mysql_fetch_array($rezStatus))

{ $statusi[] = $red;}

//slika$slika = "nopic.png";if($row['profile_pic'] != null){$slika =

$row['profile_pic'];}

//uloge$roles = "";

foreach($uloge as $u){if($u['id_role'] == $row['role']){

$roles .= "<option selectedvalue='".$u['id_role']."'>".$u['role_name']."</option>";

}else{$roles .= "<option

value='".$u['id_role']."'>".$u['role_name']."</option>";}

}//statusi$status = "";

foreach($statusi as $u){if($u['id_user_status'] ==

$row['status']){$status .= "<option selected

value='".$u['id_user_status']."'>".$u['user_status_name']."</option>";}else{

$status .= "<optionvalue='".$u['id_user_status']."'>".$u['user_status_name']."</option>";

}}

echo "<divclass='singleRequest'>


<div class='requestNameMutual left' ><a

href='profile.php?userID=".$row['id_user']."'class='requestName'>".$row['first_name']." ".$row['last_name']."</a>

</div>

100

<div class='requestButtons left'><span>Role: </span><select

onChange='ajaxChangeRole(this,".$row['id_user'].")'>".$roles."</select>

<span>Status: </span><selectonChange='ajaxChangeStatus(this,".$row['id_user'].")'>".$status."</

select> </div><div class='clear'></div>

</div>";}

?>

3.2.5.13 ajaxRemoveFriend.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$povratniString = "";$idKoga = $_GET['id'];$upit = "Delete From ab_friends Where(id_user1 =".$_SESSION['id_user']." And id_user2 =

".$idKoga.")Or (id_user2 =".$_SESSION['id_user']." And id_user1 =

".$idKoga.")";include('../inc/connection.inc');

$rez = mysql_query($upit,$konekcija);if($rez){$povratniString = "true";}else{$povratniString = "false";}

mysql_close($konekcija);echo $povratniString ;

}

}?>

3.2.5.14 ajaxSearch.php

<?php

session_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['string'])){$povratniString = "";$string = trim($_GET['string']);$upit = "Select * FROM ab_users Where ab_users.status = 1

And CONCAT(first_name,' ',last_name) Like '%".$string."%' Order By first_name, last_name";

include('../inc/connection.inc');$rez = mysql_query($upit,$konekcija);while($red = mysql_fetch_array($rez)){


$red['profile_pic'];}//mutual friends$upitMutual = "SELECT COUNT(*) From ab_friends

Where id_user1 = ".$red['id_user']." And id_user2 In (SELECT id_user2 FROM ab_friends WHERE id_user1 = ".$_SESSION['id_user'].")";

$brMutual =mysql_fetch_array(mysql_query($upitMutual,$konekcija))

[0]; //are they friends101

$upit1 = "Select * From ab_friends Whereid_user1 = ".$red['id_user']." And id_user2 = ".$_SESSION['id_user'];

$r = mysql_query($upit1, $konekcija);$colorClass = "declineRequest";$buttonText = "Remove";$whattodo = "ajaxRemoveFriend";$hide = "";if(mysql_num_rows($r) == 0){

//nisu prijatelji$colorClass = "paint acceptRequest";$buttonText = "Add friend";$whattodo = "ajaxFrReq";//da li je poslat zahtev$upit1 = "Select * From ab_requests

Where id_user_r = ".$red['id_user']." And id_user_s = ".$_SESSION['id_user'];

$r2 = mysql_query($upit1, $konekcija);if(mysql_num_rows($r2) == 0){

//nije ni poslat

}else{$hide = "style='display:none;'";}

}//sakrij dugme za sebe

if($red['id_user'] ==$_SESSION['id_user']){$hide = "style='display:none;'";}

$povratniString .= "<div class='singleRequest'> <img src='users/images/profileMedium/".$slika."'

width='60' height='60' class='left' /><div class='requestNameMutual left' >

<ahref='profile.php?userID=".$red['id_user']."'class='requestName'>".$red['first_name']." ".$red['last_name']."</a>

<a ".$hide."class='requestMutual'>".$brMutual." mutual friends</a></div><div class='requestButtons left'>

<input type='button' value='".$buttonText."'".$hide." class='".$colorClass."'onClick='".$whattodo."(this,".$red['id_user'].")' />




</div>";}echo $povratniString;

mysql_close($konekcija);}

}?>

3.2.5.15 comment.php<?phpsession_start();if(isset($_SESSION['id_user'])){

102

if(isset($_GET['id']) && isset($_GET['text'])){ $idUser = $_SESSION['id_user']; $idPost = $_GET['id'];$commentText = addslashes($_GET['text']); include('../inc/connection.inc');$upit = "Insert Into ab_comments Values('', ".

$idUser.", ".$idPost.", '".$commentText."', ".time().")";

$povratniString = "";if(mysql_query($upit,$konekcija)){

//komentari za odredjen post$upitCitanje = "Select

ab_users.id_user, ab_users.first_name, ab_users.last_name, ab_users.profile_pic,ab_comments.text,ab_comments.id_comment,ab_comments.timestamp,ab_posts.id_post From ab_comments Join ab_posts On ab_comments.id_post = ab_posts.id_postJOIN ab_users ON ab_comments.id_user = ab_users.id_user Whereab_posts.id_post = ".$idPost." ORDER BY ab_comments.timestamp Desc";

$citanjeKomentara =mysql_query($upitCitanje,$konekcija);

while($red = mysql_fetch_array($citanjeKomentara)){ //slicica za komentar$slicica = "nopic.png";if($red['profile_pic'] != null){$slicica =

$red['profile_pic'];}

//racunanje vremena od kad je comment nastao $diff = time() - $red['timestamp'];

$years = floor($diff / (365*60*60*24));$months = floor($diff / (30*60*60*24));$days = floor($diff / (60*60*24));

$hours = floor($diff / (60*60));$minutes = floor($diff / (60));

$ago = "Just now";if($years != 0){$ago = $years." years ago";} elseif($months != 0){$ago = $months." months

ago";}elseif($days != 0){$ago = $days." days ago";} elseif($hours != 0){$ago = $hours." hours

ago";}elseif($minutes != 0){$ago = $minutes." minutesago";}



$_SESSION['id_user'] || $_SESSION['id_user'] == $red['id_user'] ){ $brisanjeKomentara = "<a

onclick='ajaxDeleteComment(this,".$red['id_comment'].")' style='float:right;color: #999; cursor:pointer;' title='Delete this comment'>X</a>";


moze sve da brise$brisanjeKomentara = "<a

onClick='ajaxDeletePostAdmin(this,".$red['id_post'].")' style='float:103

right;color: red; cursor:pointer;' title='Delete this post'>X</a>";}

$povratniString .= "<div class='comment'> <img

src='users/images/profileMedium/".$slicica."' width='35' height='35' /> <div

class='infoComment'>".$brisanjeKomentara."

<div><b><ahref=''>".$red['first_name']." ".$red['last_name']." </a></b><span class='commentText'>

".$red['text']."</span></div><div

class='commentTime' >".$ago."</div>

</div><div

class='clear'></div></div>";

}//broj komentara$upitBrojKomentara = "Select count(*) From

ab_comments Where id_post = ".$idPost;$rezBr = mysql_query($upitBrojKomentara,$konekcija); $brojKomentara = mysql_fetch_array($rezBr)[0];

}echo $povratniString."##".$brojKomentara; mysql_close($konekcija);

}

}?>

3.2.5.16 deleteSocial.php<?phpsession_start();if(isset($_SESSION['id_user'])){

$povratniString = "";$povratniString2 = "";if(isset($_GET['id'])){$idSoc = $_GET['id'];

$upit = "Delete From ab_social Where id_social = ".$idSoc." And id_user = ".$_SESSION['id_user'];

include('../inc/connection.inc');

if(mysql_query($upit,$konekcija)){$upitDohvati = "Select * From ab_social Where

id_user = ".$_SESSION['id_user'];$rez = mysql_query($upitDohvati,$konekcija); $nizzz = array();while($red = mysql_fetch_array($rez)){

$nizzz[] = $red;$povratniString .= "<li><a class='".

$red['type']."' href='".$red['link']."' target='_blank'></a></li>";

104

}foreach($nizzz as $re){

$povratniString2 .= "<li><a title='".$re['link']."'onClick='ajaxDeleteSocial(this,".$re['id_social'].")'><img src='images/icons/".$re['type'].".jpg' width='30px' height='30px'/></a></li>";

}}mysql_close($konekcija);echo $povratniString."##".$povratniString2;}

}?>

3.2.5.17 like.php<?phpsession_start();if(isset($_SESSION['id_user'])){

if(isset($_GET['id'])){$idPost = $_GET['id'];$idUser = $_SESSION['id_user'];include('../inc/connection.inc');

$upitUpis = "Insert Into ab_likes Values('', ".$idUser.", ".$idPost.", ".time().", null)";

$upitProvera = "Select * From ab_likes Where id_user = ".$idUser." And id_post = ".$idPost;

$upitBrisanje = "Delete From ab_likes Where id_user = ".$idUser." And id_post = ".$idPost;

$povratniString = "";

$rezProvera = mysql_query($upitProvera,$konekcija); if(mysql_num_rows($rezProvera) == 1){

//vec je lajkovao pa cemo da sklonimo$rezBris = mysql_query($upitBrisanje,$konekcija); $povratniString = 'unlike';

}else{$rezUnos = mysql_query($upitUpis,$konekcija); $povratniString = 'like';

}$upitBrojLajkova = "Select Count(*) From ab_likes

Where id_post = ".$idPost;$rezBroj = mysql_query($upitBrojLajkova,$konekcija); mysql_close($konekcija);$broj = mysql_fetch_array($rezBroj)[0];

$povratniString .="##".$broj;echo $povratniString;

}

}

?>

3.2.5.18 newSocial.php<?phpsession_start();if(isset($_SESSION['id_user'])){

$povratniString = "";$povratniString2 = "";

105

if(isset($_GET['link'])){$link = $_GET['link'];$linkType = substr(explode(".com",$link)[0],-7);

$type = "unknown";switch($linkType){

case "acebook": $type = "fbicon";break;case "stagram": $type = "igicon";break;case "nterest": $type = "pintrest";break;case "twitter": $type = "twiter";break;case "youtube": $type = "yticon";break;default: $type = "unknown";break;

}$upit = "Insert Into ab_social Values('', '".$type."', '".

$link."', ".$_SESSION['id_user'].")";include('../inc/connection.inc');

if(mysql_query($upit,$konekcija)){

$upitDohvati = "Select * From ab_social Where id_user = ".$_SESSION['id_user'];

$rez = mysql_query($upitDohvati,$konekcija); $nizzz = array();while($red = mysql_fetch_array($rez)){

$nizzz[] = $red;$povratniString .= "<li><a class='".

$red['type']."' href='".$red['link']."' target='_blank'></a></li>";}foreach($nizzz as $re){

$povratniString2 .= "<li><a title='".$re['link']."'onClick='ajaxDeleteSocial(this,".$re['id_social'].")'><img src='images/icons/".$re['type'].".jpg' width='30px' height='30px'/></a></li>";

}}mysql_close($konekcija);echo $povratniString."##".$povratniString2;}

}?>

3.2.5.19 ajaxRecordNotif.php<?phpsession_start();if(isset($_SESSION['id_user'])){

include('../inc/connection.inc');$upit = "SELECT ab_posts.id_post, ab_notifications.id_notification,

ab_users.id_user, ab_users.profile_pic, ab_users.first_name,ab_users.last_name, ab_notification_types.description,ab_notifications.timestamp FROM ab_posts Join ab_notifications ONab_posts.id_post = ab_notifications.id_post Join ab_users ON ab_users.id_user= ab_notifications.id_user_from Join ab_notification_types on ab_notification_types.id_notification_type = ab_notifications.id_notification_type Where ab_posts.id_user = ".$_SESSION['id_user']." And ab_users.id_user != ".$_SESSION['id_user']." Order By ab_notifications.timestamp Desc";

$povratniString = "";

106

$rez = mysql_query($upit,$konekcija); while($red = mysql_fetch_array($rez)){


$red['profile_pic'];}//racunanje vremena od kad je comment nastao $diff2 = time() - $red['timestamp'];

$years2 = floor($diff2 / (365*60*60*24)); $months2 = floor($diff2 / (30*60*60*24)); $days2 = floor($diff2 / (60*60*24)); $hours2 = floor($diff2 / (60*60)); $minutes2 = floor($diff2 / (60));

$ago2 = "Just now";if($years2 != 0){$ago2 = $years2." years ago";} elseif($months2 != 0){$ago2 = $months2." months

ago";}elseif($days2 != 0){$ago2 = $days2." days



minutes ago";}

//TREBA IMPLEMENTIRATI STRANICU ZA POSTOVE$povratniString .= "<div class='singleNotif'>


<div class='notifText left' ><a href='post.php?id=".$red['id_post']."'

class='requestName'>".$red['first_name']." ".$red['last_name']." <span>".$red['description']."</span></a>

<a href='post.php?id=".$red['id_post']."' class='requestMutual messagePreview'>".$ago2."</a>

</div>

<div class='clear'></div></div>";}echo $povratniString;

$upitDohvati = "SELECT id_notification FROM ab_notifications join ab_posts on ab_notifications.id_post = ab_posts.id_post Where ab_posts.id_user = ".$_SESSION['id_user']." ORDER BY ab_notifications.timestamp DESC limit 1";

$idNotif = mysql_fetch_array(mysql_query($upitDohvati,$konekcija))[0]; //echo $idNotif;$upitUpdate = "Update ab_users Set id_notification = ".

$idNotif." Where id_user = ".$_SESSION['id_user'];if(mysql_query($upitUpdate,$konekcija)){

$_SESSION['id_notification'] = $idNotif;}mysql_close();

}?>

107

3.2.5.20 ajaxNotif.php<?phpsession_start();if(isset($_SESSION['id_user']))

{ include('../inc/connection.inc');

$upitDohvati = "SELECT id_notification FROM ab_notifications join ab_posts on ab_notifications.id_post = ab_posts.id_post Where

ab_posts.id_user = ".$_SESSION['id_user']." And ab_notifications.id_user_from != ".$_SESSION['id_user']." ORDER BY ab_notifications.timestamp DESC limit 1";

$rez = mysql_query($upitDohvati,$konekcija); if(mysql_num_rows($rez) == 0)

{echo 'false'; }else{$idNotif = mysql_fetch_array($rez)[0];

if($idNotif > $_SESSION['id_notification']){ echo 'true';

}else{echo 'false';

}}mysql_close();

}?>

108

4 Baza podataka

4.1 Struktura baze podataka

Struktura baze je tako dizajnirana da sa sto manje tabela pokrije sve funkcionalnosti, a da pritom postuje sve normalne forme.

4.0 Struktura baze podataka

109

5 Zaključak

Videli smo šta čini jezgro jedne socijalne mreže, nije potrebno imati mnogo stranica ili mnogo tabela u bazi, ali su zato veze izmedju tih tabela nešto komplikovanije i upiti zahtevniji jer dohvataju složenije povezane podatke. Kada je u pitaju aplikacija kao što je socijalna mreža, uvek će postojati dodatne funkcionalnosti koje bi mogle da se dodaju. Živ primer za to je Facebook koji se razvija istom brzinom već 13 godina i vrlo često uvodi neke novine i apdejte. Cilj ove aplikacije je bio da prikaze ono što po mom mišljenju čini samo jezgro jedne ovakve aplikacije. Takodje, da omogući korisnicima da nesmetano koriste aplikaciju i ne osete se previse ograničeno usled nedostatka određenih funkcionalnosti. Mogućnost korišćenja nezavisno od uređaja dodatno doprinosi ovom cilju.

110

6 Literatura

[1] Jon Duckett, HTML and CSS: Design and Build Websites, 2011

[2] Jon Duckett, JavaScript and JQuery: Interactive Front-End Web Development, 2014

[3] Luke Welling, PHP i MySQL: razvoj aplikacija za web, 2013

111

Documents

2.0 - webdizajn.ict.edu.rswebdizajn.ict.edu.rs/.../dipl_php_andrija...16_14.docx · Web viewAndrija Gligorijević 16/14. Beograd, 2017. VISOKA ŠKOLA STRUKOVNIH STUDIJA. ZA INFORMACIONE