Script Anti Copas Artikel Blog, Web, Wordpress dan Blogspot

Script Anti Copas Artikel Blog, Web, Wordpress dan Blogspot | Sebagai blogger penulis artikel kadang kita kesal melihat tulisan kita di copas (Copy Paste) oleh orang lain di web lain. Untuk mencegah pengunjung web melakukan copy paste kita bisa memakai Javascript untuk mendisable atau membuat pengunjung tidak bisa melakukan seleksi teks menggunakan mouse maupun Ctrl+A sehingga praktis jika pengunjung melakukan klik kanan dengan mouse maka pilihan Copy pun menjadi tidak ada, bahkan ada javascript yang mampu mencegah klik kanan, sehingga melihat source code html pun agak sulit.

Javascript Untuk Mencegah Input Selain Angka Numeric, Mendisable Keypress Karakter Tertentu Pada Halaman Web

Javascript Untuk Mencegah Input Selain Angka Numeric dibutuhkan pada Halaman Web yang memiliki input yang harus diisi angka, misalnya input harga, input jumlah dan sebagainya. Sebenarnya bisa digunakan JQuery, tetapi kali ini penulis mencoba membuat kode program untuk mencegah input selain angka numeric dengan kode program javascript murni. Selain itu coba kita pelajari pula untuk mendisable atau menonaktifkan penginputan karakter tertentu, misalnya dibalik boleh menginput huruf tetapi tidak boleh menginput angka numeric.

Mencegah Input Selain Angka Numeric

Untuk mencegah input selain angka, gunakan script dibawah ini, kegunaannya adalah untuk mencegah penekanan karakter selain karakter nomor 47 hingga 58. Tetapi jangan lupa untuk memperbolehkan karakter nomor 8 yaitu karakter backspace dan karakter nomor 190 yaitu titik dan karakter nomor 189 yaitu minus.

Menambahkan WYSIWYG Editor di Bootstrap Menggunakan Summernote

Menambahkan WYSIWYG Editor di Bootstrap Menggunakan Summernote ini menggunakan template dari startbootstrap.com dan ditambahkan wysiwyg editor dari http://summernote.org.

Pada halaman yang menggunakan bootstrap tambahkan script sebagai betikut untuk memunculkan summernote:

Javascript untuk Mengecek Ukuran File Sebelum Diupload dengan JQuery

Javascript untuk Mengecek Ukuran File Sebelum Diupload dengan JQuery berfungsi untuk mengecek ukuran file yang sudah dipilih pengguna sebelum diupload. Sebenarnya hal ini sudah sangat umum dilakukan dengan script PHP, tetapi kurang efektif karena script PHP hanya mampu mengecek file yang sudah diupload.

Artinya file yang mungkin sangat besar tersebut sudah terlanjur terupload di server baru dicek dan dinyatakan tidak boleh kemudian dihapus. Hal ini tentu saja sangat memboroskan waktu dan bandwith.

Mendapatkan Informasi Web Browser Agent dan Informasi IP Address Client Komputer Menggunakan Javascript dan PHP

Cara Mendapatkan Informasi Web Browser Agent dan Informasi IP Address Client Komputer Menggunakan Javascript dan PHP ini penulis buat secara khusus karena ada teman yang menanyakan hal semacam ini. Sebelumnya penulis pernah bahas tema serupa pada Artikel sebelumnya Mendeteksi Web Browser Agent Apakah Mobile atau Desktop dan Mendapatkan Lokasi Pengunjung Web dengan Javascript dan Menampilkan pada Peta Google Map.

Sedangkan artikel ini dibuat untuk lebih melengkapi cara mencari informasi pengunjung web yaitu berupa apa browser yang digunakan, sistem operasi apa yang dipakai dan IP Address serta zona lokasi (Negara dan Kota) berdasarkan IP Address yang didapatkan itu.

Mendapatkan Lokasi GPS Pengunjung Web dan Menampilkan Lokasi Latitude Longitude dari Web Browser di Google Map

Kadang kita ingin Mendapatkan Lokasi GPS Pengunjung Web dan Menampilkan Lokasi Latitude Longitude dari Web Browser di Google Map. Atau lokasi tempat pengunjung membuka browser web tersebut akan digunakan untuk kepentingan lain juga bisa, misalnya untuk kebutuhan statistik marketing, kebutuhan perusahaan dan sebagainya. Kali ini coba kita dapatkan lokasi GPS pengunjung dari Browser Web yang digunakan oleh pengguna, lebih khusus lagi Web Browser yang sudah mendukung Navigator Geolocation yang merupakan fitur atau fasilitas dari standar HTML 5.

Aplikasi web yang akan dibuat berguna untuk menampilkan lokasi latitude longitude pengunjung web sehingga tampak di peta Google Map. Kode program halaman HTML dan Javascriptnya sebagai berikut, dalam hal ini penulis beri nama google-map-get-location.html :

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar ternyata banyak yang membutuhkan, ini penulis ketahui dari artikel sebelumnya yaitu WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder yang ternyata dibaca oleh cukup banyak pembaca. Kali ini penulis ingin membagi pengetahuan tentang WYSIWYG yang benar-benar open source dan free yaitu Tiny MCE dengan diberi plugin yang juga free yaitu JBImages, sehingga mampunyai fitur untuk meng-upload gambar.

Menampilkan Grafik Pie Chart dengan Google Charts pada Web atau Blog

Menampilkan Grafik Pie Chart dengan Google Charts pada Web atau Blog caranya seperti yang pernah kita bahas pada artikel sebelumnya yaitu Menampilkan Grafik (Bar Chart) dengan Google Charts pada Web atau Blog. Seperti yang telah diterangkan sebelumnya, Google Charts memungkinkan kita membuat Charts dengan Javascript pada Halaman Web atau Blog, tentu saja dengan syarat Web atau Blog tersebut harus ada di Hosting atau komputer yang sedang online.

Kali ini kita coba gunakan Google Charts untuk membuat Grafik Roti (Pie Chart), kita buat pie-chart-google-charts.html dengan isi kode program berikut ini :

Memperpendek Link Web dengan Google URL Shortener http://goo.gl

Memperpendek Link Web dengan Google URL Shortener (http://goo.gl) sangat berguna ketika kita membutuhkan untuk memperpendek panjang URL agar ringkas, atau untuk manfaat lain yaitu agar link webnya sulit dicuri (copy paste).

Bagi anda yang sudah biasa membuat status atau tweet di twitter dengan menyertakan link ke suatu halaman web tentunya sudah sangat familiar dengan fasilitas semacam ini misalnya tiny url dsb.

Kali ini kita coba gunakan layanan untuk memperpendek URL milik google yaitu Google URL Shortener yang ada di http://goo.gl. Caranya sangat mudah, buka http://goo.gl, login dengan account Google anda. Kemudian ketik URL yang hendak diperpendek, kemudian klik Tombol Shorten URL. Hasilnya akan ditampilkan URL baru dengan fungsi sama, yaitu akan redirect ke web yang sama, Link tersebut biasanya mengarah ke http://goo.gl tetapi jika diklik akan diredirect oleh Google ke Web tujuan.

Semoga berguna.

Membuat Grafik (Bar Chart) dengan Google Charts pada Web atau Blog

Menampilkan Grafik (Bar Chart) dengan Google Charts pada Web atau Blog sepertinya akan segera populer. Google Charts memungkinkan kita membuat Charts dengan Javascript pada Halaman Web atau Blog kita, dengan syarat Web atau Blog tersebut harus ada di Hosting atau mesin server yang online. Seperti biasa raksasa software Google selalu rajin merilis layanan software baru berbasis Web yang bisa digunakan secara gratis dan sangat bermanfaat.

Google Charts sendiri masih dalam versi Beta, artinya masih mungkin berkembang lebih bagus dan lebih lengkap lagi. Tetapi tidak ada salahnya coba kita pelajari sedini mungkin perkembangan software agar tidak ketinggalan.

Kali ini kita coba gunakan Google Charts untuk membuat Grafik Batang (Bar Chart), kita buat barchart.html dengan isi kode program berikut ini :

Membuat Google Custom Search pada Web atau Blog

Membuat Google Custom Search pada Web atau Blog sangat penting untuk dilakukan, karena search engine ini cukup akurat untuk mencari suatu keyword khusus untuk mencari dalam suatu web atau suatu blog.

Seperti sudah sering kita pakai Search Artikel milik Blogspot di sebelah kiri atas Blog ini, ternyata hasil pencariannya tidak terlalu akurat, kadang bisa mencari artikel yang dituju, kadang bahkan ketika koneksi agak lambat tidak bisa mencari sama sekali. Solusinya kita sediakan juga Google Custom Search Box di Blog ini.

Caranya seperti ini, buka Google Custom Search Engine. Kemudian login dengan Google Account anda, setelah itu klik New Search Engine. Kemudian masukkan URL Web di input Site to Search, dan pilih bahasa di input Language. Setelah selesai klik Create :

Membuat Aplikasi Web Peta OpenLayers untuk Menampilkan Bing Map

Aplikasi Web Peta OpenLayers untuk Menampilkan Bing Map dari Microsoft. Setelah mempelajari cara Menampilkan Peta YahooMap di OpenLayers dan GoogleMap di OpenLayers. Belum lengkap rasanya jika belum mencoba Peta buatan Microsoft yaitu BingMap untuk ditampilkan di OpenLayers. Karena selain lengkap, peta ini juga tidak kalah canggih dari GoogleMap.

Seperti sebelum-sebelumnya, agar script di bawah ini dapat dijalankan, silakan download dan install OpenLayers, dari sini. Bagi yang belum pernah bisa membaca dahulu dari artikel Mengenal OpenLayers berikut ini.

Buatlah file HTML openlayers-bing-map.html :

Membuat Aplikasi Web Peta OpenLayers untuk Menampilkan Yahoo Map

Aplikasi Web Peta OpenLayers untuk Menampilkan Yahoo Map. Setelah berhasil menampilkan Peta GoogleMap dengan OpenLayers, coba kita pelajari teknik menampilkan Peta Web dari Yahoo ini. Memang tidak sepopuler GoogleMap tetapi cukup berkualitas juga.

Seperti diterangkan sebelumnya, agar script di bawah ini dapat dijalankan, silakan mendownload dan menginstall OpenLayers, dari sini. Bagi yang belum paham bisa membaca dahulu artikel Mengenal OpenLayers berikut ini.

Buatlah file HTML openlayers-yahoo-map.html :

Membuat Web Peta OpenLayers untuk Menampilkan GoogleMap

Kali ini kita buat Aplikasi Web Peta OpenLayers untuk Menampilkan GoogleMap. Sedangkan Web Google Map yang kita gunakan kali ini yang versi terbaru dahulu yaitu GoogleMap v3 Versi Web.

Seperti pernah diterangkan sebelumnya, agar script di bawah ini dapat dijalankan, anda harus mendownload dan menginstall OpenLayers, dari sini. Ada baiknya yang belum paham bisa membaca dahulu artikel Mengenal OpenLayers berikut ini.

Buatlah file HTML Javascript dengan nama googlemap-v3.html :

Mengenal OpenLayers, Peta Web Online yang Gratis dan Open Source

OpenLayers adalah Web Pemetaan Online yang Gratis dan OpenSource. Seperti diterangkan dalam website resminya, OpenLayers adalah library javascript yang digunakan untuk menampilkan data peta di web. Artinya OpenLayers mampu menampilkan sumber peta dari GoogleMap, BingMap, YahooMap dan Server Peta Gratis yang berbasis WMS (World Map Server). OpenLayers tidak membutuhkan dependecies atau ketergantungan dengan Server, artinya jika suatu saat ada Sumber Peta misalnya Bing Map atau Google Map yang berbayar ditutup, maka kita tidak perlu khawatir, OpenLayers mampu diubah agar mengambil sumber peta dari Map Server (Provider Peta) yang lain.

Keuntungan terbesar kita sebagai Programmer atau Developer Web ketika memakai OpenLayers yang bersifat OpenSource dan Free sangat banyak, antara lain :

Memformat Kode Program pada Web dengan PrettyPrint, Highlight Source Code pada Blog Blogspot

Kali ini kita belajar Memformat Kode Program pada Web dengan PrettyPrint, Highlight Source Code pada Blog Blogspot. Seperti halnya di Blog ini yang terus berkembang, misalnya dulu masih acak-akan sekarang lumayan rapi hehe :) Mari kita belajar merapikan penampilan Source Code atau Kode Program yang ada di web tutorial kita.

Pertama kita pelajari cara khusus untuk Blog yang dibuat di Blogger atau Blogspot. Caranya :

1. Pada halaman Administrasi Blogger anda pilih Tata Letak, atau Layout panel di sebelah kiri.

Membuat Image Slider dengan Bootstrap Carousel Slider

Kita lanjutkan bagian keenam dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navbar dengan Bootstrap dan Kelima Membuat Navlist dengan Bootstrap dan Keenam Menampilkan Source Program di Halaman Web dengan Pretty Print Bootstrap.

Kali ini sangat menarik, yaitu Membuat Image Slider dengan Carousel Bootstrap. Ternyata Bootstrap juga mempunyai kemampuan untuk Menampilkan Carousel atau yang biasa disebut Image Slider. Style dari Carousel ini ada yang Tidak Full Screen dan Tidak Mentok di Atas Halaman Web atau ada yang Carousel Full Screen dan Mentok di Atas (Top) Halaman Web.

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file carousel.html berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

Menampilkan Kode Program dengan PrettyPrint Bootstrap Source Code

Kita lanjutkan bagian keenam dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navbar dengan Bootstrap dan Kelima Membuat Navlist dengan Bootstrap

Ternyata Bootstrap Mempunyai Kemampuan Untuk Menampilkan Kode Program dengan Library PrettyPrint. Ini dibutuhkan jika kita ingin menampilkan contoh source code di halaman web sehingga mudah di-Copy-Paste.

Dari file Starter Template bisa dikembangkan sehingga menjadi file code.html berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

Mendesain Navlist dengan Bootstrap, Layout Navigator List Menu

Kita lanjutkan bagian Kelima dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navigation Bar dengan Bootstrap

Kali ini coba kita pelajari Layout Navlist atau Navigation List, yaitu Desain Menu Dropdown di Samping (Sidebar) ala Bootstrap.  .

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file navlist.html berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

Mendesain Layout Navbar dengan Bootstrap Menu Navigation Bar

Kita lanjutkan bagian ketiga dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap

Kali ini coba kita pelajari Layout Navbar atau Navigation Bar, yaitu Desain Menu Dropdown ala Bootstrap. Style dari tabel ini ada yang berwarna hitam dan putih, ada yang full 100% layar dan ada yg tdk full 100%. .

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file navbartopwhite.html berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">