Preload Image with JQuery

Use preload image to check if image is loaded, and if image not yet loaded don't hide spiner until image is loaded.

HTML LOADER

<div id="dvLoading" class="block">
  <img src="ajax-loading.gif" alt="loader" />
</div>


JQUERY

$(window).load(function() {
  $.fn.preload = function() {
    var count = 0,
    total = $(this).length;
    this.each(function(){
      $('<img/>').attr('src', this).load(function() {
         $(this).remove();  // prevent memory leaks as @benweet suggested
         if(++count === total) {$('#dvLoading').fadeOut(1000);}
      }
    }
  }

  // Images List
  $([ 'http://example.com/image1.png',
       'http://example.com/image2.png',
       'http://example.com/image3.png']).preload();
});


SOURCE:

http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded

http://stackoverflow.com/questions/12810878/jquery-load-all-images-inside-div-before-display


 

Javascript Detect IE Browser

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0){
  // Do Something
}



UPDATE FOR IE 11

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
  // Do Something
}



DETECT IE VERSION
 
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0){
   var version = parseInt(ua.substring (msie+5, ua.indexOf(".", msie)))
   if(version <= 9) {
     // Do Something 
   }
}

FYI! doctype html

The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.

http://www.codecademy.com

How to make star pyramid with php

<?php
  $length = 3;
  for($a = 0; $a <= $length; $a++) {
    for($b = $length; $b >= $a; $b--) {
      echo "&nbsp";
    }

    for($c = 0; $c <= $a; $c++) {
      echo "*";
    }

    echo "< br />";
  }
?>

How to send mail with PHP and Use SMTP GMail

source: http://www.otallu.com

This time I want to share about send email using PHP and without Framework,
for send email I'm using SMTP from gmail.

This is the steps for send email using php:

1. Download PHPMailer library on here
2. Save Library in same place with send_email.php
   
   A Simple Example for send_email.php
   
   <?php
   
   //SMTP needs accurate times, and the PHP time zone MUST be set
   //This should be done in your php.ini, but this is how to do it if you don't have access to that
   date_default_timezone_set('Etc/UTC');
   
   require 'PHPMailerAutoload.php';
   
   $mail = new PHPMailer();
   $mail->isSMTP();
   //Enable SMTP debugging
   // 0 = off (for production use)
   // 1 = client messages
   // 2 = client and server messages
   $mail->SMTPDebug = 2;
   $mail->Debugoutput = 'html';
   $mail->Host = 'smtp.gmail.com';
   $mail->Port = 587;
   $mail->SMTPSecure = 'tls';
   $mail->SMTPAuth = true;
   
   // Set to access your Gmail account
   $mail->Username = "youremail@gmail.com";
   $mail->Password = "yourgmailpassword";
   
   $mail->setFrom('user@example.com', 'first last'); //Set who the message is to be sent from
   $mail->addReplyTo('user@example.com', 'first last'); //Set an alternative reply-to address
   $mail->addAddress('email@example.com', 'first last'); //Set who the message is to be sent $mail->Subject = 'PHPMailer GMail SMTP test';
   $mail->Body = 'This is a plain-text message body';
   $mail->addAttachment('images/phpmailer_mini.gif'); //Attach an image file
   
   //send the message, check for errors
   if (!$mail->send()) {
       echo "Mailer Error: " . $mail->ErrorInfo;
   } else {
       echo "Message sent!";
   }
   ?>
3. Save file as send_email.php
4. Call file send_email.php ex: localhost/send_email.php
5. If success it will show "Message sent!" and if failed it will show "Mailer Error: error message"

 
Hope this useful for you guys!

Thanks

- AR

Metadata pada HTML

Metadata adalah sekumpulan data informasi tentang data halaman suatu web.

Untuk tag <meta> pada html tidak akan di tampilkan di halaman suatu web, tetapi itu di gunakan oleh mesin pencari.

Fungsi dari metadata sendiri

1. Memuat informasi tentang halaman web
2. Sebagai Keywords untuk mesin pencari

Meta diletakan didalam tag <head>, meta pada HTML berbeda dengan XHTML, pada HTML tag meta tidak memerlukan penutup tetapi pada XHTML tag meta memerlukan penutup.

ketika kita menggunakan DOCTYPE maka meta tag yang harus ada adalah
HTML 4.01:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5:

<meta charset="UTF-8">


beberapa contoh metadata yang umum digunakan:

Mendefinisikan keywords untuk mesin pencari:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Mendefinisikan deskripsi suatu halaman web:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Mendefinisikan pemilik halaman web:

<meta name="author" content="Hege Refsnes">

Merefresh halaman web setiap 30 detik:

<meta http-equiv="refresh" content="30">

More info : w3school

---

Note:

DO NOT CACHE !!!

Beberapa waktu lalu saya bermasalah dengan cache. Semestinya halaman web memuat image baru, tetapi kenyataanya tidak berubah dan malah menampilkan image lama,ini kemungkinan karena cache image lama tersimpan di browser.

Ada beberapa cara untuk mengatasi ini, yang pertama, hapus cache di browser dengan menekan tombol Ctrl+Shift+Del , atau yang kedua, dengan menggunakan tag meta html:

<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

Kegunaan dan Macam Macam DOCTYPE Pada HTML

DOCTYPE adalah suatu deklerasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut.

DOCTYPE sendiri berguna untuk memberitahu programer, HTML versi berapa yang digunakan dan juga membantu programer untuk dapat menggunakan tag-tag HTML dengan benar.

JENIS - JENIS DOCTYPE :

HTML 5

<!DOCTYPE html>


HTML 4.01 Strict

DTD ini berisi semua elemen HTML dan atributnya, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

DTD ini berisi semua elemen HTML dan atributnya, TERMASUK presentasional dan elemen lama (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

DTD ini sama dengan HTML 4.01 Transitional, tapi memungkinkan penggunaan Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

DTD ini berisi semua elemen HTML dan atributnya, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

DTD ini berisi semua elemen HTML dan atributnya, TERMASUK presentasional dan elemen lama (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

DTD ini sama dengan XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

DTD ini sama dengan XHTML 1.0 Strict, tetapi memungkinkan Kamu untuk menambahkan modul (misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Flash di Rails tidak bekerja ?!

Beberapa waktu lalu saya menemukan bugs di aplikasi rails tentang flash. saya cek, ternyata flash nya menghilang di salah satu contoller!. mengapa bisa begitu? lihat alur nya.

    Controller1 (redirect to Controller2) --> #flash here!! Controller2 (redirect to Controller3)   -->      #no flash!! Controller3        

Saya menggunakan sekitar lebih dari satu redirect dan flash nya terhenti di tengah tengah.

Dari beberapa sumber saya menemukan caranya agar flash tetap terkirim sampai akhir yaitu menambahkan:

flash.keep(:notice) sebelum script redirect di Controller2.

Tambahan!!

ketika kita menggunakan rendering maka tambahkan now pada flash.

ex :    flash.now[:notice] = "This is Notice guys!!!"  

tapi ketika kita menggunakan redirect maka jangan gunakan now!

Baru!

Ketika berpindah ke halaman lain, tetapi notice nya tidak menghilang. maka coba gunakan kondisi :

if flash[:notice]
  flash.keep(:notice)
end

Delete Data di Rails Console

Kali ini saya mau berbagi bagai mana caranya mendelete data di console. kenapa harus di console? kenapa gak langsung di phpmyadmin atau lain sebagainya?.

terkadang kita terlena akan bentuk GUI dari suatu program, alhasil ketika kita main di server dan tidak ada bentuk GUI nya sama sekali, yah mau tidak mau kita harus menggunakan console!

ok yang belum tau caranya masuk ke console di rails bisa lihat di postingan ini 

http://achmad-rifaldi.blogspot.com/2013/08/query-update-on-rails.html

selanjutnya jika sudah masuk ke console

User.find(1).delete #or User.find(1).destroy

nah jika kita ingin mendelete lebih dari satu data kita bisa menggunakan cara ini

user = User.where(:account_id => 1)                                                                                              User.delete user.map { |u| u.id } or User.destroy user.map { |u| u.id }

Sumber :

http://stackoverflow.com/questions/5761377/rails-given-an-array-of-items-how-to-delete-in-the-console

http://stackoverflow.com/questions/7069221/delete-a-record-from-console-ruby-on-rails

Calendar Date Select for Rails

Ada berbagai macam cara untuk menambahkan fasilitas Date Picker pada aplikasi rails kita. Diantaranya kita bisa menggunakan JQuery UI atau pun menambahkan Plugin atau Gem Calendar Date Select.

Untuk kali ini saya akan berbagi bagai mana caranya menambahkan fasilitas Date Picker dengan menggunakan Plugin atau Gem Calendar Date Select.

Pertama!

Install Pluginnya terlebih dahulu

git clone git://github.com/timcharper/calendar_date_select.git vendor/plugins/calendar_date_select && rm -rf vendor/plugins/calendar_date_select/.git

atau jika ingin menggunakan Gem, tambahkan kode berikut ke dalam Gemfile

gem 'calendar_date_select', :git => 'git://github.com/paneq/calendar_date_select.git'

selanjutnya jalankan perintah 'bundle install'

Kedua!

Bagi yang menggunakan Gem jalankan perintah ini

'run rake calendar:install'

Ketiga!

Tambahkan <%= calendar_date_select_includes %>  sesudah  <%= javascript_include_tag :defaults%> di  layout/application.html.erb


Keempat!

Tambahkan <%= f.calendar_date_select "calendar" %> ke dalam view.



Sumber :

https://code.google.com/p/calendardateselect/

http://stackoverflow.com/questions/3979495/using-calendar-date-select-with-rails-3

Will Paginate Condition In Rails 3

will paginate di rails 3 memiliki beberapa perbedaan, jika di rails 2 "paginate" hampir sama dengan "find", tetapi di rails 3 berbeda.

Contoh Script:

conditions = ["condition what!"]
order_by = ["order by what!"]
a = current_user.a

for rails 2:

@A = a.paginate(:page => params[:page], :per_page => @per_page, :conditions => conditions, :order => order_by)

for rails 3:

a = current_user.a
@A = a.find(:all, :conditions => conditions, :order => order_by).paginate(:page => params[:page], :per_page => @per_page)

jika condition atau order tidak dibuat variabel terpisah maka kita bisa menggunakan where atau order sesuai ketentuan di rails 3

Query Update On Rails

Untuk melakukan query update di rails kita tidak perlu repot masuk ke phpmyadmin atau sebagainya cukup lakukan ini :

1. Masuk ke console

• Rails 2 -> ruby script/console
• Rails3 -> rails s

2. Cari user yang akan di update

       user = User.find_by_email("achmadrifaldi64@gmail.com")

3. Lakukan perintah update

      User.update_attribute(:alamat, "Bandung")

Catatan :

update_attribute(:field , "new") -> hanya satu attribute yang di update

update_attributes(:field => "new", :fields => "news") -> attribute yang di update lebih dari satu

TAMBAHAN!

Di Rails3 untuk mengupdate semua data pada field dan table tertentu, kita tidak perlu merubahnya satu persatu,cukup menjalankan perintah berikut:

User .update_all(:status => 'active')