Loveyourcode

https://loveyourcode.com

[loveyourcode-blog1]

Tips dan Trik Sukses Interview User - Special untuk Anak IT

New Post has been published on https://loveyourcode.com/tips-dan-trik-sukses-interview-user/

Tips dan Trik Sukses Interview User - Special untuk Anak IT

Ada 2 skema dalam interview user, schema pertama interview user digabung dengan interview HRD jadi ada 2 interviewers dalam sekali sesi interview, skema kedua interview HRD dan User dipisah. Gw pernah mengalami kedua schema tersebut, well semoga pengalaman gw dapat memberikan pandangan temen – temen yang membaca artikel ini.

Baca Sebelumnya: Dear Anak IT Lakukan 5 Hal ini sebelum Interview Kerja

Baca Lanjutannya: Membongkar Pertanyaan Interview HRD

Interview User, hemmm apa sih user itu? Menurut gw definisi User itu adalah seseorang atau group of people yang akan bekerja sama dengan kita nantinya nah user ini penting untuk tau calon karyawan yang akan masuk kedalam team mereka. Sejujurnya interview user bisa dikatakan lebih horror dari pada interview HRD karena hamper 90% yang ditanyakan user adalah masalah Teknis alias Skill kita. Di artikel ini gw akan membongkar apa saja yang ditanyakan oleh user based on my experiences, so guys cekidottt…

  Familiar dengan teknologi apa?

Pertanyaan pertama adalah “Kamu Familiar dengan teknologi apa?” User ingin tau cakupan pengetahuan kamu tentang dunia IT, semakin banyak kamu tau atau familiar dengan teknologi terkini akan semakin besar pula chance diterima diperusahan tersebut.

Sering coding menggunakan Bahasa pemrograman apa?

Pertanyaan pertama saling berkaitan dengan pertanyaan kedua, User ingin tau lo jago di bahasa pemrograman apa saja, sesuai tidak dengan kebutuhan kantor karena biasanya kita daftar di posisi Junior Programmer tetapi gak tau nih Junior programmernya kerja menggunakan bahasa pemrograman apa, emang sih ketika kita mendaftar udah ada skill requirmentnya tetapi ini dunia kerja tak jarang PHP programmer disuruh ngerjain Javascript Project (Nodejs) atau disuruh belajar Java. Seorang programmer sebenernya dituntut menguasai lebih dari 2 bahasa pemrograman maka dari itu kita juga harus pinter-pinter menjual diri.

Ambil contoh kalo gw yang jawab pertanyaan ini gw akan bilang, “Saya menguasai 3 bahasa pemrograman server side : PHP, Javascript Server Side (NodeJs) dan LotusScript (IBM LotusNotes) dan menguasai 2 front-end framework yaitu ReactJs dan AngularJs” dan masih bisa di kembangkan lagi jawabannya agar lebih panjang. Intinya adalah lo harus show off jika hanya menguasai 1 bahasa pemrograman gpp bilang saja dengan jujur itu tidak masalah sebenernya yang penting ada yang dikuasai.

Pernah terlibat di project apa saja?

Ini pertanyaan untuk pengukur jam terbang lo sebagai anak IT, semisal lo daftar Junior Programmer tetapi sudah menyelesaikan lebih dari 2 project besar maka pengalaman lo akan sangat dipertimbangkan oleh user dan juga user ingin melihat cara lo manajemen project yang sudah lo buat itu seperti apa.

Tips menjawab pertanyaan ini: Minimal lo udah ada 1 projectlah yang bisa di show up misalnya project tugas akhir atau project2 tugas besar ketika di kampus. Ceritain peran lo sebagai apa, ngerjain apa saja, teknologi apa yang digunakan serta jelasin ngerjainnya sendiri atau team, kalo team gimana pembagian tugasnya.

  Project yang paling sulit?

Nahh ini pertanyaan lanjutan dari nomer 3, project apa sih yang paling sulit yang pernah dikerjain ? #binggung nih kalo gak pernah ngerjain project. :D:D

Tips dari gw, jawab pertanyaan ini dengan jujur ceritain apa sih kendala dalam menyelesaikan project tersebut, trus gimana cara lo handle itu masalah dan gimana cara lo menyelesaikan project yang sulit ini. Jangan ngarang ya karena user akan tau kalo lo ngarang bisa berabe urusannya

Sebutkan bahasa pemrograman yang ingin kamu pelajari.

Nah ini pertanyaan ketika gw interview diperusahaam M*tr*is, sang user bertanya (pake bahasa inggris tp gw translate ke indo krg lebih gini):

User: ada gak bahasa pemrograman yang ingin kamu pelajari? Gw: ada pak, saya ingin belajar javascript serverside (NodeJs) User: kenapa ingin mempelajari itu? Gw: ****Bla Bla Bla****

begitulah kira-kira pertanyaan dari user, nah lo juga harus siap2 jika pertanyaan itu muncul, yaa ngarang aja lo pngn belajar java atau apa tetapi juga berikan alesannya kenapa lo ingin mempelajari itu karena seperti yang gw bilang di atas, kadang kita php programmer tetapi kedepannya bisa disuruh belajar java dan dikasih project java.

Flow pengembangan aplikasi diperusahaan kamu seperti apa?

Pertanyaan ini ditanyain ketika gw interview di salah satu startup keren di Indonesia bernama ******H, si user nanya karena ingin tau lo familiar dengan metodologi pengembangan aplikasi apa.

Tips dari gw jika lo belum pernah kerja, bisa pelajari tentang metodologi waterfall atau yang sudah kerja taulah gimana flow pengembangan aplikasi diperusahaannya.

Coba selesaikan kasus berikut ini.

Pertanyaan terakhir yang selalu gw dapet adalah om user memberikan study case soal logika gitu yang harus diselesaikan saat itu juga dalam hitungan menit.

Contoh: Gw waktu itu disuruh menyelesaikan logika Bracket, semisal ada bracket “(()))” program tau kalo bracketnya kurang satu tidak berpasang2an alias program bisa mendeteksi kalo sintax diatas error. Alhamdulillahnya gw bisa menyelesaikan logika itu dengan baik fiuh~. Nanti akan gw share contoh tes coding dan logika saat interview kerja.

  Semoga bisa bermanfaat tulisan gw ini dan lo semua yang baca lolos interview kerja dan mendapatkan pekerjaan idaman aminn – amiin. Jika ada yang ingin di tanyakan silahkan menggunakan kolom komentar, saya pasti akan membalas. Thank you for reading.

[loveyourcode-blog1]

Dear Anak IT Lakukan 5 Hal ini sebelum Interview Kerja [Software Engineer - Programmer]

New Post has been published on https://loveyourcode.com/5-hal-penting-sebelum-interview-kerja-programmer-software-engineer/

Dear Anak IT Lakukan 5 Hal ini sebelum Interview Kerja [Software Engineer - Programmer]

Jika kalian membaca artikel ini izinkan saya mengucapkan “Selamat untuk temen-temen yang sedang atau akan menghadapi interview sebagai Programmer, Programmer Website, Programmer Backend, Programmer Front-end ataupun Software Engineer” karena di sini saya akan mengupas tuntas Pertanyaan – pertanyaan serta juga Tips dan Trik dalam menghadapi interview sebagai programmer.

Tips & trik yang akan gw tulis semua berasal dari pengalaman pribadi melamar di lebih dari 10 perusahaan IT lokal maupun internasional seperti IBM Indonesia, Gojek, Garena, Mitrais, perusahan Singapore XCIDIC, dll karena dulu ketika masih freshgraduate saya sangat aktif melamar kerja kesana kemari hehehe maka dari itu gw berharap pengalaman ini dapat membantu generasi muda dalam menghadapi Interview. Baiklah langsung ke tips pertama.

Tips 1:  Percaya diri

Whattttt is Percaya diri? Haloooo gw ini anak IT, gw jago coding dan introvert, gw jarang sekali pergi keluar untuk hangout sm temen dan gw jomblo foreverrrrrrr gimana caranya gw bisa dapetin kepercayaan diri ketika berhadapan dengan HRD?

Well guys, kebanyakan dari anak IT adalah introvert mereka kurang rasa percaya diri ketika berbicara dengan para interviewers, akibatnya apa? HRD atau User tidak tertarik dengan kita, beberapa ciri – ciri kalo lo gak PEDE adalah

Tidak berani menatap mata teman bicara

Menunduk ketika berbicara

Jika binggung mau ngmng apa, lo cenderung melihat ke kiri ataupun ke kanan

Mengeluh tentang diri sendiri

Tidak dapat melihat sisi positive dari diri sendiri

Jika salah satu aja dari ke 5 ciri2 tersebut ada di diri lo artinya lo harus belajar untuk menumbuhkan rasa percaya diri. Berikut beberapa trik yang dapat membantu agar rasa percaya diri bertambah:

Kenali diri lo sebaik mungkin:

Pertama, coba lihat ke diri lo prestasi apa yang pernah diraih dan coba untuk bangga terhadap itu. Misalnya juara web desain atau lo punya sertifikasi – sertifikasi IT tingkat nasional dan internasional. Kedua, perhatikan hobby, apakah itu membawa dampak positive ke diri lo jika iya teruskanlah, jika tidak eta terangkanlah STOP it. Ketiga, lo anak IT yang akan interview sebagai calon programmer coba perhatikan attitude apa yang bisa lo banggakan sebagai anak IT. Contohnya mungkin lo suka mempelajari teknologi coding terbaru, tertarik dengan perkembangan arsitektur aplikasi, gampang untuk mempelajari coding atau teknologi terbaru atau mungkin lo selalu ingin mengimplementasikan teknologi terkini. Hal – hal tersebut akan dapat menambah kepercayaan diri ketika bercerita tentang diri lo ke para HRD.

Kesimpulannya Sangatlah penting untuk kenal dengan diri sendiri karena bagaimanapun semakin mengenal diri sendiri akan semakin mudah buat lo menjelaskan siapa diri lo, dan apa saja kelebihan lo kepada HRD sehingga memberikan kesan pertama yang menarik dihadapan HRD.

Kenali bakat.

Lo adalah calon programmer sedangkan programmer itu ada bermacam – macam, ada Backend Programmer, Front-end Programmer, API Programmer, dan Full-Stack Programmer nah disini lo harus tau dulu bakat lo ada di mana semisal lo gak suka buat desain aplikasi karena ribet ya lo cocok jadi backend programmer, tapi jika lo suka desain ya bagus jadi front-end programmer, semisal lo suka desain dan membuat backend aplikasi berarti lo cocok jd fullstack programmer kan keren tu jarang2 org bisa fullstack tapi jika gak ada yang cocok dari semua programmer ya berarti lo cocoknya kerja di aer… :D:D

Nahh pertanyaan selanjutnya adalah ketika lo Freshgraduate, trus gimana caranya bisa tau bakat lo ada dimana? Saran gw buat para freshgraduate, jika lo suka pemrograman website, hajar aja daftar di semua lowongan pekerjaan yang berkaitan dengan pemrograman website contohnya web developer, javascript developer, API programmer dan lain-lain pokoknya masih ada hubungannya dengan HTML CSS dan teman-teman, kasus lain jika kamu tertarik dengan java, c++ ataupun robotika daftar aja disemua lowongan yang berkaitan dengan itu. Lo gak akan tau mana yang terbaik dan cocok buat diri lo sampai lo terjun payung kedalam industry tersebut, gak akan rugi serius.

Pertanyaan kedua ketika freshgraduate gak suka pemrograman trus harus kemana? Tenang, lowongan IT itu luas mungkin lo bisa jadi IT Support atau jadi Database Admin yaa kalo ga mampu juga bisalah jadi Customer Service jaga didepan :p just kidding. Yang jelas guys, kalo lo gak suka coding it’s oke.. just giving a shoot in other fields.

Kesimpulannya dengan lo tau bakat terpendam didalam diri itu akan sangat membantu dalam menumbuhkan rasa percaya diri lo, ada hal yang bisa menjadi nilai lebih lo di mata HRD maupun orang – orang yang akan kerja bareng sama lo kedepannya.

Yakin terhadap kemampuan diri sendiri

Pernah gak sih lo itu minder dengan kemampuan temen – temen di kampus yang jago coding dan akhirnya jadi gak percaya diri malah mengeluh sama diri sendiri atau mungkin lo pernah takut ngelamar pekerjaan yang sebenernya lo ada kemampuan disitu tetapi karena gak percaya diri dengan kemampuan sendiri akhirnya gak jadi daftar deh. Gw yakin sih lo pernah ngalamin itu ntah sekali atau dua kali. Nah mulai sekarang belajar untuk berfikir positive, percaya sama kemampuan yang lo miliki, guys walaupun skill lo itu gak sehebat Bill Gates ataupun Mark Zuckerberg dalam hal teknis tetapi please jangan minder, jika hari ini lo gak bisa coding atau pemrograman besok adalah cerita yang berbeda guys jadi yang lo butuhkan bukanlah skill pemrograman yang jago tetapi yang lo butuhkan adalah terbuka dan bersedia belajar hal – hal baru. Keep up the good work!

Kesimpulannya Skill teknis yang tinggi itu penting untuk sebuah perusahaan tetapi itu tidaklah cukup jika kandidat tidak memiliki minat belajar yang tinggi, karena teknologi terus berkembang dan lo harus upgrade trus kemampuan setiap hari. Gw percaya HRD bukan hanya melihat skill teknis saja tetapi juga potensi pengembangan diri yang ada didalam diri lo sebagai salah satu pertimbangan yang kuat dalam merekrut lo sebagai karyawan di perusahaanya. So belajar untuk tidak Minder dan Takut.

Tips 2: Persiapkan diri sebaik mungkin

Ada pepatah mengatakan “Practice makes perfect” artinya dengan terus berlatih mempersiapkan diri sebaik mungkin dalam menghadapi interview akan membantu lo dalam menghadapi interview kerja.

Gimana sih cara latihan menghadapi interview kerja? Tipsnya adalah coba belajar untuk memperkenalkan diri dengan baik bisa latihan didepan cermin trus latihan sampai lancar trus bisa dengan belajar coding-coding yang kemungkinan ditanyain oleh HRD ataupun User.

Kesimpulannya, Lo harus terus berlatih sampai sukses! Jangan kasih kendor. Gw akan kasih materi – materi yang harus lo pelajari untuk siap dalam menghadapi interview hrd dan user nanti sehabis section ini.

  Tips 3: Jaga Kesehatan

Gw anak IT, pagi tidur malem keluyuran di internet yaaa gitulah kehidupan mayoritas anak IT lebih suka kerja malem, begadang sampai pagi maen game atau ngoding, sampai2 lupa makan bahkan lupa kalo udah jomblo ratusan tahun #ehhh.

Guys untuk menghadapi interview lo harus bener-bener FIT jaga kesehatan, STOP begadang, makan teratur dan minum vitamin supaya bisa focus dan konsentrasi dalam menjawab setiap pertanyaan interviewer. Oke broooo!

  Tips 4: Pelajari Tentang Perusahaan yang dilamar

Well, penting untuk tau informasi tentang perusahaan yang dilamar karena HRD akan terkesan dengan calon pekerja yang tau banyak informasi atau mempelajari tentang perusahaan dia.

Apa saja sih informasi yang harus di cari tau? Tips dari gw cari tau tentang sejarah perusahaan, visi dan misi perusahaan, perusahaan tersebut bergerak dibidang apa, bisnis utama dari perusahaan tersebut apa, direkturnya siapa dan teknologi apa yang diterapkan diperusahaan tersebut, mungkin lo bisa mencari hal lain yang dirasa penting untuk menghadapi interview.

Kesimpulannya dari informasi – informasi di atas bisa lo gunakan untuk mencari kelebihan atau kontribusi apa yang bisa lo berikan ketika menjadi karyawan di perusahan tersebut.

  Tips 5: Berpakaian Rapi

Well guys tips terakhir adalah berpakaian rapi, belajar dari pengalaman diri sendiri gw pernah dateng interview hanya menggunakan kaos doang karena jujur gw orangnya gak fashionable sama sekali jadi gak tau harus menggunakan pakaian apa ketika interview. Berpakaian rapi penting karena bisa memberikan kesan pertama yang menarik dan juga menambah kepercayaan diri, saran gw pakailah kemeja dan celana panjang tidak perlu formal2 menggunakan dasi hehehe.­­­­­­­­­­

Buat temen-temen yang akan menghadapi interview Goodluck ya semoga sukses dan berhasil dan buat temen-temen yang belum dapet panggilan interview selalu semangat jangan kasih kendor terus melamar di jobstreet dan jobsdb. Happy Interview 😀

[loveyourcode-blog1]

Pahami Struktur Kontrol pada PHP

New Post has been published on https://loveyourcode.com/struktur-kontrol-pada-php/

Pahami Struktur Kontrol pada PHP

Struktur Kontrol pada PHP

Struktur kontrol yang dimiliki PHP hampir sama dengan bahasa pemrograman lainnya. Struktur kontrol yang merupakan pengaturan aliran program, berbentuk rangkaian perintah yang harus ditulis untuk memenuhi beberapa keadaaan, yaitu :

Mengulang suatu perintah jika terpenuhi suatu kondisi (Iteration).

Melanjutkan sebuah pernyataan bila kondisi terpenuhi (Sequence).

Memilih pilihan dari beberapa alternatif bila kondisi terpenuhi (Selection).

Struktur kontrol ada 2 jenis, yaitu :

Struktur percabangan

Struktur perulangan

1. Struktur percabangan

Struktur percabangan adalah perintah yang memungkinkan pemilihan atas perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada 4 perintah percabangan dalam PHP yang akan dipelajari, yaitu :

a)  IF

Statement IF digunakan untuk menjalankan suatu perintah dengan mengecek kondisi yang diberikan terlebih dahulu. Jika kondisi bernilai benar / true (1) maka pernyataan akan dieksekusi, sedangkan jika kondisinya salah / false (0) maka pernyataan tidak akan dieksekusi.

Berikut bentuk umum statement IF :

If (kondisi)     Statement;

Berikut contoh program statement IF:

<?php     $a = - 10;     if($a < 0)          $a = $a * -1;          echo $a;     ?>

  b) IF …. ELSE

Pernyataan IF …. ELSE pada dasarnya sama dengan pernyataan IF, hanya saja perbedaannya terletak pada pengecekan kondisi. Pernyataan IF …. ELSE digunakan untuk alternatif perintah atau keluaran yang akan ditampilkan jika kondisi awal bernilai salah / false.

Berikut bentuk umum statement IF…. ELSE:

If (kondisi)     Statement 1; else     Statement 2;

Berikut contoh program statement IF…. ELSE :

<?php $nilai = 52; if ($nilai >= 60) echo "Nilai Anda : $nilai. Selamat, Anda Telah Lulus!!"; else echo "Nilai Anda : $nilai. Maaf, Anda Tidak Lulus!!"; ?> 

c) ELSEIF

Pernyataan ELSEIF memberikan pilihan alteratif kondisi lebih dari 1.

Berikut bentuk umum statement ELSEIF :

If (kondisi1)              Statement 1; elseif(kondisi2)     Statement 2; …   … } else     Statement n;

Berikut contoh program statement ELSEIF :

<?php $nilai = 52; if ($nilai < 60) echo "Nilai Anda : $nilai. Selamat, Anda Telah Lulus dengan nilai biasa saja!!"; elseif($nilai >=60 && $nilai <80 ) echo "Nilai Anda : $nilai. Selamat, Anda Telah Lulus dengan nilai lumayan!!”; else echo “SELAMAT ANDA LULUS DENGAN NILAI LUAR BIASA”; ?>

d) SWITCH

Perintah ini alternatif pengganti dari struktur IF …. ELSE dengan ELSE lebih dari satu. Dengan menggunakan perintah SWITCH program akan semakin mudah dibuat dan dipelajari.

Berikut bentuk umum statement SWITCH :

Switch(kondisi) Case nilai1 : statement 1; Break; Case nilai2 : statement 2; Break; Default : Statement n;

Contoh program statement SWITCH :

<?php $a=3; switch ($a) case 0 :     echo "Angka Nol";     break; case 1 :     echo "Angka Satu";     break; case 2 :     echo "Angka Dua";     break; case 3 :     echo "Angka Tiga";     break; case 4 :     echo "Angka Empat";     break; case 5 :     echo "Angka Lima";     break; default :     echo "Angka diluar jangkauan";     break;   ?>

  2. Struktur Perulangan

Pernyataan perulangan digunakan untuk memproses / mengeksekusi pernyataan atau statement lebih dari satu kali. Macam – macam pernyataan perulangan di PHP meliputi :

a)   FOR

Perulangan FOR digunakan apabila jumlah perulangannya telah pasti diketahui. Berikut bentuk umum statement FOR:

for (nilai awal, nilai akhir, peningkatan / penurunan)     Statement;

Berikut contoh program statement FOR :

<?php for ($i= 1; $i <= 10; $i++)    echo $i;    echo "<br />"; ?>

b)     WHILE

While digunakan untuk mengulangi sebuah perintah sampai jumlah tertentu. Untuk menghentikan pengulangan digunakan suatu kondisi syarat tertentu. Perulangan ini akan terus berlangsung selama kondisi bernilai benar. Berikut bentuk umum statement WHILE :

while (kondisi berhenti)     statement ;

Berikut contoh program statement WHILE :

<?php $i=1; while ($i <= 10)   echo "$i";   echo "<br />";   $i=$i+1; ?>

c)    DO WHILE

Perulangan ini hampir sama dengan perulangan WHILE. Namun perulangan akan dilakukan terlebih dahulu dan akan berhenti jika sudah mencapai kondisi berhenti tertentu. Pernyataan DO…WHILE akan menguji kondisi pada setiap akhir perulangan.

Berikut bentuk umum statement DO….WHILE :

do     statement: while (kondisi berhenti);

Berikut contoh program statement DO….WHILE:

<?php $I = 1; do echo "Perulangan ke-$I<BR>\n"; $I++; while ($I <= 7); ?>

  Baca juga : Belajar PHP dari paling dasar.

Baca juga: Tipe Data dan Operator pada PHP

[loveyourcode-blog1]

Mengenal Tipe Data dan Operator pada PHP

New Post has been published on https://loveyourcode.com/mengenal-tipe-data-dan-operator-pada-php/

Mengenal Tipe Data dan Operator pada PHP

Kali ini kamu akan belajar tentang Tipe data dan Operator pada bahasa pemrograman PHP, artikel ini lanjutan dari artikel sebelumnya yaitu Belajar bahasa pemrograman PHP.

Tipe Data dalam PHP

Tipe data dasar PHP terdiri dari :

Integer, termasuk jenis data bilangan bulat.

<?php $a=10; //variable $a memiliki tipe data integer echo $a; ?>

Double, termasuk jenis data bilangan pecahan/decimal.

<?php $b=22.33; //variable $b memiliki tipe data double echo $b; ?>

String, termasuk jenis data teks/untaian karakter

<?php $c=”Skrip PHP”; //variable $c memiliki tipe data string echo $c; ?>

Array, mampu menyimpan lebih dari satu data, tiap elemen data pada array dibedakan menurut nomor indeksnya.

<?php $hari[0]="Senin"; $hari[1]="Selasa"; $hari[2]="Rabu"; $hari[3]="Kamis"; $hari[4]="Jum'at"; $hari[5]="Sabtu"; $hari[6]="Minggu"; //menampilkan tanpa perulangan. echo "sekarang adalah hari $hari[3] <br />" ; //menampilkan menggunakan perulangan for($i=0;$i<=6;$i++)   echo $hari[$i]."<br/>";   ?>

  Objek, dibuat dengan tujuan agar para programmer terbiasa dengan OOP yang didalamnya mempunyai data dan method.

<? class memasak_air     function memasak() return "Sediakan peralatan memasak, tuangkan air ke dalam panci kemudian rebuslah air hingga mendidih.";  $obj=new memasak_air; echo"Cara memasak air adalah ".$obj->memasak();     ?>

Operator

Operator adalah suatu simbol yang berfungsi untuk menyusun sebuah ekspresi maupun operasi. Sedangkan yang dioperasikan operator disebut dengan operand. Adapun macam macam operator yaitu :

Tabel Operator dalam PHP

Operator Aritmatika Operator Perbandingan Operator Penugasan Operator Logika + == = And – < += && * > -+ Or / <= /= || % >= %= XOR ++ != &= ! —   !=  

[loveyourcode-blog1]

Ingin belajar membuat website? Pelajari dulu bahasa pemrograman PHP

New Post has been published on https://loveyourcode.com/belajar-bahasa-pemrograman-php/

Ingin belajar membuat website? Pelajari dulu bahasa pemrograman PHP

Pengenalan PHP

PHP (Hypertext Preprocessor), merupakan bahasa pemrograman web bersifat serverside,artinya bahasa berbentuk script yang disimpan dan dijalankan di komputer server (WebServer) sedang hasilnya yang dikirimkan ke komputer client (WebBrowser) dalam bentuk script HTML (Hypertext Mark-up Language).

Baca juga : Mengenal HTML yuk!

Baca juga: Apa sih CSS itu dan kegunaannya? Front-end developer wajib masuk

Baca juga: Belajar Javascript Dasar

Baca juga: Berkenalan dengan jQuery yang super powerful

Keunggulan PHP

Keunggulan dari PHP diantaranya adalah :

Performansi yang tinggi.

Dapat digunakan di berbagai DBMS (Database Management System).

Dibangun dengan kepustakaan yang memadai untuk berbagai penggunaan web.

Harga yang murah karena sifatnya open source.

Mudah dipelajari dan digunakan.

Mudah diaplikasikan di beberapa sistem operasi.

Kebebasan pemakaian kode program.

Karakteristik skrip PHP yaitu:

File PHP disimpan dengan ekstensi : *.php3, *php4, *.php

Skrip PHP di awali dengan tag <? atau <?php dan diakhiri dengan tag ?>

File PHP dapat menginduk atau disisipkan pada bahasa script lainnya atau dapat berdiri sendiri. Contih skrip PHP yang dapat disisipkan pada HTML :

<html> <head> <title>Contoh</title> </head> <body> <?php  echo "Hai, Aku adalah skrip PHP!"; ?> </body> </html>

Sedangkan bentuk skrip PHP  yang berdiri sendiri :

<?php echo "Hai, Aku adalah skrip PHP!"; ?>

Komentar Dalam PHP

Dalam bahasa pemrograman PHP terdapat juga komentar yang berfungsi untuk me-nonaktifkan skrip PHP yang tidak akan dieksekusi. Komentar dapat dituliskan dengan cara :

 double-slash(//), biasanya untuk komentar satu baris

// nama program : komentar1.php // dibuat tanggal : 3 Juni 2004

diawali dengan symbol slash-asterik (/*) dan ditutup dengan asterik-slash(*/), biasanya digunakan untuk memberikan komentar lebih dari satu baris.

/*  nama program : komentar.php  dibuat tanggal : 01 Januari 2015 */

Identifier

Identifier adalah suatu nama yang diciptakan oleh pemrogram untuk memberikan nama pada variabel, fungsi dan class.

Aturan Penamaan Identifier :

Dimulai dengan huruf atau underscore (_)

Karakter berikutnya dapat berupa huruf, angka, atau underscore (_)

Bersifat case sensistive,

Tidak boleh menggunakan tanda baca.

Contoh – contoh identifier

nama

alamat

tanggal_lahir

Variabel dalam PHP

Variabel adalah suatu pengenal dalam program yang berfungsi untuk menyimpan nilai secara sementara dan dapat diubah-ubah nilainya. Untuk mendefinisikan variable, diawali dengan simbol karakter dollar(‘$’) dan diikuti oleh nama pengenal. Contoh $NamaPengenal = nilai;

Adapun aturan dalam menyusun variabel :

Tersusun dari karakter huruf, angka, dan underscore (_)

Tidak boleh mengandung spasi.

Karakter pertama nama pengenal harus dari karakter huruf atau

Huruf kecil dan besar dibedakan.

Contoh pembuatan variabel dalam PHP:

<?php $phi=3.14; //variable $phi menampung bilangan phi itu sendiri yaitu 3.14 echo $phi; ?>

Konstanta dalam PHP

Konstanta adalah suatu tetapan nilai dalam program. Konstanta tidak dapat dirubah nilai sewaktu program dijalankan, kalau hal itu dilakukan akan menyebabkan error.Untuk mendefinisikan konstanta digunakan : define(NamaPengenal, nilai_konstanta);

Contoh :

<?php // konstanta Judul=”Hitung Luas Lingkaran” define ('Judul', 'Hitung Luas Lingkaran'); // konstanta PHI=3.14 define ('PHI', '3.14'); echo Judul; $r=10; echo '<br>Jari-jari :'; echo $r; echo '<br>'; $luas=PHI * $r * $r; echo 'Luas Lingkaran : '; echo $luas; ?>

[loveyourcode-blog1]

Penasaran dengan AJAX Event Handler ? Yuk Baca!

New Post has been published on https://loveyourcode.com/belajar-ajax-event-handle/

Penasaran dengan AJAX Event Handler ? Yuk Baca!

Ajax Event Handler adalah lanjutan dari materi AJAX sebelumnya belajar ajax lebih mendalam. konsep ajax event handler ini juga sangatlah penting untuk para programmer dalam mengimpelentasikan AJAX didalam website kamu.

AJAX Event Handler

Metode ini mendaftarkan penangan yang akan dipanggil bila ada kejadian tertentu, seperti inisialisasi atau penyelesaian, mengambil tempat untuk setiap permintaan AJAX pada halaman.

Berikut macam-macam AJAX Event Handler :

ajaxComplete()

Metode ajaxComplete () menentukan fungsi yang akan dijalankan ketika sebuah permintaan AJAX selesai. Tidak seperti ajaxSuccess (), fungsi ditentukan dengan ajaxComplete () metode akan berjalan ketika permintaan selesai, bahkan tidak berhasil. Syntax:

Syntax : $(selector).ajaxComplete(function(event,xhr,options))

Contoh penggunaan ajax(): Buatlah file bernama ajaxComplete.php dan tulislah syntax dibawah ini:

<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("#txt").ajaxStart(function() $("#wait").css("display","block"); ); $("#txt").ajaxComplete(function() $("#wait").css("display","none"); ); $("button").click(function() $("#txt").load("file.php"); ); ); </script> </head> <body> <div id="txt"><h2>Latihan AjaxComplate</h2></div> <button>Klik Disini</button> <div id="wait"><img src='loading.png' width="64" height="64" /></div> </body> </html>

Selanjutnya buatlah file baru bernama file.php dan kembali ketik tulisan dibawah ini:

File Sukses ajaxComplete berhasil DiTampilkan ! Selamat! <!-- Boleh diubah sesuai data yang ingin di tampilkan -->

screenshoot hasil :

Hasil Screenshoot 

Penjelasan: Ketika ketika tombol “klik disini” dijalankan ketika permintaan ajax selesai maka akan muncul seperti dibawah ini dan menggantikan kalimat “Latihan ajaxComplate “ dan gambar loading akan hilang. Seperti gambar dibawah ini:

belajar ajax complete hasil

  ajaxError()

Mendaftarkan handler yang akan dipanggil ketika Ajax permintaan lengkap dengan kesalahan. Syntax:

$(selector).ajaxError(function(event,xhr,options,exc))

Contoh Penggunaan AjaxError : Buatlah file baru bernama ajaxError.php dan salin lah coding dibawah ini:

<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.2.min.js"></script> <script> $(document).ready(function() $("div").ajaxError(function() alert("Harap dipriksa lagi masih ada yang Erorr!"); ); $("button").click(function() $("div").load("File.php"); ); ); </script> </head> <body> <div><h2>Latihan ajax error</h2></div> <button>Klik Saya</button> </body> </html>

Screenshoot hasil:

latihan ajax error

Penjelasan : Ketika tombol “klik disini” dijalanan kan maka ajax akan memberi peringatan bahwa script atau code masih ada yang salah. Dapat dilihat pada AjaxError.php terdapat pemanggilan file “file.php” padahal pada kasus tersebut file.php tidak ada. Seperti gambar dibawah ini.

latihan ajax error berhasil

        ajaxSend()

Metode menentukan fungsi untuk menjalankan ketika sebuah permintaan AJAX akan segera dikirim. Syntax:

$(selector).ajaxSend(function(event,xhr,options))

Contoh penggunaan ajaxSend().  Buatlah file bernama ajaxSend.php dan tuliskan coding dibawah ini:

<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("div").ajaxSend(function(e,xhr,opt) $(this).html("Requesting " + opt.url); ); $("button").click(function() $("div").load("file.php"); ); ); </script> </head> <body> <div><h2>Latihan AjaxSend()</h2></div> <button>Klik disini</button> </body> </html>

Selanjutnya buatlah file baru bernama file.php dan ketikan kalimat dibawah ini kedalam file tersebut:

File Sukses DiTampilkan ! ajaxSend berhasil! <!-- Boleh dirubah sesuai data yang ingin di tampilkan -->

Screenshoot hasil:

Gambar latihan ajax send

Penjelasan: Ketika tombol “klik disini” dijalanan kan maka sebuah permintaan ajax akan dikirim yang di ambil dari file.php kemudian  test “Latihan ajaxSend” akan digantikan dengan isi yang ada di file.php. Seperti gambar dibawah ini

Gambar latihan ajax send berhasil

ajaxStart()

Metode menentukan fungsi yang akan dijalankan ketika sebuah permintaan AJAX dimulai. Syntax:

$(selector).ajaxStart(function())

Contoh penggunaan ajaxStart() : Buatlah file baru bernama AjaxStart.php dan salinlah coding dibawah ini:

<!DOCTYPE html><html><head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("div").ajaxStart(function() $(this).html("<img src='loading.gif' />"); ); $("button").click(function() $("div").load("file.php"); ); ); </script> </head> <body> <div><h2>Try Ajax Start with Sirkel</h2></div> <button>Tekan Saya</button> </body></html>

Hasil Screenshot :

latihan ajaxStart

Penjelasan: Ketika tombol “klik disini” dijalanan kan, maka sebuah permintaan ajax dimulai dan akan meload file.php. Seperti gambar dibawah ini.

Gambar latihan ajax start berhasil

          ajaxStop()

Metode menentukan fungsi untuk menjalankan ketika SEMUA permintaan AJAX telah selesai. Syntax:

$(selector).ajaxStop(function())

Ketika sebuah permintaan AJAX selesai, cek jQuery jika ada lagi permintaan AJAX. Fungsi ditentukan dengan metode ajaxStop () akan dijalankan jika tidak ada permintaan lain yang tertunda. Contoh penggunaan ajaxStop() : Buatlah file bernama ajaxStop.php dan salin lah coding dibawah ini:

<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() $("div").ajaxStop(function() alert("Request AjaxStop Berhasil"); ); $("button").click(function() $("div").load("file.txt"); ); ); </script> </head> <body> <div><h2>Latihan ajaxStop</h2></div> <button>Klik Disini</button> </body> </html>

Screenshot Hasil:

Gambar belajar ajax stop

Penjelasan:

Ketika tombol “klik disini” dijalanan kan, maka sebuah semua permintaan ajax telah selesai dan akan muncul alert seperti gambar dibawah ini :

belajar ajax stop berhasil

[loveyourcode-blog1]

Apa sih itu AJAX Interface ? dan apa kegunaannya?

New Post has been published on https://loveyourcode.com/pengertian-ajax-interface-dan-kegunaanya/

Apa sih itu AJAX Interface ? dan apa kegunaannya?

Materi ini tentang AJAX Interface dan kegunaannya adalah lanjutan dari materi AJAX sebelumnya, Penting untuk seorang programmer paham konsep AJAX interface karena bisa dikatakan hampir 97% programmer selalu menggunakan ajax interface untuk mengembangkan aplikasinya. yuk langsung saja masuk ke pengertian ajax interface.

AJAX Interface

Digunakan untuk menjalankan request dari AJAX pada umumnya, namun dengan script/coding yang lebih sedikit. Berikut macam-macam AJAX Interface :

1. ajax()

Digunakan untuk menjalankan permintaan AJAX. Syntax:

$.ajax(name:value, name:value,...)

Contoh penggunaan ajax():

<html><head> <title>Contoh AJAX</title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script> $().ready(function()     $('#tombol').click(function()        $.ajax(           url: "latihan.php",           beforeSend: function()              $('#loading').show();           ,           success: function(html)              $('#loading').hide();              alert(html);                  );     ); ); </script> </head> <body> <center><span id="loading" style="display:none"> LOADING...</span> <button id="tombol">Klik di sini!</button> </center> </body> </html>

ajax.php

Buatlah file .php dengan nama latihan.php dan tulislah kalimat dibawah ini

 latihan.php

Selamat Ajax pertama anda berhasil

Screenshot Hasil :

hasil ajax interface

       Penjelasan :

Setelah script di atas dieksekusi, maka akan muncul tombol “klik di sini”. Ketika user menekan tombol tersebut maka akan akan  muncul alert “Selamat Ajax pertama anda berhasil” Seperti gambar dibawah ini.

selamat ajax interface

        2. load()

Digunakan untuk memuat data dari server kemudian menempatkannya ke data yang dikembalikan ke dalam elemen yang dipilih. Syntax:

$(selector).load(URL,callback);

Keterangan :

 URL :

  URL yang dibutuhkan untuk menentukan URL yang akan  dimuat. Callback : parameter opsional yang berisikan nama-nama fungsi yang akan dieksekusi setelah load() selesai dijalankan.

  Contoh penggunaan load() :

buatlah file dengan nama load.php dan tulis atau copy syntax dibawah ini :

<!DOCTYPE html><html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"> </script> <script language="JAVASCRIPT"> $(document).ready(function()   $("button").click(function()      $("#div1").load("latihan.php");   ); ); </script> </head> <body> <div id="div1"> <center><h2>TEKS AKAN BERUBAH JIKA MENEKAN TOMBOL DI BAWAH INI</h2>

Step selanjutnya buatlah file php baru dengan nama latihan.php dan ketik tulisan dibawah ini

latihan.php

Selamat Ajax pertama anda berhasil

Screenshot Hasil :  Setelah script di atas dieksekusi, akan muncul seperti di bawah ini.

belajar ajax load

      Penjelasan:

Ketika user menekan tombol “berubah” maka tulisan “TEKS AKAN BERUBAH JIKA MENEKAN TOMBOL DI BAWAH INI” akan berubah menjadi “Selamat Anda Berhasil Mengubah Teks”. Seperti gambar dibawah ini.

belajar ajax load

      3. get()

Pada dasarnya fungsi get() digunakan untuk mendapatkan (mengambil) beberapa data dari server. Fungsi get() digunakan untuk meminta data dari sumber yang ditentukan atau server menggunakan sebuah permintaan HTTP GET.

Contoh penggunaan get() :

$.get(URL,callback);

Yuk langsung saja implementasi, buatlah file bernama get.php dan tulis coding dibawah ini :

<!DOCTYPE html> <html> <head> <script language="JAVASCRIPT" src="js/jquery-1.11.1.min.js"> </script> <script language="JAVASCRIPT"> $(document).ready(function() $("button").click(function() $.get("latihan_get.php",function(data,status) alert("Data: " + data + "\nStatus: " + status); ); ); ); </script> </head> <body> <button>Mengirimkan permintaan HTTP GET ke sebuah halaman dan mendapatkan hasilnya kembali</button> </body> </html>

Selanjutnya buatlah file baru bernama latihan_get.php,  dan salin atau tulis syntax dibawah ini:

<?php echo "Ini Adalah Isi dari Latihan_get.php"; ?>

Screenshot Hasil :

belajar ajax get().

      Penjelasan :

Ketika user menekan tombol di atas maka akan muncul alert seperti di bawah ini. Seperti gambar dibawah ini.

belajar ajax get success

        4. post()

Pada dasarnya fungsi post() digunakan untuk mengirimkan data bersama dengan permintaan. Fungsi post() digunakan untuk meminta dan menyerahkan data yang akan diproses ke sumber yang ditentukan atau server dengan menggunakan sebuah permintaan HTTP POST. Syntax:

$.post(URL,data,callback);

Contoh penggunaan method post(). Buatlah file bernama post.php dan ketikan syntax dibawah ini:

<!DOCTYPE html> <html> <head> <script language="JAVASCRIPT" src="js/jquery-1.11.1.min.js"> </script> <script language="JAVASCRIPT"> $(document).ready(function() $("button").click(function() $.post("latihan_post.php", nama:"Sirkel", materi:"mengirimkan permintaan http POST" , function(data,status) alert("Data: " + data + "\nStatus: " + status); ); ); ); </script> </head> <body> <center> <button>KIRIM</button> <p>Mengirimkan permintaan HTTP POST ke sebuah halaman dan mendapatkan hasilnya kembali</p> </center> </body> </html>

Selanjutnya buatlah file baru bernama latihan_post.php dan ketikan syntax dibawah ini:

<?php $nama=$_POST["nama"]; $materi=$_POST["materi"]; echo "Hallo nama saya ".$nama.". "; echo "Saya berhasil ".$materi."."; ?>

Screenshoot Hasil : Setelah script di atas dijalankan, akan muncul seperti di bawah ini :

belajar ajax post

        Penjelasan :

Ketika user menekan tombol kirim di atas maka akan muncul alert seperti di bawah ini, yang mengirim data nama “Sirkel” dan materi “permintaan http POST”. Seperti gambar dibawah ini:

selamat ajax interface

        Semoga bermanfaat!.

Baca juga : Belajar dasar – dasar AJAX dan kegunaannya.

Baca juga:  Kenalan yuk dengan jQuery yang powerful.

[loveyourcode-blog1]

Belajar Ajax (Asynchronous JavaScript and XML) Lebih Mendalam

New Post has been published on https://loveyourcode.com/belajar-ajax-asynchronous-javascript-and-xml-lebih-mendalam/

Belajar Ajax (Asynchronous JavaScript and XML) Lebih Mendalam

jQuery + AJAX = COOL! jika kamu bisa paham apa itu AJAX dan bagaimana mengimplementasikannya kedalam coding, saya sudah bisa katakan kamu sudah menjadi web developer karena penting sekali untuk bisa memahami apa itu AJAX, bagaimana dia bekerja dan tak kalah penting kamu bisa tau gimana sih menggunakan AJAX bersama dengan jQuery dalam satu project. di materi ini kamu akan mempelajari tentang pengertian AJAX, kegunaannya apa sih dan juga JSON (Javascript Object Notation).

Baca juga : Belajar Javascript Dasar

Baca juga : Berkenalan Yukk dengan jQuery yang super powerful.

Pengertian AJAX

AJAX (Asynchronous JavaScript and XML) merupakan suatu teknik baru dalam dunia web, tetapi bukan merupakan bahasa pemrograman baru. Ajax merupakan teknik pengembangan web untuk membuat suatu aplikasi web interaktif. Tujuannya adalah untuk membuat website agar lebih responsive, sehingga seluruh halaman web tidak harus reload setiap kali pengguna meminta request .

  Mekanisme Proses AJAX menggunakan PHP

belajar dan mengerti kegunaan ajax lebih mendalam

Penjelasan :

Dengan memakai teknologi Ajax, web aplikasi yang sering kita buat akan berjalan seperti aplikasi desktop. Aplikasi yang kita buat tidak akan melakukan refresh (reload ulang ke server) yang sangat mengganggu dan membosankan karena harus menunggu halaman berikutnya muncul, apakah anda tidak terganggu untuk menunggu setiap kali anda berpindah halaman pada suatu website dengan ditampilkannya white screen terlebih dahulu sebelum halaman yang kita inginkan ditampilkan ??

Ajax memberikan jawabannya, dengan memakai teknologi Ajax maka aplikasi berbasis web kita akan bekerja secara asynchronous/behind the scenes (implisit). Semakin cepat koneksi internet yang didapatkan maka aplikasi berbasis web dengan apilkasi desktop akan sulit untuk dibedakan.

  belajar dan mengerti kegunaan ajax lebih mendalam

Penjelasan :

Dengan menggunakan server-side teknologi, PHP web page akan di proses oleh Web Server terlebih dahulu, setelah selesai maka Web Server akan membuat HTML web page yang nantinya akan dikirim ke user agar dapat ditampilkan di browser. Dalam server-side, anda biasanya membutuhkan database server untuk menangani data/informasi anda. Dalam buku ini kita akan menggunakan database MySQL.

Bagaimanapun juga dengan menggunakan PHP yang dapat melakukan customize content, ditambah lagi dengan menggunakan database, tetap saja browser menampilkan sesuatu yang statis, membosankan dan tidak bekerja sebagai dokumen web yang pintar.

  Kegunaan AJAX

Berikut beberapa manfaat dari AJAX :

1. Validasi Data yang real time

AJAX dapat melakukan proses validasi secara langsung tanpa melalui proses refresh pada saat user melakukan pengisian data melalui form.

2. Autocomplete

AJAX dapat digunakan untuk melakukan autocomplete pada saat user sedang mengisi data pada sebuah form, dengan demikian karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi oleh entry-entry atau masukan yang disarankan. Contoh pada saat kita melakukan pencarian di yahoo atau google lalu kita mengetikkan kalimat atau kata yang belum utuh maka secara otomatis akan tersedia daftar entry atau masukan yang berkaitan dengan kalimat atau kata tersebut. Sehingga kita tidak perlu repot mengetik kata atau kalimat secara lengkap.

3. Refresh data dan server push

Halaman web bisa mengambil data dari server tertentu untuk menampilkan informasi terkini, misalnya ramalan cuaca, kurs dolar, jadwal penerbangan, dan lain sebagainya. Karena hal tersebut halaman web dapat mengambil data secara real time tanpa melalui proses refresh.

4. Menjadikan aplikasi desktop atau web lebih atraktif dan responsif

Teknik-teknik AJAX memungkinkan halaman web atau aplikasi desktop jika kita mengklik tombol tertentu maka reaksi perubahannya akan terlihat pada halaman atau aplikasi tersebut. contoh aplikasi yang menggunakan AJAX adalah aplikasi google maps, google suggest, Gmail, yahoo, dan lain-lain.

  Hal yang harus diperhatikan dalam penggunaan Ajax

HTML dan CSS digunakan untuk menandai dan mempercantik tampilan informasi

XMLHttpRequest objek yang digunakan untuk pertukaran data asynchronous dengan web server

XML, JSON (JavaScript Object Notation) atau teks biasa yang digunakan untuk mentransfer informasi anatara server dan client.

DOM (Document Object Model) digunakan dengan bahasa scripting client-side misalnya javascript, untuk menampilkan secara dinamais dan interaksi dengan informasi yang disajikan.

  JSON (JavaScript Object Notation)

Pengertian JSON JSON singkatan dari JavaScript Object Notation adalah suatu format ringkas pertukaran data. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Cara kerja JSON PHP menyediakan fungsi json_encode() untuk membuat string JSON dari objek dan array. Fungsi ini menerima dua parameter. Pertama adalah nilai yang akan dikodekan dan parameter kedua termasuk pilihan yang mengontrol bagaimana karakter khusus tertentu dikodekan. Parameter ini bersifat opsional.

Penggunaan JSON Sebuah object dideklarasikan dengan:

var obj = ;

Contoh object JSON 

var obj = "firstName" : "Lilik",             "lastName"  : "Haryanto",             "location"   : "Jakarta" ; document.writeln(obj.firstName); // Output Lilik document.writeln(obj.lastName); // Output Haryanto document.writeln(obj.location); // Output Jakarta

[loveyourcode-blog1]

Belajar jQuery Event, jQuery Effects dan jQuery no Conflict

New Post has been published on https://loveyourcode.com/belajar-jquery-event-jquery-effects-dan-jquery-no-conflict/

Belajar jQuery Event, jQuery Effects dan jQuery no Conflict

Belajar jQuery Events, jQuery Effects dan jQuery no Conflict adalah lanjutan dari materi sebelumnya Memahami Fungsi jQuery Selector, artikel kali ini akan memberikan pemahaman tentang jquery lebih mendalam sehingga kamu dapat mengaplikasikan jquery dengan baik didalam coding.

Baca juga : Belajar jQuery dasar dengan mudah

Baca juga : OOP pada Javascript

jQuery Events

jQuery event adalah suatu method untuk memicu atau melampirkan fungsi pada element yang dipilih di suatu halaman web. Berikut beberapa daftar jQuery event yang sering digunakan:

Tabel jQuery Events

ready() Menentukan fungsi yang akan dieksekusi ketika DOM sepenuhnya diload click() Menentukan fungsi yang akan dieksekusi ketika user melakukan klik pada suatu elemen dblclick() Menentukan fungsi yang akan dieksekusi ketika user melakukan double klik pada suatu elemen mouseenter() Menentukan fungsi yang akan dieksekusi ketika mouse pointer masuk/mengarah pada suatu elemen mouseleave() Menentukan fungsi yang akan dieksekusi ketika mouse pointer keluar dari suatu elemen focus() Menentukan fungsi yang akan dieksekusi ketika inputan berada di areanya blur() Menentukan fungsi yang akan dieksekusi ketika inputan kehilangan focus hover() Menentukan fungsi yang akan dieksekusi ketika mouse pointer mengarah pada suatu elemen keydown() Menentukan fungsi yang akan dieksekusi ketika menekan keypad arah bawah keyup() Menentukan fungsi yang akan dieksekusi ketika menekan keypad arah atas keypress() Menentukan fungsi yang akan dieksekusi ketika keypad ditekan

  jQuery Effects

Salah satu kemampuan dari library jQuery adalah memiliki effect-effect siap pakai yang dapat digunakan oleh halaman website. Berikut adalah beberapa diantaranya :

Tabel jQuery Effects

Nama Effect Fungsi Sintaks jQuery show() effect Menampilkan elemem yang tersembunyi $(selector).show(speed,callback) jQuery hide() effect Menyembunyikan elemen yang dipilih $(selector).hide(speed,callback) jQuery fadeIn() effect Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar $(selector).fadeIn(speed,callback) jQuery fadeOut() effect Menyembunyikan elemen yang dipilih jika, secara efek memudar $(selector).fadeOut(speed,callback) jQuery fadeTo() effect Mengatur tingkat kepudaran elemen terpilih menju tingkat opacity yang ditentukan $(selector).fadeTo(speed,opacity,callback) jQuery slideDown() effect Menampilkan elemen yang tersembunyi, secara efek sliding $(selector).slideDown(speed,callback) jQuery slideUp() effect Menyembunyikan elemen secara efek sliding $(selector).slideUp(speed,callback) jQuery animate() effect Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya berdasarkan CSS $(selector).animate(style,speed,easy,callback) jQuery stop() effect Menghentikan animasi yang sedang berjelan $(selector).stop(stopAll,goToEnd) jQuery toggle() effect menggabungkan antara effect hide () dan effect show () untuk elemen yang dipilih $(selector).toggle(speed,easing,callback) jQuery callback() effect Fungsi callback dieksekusi setelah suatu effect selesai dijalankan jQuery chaining() effect Dapat menjalankan beberapa effect jQuery pada satu elemen yang sama

  jQuery noConflict

jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $. Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $. Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnya.

Cara penulisan jQuery noConflict yang umum digunakan adalah sbb :

Menggunakan $.noConflict();

<script src="other_lib.js"></script> <script src="jquery.min.js"></script> <script type="text/javascript"> $.noConflict(); // Code that uses other library's $ can follow here. </script>

Objek yang asli direferensikan oleh $ kembali ke $

<script src="other_lib.js"></script><script src="jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict();   // Do something with jQuery  jQuery( "div p" ).hide();  // Do something with another library's $()  $( "content" ).style.display = "none"; </script>

[loveyourcode-blog1]

Memahami fungsi jQuery Selector

New Post has been published on https://loveyourcode.com/memahami-fungsi-jquery-selector/

Memahami fungsi jQuery Selector

Lebih memahami jQuery Selector

Selector merupakan konsep paling penting didalam jQuery fungsi utama jQuery ada pada selector. Selector dibuat untuk memilih element-element HTML dan melakukan aksi terhadap element yang dipilih. Selector pada jQuery :

$(selector).action()

Tabel 4.2 jQuery Selector

$ Mendefinisikan jQuery (selector) Untuk menunjukan element yang akan dipilih atau dituju action() Aksi jQuery yang akan dilakukan terhadap element yang dipilih

  Untuk menggunakan selector yang aman, sebaiknya dilakukan setelah semua page DOM selesai terbaca. Kita dapat melakukannya dengan fungsi berikut :

$(document).ready(function() //tuliskan kode disini... );

Kode di atas berarti, kode akan dijalankan apabila halaman HTML telah selesai diload semua. Penulisan atau pemanggilan selector jQuery dilakukan di dalam sintaks diatas. Dengan javasript biasanya menggunakan kode seperti ini :

window.onload = function() //tuliskan kode anda di sini

  Baca Juga : 

Materi 1: OOP di Javascript

Materi 2: Berkenalan dengan jQuery

Macam-Macam jQuery Selector

Terdapat beberapa selector yang dipakai untuk jQuery, diantaranya adalah :

a.   jQuery Basic Selectors

Selector dalam jQuery hampir mirip dengan selector CSS. Selector akan mencari element pada HTML sesuai dengan perintah yang ada dalam selector.

Selector Tag

Mendeklarasikan elementnya dengan nama tag yang ada pada HTML dengan langsung menyebut nama tag atau element-nya.

$("p").hide() menyembunyikan semua paragraf atau konten dari tag <p>

Selector id

Selector id pada jquery sama dengan selector id pada css. Sebagai penunjuk selector id menggunakan tanda kres (#). Element yang menggunakan selector id hanya boleh digunakan satu kali saja pada satu halaman HTML. Cara menggunakan selector id adalah dengan menyertakan tanda kres (#) sebelum nama element-nya. Contoh :

$("#test").show() menampilkan element yang mempunyai id="test"

  Selector class

Penggunaanya sama dengan selector class pada css. Sebagai penunjuk selector class menggunakan tanda titik (.). Element yang menggunakan selector class boleh digunakan berulang-ulang pada satu halaman HTML. Cara menggunakan selector class adalah dengan menyertakan tanda titik (.) sebelum nama element-nya.

$(".test").hide() menyembunyikan element yang mempunya class="test"

  b.   jQuery Element Selectors

jQuery mirip CSS dalam hal memilih element HTML .

$(“p”)               : memilih semua element <p>

$(“p.intro”)       :memilih semua element <p> yang mempunyai class=”intro”.

$(“p#demo”)    : memilih element <p> yang punya id=”demo”.

c.   jQuery Hierarchy Selectors

Tabel jQuery Hierarchy Selectors

No Hierarchy Selectors Deskripsi 1 Child

(“parent >

child“)

Memilih secara langsung semua elemen child yang ditentukan tanpa mengeksekusi “parents”

Contoh :

$(“ul.top > li”)

Artinya :

Memilih semua tag <li> yang menjadi child dari parentsnya yaitu tag <ul>. Tanpa memilih tag <ul> yang juga memiliki atribut class top.

  Contoh :

<ul class=”top”>

<li>Sunday

</li>   <li>Monday

</li>

</ul>

2 Descendant (“ancestor

descendant“)

  Memilih semua elemen yang menjadi descendants yang diberikan dari ancestor.

  Artinya :

Memilih semua <span> elements yang terkandung dalam tag <body>. Tag span yang terpilih dapat terletak dalam tag <div> maupun dalam tag <p>.

  Contoh :

$(“body span”);

3  

Next Adjacent

(“prev +

next“)

  Digunakan untuk memilih elemen saudara “siblings” berikutnya yang segera mengikuti elemen tertentu dalam suatu dokumen.

  Contoh :

$(“label + input”)

Contoh :

<form>    <label>Name:</label>

<input name=”name”>

</form>

4 Next Siblings

(“prev ~

siblings“)

  Digunakan untuk memilih semua elemen saudara atau “siblings” berikutnya dari unsur tertentu yang memiliki orang tua atau “parents” yang sama.

Contoh :

$(“#prev ~ div”)

  Contoh :

<span id=”prev”>

After</span>

<div>sibling1 </div>

<div>sibling2 <div>

d.   jQuery Attribute Selectors

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.  Berikut adalah beberapa contohnya :

$(“[href]”) memilih semua elemen dengan atribut href.

$(“[href=’#’]”) memilih semua elemen dengan atribut href bernilai=”#”.

$(“[href$=’.jpg’]”) memilih semua elemen dengan atribut href yang mengandung “.jpg”. Selain itu beberapa contoh lain dari penggunan jQuery Attribute Selectors adalah:

$(document).ready(function() $(“a[href*=’coba’]”).addclass(`contain`); $(“a[href~=’coba’]”).addclass(`contain`); $(“a[href!=’coba’]”).addclass(`contain`); $(“a[href^=’coba’]”).addclass(`contain`); );

$(“a[href*=’coba’]”).addclass(`contain`); memilih semua elemen dengan atribut href yang mengandung kata ‘coba’

$(“a[href~=’coba’]”).addclass(`contain`); akan men-select semua link a yang hrefnya ‘coba’

$(“a[href!=’coba’]”).addclass(`contain`); memilih  semua  elemen  dengan  atribut  href  dengan  nilai  bukan  sama dengan “coba”.

$(“a[href^=’coba’]”).addclass(`coba`); memilih semua elemen dengan atribut href yang diawali dengan kata ‘coba’

[loveyourcode-blog1]

Berkenalan dengan jQuery yang Powerful

New Post has been published on https://loveyourcode.com/belajar-jquery-dasar/

Berkenalan dengan jQuery yang Powerful

Pengenalan jQuery

Sebelum membahas jQuery sangat disarankan kamu sudah mengerti atau paham tentang javascript karena jQuery adalah pengembangan dari javascript. berikut materi javascript yang bisa membantu kamu belajar jQuery:

Baca ini :

Panduan 1: Mengenal Konsep Javascript Dasar

Panduan 2: Panduan Javascript Lanjutan

Panduan 3: Object Oriented Programming pada Javascript

  jQuery merupakan singkatan dari “Javascipt Library”, memiliki semboyan “write less, do more” yang memiliki arti kurang lebih adalah penyederhanaan fungsi-fungsi rumit menjadi lebih ringkas. Dirancang dengan tujuan untuk memperingkas kode-kode javascript. Dirilis pertama kali tahun 2006 oleh john Resig. jQuery telah mencuri perhatian para developer web dan banyak digunakan oleh website terkemuka di dunia. Sebelum mulai mempelajari jQuery, kalian terlebih dahulu harus mengerti dasar-dasar pemakaian HTML, CSS dan Javascript.

Kemampuan Library jQuery

Library jQuery memiliki kemampuan untuk :

Kemudahan mengakses element-element HTML

Menyederdahanakan kode javascript lainnya

Penanganan event HTML

Efek-efek Javascript dan animasi

Modifikasi HTML DOM (Document Object Model)

Manipulasi element HTML

Manipulasi element CSS

  Hubungan Javascript dengan jQuery

Tabel Hubungan Javascript dengan jQuery

  No Javascipt jQuery 1. Pengertian  : JavaScript adalah salah satu bahasa scripting yang paling populer dan dapat berjalan di semua browser utama seperti: Internet Explorer, Firefox, Chrome, Opera, dan Safari. JQuery merupakan library JavaScript yang menyederhanakan kode javascript, digunakan untuk penanganan event, animasi, serta interaksi ajax untuk pengembangan web yang lebih cepat. 2. Tersusun dari : JavaScript adalah kombinasi dari ECMA Script dan Document Object Model (DOM). jQuery menggunakan Document Object Model (DOM).     3. Penerapan dalam WEB : JavaScript membutuhkan banyak proses untuk menciptakan aplikasi berbasis web. Membuat aplikasi berbasis web menggunakan jQuery menjadi lebih mudah 4. Sintaks lebih pendek (memperingkas JavaScript) document.getElementsByTag Name(“p”) $(“p”);

  Penerapan jQuery di HTML

Untuk menggunakan library jQuery di website kita, terdapat beberapa langkah yang perlu dilakukan :

Mengaksesnya secara online :

Google Ajax API CDN (also support SSL via HTTPS)

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

Microsofft CDN (also support SSL via HTTPS)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js

jQuery CDN (via media template)

http://code.jquery.com/jquery-1.11.1.min.js (minified version)\

http://code.jquery.com/jquery-1.11.1.js (source version)

Mengaksesnya dari local komputer (di dalam website / offline) :

Download terlebih dahulu file jquery-1.11.2.min.js dari situs http://www.jquery.com

Taruh file jquery-1.11.2.min.js di dalam folder web kalian

Setiap akan menggunakan jquery, jangan lupa untuk memanggil library jquery-1.11.2.min.js kedalam halaman html kalian, seperti contoh berikut :

<scripttype="text/javascript" src="jquery-1.11.1.min.js"></script>

Selanjutnya, silahkan gunakan jQuery event maupun jQuery effect yang ingin kalian terapkan di website kalian.

  Perbedaan versi jQuery

Terdapat beragam versi pada Jquery. Pada versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Dan memiliki kapasitas yang lebih besar. Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min). Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Untuk saat ini versi terbaru dari jQuery adalah jquery-1.11.2.min.js lebih lengkapnya, bisa download langsung dari website resmi jQuery : http://jquery.com/

[loveyourcode-blog1]

Object Oriented Programming di Javascript

New Post has been published on https://loveyourcode.com/object-oriented-programming-di-javascript/

Object Oriented Programming di Javascript

Pengenalan Objek

Javascript adalah satu halaman browser dalam berbagi objek dengan tujuan untuk memudahkan kita mengakses salah satu dari objek dan memanipulasinya dengan cara merubah sifat/kondisi (properti) objek. Objek tersebut diklasifikasikan berdasarkan hirarki/tingkatan khusus, sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebenarnya.

Baca Panduan sebelumnya, 

Panduan 4: Mengenal Konsep Javascript Dasar

Panduan 4: Mengenal Konsep Javascript Lanjutan

  Dimulai dari objek yang paling besar diantara semuanya (yang berisi objek lainnya). Kemudian turun berdasarkan tingkatan atau hirarkinya sampai kepada objek yang kita inginkan.

Objek paling besar adalah objek window dari browser.

Di dalam objek window, ada satu objek yang ditampilkan dalam bentuk sebuah halaman, kita sebagai objek dokumen atau document.

Halaman berisi banyak objek seperti formula, image dll.

  Hirarki Objek Browser

Dalam sebuah halaman web terdapat bermacam-macam elemen seperti gambar (image), link, form, tombol, input text, dan sebagainya. JavaScript menyusun semua elemen halaman web dalam satu susunan hirarki. Setiap elemen dilihat sebagai object. Setiap object dapat memiliki beberapa property (yang menentukan sifat dan tampilannya) dan method (yang menentukan apa yang bisa dikerjakan oleh object yang bersangkutan). Dengan bantuan JavaScript kita dapat dengan mudah memanipulasi object-object tersebut. Untuk ini kita harus mengerti hirarki dari semua object-object HTML.

Contoh gambar di bawah adalah halaman html  yang kontennya terdapat banyak komponen web, yaitu:

object-oriented-programming-di-javascript

Gambar dibawah ini merupakan ilustrasi hirarki yang dibuat oleh contoh halaman HTML pada

object oriented programming di javascript dasar

Properti

Properti adalah atribut dari sebuah objek. Penulisannya dipisahkan dengan tanda “.” (titik).

nama_objek.nama_properti

Properti dapat diberi nilai, penulisannya :

objek.properti=nilai;

Contoh :

public class Mobil     public String WarnaBadan get; set; //ini properti var mercedes = new Mobil(); mercedes.WarnaBadan = "Merah"; //ini properti setelah diberi nilai

  Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisannya dipisahkan dengan tanda “.” (titik).

Nama_objek.nama_metode(“parameter”)

Contoh :

<script> function myFunction() var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.valueOf(); //ini metode </script>

  Kesimpulan

JavaScript Global Properties

Tabel JavaScript Global Properties

Properti Deskripsi constructor Menyimpan fungsi konstruktor Length Menyimpan ukuran dari string prototype Memungkinkan untuk penambahan properti dan methods untuk sebuah objek infinity Nilai numerik yang merepresentasikan bilangan positif atau negatif yang tidak terhingga NaN Nilai “Not-a-Number”

  JavaScript Global Methods

Tabel JavaScript Global Methods

Method Deskripsi toString() Mengkonversikan nilai numerik ke string concat() Menggabungkan dua atau lebih nilai valueOf() Mengembalikan nilai primitif dari sebuah array

JavaScript Global Functions

Tabel JavaScript Global Functions

Method Deskripsi String() Mengkonversikan nilai dari sebuah objek ke bentuk tipe data string parseInt() Mengkonversikan nilai dari sebuah objek ke bentuk tipe data integer parseFloat() Mengkonversikan nilai dari sebuah objek ke bentuk tipe data float

  JavaScript Event Handler

Tabel JavaScript Event Handler

Method Deskripsi onFocus Event handler jenis ini terjadi pada saat user memberikan fokus ke satu elemen. onBlur Event handler terjadi ketika elemen kehilangan fokus (user melakukan klik di luar elemen). onChange Event handler terjadi pada saat user melakukan modifikasi isi dari data dalam satu field data. onLoad Event handler terjadi pada saat navigator user melakukan load suatu halaman. onMouseover Event handler terjadi pada saat user meletakkan kursor di atas suatu elemen. onMouseout Event handler terjadi pada saat kursor meninggalkan posisi dari atas suatu elemen.

[loveyourcode-blog1]

Mengenal Konsep Javascript Lanjutan

New Post has been published on https://loveyourcode.com/mengenal-konsep-javascript-lanjutan-event-handler/

Mengenal Konsep Javascript Lanjutan

Event Handler

Event adalah aksi dari user yang bisa menghasilkan interaktifitas. Event handler menyatu dengan kode HTML sehingga tidak perlu dimulai dengan tag <SCRIPT>.

Baca materi sebelumnya :

Panduan 4: Mengenal Konsep Javascript Dasar

Event Handler

Event Keterangan onClick Event handler terjadi pada saat user melakukan klik terhadap satu elemen yang berhubungan dengan event. onSubmit Event handler terjadi pada saat melakukan klik tombol submit. onReset Event handler terjadi pada saat user menghapus data suatu form.

  Contoh penggunaan event handler :

<SCRIPT> <a HREF=http://www. sirkel.informatics.uii.ac.id onClick="document.bgColor= '#990033'; return true"> Klik di sini</a> </SCRIPT>

Dari skrip di atas, maka akan muncul tampilan seperti ini dibawah ini :

  Struktur Kendali

Perancang halaman web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi untuk membuat suatu halaman yang dinamis dan interaktif. Perintah-perintah tersebut diantaranya :

1. Percabangan (if else)

Percabangan merupakan bagian dari algoritma program yang mengatur jalannya program jika terdapat lebih dari satu kondisi.

Bentuk umum percabangan if :

If (kondisi) Pernyataan 1 else Pernyataan 2

  2. Perulangan (for dan while)

Perulangan merupakan suatu proses yang mengekseskusi sintaks dalam sebuah program secara terus menerus sampai terdapat kondisi untuk menghentikannya. Struktur perulangan for digunakan untuk melakukan perulangan yang telah diketahui banyaknya. Sedangkan struktur do-while digunakan untuk melakukan perulangan yang tidak diketahui banyaknya.

Bentuk umum perulangan for :

for (penghitung; kondisi loop berhenti; modifikasi penghitung) Blok instruksi

Bentuk umum perulangan while :

while (kondisi terpenuhi) Blok instruksi

Kotak Dialog

Kotak dialog di dalam javascript terdiri dari tiga bagian, yaitu:

1.  Alert

Metode alert memungkinkan navigator untuk menampilkan suatu kotak dialog yang berisi satu tombol OK dan teks keterangan. Pada saat kotak ini muncul, user tidak punya pilhan lain selain menekan tombol “OK”.

Sintaks dan screenshot hasil untuk pemanggilan alert :

<script type=”text/javascript”> window.alert(“Berhasil Login”); </script>

Hasilnya :

belajar javascript dasar

2. Confirm

Metode confirm hampir sama dengan alert, terdapat perbedaan dimana pada alert hanya terdapat satu tombol sebagai navigator, sedangkan confirm memiliki dua tombol yaitu “OK” atau “cancel”.

Sintaks dan screenshot hasil untuk pemanggilan confirm : 

<script type=”text/javascript”> var konfirmasi = window.confirm(“Apakah anda yakin untuk melanjutkan?”); </script>

Hasilnya :

belajar javascript confirm

3.Prompt

Metode prompt merupakan pelengkap dari metode confirm, dimana pada metode ini dilengkapi dengan satu cara untuk mendapatkan informasi dari user. Ada dua jenis metode prompt yaitu berupa isian teks default dan isian teks manual yang harus diisi oleh user.

Sintaks dan screenshot hasil untuk pemanggilan prompt :

<script type=”text/javascript”> var dialog = prompt(“Masukkan Komentarmu”); </script>

Hasilnya :

belajar javascript promt

  Variabel

Variabel adalah suatu objek yang berisi data-data, yang mana dapat dimodifikasi selama pengeksekusian program. Di Javascript, kita bisa memberikan nama variabel sepanjang yang kita suka, akan tetapi harus memenuhi kriteria sebagai berikut ini :

Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter “_”.

Nama variabel bisa terdiri dari huruf-huruf, angka-angka atau karakter “_” dan (spasi kosong tidak diperbolehkan).

Nama Variabel tidak boleh memakai nama-nama berikut ini (reserved oleh program)

abstract

boolean, break, byte

case, catch, char, class, cons, continue

debugger, default, delete, do, double

else, export, extends

Dan lain-lain

Contoh variabel pada operator string:

teks1=”Hello” teks2=”Javascript” teks3=”teks1+teks2”

  PENTING !!!

Javascript bersifat Case Sensitive (memperhatikan perbedaan variabel antara huruf besar dan huruf kecil)

Mendeklarasikan Variabel

a)  Eksplisit

Metode penulisan di javascript dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel.

Contoh :

var coba=”Hello” 

b)  Implisit

Metode penulisan di javascript dengan menuliskan secara langsung nama dari variabel dan nilai dari variabel.

Contoh :

coba=”Hello”

Meletakkan variabel

1. Lokal

Jika dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variabel itu hanya bisa diakses dari dalam fungsi tersebut, dan artinya variabel ini tidak berguna bagi fungsi-fungsi yang lain.

2. Global

Jika dideklarasikan di bagian awal dari script program, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam program bisa mengakses variabel ini. Berikut contoh skrip untuk penggunaan variabel lokal dan global :

<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> <script> var nilai = "global"; // variabel global function test() var nilai2 ="lokal"; //variabel lokal var nilai_lokal = "sirkel"; console.log(nilai2); function coba() var nilai3 ="lokal"; var nilai_lokal = "sirkel"; console.log(nilai); </script> </head> <body> </body> </html>

[loveyourcode-blog1]

Pengenalan Javascript Dasar

New Post has been published on https://loveyourcode.com/pengenalan-javascript-dasar/

Pengenalan Javascript Dasar

Pengenalan Javascript

Kamu masuk ke materi javascript dasar, disini kamu akan dapat pengetahuan dasar tentang javascript, hal ini penting karena javascript akan sangat membantu dalam membuat design website dan juga validasi. Sebelum masuk ke materi ini lebih baik jika kamu paham dahulu tentang HTML dan CSS, materi tersebut dapat di baca disini :

Panduan 1 : Belajar HTML 5 Dasar (Wajb)

Panduan 2: Belajar Dasar – Dasar CSS 3

Javascript merupakan bahasa yang menggunakan client side scripting, yang artinya pengeksekusian perintah-perintahnya dilakukan di sisi browser (client) bukan di web server. Seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;). Oleh karena itu hasil dari pemanggilan Javascript tergantung pada browser.

Beberapa keuntungan menggunakan Javascript:

  1. Keuntungan Menggunakan Javascript

Keuntungan Kekurangan Hampir semua browser sudah mendukung Javascript seperti IE, Mozilla Firefox, Google Chrome, dll. Skrip tidak terenkripsi. Artinya tidak terlindungi, karena dengan melalui text editor user bisa melihat dan meniru sourcenya. Dapat menciptakan halaman web yang lebih interaktif dengan user.

  Kemampuan terbatas. Walaupun javascript dapat membuat web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat aplikasi sendiri seperti halnya java. Memvalidasi data yang akan dikirimkan ke server. Keterbatasan objek. Artinya javascript tidak mampu membuat kelas-kelas yang bisa menampung objek-objek tambahan karena javascript telah memiliki objek built in pada struktur bahasanya.

  Ada beberapa hal penting yang perlu diketahui dalam Javascript yaitu:

Menggunakan blok awal “”dan blok akhir “”.

Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil.

Ekstensi umumnya menggunakan “*.js”.

Setiap statement dapat diakhiri dengan “;” sebagaimana dengan c++, tetapi dapat juga tidak.

Jika tidak didukung dalam browser versi lama scriptnya, scriptnya dapat disembunyikan diantara tag ”<!—“ dan //–>.

Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan karakter “\”.

Berikut adalah contoh skrip sederhana dari file javascript.

<html> <head> <script type="text/javascript"> function alertFunction() alert("Belajar coding Bersama Loveyourcode.com"); </script> </head> <body> </body> </html>

  Perbedaan Java dengan JavaScript

Berikut adalah perbedaan Java dengan JavaScript.

perbendaan javascript dan java

  Bentuk Script Dari Javascript.

Script dari Javascript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dalam jendela browser, karena ada tag tertentu yang memerintahkan browser untuk memperlakukan bahwa script dari Javascript.

Javascript dapat dituliskan dalam sebuah dokumen HTML dengan 2 cara :

Sebagai statement dan fungsi menggunakan tag SCRIPT.

Sebagai pengontrol perintah menggunakan tag HTML.

Tag Script yang dituliskan dalam HTML adalah sebagai berikut :

<SCRIPT> JavaScript Statements......... </SCRIPT>

Ada beberapa cara untuk meletakkan kode Javascript di halaman HTML.

1. Internal dalam file HTML

Pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi Javascript (atau disebut juga event) adalah seperti berikut :

<SCRIPT> Program Javascript Disini </SCRIPT>

Perintah tersebut biasanya diletakkan diantara tag <BODY>….</BODY>.

2. Menggunakan File Ekstern

Cara berikutnya adalah menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks tersebut dipanggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).

Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut:

<SCRIPT SRC=”url/file.js”></SCRIPT>

Dimana url/file.js adalah lokasi dan nama file yang berisi kode Javascript. Jika perintah tambahan “SRC” tidak disertakan maka tag Script akan mencari kode yang terletak dalam tag Script.

Memberikan Komentar (Script tidak tereksekusi)

Memberikan komentar pada javascript ini bertujuan agar program javascript ini tidak dieksekusi/dijalankan. Berikut contoh penggunaan komentar dalam javascript:

<SCRIPT> <!-- ini namanya komentar //--> </SCRIPT>

Selain penggunaan komentar di atas, javascript juga mendukung dua bentuk format komentar yang lainnya, yaitu:

Komentar satu baris, diawali dengan suatu double slash (//).

Komentar banyak baris, diawali dengan suatu /* dan diakhiri dengan suatu */.

Operator

  1. Operator Pembanding

  Operator Pembanding Javascript

Operator Penjelasan Contoh == Sama dengan 5==8 menghasilkan false != Tidak sama dengan 5!=8 menghasilkan true > Lebih besar dari 5>8 menghasilkan false < Lebih kecil dari 5<8 menghasilkan true >= Lebih besar atau sama dengan 5>=8 menghasilkan false <= Lebih kecil atau sama dengan 5<=8 menghasilkan true

2.Operator Logika

Operator Penggunaan Contoh && And (x < 10 && y > 1) adalah benar || Or (x==5 || y==5) adalah salah ! Not !(x==y) adalah benar

[loveyourcode-blog1]

Test Post from Love Your Code

Test Post from Love Your Code https://loveyourcode.com