WEB DESAINT

Jumat, 01 Agustus 2014

Format Angka ke dalam Rupiah

Untuk mengubah format angka ke dalam satuan rupiah sangatlah gampang. Di PHP sudah tersedia suatu fungsi yang dapat kita manfaatkan untuk keperluan tersebut. Nama fungsinya adalah number_format(). Fungsi PHP ini akan mengelompokkan angka-angka ke dalam format ribuan.

Format penulisannya adalah sebagai berikut:
number_format(a,b,c,d)
Bisa dilihat pada fungsi diatas terdapat 4 buah parameter.
  1. Parameter "a" adalah angka yang akan diformat.
  2. Parameter "b" adalah jumlah digit angka dibelakang koma desimal.
  3. Parameter "c" adalah karakter pemisah titik desimal.
  4. Parameter "d" adalah karakter pemisah digit ribuan.
Berikut ini contoh implementasi ke dalam bentuk coding sederhana:

Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery

Pada artikel kali ini saya akan mencoba untuk memberikan tutorial tentang bagaimana menampilkan data tanpa harus klik tombol. Misalkan gini ada user yang sedang menggunakan aplikasi penjualan, user tersebut melihat jumlah yang harus  dibayar adalah 30.000  lalu ada diskon 10% sehingga secara otomatis aplikasi tersebut menampilkan total bayarnya (sesudah diskon) 27.000. Untuk Lebih Jelasnya lihat gambar berikut ini.

Untuk melihat demonya klik disini.
Requirement :
- Download Jquery.js
- Download Editor PHP/HTML misalnya Adobe Dreamweaver, Notepad ++, CodeLobster, dll.
Cara Membuatnya :

  1. Ketikkan Kode berikut di PHP/HTML Editor kesayangan anda.
    <html>
    <head>

Script css membuat tabel garisnya tipis

Tambahkan di file css anda :
.tabel {
    border-collapse:collapse;
}
kemudian pilih tabel dan css tabel.

selamat mencoba

Script Memperbesar Image dengan CSS

 Berikut file css nya, untuk memperbesar gambar yang di hasilkan silahkan edit nilai tranformscale :
.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-o-transform:scale(2.5);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Script di atas di simpan dengan file css kemudian lakukan pemanggilan dengan script di bawah ini :

<div class="zoom">url image</div>

dan hasilnya saat mouse di letakkan di image maka image akan membesar otomatis.

Selamat Mencoba

Senin, 04 November 2013

Mudah Mendesain Web dengan Twitter Bootstrap

Bagi sebagian web programmer, mendesain sebuah website adalah hal yang tidak mudah, terutama ketika harus berkutat dengan CSS yang rumit. Jika ditambah lagi dengan kewajiban bahwa tampilan web harus tampak bagus di seluruh browser dan seluruh platform,  maka lengkaplah sudah beban berat seorang web programmer.
Untuk memudahkan proses mendesain web, ada banyak tool yang dapat digunakan. Aplikasi WYSIWYG seperti Dreamweaver dan Kompozer dapat menjadi referensi dalam mendesain website. Namun, kedua software tersebut masih memiliki kekurangan, yaitu sang programmer atau designer masih harus mendesain dari awal, melakukan testing di seluruh browser dan platform dan lain sebagainya.

Twitter Bootstrap