Archive for the ‘Pemrograman Web’ Category

Teknik Grabbing Kurs Bank Mandiri

Pernahkah terpikir dalam benak anda tentang cara menampilkan bagian web lain ke web anda ? … Dalam pemrograman web disebut teknik Grabbing. Sebagai contoh menampilkan kurs dollar.

Jadi,  Grab / grabbing adalah pengambilan data HTML website lain dengan diambil hanyalah sebagian kecil dari tampilan suatu website dan dengan menghilangkan bagian-bagian yang tidak diperlukan.

Sebagai contoh kita grab kurs Bank Mandiri yang kita ambil dari website http://www.bankmandiri.co.id.  Disini kita belajar  dasar dari grab kurs Bank Mandiri, karena grab ini tergantung dari model tampilan yang ada pada saat itu. Jadi bila  suatu website mengalami perubahan tampilan, maka grab yang ada di website anda juga mengalami berubahan.

Langkah – langkahnya sebagai berikut :

  • Buat file PHP dengan code :

<?
 $url = “http://www.bankmandiri.co.id/resource/kurs.asp” ;
 $html_start = ‘keterangan1′;
 $html_end = ‘keterangan2′;
 ini_set (‘allow_url_fopen’, ’1′ );
 ini_set (‘auto_detect_line_endings’, ‘Off’) ;
 ini_set (‘default_socket_timeout’, ’60′ );
 ini_set (‘max_execution_time’, ’0′ );
 flush() ;
 $f = fopen ($url, ‘r’ );
 $doc = ”;
 while (! feof ($f) ) {
 $doc = $doc . fgets($f, 3072) ;
 // triple buffer, default buffer 1024 bytes
 }
 fclose ($f) ;if (
 $doc != ”) {
 $a = strpos($doc, $html_start) ;
 $b = strpos($doc, $html_end) - $a ;
 $show = substr($doc, $a, $b) ;
 $show = ereg_replace(keterangan3,keterangan4>, $show) ;
 print “$show” ;
 }
 flush() ;
 ?>

  • Untuk menyederhanakan tampilan, cari awalan code HTML dan akhiran code HTMLlewat view page source
  • Ganti keterangan1 dengan code awal (start) code HTML
  • Ganti keterangan2 dengan code akhir (end) code HTML
  • Save, dan lihat hasilnya dulu……..
  • Rubah-rubah keterangan1 dan keterangan2 sampai mendapatkan tampilan yang paling sederhana
  • Hapus/ Replace code yang ada di antara keterangan1 dan keterangan2 dengan perintah $show = ereg_replace(keterangan3,keterangan4>, $show) ;
  • Keterangan1 adalah code HTML yang akan kita replace
  • Keterangan2 adalah pengganti dari keterangan1, keterangan2 bisa berupa kode kosong (“”)
  • Ulangi terus perintah tersebut sampai mendapat tampilan yang benar-benar diinginkan seperti gambar dibawah ini :

Multiple Koneksi Database diCode Igniter

Sekedar berbagi, berikut ini cara mengkoneksikan aplikasi web ke dua database pada framework code igniter. Bawaan default dari CI terdapat pada file system/app/config/database.php berupa :


$db['default']['hostname'] = "localhost";
 $db['default']['username'] = "root";
 $db['default']['password'] = "";
 $db['default']['database'] = "ujicoba_db";
 $db['default']['dbdriver'] = "mysql";
 $db['default']['dbprefix'] = "";
 $db['default']['pconnect'] = TRUE;
 $db['default']['db_debug'] = TRUE;
 $db['default']['cache_on'] = FALSE;
 $db['default']['cachedir'] = "";
 $db['default']['char_set'] = "utf8";
 $db['default']['dbcollat'] = "utf8_general_ci";

selanjutnya, bila ingin menambah koneksi 1 lagi ke server database lain, perlu menambah konfigurasi koneksi dibawah baris tadi dengan array bukan default.


$db['second_db']['hostname'] = "localhost";
 $db['second_db']['username'] = "root";
 $db['second_db']['password'] = "";
 $db['second_db']['database'] = "kampus";
 $db['second_db']['dbdriver'] = "mysql";
 $db['second_db']['dbprefix'] = "";
 $db['second_db']['pconnect'] = TRUE;
 $db['second_db']['db_debug'] = TRUE;
 $db['second_db']['cache_on'] = FALSE;
 $db['second_db']['cachedir'] = "";
 $db['second_db']['char_set'] = "utf8";
 $db['second_db']['dbcollat'] = "utf8_general_ci";

 

Kemudian cara pemanggilan koneksi tambahan tadi sebagai berikut :


$this->second_db=$this->load->database('second_db',TRUE);
 $this->second_db->where('nim', $nim);
 $query = $this->second_db->getwhere('krs');
 return $query;

 

Semoga bermanfaat 😉

Tugas Web Statis

Tugas 1
1. Jelaskan apa yang dimaksud dengan web semantik
2. Fitur tambahan apa yang terdapat pada CSS 3
3. Apa yang anda ketahui tentang teknologi
a. AJAX
b. JQuery

dikumpulkan ke : wahyuuu@gmail.com
paling lambat  : 8 November 2010

Tambahan fitur pada HTML 5

Ternyata adopsi teknologi itu perlu waktu yang sangat lama. Di seputaran tahun 2000, seingat saya, adopsi HTML baru saja bertransisi ke versi 4. HTML was all about layout and formatting. Not anymore.

HTML 5 yang saat ini sudah mulai diimplementasikan oleh beberapa browser grade A akan membawa lebih dari sekedar fitur untuk layout dan format halaman. Beberapa di antaranya adalah Canvas dan Video.

Canvas

Dulu, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa menggambar langsung di halaman web. Sekarang Anda bisa berimaginasi sendiri, kira-kira apa saja yang orang lakukan dengan <canvas>. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.

Video dan Audio

Akan ada tag <audio> dan <video> di HTML 5. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan bervariasi terhadap browser, kemungkinan besar codecnya adalah Ogg Theora (patent free) dan H.264. Sepertinya sampai sekarang codecnya masih jadi kontroversi.

Local Storage

Masih ingat Google Gears? Sekarang storage untuk browser akan diakomodasi sebagai standard dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash. Tentunya ini kabar baik bagi pengembang aplikasi web. Mungkin bisa meningkatkan performa aplikasi dengan menggunakan storage sebagai local cache. Coba liat detilnya di sini.

Web Workers

Yang ini juga sempat kita nikmati lewat Google Gears. Jika javascript biasanya yang kita nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak membuat browser seperti sesak napas maka web worker akan bsia jadi pelega. Salah satu fitur web worker adalah threading. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.

Semantics

Nah ini dia. Buat designer yang sering meng-abuse div dan span sebagia elemen nav, fret no more. Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.

Tidak berhenti di situ saja, nantinya juga akan ada dukungan microformats yang lebih baik dari sekarang ini. Dukungan microformats ini akan memanfaatkan tag dan atribut baru yang diperkenalkan di HTML 5.

Sumber http://www.navinot.com

Belajar resize image

Membuat situs tentang wisata, tantangan utamanya adalah proporsionalnya foto yang disajikan dikonten. Hal ini menjadi tidak masalah ketika redaktur atau admin yang bertugas upload memahami tentang pengolahan foto yang ditampilkan di web.

Namun kenyataan dilapangan tak seindah yang dibayangkan :D. Banyak yang dari jepretan kamera, langsung diupload. Tentu akan berdampak pada beratnya load foto dikarenakan ukuran filenya besar. Maka teknik mengecilkan foto harus bisa dikuasai agar pengguna awam sekalipun bisa mengupload foto tanpa harus me-resize manual dari photoshop ataupun tool yang lainnya.

Dibawah ini ada class library untuk resize image yang dibuat oleh mas Simon Jarvis. Bisa anda copy dan digunakan.



<?php
/*
* File: SimpleImage.php
* Author: Simon Jarvis
* Copyright: 2006 Simon Jarvis
* Date: 08/11/06
* Link: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
* 
* This program is free software; you can redistribute it and/or 
* modify it under the terms of the GNU General Public License 
* as published by the Free Software Foundation; either version 2 
* of the License, or (at your option) any later version.
* 
* This program is distributed in the hope that it will be useful, 
* but WITHOUT ANY WARRANTY; without even the implied warranty of 
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
* GNU General Public License for more details: 
* http://www.gnu.org/licenses/gpl.html
*
*/
 
class SimpleImage {
   
   var $image;
   var $image_type;
 
   function load($filename) {
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {
         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {
         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {
         $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image,$filename);         
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image,$filename);
      }   
      if( $permissions != null) {
         chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image);         
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image);
      }   
   }
   function getWidth() {
      return imagesx($this->image);
   }
   function getHeight() {
      return imagesy($this->image);
   }
   function resizeToHeight($height) {
      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }
   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getheight() * $ratio;
      $this->resize($width,$height);
   }
   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getheight() * $scale/100; 
      $this->resize($width,$height);
   }
   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;   
   }      
}
?>

Caranya sangat sederhana , seperti pada contoh dibawah ini, gambar akan diresize dengan lebar 250 pixel dan tinggi 400 pixel, maka :

<?php
   include('SimpleImage.php'); // untuk load library sintak diatas
   $image = new SimpleImage();
   $image->load('picture.jpg'); // gambar yang
   $image->resize(250,400); // ukuran resize dalam pizel
   $image->save('picture2.jpg'); // hasil gambar yang disimpan
?>

Jika , kamu ingin meresize berdasarkan skala ( persentase ) dari ukuran aslinya, maka kodenya sebagai berikut :

<?php
   include('SimpleImage.php');
   $image = new SimpleImage();
   $image->load('picture.jpg');
   $image->scale(50);
   $image->save('picture2.jpg');
?>

Semoga bisa bermanfaat buat anda yang seneng dengan web programming

Cek otomatis jika email telah digunakan dengan JQuery

Sering kali ketika sedang membuat sebuah form inputan untuk registrasi, dihadapkan dengan masalah validasi email. Email yang telah digunakan tidak dapat dipakai untuk registrasi kembali. Dengan menggunakan JQuery, validasi tersebut dapat di autosuggest (cek otomatis) kedalam database yang menyimpan email.

Dengan demikian, si user akan segera mengganti apabila email tersebut telah ada tanpa harus menyelesaikan semua inputan atau menekan tombol simpan.

Berikut ini kode untuk validasi form dengan jquery

$(document).ready(function(){
	var emailok = false;
	var boxes = $(".input_s1_normal");
	var myForm = $("#chkForm"), username = $("#username"), email = $("#email"), emailInfo = $("#emailInfo");
	
	//give some effect on focus
	boxes.focus(function(){
		$(this).addClass("input_s1_focus");
	});
	//reset on blur
	boxes.blur(function(){
		$(this).removeClass("input_s1_focus");
	});
	
	//Form Validation
	myForm.submit(function(){
		if(username.attr("value") == "")
		{
			alert("Enter Username");
			username.focus();
			return false;
		}
		if(email.attr("value") == "")
		{
			alert("Enter Email");
			email.focus();
			return false;
		}
		if(!emailok)
		{
			alert("Check Email");
			email.attr("value","");
			email.focus();
			return false;
		}
	});

Kemudian tambahkan dibawahnya kode jquery untuk mengecek keberadaan email dalam database

	email.blur(function(){
		$.ajax({
			type: "POST",
			data: "email="+$(this).attr("value"),
			url: "check.php",
			beforeSend: function(){
				emailInfo.html("Checking Email...");
			},
			success: function(data){
				if(data == "invalid")
				{
					emailok = false;
					emailInfo.html("Inavlid Email");
				}
				else if(data != "0")
				{
					emailok = false;
					emailInfo.html("Dah dipake emailnya");
				}
				else
				{
					emailok = true;
					emailInfo.html("Masih virgin uie lanjut gant");
				}
			}
		});
	});
});

Sedangkan kode php untuk mencocokkan email yang di request ke database adalah berikut ini :

<?php
//data connection file
require "config.php";
extract($_REQUEST);

if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email))
{
	$sql = "select * from users where email='$email'";
	$rsd = mysql_query($sql);
	$msg = mysql_num_rows($rsd); //returns 0 if not already exist
}
else
{
	$msg = "Ra bener";
}
echo $msg;
?>

Untuk mempraktikannya anda perlu membuat sebuah database dan 1 tabel dengan nama users, sebuah library jquery (bisa didownload) dan
1 desain inputan form. Untuk lebih jelasnya, silahkan download disini. Semoga bermanfaat 😀

Membuat fungsi terbilang di php

Ehm, setelah lama nggak posting, karena sok sibuk :D, kali ini saya akan men-share cara membuaf fungsi terbilang di php. Ide ini muncul setelah menyelesaikan aplikasi e-commers yang akan lounching 1 Januari ’10, Insya Alloh.
apa tu fungsi terbilang ?
yaitu fungsi untuk mengkonversi bilangan numerik ke dalam string biasanya digunakan untuk menampilkan nominal uang.
sebagai contoh :
670000 menjadi “enam ratus tujuh puluh ribu rupiah”

langsung aja ke kode :

function Terbilang($x)
{
  $satuan = array("", "satu", "dua", "tiga", "empat", "lima", "enam", "tujuh", "delapan", "sembilan", "sepuluh", "sebelas");
  if ($x < 12)
    return " " . $satuan[$x];
  elseif ($x < 20)
    return Terbilang($x - 10) . "belas";
  elseif ($x < 100)
    return Terbilang($x / 10) . " puluh" . Terbilang($x % 10);
  elseif ($x < 200)
    return " seratus" . Terbilang($x - 100);
  elseif ($x < 1000)
    return Terbilang($x / 100) . " ratus" . Terbilang($x % 100);
  elseif ($x < 2000)
    return " seribu" . Terbilang($x - 1000);
  elseif ($x < 1000000)
    return Terbilang($x / 1000) . " ribu" . Terbilang($x % 1000);
  elseif ($x < 1000000000)
    return Terbilang($x / 1000000) . " juta" . Terbilang($x % 1000000);
}

Keterangan :

function tersebut diberi nama Terbilang, dengan diberi nama terbilang dengan parameter $x bernilai numerik (bilangan), sedangkan nilai kembali (result) berupa string (huruf). Fungsi diatas hanya sampai 999.999.999 , kalau pengen sampai 1 milyar atau 1 trilyun tinggal ditambah sendiri aja ya….

cara manggil function tersebut :

 <?
  $uang=479000; // variabel berisi bilangan
  echo Tampil($uang)." rupiah "; // memanggil function dan menambah kata rupiah
 ?>
 

Maka akan tampil
empat ratus tujuh puluh sembilan ribu rupiah

semoga bisa bermanfaat. 🙂