JQuery Syntax

hoho sekarang saya akan melanjutkan latihan JQuery krna kemarin baru perkenalan sama yang namanya JQuery, sekarang akan membahas tentang syntaxnya

jQuery syntax adalah 'tailor-made' untuk memilih HTML elements dan menampilkan bberapa aksi pada elemen2 yang dipilih..

syntax dasarnya adalah : $(selector).action()

• $ tanda untuk mendefinisikan / mengakses jQuery
• (selector) to "query (or find)" element2 html
• jQuery action() apa yg dilakukan pada elements yang dipilih

contoh :

$(this).hide() - meng-hide element yg sekarang digunakan.

$("p").hide() - meng-hide semua dengan element <p> .

$(".test").hide() - meng-hide semua dengan class="test".

$("#test").hide() - meng-hide semua dengan id="test".

- Document Ready Event

kamu seharusnya telah memperhatikan bahwa semua metode jQuery dalam contoh kita, ada di dalam document ready event.

yg diatas adalah untuk mencegah syntax jQuery tidak berjalan semestinya,

team jQuery juga telah membuat event method yang lebih pendek pada document ready event yaitu:

gunakan syntax yang kamu mau, kami pikir bahwa document ready event lebih mudah unutk dimengerti ketika membaca pada kode2.

oleh Gugus Widiandito

source : w3schools.com

Pengenalan jQuery

Assalamualaikum Wr. Wb. 

halo semuaah!

Setelah sekian lama vakum dari blog ini, saya mencoba menghidupkan kembali blognya, ya sekedar sharing2 aja lah ya, yang penting masih jalan haha

kali ini saya akan membahas tentang jQuery, sebagai seorang web developer pasti anda sudah tau apa itu jQuery, iya kan?? nah bagi yang blm tau, saya kasih penjelasan sedikit, sebenarnya saya jg masih belajar, jadi sambil belajar juga sambil berbagi ilmunya..hehe 

ayo kita mulai!!

Apa itu jQuery?

jQuery adalaaahh sebuah library javascript, sedangkan library itu sendiri adlah kumpulan dari fungsi2 siap pakai untuk mempermudah pembuatan aplikasi, jadi kesimpulannya adalah jQuery itu kumpulan fungsi2 yang dapat mempermudah penulisan kodee javascript.

sebelum memulai mempelajarinya, setidaknya anda tau dasar2 dari yang namanya HTML, CSS, daan Javascript.. 

JQuery juga menyederhanakan banyak hal rumit dari javascript, seperti Ajax dan manipulasi DOM

Perpustakaan jQuery berisi beberapa fitur berikut:

Manipulasi HTML / DOM 

Manipulasi CSS 

Metode acara HTML 

Efek dan animasi 

AJAXUtilitas.

Mengapa jQuery?

Ada banyak kerangka kerja JavaScript lainnya di luar sana, namun jQuery nampaknya paling populer, dan juga yang paling dapat diperpanjang.

Banyak perusahaan terbesar di Web menggunakan jQuery, seperti:

Google 

Microsoft

IBM 

Netflix

Apakah jQuery akan bekerja di semua browser?

Tim jQuery mengetahui semua masalah lintas-browser, dan mereka telah menulis pengetahuan ini ke dalam perpustakaan jQuery. JQuery akan berjalan persis sama di semua browser utama, termasuk Internet Explorer 6!

Contoh syntax JQuery :

Created By Gugus Widiandito

referensi : w3schools.com

terimakasih semuaah~~

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

HTML Layout, Responsive dan Iframes

Salam Sehat untuk kita semua, untuk minggu ini saya bertugas untuk menyampaikan pembahasan HTML kepada teman2 saya mau tidak mau itu harus wkwkwk, dan dimana ini merupakan pengalaman pertama ane Ngepost di Blog, Ok langsung saja.

Dalam pembahasan kali ini saya akan menjelaskan sedikit tentang  HTML :

·         Layout

·         Responsive

·         Iframe

Masuk ke point pertama yaitu :

HTML Layout

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar.

·         HTML Layout Menggunakan <div> Elements

Contoh  layout dengan penggunaan 4 <div> elemen untuk membuat banyak layout :

Keterangan :  

1.Elemen Header         : Kepala atau judul yang berisi nama website

2.Elemen Navigator     : Untuk mengakses ke halaman - halaman lain

3. Elemen Sidebar       : Pendudung konten, bisa berupa pembantu navigasi dll.

4. Elemen Konten        : Isi dari dukumen web.

5. Elemen Footer         : Bagian penutup website.

Untuk Syntax HTML tersebut : 

Dan Syntax CSSnya :

 Website Layout  menggunakan HTML5

 

HTML5 menawarkan unsur lambang/tag baru yang menentukan bagian-bagian berbeda dari suatu  halaman web.

 

Contoh Layout sama dengan contoh 01 layout di atas cuma yang membedakan adalah pada kode syntax yang ini penulisannya menggunakan HTML5 :

 

Dan ni Syntax CSSnya   :

           

Point Kedua :

HTML Responsive

Apa Desain Web Responsif itu ?

·         RWD singkatan Desain Web Responsif

·         RWD dapat memberikan halaman web dalam ukuran variabel

·         RWD adalah suatu keharusan untuk tablet dan perangkat mobile

Ø  Membuat Desain Responsif Sendiri

Salah satu cara untuk membuat desain responsif, adalah untuk menciptakan sendiri:

Mungkin disini yang menjadi patokannya adalah Attribute float.

Tampilan Pertama Ketika Maximaze :

     Tampilan ketika layar kita tarik kedalam :

Ø  Menggunakan Bootstrap 

Cara lain untuk membuat desain responsif, adalah dengan menggunakan kerangka CSS yang     sudah ada. 
Bootstrap adalah HTML, CSS, dan kerangka JS paling populer untuk mengembangkan jaring responsif.
Bootstrap membantu Anda untuk mengembangkan situs yang terlihat bagus di berbagai ukuran; layar, laptop, tablet, atau tele
Contoh :
di bawah ini penulisan Syntax dengan bantuan bootstrap, dimana yang ada di www.W3schools.com dibagian Responsive, 

Di atas menggunakan bootstrap Online  tetapi dibawah ini saya menggunakan yang Offline,

Hanya sedikit berbeda dalam penulisannya + beberapa script.js 

 Contoh ketika dijalan di browse :

Dan kalian coba untuk mengecilkan ukuran browsenya

Point terakhir :

HTML Iframes

Iframe digunakan untuk menampilkan halaman web dalam halaman web.

Ø  Iframes Syntax

Syntax untuk menambahkan iframes adalah :

Ø  Iframes – Mengatur Tinggi dan Lebar

Menggunakan Atribut tinggi dan lebar untuk menentukan ukuran.

Nilai Atribut di tentukan dengan pixel secara default, tapi juga bisa menggunakan persen(seperti  “80%”).

Contoh :

 Dimana nilai atribut scr berada dalam satu forder website yang kita buat.

Ø  Iframe - Hapus Perbatasan Garis

The frameborder atribut menentukan apakah menampilkan atau tidak untuk perbatasan di sekitar iframe.

Mengatur nilai atribut "0" untuk menghapus perbatasan.

Contoh :

Ø  Gunakan iframes sebagai tujuan untuk sebuah link

Iframe dapat digunakan sebagai kerangka tujuan sebuah link.

Target atribut link harus mengacu pada atribut nama iframe:

Contoh :

Ketika link di klik otomatis iframes semua akan berupa sesuai dibawah.

Sekian dan Terima Kasih
Referensi W3Schools

UMAR - PROJECT X