Tentang Halaman Responsive (Responsive Web Design)

 

Ini adalah tentang client-side. Karena perkembangan teknologi hardware sangat cepat, terutama untuk kelas tablet yang memiliki layar kecil, maka otomatis teknologi web pun mau tidak mau harus mengikuti agar memiliki tampilan ramah hardware. Karena layar tablet cenderung kecil, terlebih untuk beberapa jenis smartphone, maka ditemukan beberapa cara untuk melayani seluruh hardware tersebut, agar tatkala layar besar dia bisa tampil maksimal, dan saat layar kecil dia pun bisa tampil optimal. Cara yang telah dikembangkan antara lain:

  1. Memanfaatkan pengenalan user-agent client dari sisi server. Dalam PHP dikenal adanya $_SERVER[‘HTTP_USER_AGENT’] untuk menangkap dengan apakah web tersebut dibuka. Dengan demikian akan dapat dikenali jika dibuka dari mobile phone akan diberikan tampilan mini, dan ketika dibuka dari komputer akan diberikan tampilan lebar. Kelemahannya adalah, beberapa gadget tidak dikenali sebagai smartphone. Disamping itu, kerja web layouter akan menjadi ganda, membuat tampilan desktop dan menentukan tampilan mobile. Belum lagi jika berhadapan dengan netbook, komputer namun dengan layar kecil. Tampilan juga tidak optimal.
  2. Responsive Web Design. Yaitu melakukan optimalisasi CSS dan Javascript yang bekerja di sisi client, yang mana CSS versi terbaru juga telah dapat mengenali jenis perangkatnya. Namun tanpa mengenali jenis perangkatnya, CSS terbaru telah dapat dirancang untuk disesuaikan dengan lebar layar bagaimanapun bentuknya.

Dengan RWD (Responsive Web Design) tampilan akan lebih fleksibel, fluid dan segalanya akan didasarkan pada grid. Jika pada non-responsive web design lebar akan tergantung pada pixel, maka pada RWD tidak lagi, semua akan disesuaikan dengan persentase lebar, termasuk gambar dan elemen-elemen HTML lainnya.

RWD juga memanfaatkan sepenuhnya fungsi @media sebagai pelacak browser dan lebar browser. Sehingga dengan lebar berapapun browser kita, tidak akan muncul scroll kiri dan kanan. Penggunaan media query ini antara lain seperti berikut

 

#content ul li a {
  color: #900;
  width:100%;
  display: block;
}

@media all and (min-width: 1001px) {
  #content ul li a:after {
    content: "lebar";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #content ul li a:before {
    content: "Sedang";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) {  
    #content ul li a:before {
    content: "Kecil";
    font-style: italic;
    color: #666;
  }

 

Masukkan kode tersebut ke dalam kode CSS. Saat browser diperkecil, maka akan muncul kata SEDANG dan selanjutnya SEMPIT. Dengan memanfaatkan media query ini maka ukuran layout juga dapat disesuaikan dengan lebar browser yang ada. Cara mengetest cukup mudah. Perkecil saja web browser kita, apakah muncul perubahan tulisan?

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan memori komputer.

webchat

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem chat berbasis web.

Di sini saya merancang menggunakan tiga (3) file script server utama yaitu :

  • index.php
  • login.php
  • logout.php

Script Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script sisi-client (diletakkan di direktori js) yang digunakan adalah:

  • library jquery
  • chat.js

Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya antara lain:

  • database.php (penghubung dengan database)
  • datetime.php (pengambil value waktu terakhir chat)
  • postchat.php (pengirim kalimat chat)
  • getchat.php (pengambil kalimat chat secara real-time)
  • chatlist.php (pengambil chat yang sudah ada sebelumnya)
  • chatuserlist.php (pengambil data user yang aktif)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.
Continue reading “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

[Tips] Beda Operator = dan =& dalam PHP

Seringkali dalam sebuah kode akan kita jumpai kode seperti ini :

.
$variable =& filter($string);

Atau

$val =& $ret;

Sebenarnya apa bedanya “=&” dengan tanda “=” biasa?

Tanda “=” dapat dikombinasikan dengan beberapa tanda lain sehingga membentuk operator baru. Antara lain adalah:

  • = berarti memasukkan suatu nilai, dari operand sebelah kanan ke sebelah kiri. Sebagai contoh adalah
    
    $a = 1;
    
    

    Artinya memasukkan nilai 1 terhadap variabel $a.

  • == berari adalah memberikan suatu perbandingan. Jika sebelah kiri sama dengan sebelah kanan. Misal:
    if( $a==1 ){
    echo $a;
    }else{
    echo "not 1";
    }
    

    Tanda perbandingan juga akan dapat digunakan dengan kombinasi = dan < atau >. =< artinya bahwa sebelah kiri kurang dari atau sama dengan. Sedangkan => adalah jika tanda sebelah kiri lebih dari atau sama dengan kanan.

    Contoh lain :

    $i = 1;
    while( $i<=100 ){
    echo $i;
    $i++;
    }
    
    
  • =. Artinya adalah memasukkan value string lanjutan pada variable yang ada sebelumnya. Misal:
    $a = "Satu ";
    $a =. "Dua ";
    $a =. "Tiga ";
    echo $a;
    

    Akan menghasilkan : Satu Dua Tiga

  • =& Artinya adalah memasukkan sebuah value yang isinya akan berubah sesuai dengan isi referensi variabel sebelumnya. Tentu hal ini akan mudah dijelaskan dengan contoh berikut ini, misal akan kita coba memasukkan isi dari variable $a sebagai value variable $b
    $a = "satu
    "; $b = $a; echo $a; echo $b;

    hasilnya adalah

    satu
    satu

    apa jadinya jika isi variable $a kemudian kita ubah:

    $a = "satu
    "; $b = $a; $a = "dua"; echo $a; echo $b;

    Ternyata isi $a akan berubah menjadi "dua" dan isi $b tetap "satu". Bagaimanakah agar isi B juga berubah ketika A diubah? Yaitu dengan memberikan tanda =& pada saat memasukkan value $a terhadap $b.

    $a = "satu
    "; $b =& $a; $a = "dua"; echo $a; echo $b;

    Hasilnya adalah $b akan tetap sama meski $a berubah

  • &= adalah merupakan kependekan dari sebuah proses operasi bitwise-operator and yang akan sangat panjang dijelaskan disini karena melibatkan Biner Digit.
    $a &= $b;
    

    adalah singkatan dari proses

    $a = $a & $b;
    
  • === adalah hampir sama dengan ==, namun memiliki syarat bahwa sisi kiri operator harus sama tipe datanya dengan sisi kanan
    
    

    Akan berbeda hasil dengan

    
    

    karena pada contoh kedua angka tiga diapit tanda kutip menunjukkan string, sedang contoh pertama adalah numerik

Nah kira-kira sekian dulu, terimakasih yang sudah mengirimkan pertanyaan untuk inspirasi posting ini. 🙂 Semoga bermanfaat

[Contoh] Cara Membuat Grafik Dasar Web Dengan JQuery HighChart

Jika posting lalu telah dikenalkan dasar pembuatan Grafik dengan menggunakan JQuery JQPlot, maka sekarang dikenalkan dengan competitor JQuery Graphing Web juga. Tools berbasis JQuery itu adalah : HighChart. HighChart ini sama saja sebenarnya dengan JQPlot. Hanya saja menurut saya, HighChart ini lebih enak dalam dasar penulisan notasi data yang perlu dituliskan. JQPlot memiliki notasi penulisan data seri yang akan berpotensi lebih bertele (ribet) daripada HighChart.

Contoh adalah jika kita tuliskan pada JQPlot seperti demikian:

$.jqplot('spacegrafik',  [[[1, 1],[3,2],[5,1],[7,2],[9,1],[11,2]]]);

dan pada HighChart adalah:


xAxis: {
                categories: [1,3,5,7,9,11]
},


.
.
.
.

series: [{
                name: 'Nama Data',
                data: [1,2,1,2,1,2]
            },

Sedangkan biasanya data dari PHP akan berupa array dari data sejenis. Contoh adalah :


$datax = mysql_fetch_array( $query_x ); //berupa array data sejenis

$datay = mysql_fetch_array( $query_y ); //berupa array data sejenis

Namun tidak menutup kemungkinan bahwa data yang tersedia akan lebih nyaman menggunakan JQPlot. Pemilihan Tools akhirnya tergantung pada selera dan kebutuhan. Pembuatan grafik JPGraph pun akan memiliki kelebihan sendiri. Antara lain jika penggunaan grafik sekaligus akan dibentuk Gambar JPEG/PNG. Meskipun Highchart juga dapat membentuk JPG, namun terdapat satu keunggulan JPGraph dalam masalah pembuatan image.

Penggunaan Highchart

Source HighChart dapat diambil di http://www.highcharts.com/ demo dan contoh serta docs terletak lengkap disana. Extract Highchart tersebut dalam satu folder tertentu. Dalam contoh di sini digunakan Highchart pada https://blogit.bimosaurus.com/demo/highchart/

Selanjutnya untuk dasar penggunaan Grafik Line, akan digunakan seperti berikut langkahnya

  • Include script JQuery
  • Membuat script dengan diarahkannya grafik pada elemen yang dikehendaki
  • Melakukan penyisipan script Highchart
  • Menentukan letak elemen tujuan

Kira-kira akan seperti berikut ini script untuk membuat baris:







Kira-kira grafik yang akan dibentuk adalah seperti demikian.

Nah, selamat mencoba babak pertama JQPlot VS HighChart ini.. Selanjutnya akan kita buat sebuah contoh pembuatan grafik dengan JQPlot dan Highchart yang datanya diambil dari dalam database

Selamat Mencoba..

[Tips] Menambahkan Font dalam Proses Pembuatan Web

Font, dalam dunia IT ternyata menjadi sangat penting. Pemilihan font atau jenis huruf, dipandang dapat mempengaruhi pembaca, dan dapat menunjukkan karakter pemilik font. Alangkah baiknya jika sebuah perusahaan memiliki font sendiri, dengan demikian karakter dari perusahaan atau komunitas dan lain sebagainya, dapat dibaca dari corak font yang digunakannya.

Pembuatan proposal, laporan dan lain-lain, ternyata membutuhkan perhatian juga pada Font. Beberapa teman dari kalangan Institut seni kadang malah menelaah tentang font tersebut kadang memang justru bisa berpengaruh pada kelelahan mata, pada sikap dan lain sebagainya.

Dalam dunia web, dalam web profil misalnya, Font akan menjadi penting bagi pembentukan image karakter perusahaan tersebut. Sayangnya, font yang ada dalam dunia web ini secara standard cukup terbatas. Biasanya sekitar Sans Serif, Tahoma, Arial, Verdana, Helvetica, Times, Trebuchet MS dan lain-lain.

Kadang boleh jadi kita akan menambahkan font seperti ini :

Selamat Datang

namun sayangnya font yang digunakan terbatas. Maka kita bisa menentukan sendiri font tersebut. Bagaimana caranya?

  1. Carilah font yang anda suka di internet, dalam bentuk .ttf, misal saya mengambil dari http://www.fontspace.com/category/old%20english, download dan extractlah
  2. Simpanlah dalam direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font
  3. Bukalah CSS anda, dan masukkan kode seperti berikut dibawah
    @font-face {    font-family: 'NamaFontTerserah';    src: url('fonts/namafilefont.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
  4. Anda dapat meload font tersebut baik dalam elemen langsung html seperti :
    INI MENCOBA

    atau

    INI MENCOBA

    dengan isi CSS

    #fontcoba{
    font-family:NamaFontTerserah;
    }
    

 

Sebagai contoh, saya dari situs http://www.fontspace.com/category/old%20english font-font berikut :

  • Salterio Shadow
  • Cloister Black
  • KingThings Spike
  • KingThings Spikeless
  • Faith Collapsing

Saya edit css saya dengan menambahkan:

@font-face {    font-family: 'SalterioShadow';    src: url('fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'CloisterBlack';    src: url('fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.

[Contoh] Menyiasati Paging dengan JQuery JCarousel

Paging adalah cara memisahkan banyaknya data dalam halaman-halaman tertentu dengan satu halaman berisi sejumlah data. Paging sering menjadi masalah tersendiri bagi para developer pemula. Dalam beberapa posting lalu, kita telah mempelajari Simple Advanced Paging PHP yaitu di posting https://blogit.bimosaurus.com/2011/09/13/simple-advanced-paging-php/. Namun saya mendapatkan request beberapa hal tentang bagaimana agar paging dapat disederhanakan lagi. Maka terbayanglah sebuah simple paging dengan menyiasati menggunakan JQuery JCarousel. Paging ini dapat menggunakan teknik PHP murni, dapat juga diakali dengan menggunakan Jquery Jcarousel.

JCarousel memiliki fungsi untuk membuat tampilan bergeser muncul satu demi satu seperti pada contoh disini: https://blogit.bimosaurus.com/demo/paging_jq.php.

Mudah saja, dengan demikian kita bisa mengkreasikan paging dengan JCarousel ini. Kita akan memilih JCarousel model Lite yang ringan, dengan JQuery Minimal juga. Silakan dapat di download di http://www.gmarwaha.com/jquery/jcarousellite/#download, dan http://docs.jquery.com/Downloading_jQuery.

Saya memilih : jquery-1.7.1.min.js dan jcarousellite_0.4.0.min.js. Selanjutnya, anda dapat membuat script tampilan paging seperti berikut ini:

 

Nip Nama Honor Status Ambil





Or Go To :

Saya masih memilih setia menggunakan database lama saya yang saya gunakan untuk contoh-contoh lalu, database kepegawaian. Dengan tabel pegawai seperti berikut:

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

Nah, selamat mencoba, semoga sukses dan semoga bermanfaat