Menyimpan dan Upload Canvas HTML 5 ke Server

canvas

Sekarang kita coba mempelajari cara menyimpan canvas ke server, dari artikel sebelumnya kita sudah mempelajari cara meng Capture image dari Camera. Sekarang tinggal kita pelajari cara menyimpan image yang berada di canvas tersebut ke dalam server. bahkan ke dalam database jika teman-teman paham alurnya itu bukan hal yang susah. ok..

karena sudah malam tidak bisa panjang lebar, kalau ada pertanyaan bisa lewat komentar ya. 😀

selain itu saya sediakan link download juga.. lengkap dengan database dll..  semoga bermanfaat.

ini script yang kita tulis untuk tempat canvasnya nanti..

</p>
<p style="text-align: left;"><h2>Menyimpan Canvas HTML 5</h2>
 <div id="img_canvas">
 <canvas id="image_canvas" width="300" height="300" onclick="simpan_canvas();"></canvas>
 Klik Image Untuk menyimpan..
 </div>
 <div>
 <div id="hasil_simpan"></div>
 </div></p>
<p style="text-align: left;">

Proses pertama pasti kita harus buat canvas dulu beserta isinya bisa image atau apa terserah.. saya asumsikan sudah paham. Lalu kita ambil data canvas tersebut dan kita kirim ke file php menggunakan ajax untuk di proses dan berikut adalah fungsi untuk memproses dan mengirim data canvas menggunakan ajax :


<script type="text/javascript">
 //****************************************************************
 // by saefulloh rifai.
 //****************************************************************
 function simpan_canvas()
 {
 var image_canvas = document.getElementById("image_canvas");
 var canvasData = image_canvas.toDataURL("image/png");
 var postData = "canvasData="+canvasData;

var ajax = new XMLHttpRequest();
 ajax.open("POST",'proses_simpan.php',true);
 ajax.setRequestHeader('Content-Type', 'canvas/upload');

ajax.onreadystatechange=function()
 {
 if (ajax.readyState == 4)
 {
 //alert(ajax.responseText);
 document.getElementById("hasil_simpan").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a>";
 }
 }
 ajax.send(postData);
 }

</script>

Selanjutnya kita ambil data yang dikirim menggunakan ajax dan menyimpan ke file di folder uploads dengan nama image.png. berikut scriptnya..

<?php

if(isset($GLOBALS["HTTP_RAW_POST_DATA"]))
 {
 $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
 $filteredData=substr($imageData, strpos($imageData, ",")+1);
 $unencodedData=base64_decode($filteredData);
 $fp = fopen( 'uploads/image.png', 'wb' );
 fwrite( $fp, $unencodedData);
 fclose( $fp );

echo 'uploads/image.png';
 }

?>

Download file lengkap :  http://www.4shared.com/rar/YkoEv_sd/simpan_canfas_by_fai.html

Semoga bermanfaat… maaf atas keterbatasan waktu mengenai penjelasan cara menyimpan canvas html 5 ke server , jadi singkat padat dan mungkin kurang jelas. hehe..

tapi tetap semangat.. Happy Coding 😀

Membuat Website dengan HTML

Tutorial Membuat Website dengan HTML ini kami buat untuk yang ingin benar benar belajar membuat website dari awal. karena ini adalah tutorial awal. jadi pasti sederhana sekali. tidak sussah pastinya 😀

Sebelum kita mulai membuat website ini perlu diketahui software yang akan kita gunakan, yaitu :

opera

opera

firefox

firefox

crome

crome

1. Browser
Browser adalah aplikasi yang kita gunakan untuk melihat hasil web buatan kita. Kita bisa menggunakan Mozila firefox, google crome, opera, safari, dan browser lainya bahkan internet explorer. jadi tidak usah pusing.. membuat website itu mudah.

2. Text Editot

dreamweaver

dreamweaver

notepad

notepad

notepad ++

notepad ++

Text editor adalah aplikasi yang kita pakai untuk mengedit website buatan kita, ada dreamwever, edit +, notepad ++ dan yang sederhana kita bisa pakai notepad.

Pasti teman – teman tau tentang aplikasi tersebut kan. asal ada salah satu dari mereka maka kita bisa lanjutkan baca tutorial ini dan membuat website, kita mulai yang sederhana. karena untuk tutorial pembahasan detailnya ada di tutorial selanjutnya. ok

Sederhana sekali buka notepad terlebih dahulu..

<html>
<body>

<h2>Pemakaian Heading untuk judul.</h2>
<p>Pemakaian tag P untuk membuat paragraf.</p>
<i>dan ini tag untuk membuat tulisan miring.</i>

</body>
</html>

Ketikan script di atas ke dalam notepad. singkatnya tinggal Copy & Pate tapi kalau seperti itu kamu tidak akan cepat hebat, untuk awalan ketiklah *Recomend. 🙂

setelah itu ada bagian penting yang banyak orang terlewatkan.. jadi ingat – ingat ya langkah berikut ..

Simpan file->save atau Ctrl+S dan

cara save web

  1. simpanlah di tempat yang mudah diingat. misal di dekstop,
  2. Beri nama file dengan ekstensi html contohkita ingin menyimpan dengan nama “latihan” maka =>  latihan.html
  3. lalu pada kolom save as type pilih All files

Seperti itu. tidak ada yang susah,. sekarang setelah file tadi kita simpan tinggal kita lihat hasilnya.

Buka dekstop ( tempat/folder Kamu menyimpan file tadi) dan cari file web Kamu latihan.html lalu klik kanan-> open buka file tersebut maka file yang kita buat tadi akan terbuka di browser default bawaan Komputer kamu. ok ok..

Atau kamu bisa buka Browser terlebih dahulu, lalu File-> Open pilih file tadi jika ingin melihat hasilnya. begitu juga jika Kamu ingin mengeditnya buka notepad lalu file->open dan pilih file tadi.

Mudah bukan.. seperti itulah cara membuat website dengan HTML. itu masih dasar kita tunggu tutorial pembahasan selanjutnya mengenai HTML. terima kasih..

Happy Coding 😀

HyperText Markup Language (HTML)

Pengertian HTML itu seperti bahasa yang digunakan manusia untuk berkomunikasi dengan komputer dalam memberikan perintah – perintah untuk membuat sebuah website, sederhananya itu yang saya pahami, dan untuk selanjutnya saya akan sedikit mengulas tentang apa itu HTML. Bukan karena saya seorang Master tapi sekedar berbagi dan sebagai catatan buat saya sendiri.

HyperText Markup Language

Bahasa yang digunakan manusia untuk berkomunikasi dengan komputer dalam memberikan perintah – perintah untuk membuat sebuah website.

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language),

HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Banyak hal yang bisa kita lakukan dengan HTML ditambah sekarang sudah terdapat HTML 5. yah untuk penjelasan dan ulasan HTML5 akan kita bahas di sesi lainnya. karena disini kita bahasa HTML secara global.

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

  • Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
  • Menampilkan tulisan dalam bentuk cetakan tebal
  • Menampilkan sekelompok kata dalam bentuk miring
  • Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
  • Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Berikut Contoh sederhana penulisan Kode HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Selamat Datang</title>
  </head>
  <body>
    <p>Nama saya Adrianus!</p>
  </body>
</html>

Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Elemen Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan :

  • Tag awal, dinyatakan dalam bentuk <nama tag>
  • Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh : untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Ini hanyalah artikel Pembukaan mengenai pengertian HTML, sekedar menjelaskan apa itu HTML, dan banyak tutorial – tutorial lainnya yang sudah disiapkan. semoga bermanfaat.

Sumber : http://id.wikipedia.org/wiki/Html