HTML

[CSS] Fitur-fitur Memperindah Halaman dalam CSS3

Posted on by bimosaurus

CSS versi 3.x memberikan berbagai macam fitur yang siap digunakan untuk keperluan mobile dan memperingan halaman dengan animasi yang lebih lengkap. Dengan menggunakan fitur-fitur CSS3, pembuatan template dapat sangat lebih mengurangi gambar dan animasi non CSS. Beberapa fitur diantaranya adalah:

Gradasi Warna

Jika di masa lalu, membuat Gradasi Warna harus menggunakan gambar image kecil yang dijadikan background secara repeat, maka CSS3 akan memberikan cara yang berbeda.

 
Jika dulu adalah seperti ini , tentu dengan gambar yang harus ada:

background:url('../images/anu.jpg') repeat-x;

Sekarang bisa menggunakan seperti ini:


background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444), color-stop(25%, #444), to(#000));/*safari chrome*/
background-image: -webkit-linear-gradient(#444, #444 25%, #000);
background-image: -moz-linear-gradient(top, #444, #444 25%, #000);/*mozilla*/
background-image: -ms-linear-gradient(#444, #444 25%, #000);/*msie*/
background-image: -o-linear-gradient(#444, #444 25%, #000);/*opera*/
background-image: linear-gradient(#444, #444 25%, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#000', GradientType=0);/*IE*/

Perhatikan bahwa kode warna yang ada adalah menunjukkan start warna, tujuan warna dan akan berhenti di sekian persen dari warna.

Box Shadow
Jika di masa lalu dengan cara yang sama dengan diatas kita membuat sebuah kotak dengan bayangan gelap adalah dengan menggunakan image, maka sekarang dapat menggunakan CSS. Cara yang digunakan adalah menggunakan box-shadow


-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;

Transisi warna untuk mouse over pada sebuah link
Di masa lalu penggunaan transisi warna dibentuk dengan menggunakan javascript. Jika sekarang dapat menggunakan kode CSS seperti berikut

-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear;

Text Shadow
Ini juga sering dipakai. Untuk memembentuk efek tertentu seperti timbul dan tenggelam dalam sebuah text, dapat digunakan teknik CSS berikut, Biasanya, jika background terang dan tulisan gelap, jika bayangan lebih gelap, akan muncul tulisan timbul.

text-shadow:1px 1px #ccc; /*1px ke bawah, 1px ke kanan dan berwarna abu*/

Masih banyak kode CSS3 seperti rotate image dan lain sebagainya. Namun cukup ini lebih dulu, selengkapnya dapat dipelajari di situs w3schools. Untuk Internet Explorer, CSS3 ini tidak begitu mudah dijalankan, yang akhirnya harus menggunakan javascript untuk mengantisipasinya. Namun menengok bahwa CSS3 dan HTML5 sangat siap untuk keperluan gadget mobile, dan dengan web browser yang makin tidak didominasi Internet Explorer, maka tidak ada salahnya menggunakan CSS3 ini.

Artikel terkait

[Tips] Membuat Link Perpindahan Menjadi Smooth

Posted on by bimosaurus

Ketika sebuah “Link a href” yang terdapat dalam halaman web kita diklik, meskipun link tersebut menuju ke halaman kita sendiri, sebenarnya seluruh halaman ikut berubah, termasuk header-headernya. Padahal header itu akan selalu sama dimanapun saja link fitur web kita di klik. Hal ini akan sangat terasa lambat jika halaman header memuat gambar yang cukup besar, dan lebih-lebih pada koneksi internet yang kurang memadai.

Ada satu trik dimana ketika sebuah link / hyperlinks diklik maka hanya akan berubah elemen yang dimaksud. Perpindahannya juga dapat disiasati dengan cara yang lembut dan menggunakan waktu yang cukup sehingga proses yang lama akan terasa tetap terlihat tidak kaku. Caranya adalah dengan menggunakan sebuah fungsi JQuery, yang tentu kita harus meload JQuery lebih dulu dalam halaman kita.

Yang jelas, kita harus lebih dulu menetapkan elemen yang akan berubah, dalam kasus ini saya ambil #content, atau div id=content. Selanjutnya, pada a href yang akan kita set kita beri class, dalam hal ini saya berikan class = bms_fade. Letakkan script ini di awal halaman, selanjutnya ketika a href yang ber class bms_fade itu di clik, akan segera muncul perpindahan, hanya pada contentnya saja.. Silakan atur waktu set time outnya :), selamat mencoba

//perhatikan versi dan letak jquery.. cari yang terbaru

Sedangkan kode a nya akan menjadi seperti berikut:

INI LINK nya

Bagian yang akan terload adalah


//
//
//

Artikel terkait

[Contoh] PHP, MySQL, JQuery Form Posting, Tanpa Autorefresh Halaman / Pindah Halaman

Posted on by bimosaurus

Dalam ilmu web pada umumnya, dengan PHP-MySQL pada khususnya, sebuah proses Post Form, akan selalu mengarah ke suatu halaman yang ditandai dengan method dan action sebagai properti Formnya. Contoh:


/*isi form
.
.
.
*/

Ketika tombol submit ditekan, maka halaman tujuan (action) akan dijalankan. Jika halaman adalah halaman itu sendiri, maka akan ter-refresh (terambil ulang dengan sudah membawa perubahan post) dan jika halaman lain sebagai action, akan masuk ke halaman tujuan itu. Hal ini akan menjadi tidak nyaman bagi sebuah web yang memiliki desain gambar cukup besar, sedangkan diperkirakan client akan membuka dengan bandwidth yang minim.
Ada beberapa cara untuk mensiasati hal ini, adalah dengan memanfaatkan framework Javascript berupa Ajax ataupun JQuery. Dalam posting ini akan dicoba menggunakan JQuery sebagai pembantu posting, agar ketika proses Posting, tidak lagi perlu terbuka ulang seluruhnya, hanya bagian tertentu saja.
Langkah pertama yang harus dilakukan adalah lebih dulu halaman harus memuat JQuery library, dengan cara mengambil baik dari host sendiri atapun menggunakan global host, seperti google host misalnya.
Selanjutnya kita tinggal memanfaatkan tiga hal, dalam satu script:

  • Mengambil value dari ID input form, misal : 

    var judul = $("#id_yang_diambil_sebagai_judul").val();
var isi = $("#id_yang_diambil_sebagai_isi").val();
  • Memanfaatkan fungsi POST dari JQuery dengan melakukannya ditujukan ke suatu file tujuan, dengan value parameter yang telah diambil seperti pada point diatas, contoh:

    
   $.post("submit.php", { judul: judul, isi: isi});

    Pada proses ini, dimaksudkan agar jquery melakukan proses post pada submit.php, dengan isi value POST[‘judul’] dengan variabel judul, dan POST[‘isi’] dengan variabel isi

  • Melakukan penambahan reset form 
       $("form#postForm")[0].reset();

atau contoh dengan googlehost

Langkah kedua adalah membuat form post seperti biasa, namun dengan seluruh komponen input diberikan id agar dapat diterima browser sebagai variabel yang berbeda, dan diberikan arah action yang berbeda dengan halaman pemuat form. Berikan juga fungsi javascript untuk Button pemicu submit form. Contoh:

Langkah berikutnya adalah menyisipkan script javascript yang ada di bawah ini diantara load JQuery dan Form. Script ini berupa fungsi yang dipanggil oleh button ketika diklik

Untuk menampung hasil kiriman POST, maka kita perlu membuat file submit.php yang isinya antara lain adalah file PHP biasa yang isinya adalah sebagai berikut:

Asumsi tambahan:
Dalam database terdapat sebuah tabel post, yang berisi empat field, dengan field: id, judul, isi, timestamp. Dengan `id` adalah autoincrement, dan timestamp not Null. Asumsi juga bahwa di buat sebuah file database.php yang berisi koneksi database.

File submit.php ini tidak akan muncul di browser, karena prosesnya telah ditahan oleh JQuery.

Selanjutnya tinggal membuat halaman untuk memuat tampilan dari isi tabel post dengan menggunakan jquery juga, yang akan dipost pada posting berikutnya 🙂

Artikel terkait

[Contoh] Berkreasi membuat Image From Text dengan PHP

Posted on by bimosaurus

Anggap kita memiliki gambar hati berwarna merah seperti ini.

 


Kita ingin membuat sebuah variasi dengan karakter-karakter huruf, dan membentuk gambar hati seperti itu. Kadang diluaran sana sering disebut dengan Image To Text. Namun bagi saya lebih tepat Image From Text. Karena gambar akan dibentuk dari text. Bagaimana caranya? Ternyata sangat mudah sekali. PHP telah dapat menangani hal tersebut. Cobalah buat script dengan nama : imagefromtext.php, isi scriptnya kira-kira seperti demikian :




o", $rgb['red'], $rgb['green'], $rgb['blue'] );
        }
        echo "
\n";
    }
    imagedestroy( $im );
?>

 

Simpan dan buka dalam web browser anda. Demo saya siapkan di https://blogit.bimosaurus.com/demo/imagefromtext.php
Hasilnya kira-kira seperti berikut ini :

 

Artikel terkait

[Contoh] Super Simple Paging Halaman PHP MySQL

Posted on by bimosaurus

Berdasarkan sebuah request/permintaan melalui surel, seorang rekan saya menanyakan : dapatkah Paging/penomoran halaman dipermudah , dipersingkat, tanpa ribet koding namun juga tidak ribet memenuhi halaman jika halaman hingga ribuan. Sebenarnya paging/ pemberian nomor halaman pada PHP tergantung pada kebutuhan. Biasanya sesuatu yang lengkap akan membutuhkan penanganan yang lengkap juga. Begitu juga dengan paging. Namun kadang dengan analisa yang tepat, bisa juga didapatkan sesuatu yang simple dan enak, dan dapat memenuhi banyak kebutuhan. Berikut disini saya paparkan hasil analisa paging simple penomoran halaman sederhana namun cukup powerfull.

 
Paging ini dimulai dari penentuan jumlah item tiap halaman yang akan ditampilkan. Selanjutnya dilakukan penangkapan parameter page dari method GET. Dalam contoh, item per halaman ditampilkan 10.

$item_per_page = 10;
$page =  isset($_GET['page']) ? $_GET['page'] : 1 ;

Notasi tersebut berarti $page adalah didapat dari jika $_GET[‘page’] ter-set. Namun jika tidak akan berisi value 1. Untuk menghindari penomoran melewati batas, seperti kurang dari satu atau berisi value kosong, maka hadang / filter dulu dengan 

if( ( $page < 1) && (empty( $page ) ) ){
      $page=1; 
   }

Untuk mendapatkan jumlah halaman berarti harus didapatkan lebih dulu jumlah item yang ada. Jumlah item yang ada didapat dari query SQL.

   $sql           = "select * from `table`";
   $query         = mysql_query( $sql );
   $jumlah_data   = mysql_num_rows($query);
   $jumlah_hal    = ceil( $jumlah_data/$item_per_page );

Selanjutnya filter juga agar page yang terdapat di method GET tidak lebih dari jumlah halaman. 

   if( $page>$jumlah_hal ){
      $page=$jumlah_hal;
   }

Kemudian kita dapat membuat sebuah variable $lanjut dan $sebelum dengan penentuan seperti ini:

   $lanjut  = $page + 1;
   $sebelum = $page - 1;

Barulah kita membuat kata-kata seperti berikut dilengkapi dengan navigasi Paging:

   Anda ada di halaman  dari 

   <<   < sebelumnya   
   ||
      selanjutnya >   >>
   Ke Halaman:

Tampilan sangat sederhana seperti berikut :

Anda ada di halaman 3 dari 3
<< < sebelumnya || sesudahnya > >>
Ke Halaman

Sederhana bukan?

Secara lengkap Code akan dipaparkan dalam bentuk fungsi, sehingga untuk penomoran halaman tinggal memanggil melalui fungsi seperti demikian 

$sql = "select * from table";
$item_per_page =10;
paging($sql, $item_per_page);

FUNGSI UTAMA PAGING SIMPLE

Fungsinya adalah sebagai berikut di bawah (saya beri nama dengan paging.php). Anda dapat kopikan fungsi ini ke dalam kode anda, dan anda panggil ketika anda akan memberikan penomoran halaman. Anda juga dapat melakukan modifikasi sendiri sesuka hati:

$jumlah_hal ){
      $page=$jumlah_hal;
   }
   $lanjut  = $page + 1;
   $sebelum = $page - 1;
   ?>
   Anda ada di halaman  dari 

   <<   < sebelumnya   
   ||
      selanjutnya >   >>
   Ke Halaman:

Selanjutnya contoh perhalamannya akan seperti berikut:

Mudah bukan? Semoga bermanfaat
Artikel terkait

	

		
[Contoh] Cara Membuat Grafik Dasar Web Dengan JQuery HighChart

				

			Posted on  by bimosaurus		

			


	

		
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..


Artikel terkait

			


	


	

		
[Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot

				

			Posted on  by bimosaurus		

			


	

		
Selain dengan mode HTML biasa dan JPGraph, ada cara yang sekarang lebih populer dalam pengembangan grafik, yaitu dengan memanfaatkan turunan JQuery. Dengan JQuery dan Ajax, maka kemampuan browser dapat dimaksimalkan untuk keperluan pembuatan grafik yang lebih dinamis dan siap untuk detail tidak sekedar image. Memang pada akhirnya antara Grafik HTML, Grafik JPGraph dan Grafik JQuery, tetap memiliki kelebihan dan kekurangan sendiri-sendiri.


Pembuatan grafik dengan JQuery banyak sekali macam yang ditawarkan dari berbagai free-vendor berbasis opensource. Beberapa diantaranya adalah JQPlot, HighChart, AjaxGraph dan lain sebagainya. Di posting kali ini akan dicoba membuat grafik dengan memanfaatkan JQuery JQPlot. JQPlot dapat diambil source di situs aslinya yaitu http://www.jqplot.com/. Bisa di dowload dan di extract dalam folder httpdocs anda. Setelah itu dapat anda pelajari, hanya saja beberapa source jquery mengambil source dari link external, namun tidak masalah, dapat diambil secara manual. Example dan documentasi dapat juga diambil di http://www.jqplot.com/tests/ dan http://www.jqplot.com/docs/. JQPlot menyediakan banyak macam grafik, antara line, bar, pie, blok, dan lain sebagainya, dengan skala yang bervariasi dan dapat diperbesar (zoom) dengan melakukan select block pada grafik tersebut.


Berikut beberapa langkah cara proses pengambilan data dan pembentukan grafik yang dapat dillakukan dengan menggunakan JQuery JQPlot.


    

  1. Penyisipan kode dan style
    2. 

  2. Pendefinisian elemen yang akan digunakan sebagai area grafik
    3. 

  3. Plot Grafik
    4. 



Penyisipan kode standard antara lain dilakukan dengan cara menambahkan baris berikut:









PERHATIAN:

Lakukan penulisan script dan sesuaikan dengan path yang ada pada script anda. Pada contoh, saya menggunakan path https://blogit.bimosaurus.com/demo/


Penentuan area dapat dilakukan dengan contoh di bawah ini. Perhatikan, anda berhak membuat ID div sendiri. ID ini yang nanti akan dipanggil dalam script PLOT :




Lantas lakukan plottingnya:




Dengan angka depan terletak di sumbu x dan angka belakang terletak di sumbu y. Perlu diperhatikan bahwa untuk kondisi standard, kita hanya bisa menggunakan jenis grafik dengan sumbu x adalah angka, dan sumbu y juga angka.


Kira-kira, kode utuh akan seperti ini:
















Kemudian grafiknya akan seperti ini:













Nah, selamat mencoba lebih dahulu, posting selanjutnya akan berkisar pembuatan grafik dengan JQPlot lebih lanjut, tentu digabung dengan data dari MySQL dan pengambilan data oleh PHP


Artikel terkait

			


	



NIPNamaHONORStatus Ambil