Membuat Newstiker dengan Javascript Pada Rails

November 23, 2009 Andry Sucipto Komentar dimatikan

Nestiker adalah suatu animasi sederhana yang biasanya digunakan oleh banya programer untuk memberikan animasi berupa text yang berganti satu demi satu secara vertikal, biasanya digunakan di News Later Barita, adapun cara pembuatannya sangat mudah :

1. Mempersiapkan code Javascriptnya :

<script type=”text/javascript”>
$(function() {
$(“.newsticker-jcarousellite”).jCarouselLite({
vertical: true,
hoverPause:true,
visible: 1,
auto:500,
speed:2500
});
});
</script>

Download Code Javascript berikutnya jquery-latest.pack dan jcarousellite_1.0.1c4 , masukkan semua javascript yang ada di antara head

2. Pada View kita masukkan code berikut :

<div id=”newsticker-demo”>
<div class=”newsticker-jcarousellite”>
<ul>
<% @articles.each do |article| %>
<li>
<div class=”info”>
<span class=”title”><a href=”/newsbriefs/1″><%=h article.title %></a></span>&nbsp;&nbsp;
<span class=”cat”><a href=”/newsbriefs/1″><%=h article.updated_at %></a></span><br />
<%= snippet(article.content, 30) %>
</div>
</li>
<% end %>
</ul>
<div class=”clear”></div>
</div>
</div>

 

Selesai Selamat Mencoba !!!! Moga aja berhasil

Categories: Javascript, Modul Applikasi Ruby On Rails, Ruby On Rails

Membuat Float Layer dengan Javascript

November 22, 2009 Andry Sucipto Komentar dimatikan

Float Layer adalah suatu tampilan yang mana selalu megikuti layar anda, ketika layar anda di tarik kebawah otomatis akan mengikuti kebawahuntuk membuatnya caranya sangat mundah yang pertama kita membuat javascript dengan kode di bawah ini :

window.onerror = null;
var topMargin = 100;
var slideTime = 1200;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
}
}
function layerSetup() {
floatLyr = new layerObject(‘floatLayer’, pageWidth * .5);
window.setInterval(“main()”, 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById(‘floatLayer’).style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
this.A = this.targetY – this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY – this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
}
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() – this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById(‘floatLayer’).style.top = newY + “px”;
}
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
}
}
//

Atau bisa didownload di sini Setelah itu tambahkan onload=”start()” ke tag bodi seperti di bawah ini

<body onLoad=”start()”>

dan untuk kode HTML nya sebagai berikut :

<div id=”floatLayer” style=”position: absolute; height: 200px; width: 389px; left: 405px; top: 10px;”>

This is a Floating Layer. Replace this content with your own.

</div>

Categories: Javascript

Install Windows XP lewat USB Flash Disk

November 5, 2009 Andry Sucipto Komentar dimatikan

1. Ekstrak kedua file sesuai keinginan Anda dengan menggunakan WinZip atau WinRar (Lebih baik buat Folder baru), sebaiknya File PeToUSB_3.0.0.7.zip dijadikan satu folder bersama File usb_prep8.zip atau sebaliknya.

2. Tancapkan USB flash disk ke salah satu port USB. Ingat-ingat posisi drive-nya. Apakah F:, G:, H:, dan sebagainya.

3. Masukkan CD instalasi Windows XP ke optical drive. Jika komputer menjalankan proses instalasi secara otomatis, batalkan saja dan tutup semua aplikasi yang tengah berjalan.

4. Selanjutnya, buka folder di mana Anda mengekstrak aplikasi modul pembuat instalasi.

5. Jalankan file bernama “usb_prep8.bat” maka di layar monitor akan tampak jendela Command Prompt berisi macam-macam perintah. Jika sudah muncul tulisan “Press any key to continue,” tekan sembarang tombol untuk konfirmasi.

6. Di layar akan muncul jendela PEtoUSB yang meminta Anda memformat USB flash disk Anda. Tak perlu mengubah setting apa pun, langsung klik Start untuk mulai proses format. Jawab konfirmasi sesuai kebutuhan Anda.

7. Jika sudah selesai, tutup jendela PEtoUSB (jangan menutup jendela Command Prompt yang tadi terbuka ketika Anda menjalankan usb_prep8.bat), maka di layar akan muncul opsi-opsi dari 0 hingga 5.

8. Gunakan opsi 1 untuk memilih sumber file instalasi yang nantinya akan disalin ke flash disk. Disini, tentukan di drive mana Anda menyimpan instalasi Windows XP. Pilih saja optical drive di mana sudah ada CD Windows XP di dalamnya, atau pilih folder pilihan Anda jika Anda telah menyalin file instalasi Windows XP ke folder tertentu.

9. Pilih opsi 3 untuk menentukan di mana Anda mencolok flash disk. Kalau flash disk Anda berada di drive F:, maka ketik F dan tekan ENTER. Jika drive G: maka ketik G dan tekan ENTER, begitu seterusnya berlaku untuk drive lain.

10. Selanjutnya pilih opsi 4 untuk mulai proses pembuatan modul instalasi yang nantinya akan disalin ke flash disk secara otomatis. Jawab apa pun konfirmasi yang muncul dengan Y atau YES atau OK atau bentuk persetujuan lain. Selesai! Kini flash disk Anda telah siap digunakan untuk instalasi Windows XP! Silahkan melakukan setting pada BIOS Anda, dan pilih Removeable Disk (atau apa pun nama lainnya) sebagai media pertama yang dijalankan saat booting.

Categories: Lain Lain, Tutorial

Delete semua record dengan checkbox

November 3, 2009 Andry Sucipto Komentar dimatikan

Pada View :

<% @collection.each do |c| %>
<%= check_box_tag ‘myrow[id][]‘, c.id, false %>
<% end %>

Pada Controller :

def delete_all
@a = Model.find(params[:myrow][:id])
@a.each { |t| t.destroy }
end

Langkah Tarakhir pada Routes :

map.resources :controller, :collection => {:delete_all => :get}

Atau cara yang lain seperti di bawah ini :

Pada View :

<% form_for :items, @items, :url => { :action => 'destroy' } do %>
 <% for item in @items %>
 <%= check_box_tag 'item_ids[]', item.id, false %> <%= item.name %>
 <% end %>
<%= submit_tag 'Delete', :name =>'commit', :value => 'Delete',
:confirm => 'Are you sure?' %>
<% end %>

Pada Controller :

def index
 @items = Item.find(:all)

 respond_to do |format|
  format.html # index.html.erb
  format.xml  { render :x ml => @items }
 end
end

def destroy
 i = 0
 arr_item = Array.new
 @items = Item.find(params[:item_ids])
 @items.each do |item|
  item.destroy
  arr_item[i] = item.name
  i += 1
 end
 @item_name = arr_item*', '  

 redirect_to(items_url)
 flash[:notice] = @item_name + ' was successfully deleted.'
end

Semua cara diatas dapat di gunakan, silahkan pilih salah satu yang termudah bagi anda

Categories: Ruby On Rails

Membuat Post dengan Banyak Category dengan Checkboxs pada Rails

November 3, 2009 Andry Sucipto Komentar dimatikan

posting ini kan amenjelaskan gimana seorang programer pemula untuk membuat sebuah post yang diikuti oleh banyak category dengan menggunakan checkbox, langkah langkahnya cukup sederhana

1. kita membuat scaffold Project dan scaffold User atau form form lain

2. pada Model keduanya kita tambahkan relasi :

pada User : has_and_belongs_to_many :projects

Pada Project : has_and_belongs_to_many :users

3, pada Form (NEW dengan EDIT) tambahkan check box nya :

<% for user in User.find(:all) %>
<div>
<%= check_box_tag “project[user_ids][]“, user.id, @project.users.include?(user) %>
<%= user.login %>
</div>
<% end %>

4. buat Tabel projects_users dengan field : project_id dan user_id

class CreateProjectsUsers < ActiveRecord::Migration
def self.up
create_table :projects_users, :id => false, :force => true do |t|
t.integer :project_id
t.integer :user_id
t.timestamps
end
end

def self.down
drop_table :projects_users
end
end

5, pada def update project controller kita tambahkan

params[:project][:user_ids] ||= []

langkah terakhir tinggal rake db:migrate dan jalankan servernya

Categories: Modul Applikasi Ruby On Rails, Ruby On Rails

Membuat No Urut dengan rails menggunakan each

Oktober 28, 2009 Andry Sucipto Komentar dimatikan

pada each kita tambah _with_index menjadi seperti ini :

<% @messages.each_with_index do |message, index| %>

<%=h index + 1 %>

<%  end %>

Categories: Ruby On Rails

Membuat Pesan Error waktu Register pada Rails

Oktober 28, 2009 Andry Sucipto Komentar dimatikan

Pada View

<li class=<%= validate_li(“user”, “login”) %>>
<p><label for=”login”>Login</label><br/>
<%= f.text_field :login %></p>
</li>
<li class=<%= validate_li(“user”, “email”) %>>
<p><label for=”email”>Email</label><br/>
<%= f.text_field :email %></p>
</li>
<li class=<%= validate_li(“user”, “email”) %>>
<p><label for=”password”>Password</label><br/>
<%= f.password_field :password %></p>
</li>
<li class=<%= validate_li(“user”, “password_confirmation”) %>>
<p><label for=”password_confirmation”>Confirm Password</label><br/>
<%= f.password_field :password_confirmation %></p>
</li>
<li class=<%= validate_li(“user”, “user_type_id”) %>>
<p><label for=”user_type”>User Type</label><br/>
<%= f.select :user_type_id, UserType.find(:all).collect {|p| [ p.name, p.id ] }, {:prompt => “- Please Select -”} %>
</li>

Pada Helper Aplication

def validate_li(object, field)
(error_message_on object.to_sym, field) == “” ? “” : “error”
end
def error_message(object)
ret = %{
<li id=”errorLi”>
<h3 id=”errorMsgLbl”>There was a problem with your signup.</h3>
<p id=”errorMsg”>
Errors have been <strong>highlighted</strong> below.
</p>
</li>
}
object && !object.errors.empty? ? ret : “”
end

Langkah Terakhir mengganti error message :

<%= error_messages_for :user %>

menjadi :

<%= error_message(@user)  %>

Categories: Modul Applikasi Ruby On Rails, Ruby On Rails

Install GEM : datanoise-actionwebservice

Oktober 26, 2009 Andry Sucipto Komentar dimatikan

D:\Kerjaan\sms-gateway>gem sources -a http://gems.github.com/
http://gems.github.com/ added to sources

D:\Kerjaan\sms-gateway>gem install datanoise-actionwebservice -v=2.2.2
Successfully installed datanoise-actionwebservice-2.2.2
1 gem installed
Installing ri documentation for datanoise-actionwebservice-2.2.2…
Installing RDoc documentation for datanoise-actionwebservice-2.2.2…

Categories: Installasi GEM Tag:

Susunan Kabinet 2009 – 2014

Oktober 21, 2009 Andry Sucipto Komentar dimatikan

1. Menko Politik, Hukum, dan Keamanan: Marsekal TNI Purn Djoko Suyanto
2. Menko Perekonomian: Hatta Rajasa
3. Menko Kesra: Agung Laksono
4. Menteri Sekretaris Negara: Sudi Silalahi
5. Menteri Dalam Negeri: Gamawan Fauzi
6. Menteri Luar Negeri: Marty Natalegawa
7. Menteri Pertahanan: Purnomo Yusgiantoro
8. Menteri Hukum dan HAM: Patrialis Akbar
9. Menteri Keuangan: Sri Mulyani
10. Menteri Energi dan Sumber Daya Mineral: Darwin Zahedy Saleh
11. Menteri Perindustrian: MS Hidayat
12. Menteri Perdagangan: Mari Elka Pangestu
13. Menteri Pertanian: Suswono
14. Menteri Kehutanan: Zulkifli Hasan
15. Menteri Perhubungan: Freddy Numberi
16. Menteri Kelautan dan Perikanan: Fadel Muhammad
17. Menteri Tenaga Kerja dan Transmigrasi: Muhaimin Iskandar
18. Menteri Pekerjaan Umum: Djoko Kirmanto
19. Menteri Kesehatan: Endang Rahayu Sedyaningsih
20. Menteri Pendidikan Nasional: M Nuh
21. Menteri Sosial: Salim Assegaf Aljufrie
22. Menteri Agama: Suryadharma Ali
23. Menteri Kebudayaan dan Pariwisata: Jero Wacik
24. Menteri Komunikasi dan Informatika: Tifatul Sembiring
25. Menneg Riset dan Teknologi: Suharna Surapranata
26. Menteri Negara Urusan Koperasi dan UKM: Syarifudin Hasan
27. Menneg Lingkungan Hidup: Gusti Moh Hatta
28. Menneg Pemberdayaan Perempuan dan Perlindungan Anak: Linda Agum Gumelar
29. Menneg Pendayagunaan Aparatur Negara dan Reformasi Birokrasi: EE Mangindaan
29. Menneg Pembangunan Daerah Tertinggal: Helmy Faisal Zaini
31. Menneg PPN/Kepala Bappenas: Armida Alisjahbana
32. Menneg BUMN: Mustafa Abubakar
33. Menneg Perumahan Rakyat: Suharso Manoarfa
34. Menneg Pemuda dan Olahraga: Andi Mallarangeng

Categories: Susunan Kabinet

Membaca File text dengan Rails

Oktober 15, 2009 Andry Sucipto Komentar dimatikan

<% File.open(“#{RAILS_ROOT}/public”+”#{@avatar.public_filename}”).each() do |line| %>
<% stringArray = line %>
<%= stringArray %><br/>
<% end %>

Categories: Ruby On Rails