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.
<!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>
<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 :
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>
<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>
<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
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.