Video games tester jobs from home

Create Text Editor using HTML Jquery like in Blogger

You might have seen text editors where you can bold a text, italic a text etc... The perfect example of this the Blogger Post Text Editor.

This is a simple tutorial that will create a text editor using HTML, Jquery & JavaScript.

Download Demo

We have two files, index.html which contains the HTML code and texteditor.js which contains the jQuery code. You should include the texteditor.js in index.html.

index.html

<!DOCTYPE html><html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="texteditor.js"></script>
</head>
<body>
<center style="margin-bottom:20px;">
<div class="ze ie"></div>
<style>
.font-bold.bold{font-weight:bold;}.italic{font-style:italic;}.selected{background-color: orange;}#openpb{margin:15px;}
</style>
<button type="button" class="g-button g-button-submit" id=stext>Text</button>    
<button type="button" class="g-button g-button-submit" id=shtml>HTML</button>
<div id="controls" style="margin-bottom: 10px;">
<a id="bold" style="color:black;display: inline-block;" class="font-bold">
<button type="button">B</button>
</a>   
<a id="italic" style="color:black !important;display: inline-block;"class="italic">
<button type="button">I</button>
</a>    
<a id="link" class="link" style="display: inline-block;">
<button type="button">Link</button>
</a>    
<select id="fonts" class="g-button">
<option value="Normal">Normal</option>
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma New">Tahoma</option>
<option value="Times">Times</option>
<option value="Trebuchet New">Trebuchet</option>
<option value="Ubuntu">Ubuntu</option>
</select>
</div>
<iframe frameborder="0" id="textEditor" style="width:500px; height:80px;border:2px solid #CCC;border-radius:20px;overflow:auto;"></iframe>
</div>
<textarea name="text" id=text style="border-radius:20px;overflow:auto;display:none;padding-left: 10px;" rows="6" cols="53"></textarea>
</center>
</body>
</html>

texteditor.js

$(document).ready(function(){
document.getElementById(textEditor).contentWindow.document.designMode="on";
document.getElementById(textEditor).contentWindow.document.close();
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
$("#bold").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
ItalicIt();
});
$("#fonts").on(change,function(){
changeFont($("#fonts").val());
});
$("#link").click(function(){
var urlp=prompt("What is the link:","http://");
url(urlp);
});
$("#stext").click(function(){
$("#text").hide();
$("#textEditor").show();
$("#controls").show()
});
$("#shtml").on(click,function(){
$("#text").css("display","block");
$("#textEditor").hide();
$("#controls").hide();
});
});
function boldIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
function url(url){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("Createlink", false, url);
edit.focus();
}
setInterval(function(){
var gyt=$("#textEditor").contents().find("body").html().match(/@/g);
if($("#textEditor").contents().find("body").html().match(/@/g)>=0){}else{
$("#text").val($("#textEditor").contents().find("body").html());
}
$("#text").val($("#textEditor").contents().find("body").html());
},1000);

The user will type text in the iframe. The HTML of iframe will be added in the textarea. So when the user clicks HTML button he sees the HTML of iframe. You can pass the textarea value to your database if needed, but use htmlspecialchars when passing in PHP, because the user can inject XSS codes.

{ Read More }

Create Facebook Like System with Jquery MySQL PDO In PHP

Want to get a Facebook Like system in your site ? Youre at the right place. This technic is used in my social network, Friendshood. See the demo there in the social network. But you have to signup.

DEMO

You should create a user table with users data including user id, username, password, email etc...

The table should be like this:

Lets start by creating a likes table.

CREATE TABLE `fdlikes` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`pid` int NOT NULL PRIMARY KEY ,
`user` varchar(25) NOT NULL UNIQUE
);

The pid field is for the post id. The user field is for the user id.

Create a post table to insert posts created by users.

CREATE TABLE `fdposts` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`user` varchar(25) NOT NULL,
`message` varchar(200) NOT NULL,
`likes` int(11) DEFAULT NULL,
`posted` varchar(200) NOT NULL,
);

The id field is an auto increment field which decides the post id. User field is the users id and likes field contains number of users who liked the post. Posted field contains the date and time in which the post was created.
First of all create a config file that will connect to database. We are going to use PDO.

config.php

$dbh = new PDO(mysql:dbname=database;host=127.0.0.1, username, password);

Showing Like/Unlike Button

<?
include("config.php");
$pid=1; //Post id - Post is "Hi everybody"
$uid=1; //User id - User is "Subin Siby"
$sql=$dbh->query("SELECT * FROM fdlikes WHERE pid=$pid and user=$uid");
if($sql->rowCount()==1){
echo <a href="#" class="like" id=".$pid." title="Unlike">Unlike</a>;
else{
echo <a href="#" class="like" id=".$pid." title="Like">Like</a>;
}
?>

jQuery code to post like/unlike action

$(".like").on(click, function(){
if($(this).attr(title)==Like){
$.post(action.php,{pid:$(this).attr(id),action:like},function(){
$(this).text(Unlike);
$(this).attr(title,Unlike);
});
}else{
if($(this).attr(title)==Unlike){
$.post(action.php,{pid:$(this).attr(id),action:unlike},function(){
$(this).text(Like);
$(this).attr(title,Like);
});
}
}
});

PHP code to like/unlike in which jQuery sends request

This file is action.php

<?
include("config.php");
$pid=$_POST[pid];
$user=$_COOKIE[user];
$action=$_POST[action];
if ($action==like){
$sql=$dbh->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
$sql->execute(array($pid,$user));
$matches=$sql->rowCount();
if($matches==0){
$sql=$dbh->prepare("INSERT INTO fdlikes (pid, user) VALUES(?, ?)");
$sql->execute(array($pid,$user));
$sql=$dbh->prepare("UPDATE fdposts SET likes=likes+1 WHERE id=?");
$sql->execute(array($pid));
}else{
die("There is No Post With That ID");
}
}
if($action==unlike){
$sql=$dbh->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
$sql->execute(array($pid,$user));
$matches=$sql->rowCount();
if ($matches!=0){
$sql=$dbh->prepare("DELETE FROM fdlikes WHERE pid=? AND user=?");
$sql->execute(array($pid,$user));
$sql=$dbh->prepare("UPDATE fdposts SET likes=likes-1 WHERE id=?");
$sql->execute(array($pid));
}
}
?>

Thats it. Try it out. If theres any bugs, problems or questions feel free to comment below on DisQus.

{ Read More }

Video games tester jobs from home

Monday, 15 May 2017

Create Text Editor using HTML Jquery like in Blogger

Create Text Editor using HTML Jquery like in Blogger

Friday, 14 April 2017

Create Facebook Like System with Jquery MySQL PDO In PHP

Create Facebook Like System with Jquery MySQL PDO In PHP

config.php

Showing Like/Unlike Button

jQuery code to post like/unlike action

PHP code to like/unlike in which jQuery sends request