Tutorial Javascript

Tutorial Javascript adalah tutorial yang mengulas tentang penggunaan script javascript sebagai saranan pendukung pengembangan aplikasi php. Javascritp biasanya di gunakan dan kombinasikan dengan html, css dan juga di maksimalkan menjadi ajax. Penggunaan javascript pada aplikasi web agar pengembangan aplikasi menjadi lebih menarik dan atraktif.

Javascript – Membuat Popup Window Membuka Halaman Baru

Membuat Popup Window Membuka Halaman Baru

Membuat Popup Window Membuka Halaman Baru / gambar: 123rf

Topik kali ini sedikit menarik, bahasanya adalah mengenai javascript. Javascript yang akan kita bahas adalah mengenai pengembangan aplikasi seperti aplikasi periklanan yang sering kita jumpai di internet.

Jenis Iklan yang dimaksud adalah jenis iklan popup atau pop under. Iklan pop up atau pop under adalah iklan yang muncul pada halaman web dan membuka tab baru urlnya Ketika kamu melakukan interaksi dengan browser.

Interaksi-interaksi tersebut misalnya ada mengklik salah satu bagian website, melakukan scrolling, melakukan load halaman web dan banyak lainya event-event yang bisa digunakan untuk menampilkan iklan yang lompat ke tab baru url atau linkya.

Pada tutorial singkat ini, yang kita bahas adalah fungsi javascript untuk melakukan hal diatas dengan tampilan halaman sederhana. Dan fokus yang kita bahas adalah ketika user melakukan klik di salah satu halaman web maka akan muncul iklan pada tab baru dengan catatan, iklan hanya muncul sekali pada satu ip address  atau iklan muncul pada satu sesi, atau iklan muncul pada satu browser.

Dengan demikian iklan tidak muncul secara terus-menur meskipun user atau pengunjung web kamu mengklik halaman yang ada pada web.

Untuk pengembangan yang lebih menarik, iklan atau link bisa ditukar menggunakan program php dengan memanfaatkan link yang terdaftar pada database. Ini cara yang simpel, akan kita share di postingan berikutnya.

Untuk iklan yang muncul pada tutorial kali ini hanya 1 iklan, bisa saja kita tampilkan lebih dari satu iklan secara berganti-ganti tergantung pemrograman yang kamu lakukan nantinya menggunakan php.

Sebenarnya selain menggunakan fungsi javscript, fungsi lain dapat kita gunakan juga menggunakan jquery. Keduanya sama-sama menggunakan proses pada browser klien. TInggal kita mau pakai yang mana.

Membuat Popup Window Membuka Halaman Baru

Berikut script php dan javascript serta htmlnya.

<html><head><title>Popup Window Sekali 1 User browser</title>
<script>function adPop(){ var poppy = localStorage.getItem(‘open’); if(!poppy){ window.open(‘http://safelinku.net/8HlP’,’_blank’) localStorage.setItem(‘open’,’true’); }}</script><head><body onclick=”adPop();”><?php for($i=0;$i<100;$i++){ echo “ini contoh halaman<br/>”;}?></body><html>

Scriptnya simpel namun fungsinya dapat digunakan untuk berbagai konsep. Misalkan saja periklanan. Bisnis pemendek url dan banyak lagi lainya.

Untuk melihat bagaimana dari proses script diatas kamu bisa langsung tes di halaman demo

Demo

Postingan berikutnya

  1. kodingan php membuat window baru

Menampilkan dan Menyembunyikan Form dengan Combobox

Tutorial kali ini kita akan mengulas bagaimana cara menampilkan dan menyembunykan form pada sebuah halaman web html dengan combobox.

Kalau sebelumnya saya membuat ini dengan cara memanfaatkan penggantian url dengan menyembunyikan dan menampilkan form, maka sekarang tanpa merubah url. Kelemahan dengan merubah url pada parameternya adalah page akan terefresh dan isian form sebelumnya akan hilang atau akan kembali kosong seperti sebelumnya.

Dengan  memanfaatkan cara simpel menggunakan javascript  ini, halaman tidak akan terefresh dan isian inputan yang telah kita inputkan pada form sebelumnya tidak akan hilang atau tidak akan terpengaruh.

Pada kasus yang terapkan disini, saya telah membuat jenis formnya pada kasusnya. Pertama saya menggunakan script ini ketika akan membuat form inputan data pegawai. Pada data pegawai tersebut form sangat banyak mulai dari detail pribadi sampai detail info kepegawaian. Pada intinya ketika saya ingin memilih jabatan, maka akan muncul form di bawahnya.

Contohnya jika Saya memilih jabatan kepala bidang maka di bawahnya akan muncul pilihan bidang. Jika saya memilih jabatan kepala subbidang maka akan muncul pilihan form di bawahnya pilihan subbidang. Lain halnya jika Saya memilih jabatan sebagai kepala dinas, maka pilihan di bawahnya tidak akan muncul apa-apa, Secara logika tutorial kali ini hampir sama cara kerjanya.

Studi kasus

Kasus yang kita terapkan pada tutorial kali ini adalah pada form cetak laporan. Pada form laporan terdapat inputan pertama yang berupa combobox. Yang mana combobox tersebut terdapat 3 pilihan didalamnya.

Pilihan yang ada yaitu supplier, permintaan dan pengiriman.

Jika saya memilih combobox supplier maka tidak akan tampil form lagi dibawahnya. Namun jika Saya memilih pilihan permintaan atau pengiriman maka di bawah form tersebut akan muncul form berikutnya yaitu form inputan tanggal dari tanggal sampai tanggal berapa.

Oke langsung simpak tutorial simpel dan mudahnya ini,

Tampilan Form awal

Menyembunyikan form inputan html

Menyembunyikan form inputan html

Diatas merupakan tampilan default form cetak laporan pada aplikasi yang Saya buat. Untuk supplier jika di cetak akan menampilkan data supplier yang ada pada database aplikasi.

Pada Form pilih laporan tersebut terdapat 3 laporan seperti yang sudah Saya jelaskan di atas sebelumnya.

Pada form diatas, sebenarnya terdapat form lagi di bawah form tersebut yaitu dari tanggal dan sampai tanggal. Karena memang form pilihan diatas tidak membutuhkan rentan tanggal maka formnya Saya sembunyikan.

Tampilan setelah Form awal

Menampilkan form inputan html

Menampilkan form inputan html

Nah, pada tampilan diatas sudah tampil form setelah form pilihan laporan di pilih. Untuk membuat konsep diatas kita menggunakan javascript yang didalam scriptnya terdapat kondisi untuk menampilkan form yang kita maksud itu.

Javascript menyembunyikan dan menampilkan form

Sebegai contoh agar mudah dipahami, langsung saya ambil script dari kasus Saya ini,

<label>Pilih Laporan</label>

<select name=”laporan” class=”form-control” onchange=” if (this.selectedIndex==1 || this.selectedIndex==2){ document.getElementById(‘tampil_tanggal’).style.display = ‘inline’ }else { document.getElementById(‘tampil_tanggal’).style.display = ‘none’ };”>

<option value=”supplier”>Supplier</option>

<option value=”permintaan”>Permintaan</option>

<option value=”pengiriman”>Pengiriman</option>

</select>

<span id=”tampil_tanggal” style=”display:none;”>

<label>Dari Tanggal</label>

<input type=”date” value=”<?php echo date(‘Y-m-d’);?>” name=”dari” class=”form-control”> <label>Sampai Tanggal</label>

<input type=”date” value=”<?php echo date(‘Y-m-d’);?>” name=”sampai” class=”form-control”>

</span>

 

Penjelasan:

onchange=” if (this.selectedIndex==1 || this.selectedIndex==2){ document.getElementById(‘tampil_tanggal’).style.display = ‘inline’ }else { document.getElementById(‘tampil_tanggal’).style.display = ‘none’ };”

Merupakan javascript berfungsi untuk menampilkan dan menyembunyikan form. Pada script tersebut terdapat kondisi jika maka yang di tunjukkan dengan fungsi if. Kemudian terdapat this.selectedIndex==1 dan this.selectedIndex==2 merupakan kondisi jika di pilih pilihan 1 atau 2 maka akan tampilkan form berikutnya.

Ingat, dalam konsep pemgrograman pilihan tersebut perhitungannya di mulai dari 0, maka 0,1,2 dan seterusnya.

<option value=”supplier”>Supplier</option>

<option value=”permintaan”>Permintaan</option>

<option value=”pengiriman”>Pengiriman</option>

Diatas merupakan pilihan dari combobox yang kita maksud dari tadi. Untuk perhitungan urutannya di mulai dari 0.

<span id=”tampil_tanggal” style=”display:none;”>

Script diatas merupakan script html yang secara default menyembunyikan form. Jika fungsi javascript di pilih maka baru akan melakukan perubahan.

 

Demikian tutorial singkat mudah dan semoga membantu dalam membuat program berbasis web yang sedang Kamu kerjakan.

Postingan berikutnya

  1. mode tampilkan dan sembunyikan untuk fungsi pada php

Javascript – Membuat Print Halaman Web New Tab

Javascript - Membuat Print Halaman Web New Tab

Javascript – Membuat Print Halaman Web New Tab

Javascript – Membuat Print Halaman Web New Tab.  Cara bagaimana halaman web (web page) dapat di cetak menggunakan fitur yang ada pada javascript cukuplah mudah. Untuk tutorial kali kamu akan membuat bagaimana sebuah link yang kamu klik akan membuka tab baru atau new tab dan langsung memprint halaman yang terbuka tersebut.

Studi kasus:

Saya menggunakan fitur fungsi javascript ini ketika saya akan mencetak sebuah invoice atau faktur pada sebuah aplikasi penjualan. Pada aplikasi tersebut di tampilkan sebuah data faktur, yang salah satu linknya ada fitur untuk print yang dapat di klik oleh  admin. Data pada tampilan tersebut menggunakan data pada database dan menampilkannya menggunakan php.

Membuat Print Halaman Web New Tab

Untuk membuatnya cukup ikuti langkah singkat ini:

1. Pada tag link atau anchor yang kamu akan buka tab baru dan langsung print silahkan kamu tambahkan tag target=”_blank” tag ini berfungsi untuk membuat atau membua halaman web yang di klik membuka tab baru.
2. Pada halaman web yang di tuju dengan link diatas silahkan tambahkan script javascript berikut:

<script>
 window.onload = window.print;
 </script>

Penjelasan:

Pada script javascript diatas menginstruksikan bahwa halaman ketika mengalami load atau loading maka akan langsung menjalankan printah print menggunakan javascript. Untuk fitur ini browser yang support misalnya google chrome, mozilla firefox, opera dan safari.

Untuk hasil dari perintah ini dapat di lihat dibawah ini:

Hasil Membuat Print Halaman Web New Tab

Hasil Membuat Print Halaman Web New Tab

Untuk teknik manipulasi lainya misalnya memprint halaman web ketika link di klik, Memprint halaman web melalui url di halaman yang sama dengan ukuran window yang dapat kamu tentukan sendiri dan langsung keluar atau close. Demikian semoga tutorial singkat ini bermanfaat.

Javascript – Mendeteksi Broken Image / Gambar

Mendeteksi Broken Image Url

Mendeteksi Broken Image Url

Javascript – Mendeteksi Broken Image / Gambar  – Ini adalah cara yang paling ringan dan tidak membutuhkan resource besar ketika kita ingin mengetahui sebuah link atau url sebuah gambar atau image apakah rusak atau tidak. Di banding dengan php penggunaan javascript lebih ringan di karenakan eksekusi yang dilakukan adalah di browser klien atau browser pengunjung sebuah web. Untuk cara mendeteksi broken image dengan php silahkan di baca. Kalau untuk saya sendiri saya lebih suka menggunakan javascript, karena lebih menghemat resurce yang kita miliki. Coba bayangkan jika banyak url gambar yang akan kita deteksi, maka ini akan memakan resource yang sangat besar bukan. ?, namun jika ini di eksekusi di klien, maka ekskusi bergantuk pada jaringan yang di miliki klien.

Javascript – Mendeteksi Broken Image / Gambar


<img alt="" src="urlgambar.jpg"
<code>onError="this.onerror=null;this.src='/images/noimage.gif';"</code>
/>

Fungsi yang digunakan adalah onError pada javascript. Selanjutnya untuk mengantisipasi gambar atau source image yang broken tersebut dapat digantikan dengan gambar lain yaitu dengan menempatkan source gambar pengganti pada fungsi
this.src

Demikian cara dengan javascript semoga membantu dan dapat digunakan dengan bijak seperti ini 😀

Postingan berikutnya

  1. mendetejsi gambar dengan javasript

Javascript – Membuat Text Muncul Ketika di Ketik dari From

Javascript – Membuat Text Muncul Ketika di Ketik dari From – Ini adalah kumpulan catatan javascript saya yang pernah saya buat. Saya membuat text ini muncul ketika di ketik pada sebuah form. Untuk formnya sendiri bisa beberapa jenis form misalnya input, textarea. Pada kasus ini saya menggunakan input dengan type jenis text.

Untuk script ini membuatuhkan source eksternal dari jquery. Karena pada fungsi tersebut sudah banyak fungsi yang bisa kita panggil untuk mempercantik dan membuat web kita lebih menarik. Dari fungsi tersebutlah kita tinggal memanggil apa saja yang mau kita gunakan.

Membuat Text Muncul Ketika di Ketik dari From

Berikut ini saya bagi menjadi dua script yaitu javascript dan html

Script javascript


<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

<script type="text/javascript">
var replaceValues = {
 'string' : 'text',
 'foo' : 'bar'
}

$('.icustom').keyup(function (event) {
 newText = event.target.value;
 for (var txt in replaceValues) {
 var temp = new RegExp(txt, 'gim');
 newText = newText.replace(temp, replaceValues[txt]);
 }
 $('.custom').text(newText);
});

}

</script>

Script HTMl untuk form input text dan menampilkan ketikan

<input type="text" name="custom" size="45" class="icustom"/><br/>
www.kasitau.com/<i style="color:red;" class="custom">custom</i>

Dan hasilnya seperti di bawah ini

Javascript - Membuat Text Muncul Ketika di Ketik dari From

Javascript – Membuat Text Muncul Ketika di Ketik dari From

Javascript – Input Form Otomatis Setelah Radio Button di Klik

Javascript – Input Form Otomatis Setelah Radio Button di Klik. Sebuah pengaturan dan desain form input agar menjadi lebih simpel dan elegan Perlu sekali penggunaan javascript sebagai tambahan untuk membuat desain lebih atraktif, seperti misalnya pada form yang kita gunakan untuk mengiput sebuah data.

Pada kasus ini saya akan membuat sebuah form yang otomatis muncul ketika pilihan radio button di klik. Cara simpel hanya butuh beberapa baris kode saja, simak tutorialnya berikut ini,

Input Form Otomatis Setelah Radio Button di Klik

Berikut ini fungsi javascript yang akan kita gunakan untuk memunculkan form berikutnya pada sebuah web atau blog.


<script type="text/javascript">
 function yesnoCheck() {
 if (document.getElementById('yesCheck').checked) {
 document.getElementById('ifYes').style.display = 'block';
 }
 else document.getElementById('ifYes').style.display = 'none';

</script>

Menampilkan Form berikutnya


<form method="post" action="" >
 <p><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" checked><strong>Automatic</strong>
 <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"><strong>Custom</strong>
 </p>
 <p><labe><strong> Url:</strong></label><input type="text" name="url" size="45" />
 <span id="ifYes" style="display:none" ><strong> Custom:</strong><input type="text" name="custom" size="45" class="icustom"/><br/>
 <p><input type="submit" name="submit" id="Submit" value="Shorten" /></p>
 <div id="result"></div>
 </form>

Ouput

Sebelum di klik

sebelum klik Javascript - Input Form Otomatis Setelah Radio Button di Klik

sebelum klik Javascript – Input Form Otomatis Setelah Radio Button di Klik

Sesudah di klik

setelah klik Javascript - Input Form Otomatis Setelah Radio Button di Klik

setelah klik Javascript – Input Form Otomatis Setelah Radio Button di Klik

Demikian tutorial singkat javascript muncul otomatis semoga membantu.

Postingan berikutnya

  1. klik otomatis button js