среда, 11 октября 2017 г.

Соцсеть. Дизайн комментариев. Урок 39.

Дизайн страницы профиля.


Идем в файл profile.php
Вниз вставляем дизайн.
<?php
include('./classes/DB.php');
include('./classes/Login.php');
include('./classes/Post.php');
include('./classes/Image.php');
include('./classes/Notify.php');
$username = '';
$isFollowing = False;
$verified = False; // верифицирован ли пользователь
if (isset($_GET['username'])) {
if (DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$_GET['username']))) {
$username = DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['username'];
//$email= DB::query('SELECT email FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['email'];
$userid = DB::query('SELECT id FROM users WHERE username=:username', array('username'=>$_GET['username']))[0]['id']; // id залогиненного
$verified = DB::query('SELECT verified FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['verified'];
$followerid = Login::isLoggedin(); // Получаем id фолловера. Это id залогиненного
// проверяем была ли нажата кнопка follow
if (isset($_POST['follow'])) {
// когда не можешь быть фолловером самого себя
if ($userid != $followerid) {
if (!DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
// пользователь с id=6 нажимает follow и пользователь становится верефицированным
if ($followerid == 6) {
DB::query('UPDATE users SET verified=1 WHERE id=:userid', array(':userid'=>$userid));
}
DB::query('INSERT INTO followers VALUES (:id, :userid, :followerid)', array(':id'=>null,':userid'=>$userid, ':followerid'=>$followerid));
//DB::query('INSERT INTO followers VALUES (\'\', :userid, :followerid)', array(':userid'=>$userid, ':followerid'=>$followerid));
} else {
echo 'Already following!';
}
$isFollowing = True;
}
}
// проверяем была ли нажата кнопка unfollow
if (isset($_POST['unfollow'])) {
// когда не можешь быть фолловером самого себя
if ($userid != $followerid) {
if (DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
// пользователь с id=6 нажимает unfollow и пользователь становится неверефицированным
if ($followerid == 6) {
DB::query('UPDATE users SET verified=0 WHERE id=:userid', array(':userid'=>$userid));
}
DB::query('DELETE FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid));
}
$isFollowing = False;
}
}
if (DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
$isFollowing = True;
}
// удаление поста
if (isset($_POST['deletepost'])) {
// проверяем существует ли этот пост
if (DB::query('SELECT id FROM posts WHERE id=:postid AND user_id=:userid', array(':postid'=>$_GET['postid'], ':userid'=>$followerid))) {
// удалем пост
DB::query('DELETE FROM posts WHERE id=:postid and user_id=:userid', array(':postid'=>$_GET['postid'], ':userid'=>$followerid));
// удаляем лайки, связанные с постом
DB::query('DELETE FROM post_likes WHERE post_id=:postid', array(':postid'=>$_GET['postid']));
echo 'Post deleted!';
}
}
// Отправка формы
if (isset($_POST['post'])) {
if ($_FILES['postimg']['size'] == 0) {
Post::createPost($_POST['postbody'], Login::isLoggedIn(), $userid);
} else {
$postid = Post::createImgPost($_POST['postbody'], Login::isLoggedIn(), $userid);
Image::uploadImage('postimg', "UPDATE posts SET postimg=:postimg WHERE id=:postid", array(':postid'=>$postid));
}
}
// лайки
if (isset($_GET['postid']) && !isset($_POST['deletepost'])) {
Post::likePost($_GET['postid'], $followerid);
}
$posts = Post::displayPosts($userid, $username, $followerid);
} else {
die('User not found!');
}
}
?>

<h1><?php echo $username; ?>'s' Profile<?php if ($verified) { echo ' - Verified'; } ?> </h1> <br />
<?php //echo $email; ?>
<form action="profile.php?username=<?php echo $username; ?>" method="post">
<?php
// кнопка follow не будет отображаться для своего собственного профайла
if ($userid != $followerid) {
if ($isFollowing) {
echo '<input type="submit" name="unfollow" value="Unfollow"/>';
} else {
echo '<input type="submit" name="follow" value="Follow"/>';
}
}
?>
</form>


<form action="profile.php?username=<?php echo $username; ?>" method="post" enctype="multipart/form-data">
<textarea name="postbody" cols="80" rows="8"></textarea> <br />
Upload an image:
<input type="file" name="postimg"/>
<input type="submit" name="post" value="Post"/>
</form>

<div class="posts">
<?php echo $posts; ?>
</div>

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Network</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Highlight-Clean.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<link rel="stylesheet" href="assets/css/Login-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>

<body>
<header class="hidden-sm hidden-md hidden-lg">
<div class="searchbox">
<form>
<h1 class="text-left">Social Network</h1>
<div class="searchbox"><i class="glyphicon glyphicon-search"></i>
<input class="form-control" type="text">
</div>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">MENU <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</div>
</form>
</div>
<hr>
</header>
<div>
<nav class="navbar navbar-default hidden-xs navigation-clean">
<div class="container">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#"><i class="icon ion-ios-navigate"></i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<form class="navbar-form navbar-left">
<div class="searchbox"><i class="glyphicon glyphicon-search"></i>
<input class="form-control" type="text">
</div>
</form>
<ul class="nav navbar-nav hidden-md hidden-lg navbar-right">
<li role="presentation"><a href="#">My Timeline</a></li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="#">User <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs hidden-sm navbar-right">
<li class="active" role="presentation"><a href="#">Timeline</a></li>
<li role="presentation"><a href="#">Messages</a></li>
<li role="presentation"><a href="#">Notifications</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">User <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<h1><?php echo $username; ?>'s Profile <?php if ($verified) { echo '<i class="glyphicon glyphicon-ok-sign verified" data-toggle="tooltip" title="Verified User" style="font-size:28px;color:#da052b;"></i>'; } ?></h1></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><span><strong>About Me</strong></span>
<p>Welcome to my profile bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;</p>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<blockquote>
<p>@Francis Hello World</p>
<footer>Posted by howCode on 12/11/17
<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> 5 Likes</span></button>
<button class="btn btn-default comment" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;">
<i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> 2 Comments</span></button>
</footer>
</blockquote>
</li>
<li class="list-group-item">
<blockquote>
<p>@Francis Hello World</p>
<footer>Posted by howCode on 12/11/17
<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> 5 Likes</span></button>
<button class="btn btn-default comment" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;">
<i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> 2 Comments</span></button>
</footer>
</blockquote>
</li>
<li class="list-group-item">
<blockquote>
<p>@Francis Hello World</p>
<footer>Posted by howCode on 12/11/17
<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> 5 Likes</span></button>
<button class="btn btn-default comment" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;">
<i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> 2 Comments</span></button>
</footer>
</blockquote>
</li>
<li class="list-group-item">
<blockquote>
<p>@Francis Hello World</p>
<footer>Posted by howCode on 12/11/17
<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> 5 Likes</span></button>
<button class="btn btn-default comment" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;">
<i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> 2 Comments</span></button>
</footer>
</blockquote>
</li>
<li class="list-group-item">
<blockquote>
<p>@Francis Hello World</p>
<footer>Posted by howCode on 12/11/17
<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> 5 Likes</span></button>
<button class="btn btn-default comment" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;">
<i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> 2 Comments</span></button>
</footer>
</blockquote>
</li>
</ul>
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button" style="width:100%;background-image:url(&quot;none&quot;);background-color:#da052b;color:#fff;padding:16px 32px;margin:0px 0px 6px;border:none;box-shadow:none;text-shadow:none;opacity:0.9;text-transform:uppercase;font-weight:bold;font-size:13px;letter-spacing:0.4px;line-height:1;outline:none;">NEW POST</button>
<ul class="list-group"></ul>
</div>
</div>
</div>
</div>
<div class="footer-dark">
<footer>
<div class="container">
<p class="copyright">Social Network© 2016</p>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$.ajax({

type: "GET",
url: "api/profileposts",
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var posts = JSON.parse(r)
$.each(posts, function(index) {
$('.timelineposts').html(
$('.timelineposts').html() + '<blockquote><p>'+posts[index].PostBody+'</p><footer>Posted by '+posts[index].PostedBy+' on '+posts[index].PostDate+'<button class="btn btn-default" data-id="'+posts[index].PostId+'" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+posts[index].Likes+' Likes</span></button><button class="btn btn-default comment" type="button" data-postid="'+posts[index].PostId+'" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"><i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> Comments</span></button></footer></blockquote>'
)

$('[data-postid]').click(function() {
var buttonid = $(this).attr('data-postid');

$.ajax({

type: "GET",
url: "api/comments?postid=" + $(this).attr('data-postid'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
showCommentsModal(res);
},
error: function(r) {
console.log(r)
}

});
});

$('[data-id]').click(function() {
var buttonid = $(this).attr('data-id');
$.ajax({

type: "POST",
url: "api/likes?id=" + $(this).attr('data-id'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
$("[data-id='"+buttonid+"']").html(' <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+res.Likes+' Likes</span>')
},
error: function(r) {
console.log(r)
}

});
})
})

},
error: function(r) {
console.log(r)
}

});

});

function showCommentsModal(res) {
$('.modal').modal('show')
var output = "";
for (var i = 0; i < res.length; i++) {
output += res[i].Comment;
output += " ~ ";
output += res[i].CommentedBy;
output += "<hr />";
}

$('.modal-body').html(output)
}

</script>
</body>

</html>



Идем в api/index.php
<?php
require_once("DB.php");
require_once("Mail.php");

$db = new DB("127.0.0.1", "SocialNetwork", "root", "");

// 'REQUEST_METHOD' - Какой метод был использован для запроса страницы; к примеру 'GET', 'HEAD', 'POST', 'PUT'.
if ($_SERVER['REQUEST_METHOD'] == "GET") {
if ($_GET['url'] == "auth") {
//
} else if ($_GET['url'] == "users") {
//
} else if ($_GET['url'] == "comments" && isset($_GET['postid'])) {
// комментарии
$output = "";
$comments = $db->query('SELECT comments.comment, users.username FROM comments, users WHERE post_id = :postid AND comments.user_id = users.id', array(':postid'=>$_GET['postid']));
$output .= "[";
foreach($comments as $comment) {
$output .= "{";
$output .= '"Comment": "'.$comment['comment'].'",';
$output .= '"CommentedBy": "'.$comment['username'].'"';
$output .= "},";
//echo $comment['comment']." ~ ".$comment['username']."<hr />";
}
$output = substr($output, 0, strlen($output)-1);
$output .= "]";
echo $output;
} else if ($_GET['url'] == "posts") {
$token = $_COOKIE['SNID'];
$userid = $db->query('SELECT user_id FROM login_tokens WHERE token=:token', array(':token'=>sha1($token)))[0]['user_id'];
$followingposts = $db->query('SELECT posts.id, posts.body, posts.posted_at, posts.likes, users.`username` FROM users, posts, followers
WHERE posts.user_id = followers.user_id
AND users.id = posts.user_id
AND follower_id = :userid
ORDER BY posts.likes DESC;', array(':userid'=>$userid));
$response = "[";

foreach($followingposts as $post) {
$response .= "{";
$response .= '"PostId": '.$post['id'].',';
$response .= '"PostBody": "'.$post['body'].'",';
$response .= '"PostedBy": "'.$post['username'].'",';
$response .= '"PostDate": "'.$post['posted_at'].'",';
$response .= '"Likes": '.$post['likes'].'';
$response .= "},";
}
$response = substr($response, 0, strlen($response)-1);
$response .= "]";
http_response_code(200);
echo $response;
} else if ($_GET['url'] == "profileposts") {
$userid = $db->query('SELECT id FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['id'];

$followingposts = $db->query('SELECT posts.id, posts.body, posts.posted_at, posts.likes, users.`username` FROM users, posts
WHERE users.id = posts.user_id
AND users.id = :userid
ORDER BY posts.likes DESC;', array(':userid'=>$userid));

$response = "[";

foreach($followingposts as $post) {
$response .= "{";
$response .= '"PostId": '.$post['id'].',';
$response .= '"PostBody": "'.$post['body'].'",';
$response .= '"PostedBy": "'.$post['username'].'",';
$response .= '"PostDate": "'.$post['posted_at'].'",';
$response .= '"Likes": '.$post['likes'].'';
$response .= "},";
}
$response = substr($response, 0, strlen($response)-1);
$response .= "]";
http_response_code(200);
echo $response;
}
} else if ($_SERVER['REQUEST_METHOD'] == "POST") {
// Создание аккаунта
if ($_GET['url'] == "users") {
$postBody = file_get_contents("php://input");
$postBody = json_decode($postBody);

$username = $postBody->username;
$email = $postBody->email;
$password = $postBody->password;
if(!$db->query('SELECT username FROM users WHERE username=:username', array(':username'=>$username))) {
if(strlen($username) >= 3 && strlen($username) <= 32) {
if(preg_match('/[a-zA-Z0-9_]+/', $username)) {
if(strlen($password) >= 6 && strlen($password) <= 60) {
if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
if(!$db->query('SELECT email FROM users WHERE email=:email', array(':email'=>$email))) {
$db->query('INSERT INTO users VALUES (:id, :username, :password, :email, \'0\', \'\')', array(':id'=>null, ':username'=>$username, ':password'=>password_hash($password, PASSWORD_BCRYPT), ':email'=>$email));
Mail::sendMail('Welcome to our Social Network!', 'Your account has been created!', $email);
echo '{ "Success": "User created!" }';
http_response_code(200);
} else {
echo '{ "Error": "Email in use!" }';
http_response_code(409);
}
} else {
echo '{ "Error": "Invalid Email!" }';
http_response_code(409);
}
} else {
echo '{ "Error": "Invalid Password!" }';
http_response_code(409);
}
} else {
echo '{ "Error": "Invalid username!" }';
http_response_code(409);
}
} else {
echo '{ "Error": "Invalid username!" }';
http_response_code(409);
}
} else {
echo '{ "Error": "User exists!" }';
http_response_code(409); // 409 Conflict («конфликт»)
}
}
// Логин
if ($_GET['url'] == "auth") {
$postBody = file_get_contents("php://input");
$postBody = json_decode($postBody);

$username = $postBody->username;
$password = $postBody->password;

if ($db->query('SELECT username FROM users WHERE username=:username', array(':username'=>$username))) {
// password_verify — Проверяет, соответствует ли пароль хешу
if (password_verify($password, $db->query('SELECT password FROM users WHERE username=:username', array(':username'=>$username))[0]['password'])) {
$cstrong = True;
$token = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
$user_id = $db->query('SELECT id FROM users WHERE username=:username', array(':username'=>$username))[0]['id'];
$db->query('INSERT INTO login_tokens VALUE (:id, :token, :user_id)', array(':id'=>null, ':token'=>sha1($token), ':user_id'=>$user_id));
echo '{ "Token": "'.$token.'" }';
} else {
echo '{ "Error": "Invalid username or password!" }';
http_response_code(401);
}
} else {
echo '{ "Error": "Invalid username or password!" }';
http_response_code(401);
}
} else if ($_GET['url'] == "likes") {
// Like-button. Копируем из класса Post
$postId = $_GET['id'];
$token = $_COOKIE['SNID'];
$likerId = $db->query('SELECT user_id FROM login_tokens WHERE token=:token', array(':token'=>sha1($token)))[0]['user_id'];
if (!$db->query('SELECT user_id FROM post_likes WHERE post_id=:postid AND user_id=:userid', array(':postid'=>$postId, ':userid'=>$likerId))) {
$db->query('UPDATE posts SET likes=likes+1 WHERE id=:postid', array(':postid'=>$postId));
$db->query('INSERT INTO post_likes VALUES (:id, :postid, :userid)', array(':id'=>null, ':postid'=>$postId, ':userid'=>$likerId));
//Notify::createNotify("", $postId);
} else {
$db->query('UPDATE posts SET likes=likes-1 WHERE id=:postid', array(':postid'=>$postId));
$db->query('DELETE FROM post_likes WHERE post_id=:postid AND user_id=:userid', array(':postid'=>$postId, ':userid'=>$likerId));
}
echo "{";
echo '"Likes":';
echo $db->query('SELECT likes FROM posts WHERE id=:postid', array(':postid'=>$postId))[0]['likes'];
echo "}";
}
} else if ($_SERVER['REQUEST_METHOD'] == "DELETE") {
if ($_GET['url'] == "auth") {
if (isset($_GET['token'])) {
if ($db->query("SELECT token FROM login_tokens WHERE token=:token", array(':token'=>sha1($_GET['token'])))) {
$db->query('DELETE FROM login_tokens WHERE token=:token', array(':token'=>sha1($_GET['token'])));
echo '{ "Status": "Success" }';
http_response_code(200);
} else {
echo '{ "Error": "Invalid token" }';
http_response_code(400);
}
} else {
echo '{ "Error": "Mal-formed request" }';
http_response_code(400);
}
}
}
else {
http_response_code(405);
}


?>


Протестируем http://newsocial.loc/api/profileposts?username=Vasya

Исправим profile.php

<?php
include('./classes/DB.php');
include('./classes/Login.php');
include('./classes/Post.php');
include('./classes/Image.php');
include('./classes/Notify.php');

$username = "";
$verified = False;
$isFollowing = False;
if (isset($_GET['username'])) {
if (DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$_GET['username']))) {

$username = DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['username'];
$userid = DB::query('SELECT id FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['id'];
$verified = DB::query('SELECT verified FROM users WHERE username=:username', array(':username'=>$_GET['username']))[0]['verified'];
$followerid = Login::isLoggedIn();

if (isset($_POST['follow'])) {

if ($userid != $followerid) {

if (!DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
if ($followerid == 6) {
DB::query('UPDATE users SET verified=1 WHERE id=:userid', array(':userid'=>$userid));
}
DB::query('INSERT INTO followers VALUES (\'\', :userid, :followerid)', array(':userid'=>$userid, ':followerid'=>$followerid));
} else {
echo 'Already following!';
}
$isFollowing = True;
}
}
if (isset($_POST['unfollow'])) {

if ($userid != $followerid) {

if (DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
if ($followerid == 6) {
DB::query('UPDATE users SET verified=0 WHERE id=:userid', array(':userid'=>$userid));
}
DB::query('DELETE FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid));
}
$isFollowing = False;
}
}
if (DB::query('SELECT follower_id FROM followers WHERE user_id=:userid AND follower_id=:followerid', array(':userid'=>$userid, ':followerid'=>$followerid))) {
//echo 'Already following!';
$isFollowing = True;
}

if (isset($_POST['deletepost'])) {
if (DB::query('SELECT id FROM posts WHERE id=:postid AND user_id=:userid', array(':postid'=>$_GET['postid'], ':userid'=>$followerid))) {
DB::query('DELETE FROM posts WHERE id=:postid and user_id=:userid', array(':postid'=>$_GET['postid'], ':userid'=>$followerid));
DB::query('DELETE FROM post_likes WHERE post_id=:postid', array(':postid'=>$_GET['postid']));
echo 'Post deleted!';
}
}


if (isset($_POST['post'])) {
if ($_FILES['postimg']['size'] == 0) {
Post::createPost($_POST['postbody'], Login::isLoggedIn(), $userid);
} else {
$postid = Post::createImgPost($_POST['postbody'], Login::isLoggedIn(), $userid);
Image::uploadImage('postimg', "UPDATE posts SET postimg=:postimg WHERE id=:postid", array(':postid'=>$postid));
}
}

if (isset($_GET['postid']) && !isset($_POST['deletepost'])) {
Post::likePost($_GET['postid'], $followerid);
}

$posts = Post::displayPosts($userid, $username, $followerid);


} else {
die('User not found!');
}
}

?>

<!-- <form action="profile.php?username=<?php echo $username; ?>" method="post" enctype="multipart/form-data">
<textarea name="postbody" rows="8" cols="80"></textarea>
<br />Upload an image:
<input type="file" name="postimg">
<input type="submit" name="post" value="Post">
</form> -->
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Network</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Highlight-Clean.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<link rel="stylesheet" href="assets/css/Login-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>

<body>
<header class="hidden-sm hidden-md hidden-lg">
<div class="searchbox">
<form>
<h1 class="text-left">Social Network</h1>
<div class="searchbox"><i class="glyphicon glyphicon-search"></i>
<input class="form-control" type="text">
</div>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">MENU <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</div>
</form>
</div>
<hr>
</header>
<div>
<nav class="navbar navbar-default hidden-xs navigation-clean">
<div class="container">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#"><i class="icon ion-ios-navigate"></i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<form class="navbar-form navbar-left">
<div class="searchbox"><i class="glyphicon glyphicon-search"></i>
<input class="form-control" type="text">
</div>
</form>
<ul class="nav navbar-nav hidden-md hidden-lg navbar-right">
<li role="presentation"><a href="#">My Timeline</a></li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="#">User <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs hidden-sm navbar-right">
<li class="active" role="presentation"><a href="#">Timeline</a></li>
<li role="presentation"><a href="#">Messages</a></li>
<li role="presentation"><a href="#">Notifications</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">User <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"><a href="#">My Profile</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#">Timeline </a></li>
<li role="presentation"><a href="#">Messages </a></li>
<li role="presentation"><a href="#">Notifications </a></li>
<li role="presentation"><a href="#">My Account</a></li>
<li role="presentation"><a href="#">Logout </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<h1><?php echo $username; ?>'s Profile <?php if ($verified) { echo '<i class="glyphicon glyphicon-ok-sign verified" data-toggle="tooltip" title="Verified User" style="font-size:28px;color:#da052b;"></i>'; } ?></h1></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><span><strong>About Me</strong></span>
<p>Welcome to my profile bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;bla bla&nbsp;</p>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">
<div class="timelineposts">

</div>
</ul>
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button" style="width:100%;background-image:url(&quot;none&quot;);background-color:#da052b;color:#fff;padding:16px 32px;margin:0px 0px 6px;border:none;box-shadow:none;text-shadow:none;opacity:0.9;text-transform:uppercase;font-weight:bold;font-size:13px;letter-spacing:0.4px;line-height:1;outline:none;">NEW POST</button>
<ul class="list-group"></ul>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" tabindex="-1" style="padding-top:100px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title">Comments</h4></div>
<div class="modal-body" style="max-height: 400px; overflow-y: auto">
<p>The content of your modal.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="footer-dark">
<footer>
<div class="container">
<p class="copyright">Social Network© 2016</p>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$.ajax({

type: "GET",
url: "api/profileposts?username=<?php echo $username; ?>",
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var posts = JSON.parse(r)
$.each(posts, function(index) {
$('.timelineposts').html(
$('.timelineposts').html() +

'<li class="list-group-item"><blockquote><p>'+posts[index].PostBody+'</p><footer>Posted by '+posts[index].PostedBy+' on '+posts[index].PostDate+'<button class="btn btn-default" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;" data-id=\"'+posts[index].PostId+'\"> <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+posts[index].Likes+' Likes</span></button><button class="btn btn-default comment" data-postid=\"'+posts[index].PostId+'\" type="button" style="color:#eb3b60;background-image:url(&quot;none&quot;);background-color:transparent;"><i class="glyphicon glyphicon-flash" style="color:#f9d616;"></i><span style="color:#f9d616;"> Comments</span></button></footer></blockquote></li>'
)

$('[data-postid]').click(function() {
var buttonid = $(this).attr('data-postid');

$.ajax({

type: "GET",
url: "api/comments?postid=" + $(this).attr('data-postid'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
showCommentsModal(res);
},
error: function(r) {
console.log(r)
}

});
});

$('[data-id]').click(function() {
var buttonid = $(this).attr('data-id');
$.ajax({

type: "POST",
url: "api/likes?id=" + $(this).attr('data-id'),
processData: false,
contentType: "application/json",
data: '',
success: function(r) {
var res = JSON.parse(r)
$("[data-id='"+buttonid+"']").html(' <i class="glyphicon glyphicon-heart" data-aos="flip-right"></i><span> '+res.Likes+' Likes</span>')
},
error: function(r) {
console.log(r)
}

});
})
})

},
error: function(r) {
console.log(r)
}

});

});

function showCommentsModal(res) {
$('.modal').modal('show')
var output = "";
for (var i = 0; i < res.length; i++) {
output += res[i].Comment;
output += " ~ ";
output += res[i].CommentedBy;
output += "<hr />";
}

$('.modal-body').html(output)
}

</script>
</body>


</html>

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html