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.
script php membuat canvas aplikasi note

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.
<!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 Pertamaku</title>
<script type='text/javascript' src='jquery-1.7.2.js'></script>
<script type='text/javascript' >
$(document).ready(function() {                     
        //Deklarasi canvas dimana canvas akan menggunakan canvas dengan ID Canvas Simple       
          canvas = document.getElementById("canvasSimple");
        context = document.getElementById('canvasSimple').getContext("2d");
        //Lebar dan tinggi canvas memang tidak dibuat penuh untuk
        //kebutuhan pengisian tombol-tolmbol fungsi kedepannya
        context.canvas.width=window.innerWidth-(window.innerWidth*10/100);
        context.canvas.height=window.innerHeight-(window.innerHeight*20/100);

        canvas.width = canvas.width;
        //Tipe sudut garis dibuat lengkung
        context.lineJoin = "round";
        //Mengatur tebal dari garis
        context.lineWidth = 5;
       
        //Mengatur membuat garis dari suatu koordinat ke koordinat tertentu
        context.moveTo(100, 200);
        context.lineTo(200, 300);
        context.closePath();
       
        //Menentukan warna garis
        context.strokeStyle = "#cb3594";
        //Melukis diatas canvas
        context.stroke();
});
</script>
</head>
<body>
    <div id="canvasSimpleDiv" ><canvas id="canvasSimple"  style="border:solid;cursor:pointer;"></canvas></div>
</body>
</html>

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

Posting Komentar

0 Komentar