All post

Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

5:21 AM Add Comment

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook  yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?



ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan
Langkah 1:
Kita butuh file jquery dan css yakni  :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />
Langkah ke 2:
Kita buat file dengan nama tes.php copy kode di bawah
<div id="chat-sidebar">

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar2.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nani')">nani</a> </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nini')">nini</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('lala')">lala</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar5.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('deni')">deni</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a>  </span>
      </div>     

       
</div>     

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan  donlod di sini
Sekian postingan kali ini semoga bermanfaat terima kasih

Tutorial Membuat Game ular menggunakan HTML dan Jquery

4:59 AM Add Comment

Bismilah

Lama tidak posting kali ini saya akan membagikan game ular atau game snake sebenarnya game ini bukan buatan saya namun dengan game ini saya banyak belajar ok langsung saja Let,s  go pertama apa saja yang di butuhkan tentunya file jquery.min.js setelah itu kita buat file dengan nama index.hml lalu pastekan kode di bawah



 <!DOCTYPE html>
<html>
<head>
 <title> Snake Game </title>
 <link rel="stylesheet" href="snake.css">
 <!-- jQuery -->
<script src="jquery.min.js" type="text/javascript"></script>
<style>
#container {
 margin: auto;
 width: 600px;
}

#myCanvas {
 background-color: black;
 border: 3px white solid;

}

#gameover {
 position : absolute;
 top: 200px;
 left: 600px;
 font-size: 25px;
 text-align: center;
 color: #FFFFFF;
 display: none;
}

#score {
 width: 600px;
 height: 100px;
 margin: auto;
 background-color: white;
 border: 3px black solid;
color: black; 
-webkit-box-shadow:0 0 20px #000;
 -moz-box-shadow: 0 0 20px #000;
 box-shadow:0 0 20px #000; 
 padding-left:5px; 

}

#current, #highest {
 font-size : 25px;
 color: black;
 text-align: center;

}

a {
 text-decoration: none;
 color : #FFFFFF;
 background-color: #9c27b0; 
 padding-left:5px; 
  padding-right:5px; 
  border-radius: 7px;
}
a:hover{
 text-decoration: none;
 color : #FFFFFF;
 background-color: #673ab7; 
 padding-left:5px; 
  padding-right:5px; 
  border-radius: 7px;
}
span {
 color : #FFFFFF;
}
</style>

<script>
$(document).ready(function() {

 var canvas = $("#myCanvas")[0];
 var ctx = canvas.getContext("2d");
 var w = $("#myCanvas").width();
 var h = $("#myCanvas").height();
 var cw = 15;
 var food;
 var snake;
 var d = "RIGHT";

 var gameloop = setInterval(update, 100);

 function update() {
  if (d == "RIGHT")
   snake.x = snake.x + 1;
  else if (d == "LEFT")
   snake.x = snake.x - 1;
  else if (d == "UP")
   snake.y = snake.y - 1;
  else if (d == "DOWN")
   snake.y = snake.y + 1;

  check_borders();
  check_food();
  blank();
  paint_cell(food.x, food.y, "grey");
  paint_cell(snake.x, snake.y, "green");
 }

 function showGameOver() {

  var current = $('#current').text();
  $('#final').text(current);
  $('#gameover').fadeIn();
 }

 function updateHighScore() {
  var current = $("#current").text();
  var highest = $("#highest").text();
  if (parseInt(current) > parseInt(highest)) {
   $('#highest').text(current)
  }
 
 }

 function placeFood() {
  food = {
   x : Math.round(Math.random()*(w-cw)/cw),
   y : Math.round(Math.random()*(h-cw)/cw)
  }
 }

 function placeSnake() {
  snake = {
   x : Math.round(Math.random()*(w-cw)/cw),
   y : Math.round(Math.random()*(h-cw)/cw)  
  }
 }

 function blank(){
  //Paint The Canvas
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "white";
  ctx.strokeRect(0, 0, w, h);

 }

 function check_borders() {
  if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {
   clearInterval(gameloop);
   showGameOver();
  }
 }

 function paint_cell(x,y, color){
  ctx.fillStyle=color;
  ctx.fillRect(x*cw,y*cw,cw,cw);
  ctx.strokeStyle="white";
  ctx.strokeRect(x*cw,y*cw,cw,cw);
 }

 function check_food() {
  if (food.x == snake.x && food.y == snake.y) {
   var current = parseInt($('#current').text());
   current += 1;
   $('#current').text(current);
   placeFood();
  }
 

 }

 placeFood();
 paint_cell(food.x, food.y, "grey");
 placeSnake();
 paint_cell(snake.x, snake.y, "green");

 //Keyboard Controller
 $(document).keydown(function(e){
  //39: RIGHT
  //37: LEFT
  //38: UP
  //40: DOWN
  var key = e.which;
  if(key == "37") {
   snake.x -= 1;
   d = "LEFT";
  }
  else if(key == "38") {
   snake.y -= 1;
   d = "UP";
  }
  else if(key == "39") {
   snake.x += 1;
   d = "RIGHT";
  }
  else if(key == "40") {
   snake.y += 1;
   d = "DOWN";
  }

  check_food();
  blank();
  color = "grey";
  paint_cell(food.x, food.y);
  color = "green";
  paint_cell(snake.x, snake.y);

 });

});
</script>
</head>
<body>
 <div id="container">
  <div id="gameover">
   Game over!
   <br>
    skor kamu <span id="final"></span>
   <br>
   <a onClick="window.location.reload()" href="#">klik untuk main lagi</a>
  </div>
  <canvas id="myCanvas" width="600" height="450">
   Your browser does not support the canvas feature
  </canvas>
  <div id="score">
   <div>skor kamu:<span id="current">0</span>
   </div>
   <div>gunakan panah ke kiri kanan atas dan bawah untuk menggerakan  <span id="highest"></span>
   </div>
  </div>
 </div>



</body>
</html>
Cukup sekian postingan kali ini semoga bermanfaat untuk source codenya silahkan download di sini

Tutorial Cara Mudah Upload Gambar Tanpa Reload menggunakan ajax dan jquery

5:13 AM Add Comment

Tutorial Cara Mudah Upload Gambar Tanpa Reload menggunakan ajax dan jquery
Bismillah

Kali ini yang akan kita bahas mengenai tekhnik upload tekhnik upload ini juga merupakan suatu kebutuhan yang sering kita lihat di aplikasi website entah itu untuk  kebutuhan  gallery, foto profil atau pun untuk artikel  dengan fitur ini kita bisa mengupload jenis file ataupun gambar dan foto
Secara default fitur yang di sediakan oleh html adalah tombol upload secara statis, artinya proses upload tidak akan berjalan secara belakang layar hal ini tentu sangat tidak efektif 

untuk itu kita bahas tekhnik upload menggunakan ajax sehingga bisa melakukan proses upload walaupun sedang menulis artikel ataupun tanpa refresh reload halaman. ok langsung saja apa saja yang di butuhkan kita membutuhkan file js untuk membuat proses dapat berjalan yaitu file jquery dan ajaxupload
Pertama kita buat index.php kodenya seperti di bawah
<html>
<head>
      <title>Upload File</title>
     
      <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
      <script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
      <link rel="stylesheet" type="text/css" href="css/Ajaxfile-upload.css" />
     
      <script type="text/javascript">
      jQuery(document).ready(function(){
            var btnUpload=$('#me');
            var mestatus=$('#mestatus');
            var files=$('#files');
            new AjaxUpload(btnUpload, {
                  action: 'upload_file.php',
                  name: 'uploadfile',
                  onSubmit: function(file, ext){
                         if (! (ext && /^(jpg|jpeg|png|bmp|gif)$/.test(ext))){
                              // extension is not allowed
                              mestatus.text('Ekstensi File tidak disupport');
                              return false;
                        }
                        mestatus.html('<img src="ajax-loader.gif" height="16" width="16">');
                  },
                  onComplete: function(file, response){
                        //On completion clear the status
                        mestatus.text('');
                        //On completion clear the status
                        files.html('');
                        //Add uploaded file to list
                        if(response!=="error"){
                              $('<li></li>').appendTo('#files').html('<img src="images/'+response+'" alt="" width="150" style="border-radius: 10px; border: 3px solid #ccc"/><br />').addClass('success');
                              $('<li></li>').appendTo('#uploadfile').html('<input type="hidden" name="filename" value="'+response+'">').addClass('nameupload');
                             
                        } else{
                              $('<li></li>').appendTo('#files').text(file).addClass('error');
                        }
                  }
            });
      });
      </script>
</head>

<body>
      <form method='POST' action='' enctype='multipart/form-data'>
      <table cellpadding="8" width="100%">
            <tr valign="top">
                  <td width="130">Judul Halaman</td>
                  <td><input type='text' name='page_title' size='50' placeholder="Judul Halaman" style="background: #FFF; border: 1px solid #DDD; border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color:#666; outline: none; height: 30px; width: 266px; margin-right: 10px; padding: 5px;"></td>
            </tr>
            <tr valign="top">
                  <td>Gambar</td>
                  <td>
                        <div id="me" style="cursor:pointer; height: 40px; width: 72px;">
                              <label>
                                    <button class="button_profile">Browse</button>
                              </label>
                        </div>
                       
                        <span id="mestatus"> Recommend size is 640px x 480px</span>
                        <div id="uploadfile">
                              <li class="nameupload"></li>
                        </div>
                       
                        <div id="files">
                              <li class="success"></li>
                        </div>
                  </td>
            </tr>
            <tr valign="top">
                  <td>Deskripsi</td>
                  <td><textarea name='description' style="background: #FFF; border: 1px solid #DDD; border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color:#666; outline: none; height: 100px; width: 400px; margin-right: 10px; padding: 5px;"></textarea></td>
            </tr>
      </table>
      <input type='submit' name='upload' value="UPLOAD">
      </form>
     
</body>
</html>



Kemudian buat file dengan nama upload_file.php
Skrip ini berfungsi untuk menerima file yang di kirim oleh fille index.php dengan bantuan ajax dan jquery afar dapat melakukan proses upload,gambar yang sudah di upload akan di simpan pada folder images
<?php
$uploaddir = 'images/';
$file = $uploaddir .date('Ymdhis')."_".basename($_FILES['uploadfile']['name']);
$file_name = date('Ymdhis')."_".$_FILES['uploadfile']['name'];

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
      echo "$file_name";
}
else {
      echo "error";
}
?>

tampilannya seperti di bawah




Mungkin cukup sekian bahasan kali ini semoga bermanfaat file lengkapnya silhkan download di sini

Tutorial Cara Mudah Crop Gambar menggunakan Php dan jquery

5:11 AM Add Comment

Bismillah

Jika kalian sedang mencari tutorial cara crop gambar menggunakan php dan jquery  kalian berada pada web yang tepat karena Kali ini saya akan bahas cara memotong atau mengcrop gambar  menggunakan php dan jquery  teknik ini banyak di gunakan oleh oleh web besar salah satu yang pernah menerapkan tekhnik crop ini yaitu facebook.
 Ga usah panjang lebar lagi kita mulai saja… tentunya kita persiapkan dahulu apa saja yang di butuhkan untuk membuat tekhnik crop ini  Pertama yang kalian perlukan adalah  jquery,  jquery apa saja yang kalian butuhkan yaitu
- jquery.1.4.2.min.js
- jquery.imgareaselect.pack.js

Setelah kita persiakan jquery   kita buat dulu file index.php
<?php
// Folder tempat penyimpanan gambar
$path = "upload/";
?>
<html>
<head>
<title>Crop Gambar dengan jQuery</title>
</head>
<!--menyertakan style css plugin -->
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<!--menyertakan plugin imageAreSelect-->
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
<!--Fungsi untuk membagi objek gambar sama besar-->
function ukuran(im,obj) {
            var x_axis = obj.x1;
            var x2_axis = obj.x2;
            var y_axis = obj.y1;
            var y2_axis = obj.y2;
            var thumb_width = obj.width;
            var thumb_height = obj.height;
            if(thumb_width > 0) {
                        if(confirm("Apakah mau menyimpan gambar thumbnail?")) {
                                    $.ajax({
                                          type:"GET",
                                          //proses ajax request pada file "gambar_ajax.php"
                                          url:"gambar_ajax.php?t=ajax&img="+$("#nama_gbr").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
                                          cache:false,
                                          success:function(response) {
                                                  $("#cropimage").hide();
                                                  $("#thumbs").html("");
                                                      $("#thumbs").html("<img src='upload/"+response+"' />");
                                          }
                                    });
                              }
                  }
              else
                     alert("Pilih dulu area seleksi..!");
}
// pemanggilan dan pengaktifan plugin jquery imgareaselect
$(document).ready(function () {
    $('img#foto').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: ukuran
    });
});
</script>
<?php
      $valid_format = array("jpg", "png", "gif", "bmp");
      if(isset($_POST['submit'])) {
                  $name = $_FILES['gbr']['name'];
                  $size = $_FILES['gbr']['size'];
                 
                  if(strlen($name)) {
                              list($txt, $ext) = explode(".", $name);
                              if(in_array($ext,$valid_format) && $size<(1024*1024)) {
                                          // Penamaan file gambar dengan penggabungan fungsi waktu dan pengambilan 5 karakter nama file gambar asli
                                          $nama_gambar = time().substr($txt, 5).".".$ext;
                                          $tmp = $_FILES['gbr']['tmp_name'];
                                          if(move_uploaded_file($tmp, $path.$nama_gambar)) {
                                                      $gambar="<h4>Silahkan Select & Drag pada Area Gambar</h4>
                           <img src='upload/".$nama_gambar."' id=\"foto\" style='max-width:500px' >";
                                                }
                                          else
                                                echo "Gagal";
                                    }
                              else
                                    echo "Kesalahan format file..!";                           
                        }
                  else
                        echo "Browse/pilih gambar dulu..!";
            }
?>
<body>
<div style="margin:0 auto; width:600px">
<?php echo @$gambar; ?>
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">

<form id="cropimage" method="post" enctype="multipart/form-data">
      Upload Gambar : <input type="file" name="gbr" id="gbr" />
      <input type="hidden" name="nama_gbr" id="nama_gbr" value="<?php echo($nama_gambar)?>" />
      <input type="submit" name="submit" value="Submit" />
</form>

</div>
</div>
</body>
</html>



Sekarang kalian buat file dengan nama gambar_ajax.php copy kan code di bawah code di bawah berfungsi untuk memotong dan  menyimpan hasil crop
<?php
$t_width = 50;    // Maximum lebar thumbnail
$t_height = 50;   // Maximum panjang thumbnail
$nama_baru = "kecil".".jpg"; // nama gambar thumbnail
$path = "upload/"; // folder tempat penyimpanan gambar
if(isset($_GET['t']) and $_GET['t'] == "ajax") {
            extract($_GET);
            $ratio = ($t_width/$w);
            $nw = ceil($w * $ratio);
            $nh = ceil($h * $ratio);
            $nimg = imagecreatetruecolor($nw,$nh);
            $im_src = imagecreatefromjpeg($path.$img);
            imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
            imagejpeg($nimg,$path.$nama_baru,90);
            echo $nama_baru."?".time();
            exit;
}    
?>

untuk tampilannya bisa kalian lihat di bawah





Tampilan ketika mengcrop gambar
untuk lebih jelasnya kalian bisa lihat video di bawah ini dan untuk file lengkapnya silahkan download di sini




sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan isi kolom komentar


Subscribe to: Posts (Atom)