Aplikasi Note

Aplikasi Note

Script php Aplikasi Note

Download script PHP Aplikasi Note - (Touch Screen), Kita penah mendengar kalimat aplikasi note atau kita sering menggunakan aplikasi tersebut seperti yang ada pada ponsel anda yang bisa untuk menulis catatan menggunakan jari maupun dengan bantuan pen stylus pada layar ponsel dan hasil catatan tersebut kemudian dapat disimpan layaknya sebuah catatan pada kertas.

Download Script PHP Aplikasi Note ...!!!

Nah ... pada kesempatan kali ini kita akan belajar membuat sebuah aplikasi note sederhana seperti pada ponsel tersebut. tetapi untuk dapat membuat dan mengembangkanya ada baiknya kita perlu mengetahui cara mengambar di browser menggunakan canvas. untuk mengambar di browser kita memerlukan jQuery untuk mempermudah pengetikan javascript.

OK...kita langsung saja membuka media pembelajaran kita, seperti bisa silahkan buka layar kerja notepat simpan dengan nama canvas.php copy script berikut.

Donwload Library jQuery Di SINI.

Sekarang coba jalankan script canvas.php di browser, maka akan tampil garis miring berwarna ungu. Jika masih bingung menggunakan canvas coba ubah beberapa variabel javascript pada script kanvas.php anda pasti akan menemukan tampilan berbeda sehingga dapat meningkatkan pemahaman anda.

Setelah mengetahu cara kerja canvas sekarang kita akan mencoba membuat canvas dinamis dimana canvas yang dapat ditulis dengan menggunakan mouse dan hasil lukisan tersebut dapat di simpan dalam bentuk gambar. untuk itu ikutilah langkah-langkah berikut :

Buatlah file baru dengan nama canvasdinamis.php, lalu buat tag div untuk tempat dasar mengambar (canvas) kodenya :

</head>
<body>
<div id="canvasSimpleDiv" ><canvas id="canvasSimple" style="border:solid;cursor:pointer;"></canvas></div>
</body>
</html>

Panggil file jQuery dan lakukan instalasi canvas dengan mengetik kode berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Dinamis</title>
<script type='text/javascript' src='jquery-1.7.2.js'></script>
<script type='text/javascript' >
$(document).ready(function() {
   //Deklarasi variable untuk menampung axis X dan axis Y serta status drag.
   //Jika dalam status klik, maka axis X dan axis Y akan digambar pada canvas
   var paint;
   var clickX = new Array();
   var clickY = new Array();
   var clickDrag = new Array();

   canvas = document.getElementById("canvasSimple");
   context = document.getElementById('canvasSimple').getContext("2d");
   context.canvas.width=window.innerWidth-(window.innerWidth*10/100);
   context.canvas.height=window.innerHeight-(window.innerHeight*20/100);

   //Menangkap event mouse down
   $('#canvasSimple').mousedown(function(e){
       var mouseX = e.pageX - this.offsetLeft;
       var mouseY = e.pageY - this.offsetTop;
       //merubah status klik
       paint = true;
       //menambahkan axis X dan axis Y kedalam array
       addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
       //Menggambar axis-axis dalam posisi true pada canvas
       redraw();
   });

   //Menangkap event mouse up
   $('#canvasSimple').mousemove(function(e){
       if(paint){
           //menambahkan axis X dan axis Y kedalam array
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
           //Menggambar axis-axis dalam posisi true pada canvas
            redraw();
       }
   });

   //Menangkap event mouse up
   $('#canvasSimple').mouseup(function(e){
      paint = false;
   });


   //Menangkap event pada saat mouse meninggalkan canvas
   $('#canvasSimple').mouseleave(function(e){
      paint = false;
   });


   //Fungsi untuk menambahkan axis kedalam array
   function addClick(x, y, dragging){
       clickX.push(x);
       clickY.push(y);
       clickDrag.push(dragging);
   }

   //Fungsi untuk menggambar sesuai dengan nilai pada array
   function redraw(){
       canvas.width = canvas.width;
       context.lineJoin = "round";
       //Menentukan lebar garis
        context.lineWidth = 5;

       //Menggambar berdasarkan panjang dari Array
        for(var i=0; i < clickX.length; i++){
           context.beginPath();
            if(clickDrag[i] && i){
               context.moveTo(clickX[i-1], clickY[i-1]);
           }else{
               context.moveTo(clickX[i]-1, clickY[i]);
           }
               context.lineTo(clickX[i], clickY[i]);
                context.closePath();
               context.strokeStyle = "#cb3594";
                context.stroke();
       }
   }
});
</script>
</head>
<body>
   <div id="canvasSimpleDiv"><canvas id="canvasSimple" style="border:solid;cursor:pointer;"></canvas></div>
</body>
</html>

Canvas dinamis yang dapat dilukis menggunakan mouse sebenarnya menggunakan sebuah array yang menampung kegiatan mouse pada saat klik, drag dan melepaskan klik (drop). dengan menganalisa kombinasi ketiga event tersebut, maka kita dapat mengetahui pada posisi mana garis perlu di cetak.

Demikianlah sedikit tutorial cara membuat Aplikasi Note sederhana yang mukin bermanfaat bagi anda. Untuk script lengkapnya membuat aplikasi note bisa anda download pada link dibawah ini.
Terimakasih, selamat mencoba.

Download Script Aplikasi Note Di Ponsel Touchsreen

Aplikasi Note

0 Response to " Aplikasi Note "

Post a Comment