Hello this is going to be a long post so thanks in advance for just reading it. I think it will help many users.
I want to store additional data and to add new rows to a table. I know about mysql and php but i am not familiar with JSON and javascript.
i want to add more html code to store audio/video files as well as photos but i dont know how to use the JSON /JAVASCRIPT code that calls the api/updateNewsFeed php code and eventually store them to the table which i have to add more rows
Here is the HTML that stores a photo or a webcam snap or a location into a table.
<!-- Photo Upload --> <div class="padding10 blockControl displaynone" id="photoContainer"> <form id="imageform" method="post" enctype="multipart/form-data" action="<?php echo API_BASE_URL ?>api/feedImageUpload"> <div id="preview" class="marginbottom10"> </div> <div id="imageloadstatus" class="displaynone marginbottom10"> <img src="<?php echo BASE_URL; ?>wall_icons/ajaxloader.gif" class="icon"> Uploading please wait ....
</div> <div id="imageloadbutton"> <span id="addphoto">Add Photos:</span> <input type="file" name="photos[]" id="photoimg" multiple="true"> </div> <input type="hidden" id="uploadvalues"> <input type="hidden" id="upload_uid" value="<?php echo $sessionUid;?>" name="update_uid"> <input type="hidden" id="upload_token" value="<?php echo $sessionToken;?>" name="update_token"> <input type="hidden" id="group_id" value="<?php echo $groupID; ?>" name="group_id"> </form>
you can change the medias photo in the media profile page
</div> <!-- End of Photo Upload --> <!-- Location Upload --> <div class=" blockControl displaynone" id="geoContainer"> <input type='hidden' id='latitude' value=''/><input type='hidden' id='longitude' value=''/> <div id="geoContainerDiv"></div> </div> <!-- End of Location Upload --> <!-- Webcam Upload --> <div class="padding10 blockControl displaynone" id="webcamContainer"> <div> <div id="webcam"> </div> <div id="webcam_preview"></div> </div> <div id='webcam_status' style="clear:both" ></div> <div id='webcam_takesnap'> <input type="button" value=" Take Snap " id="takeSnap" class="camclick wallbutton"/> <input type="hidden" id="webcam_count" /> </div> </div> <!-- End of Webcam Upload --> <span id="updateButton" class="update_button wallbutton update_box"> <i class="fa fa-paper-plane"></i> <span class="buttonUpdate">Share This</span> </span>the javascript code is this
/* Upload Button */
$("body").on('click','#updateButton',function()
{
var update = $("#statusText").val();
var lat=$("#latitude").val();
var lang=$("#longitude").val();
var up=$("#uploadvalues").val();
if(up)
{
var uploadvalues=$("#uploadvalues").val();
}
else
{
var uploadvalues=$(".preview:last").attr('id');
}
var X=$('.preview').attr('id');
var Y=$('.webcam_preview').attr('id');
if(X)
{
var Z= X+','+uploadvalues;
}
else if(Y)
{
var Z= uploadvalues;
}
else
{
var Z=0;
}
if($.trim(update).length > 0)
{
/* Update News Feed */
updateNewsFeed(uid, update,Z,groupID,token,pic,lat,lang,baseUrl,apiBaseUrl);
$("#statusText").val('').focus().css("height", "20px");
$("#latitude").val('');
$("#longitude").val('');
$("#geoContainer").slideUp();
$('#uploadvalues').val('');
$('#preview').html('');
$("#webcamContainer").slideUp();
$('#webcam').html('');
$('#webcam_preview').html('');
$('#photoContainer').slideUp('fast');
}
else
{
$.alert({
title: '',
content: 'Please write something.',
confirm: function(){
$("#statusText").val('').focus();
}
});
}
});and then it uses another javascript script with JSON TO store the data.
/* update News Feed */
function updateNewsFeed(uid, update,uploads,group_id,token,pic,lat,lang,baseUrl,apiBaseUrl)
{
$("#newsFeed").fadeIn();
var embed='';
var encodedata=JSON.stringify({"uid": uid,"update": update,"group_id": group_id,"uploads": uploads,"token": token,"lat": lat,"lang": lang});
var url=apiBaseUrl+'**api/updateNewsFeed**';
ajaxPost(url,encodedata, function(data)
{
if(data.NewsFeedResult.length)
{
var Unshare="UnSuggest";
var Share="Suuggest";
var Like="Believe";
var Unlike="DisBelieve";
var Comment="Review";
var placeComment="Make a Review..."
if($.labelData)
{
Unshare=$.labelData.feedUnshare;
Share=$.labelData.feedShare;
Like=$.labelData.feedLike;
Unlike=$.labelData.feedUnLike;
Comment=$.labelData.feedComment;
placeComment=$.labelData.placeComment;
}
$.each(data.NewsFeedResult, function(i,data)
{
var shareHTML='';
var geoView=1;
/* Expanding URL Data*/
if(data.embed)
{
embed=data.embed;
geoView=0;
}
/*GEO MAP */
var geoHTML='';
var geoIMG ='';
if(lat && lang && geoView>0)
{
geoIMG ="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=570x300&scale=2&maptype=roadmap&markers=color:red%7Clabel:S%7C"+ lat +","+ lang;
geoHTML="<div class='geoDivBlock'><img src='"+geoIMG+"' style='width:100%'/></div>";
}
/* Share HTML */
if(data.uid_fk!=uid){
shareHTML='<a href="#" class="sharebutton icontext share'+data.msg_id+data.created+'" c="'+data.created+'" id="share'+data.msg_id+'" title="Suggest" rel="Share" data="0"><i class="fa fa-suggest"></i>'+Share+'</a>';
}
/* Upload Images */
var uploadImageHTMLTitle='<div class="img_container slider-wrapper"><div class="slider" id="slider'+data.msg_id+'">';
var uploadImageHTMLFooter='</div><div class="slider-direction-nav" id="slider_direction_'+data.msg_id+'"></div><div class="slider-control-nav" id="slider_control_'+data.msg_id+'"></div></div>';
var uploadImageHTML='';
var C='';
if(data.uploadPaths.length)
{
if(data.uploadPaths.length > 1)
{
uploadImageHTML+=uploadImageHTMLTitle;
for(var i=0; i<data.uploadPaths.length; i++)
{
C='<div class="slide'+i+'"><a href="'+data.uploadPaths[i]+'" data-lightbox="lightbox'+data.msg_id+'"><img src="'+data.uploadPaths[i]+'" class="imgpreview" id="'+data.msg_id+'" rel="'+data.msg_id+'"/></a></div>';
uploadImageHTML += C;
}
uploadImageHTML+=uploadImageHTMLFooter;
sliderLoad(data.msg_id);
}
else
{
uploadImageHTML='<div><a href="'+data.uploadPaths[0]+'" data-lightbox="lightbox'+data.msg_id+'"><img src="'+data.uploadPaths[0]+'" class="imgpreview" id="'+data.msg_id+'" rel="'+data.msg_id+'"/></a></div>';
}
}
var html='<div class="newsFeed-block timeline-block item newsFeed'+data.msg_id+data.created+'" id="newsFeed'+data.msg_id+'" rel="'+data.created+'" >'+
'<div class="panel panel-default">'+
'<div class="panel-heading">'+
'<div class="media">'+
'<a href="'+baseUrl+data.username+'" class="pull-left">'+
'<img src="'+data.profile_pic+'" class="media-object smallFace">'+
'</a>'+
'<div class="media-body">'+
'<a class="feedDelete commonDelete" c="'+data.created+'" href="#" id="deleteFeed'+data.msg_id+'" rel="" title="Delete Media"></a>'+
'<a href="'+baseUrl+data.username+'" class="feed-author">'+data.name+'</a>'+
'<a href="'+baseUrl+'status/'+data.msg_id+'" class="timeago" title="'+data.timeAgo+'"></a>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="panel-body">'+
'<p class="feedContent">'+data.message+'</p>'+
'</div><div>'+embed+'</div>'+uploadImageHTML+geoHTML+
'<div id="likeUserDiv'+data.msg_id+'" class="likeUserDiv'+data.msg_id+data.created+'">'+
'</div>'+
'<div class="st_like_share">'+
'<a href="#" class="reaction like icontext like'+data.msg_id+data.created+'" c="'+data.created+'" id="like'+data.msg_id+'" title="Like" rel="Like" data="0"><i class="fa fa-heart"></i>'+Like+'</a>'+
'<a href="#" class="commentopen icontext " id="commentopen'+data.msg_id+'" rel="'+data.msg_id+'" c="'+data.created+'" title="Review"><i class="fa-review"></i>'+Comment+' </a>'+
shareHTML+
'</div>'+
'<ul class="comments comments'+data.msg_id+data.created+'" id="comments'+data.msg_id+'">'+
'</ul>'+
'<ul class="comments displaynone commentBox commentBox'+data.msg_id+data.created+'" id="commentBox'+data.msg_id+'">'+
'<li class="comment-form " >'+
'<div class="input-group">'+
'<input type="text" class="form-control placeComment commentText'+data.msg_id+data.created+'" placeholder="'+placeComment+'" id="commentText'+data.msg_id+'"/>'+
'<span class="input-group-addon">'+
'<a href="#" id="commentCamara'+data.msg_id+'" class="commentCamera" title="Upload Image"><i class="fa fa-camera commentCamIcon"></i></a>'+
'</span>'+
'</div>'+
'<div class="margintop10" >'+
'<a href="#" class="wallbutton commentButton" id="commentButton'+data.msg_id+'" c="'+data.created+'">'+Comment+'</a></div>'+
''+
'</ul>'+
'</div>'+
'</div>';
$("#newsFeed").gridalicious('prepend', loadGrid(html));
if(up)
{
var uploadvalues=$("#uploadValues").val();
}
else
{
var uploadvalues=$(".preview:last").attr('id');
}
});
}
});
}and this is tha php code that is being called in javascript (api/updateNewsFeed) and stores the data into the table
/* Update NewsFeed */
function updateNewsFeed()
{
$request = \Slim\Slim::getInstance()->request();
$data = json_decode($request->getBody());
$uid=$data->uid;
$update=$data->update;
$uploads=$data->uploads;
$group_id=$data->group_id;
$lat=$data->lat;
$lang=$data->lang;
try {
$key=md5(SITE_KEY.$uid);
if($key==$data->token && $uid > 0)
{
$time=time();
$ip=$_SERVER['REMOTE_ADDR'];
$db = getDB();
if(empty($group_id))
{
$sql = "SELECT msg_id,message,created FROM `messages` WHERE uid_fk=:uid ORDER BY msg_id DESC LIMIT 1";
$stmt = $db->prepare($sql);
$stmt->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt->execute();
$NewsFeed = $stmt->fetchAll(PDO::FETCH_OBJ);
}
else
{
$sql = "SELECT msg_id,message,created FROM `messages` WHERE uid_fk=:uid and group_id_fk=:group_id ORDER BY msg_id DESC LIMIT 1";
$stmt = $db->prepare($sql);
$stmt->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt->bindParam("group_id", $group_id, PDO::PARAM_INT);
$stmt->execute();
$NewsFeed = $stmt->fetchAll(PDO::FETCH_OBJ);
}
if ($update!=$NewsFeed[0]->message && $time!=$NewsFeed[0]->created)
{
$uploads_array=explode(',',$uploads);
$uploads=implode(',',array_unique($uploads_array));
if(empty($uploads))
{
$uploads='';
}
if(empty($group_id) && $uid>0)
{
$s1="INSERT INTO `messages` (message, uid_fk, ip,created,uploads,lat,lang) VALUES (:feedUpdate, :uid, :ip,:time,:uploads,:lat,:lang)";
$stmt1 = $db->prepare($s1);
$stmt1->bindParam("feedUpdate", $update, PDO::PARAM_STR);
$stmt1->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt1->bindParam("ip", $ip);
$stmt1->bindParam("time", $time);
$stmt1->bindParam("uploads", $uploads, PDO::PARAM_STR);
$stmt1->bindParam("lat", $lat, PDO::PARAM_STR);
$stmt1->bindParam("lang", $lang, PDO::PARAM_STR);
$stmt1->execute();
$s2="UPDATE `users` SET updates_count=updates_count+1 WHERE uid=:uid";
$stmt2 = $db->prepare($s2);
$stmt2->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt2->execute();
$s3="SELECT M.group_id_fk,M.msg_id, M.uid_fk, M.message, M.created,M.uploads,M.like_count,M.comment_count,M.share_count, U.username,U.name,U.profile_pic FROM messages M, users U WHERE M.uid_fk=U.uid and M.uid_fk=:uid ORDER BY M.msg_id DESC LIMIT 1";
$stmt3= $db->prepare($s3);
$stmt3->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt3->execute();
$NewsFeedResult = $stmt3->fetchAll(PDO::FETCH_OBJ);
}
else
{
if(internalGroupCheck($uid,$group_id))
{
$s1="INSERT INTO `messages` (message, uid_fk, ip,created,uploads,lat,lang,group_id_fk) VALUES (:feedUpdate, :uid, :ip,:time,:uploads,:lat,:lang,:group_id)";
$stmt1 = $db->prepare($s1);
$stmt1->bindParam("feedUpdate", $update);
$stmt1->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt1->bindParam("ip", $ip);
$stmt1->bindParam("time", $time);
$stmt1->bindParam("uploads", $uploads, PDO::PARAM_STR);
$stmt1->bindParam("group_id", $group_id, PDO::PARAM_INT);
$stmt1->bindParam("lat", $lat, PDO::PARAM_STR);
$stmt1->bindParam("lang", $lang, PDO::PARAM_STR);
$stmt1->execute();
$s2="UPDATE `groups` SET group_updates=group_count+1 WHERE group_id=:group_id";
$stmt2 = $db->prepare($s2);
$stmt2->bindParam("group_id", $group_id, PDO::PARAM_STR);
$stmt2->execute();
$s3="SELECT M.group_id_fk,M.msg_id, M.uid_fk, M.message, M.created,M.uploads,M.like_count,M.comment_count,M.share_count, U.username,U.name,U.profile_pic FROM messages M, users U WHERE M.uid_fk=U.uid and M.uid_fk=:uid ORDER BY M.msg_id DESC LIMIT 1 ";
$stmt3 = $db->prepare($s3);
$stmt3->bindParam("uid", $uid, PDO::PARAM_INT);
$stmt3->execute();
$NewsFeedResult = $stmt3->fetchAll(PDO::FETCH_OBJ);
}
}
if($NewsFeedResult)
{
$n_time=$NewsFeedResult[0]->created;
$NewsFeedResult[0]->timeAgo=date("c", $n_time);
/* Start End */
$originalMessage=$NewsFeedResult[0]->message;
$NewsFeedResult[0]->message=htmlCode($NewsFeedResult[0]->message);
if($NewsFeedResult[0]->name)
{
$name=$NewsFeedResult[0]->name;
}
else
{
$name=$NewsFeedResult[0]->username;
}
$NewsFeedResult[0]->name = $name;
/* Profile Pic Modifiaction */
$NewsFeedResult[0]->profile_pic = profilePic($NewsFeedResult[0]->profile_pic);
}
if(textlink($originalMessage))
{
$link =textLink($originalMessage);
$em = new wallExpand($link);
$site = $em->get_site();
if($site != "")
{
$code = $em->get_iframe();
if($code == "")
{
$code = $em->get_embed();
if($code == "")
{
$codesrc=$em->get_thumb("medium");
}
}
if($codesrc)
{
$NewsFeedResult[0]->embed='<a href="'.$codesrc.'" data-lightbox="lightbox'.$NewsFeedResult[0]->msg_id.'"><img src="'.$codesrc.'" class="imgpreview" /></a>';
}
else if($code)
{
$NewsFeedResult[0]->embed = $code;
}
}
}
else
$NewsFeedResult[0]->embed = "";
/*Upload Image */
$uploadPaths=array();
if($NewsFeedResult[0]->uploads)
{
$s = explode(",", $NewsFeedResult[0]->uploads);
$NewsFeedResult[0]->uploadCount=count($s);
/* Upload Paths */
foreach($s as $a)
{
array_push($uploadPaths,internalGetImagePath($a));
}
$NewsFeedResult[0]->uploadPaths=$uploadPaths;
}
else
{
$NewsFeedResult[0]->uploadCount='';
$NewsFeedResult[0]->uploadPaths='';
}
$codesrc='';
$code='';
/* End */
$db = null;
echo '{"NewsFeedResult": ' . json_encode($NewsFeedResult) . '}';
}
}
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}