Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Senin, 05 Desember 2016

How To Run PHP Code in HTML Page

1). Buka xampp\apache\conf\extra\httpd-xampp.conf.
2). Cari
<IfModule php5_module>
    **<FilesMatch "\.php$">**
        SetHandler application/x-httpd-php
    </FilesMatch>
    <FilesMatch "\.phps$">
        SetHandler application/x-httpd-php-source
    </FilesMatch>

    PHPINIDir "C:/xampp/php"
</IfModule>
2). Ubah Jadi :
<IfModule php5_module>
    **<FilesMatch "\.(php|html)$">**
        SetHandler application/x-httpd-php
    </FilesMatch>
    <FilesMatch "\.phps$">
        SetHandler application/x-httpd-php-source
    </FilesMatch>

    PHPINIDir "C:/xampp/php"
</IfModule>

Rabu, 23 November 2016

Button Refresh Page On Click

Source Code :
1). <input type="button" value="Reload Page" onClick="reload">
2). <input type="button" value="Refresh Page" onClick="refresh">
3). <input type="button" value="Refresh Page" onClick="window.location.reload()">
4). <input type="button" value="Refresh Page" onClick="history.go(0)">
5). <input type="button" value="Refresh Page" onClick="window.location.href=window.location.href">    

Senin, 21 November 2016

WEB SERVER SIEMENS

Materi web server siemens:
https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages

Minggu, 20 November 2016

Tutorial pebuatan npwp online

Artikel ini merupakan perbaikan dari artikel saya sebelumnya yaitu Cara Membuat NPWP Secara Online Update 2015. Secara mendasar tidak ada yang berubah dari cara membuat NPWP Online pada pemaparan saya di artikel sebelumnya, yang berubah hanya pada tampilan dan beberapa ketentuan baru pada tampilan baru ini.
Untuk registrasi NPWP Online ini ada 3 step umum, yaitu
  • Pendaftaran Akun
  • Pengisian Formulir
  • Penyampaian Formulir
Sebelum Anda memulai membaca tutorial ini, silahkan siapkan email Anda yg masih bisa digunakan dan 1 file scan KTP Anda. Jika belum ada, silahkan Anda siapkan terlebih dahulu. Ok, kita mulai!
{Catatan} Pendaftaran NPWP Online untuk saat ini hanya untuk NPWP Orang Pribadi, sementara NPWP Badan harus melalui Kantor Pajak langsung.

Pendaftaran Akun

Untuk registrasi online, silahkan buka website ini https://ereg.pajak.go.id. Kemudian klik daftar untuk mendaftarkan akun baru.
Berikut step-step pendaftaran akun baru

Step 1: Klik daftar
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Step 2: Masukkan email Anda
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Step 3: Cek email, dan klik link yang disediakan
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com


Step 4: Isi data pendaftaran akun Anda

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Step 5: Cek email lagi, kemudian klik link yang disediakan untuk Aktivasi


Ucapan selamat yang terakhir
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Pengisian Formulir

Untuk mengisi formulir pendaftaran, silahkan Anda log in terlebih dahulu menggunakan akun yang baru saja Anda buat
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

1. Kategori Wajib Pajak

Isi sesuai dengan contoh gambar di bawah ini

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Perlu Anda tahu!
Secara aturan perpajakan, seorang istri tidak wajib memiliki NPWP, karena beban perpajakannya dibebankan kepada suami. Seorang wanita kawin hanya boleh mendaftar NPWP jika sudah bercerai atau ada perjanjian pisah harta. Jika masih dalam ikatan perkawinan, NPWP yang dipakai adalah NPWP suami. Namun jika dari perusahaan atau kantor meminta NPWP atas nama Anda (wanita kawin), silahkan konsultasikan ke kantor pajak terdekat sebelum mendaftar online.

2. Identitas

Isi seperti contoh pada gambar berikut.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

3. Penghasilan

Untuk menu penghasilan, Anda akan disuguhkan 4 pilihan jenis pekerjaan yaitu
Pekerjaan dalam hubungan kerja
Maksudnya adalah, Anda yg bekerja sebagai pegawai atau karyawan, entah itu swasta, PNS, BUMN, atau jabatan lainnya.
Kegiatan Usaha
Maksudnya adalah, Anda yg memiliki usaha sendiri seperti usaha warung makan, perdagangan sembako, warnet, dll.
Pekerjaan Bebas
Maksudnya adalah, Anda yg memiliki keahlian khusus seperti dokter atau notaris.
Lainnya
Maksudnya adalah, Anda yg memiliki pekerjaan selain dari 3 hal di atas, contohnya adalah Anda yg bekerja secara freelance.

Contoh 1
Karyawan atau Pegawai
Contoh 2
Anda yang memiliki Usaha Sendiri
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Contoh 3
Anda yang memiliki Keahlian Tertentu
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

4. Alamat Tempat Tinggal

Yang dimaksud Alamat Tempat Tinggal adalah domisili tempat Anda tinggal saat ini, yang seharusnya belum tentu sama dengan KTP Anda. Pada artikel sebelumnya, saya menyarankan untuk mengisi sesuai dengan keadaan yang ada yaitu walaupun KTP Anda Jakarta namun karena Anda tinggal di Luwuk Sulawesi Tengah, maka tetap Anda isi Luwuk, dan secara aturan hal ini diperbolehkan. Namun kenyataan di lapangan berbeda, ada beberapa kantor pajak yang memiliki kebijakan untuk mengisi kolom tempat tinggal sesuai dengan data KTP. Jadi, untuk itu saya menyarankan sebaiknya Anda isi saja kolom tempat tinggal dengan data KTP.
Isi semua kolom, namun jika tidak ada boleh dikosongi. Untuk yang tidak memiliki nama jalan bisa diisi nama Dusun/Desa/Kelurahan. 
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Klik kode Wilayah Akan muncul menu seperti ini

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

5. Alamat Domisili (KTP)

Di menu ini Anda tinggal klik centang seperti dalam gambar.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

6. Alamat Usaha

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com


7. Tanggungan dan Gaji

Tanggungan maksimal adalah 3. Jadi jika Anda memiliki 4 anak, tetap diisi maksimal 3.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

8. Persyaratan

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.comPenjelasan gambar
1. Pilih metode pengiriman berkas. Bisa dengan unggah/upload, bisa juga kirim manual via pos atau jne.
2. Jika Anda pilih metode uanggah, maka silahkan unggah scan KTP pada tombol upload.

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.comPenjelasan gambar
1. Klik 2 centang Benar dan Lengkap
2. Klik Finish

Penyampaian Formulir

1. Minta Token

Setelah Anda klik Finish pada menu formulir Pendaftaran NPWP Online di atas, maka secara otomatis Anda akan diarahkan ke menu dashboard. Setelah itu silahkan klik tombol "minta token" seperti gambar berikut:
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Setelah muncul notifikasi seperti ini, silahkan cek email Anda!
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Cek email, kemudian buka email yg dikirim ke tempat Anda. Silahkan Anda copy (salin) kode yang diberikan, untuk proses selanjutnya.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com


2. Kirim Permohonan

Setelah Anda copy kode dari email Anda, silahkan kembali ke halaman dashboard, kemudian klik tombol "kirim permohonan" seperti gambar berikut:
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Setelah Anda klik, maka akan muncul tampilan berikut, dan masukkan kode yang sudah Anda copy dari email. Kemudian klik kirim.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com

Jika ada notifikasi seperti ini, maka pendaftaran Anda sudah masuk ke kantor pajak yang bersangkutan.
Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com


3. Selesaiakan Secepatnya!!!

Cara Membuat NPWP Secara Online Update 2016 - PajakBro.com
Selesai melakukan registrasi online, maka permohonan Anda akan diproses dalam waktu 14 hari kerja. Agar permohonan Anda segera terproses, silahkan telepon Kantor Pajak yang bersangkutan 1 jam setelah Anda selesai melakukan registrasi online. Dengan cara ini biasanya permohonan Anda akan segera terproses hari itu juga, dan untuk kartu NPWP akan dikirim ke Alamat sesuai dengan tempat tinggal Anda.
Jika Anda masih belum paham dengan proses pendaftaran NPWP Online ini, silahkan tanyakan pada kolom komentar di bawah. Dan pertanyaan terkait dengan koneksi yang bermasalah, halaman yang tidak bisa dibuka, capcha tidak muncul, dll adalah hal diluar dari topik dalam Artikel ini.

Sabtu, 15 Oktober 2016

JQuery UI Dialog digunakan untuk menangani hal-hal yang berhubungan dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena tidak mungkin jika sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak dialog menjadi salah satu cara yang bisa digunakan untuk berkomunikasi.

Dasar Penggunaan

Buat sebuah elemen divisi sembarang, kemudian isi elemen tersebut dengan sesuatu. Seleksi elemen tersebut dengan JQuery, kemudian terapkan metode .dialog():

HTML

<div id="dialog">
    Konten di sini...
</div>

JQuery UI

$('#dialog').dialog();

Konfigurasi JQuery UI Dialog

OpsiNilaiDeskripsi
title"Judul Dialog"Menentukan judul kotak dialog.
autoOpentrueJika bernilai true, maka kotak dialog akan tampil pada saat halaman pertama kali diakses. Jika bernilai false, kotak dialog tidak akan tampil saat halaman diakses sampai sebuah pemicu memerintahkan kotak dialog tersebut untuk tampil. Pemicu biasanya berupa tombol atau suatu aksi (default: true)
false
width100, 200, 300, …Menentukan lebar kotak dialog (default: 300)
height100, 200, 300, …Menentukan tinggi kotak dialog (default: "auto")
maxWidth100, 200, 300, …Menentukan lebar maksimal kotak dialog (default: false)
maxHeight100, 200, 300, …Menentukan tinggi maksimal kotak dialog (default: false)
minWidth100, 200, 300, …Menentukan lebar minimal kotak dialog (default: 150)
minHeight100, 200, 300, …Menentukan tinggi minimal kotak dialog (default: 150)
show"fade", "slide", ... (efek JQuery UI)Menentukan efek khusus saat kotak dialog tampil (default: null)
hide"fade", "slide", ... (efek JQuery UI)Menentukan efek khusus saat kotak dialog ditutup (default: null)
closeText"close", "tutup", ...Menentukan teks pada tombol penutup kotak dialog di sebelah kanan atas. Secara umum tidak terlihat karena opsi ini memang tidak terlalu penting. Bahkan, dalam tema JQuery UI, teks ini juga tidak akan ditampilkan:

.ui-dialog-titlebar-close span {display:none}

(default: "close")
modaltruePilihan untuk menampilkan tabir transparan saat kotak dialog muncul. (default: false)
false
draggabletruePilihan untuk menentukan apakah kotak dialog dapat diseret (drag) atau tidak. (default: true)
false
resizabletruePilihan untuk menentukan apakah kotak dialog dapat diubah ukurannya atau tidak. (default: true)
false
buttons{
  "Tombol1": function() {},
  "Tombol2": function() {},
  "Tombol3": function() {}
}
Menambahkan tombol di dalam kotak dialog. Bagian ini biasanya yang sedikit rumit, karena selain menampilkan tombol, Anda juga harus bisa membuat tombol tersebut berfungsi sehingga kotak dialog bisa hidup.

Contoh Penerapan

autoOpen:false

Menentukan opsi autoOpen:false akan membuat kotak dialog tidak muncul pada saat pertama kali halaman diakses dan hanya akan muncul jika diperintah.
Kita buat sebuah elemen divisi sebagai kotak dialog dan sebuah tombol sebagai pemicunya:

HTML

<div id="dialog">
    Konten di sini...
</div>
<button id="open">Buka Dialog</button>

JQuery UI

$('#dialog').dialog({
    autoOpen: false
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});
.dialog("open") dan .dialog("close") adalah metode yang digunakan untuk menampilkan dan menyembunyikan kotak dialog. Selain menggunakan opsi autoOpen:false, menghilangkan kotak dialog juga bisa dilakukan dengan cara yang lebih sederhana yaitu dengan CSS atau dengan fungsi .hide():
#dialog {display:none}
$('#dialog').hide();

title:"Kotak Dialog", width:250, height:200

Menambahkan judul “Kotak Dialog” dan menentukan lebar kotak dialog sebesar 250 piksel dan tinggi kotak dialog sebesar 200 piksel:
$('#dialog').dialog({
    title: "Kotak Dialog",
    width: 250,
    height: 200
});

show:"blind", hide:"puff"

Menciptakan efek blind pada saat kotak dialog ditampilkan dan efek puff pada saat kotak dialog ditutup:

HTML

<div id="dialog" style="display:none;">
    Konten di sini...
</div>
<button id='open'>Buka Dialog</button>

JQuery UI

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog({
        title: "Kotak Dialog",
        show: "blind",
        hide: "puff"
    });
});

modal:true

Menentukan opsi modal:true akan menciptakan tabir di belakang kotak dialog saat kotak dialog ditampilkan:
$('#dialog').dialog({
    title: "Kotak Dialog",
    modal: true
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});

draggable:false, resizable:false

Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog:
$('#dialog').dialog({
    title: "Kotak Dialog",
    draggable: false,
    resizable: false
});
JQuery UI Dialog - Disable Resize & Draggable Features
draggable:true, resizable:true

Menghidupkan Kotak Dialog

Tombol dalam kotak dialog dengan kemampuan untuk menjalankan perintah akan menghidupkan kotak dialog dan tidak hanya sekedar berakhir sebagai kotak peringatan. Anda bisa menciptakan kotak dialog yang dapat memerintahkan elemen lain untuk melakukan sesuatu.
Pada dasarnya, opsi buttons dapat dituliskan seperti ini:
buttons: {
    "OK": function() {
        // Fungsi yang akan bekerja jika
        // tombol `OK` diklik dibuat di sini...
    },
    "Cancel": function() {
        // Fungsi yang akan bekerja jika
        // tombol `Cancel` diklik dibuat di sini...
    }
}
Sebagai contoh, kita akan membuat dua buah tombol dalam kotak dialog untuk mengendalikan elemen yang berada di luar kotak dialog:

HTML

<div id="dialog"></div>
<div id="kotak">Kendalikan Saya!</div>

CSS

#kotak {
  width:170px;
  height:200px;
  background:#4AB847;
  border:2px solid #369834;
  padding:10px;
  font-size:16px;
  font-weight:bold;
  color:white;
  cursor:pointer;
}

JQuery UI

$('#dialog').dialog({
    title: "Tombol dalam Dialog",
    autoOpen: false,
    buttons: {
        "SlideUp": function() {
            $('#kotak').slideUp(1000);
        },
        "SlideDown": function() {
            $('#kotak').slideDown(1000);
        }
    }
});

// Tampilkan kotak dialog saat `#kotak` didekati pointer
$('#kotak').mouseenter(function() {
    $('#dialog').dialog("open");
});

Modal Konfirmasi

Sebenarnya cara kerjanya sangat sederhana. Saat sebuah tombol diklik, itu akan memicu sebuah fungsi untuk menampilkan kotak konfirmasi. Salah satu tombol di dalam kotak konfirmasi merupakan perintah sebenarnya dari tombol yang diklik tadi. Sedangkan tombol yang Anda kira sebagai pemicu utama untuk menjalankan perintah sebenarnya hanyalah tombol untuk menampilkan kotak dialog konfirmasi:
Modal Konfirmasi JQuery UI Dialog
Modal konfirmasi dengan JQuery UI

HTML

<div class="separator">
    <img class="item" alt="" src="my-image.jpg">
    <button id="delete">Hapus Gambar!</button>
</div>

<div id="confirm-box">
    <span class="ui-icon ui-icon-alert" style="float:left;margin:0 10px 50px 0;"></span>Apakah Anda yakin akan menghapus gambar ini? Hal ini tidak bisa dibatalkan dan gambar ini akan terhapus selamanya.
</div>

CSS

.separator {
  position:relative;
  float:left;
}

.separator button {
  position:absolute;
  top:10px;
  left:10px;
}

JQuery UI

$('#confirm-box').dialog({
    modal: true,
    autoOpen: false,
    title: "Konfirmasi",
    buttons: {
        "Ya": function() {
            $('img.item').parent().hide("explode", {
                pieces: 36
            }, 1000);
            $(this).dialog("close");
        },
        "Batal": function() {
            $(this).dialog("close");
        }
    }
});

// Tampilkan kotak dialog konfirmasi saat tombol hapus diklik
$('#delete').button({
    icons: {
        primary: "ui-icon-trash"
    }
}).click(function() {
    $('#confirm-box').dialog("open");
});

Cara menghilangkan tombol close pada dialog jquery ui

Menghilangkan (Disable) Tombol “Close” pada Dialog Jquery-ui

Adakalanya kita ingin menghilangkan tombol “CLOSE” bawaan Dialog jquery-ui agar user mengklik tombol Close atau OK yang kita buat dengan tujuan untuk memanggil suatu fungsi. Misal fungsi untuk logout atau lainnya.
Penampakan yang standar seperti berikut :

misal kita menggunakan script seperti ini :
$(document).ready(function(){
  $('#alert').dialog({ 
   autoOpen: false, 
   width: 300, 
   modal: true, 
   title: 'Session Expired',
   buttons: {
     'OK' : function() {
       logout();
       $(this).dialog('close');
      }
    }
   });
});
untuk menghilangkan tombol  ”CLOSE”-nya tambahkan baris script berikut :
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
sehinggan script menjadi berikut :
$(document).ready(function(){
  $('#alert').dialog({ 
   open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
   autoOpen: false, 
   width: 300, 
   modal: true, 
   title: 'Session Expired',
   buttons: {
     'OK' : function() {
       logout();
       $(this).dialog('close');
      }
    }
   });
});
sehingga penampakan seperti berikut :
Demikian, Semoga bermanfaat…