Menu Sederhana Javascript & CSS

Menu dalam sebuah web dapat juga di buat melalui javascript dan css. yang akan anda lihat disini adalah cara membuat menu web sederhana menggunakan javascript dan css. Berikut source

Read more »

Posted in: CSS,HTML,javascript

Cara Membuat Inner HTML

Setiap elemen HTML memiliki properti innerHTML yang mendefinisikan kedua kode HTML dan teks yang terjadi antara pembukaan elemen dan tag penutup. Dengan mengubah sebuah elemen innerHTML setelah beberapa interaksi pengguna, Anda dapat membuat halaman jauh lebih interaktif.

Namun, dengan menggunakan innerHTML memerlukan beberapa persiapan jika Anda ingin dapat menggunakannya dengan mudah dan terpercaya. Pertama, Anda harus memberikan elemen yang ingin Anda ubah sebuah id.Dengan id di tempat Anda akan dapat menggunakan fungsi getElementById, yang bekerja pada semua browser.

berikut contoh nya:

Read more »

Posted in: HTML

Backup database mysql di php

Jika kita mendengar tentang Export database, pasti kita berfikir langsung menuju ke phpmyadmin dan tekan export atau lewat mysqldump. tapi Bagaimana jika Export database menggunakan script php..? tapi tenang saja jangan memikirkan code-code yang sulit,kita hanya memanfaatkan sql query dan perulangan saja. Okey, udah dulu basa-basinya sekarang mari kita mulai buat backup database:
1.Buat database

CREATE DATABASE IF NOT EXISTS `siswa` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `siswa`;

CREATE TABLE IF NOT EXISTS `asset` (
`id` int(11) NOT NULL auto_increment,
`no_absen` varchar(20) default NULL,
`name` varchar(100) default NULL,
`kelas` varchar(50) default NULL,
`Alamat` varchar(50) default NULL,
`description` text,
PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1640 DEFAULT CHARSET=latin1;

Setelah membuat database dan tabel maka masukanlah data sesuai yang anda inginkan, untuk demo export database.
2.Buat file backup.php

function backup_tables($host,$user,$pass,$name,$tables = '*')
{
  
  $link = mysql_connect($host,$user,$pass);
  mysql_select_db($name,$link);
  
  //get all of the tables
  if($tables == '*')
  {
    $tables = array();
    $result = mysql_query('SHOW TABLES');
    while($row = mysql_fetch_row($result))
    {
      $tables[] = $row[0];
    }
  }
  else
  {
    $tables = is_array($tables) ? $tables : explode(',',$tables);
  }
  
  //cycle through
  

  foreach($tables as $table)
  {
    $result = mysql_query('SELECT * FROM '.$table);
    $num_fields = mysql_num_fields($result);
    
    $row2 = mysql_fetch_row(mysql_query('SHOW CREATE TABLE '.$table));
    //$return.= $row2[1].";\n\n";
    $return.= "\n\n".substr($row2[1],0,13).'IF NOT EXISTS'.substr($row2[1],12).";\n\n";
 
    for ($i = 0; $i < $num_fields; $i++) 
    {
      while($row = mysql_fetch_row($result))
      {
        $return.= 'INSERT INTO '.$table.' VALUES(';
        for($j=0; $j<$num_fields; $j++) 
        {
          $row[$j] = addslashes($row[$j]);
          //$row[$j] = ereg_replace("\n","\\n",$row[$j]);
          if (isset($row[$j])) { $return.= "'".$row[$j]."'" ; } else { $return.= "''"; }
          if ($j<($num_fields-1)) { $return.= ','; }
        }
        $return.= ");\n";
      }
    }
    $return.="\n\n\n\n";
  }
  $tanggal=date("d-F-Y");
  header("Content-Disposition: attachment; filename=backup_db_".$tanggal."_".time("G:i:s").".sql");
  header("Content-type: application/download");
  echo $return;
  exit;

}

Baiklah mungkin itu yang bisa saya berikan, semoga bisa membantu pembeljaran anda. terima kasih.

Read more »

Posted in: PHP

Membuat Slideshow dengan Apple Styles

Ketika kita berbicara tentang web design dan usability, maka kita tidak dapat melupakan sebuah perusahaan IT yaitu Apple. Produk-produk apple terkenal dengan design dan usability yang menawan. Ketika kita mengunjugi website apple kita akan melihat sebuah slide show yang terdiri atas dua bagian yaitu galery product dan thumbnailnya. Pada tutorial ini kita akan memadukan antara css dan jquery untuk membuat slideshow yang mirip seperti punyanya apple DEMO : klik disini

1. Membuat Struktur HTML

Berikut ini adalah struktur Utama dari slideshow

Secara umum ada dua div utama yaitu Div dengan Id=”Menu” dan id=”slides”. Div menu berfungsi sebagai tempat thumbnail dari div Slides. Jadi jumlah image yang ada di slide harus sama dengan jumlah yang ada du thumbnail. Untuk menambah/mengganti slide cukup dengan menambah atau mengganti image silde dan thumbnailnya. untuk thumbnail anda harus menngunakan tipe PNG.

2. Memberikan Style Css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
 /* Page reset */
 margin:0px;
 padding:0px;
}
 
body{
 /* Setting default text color, background and a font stack */
 color:#444444;
 font-size:13px;
 background: #f2f2f2;
 font-family:Arial, Helvetica, sans-serif;
}
 
/* Gallery styles */
 
#gallery{
 /* CSS3 Box Shadow */
 -moz-box-shadow:0 0 3px #AAAAAA;
 -webkit-box-shadow:0 0 3px #AAAAAA;
 box-shadow:0 0 3px #AAAAAA;
 
 /* CSS3 Rounded Corners */
 
 -moz-border-radius-bottomleft:4px;
 -webkit-border-bottom-left-radius:4px;
 border-bottom-left-radius:4px;
 
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 
 border:1px solid white;
 
 background:url(img/panel.jpg) repeat-x bottom center #ffffff;
 
 /* The width of the gallery */
 width:920px;
 overflow:hidden;
}
 
#slides{
 /* This is the slide area */
 height:400px;
 
 /* jQuery changes the width later on to the sum of the widths of all the slides. */
 width:920px;
 overflow:hidden;
}
 
.slide{
 float:left;
}
 
#menu{
 /* This is the container for the thumbnails */
 height:45px;
}
 
ul{
 margin:0px;
 padding:0px;
}
 
li{
 /* Every thumbnail is a li element */
 width:60px;
 display:inline-block;
 list-style:none;
 height:45px;
 overflow:hidden;
}
 
li.inact:hover{
 /* The inactive state, highlighted on mouse over */
 background:url(img/pic_bg.png) repeat;
}
 
li.act,li.act:hover{
 /* The active state of the thumb */
 background:url(img/active_bg.png) no-repeat;
}
 
li.act a{
 cursor:default;
}
 
.fbar{
 /* The left-most vertical bar, next to the first thumbnail */
 width:2px;
 background:url(img/divider.png) no-repeat right;
}
 
li a{
 display:block;
 background:url(img/divider.png) no-repeat right;
 height:35px;
 padding-top:10px;
}
 
a img{
 border:none;
}

3. Menambahkan Script jQuery

$(document).ready(function(){
 var totWidth=0;
 var positions = new Array();
        //Lakukan luping di semua div image didalam div slide
 $('#slides .slide').each(function(i){
  positions[i]= totWidth;
  totWidth += $(this).width();
 
  if(!$(this).width())
  {
   alert("Please, fill in width & height for all your images!");
   return false;
  }
 });
 
 $('#slides').width(totWidth);
 
        //jika thumbnail di klik
 $('#menu ul li a').click(function(e){
 
  $('li.menuItem').removeClass('act').addClass('inact');
  $(this).parent().addClass('act');
 
  var pos = $(this).parent().prevAll('.menuItem').length;
  $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
 
  e.preventDefault();
 });
 
 $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
});

Kode ini sangat simple, kita akan memanfaatkan fungsi animasi dari jquery untuk mempermudah proses slideshow. Dimodifikasi dari http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

Read more »

Posted in: CSS

MySQL - Selisih Tanggal

Perintah:

SELECT (date(sysdate())-date(waktu)) AS selisih FROM trx

berjalan dengan hasil yg sesuai harapan pada MySQL Windows, namun tidak bisa dijalankan di MySQL pada sistem operasi GNU/Linux.

Pada MySQL sistem operasi tersebut, nilai kalkulasi selisih tanggal selalu sama dengan nol, padahal untuk tanggal yang berbeda, seharusnya bernilai bukan nol. Setelah berpusing-pusing ria dan membuka-buka MySQL 5.0 Reference, disertai dengan serangkaian trial and error. Akhirnya ketemu juga solusinya, yaitu mengubah metode date calculation mejadi sebagai berikut:

SELECT DATEDIFF(SYSDATE(),waktu) AS selisih FROM trx

Read more »

Posted in: mysql

Cara Memebuat Login.php

Kali ini Kita akan mencoba memebuat tampilan login ke suatu web. Langkah - langka yang harus anda lakukan adalah sebegai berikut:

1. Anda harus mengcreate tabel user dan password terlebih dahulu,
2. Lalu mengcreate file form_login,
3. create file check_login,
4. create file sukses,
5. create file logout

Script create table user and password:

Read more »

Posted in: PHP

Membuat pemotongan preview posting di Blogger.

Read More. Link dengan kata-kata tersebut yang muncul untuk melihat seluruh isi posting secara penuh.

Pemotongan bagian awal posting yang tepat, sangat membantu untuk membuat calon pembaca menjadi penasaran akan sisa posting.

Jika tidak dipotong, cuplikan posting terkadang terlihat aneh, apalagi jika didalamnya terkandung bahasa-bahasa yang tak mudah dibaca orang awam

Read more »

Posted in: blogger

Apa Yang Baru di CSS3 ?

Sekilas Info Mengenai CSS

CSS (Cascading Style Sheet) merupakan bahasa pemrograman yang unik dan menarik untuk dipelajari. Arsitektur dari objek HTML, bisa juga berdiri sendiri sebagai pembangun sebuah halaman situs.

Di dalam artikel ini, saya juga akan membahas beberapa standar baru untuk CSS3 yang akan segera menggantikan CSS2, dan mungkin akan membuat anda bereksplorasi lebih dalam lagi untuk membuat tampilan website lebih menarik lagi dan mulai meninggalkan website yang membuat anda stress dengan loading yang lama atau browser anda yang tidak cocok untuk website yang anda kunjungi.

Mengapa Saya Lebih Memilih CSS3

Pertama, CSS merupakan bahasa yang paling mudah di mengerti dan dipelajari. Tidak mempunyai tanda atau karakter khusus untuk mendeklarasikan di halaman website.

Objek, objek lainnya, bagian-objek {
Properti : nilai-properti;
Bagian-objek : style-yg-akan-digunakan;
}

Kedua, CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya didalam objek ‘blockquote’ anda bisa membuat “ (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.

blockquote {
font: 16px/18px Georgia, "Times New Roman",
Times, serif;
color: rgb(160, 20, 60);
}
blockquote:before {
content: open-quote;
font-size: 45px;
}
blockquote:after {
content: close-quote;
font-size: 45px;
}

contoh style di blockquote : Ketiga, CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1. Dan bisa menggantikan peran image. Contohnya disini saya akan membuat box yang menggunakan tag div dengan pinggiran lebih halus atau melengkung.

div.box { box-width: border-box; -webkit-border-radius: 2em; }

box dengan menggunakan border radius :

Keempat, standar web 2.0 atau website interaktif dan efisien berdasar dar

i penggunaan CSS. Dengan CSS3 website akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.

Kelima, bisa mengurangi ukuran/size file yang di load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound website anda.

Keenam, yang paling baru dan mungkin beberapa properti di dalam CSS3 bisa menggantikan bahasa pemrograman lainnya. Sebentar, yang belum paham maksudnya jangan komentar dulu. Saya akan memberikan beberapa contohnya, tapi mungkin di artikel saya yang selanjutnya

Modul dan Pengembangannya

Semakin hari CSS akan terus berkembang dengan modul-modul baru yang sudah bisa digunakan. Spesifikasi atau modul yang terlalu rumit dan bertele-tele untuk di deklarasikan di CSS2 akan segera tergantikan dengan modul baru di CSS3. Beberapa modul yang sudah dikembangkan diantaranya adalah:

1. The Box Model
2. List Module
3. Hyperlink Display
4. Speech Module
5. Text Effect
6. Multicolumn Layout
7. Background dan Border

Beberapa diantaranya sudah ada yang bisa digunakan dan cross platform. Tapi beberapa diantaranya juga masih dalam tahap penelitian dan pengembangan. Dan untuk itu juga para developer browser akan sedikit demi sedikit bisa menerapkan modul CSS3 untuk di adopsi secara luas.

Jika CSS3 tidak bekerja untuk website anda mungkin bisa di sesuaikan pada browser yang anda gunakan, karena beberapa browser memang belum atau mungkin TIDAK (seperti IE 6/7/8) mendukung akan kekayaan fitur yang dihadirkan di CSS3 saat ini.

Read more »

Posted in: CSS

Error Handler Sederhana

Di jaman yang sudah serba canggih seperti saat ini, ada baiknya kita perlu menengok sedikit kebelakang. Meski sebagian besar Browser dan Framework bisa dipasang fasilitas debugger, namun untuk tujuan pembelajaran ada baiknya kita ketahui bentuk yang cukup sederhana dari sebuah debugger.

Read more »

Posted in: javascript

Yii Ajax Link

Untuk membuat link ajax di Yii cukup mudah. Di View cukup tambahkan code seperti ini untuk linknya .

echo CHtml::ajaxLink(
        "Link Text",
        Yii::app()->createUrl('myController/ajaxRequest'),
        array(// ajaxOptions
            'type' => 'POST',
            'beforeSend' => "function( request )
                            {
                            // Set up any pre-sending stuff like initializing progress indicators
                            }",
            'success' => "function( data )
                            {
                            // handle return data
                            alert( data );
                            }",
            'data' => array('val1' => '1', 'val2' => '2')
        ),
        array(//htmlOptions
            'href' => Yii::app()->createUrl('myController/ajaxRequest'),
            'class' => $class
        )
);

Pastikan user dapat mengakses controller yang dituju.

public function accessRules() {
    return array(
        array('allow',
            'actions' => array('ajaxrequest'),
            'users' => array('@'),
        ),
        // ...
        array('deny', // deny all users
            'users' => array('*'),
        ),
    );
}

Dan yang terkahir di action controllernya

public function actionAjaxRequest() {
    $val1 = $_POST['val1'];
    $val2 = $_POST['val2'];

    //
    // Perform processing
    //
    //
    // echo the AJAX response
    //
    echo "some sort of response";

    Yii::app()->end();
}

Read more »

Posted in: PHP,Yii Frame Work

Membuat scrollbar pada joomla

Jika anda membuat sebuah web dengan menggunakan joomla,pasti anda akan menjumpai beberapa artikel yang sangat panjang yang menyebebkan tampilan web anda tidak rapi.... Apa yang anda lakukan untuk membuat artikel menjadi lebih ringkas? Pasti anda berfikir bahwa solusi untuk hal itu adalah membuat pagebreak pada celah-celah artikelnya.Itu sangat tidak baik bagi web anda,karena pagebreak pada joomla akan menimbulkan efek yang tidak baik bagi tampilan web anda. Anda tidak perlu mencari solusi yang sangat rumit,tidak perlu module atau pun component joomla.Anda cukup menambahkan sedikit script html pada article anda:

isi dari artikel

menurut saya solusi ini sangat mudah untuk anda lakukan, selamat mencoba!!!

Read more »

Posted in: HTML

Halaman web anti IE..

Salah satu masalah yang cukup memusingkan adalah, ketika aplikasi berbasis web yang ditulis hanya bisa dijalankan pada browser selain Internet Explorer. Para awalnya yang dicurigai adalah line ending pada script menggunakan format Unix(LF) sedangkan Windows menggunakan (CR/LF). Namun teryata bukan itu.

Read more »

Posted in: javascript

Membuat Combo Multi Colom dengan EXTJS

Ini adalah pengembangan dari komponen standart EXTJS. yaitu ComboBox TwinTrigger dengan combo kita akan membuat saat tombol combo di clik akan memunculkan grid di bawah combo tersebut.

Ide ini terpikirkan oleh saya setelah saya beberapa saat lalu pernah membuat combo multi colom dengan java swing, nah ternyata teorinya sama juga di sini, yaitu menggunakan PopUpMenu.

Ok langsung saja langkah – langkahnya seperti berikut :

1. Buat grid dari ExtJs
2. Buat menu juga
   
3. Isi menu dengan panel yang di dalam panel kita addkan komponen grid yang telah kita buat.
4. membuat komponen Combo Multi Colom (perkembangan/customize dari combobox standart yang sudah ada)
   

ok mudahkan lihat source di bawah ini :
membuat menu & menambahkan komponen grid/tree di dalamnya :

Membuat komponen Combo Multi Colom yang akan memanggil popup menu tersebut :

Cara memanggjl/ menggunakan komponen Combo Multi Colom :

Well done.. silahkan kembangkan dan semoga membantu

Read more »

Posted in: EXTJS,javascript

Cara Instalasi Yii Framework

 Yii ? sudah taukah kalian dengan framework itu ?. mungkin dari kalian ada yang sudah mengenalnya bahkan sudah memakainya. Saya pertama bingung dalam mencari framework yang mau saya pelajari. Iseng" cari di google dan akhirnya nemu framework ini. Di sini saya mau menjelaskan bagaimana cara installasi awal.

Langsung saja. Pertama buka download dulu framework yii di website resminya http://www.yiiframework.com/download/. Saya disini memilih versi yang 1.1.x.

Disini saya akan pake windows jadi untuk web server lokal saya pake xampp. buat folder bernama webku di folder htdocs kalian.

Extract yii yang telah kita download tadi ke mana saja. Trus buka folder yii yang telah kita extract lalu copy folder framework ke folder webku yang ada di htdocs.

Setelah itu jalankan cmd (command prompt). Lalu masukkan perintah [webroot]/framework/yiic webapp [webroot] . seperti pada gambar di bawah ini.

lalu ketik Y untuk jawaban ya..
maka yii akan secara otomatis membuat folder dan file" yang kita butuhkan. proses ini disebut scaffolding. dengan ini folder webku akan menjadi webroot kalian.
coba masuk ke browser dan ketikkan alamat http://localhost/webku
Jika berhasil akan muncul seperti yang ada pada gambar di bawah ini.

Read more »

Posted in: Frame Work,PHP,Yii Frame Work

Extract file initrd.img

Menurunkan sebuah distro, tidak sesulit seperti yang kebanyakan orang bayangkan. Beberapa ilmu yang perlu diketahui antara lain, packaging, init script, scripting, dan melakukan patching serta kompilasi program dari source code. Jika malas, cukup hapus paket yang tidak diperlukan, atau tambah paket yang diperlukan. Pada tingkat lanjutan, tentunya sudah menjamah (modifikasi) script-script yang ada pada distro master-nya. Diantaranya boot-script, init-script dan install script. Lebih expert lagi adalah builder yang mau membuat atau menambahkan script-script buatannya sendiri.

Hal tersebut diatas adalah di-sisi distronya. Dan bagaimana di sisi pengembangan? menurut saya, seorang builder yang baik, yang ingin terus mengembangkan distro turunannya dengan versi-versi yang akan datang, tentu memiliki atau membuat script yang dapat digunakan untuk otomatisasi pembuatan paket atau blok file pada pengembangan berikutnya. Sehingga tidak perlu dilakukan secara manual (by hand). Sebagai contoh, pada Slackware tentunya ada master script, dimana untuk proses ekstraksi, kompilasi, pemaketan program, hingga pembuatan file iso distro menjadi siap rilis, dapat dilakukan hanya dengan memanggil satu script utama.

Tidak pernah ada kata terlambat untuk memulai, untuk membuat custom installer, hal pertama yang perlu dilakukan adalah memodifikasi file initrd.img dari CD/DVD installer. Sebelum dimodifikasi, tentunya perlu ekstraksi. Berikut adalah file script yang saya buat untuk melakukan ekstraksi file initrd.img (extract-initrd.sh):

#!/bin/bash
extract_initrd()
{
    echo "extracting initrd.img.."
    mkdir initrd
    cd initrd
    gzip -dc ../initrd.img | cpio -id
    cd ../
    echo "done!"
}

if [ -f initrd.img ]
then
    if [ -d ./initrd ]
    then
        echo "removing old initrd directory.."
        rm -Rf ./initrd/
    fi
    extract_initrd
else
    echo -e "\E[31;40minitrd.img file not found!"; tput sgr0
fi

Script diatas akan membuat direktori initrd, didalamnya adalah hasil ekstraksi dari file initrd.img. Direktori hasil ekstraksi memiliki struktur sistem file yang sama dengan root filesystem, pada saat CD installer dijalankan.

Referensi: OpenVz

Read more »

Posted in: linux