Pengenalan Javascript

Javascript adalah salah satu bahasa pemrograman yang sangat populer di dunia. kalau anda berencana untuk jadi seorang web programmer. maka hukumnya wajib buat belajar bahasa ini. Javascript merupakan satu dari tiga bahasa yang kalian mesti pelajari selain HTML dan CSS. Tanpa javascript, sebuah website dianggap mati atau tak bernyawa. Lhoh kox bisa?? Saya akan kasih sebuah analogi agar anda mudah memahami apa itu javascript. saya akan bertanya kepada anda? Bagaimana cara membuat secangkir kopi panas? Tentu, anda butuh cangkir,kopi,gula,dan air panas. Apakah setelah itu anda bisa langsung menikmati secangkir kopi panas. jawabannya tentu tidak. Anda butuh seseorang atau anda sendiri untuk memasak air dan mencampurkan kopi, gula, dan air panas ke dalam cangkir. Baru anda bisa menikmatinya. Jadi apa fungsi javascript? javascript bisa di analogikan sebagai seseorang atau anda. Sebuah tombol login di facebook takkan berfungsi tanpa adanya sederet perintah didalamnya. Dan sederet perintah itu dinamakan javascript. Anda butuh aksi untuk membuat secangkir kopi. Anda butuh javascript agar website anda bernyawa. itu kenapa javascript disebut juga actionscript.

Apa saja yang dapat dilakukan oleh Javascript :

1. Javascript dapat mengubah konten HTML

    ketik coding dibawah ini pada web editor kalian ( Budayakan ngetik yah bro. Biar gak kram ).

    

2. Javascript dapat mengubah atribut HTML

3. Javascript dapat mengubah style (CSS) HTML

4. Javascript dapat mengvalidasi data

Jika anda perhatikan, semua coding diatas menggunakan satu dari sekian banyak metodh  HTML yaitu document.getElementById(). Pada artikel selanjutnya kita akan belajar bagaimana menuliskan komentar pada JavaScript. 

Created by Arif Yuni Firmansah

Web Component & Polymer #5 : Ayo Koding

Ada 2 langkah dalam mengimplementasikan web components  pada polymer:
1.membuat custom element pada file html.
2.lalu memanggil custom element tsb ke dalam file index.html dengan perintah
    <link rel="import" href="custom-element-example.html">,
 kemudia menggunakan element tsb di antara tag body pada index.html
ex; <custom-element-example></custom-element-example>

saya akan memberi contoh menulis Hallo Broh pada web components.

1.Untuk memudahkan kita membedakan elemen bawaan polymer dengan elemen buatan kita sendiri saran saya buat satu folder lagi di dalam project kita bernama custom (terserah),uuntuk tempat elemen-elemen buatan kita sendiri.

2.buat file html pada folder yang kita buat tadi dengan nama misal hallo-broh.html
3.tulis script di bawah ini

   keterangan:
      1) file yang harus dipanggil saat kita akan membuat custom elemen baru
      2) nama tag yang akan kita gunakan dalam hal ini tag <hallo-broh></hallo-broh>

      3) letak content tag tsb misal di atas adalah tag h1
      4) tag <polymer-element> adalah untuk tempat semua aksi dan tampilan elemen tsb.
4.lalu simpan setelah itu buka file index.html
5.lalu tulis script di bawah ini.

  keterangan:
1) file yang harus dipanggil pada file index.html jika file tsb tidak dipanggil maka rel="import" tidak jalan karena itu merupakan attribut terbaru yang ditambahkan w3c untuk menggunakan webcomponents
2)jika kita ingin menggunakan element hallo-broh maka kita harus memanggil file tempat elemen hallo-broh itu dibuat tentunya karena ini elemen baru maka kita menggunakan  rel="import".
3)jika kita akan menampilkan elemen hallo-broh maka kita hanya menuliskan <hallo-broh></hallo-broh> saja.

6.lalu kita run file index itu coba kita run di chrome dev editor.

hasilnya

BY : MUHAMAD NUR FASIKHIN

Web Component & Polymer #4 : Penginstalan - Eps 3 ( Alternative )

Secara default folder tambahan yang dibutuhkan dalam Polymer adalah sebagai berikut

Namun jika saat penginstalan menggunakan cara pada Episode 2 tidak mendapatkan folder-folder rsb maka ini solusinya.

Ada 3 cara alternative yaitu:
1.mendownload file zip-nya
2.menggunakan bower.
3.menggunakan git.

tapi penulis di sini akan menjelaskan cara yang ke 2 yaitu menggunakan bower.
Di sini penulis mengansumsikan di PC kalian sudah terinstal nodejs,bower,dan git.
kemudian ikuti langkahnya.

1.klik kanan folder project kalian yang sudah dibuatkan pada chrome dev editor.
2.pilih Git Bash.
3.akan muncul command prompt atau terminal.
4.ketikkan kode ini lalu tekan enter pada setiap kode secara berurutan.
     
      bower install --save Polymer/polymer
   bower install --save Polymer/core-elements
   bower install --save Polymer/paper-elements
5.tunggu hingga semuanya terdownload.

BY;MUHAMAD NUR FASIKHIN

Memaksimalkan Sublime #2 : Better Completion

JavaScript and jQuery 1.9

Twitter Bootstrap 2 and 3

Gambar di atas merupakan salah satu dari fitur better completion.

bagaimana cara instalnya di sublime...?

1.Tekan CTRL+SHIFT+P

2.Cari "Install Package"

3.setelah itu ,jika sudah muncul pilihan baru,cari "Better Completion"

4.Pilih "Better Completion"

5.tunggu hingga selesai diinstal.

6.jika sudah terinstall maka selanjutnya adalah SETTING

SETTING

1.pilih preferences pada menu bar lalu pilih package setting,kemudian pilih sublime better completion ,pilih setting user.
2.Akan muncul document baru.
3.copy dan paste code dibawah ini di document tsb.

{
// --------------------
// sublime-better-completions-Package
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sublime-better-completion-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sublime-better-completion-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"gruntjs-plugins": false,
"html": true,
"javascript": true,
"jquery": true,
"jquery-sq": false, // Single Quote
"php": true,
"phpci": false,
"twitter-bootstrap": false,
"twitter-bootstrap3": true,
"underscorejs": false,

// Your own completions?
"my-angularjs": false,
"my-glossary": false,
"my-html": false,
"my-javascript": false
}
}

4.kemudian save.
5.lalu pilih prefences  kembali,kemudian pilih setting user.
6.sebelum tanda } tulis koma ( , ) Copy dan paste code di bawah ini

"auto_complete_triggers":
[
{
"characters": "qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP",
"selector": "text, source, meta, string, punctuation, constant"
}
]

7.restart sublime kamu.

oleh M.Nur Fasikhin

Web Component & Polymer #4 : Penginstalan - Eps 2

Di Posting Sebelumnya,hanya dijelaskan penginstalan Peralatan Pendukung yang sudah terbundle di Chrome Dev Editor ,kali ini akan dijelaskan bagaimana penginstalan file yang dibutuhkan.

Penginstalan

1.Buka Chrome Dev Editor.
2.pilih icon di paling kiri atas(pojok kiri atas)

 Pilih Folder utama untuk project-project yang menggunakan polymer (folder ini akan selalu menjadi tempat penyimpanan file yang dibutuhkan)

 Akan Muncul tampilan seperti ini setelah memilih folder.Beri Nama Project kita dan pilih sesuai yang ada di gambar ini.

Note : Ketika pembuatan project baru kita harus terhubung ke internet karena masih ada file yang harus didownload otomatis oleh Chrome Dev Editor.

project akan terbuat.

 jika kita terkoneksi internet saat pembuatan project maka Chrome Dev Editor akan mendownload otomatis file tamabahan yang dib

utuhkan.seperti gambar ini.

Note : Jika kita lupa tidak terkoneksi internet saat pembuatan project tidak perlu khawatir ,masih bisa diatasi.

yaitu:

1.Klik Kanan project kita lalu pilih Bower Install

2. maka secara otomatis akan mendownload file tambahan yang dibutuhkan

Web Component & Polymer #4 : Penginstalan - Eps 1

Untuk dapat menggunakan keduanya dibutuhkan sejumlah file yang mendukung kinerja mereka.

apa saja yang dibutuhkan ?.

Peralatan Pendukung

1.Browser ( Saya rekomendasikan dengan google chrome).

2.Node

3.Bower.

4.python.

5.dll

File yang dibutuhkan

Banyak banget broh,bisa gak kelar-kelar ninh post kalo ane tulis satu-satu.Ntar juga tau sendiri.

wah...banyak banget ya..file dan alat yang dibutuhin,apa harus instal satu-satu di PC ?.

Sebenarnya penginstalan semua peralatan pendukung di PC merupakan cara paling dasar yang menyulitkan yang diajarkan Polymer di situs resminya http://www/project-polymer.org,apa lagi jika kita yang maniak windows ada pengaturan tambahannya broh...

maka itu saya punya cara alternatif untuk menerapkan kesemu-muanya.Yaitu:

1.Pergi Ke Tokonya Chrome (perginya pake google chrome ya broh..).

2.Cari dengan kata kunci chrome dev editor.

jika ada dialog yang muncul klik add.

3.Buka alamat ini chrome://apps/ ,lalu jika Chrome Dev Editor sudah muncul,bukalah.

   akan muncul tampilan seperti ini.

Web Component & Polymer sudah siap pakai.

Web Component & Polymer #3 : Apa itu Polymer ?

Penggunaan Web Component yang hanya mendukung browser tertentu saja membuat namanya tidak banya diketahui orang.Namun Berkat Polymer Web component dapat dijalakan di hampir semua browser modern.

Apa Itu Polymer ?

polymer diperkenalkan pertama kali di acara Google I/O 2014.Polymer dikembangkan untuk memudahkan penggunaandari web components.Apa yang ditawarkan polymer ?.
ada 3 keunggulan polymer yaitu:

1.memungkinkan kita untuk membuat Custom Elements yang ditawarkan web component.Custom element ini bisa kita beri nama sendiri dan dapat digunakan lagi untuk sendiri ataupun dapat didistribusikan ke pengembang lain.

2.membuat template dengan gaya dan aksi yang sesuai kepeluan kita.

3.Menyediakan elemen UI dan non UI siap pakai yang desainnya sama dengan material desai android L

Catatan : X-Tag/mozilla bricks merupaka proyek serupa polymer yang dikembangkan oleh mozilla dengan customisasi yang berbeda tentunya.

Ada 2 jenis elemen yang disediakan polymer yaitu :

1. Core-Elements - ini adalah satu set elemen visual dan non visual yang dirancang untuk bekerja dengan tata letak,interaksi pengguna,seleksi,dan aplikasi perancang.

2.Paper-Elements - mengimplementasikan material design yang diluncurkan Google dalam acara Google I/O 2014.yang mana desain ini sudah diterapkan di Android L

diterjemahkan dari : http://www.sitepoint.com/introduction-to-web-components-and-polymer-tutorial/

oleh : Muhamad Nur Fasikhin

Web Component & Polymer #2 : Apa itu Web Component ?

Seperti yang dijelaskan di artikel sebelumnya #1 , web component ini merupakan sebuah file javascript yang berisi kumpulan function yang memungkinkan kita untuk membuat tag baru selain tag yang dimiliki HTML ataupun HTML5.Web Component ini sendiri diperkenalkan oleh W3C pada pertengahan tahun 2014 anda bisa ke sini..Karena umurnya yang baru setengah tahun membuat web components belum banyak diketahui orang.

Apa itu Web Component ?

sudah saya jelasin apa itu web component.Terus apa bedanya dengan jQuery atau framework javasript lainnya.yang saya mau jelasin di sini adalah web component itu bukan framework melainkan sebuah jalan untuk membuat sebuah tag baru yang berfungsi semau kita yang selama ini mungkin hanya  pihak W3C sendiri sajalah yang bisa.Sedangkan framework yang seperti jQuery lebih ke Javascript-nya  bukan ke HTML nya.

file yang dibutuhkan dalam menggunakan web component adalah hanya webcomponents.js
Namun salah satu kendala mengapa web component belum banyak orang mengetahui web component adalah penggunannya yang tidak banyak memiliki dokumentasi.Di Website Resminya hanya dijelaskan dasar penggunaannya saja dan itu tidak memuaskan  hati para pengembang.

Untuk memudahkan penggunaanya web component diterapakan di library-library baru yang mengusungnya yaitu Polymer dan Mozilla Brick,keduanya merupakan semacam css framework yang menyediakan bentuk UI yang mereka tawarakan,eh tapi mereka gak mau disebut framework melaiknkan library.

web component memiliki 4 urutan dasar penggunaan yaitu:

1.Custom Element - ini memungkinkan  pengembang membuat  elemen mereka sendiri yang relevan dengan desain yang sesuai keinginan mereka yang nantinya sama seperti tag HTML lainnya.

2.HTML Templates - ini memungkinkan kita untuk membuat attribute sendiri dengan valueyang dapat kita atur sendiri.Di sini juga dapat membuat sebuah perintah javascript yang dapat menyuntikkan konten dinamis yang hanya ditampilkan pada elemen tersebut saja.

3.Shadow DOM - ini dirancang untuk memberikan value atau properties pada elemen yang dibuat sendiri.

4.Import HTML - Serupa dengan mengimport satu file CSS yang memiliki rel="text/css"
import HTML juga diperkenalkan untuk mengimport file HTML yang digunakan dalam file utama.

Kesimpulan :
Penggunaan web component hampir sama dengan blade templatingnya Laravel Broh....

diterjemahkan dari : http://www.sitepoint.com/introduction-to-web-components-and-polymer-tutorial/

oleh : Muhamad Nur Fasikhin

Web Component & Polymer #1 : Pengenalan

Kebanyakan aplikasi web modern cukup sulit berkembang mengingat banyaknya alat yang terlibat,jumlah pengujian yang diperlukan,dan kombinasi fungsi yang digunakan.Hal semacam ini menjadi momok bagi para pengembang jika tidak didukung oleh tim yang solid,pengembang akan kesulitan dalam memertahankan kode dan membuat perangkat tambahan.

misalnya saja situs-situs populer ini:

lihat situs-situs populer di atas saat dilakukan inspect element,apakah terbaca oleh programmer expert?,terbaca sih...tapi mungkin butuh waktu berhari-hari untuk menemukan celah kesalahan kode program di atas.Begitu banyaknya elemen yang harus ditampilkan sedangkan sedikitnya pilihan dalam menentukan tag pada HTML misalnya ,membuat para pengembang web bahkan sekelas facebook pun menggunakan tag <div> dan <span> yang sembarangan,alasannya beragam,agar memudahkan pencarian elemen dsb(dan saya bingung).Kehadiran HTML5 pun dinilai banyak kalangan gagal dalam menggeser peranan <div> dan <span> yang sembarangan,malah hadirnya banyak tag baru dalam HTML5 membuat bingung mau gunain yang mana ya...?

Solusi pun Hadir 

Menyadari hal itu W3C selaku pengembang HTML memperkenalkan Web Components.

Web Components adalah kumpulan function yang memungkinkan pengembang untuk membuat tag baru dengan spesifikasi elemen yang diinginkan,bingung..? jangan peduliin tuh teori,cuman buat formalitas aja broh....OK lanjut.Jadi tag baru yang dibuat sendiri oleh pengembang nantinya bisa digunakan kembali oleh si pengembang itu sendiri ataupun oleh pengembang lain.

diterjemahkan dari : http://www.sitepoint.com/introduction-to-web-components-and-polymer-tutorial/

oleh : Muhamad Nur Fasikhin