Tags: *BY REQUEST / CSS HTML

CSS HTML No.14: Membuat drag and drop upload file dengan File Api Html5

- No Comments

Pemirsa, jumpa kembali bersama Mediatutorial.web.id, pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat 'Drag and Drop Uploader'. Tutorial ini merupakan pengembangan dari tutorial sebelumnya yaitu [[CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS]].
Ada baiknya anda kembali membuka tutorial sebelumnya diatas.

Metode drag and drop upload banyak digunakan pada situs situs besar seperti yahoo, google, youtube, dan lain lain. Nah, dalam drag and drop upload ini kita menggukanan Html5 dan native javascript yaitu Filereader dan RFC2388 sebagai decode multipart/form-data nya.
Kita disini menggunakan html5 karena hanya dengan html5 lah maka file file yang ada di local komputer dapat diakses.

App drag and drop upload ini hanya dapat berjalan bila browser anda mendukung html5 file api dan DnD (Drag and Drop) seperti ie 10+, Firefox 3.6+, Crhome 6+, Safari 6+, Opera 11.5+

Cara kerja App ini adalah:
1. Kita mendrag sebuah image file.Dalam proses ini maka kita akan mengenal yang namanya DnD Api. Api inilah yang nanti kita gunakan untuk ondragenter, ondrop dan lain lain.

2. Kemudian kita memanggil Datatransfer.files untuk mengkoleksi semua file yang didrop

3. Kemudian kita membaca sebagai binary dan lain lain silahkan tonton videonya (^^,)

Dalam tutorial ini kita akan membahas tentang:
1. DnD Api (Drag and Drop)
2. DataTransfer, getAsBinary, sendAsBinary, Boundary
3. Trick khusus RFC2388
4. File php untuk mengolah gambar

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI
PART 1

PART 2 SILAHKAN [CLICK DI SINI]

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.

Tags: *BY REQUEST / CSS HTML

CSS HTML No.13: Membuat toolbar Menu (Css dan Html only)

- No Comments

Pemirsa, dalam video tutorial berikut ini kita akan membahas tentang cara untuk membuat toolbar menu dengan hanya menggunakan css dan html.
Kedepan kita akan mengembangkan menu ini. Sebagai awal memang kita hanya membuat menu dengan hanya pakai css dan html, tapi nanti akan kita kembangkan seperti penambahan jQuery, penggabungan dengan Php dan MySql.

Sebetulnya, untuk membuat Menu dan Toolbar itu sangat mudah, kita hanya bermain main dengan tag ul, ol dan li, sedangkan untuk tampilan kita memakai css.

Nah, dalam tutorial ini akan diperagakan bagaimana cara membuat Menu dengan css dan html memakai tag ul,dan li.

Dalam tutorial ini kita akan membahas tentang:
- Membuat unorderlist menu
- Memberikan background dan background hover kepada menu
- Membuat code code css untuk membuat menu

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI
PART 1


PART 2 CLICK HERE

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: CSS HTML

CSS HTML No.12: Membuat Upload file dengan membagi-bagi kedalam beberapa bagian

- No Comments

Slicing file ke dalam beberapa chunk lalu kita upload
//
Pemirsa, kembali hadir Mediatutorial.web.id melanjutkan tutorial [CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS] sebelumnya, disini kita akan men-slice / memotong / membagi 'sebuah file' ke dalam beberapa bagian (chunk) kemudian kita upload ke server.
Dengan slicing ini maka kita akan dapat mengupload file yang berukuran besar dengan sangat cepat.

Teorinya, kita membagi file kedalam beberapa bagian, kita upload setiap bagian (chunk) dengan XHR, dan setelah itu kita gabungkan kembali bagian - bagian (chunk) tersebut di server.

Coba anda perhatikan animasi berikut ini,
kita upload 1 buah file dan kemudian kita bagi lalu kita post multiple XHR

Kita tidak perlu membuat video untuk tutorial ini, anda dapat melihat turoial sebelumnya yaitu [CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS] kemudian tinggal menambahkan kode yang saya blok seperti pada gambar di bawah ini pada 'addEventListener'.

Silahkan anda simak tutorial sebelumnya: [CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS]

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: CSS HTML

CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS

- No Comments

Html5, XHR2, CORS, php untuk upload file
//
Pemirsa, selamat berjumpa kembali pada Mediatutorial.web.id, setelah sebelumnya kita membahas mengenai CORS dan XMLHttpRequest 2, pada kesempatan kali ini kita akan membahas mengenai cara membuat aplikasi upload dengan menggunakan keduanya.

Kita dapat melakukan 'POST' file atau blob dengan menggunakan XHR 2. Perlu diketahui di sini bahwa semua file adalah blob. Dan tentu saja upload app ini dapat dilakukan ke domain lain asalkan domain lain tersebut memiliki settingan CORS.

Di sini kita juga akan menggunakan element baru dalam Html5 yaitu element 'progress'. Dengan element ini kita dapat membuat progressbar untuk proses upload dengan sangat mudah.

Dalam tutorial ini kita akan membahas tentang:

- Pembuatan halaman upload
- Pembuatan php untuk proses upload
- Penggunaan XHR 2 dan CORS
- Penggunaan dan pembuatan element progress

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI
PART 1



PART 2 [KLIK DI SINI]

Silahkan lihat tutorial berikutnya [CSS HTML No.12 Membuat Upload file dengan membagi-bagi kedalam beberapa bagian]

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: *BY REQUEST / CSS HTML

CSS HTML No.10: Penggunaan XMLHttpRequest level 2 (XHR 2) pada Html5

- No Comments

XMLHttpRequest level 2 (xhr 2)

Salah satu kemajuan dalam Html5 adalah adanya XMLHttpRequest level 2. Sebetulnya ini bukan bagian dari Html5 tetapi karena Javascript ini juga berperan penting maka kita akan membahas sedikit tentang ajax ini.
--
Apakah yang baru di XMLHttpRequest level 2?
Banyak, XMLHttpRequest Level 2 ini banyak digunakan di web app terutama untuk
- Cross Origin request
- Uploading progress event
- Upload-download Binary data
- Terintegrasi dengan File system Api, web audio api dan web GL

Selain itu respondType pada XMLHttpRequest 2 ini tidak hanya 'text' dan 'document' melainkan 'text', 'document', 'blob' dan 'arrayBuffer'.
Pada tutorial ini kita akan membahas singkat mengenai respondType text dan blob sebagai pengenalan XMLHttpRequest level 2.
*Nb) Untuk blob saat ini belum disupport oleh Chrome (crbug.com/52486)

Pada tutorial ini kita akan membahas tentang:
- Pembuatan form untuk submit data dengan XMLHttpRequest 2
- Penggunaan 'formdata' (New dalam XMLHttpRequest 2)
- Penggunaan blob untuk fetching image (New dalam XMLHttpRequest 2)

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: *BY REQUEST / CSS HTML

CSS HTML No.9: Penggunaan CORS (Cross Origin Request Security ) pada Html5

- No Comments

Cross-Origin Resource Sharing (CORS)

Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, pada pertemuan kali ini kita akan membahas tentang Cross-origin request security / cross-origin resource sharing.
Sebetulnya, pada proses ajax (XMLHttpRequest lama) permintaan / request antar domain tidak diperbolehkan. Tetapi kemudian Html5 dan XMLHttpRequest level 2 mengizinkan permintaan data antar domain asalkan domain target memiliki settingan untuk CORS.

Kalau dalam Flash untuk request data antar domain kita menggunakan crossdomain.xml, tapi untuk XMLHttpRequest level 2 ini kita menggunakan CORS.
Penyetingan/setting CORS dapat dilakukan dengan beberapa cara dan pada tutorial ini kita dapat melakukannya dengan htaccess dan http header.

Pada tutorial ini kita akan membahas tentang:
- Pembuatan simple web app dengan XMLHttpRequest 2
- Implementasi CORS pada fetching file
- Penyettingan/setting CORS pada htaccess
- Setting CORS pada http header

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: *BY REQUEST / CSS HTML

CSS HTML No.8: Membuat submit form Html5 (Standar Form Html5 yang baru)

- No Comments

Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, pada kesempatan ini kita masih membahas Html5 dan disini kita akan mengupas mengenai form.
Form mungkin memang kurang menarik bagi para pembaca, tetapi perlu anda ketahui bahwa dalam Html5, form ini mengalami perubahan yang cukup significan.

Banyak sekali element, atribute, dan input types yang baru dalam html5 ini. Demikian juga dengan browser validasi, teknik styling dan sebagainya.

Nah, pada tutorial ini kita akan memperagakan cara membuat form, dan membahas tentang:
- Pembuatan form
- Penggunaan input types html5 yang baru (Email, Url)
- Penggunaan attribute html5 yang baru (pattern, require, autofocus, placeholder)
- Penggunaan validasi dan no validasi
- Pembuatan script untuk mengubah notifikasi

Sebetulnya banyak sekali yang dapat anda baca mengenail atribute, input types dan element yang baru dalam form ini, semua dapat anda baca di w3schools.com. Juga ada hal baru yang mungkin dapat menarik anda yaitu formdata dan xhttprequest2, yang akan kita bahas pada tutorial berikutnya.

Source code: https://docs.google.com/file/d/0B6_ki5nuY_ysSHNXdDQzalc0cjg/edit?usp=sharing
Demo: http://structurecore.xtreemhost.com/1_demo/lain_lain/submit_form_html5.html

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook

Tags: *BY REQUEST / CSS HTML

CSS HTML No.7: Membuat Drag and Drop object (Html5)

- No Comments

By Request :: Membuat Drag and Drop object (html5)
Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, masih melanjutkan kembali tutorial kita sebelumnya yaitu tentang html5.

Nah, pada pembahasan tutorial kali ini kita akan sharing mengenai Drag and Drop untuk Html5. Pada html4, untuk drag and drop kita membutuhkan JQuery atau library lainnya. Tetapi karena fitur baru ada pada html5 seperti (ondrag, ondragstart, ondragenter, dan lain lain) maka kita pun bisa membuat drag and drop dengan sangat mudah.

pada tutorial ini kita akan membahas tentang:
- Pembuatan container terlebih dahulu
- Pembuatan script addevent untuk cross browser
- Pembuatan script ondragstart, ondragenter, ondragend, ondrop, dan lainnya
- Penggunaan preventDefault pada firefox dan kawan kawan dengan ie
- Penggunaan draggable=true pada firefox dan kawan kawan dengan safari

Sourcecode: https://docs.google.com/file/d/0B6_ki5nuY_ysem85czVxV3ZXX0E/edit?usp=sharing

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.
Jangan lupa juga untuk like Mediatutorial on Facebook