Doni Hardiyawan. Diberdayakan oleh Blogger.

Post

Popular Posts

MODUL PEMROGRAMAN WEB

DAFTAR ISI
HTML (HYPERTEXT MARKUP LANGUAGE)....................................................................1
1. ELEMEN DASAR HTML............................................................................................1
2. <BR>..............................................................................................................................1
3. <P></P>.........................................................................................................................1
4. <HR>.............................................................................................................................2
5. <FONT></FONT>........................................................................................................3
6. <H1></H1> …. <H6></H6>.........................................................................................5
7. <B></B> atau <STRONG></STRONG>.....................................................................6
8. <I></I> atau <EM></EM>............................................................................................6
9. <U></U>........................................................................................................................7
10. <IMG>.......................................................................................................................7
11. <TABLE></TABLE>................................................................................................8
12. <A></A>....................................................................................................................9
13. <DIV></DIV>.........................................................................................................11
14. <SPAN></SPAN>...................................................................................................12
15. <OL></OL>.............................................................................................................13
16. <UL></UL>.............................................................................................................13
17. <FRAMESET></FRAMESET>..............................................................................14
18. <FORM></FORM>.................................................................................................15
19. ELEMENT PADA FORM.......................................................................................16
CSS (CASCADING STYLE SHEET)....................................................................................23
1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE.........................................23
2. PENULISAN PADA HEAD.......................................................................................23
3. PENULISAN DENGAN CLASS................................................................................24
4. PENULISAN DENGAN ID........................................................................................25
JAVASCRIPT..........................................................................................................................26
1. PENULISAN PADA TAG..........................................................................................26
2. PENULISAN DENGAN TAG <SCRIPT>.................................................................27
3. TIPE DATA.................................................................................................................27
4. VARIABEL.................................................................................................................27
5. OPERATOR, IF DAN PERULANGAN.....................................................................28
PHP (Hypertext Preprocessor).................................................................................................31
1. DASAR PENULISAN PHP........................................................................................31
2. VARIABEL.................................................................................................................31
3. TANDA SAMBUNG..................................................................................................32
4. OPERATOR MATEMATIKA....................................................................................32
5. OPERATOR PERSAMAAN.......................................................................................33
6. OPERASI PERBANDINGAN....................................................................................34
7. OPERATOR LOGIKA................................................................................................34
8. IF..................................................................................................................................34
9. PERULANGAN..........................................................................................................36
10. ARRAY....................................................................................................................37
11. PHP DENGAN FORM............................................................................................38
12. MEMBUAT DATABASE DENGAN NAVICAT..................................................40
13. MEMBUAT TABEL...............................................................................................41
14. MEMBUAT USER DATABASE BARU...............................................................42
15. KONEKSI KE SERVER MYSQL..........................................................................43
16. KONEKSI KE DATABASE MYSQL....................................................................44
17. MENUTUP KONEKSI............................................................................................44
18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY.............................44
19. SKRIP MENAMPILKAN DATA...........................................................................46
20. SKRIP MENAMBAHKAN DATA DENGAN FORM..........................................49
21. SKRIP UPDATE DATA DENGAN FORM...........................................................50
22. SKRIP HAPUS DATA............................................................................................53
23. MENAMPILKAN DATA PER HALAMAN..........................................................55
LAMPIRAN.............................................................................................................................57
1. SETTING HOME SITE+ 5.5......................................................................................57
2. XAMPP........................................................................................................................61
3. NAVICAT 2004...........................................................................................................65
\
Download di sini

Mengenal Cara mendaftar dan menghasilkan Uang dari Adf Ly

ADFLY
Pastinya temen-temen sangat sering ya, menjumpai situs adf Ly di internet. Terutama untuk situs-situs yang menyediakan Link-Link download di situsnya.


Hal yang menjadi alasan utama mengapa saya berpikir menggunakan adfly di blog ini adalah karena pengunjung blog (bahkan saya sendiri) pada dasarnya hanyalah sekedar datang, membaca sekilas dan kemudian pergi mencari informasi dari blog lain. lalu agar sama-sama di untungkan, kenapa kita tak kita buat saja akun adfly, agar kita bisa memperoleh uang dari pengunjung blog yang datang ?
Bukankah  pengunjung blog pun tidak dirugikan?

Mengenal Adf Ly
Adf Ly adalah salah satu cara yang biasa dilakukan oleh para Bloger untuk mendapatkan penghasilan dari aktivitas dan kesediaan nya menyediakan informasi di internet. Sehingga pada dasarnya, pengunjung Blog dan pemilik Blog sama sama diuntungkan. Pengunjung Blog mendapat informasi dari yang pemilik blog bagikan, dan pemilik Blog mendapatkan penghasilan dari pengunjung blog.
Cara kerja Adf Ly pada dasarnya hanyalah memperpendek URL yang kita bagikan. Sehingga ketika pengunjung melakukan klik pada suatu link tertentu, pengunjung akan dibawa terlebih dahulu ke situs Adf Ly, sebelum Akhirnya dibawa ke situs tujuan. Nah, dari sinilah penghasilan kita sebenarnya, adfly membayar kita karena kita membawakan mereka para pengunjung.
Meski dibilang Penghasilan, sebenarnya penghasilan yang diperoleh terbilang kecil, yaitu hanya sekitar 0,000X dolar (atau sekitar dua sampai empat rupiah - sebelum redenominasi mata uang) untuk setiap URL yang pengunjung Klik. sangat sedikit memang. Sehingga Ini hanya cocok di jadikan sebagai pekerjaan sampingan, jika ingin menghasilkan penghasilan dari aktivitas bloging. Tapi dari yang sedikit itulah, lama-lama akan menjadi bukit.

Jika anda butuh gambaran terkait besar kecilnya  penghasilan adfly, anda bisa membuka artikel list penghasilan adfly bulan-bulan pertama. Di sana anda akan melihat bagaimana kecilnya penghasilan dari adfly. Namun jangan salah, karena jika anda bisa menggunakan adfly dengan baik, anda bisa saja memperoleh penghasilan yang lebih besar. Mungkin anda bisa mengambil pelajaran dari situs-situs yang sukses dengan adfly seperti ganool.com yang bisa menghasilkan jutaan rupiah perbulan hanya dengan mempersingkat URL. Penghasilan Situs Ganool.com.
Cara Mendownload atau Melewati Adf Ly
Ketika Kita menemukan Situs yang mengarahkan kita pada Adf Ly, tampilan yang akan kita lihat kurang lebih seperti gambar di bawah ini. Terkadang di bagian tengah muncul iklan dari para pemasang iklan yang bekerjasama dengan adfly.
Ketika kita ingin menuju ke URL tujuan. Sebenarnya kita hanya perlu menunggu waktu sekitar Lima detik sampai Muncul SKIP AD atau LEWATI. Lalu Tinggal Klik, Maka Kita akan di bawa pada Situs yang kita Inginkan.

Membuat Akun Adf Ly
Bagi Teman-teman yang tertarik Membuat Akun Adf Ly, Pada bagian ini akan diperkenalkan Tutorialnya :
Pertama tama masuklah ke situs adf.ly, silahkan Klik di SINI
Klik Join Now.  
Isilah data  username, email, password sampai kode Chapta yang di sediakan. jangan lupa centang I Agree to the Term and Conditions, lalu klik Join.
Cara mendaftar di adfly
Kemudian Masuk ke Email Anda untuk melakukan Verifikasi Akun.
Dan Akun anda Selesai Dibuat.
Cobalah Log In Menggunakan Akun Adf Ly anda.
Lalu Mulai lah perbanyak persingkat URL anda, dan sebarkan Link nya agar lebih besar kesempatan untuk Di Klik.

Persingkat URL dengan Adfly
Kita juga harus mengisi data Pribadi di akun adf, tentang paypal yang kita gunakan. Tapi jika kita belum memilikinya, kita juga bisa mengisi nya kelak, saat dolar kita telah banyak terkumpul.
.
Menerima Pembayaran
Adf Ly, akan membayar kita melalui rekening online yang kita miliki (misal rekening paypal) setiap tanggal satu sampai tiga di awal bulan. Rekening online, khusunya paypal ini bisa dihubungkan dengan rekening bank lokal yang kita miliki di indonesia. Karena saat ini, paypal sangat memudahkan penarikan uang dari rekeningnya. Kita bisa menarik dana dari rekening paypal  ke rekening lokal meskipun kita masih berada pada akun nonverivikasi (karena tidak memiliki Kartu kredit).
Untuk membuat rekening online, idealnya kita perlu menggunakan kartu kredit. Namun kita tetap masih diperbolehkan membuat dan menggunakan rekening online meski tanpa kartu kredit. Baca salah satu artikel tetangga yang sudah sangat baik menjelaskan pembuatan akun paypal tanpa kartu kredit di  membuat Akun Paypal Tanpa Kartu Kredit.

Karena Terbilang cukup lama dalam pengumpulan dolar menggunakan adf ly.. hayu, Mulai daftar dan Persingkat URL dari sekarang.. !!!

Tutorial Membuat Video Kompilasi Menggunakan YouTube Video Editor








YouTube saat ini sudah bertransformasi dari situs video menjadi situs gaya hidup di mana di dalamnya lebih dari sekedar meng-upload dan menonton video tetapi sudah merambah menjadi wadah menunjukkan ekstensis, obsesi dan tak jarang mengubah seseorang menjadi selebritis.
Tak heran jika hampir semua jenis video mulai amatiran, CCTV hingga professional dapat ditemukan di YouTube, dan tak sedikit pula yang menggunakan YouTube sebagai media promosi.
Apapun tujuan Anda saat memutuskan untuk menggunakan YouTube pastikan bahwa yang Anda tampilkan adalah video yang memang menarik. Menarik dalam hal isi dan juga konsep. Isi video sebaiknya telah dirancang sedemikian rupa sehingga tujuan video tersebut tersampaikan. Misalnya saja video berisi kompilasi 5 rumah termahal atau 5 rumah teraneh di dunia, untuk membuat video kompilasi yang terdiri dari beberapa potongan video tentu bukan perkara mudah.



Untungnya Anda tak perlu mengunduh apalagi harus merogoh kocek untuk membeli aplikasi edit video karena YouTube sudah menyediakannya untuk Anda. Namanya YouTube Video Editor, bagaimana cara kerjanya? Ini dia tutorial lengkapnya untuk Anda menggunakan YouTube Video Editor versi Web.
  • Pertama siapkan dahulu video yang akan digunakan, kemudian buka Youtube.com dan login menggunakan akun Anda. Setelah login klik foto profil Anda dan klik Video Manager.
  • Sampai di sini silahkan upload video yang diperlukan, untuk sementara set dahulu semua video ke tipe Private.

  • Saya asumsikan video yang dibutuhkan sudah Anda unggah, masih di halaman Video Manager silahkan lihat di menu sebelah kiri dan klik CREATION TOOLS – Video Editor.
youtube video creator 2
  • Seperti ini tampilan video editor-nya YouTube, di sebelah kanan Anda terdapat sejumlah tool yang nanti akan kita gunakan, sementara di bagian tengah ada jendela frame yang akan menampilkan setiap perubahan atas video yang kita modifikasi. Nah, kita coba masukkan video satu per satu ke dalam frame. Pertama klik ikon kamera seperti yang saya tandai dengan kotak berwarna orange – di panduan ini karena saya tidak mengunggah video terlebih dahulu, maka saya meminjam video berlisensi bebas. Anda pun bisa dengan cara mengklik tombol berbentuk bulat tepat di sebelah ikon kamera.
  • Sekarang tarik salah satu video ke slide video tepat di bawah frame. Silahkan lihat gambar di bawah ini untuk petunjuk yang lebih jelas.
youtube video creator 3
  • Saat video yang Anda tarik berhasil diletakkan maka posisi menu tadi akan berubah menjadi seperti ini. Opsi-opsi di panel ini akan berubah sesuai dengan apa yang Anda input. Karena tadi Anda baru saja menambahkan video maka opsi di dalamnya berupa setting video tersebut. Ikuti pengaturan di gambar berikut ini atau jika Anda cukup paham silahkan gunakan pengaturan Anda sendiri.
youtube video creator 4
  • Lanjut ke video berikutnya, tetapi untuk mempercantik tampilan perpindahan dari satu video ke video lainnya, maka ada baiknya kita tambahkan sedikit animasi. Klik ikon sebelah huruf “a”, atau lihat gambar bertanda kotak orange di bawah ini dan pilih jenis animasi yang Anda inginkan lalu tarik dan posisikan tepat di sebelah video pertama tadi.
youtube video creator 5
  • Setelah itu Anda bisa meletakkan video lainnya, caranya sama dengan langkah pertama tadi. Lakukan lagi hingga seluruh video kompilasi yang Anda ingin masukkan terpakai semua.
  • Sekarang kita ingin agar video tersebut tidak monoton, tambahkan saja musik latar. Caranya klik ikon “not balok” dan pilih genre yang Anda inginkan.
youtube video creator 6
  • Jika lagu yang tepat sudah ditemukan, tarik file lagu tersebut ke slide audio yang letaknya di bawah slide video.
youtube video creator 7
  • Jika sudah berada di posisinya, coba perhatikan apakah musik latarnya terlalu panjang atau justru kurang. Jika terlalu panjang Anda bisa menarik dan menyamakan durasi musik dengan total video yang ada di atasnya. Tetapi jika kurang, Anda bisa menambahkan musik lainnya dengan menempatkan musik baru di sebelah musik yang sudah ada.
youtube video creator 8
  • Terakhir, agar terlihat lebih menarik Anda bisa tambahkan teks di dalam video, caranya klik salah satu potongan video yang ingin Anda beri teks. Kemudian lihat di sebelah frame dan klik menu tab Text. Selanjutnya silahkan sesuaikan pengaturan di panel tersebut hingga mendapatkan hasil yang Anda inginkan.
youtube video creator 9
  • Terakhir silahkan beri nama video Anda dan jika dirasa sudah yakin klik tombol Publish dan video akan diproses oleh YouTube.
youtube video creator 10
 Info Menarik: Tips Cepat Belajar Dan Menguasai Photoshop Untuk Pemula f
Bagaimana, ternyata mudah kan membuat video kompilasi? Tak perlu program berat apalagi yang mahal. YouTube Video Editor ini bisa juga untuk memotong video, tetapi hanya di awal dan di akhir saja. Bisa juga untuk video tunggal atau bisa juga gabungan antara video dan foto. Selamat mencoba dan semoga bermanfaat.

Tutorial Cara Menggunakan Dreamweaver (dalam Membuat dan Mendisain Website / Web Programing)

Sebetulnya membuat website menggunakan program notepad pun bisa karena jika kita melakukan coding d notepad baik itu menggunakan bahasa php,css atau html bahkan javascript pun tetap akan berjalan hanya saja beberapa file yang kita buat akan kita modifikasi ekstension filenya saat kita menyimpan sesuai kebutuhan (.php/.html/.js/.css) dan akan berjalan dengan baik. Lalu muncul pertanyaan Lalu kenapa harus menggunakan program Dreamweaver?.
Dalam hal pembuatan website/web programing tidak harus melulu menggunakan program Dereamweaver. Lalu apa ada program lain selain Dreamweaver dan Notepad? Jelas ada seperti halnya notepad plus-plus dan mungkin banyak lagi yang belum saya ketahui.
Perlu anda ketahui bahwa program Dreamweaver yang saat ini dimiliki Adobe bukanlah satu satunya Program untuk membuat website akan tetapi hanya sekedar alat bantu untuk menyelesaikan kasus-kasus coding yang di anggap bisa diselesaikan dengan waktu cepat sehingga efektif dan efisien. Banyak sekali perintah-perintah kode yang secara otomatis terbaca. Menyenangkan bukan?.
Selain itu, kita juga bisa melihat langsung hasil coding atau kegiatan pengkodean dengan men-displaynya d dalam Dreamweaver itu sendiri tanpa harus menggunakan browser.
Untuk mahir menggunakan Dreamweaver maka kita tidak usah membaca tutorial yang panjang tanpa adanya praktek karna kuncinya hanya satu yaitu Latihan (langsung praktek). Dalam hal ini tanpa kita mempedulikan untuk apa menu dan sub menu yang ada karena dalam beberapa proses latihan anda akan menemukannya sendiri.
Untuk itu saya akan berikan anda Video Gratis hasil dari "pengajian" Web Programing dari TheJagat IT Indonesia yang mana didalamnya tidak tersurat secara mendetail tentang penggunaan Dreamweaver akan tetapi sangat membantu anda bahwa betapa mudahnya jika kita coding menggunakan Dreamweaver.
Berikut Link Download cara penggunaan Dreamweaver
Klik Disini

CARA MENGGUNAKAN ADOBE DREAMWEAVER CS3

CARA MENGGUNAKAN ADOBE DREAMWEAVER CS3

STEP 1 
- Buka program adobe dreamweavernya kemudian pilih HTML.




Screen shot 2013-01-18 at 10.41.23 AM
STEP 2 - Setelah terbuka pilih tab design
Screen shot 2013-01-18 at 10.41.29 AM
Screen shot 2013-01-18 at 10.41.36 AM
STEP 3 - Pilih menu Insert > Common > Media > Flash Button

Screen shot 2013-01-18 at 10.41.44 AM
STEP 4 - Pada saat kita memilih flash button maka akan muncul paparan seperti dibawah ini. Maka kita harus menyimpan filenya terlebih dahulu. Klik ok sahaja.

Screen shot 2013-01-18 at 10.41.50 AM
STEP 5 - Simpan file terlebih dahulu. File > Save.

Screen shot 2013-01-18 at 10.41.56 AM
Kemudian simpan dalam folder baru, beri nama filenya menu_flash.html.

Screen shot 2013-01-18 at 10.42.00 AM
STEP 6 - Kemudian kita ulangi pilih menu insert > common > flash button lalu ia menunjukkan paparan seperti di bawah.

Screen shot 2013-01-18 at 10.42.06 AM
Keterangan : 
  • Sample : Untuk melihat sampel sementara atau bentuk pilihan falsh button sesuai pilihan.
  • Style : Menu pilihan Flash button
  • Button Text : Teks yang akan di isikan ke dalam flash buttonnya.
  • Font : Jenis tulisan yang akan digunakan
  • Size : Ukuran teks yang akan digunakan
  • Link : Alamat tujuan link dari flash buttonya
  • Target : Target pilihan tujuan link
  • Bg colour : Background warna dari flash button
  • Apply : Melihat hasil sementara tapi belum disetujui klik
  • Ok : Jika sudah sesuai keinginan
Untuk contoh boleh lihat gambar di bawah ini :

Screen shot 2013-01-18 at 10.42.12 AM
STEP 7 - Setelah klik ok maka akan muncul kotak dialog flash Accessibility Attributes, di title klik menu kemudian klik ok.

Screen shot 2013-01-18 at 10.42.18 AM
Dan inilah hasilnya

Screen shot 2013-01-18 at 10.42.24 AM
Untuk menambah menu-menu berikutnya, ulangi langkah-langkah tadi.

NB : Pada saat sudah terbuat flash button tadi penyimpanan di folder tadi akan memaparkan flash button yang kita buat tadi.

Panduan Instalasi xampp-win32-1.8.3-1-VC1118.39

Assalamu'alaikum.. Salam sejahtera..
Setelah lama nian tidak ngeposting sesuatu yang bermanfaat, kali ini Tulisan Ilmu akan berbagi panduan atau cara instalasi xampp-win32-1.8.3-1-VC11. XAMPP adalah sebuah software web server apache yang didalamnya sudah tersedia database server mysql dan support php programming. XAMPP merupakan software yang mudah digunakan, gratis dan mendukung instalasi di Linux dan Windows.
Baik, sebelum melakukan peng-instalan ada beberapa hal yang harus sobat penuhi, yaitu :
1. Harus punya kompi atau laptop. (jelas lah, emangnya mau nginstalin dimana tu xapmm?? hehe)
2. Kompi atau laptop sobat sudah terinstal Web Browser (Firefox, Chrome, Opera, dll).
3. Download xampp-nya disini.
4. Sobat harus sehat jasmani dan rohani serta punya mental yang kuat. hehehe...
Jika hal-hal diatas sudah terpenuhi, maka sobat dapat segera melakukan peng-instalan. ikuti langkah-langkah dibawah ini.
  • Setelah xampp berhasil di download, klik 2 kali pada installernya sampai muncul tampilan seperti dibawah ini.
  
  •  Klik next sehingga muncul tampilan seperti dibawah ini.
  • Usahakan semua fitur tercentang, kemudian klik next sampai muncul perintah untuk memilih dimana kita akan menyimpan folder installan, kemudian klik next.
  • Kemudian akan muncul tampilan seperti dibawah ini. xampp versi BITNAMI telah support dengan berbagai CMS seperti joomla, drupal, dll sehingga dapat men-download langsung pada xampp-nya. hilangkan centang dan klik next.

  • Klik next pada tampilan berikut.
  • Selanjutnya adalah proses instalasi kedalam komputer kita. ini akan membutuhkan waktu beberapa menit, jadi harap sabar menunggu.
 
  • Jika tidak ada masalah, maka akan muncul tampilan seperti berikut. lalu klik finish.
  • Jika centang pada tamilan sebelumnya tidak dihilangkan, maka akan muncul tampilan xampp-control. fitur ini memungkinkan pengguna untuk menjalankan beberapa service yang disediakan oleh xampp. klik Start pada service Apache dan MySQL.
  • Jalankan browser dan cek apakah xampp sudah berjalan sebagaimana mestinya. ketikkan localhost pada link bar di browser.
  
  • Jika tampilan sudah seperti di atas, maka proses instalasi berhasil dan selesai. sobat bisa langsung menggunakan xampp tersebut.
Baik, itulah Panduan Instalasi xampp-win32-1.8.3-1-VC11 yang dapat saya sampaikan, semoga bermanfaat dan selamat mencoba..!!

JQuery untuk Orang Awam

JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.

Apa yang bisa dilakukan dengan JQuery?

1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Download JQuery

Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.

Contoh Sederhana JQuery

Contoh sederhana penggunaan JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
  • Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag <body>.
  • Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
  • Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.
Klik disini untuk melihat demo dari program di atas

Cara membuat script login dengan Jquery ajax dan php

Sambil mengerjakan script - script PHP, berikut kami coba sempatkan menulis tutorial Cara membuat script login dengan menggunakan JQUERY AJAX. Penggunaan AJAX tanpa bantuan JQUERY akan membuat kita harus mengetik banyak kode Javascript sehingga tentunya akan menyulitkan juga terutama untuk para pemula, dengan pemanfaat JQUERY, kode Javascript yang harus kita ketikkan menjadi lebih ringkas, dan itulah tentunya keuntungan kita menggunakan Javascript Framework JQUERY
Langkah - langkah yang dilakukan untuk membuat script login dengan JQUERY AJAX adalah sebagai berikut :
1. Menyiapkan JQUERY
Untuk menggunakan fungsi AJAX pada JQUERY, terlebih dahulu kita harus menyiapkan JQUERY dengan cara mendownloadnya kemudian kita simpan dalam komputer kita bersebelahan dengan script - script tutorial kita supaya tutorial ini dapat dijalankan pada komputer lokal meskipun tidak terkoneksi ke internet. Pada contoh script dibawah sudah kami siapkan Jquery lengkap dengan contoh project tutorial kita kali ini

2. Membuat form login » index.php
Script ini akan digunakan sebagai sarana untuk memasukkan username dan password ketika hendak login, berikut contoh script index.php sebagai halaman login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
    <head>
        <title>Login dengan Jquery AJAX</title>
        <style type="text/css">
            #login{
                font:bold 16px Tahoma,Verdana;
                display:block;
                border:#7596c0 1px solid;
                width:400px;
                height:280px;
                margin-left:auto;
                margin-right:auto;
                border-radius:5px;
                background-color:#98c1f3;
                box-shadow: 5px 5px 5px rgb(150, 149, 149);
                visibility:visible;
                color:#e9ecf0;
            }
            h3{
                font:bold 20px Tahoma,Verdana;
                margin:0 0 0 0;
                padding:0 0 0 0;
                color:#2572d2;
                text-align:center;
                line-height:50px;
                border-bottom:#ffffff 1px solid;
            }
            #inner{
                margin:0 20px 0 20px;
            }
            input.txt{
                font:normal 14px Tahoma,Verdana;
                padding:10px;
                margin:5px 0 5px 0;
                width:100td_persen;
                background-color:#dee9f6;
            }
            input.btn{
                font:bold 14px Tahoma,Verdana;
                padding:10px;
                margin:5px 0 10px 0;
                width:100td_persen;
                text-align:center;
            }
        </style>
        <script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
        <script type="text/javascript" src="login.js">//memanggil script ajax</script>
    </head>
    <body>
        <div id="login">
            <h3>LOGIN ADMINISTRATOR</h3>
            <div id="inner">
                  
                <input type="text" class="txt" placeholder="Username anda" id="txt_username"/>
                  
                <input type="password" class="txt" placeholder="Password anda" id="txt_password"/>
                <input type="button" class="btn" name="btn" id="btnLogin" onclick="check_login();" value="Login"/>
            </div>
        </div>
    </body>
</html>

3. Membuat script AJAX » login.js
Script ini merupakan script Jvascript AJAX yang akan menggunakan fungsi AJAX pada JQUERY dengan susunan script sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function check_login()
{
    //Mengambil value dari input username & Password
    var username = $('#txt_username').val();
    var password = $('#txt_password').val();
    //Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
    var url_login    = 'http://localhost/tutorial/login.php';
    var url_admin    = 'http://localhost/tutorial/admin.php';
     
    //Ubah tulisan pada button saat click login
    $('#btnLogin').attr('value','Silahkan tunggu ...');
     
    //Gunakan jquery AJAX
    $.ajax({
        url     : url_login,
        //mengirimkan username dan password ke script login.php
        data    : 'var_usn='+username+'&var_pwd='+password,
        //Method pengiriman
        type    : 'POST',
        //Data yang akan diambil dari script pemroses
        dataType: 'html',
        //Respon jika data berhasil dikirim
        success : function(pesan){
            if(pesan=='ok'){
                //Arahkan ke halaman admin jika script pemroses mencetak kata ok
                window.location = url_admin;
            }
            else{
                //Cetak peringatan untuk username & password salah
                alert(pesan);
                $('#btnLogin').attr('value','Coba lagi ...');
            }
        },
    });
}
Dengan penjelasan - penjelasasn seperti pada contoh diatas, kami berharap pembaca sekalian dapat memahami maksud dari masing - masing line script yang kita gunakan
4. Membuat script pemrosesan » login.php
Script login.php merupakan script php sederhana yang kami gunakan untuk melakukan pengecekan kebenaran username dan password pada database, jika username dan password benar, maka script dibawah akan mencetak kata "ok", sedangkan jika username dan password salah maka akan dicetak kata "Username atau Password Salah !"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
session_start();
//koneksi ke database
$conn = mysql_connect('localhost','root','kutukupret');
$db   = mysql_select_db('tutorial',$conn);
if(isset($_POST['var_usn']) AND isset($_POST['var_pwd'])){
    $username = addslashes($_POST['var_usn']);
    $password = addslashes($_POST['var_pwd']);
    $check    = mysql_query('select * from admin where Usn="'.$username.'" AND Pwd="'.$password.'" ');
    if(mysql_num_rows($check)==0){
        echo 'Username atau Password Salah !';
    }
    else{
        $_SESSION['login']['usn'] = $username;
        $_SESSION['login']['pwd'] = $password;
        echo 'ok';
    }
}
?>

Pesan login diatas selanjutnya yang akan diambil oleh script login.js, dimana kalo script diatas mencetak kata "ok", maka user akan langsung diarahkan ke halaman berikutnya, sebaliknya jika script diatas mencetak pesan kesalahan, maka script login.js akan memberikan javascript alert sebagai tanda peringatan kesalahan username dan password
5. Membuat script halaman admin » admin.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
session_start();
if(isset($_GET['logout']) AND $_GET['logout']=='1'){
    unset($_SESSION['login']);
    session_destroy();
}
if(!isset($_SESSION['login'])){
    header('location: index.php');
}
else{
    echo '<h3>SELAMAT DATANG : '.$_SESSION['login']['usn'].'</h3>';
    echo 'Halaman ini kita asumsikan sebagai halaman Administrator, dimana halaman ini hanya bisa diakses ketika Admin sudah login';
    echo '<br/><a href="?logout=1">LOGOUT</a>';
}
?>
Script diatas kita asumsikan sebagai halaman administrator yang mengharuskan user untuk login terebih dahulu ketika hendak mengakses halaman ini
Untuk mencoba script - script diatas tanpa adanya perubahan direktory, sebaiknya kita tempatkan script - script diatas pada folder dengn nama tutorial pada direktory web server komputer anda.
Download script login dengan JQUERY Ajax
Sekian dulu tutorial kali ini, semoga tulisan kami dapat bermanfaat sebagai sarana belajar anda, Terimakasih dan Salam kreatif

Cara Menggunakan JQuery

Seperti pada tutorial sebelumnya yaitu Fungsi dari jQuery maka pada tutorial kali ini kita akan membahas Bagaimana cara menggunakan jQuery? wah mantab tuh gan, buruan dong! tenang, akan segera saya jelaskan langkah - langkahnya.

1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Dimana download jQuery Library? mau tau aja atau mau tau banget? hehehe... Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1
screenshot website jquery.com
gambar : screenshot website jquery.com


2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.
pilihan download jQuery
gambar :

Catatan :
jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari - memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh jQuery.

3. Akan muncul code dari library JQuery
jquery code library
gambar : jquery code library

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda
logo jquery write less do more
gambar : save jquery lib pada direktori website

4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda buat. Buka dreamweaver dan masukkan kodenya.
Scriptnya yang saya cetak tebal merah :
script pemanggil jQuery
gambar : script pemanggil jQuery
5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :
A) Panggil / Load library jQuery (stabilo merah)
B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo biru)
C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu - abu)


sebagai contoh saya akan membuat control sembunyikan dan tampilkan gambar :
inti dari jQuery
gambar : inti dari jQuery

Cara menggunakan PHP Manual

Jika Anda menjalankan PHP sendiri komputer, ingat bahwa Anda dapat menyimpan file ke direktori yang tepat dan mengakses script melalui http://localhost/.  Jika Anda melihat kesalahan atau halaman kosong bukan hasil yang ditunjukkan dalam mencari, lihat bagian debugging pada akhir bab ini. PHP adalah case-sensitive ketika datang ke memanggil fungsi seperti phpinfo () dan cetak:  cetak, Cetak, dan PRINT bersih sama hasil.
Kemudian dalam buku ini Anda akan melihat contoh-contoh dimana kasus membuat perbedaan penting. Anda dapat menggunakan fungsi lain untuk mengirim pesan teks ke browser, termasuk echo dan printf (), tapi buku ini terutama menggunakan cetak. Anda dapat-dan sering akan digunakan mencetak lebih dari beberapa baris: print "Ini adalah lagi kalimat dari teks ".; Tanda kutip penutup mengakhiri pesan yang dicetak dan titik koma adalah ditempatkan hanya pada akhir baris itu. Sebuah Sederhana Halo, dunia! contoh: pertama Anda terjun ke pemrograman PHP. 

Para manual online yang dapat diakses di PHP www.php.net / manual-list setiap fungsi dan fitur bahasa. Manual ini diselenggarakan dengan konsep-konsep umum (Instalasi, sintaks, variabel) dibahas pertama dan berakhir dengan fungsi berdasarkan topik (MySQL, fungsi string, dan sebagainya). 
Untuk segera melihat fungsi apapun dalam PHP manual, pergi ke www.php.net / functionName di browser Web Anda (misalnya, www. 
php.net / cetak).  Untuk memahami bagaimana fungsi dijelaskan, melihat awal cetak. 
Fungsi Halaman A. Baris pertama adalah nama fungsi itu sendiri, diikuti oleh versi PHP dalam yang tersedia. Sebagai bahasa tumbuh, fungsi baru yang ditambahkan dan, sesekali, fungsi lebih tua dihapus. Lalu ada deskripsi tekstual dari fungsi bersama dengan penggunaan dasar fungsi itu. Penggunaan adalah bagian paling penting dan membingungkan. Dalam contoh ini, nilai int, pertama, kata yang mencetak mengembalikan nilai integer (Khususnya, cetak kembali 1, selalu). Halaman Manual PHP untuk membangun cetak. Memulai dengan PHP 19 
Dalam tanda kurung, string $ arg menyatakan bahwa fungsi memerlukan satu diperlukan argumen, yang harus dalam bentuk string. 
Anda sudah melihat ini dalam tindakan. Sebagai perbandingan, periksa manual yang 
daftar untuk nl2br () fungsi B. fungsi mengkonversi baris baru ditemukan dalam teks (setara dengan menekan Kembali / Enter) ke dalam tag HTML istirahat. Fungsi ini, yang mengembalikan string, mengambil string sebagai yang Argumen pertama dan Boolean opsional (Benar / salah) sebagai kedua. Setiap kali Anda melihat kurung persegi, yang menunjukkan 
opsional argumen, yang selalu terdaftar terakhir. 
Ketika fungsi memakan waktu beberapa argumen, mereka dipisahkan dengan koma. 


Oleh karena itu, fungsi ini dapat disebut seperti: 
                       nl2br ("teks Beberapa"); 

                       nl2br ("Beberapa teks", false); 

Sebagai definisi juga menunjukkan, yang kedua argumen memiliki nilai default dari benar, yang berarti akan menciptakan XHTML <br /> tag kecuali fungsi tersebut melewati kedua argumen nilai palsu. Dalam hal ini, fungsi akan membuat tag HTML <br> gantinya. Jika Anda pernah bingung dengan fungsi atau bagaimana hal itu digunakan dengan benar, periksa PHP  panduan ini referensi halaman untuk itu. Halaman B Manual PHP untuk fungsi nl2br ().

- Copyright © Belajar Multimedia - blue - Powered by Blogger - Designed by Doni Hardiyawan -