Ahad, Disember 16, 2007

Cara Bagaimana Untuk Membuat Tab Yang Dinamik

contoh hasil :

1. Sediakan imej-imej yang diperlukan...

    contoh :
                
        i. bahagian kiri tab (15px x 31px)
                
        ii. bahagian tengah tab (1px x 31px)
                
        iii. bahagian kanan tab (15px x 31px)

nota : Jika saiz yang lain dari contoh di atas pun boleh juga. Tetapi kod anda juga kena la diubahsuai mengikut saiz imej. Perkara yang paling penting ialah, ketiga-tiga imej tersebut mestilah sama ketinggiannya. Kalau anda tidak tahu bagaimana untuk membuat imej tab, cuba tengok tutorial ini
http://www.technomono.com/blog/create-a-metallic-glass-button/

2. Sediakan satu fail HTML yang mengandungi kod di bawah...

    <html>
        <head>
            <style type="text/css">
                #navigation ul {
                    list-style: none;
                    padding: 0;
                    margin: 0
                }

                #navigation li {
                    float: left;
                    font: 10px/31px "Arial", serif ;
                    margin: 0;
                    list-style: none;
                    display: block;
                }

                #navigation a {
                    color:#333;
                    text-decoration: none;
                }

                #navigation a:hover {
                    text-decoration: none;
                }

                #navigation span.C {
                    background: url(bg.gif) left top repeat;
                    padding-top: 10px;
                    padding-bottom: 9px;
                }

                #navigation a:hover span.C {
                    background: url(bg.gif) left top repeat;
                }

                #navigation span.L {
                    padding-left: 5px;
                    padding-right: 6px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                #navigation a span.L {
                    background: url(left.gif) left top no-repeat;
                }

                #navigation a:hover span.L {
                    background: url(left.gif) left top no-repeat;
                }

                #navigation span.R {
                    padding-left: 5px;
                    padding-right: 6px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                #navigation a span.R {
                    background: url(right.gif) left top no-repeat;
                }

                #navigation a:hover span.R {
                    background: url(right.gif) left top no-repeat;
                }

                #navigation a, #navigation a span.L, #navigation a span.R {
                    float: none;
                }
            </style>
        </head>

        <body>
            <ul id="navigation">
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Profil</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Ruby on Rails</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Javascript</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">PHP</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">CSS</span><span class="R"> </span>
                    </a>
                </li>
            </ul>
        </body>
    </html>

3. Siap.. apa yang anda perlu ialah mengubah kod-kod di atas mengukit kesesuaian penggunaan anda.

oleh [ supie ] pada [ 2:13 PTG ] 0 pandangan pembaca

Jumaat, Disember 14, 2007

Bagaimana Untuk Menukar Perkataan Kepada Barcode dalam Ruby On Rails dan FreeBSD

1. Pasang Aplikasi Gbarcode

i. Pastikan aplikasi Rmagick dan pekej yang bergantung kepadanya telah dipasangkan dalam sistem pengoperasian FreeBSD anda. Caranya, pasangkan aplikasi Rmagick ke dalam sistem mengguakan arahan pkg_add -v ke pautan yang bersesuaian menggunakan aplikasi terminal anda.

     contoh : pkg_add -v ftp://ftp.tw.freebs..../ruby18-rmagick-1.13.0.tbz


ii. Kemudian, pasangkan pekej ruby Rmagick pada Rails anda.

     contoh : gem install rmagick


iii. Seterusnya, pasangkan pekej ruby Gbarcode pada Rails anda.

     contoh : gem install gbarcode



2. Penggunaan Gbarocde

i. Tambahakan pautan berikut di bahagian atas controller anda.

  require "RMagick"
  require "gbarcode"


ii. Tambahkan 3 method berikut dalam controller anda

  def get_barcode_image(x)
       string_to_encode = x
       if string_to_encode.nil?
            string_to_encode = "tiada maklumat diperolehi"
       end
       eps_barcode = get_barcode_eps(string_to_encode)
       return convert_eps_to_png(eps_barcode)
  end

  def get_barcode_eps(string_to_encode)
       bc = Gbarcode.barcode_create(string_to_encode)
       bc.height= 40
       bc.margin=2
       Gbarcode.barcode_encode(bc, Gbarcode::BARCODE_128)
       read_pipe, write_pipe = IO.pipe
       Gbarcode.barcode_print(bc, write_pipe, Gbarcode::BARCODE_OUT_EPS)
       write_pipe.close()
       eps_barcode = read_pipe.read()
       read_pipe.close()
       return eps_barcode
  end

  def convert_eps_to_png(eps_image)
       im = Magick::Image::read_inline(Base64.b64encode(eps_image)).first
       im.format = "PNG"
       read_pipe, write_pipe = IO.pipe
       im.write(write_pipe)
       write_pipe.close()
       png_image= read_pipe.read()
       read_pipe.close()
       return png_image
  end



iii. Contoh penggunaan.

  def send_barcode
       data = params[:string]
       @image_data = get_barcode_image(data)
       send_data(@image_data, :type => 'image/png', :disposition => 'inline')
  end

Nota : send_barcode merupakan nama method yang anda sendiri perlukan dan params[:string] merupakan parameter yang mengandungi perkataan yang ingin ditukar kepada barcode.


oleh [ supie ] pada [ 8:08 PTG ] 0 pandangan pembaca