Listingprogram.Log

Membuat Color Slider Dengan JQuery UI

2010-11-03T08:04:00.011+07:00

JQuery UI merupakan library JavaScript untuk membangun user interface web dengan lebih mudah dan cepat. Salah satu widget user interface yang ada di JQuery UI adalah Slider.

Tip kali ini adalah memanfaatkan widget slider pada JQuery UI untuk membuat Color Slider (simulasi pencampuran warna RGB). Untuk menampilkan widget slider menggunakan JQuery UI kita dapat menggunakan kode berikut:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="development-bundle/themes/smoothness/ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Slider Example</title>
</head>
<body>
<div id="mySlider"></div>
<script type="text/javascript"
src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript"
src="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript"
src="development-bundle/ui/ui.slider.js"></script>
<script type="text/javascript">
 $(function(){
  $("#mySlider").slider();
});
</script>
</body>
</html>

Hasil yang didapatkan ketika ditampilkan di layar adalah sebuah slider seperti pada gambar.

Slider tersebut telah memiliki fungsi-fungsi dasar seperti digeser dengan menggunakan mouse atau keyboard. Untuk pembuatan color slider dibutuhkan 3 buah slider yang mewakili warna merah, hijau dan biru. Langkah-langkah pembuatannya adalah sebagai berikut:

Buat terlebih dulu style sheet yang nanti akan dibutuhkan.

<html>
<head>
 <style type="text/css">
 #container {
   width:426px;
   height:150px;
   position:relative;
   font:bold 13px Georgia;
   padding:20px 20px 0;
   background:#eeeeee;
 }

 #container label {
   float:left;
   text-align:right;
   margin:0 30px 26px 0;
   clear:left;
 }

 .ui-slider {
    width:240px;
    float:left;
  }

 .ui-slider-handle {
   width:15px;
   height:27px;
 }

 #colorBox {
   width:104px;
   height:94px;
   float:right;
   margin:-83px 0 0 0;
   background:#ffffff;
 }

 #container #outputLabel {
    float:right;
   margin:-14px 10px 0 0;
 }

 #output {
   width:100px;
   text-align:center;
   float:right;
   clear:both;
   margin-top:-17px;
}
 </style>

 <link rel="stylesheet" type="text/css"
   href="development-bundle/themes/smoothness/ui.all.css">
<meta http-equiv="Content-Type" content="text/html;
   charset=utf-8">
 <title>jQuery UI Color Slider Example</title>
</head>

Untuk interface utamanya, kita menggunakan tiga buah slider yang mewakili merah, hijau dan biru. Untuk menampilkan widget slider ini dibutuhkan beberapa library, yaitu ui.all.css, jquery-1.3.2.js, ui.core.css, dan ui.slider.js. (File-file tambahan jquery dapat diunduh di http://docs.jquery.com/Release:jQuery_1.3.2)


<body>
    <div id="container" class="ui-corner-all ui-widget-content 
      ui-helper-clearfix">
      <label>R:</label><div id="rSlider"></div><br>
      <label>G:</label><div id="gSlider"></div><br>
      <label>B:</label><div id="bSlider"></div>
      <div id="colorBox" class="ui-corner-all ui-widget- 
        content"></div>
      <input id="output" type="text" value="rgb(255,255,255)">
      <label id="outputLabel">Color value:</label>
    </div>
    <script type="text/javascript"  
      src="development-bundle/jquery-1.3.2.js"></script>
    <script type="text/javascript"  
      src="development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript"  
      src="development-bundle/ui/ui.slider.js"></script>
    <script type="text/javascript">       
      $(function(){
        var r = 255,
          g = 255,
          b = 255,
     rgbString;
        var sliderOpts = {
     min:0,
          max: 255,
     value: 255,
          slide: function(e, ui) {
            r = $("#rSlider").slider("value");
            g = $("#gSlider").slider("value");
            b = $("#bSlider").slider("value");
            rgbString = "rgb(" + r + "," + g + "," + b + ")";
            
            $("#colorBox").css({ backgroundColor: rgbString });
            $("#output").val(rgbString);
          }
        };
        $("#rSlider, #gSlider, #bSlider").slider(sliderOpts);
      });
    </script>
  </body>
</html>

Tampilan yang didapatkan ketika program dijalankan adalah sebagai berikut:

Visual Basic – Mendeteksi CD Rom dan Removable Disk

2010-02-03T18:58:00.002+07:00

Ingin tahu bagaimana mendeteksi CD Rom dan Removable Drive di Visual Basic? Tips kali ini akan membahas bagaimana mendeteksi CD Rom dan Removable Drive termasuk USB Flash Disc yang tertancap pada komputer saat itu.

Untuk mendeteksi keseluruhan drive yang ada di sebuah komputer, ada dua pemanggilan API (Application Programming Interface) yang dibutuhkan, yaitu Function GetdriveType dan Function GetLogicalDriveStrings. Function GetLogicalDriveStrings akan menghasilkan seluruh drive yang terpasang pada komputer, sedangakan function GetDriveType akan menghasilkan tipe drive. Jenis-jenis drive yang dapat dideteksi adalah Removable, Fixed, Remote, CD Rom dan RAM Drive.

Langkah-langkah untuk membuat programnya adalah:

Rancang sebuah form dengan sebuah button bernama command1, dua buah label, masing-masing bernama lblCDRom dan lblRemovable.

Bagian deklarasi untuk pemanggilan fungsi API adalah sebagai berikut:

Private Declare Function GetDriveType Lib "kernel32" _
  Alias "GetDriveTypeA" (ByVal nDrive As String) As Long
Private Declare Function GetLogicalDriveStrings Lib "kernel32" _ 
  Alias "GetLogicalDriveStringsA" (ByVal nBufferLength As Long, _ 
  ByVal lpBuffer As String) As Long

Private Const DRIVE_REMOVABLE = 2
Private Const DRIVE_CDROM = 5

Dan event penekanan button:

Private Sub Command1_Click()

Dim r&, allDrives$, JustOneDrive$, pos%, DriveType&
Dim RemovableDrive$, CDRomDrive$
Dim Removable As Integer, CDRom As Integer

allDrives$ = Space$(64)
r& = GetLogicalDriveStrings(Len(allDrives$), allDrives$)
allDrives$ = Left$(allDrives$, r&)
Do
pos% = InStr(allDrives$, Chr$(0))
If pos% Then
        JustOneDrive$ = Left$(allDrives$, pos%)
        allDrives$ = Mid$(allDrives$, pos% + 1, Len(allDrives$))
        DriveType& = GetDriveType(JustOneDrive$)
        If DriveType& = DRIVE_REMOVABLE Then
           Removable% = True
           RemovableDrive$ = RemovableDrive$ & " " & JustOneDrive$
        End If
        If DriveType& = DRIVE_CDROM Then
           CDRom% = True
           CDRomDrive$ = CDRomDrive$ & " " & JustOneDrive$
        End If
      End If
  Loop Until allDrives$ = ""
  
  If Removable% Then
    LblRemovable = "Drive Removable ditemukan pada drive " & UCase$(RemovableDrive$)
  Else
    LblRemovable = "Tidak ada Drive Removable."
  End If
  
  If CDRom% Then
    lblCDRom = "CD Rom Drive ditemukan pada drive " & UCase$(CDRomDrive$)
  Else
    lblCDRom = "Tidak ada CD Rom."
  End If
    
End Sub

Simpan form dengan nama detek.frm. Jalankan program, Anda akan mendapatkan tampilan seperti pada gambar.

Menggambar Dengan Menggunakan Objek Font, Color dan Graphics Pada Java

2010-01-23T07:32:00.004+07:00

Java menyediakan berbagai macam objek untuk keperluan grafik 2D yang dapat diakses pada library awt dan swing. Beberapa objek seperti Font, Color dan Graphics dapat dimanfaatkan untuk membuat tampilan grafik yang menarik.

Objek Color adalah objek yang berhubungan dengan pewarnaan. Ketika kita menggambar suatu objek atau menuliskan teks tertentu, Java menerima parameter berupa objek color yang dipanggil melalui method setcolor (pada objek graphics) untuk menentukan warna dari objek tersebut. Objek lain yang dapat diterima adalah objek Font untuk menentukan jenis huruf yang muncul ketika dilakukan penulisan (menggunakan method drawstring) pada Canvas/frame.

Langkah-langkahnya adalah:

Karena aplikasi ini merupakan aplikasi grafik, maka beberapa library perlu di-import terlebih dulu.


import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;

import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;

Beberapa warna yang perlu didefinisikan menjadi objek terlebih dulu adalah warna m_tRed (untuk menghasilkan efek transparansi warna merah), m_tGreen (untuk menghasilkan efek transparansi warna hijau), m_tBlue (untuk menghasilkan efek transparansi warna biru). Begitu pula untuk font yang hendak digunakan, perlu diinisialisasi terlebih dulu hingga menjadi objek yang nantinya dapat digunakan. Karena nama class adalah MyCanvas, maka penyimpanan file menggunakan nama MyCanvas.java
```
public class MyCanvas extends JComponent {
  private static Color m_tRed = new Color(255, 0, 0, 150);

  private static Color m_tGreen = new Color(0, 255, 0, 150);

  private static Color m_tBlue = new Color(0, 0, 255, 150);

  private static Font monoFont = new Font("Monospaced", Font.BOLD
      | Font.ITALIC, 36);

  private static Font sanSerifFont = new Font("SanSerif", Font.PLAIN, 12);

  private static Font serifFont = new Font("Serif", Font.BOLD, 24);
```

Berikutnya adalah meletakkan proses penggambaran pada method paintComponent (melakukan override). Method ini akan dipanggil secara otomatis ketika sebuah frame (window) menjadi visible atau di-resize.


public void paintComponent(Graphics g) {
    super.paintComponent(g);

    // draw entire component white
    g.setColor(Color.white);
    g.fillRect(0, 0, getWidth(), getHeight());

    // yellow circle
    g.setColor(Color.yellow);
    g.fillOval(0, 0, 240, 240);

    // magenta circle
    g.setColor(Color.magenta);
    g.fillOval(160, 160, 240, 240);

    // paint the icon below blue sqaure
    int w = java2sLogo.getIconWidth();
    int h = java2sLogo.getIconHeight();
    java2sLogo.paintIcon(this, g, 280 - (w / 2), 120 - (h / 2));

    // paint the icon below red sqaure
    java2sLogo.paintIcon(this, g, 120 - (w / 2), 280 - (h / 2));

    // transparent red square
    g.setColor(m_tRed);
    g.fillRect(60, 220, 120, 120);

    // transparent green circle
    g.setColor(m_tGreen);
    g.fillOval(140, 140, 120, 120);

    // transparent blue square
    g.setColor(m_tBlue);
    g.fillRect(220, 60, 120, 120);

    g.setColor(Color.black);

    g.setFont(monoFont);
    FontMetrics fm = g.getFontMetrics();
    w = fm.stringWidth("Java Source");
    h = fm.getAscent();
    g.drawString("Java Source", 120 - (w / 2), 120 + (h / 4));

    g.setFont(sanSerifFont);
    fm = g.getFontMetrics();
    w = fm.stringWidth("and");
    h = fm.getAscent();
    g.drawString("and", 200 - (w / 2), 200 + (h / 4));

    g.setFont(serifFont);
    fm = g.getFontMetrics();
    w = fm.stringWidth("Support.");
    h = fm.getAscent();
    g.drawString("Support.", 280 - (w / 2), 280 + (h / 4));
  }

Method lain yang diperlukan adalah method untuk menentukan dimensi dari frame.


public Dimension getPreferredSize() {
    return new Dimension(400, 400);
  }

  public Dimension getMinimumSize() {
    return getPreferredSize();
  }

Terakhir adalah implementasi class MyCanvas menjadi objek yang nyata pada void main.


  public static void main(String args[]) {
    JFrame mainFrame = new JFrame("Graphics demo");
    mainFrame.getContentPane().add(new MyCanvas());
    mainFrame.pack();
    mainFrame.setVisible(true);
  }
}

Untuk menjalankan program Java ini, kita dapat mengompilasi dengan javac.exe serta menjalankan menggunakan java.exe
```
> javac MyCanvas.java
> java MyCanvas
```
Tampilan yang didapatkan adalah seperti berikut:

Komponen Kalender Pada Layout 2 Kolom

2010-01-23T07:20:00.002+07:00

Situs dengan layout 2 kolom sering digunakan untuk memberikan ruang penambahan untuk komponen tertentu, misalnya clock, kalender, shoutbox, dan sebagainya. Layout 2 kolom ini, dapat dibuat dengan mendefinisikan style menggunakan Cascading Style Sheet (CSS).

Tip kali ini adalah menerapkan layout 2 kolom dengan menambahkan komponen kalender di sisi kanan. Komponen kalender dibuat dengan menggunakan JavaScript.Langkah-langkah untuk membuatnya adalah:

Kita buat kode awal untuk HTML dan mendefinisikan style untuk layout 2 kolom ini.


<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Kalender</title> 
  <style type="text/css"> 
    body { background: #bfadad; }
    #container {
      width: 755px;
      margin: 0 0 0 auto;  }    
    #header { height: 70px; }
    #footer {
    height: 68px;
    clear: both; }
#content {
  width: 470px;
  float: left;
  margin-top: -80px;
  padding-left: 46px; }
#navigation {
  width: 190px;
  float: left;
  margin-top: -20px;
  padding-left: 30px; } 
</style> 
</head> 
<body>

Layout dapat dibagi menjadi beberapa bagian, yaitu header (yang diletakkan di atas), content (sebagai bagian utama/isi) dan navigation (tempat meletakkan kalender).


<div id="container">
<div id="header">
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut...</p>
</div>

Untuk bagian navigation, kita akan langsung letakkan kode JavaScript untuk menampilkan kalender.


<div id="navigation">
<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
monthnames = new Array( "January", "Februrary", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "Decemeber"); 
var linkcount=0; 

function addlink(month, day, href) { 
  var entry = new Array(3); 
  entry[0] = month; 
  entry[1] = day; 
  entry[2] = href; 
  this[linkcount++] = entry; 
} 
  Array.prototype.addlink = addlink; 
  linkdays = new Array(); 
  monthdays = new Array(12); 
  monthdays[0]=31; monthdays[1]=28; monthdays[2]=31; 
  monthdays[3]=30; monthdays[4]=31; monthdays[5]=30; 
  monthdays[6]=31; monthdays[7]=31; monthdays[8]=30; 
  monthdays[9]=31; monthdays[10]=30; monthdays[11]=31; 
  
  todayDate=new Date(); 
  thisday=todayDate.getDay(); 
  thismonth=todayDate.getMonth(); 
  thisdate=todayDate.getDate(); 
  thisyear=todayDate.getYear(); 

  thisyear = thisyear % 100; 
  thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); 
  if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) 
    monthdays[1]++; 
  
  startspaces=thisdate; 
  while (startspaces > 7) startspaces-=7; 
  startspaces = thisday - startspaces + 1; 
  if (startspaces < 0) startspaces+=7; 

  document.write("<table border=2 bgcolor=white "); 
  document.write("bordercolor=black><font color=black>"); 
  document.write("<tr><td colspan=7><center><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></center></font></td></tr>"); 

  document.write("<tr>"); 
  document.write("<td align=center>Su</td>"); 
  document.write("<td align=center>M</td>"); 
  document.write("<td align=center>Tu</td>"); 
  document.write("<td align=center>W</td>"); 
  document.write("<td align=center>Th</td>"); 
  document.write("<td align=center>F</td>"); 
  document.write("<td align=center>Sa</td>"); 
  document.write("</tr>"); 
  document.write("<tr>"); 

  for (s=0;s<startspaces;s++) { 
    document.write("<td> </td>"); } 
  
  count=1; 
  while (count <= monthdays[thismonth]) { 
    for (b = startspaces;b<7;b++) { 
      linktrue=false; 
      document.write("<td>"); 
      for (c=0;c<linkdays.length;c++) { 
        if (linkdays[c] != null) { 
          if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { 
            document.write("<a href=\"" + linkdays[c][2] + "\">"); 
            linktrue=true; 
          } 
        } 
      } 

      if (count==thisdate) { 
        document.write("<font color='FF0000'><strong>"); } 
  
      if (count <= monthdays[thismonth]) { 
        document.write(count); 
      } else { 
        document.write(" "); } 
  
      if (count==thisdate) { 
        document.write("</strong></font>"); 
      } 
  
      if (linktrue) 
        document.write("</a>"); 
      document.write("</td>"); 
      count++; 
    } 
    document.write("</tr>"); 
    document.write("<tr>"); 
    startspaces=0; 
  } 
  document.write("</table></p>"); // End 
--> </SCRIPT> 
</div>
<div id="footer">
Copyright © <a href="mailto:your@address.here">Your Name</a>.
</div>
</div><!--container end-->

Berikut adalah contoh tampilan yang didapatkan:

Menerapkan Re-Captcha Untuk Form Pendaftaran

2010-01-18T15:44:00.003+07:00

CAPTCHA merupakan singkatan dari Completely Automated Public Turing test to tell Computers and Humans. Digunakan untuk melakukan tes dalam menentukan apakah data diisi oleh bot (komputer) atau manusia. CAPTCHA berisikan sebuah atau lebih tulisan yang tidak memiliki arti khusus dengan kumpulan karakter yang didistorsi sedemikian rupa serta background warna tertentu namun masih dalam batas yang wajar untuk dikenali oleh mata manusia. Sedangkan bagi komputer, karakter tersebut tidak dapat terbaca.

RECAPTCHA tidak jauh berbeda dengan CAPTCHA dan memiliki tujuan utama yang sama. Yang berbeda adalah tulisan yang diminta dimasukkan biasanya minimal dua kata, salah satu merupakan CAPTCHA biasa dan yang lain adalah kata dari sebuah buku atau media cetak yang akan di-digitalisasikan.

Proses digitalisasi sering kali menghadapi masalah pada karakter yang kurang tajam/banyak noise. Bagi mesin untuk mengenali karakter semacam itu amatlah sulit, namun bagi mata manusia, hal tersebut tidaklah terlalu sulit. Dari permasalahan digitalisasi tersebut, muncullah ide reCaptcha. Kata dari suatu buku yang sulit didigitalisasi (karena kurang baiknya kualitas scan), ditampilkan sebagai Captcha untuk meminta “bantuan” dari manusia agar mengetikkan kata apa sebenarnya yang dimaksud.

Untuk menggunakan re-Captcha, kita memerlukan library yang dapat diunduh di situs re-CAPTCHA, yaitu http://www.recaptcha.net. Tip kali ini adalah membuat halaman login dengan validasi menggunakan re-Captcha

Langkah-langkah untuk membuatnya adalah:

Kode PHP awal untuk aplikasi ini adalah mendefinisikan publickey dan privatekey. Kedua kunci ini bisa didapatkan dengan gratis melalui registrasi pada recaptcha.net.
```
<?php
$publickey = "6LeSGAkAAAAAAGHNAavz-_-DsdYdIfV_HoIuam67";
$privatekey = "6LeSGAkAAAAAAGuMfcuG9A0_740-qQ4auCon5piv ";

require_once('recaptchalib.php');
?>
```

Kita siapkan style untuk memperbaiki tampilan form login ini.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

.label{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#0066FF;
}
.tableBorder{
  border:solid 1px #0066FF;
  margin-top:100px;
}
.message{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#0066FF;
}

</style>
<title>PHP Recaptcha</title>
</head>
<body>
<div>

Proses berikutnya adalah menampilkan form yang terdiri dari masukan nama, email, telepon, dan password.


<?php
   if(!$_POST)
    {
       echo "<form action=\"\" method=\"POST\">";
       echo '<table cellpadding="2px" cellspacing="1px" bgcolor="#F4F5F7" width="400px" class="tableBorder" align="center">';
       echo '<tr>';
       echo '<td colspan="2" bgcolor="#0066FF" align="center" > </td>';
       echo '</tr>';
       echo '<tr>';
       echo '<td colspan="2" class="label"> </td>';
       echo '</tr>';
       echo "<tr>";
       echo '<td class="label" align="right" width="40%">Nama:</td>';
       echo '<td><input type="text" name="newname"></td></tr><tr>';
       echo '<td class="label" align="right" width="40%">Email:</td>';
       echo '<td><input type="text" name="email"></td></tr><tr>';
   echo '<td class="label" align="right" width="40%">Telp:</td>';
       echo '<td><input type="text" name="telp"></td></tr><tr>';
       echo '<td class="label" align="right" width="40%">Password:</td>';
       echo '<td><input type="password" name="newsandi1"></td></tr>';
       echo '<td class="label" align="right" width="40%">Re-type Password:</td>';
       echo '<td><input type="password" name="newsandi2"></td></tr>';
       echo '<td colspan=2  align="center" class="label" >';
       echo recaptcha_get_html($publickey);
       echo '</td>';
       echo '<tr>';
       echo '<td colspan=2 align="right"><input type="submit" value="Submit" /></td></tr>';
       echo "</table>";
     
       echo "</form>";
     
    }

Proses pengujian dilakukan dengan memanfaatkan fungsi recaptch_check_answer yang ada di library recaptcha. Jika respon benar, maka ditampilkan di layara "Respon re-captcha BENAR".


    else
    {
      $response = recaptcha_check_answer(
      $privatekey,
      $_SERVER['REMOTE_ADDR'],
      $_POST['recaptcha_challenge_field'],
      $_POST['recaptcha_response_field']);
     
      echo "Nama     : " . $_POST['newname'] . "<br>";
      echo "Email    : " . $_POST['email'] . "<br>";
      echo "Telp     : " . $_POST['telp'] . "<br>";
      echo "Password : " . $_POST['newsandi1'] . "<br>";
      if ( $response->is_valid )
      {
        echo "<h3>Respon re-captcha BENAR</h3>";
      
      }
        else
      {
        echo "<h3>Respon re-captcha SALAH</h3>.";
      }
    }

 ?>
 </div>
</body>
</html>

5. Berikut adalah beberapa contoh tampilan yang didapatkan:

Membuat Calculator dengan Java

2010-01-18T07:53:00.000+07:00

Java merupakan salah satu bahasa pemrograman yang cukup populer baik di kalangan mahasiswa IT maupun programmer/developer. Java mengusung konsep “Write once run anywhere”, yang artinya sekali programmer menuliskan kode untuk membuat suatu aplikasi, maka aplikasi tersebut dapat dijalankan di berbagai macam platform. Sebagai hasilnya, muncullah aplikasi-aplikasi Java pada berbagai platform, mulai dari Windows, Linux, Web, Mobile Phone, Peripheral dan banyak lagi.

Sebagai tip awal untuk Java, kita akan membuat aplikasi sederhana, yaitu kalkulator. Aplikasi kalkulator ini menggunakan mode GUI (Graphical User Interface) yang dilengkapi dengan button-button seperti halnya aplikasi Calculator pada Windows.
Langkah-langkahnya adalah:

Karena aplikasi ini merupakan aplikasi grafik, maka beberapa library perlu di-import terlebih dulu.


import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Container;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JApplet;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;

Aplikasi Calculator merupakan turunan dari class JFrame yang ada di library Java.swing. Kita mendefisinikan terlebih dulu class utamanya, yaitu class Calculator, yang sekaligus menunjukkan nama file untuk aplikasi ini, yaitu Calculator.java.
```
public class Calculator extends JFrame {
private JTextField display;
private double arg = 0;
private String op = "=";
private boolean start = true;
TextFieldHandler handler = new TextFieldHandler();
```

Kita siapkan sebuah konstruktor (yang pertama dieksekusi oleh aplikasi) untuk aplikasi calculator ini.


  public Calculator() {
    setLayout(new BorderLayout());

    display = new JTextField("0");
    display.setEditable(false);
    add(display, "North");

    JPanel p = new JPanel();
    p.setLayout(new GridLayout(4, 4));
    String buttons = "789/456*123-0.=+";
    for (int i = 0; i < buttons.length(); i++)
      addButton(p, buttons.substring(i, i + 1));
    add(p, "Center");
  }

Pada setiap button, kita perlu memanggil method addActionListener untuk "mendengar" setiap event yang terjadi pada button yang ada.
```
private void addButton(Container c, String s) {
  JButton b = new JButton(s);
  c.add(b);
  b.addActionListener(handler);
}
```

Event click yang terjadi pada setiap button, akan ditangkap oleh method ActionPerformed. Pada method inilah proses kalkulasi dilakukan.


private class TextFieldHandler implements ActionListener {
public void actionPerformed( ActionEvent event ) {
  String s = event.getActionCommand();
  if ('0' <= s.charAt(0) && s.charAt(0) <= '9' || s.equals(".")) {       
    if (start)  //pertama kali user menekan button         
      display.setText(s);       
    else
      display.setText(display.getText() + s);       
    start = false;     
    } else {
    if (start) {         
      if (s.equals("-")) {           
        display.setText(s);           
        start = false;         
      } else           
          op = s;       
    } else {         //text pada display diubah menjadi double           
      calculate(Double.parseDouble(display.getText()));         
      op = s;         
      start = true;
    } 
  }   
} }

Setelah database sukses dibuat, kita dapat menjalankan program VB.Net untuk menguji apakah koneksi dapat dibuat atau tidak. Konfigurasi standard yang kita masukkan adalah: Server: localhost, Username: root, Password: [kosong], Database: testkoneksi


  public void calculate(double n) {
  if (op.equals("+"))
    arg += n;
  else if (op.equals("-"))
    arg -= n;
  else if (op.equals("*"))
    arg *= n;
  else if (op.equals("/"))
    arg /= n;
  else if (op.equals("="))
    arg = n;
  //hasil ditampilkan
  display.setText("" + arg);
}

Terakhir adalah membuat void main yang merupakan penerapan class Calculator yang telah dibuat.


public static void main(String[] args) {
  Calculator calc = new Calculator();
  calc.setTitle("Calculator");
  calc.setSize(200, 200);
  calc.setVisible(true);
}

}

Untuk menjalankan program Java ini, kita dapat mengompilasi dengan javac.exe serta menjalankan menggunakan java.exe
```
> javac Calculator.java

> java Calculator
```
Tampilan yang didapatkan adalah seperti berikut:

Visual Basic – Membuat Teks Berjalan

2010-01-05T20:16:00.001+07:00

Teks berjalan seringkali digunakan pada display di toko untuk menarik perhatian. Dengan program yang pendek, kita dapat membuat teks berjalan seperti itu.

Langkah-langkah pembuatannya:

Buat form baru dengan 2 buah label yang bernama lblteks1 dan lblteks2. Sebuah timer yang bernama timer1 serta sebuah command button yang bernama cmdExit.

Interval untuk timer diubah menjadi 100. Logika programnya adalah meletakkan huruf terakhir pada posisi pertama setiap 0.1 detik (100 milisekon). Efek yang dihasilkan adalah teks berjalan dari kiri ke kanan. Sedangkan untuk teks yang berjalan dari kanan ke kiri, dilakukan dengan meletakkan huruf pertama pada posisi terakhir.

Private Sub cmdExit_Click()
  End
End Sub

Private Sub Form_Load()
  lblTeks1.Caption = "If you think you can win, you can win. "
  lblTeks2.Caption = "Faith is necessary to victory. "
End Sub

Private Sub Timer1_Timer()
  s$ = lblTeks1.Caption
  s$ = Right$(s$, 1) & Mid$(s$, 1, Len(s$) - 1)
  lblTeks1.Caption = s$
  
  s$ = lblTeks2.Caption
  s$ = Mid$(s$, 2, Len(s$)) & Left$(s$, 1)
  lblTeks2.Caption = s$
End Sub

Simpan form dengan nama FrmScroll. Lalu jalankan program dengan menekan tombol F5. Anda akan mendapatkan tampilan:

Dasar-dasar Pembuatan Situs Jejaring Sosial - Bag. 2

2009-12-29T23:34:00.003+07:00

Di posting lalu, kita mempelajari tentan dasar-dasar pembuatan situs jejaring sosial, khususnya pembuatan fungsi untuk membuat tabel user dan membuat tabel untuk menyimpan koneksi teman. Pada posting ini, akan didemokan bagaimana membuat aplikasi kecil berupa statistik teman, seperti berapa jumlah teman pria, wanita, single, in relationship, usia dan sebagainya.

Langkah-langkah untuk membuatnya adalah:

Dengan memanfaatkan function.php yang telah dibuat, kita membuat tabel user dan teman. Struktur untuk tabel user adalah ID, Nama, Password, Tahun lahir, Status, Sex, DateEntry dan TimeEntry. Status mempunyai jenis field angka yang mewakili Single (1), In Relationship (2), It’s Complicated (3), Married (4). Sedangkan Sex diwakili oleh karakter M (Male) dan F (Female).
```
<?php
require_once('function.php');

createTable("user",array("ID","Nama","Password","TahunLahir","Status","Sex","DateEntry","TimeEntry"),
array("int(2)","char(40)","char(40)","char(5)","int(2)","char(2)","DATE","TIME"));

createTable("Teman",array("ID","Teman","DateEntry","TimeEntry"),
array("char(4)","char(4)","DATE","TIME"));
```

Berikutnya kita mencoba untuk mengisikan data dummy dengan memanggil perintah insert yang ada pada function.php. Pada data dummy ini, kita mensimulasikan ada 10 user yang terdaftar (disimpan pada tabel user). Koneksi teman disimpan pada tabel teman.


insert("user",array("001","Duck 1",sha1('001'),"1986","2","M"));
insert("user",array("002"," Duck 2",sha1('002'),"1981","4","M"));
insert("user",array("003"," Duck 3",sha1('003'),"1988","2","F"));
insert("user",array("004"," Duck 4",sha1('004'),"1989","1","M"));
insert("user",array("005"," Duck 5",sha1('005'),"1991","1","F"));
insert("user",array("006"," Duck 6",sha1('006'),"1977","3","M"));
insert("user",array("007"," Duck 7",sha1('007'),"1990","2","M"));
insert("user",array("008"," Duck 8",sha1('008'),"1975","1","M"));
insert("user",array("009"," Duck 9",sha1('009'),"1979","3","M"));
insert("user",array("010"," Duck 10",sha1('010'),"1984","2","F"));


insert("Teman",array("001","002"));
insert("Teman",array("001","005"));
insert("Teman",array("001","007"));
insert("Teman",array("002","001"));
insert("Teman",array("002","003"));
insert("Teman",array("002","004"));
insert("Teman",array("002","005"));
insert("Teman",array("002","006"));
insert("Teman",array("002","007"));
insert("Teman",array("002","008"));
insert("Teman",array("002","009"));
insert("Teman",array("002","010"));
?>

Dari data teman di atas, kita dapat membaca bahwa ID 001 berteman dengan ID 002, 005, dan 007. Sedangkan 002 berteman dengan semua yang ada di table user.

Untuk menampilkan statistik, kita bisa mencegat dengan menambahkan beberapa perintah SQL untuk mengolah datanya. Pencegatan ini kita lakukan pada function login2 (di function.php). Mula-mula kita melakukan pengujian apakah password telah dimasukkan dengan benar. Jika benar, browser akan menampilkan selamat datang serta menghitung jumlah teman yang dipunyai.


function login2($userInput, $pass) {
 mysql_connect("localhost", "root", "");
 mysql_select_db('faceduuk'); 

 $query = "SELECT * FROM user WHERE ID = '".$userInput."';"; 

 $res = mysql_query($query); 
 if (mysql_numrows($res) <= 0) {
   echo "User ID is not available.<br />";
 } else
 {
   $pass2=sha1($pass);
   $row = mysql_fetch_assoc($res); 
   if ($row['Password']==$pass2) {
     echo "<h1>Selamat datang, ". $row['Nama'] . "</h1>";
  
 $id=$row['ID']; 

   $teman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahTeman = mysql_num_rows($teman);
 echo "<br>Jumlah teman Anda : $jumlahTeman";

Kemudian proses perhitungan statistik dimulai dengan menghitung jumlah teman pria, wanita, single, in relationship, dan merried.


 $tteman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahTemanPria = 0;
 for ($i=1; $i<=$jumlahTeman; $i++) {
  $rows=mysql_fetch_array($tteman);
  $jumlahTemanPria += mysql_num_rows(mysql_query("SELECT * FROM USER where id='$rows[1]' and sex='M'"));
 }
 echo "<br>Teman pria : $jumlahTemanPria - ".floor($jumlahTemanPria/$jumlahTeman*100)."%";
  
 $jumlahTemanWanita = $jumlahTeman-$jumlahTemanPria;
 echo "<br>Teman wanita : $jumlahTemanWanita - ".floor($jumlahTemanWanita/$jumlahTeman*100)."%<br>";
  
 $tteman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahTemanSingle = 0;
 for ($i=1; $i<=$jumlahTeman; $i++) {
  $rows=mysql_fetch_array($tteman);
  $jumlahTemanSingle += mysql_num_rows(mysql_query("SELECT * FROM USER where id='$rows[1]' and status='1'"));
 }
 echo "<br>Single : $jumlahTemanSingle - ".floor($jumlahTemanSingle/$jumlahTeman*100)."%";
 
 $tteman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahTemanInR = 0;
 for ($i=1; $i<=$jumlahTeman; $i++) {
  $rows=mysql_fetch_array($tteman);
  $jumlahTemanInR += mysql_num_rows(mysql_query("SELECT * FROM USER where id='$rows[1]' and status='2'"));
 }
 echo "<br>In Relationship : $jumlahTemanInR - ".floor($jumlahTemanInR/$jumlahTeman*100)."%"; 
 
 $tteman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahTemanMerried = 0;
 for ($i=1; $i<=$jumlahTeman; $i++) {
  $rows=mysql_fetch_array($tteman);
  $jumlahTemanMerried += mysql_num_rows(mysql_query("SELECT * FROM USER where id='$rows[1]' and status='4'"));
 } 
 echo "<br>Married : $jumlahTemanMerried - ".floor($jumlahTemanMerried/$jumlahTeman*100)."%";
 
 $tteman = mysql_query("SELECT * FROM teman where id='$id'");
 $jumlahUmurTeman = 0;
 for ($i=1; $i<=$jumlahTeman; $i++) {
  $rows=mysql_fetch_array($tteman);
  $rows=mysql_fetch_array(mysql_query("SELECT TahunLahir FROM USER where id='$rows[1]'"));
  $jumlahUmurTeman += 2009-$rows[0];
 }
 
 echo "<br>";
 echo "<br>Rata-rata usia : ".floor($jumlahUmurTeman/$jumlahTeman);
   } // = password


 } // user exist
} // function login
?>

Untuk melakukan fungsi pemanggilan login2, kita dapat membuat aplikasi kecil berikut:
```
<?php
require_once('function.php');
login2("001","001");
?>
```
Tampilan berikut merupakan tampilan yang didapatkan untuk pemanggilan login 001. Gambar berikutnya menunjukkan jika pemanggilan fungsi login diubah menjadi login2("002","002");

Dasar-dasar Pembuatan Situs Jejaring Sosial - Bag. 1

2009-12-29T23:25:00.004+07:00

Situs jejaring sosial seperti Facebook, MySpace ataupun Twitter sepertinya telah menjadi candu tersendiri bagi penggunanya. Beberapa tidak dapat memulai rutinitas hariannya sebelum membuat situs jejaring sosial untuk membaca kabar-kabar terbaru dari teman-temannya.

Kesuksesan dari situs jejaring sosial, membuat banyak pengembang web membuat situs serupa. Namun tentu saja pioneer dan mereka yang punya diferensiasilah yang akan lebih digemari.

Sulitkah membuat situs jejaring sosial? Dengan menggunakan PHP (bahasa pemrograman yang juga digunakan oleh Facebook) dan MySQL, kita akan menerapkan konsep sederhana dari suatu situs jejaring sosial, di mana user dapat mendaftar, login dan menampilkan jumlah serta nama teman.

Langkah-langkah untuk membuatnya adalah:

Kita buat suatu fungsi bernama createTable untuk membuat tabel pada database MySQL faceduuk.


<?php
function createTable($table_name, $field_name, $field_type) {
  $query = "CREATE TABLE IF NOT EXISTS ".$table_name." (";
  for ($i = 0; $i < count($field_name); $i++) {
    $query .= $field_name[$i]." ".$field_type[$i];
    if ($i != count($field_name)-1) $query .= ", ";
  }
  $query .= ")";
  mysql_connect("localhost", "root", "");
  mysql_select_db('faceduuk');
  mysql_query($query);
  echo $query;
}

createTable("user", array("UserID", "Password", "Nama", "TanggalEntry", "JamEntry"), array("char(10)", "char(40)", "char(40)", "date", "time"));

?>

Fungsi kedua yang akan kita buat adalah fungsi insert. Tujuan dari fungsi insert adalah memasukkan data pada tabel. Pada saat proses pendaftaran, fungsi ini akan dipanggil untuk menyimpan data yang telah dientry user ke dalam tabel.


function insert($tabel, $ins) {
  mysql_connect("localhost", "root", "");
  mysql_select_db('faceduuk');  

  $tanggal = date("Y-m-d");
  $jam = date("G:i:s");
  $data = "";
  for ($i=0; $i<count($ins); $i++) {
    $data .= "'".$ins[$i]."',";
  }
 
  $query = "INSERT INTO ". $tabel . 
  " VALUES (".$data." '".$tanggal."', '".$jam."');";
  mysql_query($query);     
}

Fungsi ketiga adalah fungsi saat user melakukan login. Simpan kumpulan fungsi ini dengan function.php.


function login2($userInput, $pass) {
  mysql_connect("localhost", "root", "");
  mysql_select_db('faceduuk');  
  
  $query = "SELECT * FROM user WHERE userID = '".$userInput."';";  

  $res = mysql_query($query);  
  if (mysql_numrows($res) <= 0) {
    echo "UserID is not available.<br />";
  } else
  {
    $pass2=md5($pass);
    $row = mysql_fetch_assoc($res);
    if ($row['Password']==$pass2) {
      echo "<h1>Selamat datang, ". $row['Nama'] . "</h1>";
      echo "<br>Teman Anda:<br>";
      
      //cari teman
      $query = "SELECT * FROM teman WHERE userID = '".$userInput."';";  
      $res = mysql_query($query);  
      $tot = mysql_numrows($res);
      echo "<strong><ul>";
      for ($i = 0; $i < mysql_numrows($res); $i++) {
        $row = mysql_fetch_assoc($res);
        echo "<li>".$row['teman']."</li>";
      }      
      
      $query = "SELECT * FROM teman WHERE teman = '".$userInput."';";  
      $res = mysql_query($query);  
      $tot += mysql_numrows($res);
      for ($i = 0; $i < mysql_numrows($res); $i++) {
        $row = mysql_fetch_assoc($res);
        echo "<li>".$row['userID']."</li>";
      }      
      echo "</ul></strong><br>";
      echo "Jumlah teman: ".$tot;
    } 
  }
}

Dengan memanfaatkan fungsi createTable, kita akan membuat dua buah tabel. Tabel pertama adalah tabel yang berisi data user (dengan field UserID, Password, Nama, TanggalEntry dan JamEntry) dan tabel kedua merupakan tabel teman (dengan field UserID, Teman, TanggalEntry dan JamEntry). Tabel teman ini menunjukkan siapa berteman dengan siapa. Setelah membuat tabel, kita isikan data teman secara manual. Tentu pada penerapannya, kita perlu membuat sebuah form untuk melakukan registrasi. Simpan file ini dengan nama data.php.
```
<?php
  require("function.php");
  createTable("user", array("UserID", "Password", "Nama", "TanggalEntry", "JamEntry"), array("char(10)", "char(40)", "char(40)", "date", "time"));
  
  insert("user", array("kwek",md5("kwek"),"Kwek Bebek"));  
  insert("user", array("kwak",md5("kwak"),"Kwak Bebek"));  
  insert("user", array("kwik",md5("kwik"),"Kwik Bebek"));  
  insert("user", array("kwok",md5("kwok"),"Kwok Bebek"));  

  createTable("teman", array("userID","teman", "tanggal", "jam"), 
  array("char(10)","char(10)", "date", "time"));
  insert("teman",array("kwak","kwek"));
  insert("teman",array("kwak","kwik"));
  insert("teman",array("kwak","kwok"));
  insert("teman",array("kwek","kwok"));
?>
```
Dari data di atas, tabel user akan berisi 4 buah record, yaitu kwek, kwak, kwok dan kwik. Lalu dari tabel teman, kita menyisipkan 4 buah record, yaitu kwak berteman dengan kwek, kwak berteman dengan kwik, kwak berteman dengan kwok dan kwek berteman dengan kwok.
Fungsi terakhir, yaitu fungsi login dapat kita gunakan untuk mensimulasikan saat user melakukan login. Agar praktis, kita akan panggil langsung fungsi login ke dalam sebuah file php. Simpan file php dengan nama testlogin.php.
```
<html>
<head>
<title>Faceduuk</title>
</head>
<body>
<?php
  require("function.php");
  login2("kwak", "kwak");
?>
</body>
</html> 
```
Tampilan berikut merupakan tampilan yang didapatkan untuk pemanggilan login kwak. Gambar berikutnya menunjukkan jika pemanggilan fungsi login diubah menjadi login2("kwek","kwek");

Visual Basic – Memotret Layar Dengan VB

2009-12-27T20:29:00.002+07:00

Windows menyediakan fasilitas pemotretan layar dengan menggunakan tombol print-screen. Program yang menyediakan fasilitas pemotretan layar ini adalah Hypersnap dan AcdSee. Sulitkah membuat program pemotretan layar?

Dengan menggunakan VB, kita bisa mensimulasikan penekanan tombol Print-Screen ini, dan meletakkan ke dalam sebuah picture box. Langkah-langkah pembuatannya:

Buat form baru dengan 2 buah picture box yang bernama picOuter dan picInner, sebuah Scroll bar vertikal yang bernama VBar, sebuah scroll bar horisontal bernama Hbar dan dua buah command button, masing-masing bernama cmdCapture dan cmdExit.

Modul yang diperlukan yaitu: Sub PrintScreen untuk mensimulasikan penekanan tombol Print Screen dan menampilkan pada picture box serta Sub ArrangeScrollsBars untuk mengatur scroll bar vertikal dan horisontal.

Private Function PrintScreen(PictureBox As PictureBox) As Boolean
  On Error GoTo ErrorTrap
  Clipboard.Clear
  DoEvents
  
  '0 = layar, 1 = form
  keybd_event vbKeySnapshot, 0, 0&, 0&
   
  DoEvents
  Set PictureBox.Picture = Clipboard.GetData(0)
  DoEvents
  'Clipboard.Clear
  PrintScreen = True

ErrorTrap:
End Function

Private Sub ArrangeScrollBars()
  Dim have_wid As Single, have_hgt As Single
  Dim need_wid As Single, need_hgt As Single
  Dim need_hbar As Boolean, need_vbar As Boolean

  On Error Resume Next
  If WindowState = vbMinimized Then Exit Sub

  need_wid = picInner.Width + (picOuter.Width - picOuter.ScaleWidth)
  need_hgt = picInner.Height + (picOuter.Height - picOuter.ScaleHeight)
  have_wid = picOuter.Width
  have_hgt = picOuter.Height
  need_hbar = (need_wid > have_wid)
  If need_hbar Then have_hgt = have_hgt - HBar.Height

  need_vbar = (need_hgt > have_hgt)
  If need_vbar Then
    have_wid = have_wid - VBar.Width
    If Not need_hbar Then
      need_hbar = (need_wid > have_wid)
      If need_hbar Then have_hgt = have_hgt - HBar.Height
    End If
  End If

  picOuter.Move picOuter.Left, picOuter.Top, have_wid, have_hgt

  If need_hbar Then
    HBar.Move picOuter.Left, have_hgt, have_wid
    HBar.Min = 0
    HBar.Max = picOuter.ScaleWidth - picInner.Width
    HBar.LargeChange = picOuter.ScaleWidth
    HBar.SmallChange = picOuter.ScaleWidth / 5
    HBar.Visible = True
  Else
    HBar.Visible = False
  End If

  If need_vbar Then
    VBar.Move picOuter.Left + picOuter.Width, picOuter.Top, VBar.Width, have_hgt
    VBar.Min = 0
    VBar.Max = picOuter.ScaleHeight - picInner.Height
    VBar.LargeChange = picOuter.ScaleHeight
    VBar.SmallChange = picOuter.ScaleHeight / 5
    VBar.Visible = True
  Else
    VBar.Visible = False
  End If
End Sub

Berikutnya adalah mengatur event untuk pergeseran scroll bar, form load serta penekanan button.

Option Explicit

Private Declare Sub keybd_event Lib "user32" (ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Private Sub cmdCapture_Click()
  On Error Resume Next

  picInner.Picture = LoadPicture("")
  Me.WindowState = vbMinimized
  PrintScreen picInner
  Me.WindowState = vbNormal
  ArrangeScrollBars
End Sub

Private Sub cmdExit_Click()
  End
End Sub

Private Sub Form_Load()
  Dim Counter As Integer
  Dim TempString() As String

  On Error Resume Next
  picInner.Move picOuter.ScaleLeft, picOuter.ScaleTop, picOuter.ScaleWidth, picOuter.ScaleHeight
  
End Sub

Visual Basic – Simulasi Pencampuran Warna

2009-11-29T12:10:00.003+07:00

Salah satu mode warna yang dikenal dalam pengolahan grafis adalah mode RGB. Mode RGB merupakan mode untuk membentuk suatu warna lewat intensitas merah (Red), hijau (Green) dan biru (Biru). Dengan menggunakan VB, kita dapat membuat simulasi pencampuran warna mode RGB ini.

Masing-masing intensitas berkisar antara 0 sampai dengan 255 (dalam heksa FF). Angka 0 adalah yang paling rendah dan 255 adalah yang paling tinggi. Pencampuran warna dengan intesitas 0 semua akan menghasilkan warna hitam, sedangkan pencampuran warna dengan intensitas 255 semua akan menghasilkan warna putih. Untuk membuat simulasi pencampuran warna ini, langkahnya:

Buat form baru dengan 3 buah frame untuk mengatur intensitas merah, hijau dan biru. Masing-masing frame berisi sebuah shape (berbentuk lingkaran dengan nama shape1), slider (yang bernama slider) dan textbox. Shape1 dan slider merupakan array dengan index 0 untuk shape1 dan slide di frame biru, 1 untuk shape1 dan slider di frame hijau dan 2 untuk shape1 dan slider di frame merah. Sedangkan textbox pada masing-masing frame bernama txtblue, txtgreen dan txtred.
Tambahkan sebuah button dengan nama cmdExit dan frame lagi untuk menampilkan hasil pencampuran dengan sebuah shape yang bernama shape2 serta label2 untuk menampilkan nilai dari warna pencampuran.

Fungsi-fungsi yang diperlukan yaitu: getinten untuk mendapatkan intensitas warna serta setcolor untuk menampilkan hasil dari pencampuran warna pada shape2.

Private Sub getinten()

  Dim tmp As Long
  tmp = Shape2.BackColor
  While tmp > &HFF
    tmp = tmp - &H100
  Wend
  redvalue = tmp
  
  tmp = (Shape2.BackColor - redvalue) / &H100
  While tmp > &HFF
    tmp = tmp - &H100
  Wend
  greenvalue = tmp
  
  bluevalue = Shape2.BackColor \ &H10000
  
  'jangan lupa ngeset slidernya...
  Dim persentase As Integer
    slider(2).Value = redvalue
    persentase = redvalue * 100 / 255
    txtRed.Text = Str(persentase) + " %"

    slider(1).Value = greenvalue
    persentase = greenvalue * 100 / 255
    txtGreen.Text = Str(persentase) + " %"
  
    slider(0).Value = bluevalue
    persentase = bluevalue * 100 / 255
    txtBlue.Text = Str(persentase) + " %"
  
  'sekarang taruh intensitasnya di tempatnya
  setcolor
End Sub

Private Sub setcolor()
  Shape1(0).BackColor = bluevalue * 256 ^ 2
  Shape1(1).BackColor = greenvalue * 256
  Shape1(2).BackColor = redvalue  
  Shape2.BackColor = Shape1(0).BackColor + Shape1(1).BackColor + Shape1(2).BackColor
End Sub

Berikutnya adalah mengatur event untuk pergeseran slider serta form load.

Private Sub cmdExit_Click()
  End
End Sub

Private Sub Form_Load()
  Dim Index, persentase As Integer
  redvalue = 0
  greenvalue = 0
  bluevalue = 0

  setcolor
  
End Sub

Private Sub Slider_Scroll(Index As Integer)
  Dim persentase As Integer
  persentase = slider(Index).Value * 100 / 256
  
  Select Case Index
  Case 0
    bluevalue = slider(0).Value
    txtBlue.Text = Str(persentase) + " %"
    Shape1(0).BackColor = bluevalue * 256 ^ 2
  Case 1
    greenvalue = slider(1).Value
    txtGreen.Text = Str(persentase) + " %"
    Shape1(1).BackColor = greenvalue * 256
  Case 2
    redvalue = slider(2).Value
    txtRed.Text = Str(persentase) + " %"
    Shape1(2).BackColor = redvalue
  End Select
  Shape2.BackColor = Shape1(0).BackColor + Shape1(1).BackColor + Shape1(2).BackColor
  lblINtensitas.Caption = Shape2.BackColor & " (" & Hex$(Shape2.BackColor) & ")"
End Sub

Simpan program, lalu jalankan. Tampilan yang Anda dapatkan seperti pada gambar.

Visual Basic – Koversi Latin Ke Romawi

2009-11-20T20:15:00.002+07:00

Angka romawi termasuk salah satu sistem penghitungan tertua yang diperkenalkan oleh bangsa Romawi. Walaupun sistem perhitungan modern saat ini menggunakan angka latin, tapi angka romawi ini ternyata masih sering kita temui. Trik VB kali ini adalah mengonversi angka latin menjadi angka romawi.

VB memang tidak menyediakan secara khusus fungsi untuk mengubah angka latin ke romawi atau sebaliknya. Tapi dengan melihat pola angka romawi, kita dapat membuat sebuah fungsi yang mengonversi angka latin menjadi romawi.

Langkah-langkahnya adalah:

Buat form baru dengan dua buat text box yang bernama txtnumber (untuk memasukkan angka latin) dan txthasil untuk menampilkan hasil konversi. Tambahkan juga sebuah command button yang bernama cmdconvert.

Ketikan fungsi untuk mengonversi.

Function Latin2Roman(number As Long) As String
  Dim n As Long
  Dim j As Integer, i As Integer
  Dim Rom, Latin
  Dim Romawi As String
  
  Rom = Array("i", "iv", "v", "ix", _
              "x", "xl", "l", "xc", _
              "c", "cd", "d", "cm", _
              "m")
              
  Latin = Array(1, 4, 5, 9, _
                10, 40, 50, 90, _
                100, 400, 500, 900, _
                1000)
  
  Romawi = ""
  
  For j = 12 To 0 Step -1
    n = Int(number / Latin(j))
    If n <> 0 Then
      For i = 1 To n
        Romawi = Romawi & Rom(j)
      Next i
    End If
    number = number Mod Latin(j)
  Next
  Latin2Roman = Romawi

End Function

Berikutnya adalah mengatur event untuk penekanan button koversi.

Private Sub cmdConvert_Click()
  If Val(txtNumber.Text) = 0 Then Exit Sub
  txthasil.Text = Latin2Roman(Val(txtNumber.Text))
End Sub

Simpan program, lalu jalankan. Tampilan yang Anda dapatkan seperti pada gambar.

Menggambar Peta Menggunakan Google Maps API

2009-11-11T04:57:00.004+07:00

Pada situs sebuah perusahaan umumnya diberikan informasi singkat tentang lokasi atau alamat perusahaan tersebut. Dengan menggunakan Google Maps API, Anda dapat memberikan sentuhan dengan menggambarkan lokasi perusahaan.

Masih mengupas kemampuan Google Web API, kali ini kita akan bermain-main dengan menggunakan Google Maps. Seperti namanya, Google Maps akan memetakan jalan, rute atau lokasi tertentu dari suatu wilayah dan menampilkannya secara visual, lengkap dengan fasilitas zoom dan foto satelit.

Langkah-langkah untuk membuatnya adalah:

Membuat header utama untuk kode HTML


<script src="http://maps.google.com/maps?file=api&v=2&key=your gmap api key here"
type="text/javascript">
</script>
<html>
<head>
<title> Google Map </title>
</head>

<body>

Berikutnya adalah meng-generate map dengan menggunakan JavaScript. Namun untuk inisialisasi data, kita dapat lakukan dengan menggunakan PHP.


<?php

 $KEY = "Google Key Here";
 $MAPS_HOST = "maps.google.com";
 $delay = 0;
 $base_url = "http://" . $MAPS_HOST .
   "/maps/geo?output=xml" . "&key=" . $KEY;
 $geocode_pending = true;      
 $address = "Malang, Indonesia";

 $latlonArr = array();

Setelah mendefinisikan area yang hendak dipetakan, perlu ditentukan lokasi garis bujur dan garis lintang. Lokasi garis bujur dan garis lintang inilah yang akan menjadi parameter bagi Google Maps untuk menggambarkan peta.


while($geocode_pending)
 {
   $request_url = $base_url . "&q=" . urlencode($address);
   $xml = simplexml_load_file($request_url) or die("url not loading");
   $status = $xml->Response->Status->code;
   if (strcmp($status, "200") == 0) {
     // Successful geocode
     $geocode_pending = false;
     $coordinates = $xml->Response->Placemark->Point->coordinates;
     $coordinatesSplit = split(",", $coordinates);
     // Format: Longitude, Latitude, Altitude
     $lat = $coordinatesSplit[1];
     $lng = $coordinatesSplit[0];
     $latlonArr['lat'] = $lat;
     $latlonArr['lon'] = $lng;
         
   } else if (strcmp($status, "620") == 0) {
     // sent geocodes too fast
     $delay += 100000;
   } else {
     // failure to geocode
     $geocode_pending = false;
   }
   usleep($delay);
   break;
 }

Lalu kita memanggil Google Maps API dengan cara menyimpan ke dalam suatu variabel.


 //plot map
 $str =  '<script>
   var map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.addControl(new GScaleControl());
   map.setCenter(new GLatLng('.$latlonArr['lat'].', '.$latlonArr['lon'].'), 6);
                                               
   // Creates a default marker whose info window displays the given number
   function createMarker(point, number)
   {
     var marker = new GMarker(point);
     // Show this markers index in the info window when it is clicked
     var html = number;
     GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
     return marker;
   };';
   $str .= "var point = new GLatLng(" . $latlonArr['lat'] . "," . $latlonArr['lon'] . ");\n";
   $str .= "var marker = createMarker(point, '" . addslashes($address)."');\n";
   $str .= "map.addOverlay(marker);\n";
   $str .= "</script>\n";
?>

Proses penggambaran peta adalah sebagai berikut:


<div id="map" style="width: 500px;height:400px"></div>
 <?php
  // plot the map with default marker icon
  echo $str;
 ?>
</body>
</html>

Berikut adalah contoh tampilan yang didapatkan:

Memanfaatkan Yahoo! API untuk Saran Perbaikan Kata Kunci Pencarian

2009-11-06T14:28:00.004+07:00

Typographical error atau sering disingkat dengan typo merupakan kesalahan ketik yang terjadi selama proses pengetikkan. Terjadinya kesalahan bisa jadi karena selip pada jari saat mengetik sehingga ada karakter yang kurang atau bertambah. Sebagai contoh, mengetikkan kata “Computer” bisa selip menjadi “Compiter” – yang dikarenakan huruf “u” dan “i” bersebelahan pada keyboard.

Typo ini sempat dimanfaatkan untuk mencuri account user dan password beberapa web-based email atau situs e-banking. Dengan mengamati typo yang sering terjadi saat pengetikan alamat web-based email atau e-banking, beberapa oknum memanfaatkan untuk membuat situs yang serupa. Alih-alih masuk pada situs yang benar, user malah masuk pada situs tiruan tersebut.

Tidak kalah dengan Google API, Yahoo! juga mempunyai Application Programming Interface (API) yang dapat digunakan untuk memberikan saran perbaikan dari Typo.
Pada aplikasi sederhana ini kita akan membuat sebuah class untuk memanfaatkan Yahoo! API dalam memberikan saran perbaikan dari suatu kata kunci pencarian.

Langkah-langkah untuk membuatnya adalah:

Kita buat terlebih dulu atribut-atribut yang dibutuhkan. Beberapa atribut penting yang akan digunakan adalah $title (judul dari chart), $data (berisi data dari chart yang hendak digambar), dan $size (menentukan ukuran dari chart)


<?php

class spellingSuggestion {
    var $query;
        
    var 
       // Alamat Spelling Suggestion dari Yahoo!
       $request_url = 'http://search.yahooapis.com/WebSearchService/V1/spellingSuggestion', 
       // xml, json or php (serialized PHP format)
       $output = 'php', 
       $appid = '', 
       $response = '', 
       $result = '';

    function search( $query ) {
        $this->query = $query;
        if ( $this->response = file_get_contents( $this->request_url . "?appid=" . urlencode( $this->appid ) . "&output=" . urlencode( $this->output ) . "&query=" . urlencode( $this->query ) ) ) 
            return true;
        else
            return false;
    }    

    function getSuggestedWord( $query ) {
        $this->query = $query;
        $this->setOutput( 'php' );
        if( $this->search( $query ) ) {
            $this->result = unserialize( $this->response );
            if ( isset( $this->result['ResultSet']['Result'] ) )
                return $this->result['ResultSet']['Result'];
            else
                return "";
        }
        else {
            return "";
        }
    }
    
    function setOutput( $output ) {
        $this->output = $output;
    }
}
?>

Setelah class selesai, kita akan buat terlebih dulu form untuk meminta masukkan dari user. Masukan dari user tersebut akan menjadi parameter sebagai teks yang hendak diperbaiki dengan memanggil file suggest.php.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Yahoo! API Spelling Suggestion</title> 
<link href="style.css" rel="stylesheet" type="text/css">

</head> 
<body> 
  <div class="clear"></div> 
  <form method="POST" action="suggest.php">
  <div id="content"> 
    <p>Masukkan teks: </p>
    <p><form action="" methos="get">
    <input type="text" name="q" value="" /> 
    <input type="submit" name="s" value="Cek" /></form>
    </p>
  </div>
  </form>

  </body>

</html>

File suggest.php akan menggunakan class yang telah dan mendapatkan outputnya untuk ditampilkan.


<html>
<head>
<title>Saran Perbaikan</title>
<link href="style.css" rel="stylesheet" type="text/css">
</body>
<?php
require_once( 'YahooSpell.php' );
if ( isset( $_POST['q'] ) && $_POST['q'] != '' ) {
    $query = strip_tags( $_POST['q'] );
    // buat objek
    $spellingSuggestion = new spellingSuggestion();
    // Set the application id
    $spellingSuggestion->appid = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    // Get the suggested word
    $result = $spellingSuggestion->getSuggestedWord( $query );
    // Respon XML
    $spellingSuggestion->setOutput( 'xml' );
    $spellingSuggestion->search( $query );
    $xmlResponse = $spellingSuggestion->response;    
    
    // Respon PHP
    $spellingSuggestion->setOutput( 'php' );
    $spellingSuggestion->search( $query );
    $phpResponse = $spellingSuggestion->response;    
    
    // Respon XML - JSON
    $spellingSuggestion->setOutput( 'json' );
    $spellingSuggestion->search( $query );
    $jsonResponse = $spellingSuggestion->response;
    
}
    
    echo '<h2>Hasil Pemanggilan API</h2> ';
    echo '<p><strong>Saran perbaikan:</strong>';
    echo '<h3>';
      if( $result != '' ) 
        echo $result; 
      else 
        echo " Tidak ada perbaikan </p>";
    echo '</h3>';    
    echo "<p><strong>Respon XML:</strong></p> ";
    echo "<p><pre><code>";
    echo htmlentities( $xmlResponse ) . "; </code></pre> ";
    echo "</p>    ";
    echo "<p><strong>Respon PHP:</strong></p> ";
    echo "<p><pre><code>" .  htmlentities( $phpResponse ) . "</code></pre> ";
    echo "</p>    ";
    echo "<p><strong>Respon JSON:</strong></p> ";
    echo "<p><pre><code>" . htmlentities( $jsonResponse ) . "</code></pre> ";
    echo "</p>     ";
    echo "</div></div> ";
    echo "<br /><br /> ";
    echo "</body></html> "

?>

Langkah terakhir adalah membuat style untuk memperbaiki tampilan. File style ini disimpan dengan nama style.css yang akan digunakan pada 2 file sebelumnya yaitu test.html dan suggest.php.


body  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  background-color: #FFFFFF;}
  
pre   {
  color:#ff6666;
  padding:10px;
  border:1px solid #666;
  margin: 5px 0;} 
  
.clear  {
  display:block;
  clear:both;}

Contoh tampilan yang didapatkan adalah sebagai berikut:

Visual Basic - Mengolah Data Array

2009-11-05T22:11:00.000+07:00

Array termasuk struktur data yang penting dalam bahasa pemrograman terstruktur. Sebuah array mampu menampung banyak data sejenis sekaligus. Pada tip kali ini, diberikan contoh pengolahan data di dalam array untuk melakukan perhitungan total, rata-rata, nilai minimum dan nilai maksimum.

Salah satu keuntungan bahasa Basic dalam mengolah array adalah ukuran array dapat diubah pada saat runtime. Jika pada awal program array disiapkan untuk menampung 100 data misalnya, maka jika sewaktu-waktu pada saat program dijalankan, diperlukan jumlah data lebih dari 100, maka ada perintah REDIM yang dapat dimanfaatkan untuk mengubah ukuran array. Program di bawah ini menunjukkan bagaimana pemanfaatan array untuk menghitung total, rata-rata, nilai minimum dan nilai maksimum.

Langkah-langkahnya adalah:

Buat form baru, tambahkan 2 buah textbox (dengan nama txtData sebagai textbox untuk entry data dan txtHasil sebagai textbox yang menampilkan hasil pengolahan array), 7 buah command button (cmdInsert, cmdRemove, cmdClear, cmdTotal, cmdRata, cmdMaks, dan cmdMin), sebuah list box (lstData untuk menampung data) serta sebuah label (lblNData untuk menampilkan jumlah data yang telah dimasukkan saat ini).

Fungsi pengolahan arraynya ada 3, yaitu: ArraySum untuk menghitung total jumlah (Sigma), ArrayMin untuk menghasilkan nilai terkecil dari array, ArrayMaks untuk menghasilkan nilai terbesar dari array, dan RemoveItem untuk menghapus data ke N di dalam array.

Option Explicit
Dim arr() As Double

Function ArraySum() As Variant
    Dim i As Long, result As Variant
    For i = LBound(arr) To UBound(arr)
      result = result + arr(i)
    Next
    ArraySum = result
End Function
Function ArrayMin() As Variant
    Dim i As Long, Min As Variant
    Min = arr(0)
    For i = 1 To lstData.ListCount - 1
      If Min > arr(i) Then Min = arr(i)
    Next
    ArrayMin = Min
End Function
Function ArrayMaks() As Variant
    Dim i As Long, Maks As Variant
    Maks = arr(0)
    For i = 1 To lstData.ListCount - 1
      If Maks < arr(i) Then Maks = arr(i)
    Next
    ArrayMaks = Maks
End Function

Private Sub RemoveItem(n As Long)
  Dim i As Long
  For i = n To lstData.ListCount - 1
    arr(i) = arr(i + 1)
  Next i
  arr(lstData.ListCount - 1) = 0
End Sub

Berikutnya adalah mengatur event untuk penekanan button serta.

Option Explicit

Dim arr() As Double
Private Sub cmdClear_Click()
  lstData.Clear
  lblNData.Caption = "Jumlah data : " & lstData.ListCount
  ReDim arr(0)
End Sub

Private Sub cmdInsert_Click()
  lstData.AddItem Val(txtData.Text)
  ReDim Preserve arr(lstData.ListCount)
  arr(lstData.ListCount - 1) = Val(txtData.Text)
  txtData.Text = ""
  txtData.SetFocus
  lblNData.Caption = "Jumlah data : " & lstData.ListCount
End Sub

Private Sub cmdMaks_Click()
  txtHasil.Text = Format(ArrayMaks, "##,##0.00")
End Sub

Private Sub cmdMin_Click()
  txtHasil.Text = Format(ArrayMin, "##,##0.00")
End Sub

Private Sub cmdRata_Click()
  Dim hasil As Double
  hasil = ArraySum
  txtHasil.Text = Format(hasil / lstData.ListCount, "##,##0.00")
End Sub

Private Sub cmdRemove_Click()
  If lstData.ListIndex >= 0 Then RemoveItem lstData.ListIndex
  lstData.RemoveItem lstData.ListIndex
  lblNData.Caption = "Jumlah data : " & lstData.ListCount 
End Sub

Private Sub cmdTotal_Click()
  Dim hasil As Double
  hasil = ArraySum
  txtHasil.Text = Format(hasil, "##,##0.00")
End Sub

Private Sub Form_Load()
  lstData.Clear
End Sub

Simpan program, lalu jalankan. Tampilan yang Anda dapatkan seperti pada gambar.

Visual Basic – Membuat Form yang Transparan

2009-10-31T09:39:00.004+07:00

Sebuah form merupakan tempat meletakkan kontrol seperti text box, command button, dan label. Form mempunyai properti warna latar belakang yang standardnya adalah warna dari button face.

Anda bisa dengan mudah mengganti warna latar belakang dari sebuah form lewat properti backcolor dengan format &HRRGGBB, di mana &H merupakan notasi untuk bilangan heksa, RR adalah intensitas warna merah, GG adalah intensitas warna hijau dan BB adalah intensitas warna biru (ketiganya dalam notasi bilangan heksa). Tapi bisakah warna latar belakang dari form dibuat transparan? Bisa. Dengan memanfaatkan fungsi API (Application Programming Interface) yang memang disediakan oleh Windows untuk mengatasi keterbatasan perintah-perintah pada VB.

Langkah-langkah membuat form transparan adalah:

Buat form baru, tambahkan 3 command button (cmdTransparan untuk mengubah form menjadi transparan dan sebaliknya, cmdFrame untuk menghilangkan border dari from dan cmdExit untuk keluar dari program) dan satu text box.

Buat sebuah modul baru lewat menu Project|Add Module. Pada module inilah deklarasi untuk fungsi-fungsi API diketikkan.

Option Explicit

Public Declare Function SendMessage _
 Lib "user32" Alias "SendMessageA" (ByVal hwnd As Long, _
 ByVal wMsg As Long, ByVal wParam As Long, lParam As Any) As Long
Public Declare Function CreateRectRgn _
 Lib "gdi32" (ByVal X1 As Long, ByVal Y1 As Long, _
 ByVal X2 As Long, ByVal Y2 As Long) As Long
Public Declare Function CombineRgn _
 Lib "gdi32" (ByVal hDestRgn As Long, ByVal hSrcRgn1 As Long, _
 ByVal hSrcRgn2 As Long, ByVal nCombineMode As Long) As Long
Public Declare Function SetWindowRgn _
 Lib "user32" (ByVal hwnd As Long, ByVal hRgn As Long, _
 ByVal bRedraw As Boolean) As Long
Public Declare Function DeleteObject _
 Lib "gdi32" (ByVal hObject As Long) As Long
Public Declare Function ReleaseCapture Lib "user32" () As Long
Public Const RGN_OR = 2
Public Const RGN_DIFF = 4
Public Const WM_NCLBUTTONDOWN = &HA1
Public Const HTCAPTION = 2

Subrutin utamanya adalah Sub changeFormEffect(inEffect As Integer). Untuk membuat sebuah form transparan, sub ini dipanggil dengan menggunakan parameter 1. Untuk menormalkan form, sub ini dipanggil lagi dengan menggunakan parameter 0.

Private Sub changeFormEffect(inEffect As Integer)
   Dim w As Single, h As Single
   Dim edge As Single, topEdge As Single
   Dim mLeft, mTop
   Dim i As Integer
   Dim r As Long
   Dim outer As Long, inner As Long
  
   w = ScaleX(Width, vbTwips, vbPixels)
   h = ScaleY(Height, vbTwips, vbPixels)
  
   If inEffect = 0 Then
       mFormRegion = CreateRectRgn(0, 0, w, h)
       SetWindowRgn hwnd, mFormRegion, True
       Exit Sub
   End If
  
   mFormRegion = CreateRectRgn(0, 0, 0, 0)
   edge = (w - ScaleWidth) / 2
   topEdge = h - edge - ScaleHeight
   If inEffect = 1 Then
       outer = CreateRectRgn(0, 0, w, h)
       inner = CreateRectRgn(edge, topEdge, w - edge, h - edge)
       CombineRgn mFormRegion, outer, inner, RGN_DIFF
   End If
  
   For i = 0 To Me.Controls.Count - 1
       If Me.Controls(i).Visible = True Then
           mLeft = ScaleX(Me.Controls(i).Left, Me.ScaleMode, vbPixels) + edge
           mTop = ScaleX(Me.Controls(i).Top, Me.ScaleMode, vbPixels) + topEdge
           r = CreateRectRgn(mLeft, mTop, _
               mLeft + ScaleX(Me.Controls(i).Width, Me.ScaleMode, vbPixels), _
               mTop + ScaleY(Me.Controls(i).Height, Me.ScaleMode, vbPixels))
           CombineRgn mFormRegion, r, mFormRegion, RGN_OR
       End If
   Next
   SetWindowRgn hwnd, mFormRegion, True
End Sub

Berikutnya adalah mengatur event untuk penekanan tombol serta mempersiapkan form pada event form_load.

Option Explicit

Dim formEffectIndex As Integer
Dim mFormRegion As Long
Dim msg1 As String, msg2 As String

Private Sub cmdExit_Click()
 End
End Sub

Private Sub cmdFrame_Click()
   If formEffectIndex = 1 Then
       formEffectIndex = 2
   Else
       formEffectIndex = 1
   End If
   changeFormEffect formEffectIndex
End Sub

Private Sub cmdTransparan_Click()
   If formEffectIndex <> 0 Then
       formEffectIndex = 0
       cmdFrame.Enabled = False
   Else
       formEffectIndex = 1
       cmdFrame.Enabled = True
   End If
   changeFormEffect formEffectIndex
End Sub

Private Sub Form_Load()
   Me.ScaleMode = vbPixels
   formEffectIndex = 0
   cmdFrame.Enabled = False
   changeFormEffect formEffectIndex
End Sub

Private Sub Form_QueryUnload(Cancel As Integer, UnloadMode As Integer)
   SetWindowRgn hwnd, 0, False
   DeleteObject mFormRegion
End Sub

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
   If Button <> vbLeftButton Then
        Exit Sub
   End If
   ReleaseCapture
   SendMessage Me.hwnd, WM_NCLBUTTONDOWN, HTCAPTION, 0&
End Sub

Simpan program, lalu jalankan. Tampilan awal form adalah form normal (tidak transparan).

Jika Anda mengklik button Transparan, maka Anda akan mendapatkan tampilan seperti pada gambar:

Button Frame digunakan untuk menghilangkan frame dari form sehingga form benar-benar transparan.

Visual Basic – Menampilkan Animasi

2009-10-17T11:10:00.004+07:00

Animation Control adalah cara termudah untuk menambahkan animasi pada program VB Anda. Dengan Animation Control ini, Anda dapat mem-play file AVI hanya dengan beberapa baris program.

Control ini hanya mendukung file AVI yang tidak ”bersuara” atau file AVI yang telah dikompres dengan menggunakan Run-Length Encoding (RLE). Selain file AVI jenis tersebut, maka akan muncul errror yaitu error 35752 (Unable to open AVI file).

Komponen Animation control harus ditambahkan terlebih dulu lewat menu Project|Component atau dengan shortcut Ctrl+T. Beri tanda check untuk Microsoft Windows Common Control-2 6.0 atau dengan memilih file MSCOMCT2.OCX lewat button Browse.

Sedangkan untuk form, siapkan 4 buah text box dengan nama txtFileName (digunakan untuk mengisikan nama file AVI yang hendak dijalankan), txtTimes (digunakan untuk mengatur berapa kali animasi dijalankan), txtFrom (digunakan untuk mengisi mulai dari frame ke berapa animasi dijalankan) dan txtTo (digunakan untuk mengisi sampai frame ke berapa animasi dijalankan). Tiga buah command button (dengan nama cmdBrowse, cmdPlay dan cmdStop) serta sebuah animation control (dengan nama animation1).

Untuk keperluan browse (membuka file AVI), kita akan membutuhkan control Common Dialog. Control Common Dialog ini harus ditambahkan dengan cara yang sama seperti menambahkan Animation Control, yaitu lewat menu Project|Component atau dengan shortcut Ctrl+T. Component yang dipilih adalah Microsoft Common Dialog Control 6.0 atau dengan memilih file COMDLG32.OCX.

Untuk menjalankan file AVI, perintah yang digunakan adalah perintah PLAY. Sintaks penulisan untuk perintah PLAY ini adalah:

Play [RepeatCount], [StartFrame], [EndFrame]

RepeatCount adalah jumlah pengulangan yang dilakukan. StartFrame adalah frame awal untuk memulai animasi dan EndFrame adalah frame terakhir yang dijalankan. Ketiga perintah tersebut adalah opsional (boleh ditulis, boleh tidak). Jika RepeatCount tidak diisi apa-apa, artinya animasi akan dijalankan terus menerus sampai animasi dihentikan dengan perintah stop.

Program selengkapnya adalah:

Private Sub cmdBrowse_Click()
  CommonDialog1.ShowOpen
  txtFileName.Text = CommonDialog1.FileName
End Sub

Private Sub cmdPlay_Click()
  Dim times, fromf, tof
  Animation1.Open txtFileName.Text
  If txtTimes.Text <> "" Then times = Val(txtTimes.Text) Else times = -1
  If txtFrom.Text <> "" Then fromf = Val(txtFrom.Text) Else fromf = 0
  If txtTo.Text <> "" Then tof = Val(txtTo.Text) Else tof = -1
  Animation1.Play times, fromf, tof
End Sub

Private Sub cmdStop_Click()
  Animation1.Stop
  Animation1.Close
End Sub

Simpan program ini, lalu jalankan. Jika Anda memilih file filecopy.AVI, Anda akan mendapatkan tampilan seperti pada gambar:

Catatan: Contoh file-file AVI yang bisa dijalankan ada pada folder \Common\Graphics\AVIs yang ada di dalam folder instalasi Visual Studio Anda.

Membuat Program Penerjemah Kalimat dengan Google Translate API

2009-10-01T23:21:00.004+07:00

Pada posting yang lalu, ada program kamus yang dibuat dengan menggunakan PHP dan XML. Keakuratan aplikasi tersebut dalam menerjemahkan akan tergantung dari isi file XML yang ada. Semakin file XML tersebut lengkap, tentunya aplikasi kamus akan nampak semakin canggih.

Pada tip kali ini, kita akan membuat membuat aplikasi untuk menerjemahkan kalimat Bahasa Indonesia ke dalam empat bahasa dunia, yaitu Inggris, Italia, Spanyol dan Perancis. Tentunya kita tidak akan menyimpan data vocab masing-masing bahasa ataupun mengkodekan struktur grammar dari bahasa-bahasa tersebut. Google Translate API akan dapat kita gunakan untuk membantu dalam melakukan penerjemahan.

Langkah-langkah untuk membuatnya adalah:

Kita buat terlebih dulu halaman awal untuk menerima teks Bahasa Indonesia serta memilih bahasa tujuan. Kita simpan file ini dengan nama index.php sebagai halaman awal yang nanti dipanggil.


<html>
<head>
<title>Menerjemahkan dengan Google Translate API</title>
</head>
<body>
<h2>Masukkan teks dalam Bahasa Indonesia</h2>
<form method="post" action="translate.php"><br>
<input type="text" size=50 name="teks"><br>
<select name="tujuan">
    <option value="en">Inggris</option>
    <option value="it">Italia</option>
    <option value="es">Spanyol</option>
    <option value="fr">Perancis</option>    
</select>
<input type="submit" value="Terjemahkan" name="oke">
</form>

</body>
</html>

Kita siapkan modul untuk melakukan proses penerjemahan dalam file PHP yang bernama translate.php. Kita buat terlebih dulu header HTML-nya.


<html>
<head>
<title>Hasil terjemahan</title>
<style type="text/css">
body {
      background-color : #FFFFFF;
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
      color : #000088;
      margin: 5px; 
      }
</style>
</head>

<body>

Berikutnya kita akan membuat sebuah class PHP yang bertugas untuk memanggil Google Translate API dan menampilkan hasil terjemahan dari bahasa yang telah dipilih. Ada beberapa atribut yang perlu dideklarasikan di awal class ini.


<?php
class GoogleTranslateApi{ 

    var $BaseUrl = 'http://ajax.googleapis.com/ajax/services/language/translate'; 
    var $FromLang = 'id'; 
    var $ToLang = ''; 
    var $Version = '1.0'; 
     
    var $CallUrl; 
     
    var $Text = ''; 
     
    var $TranslatedText; 
    var $DebugMsg; 
    var $DebugStatus; 
     
    function GoogleTranslateApi(){ 
        $this->CallUrl = $this->BaseUrl . "?v=" . 
        $this->Version . "&q=" . urlencode($this->Text) . 
        "&langpair=" . $this->FromLang . "%7C" . $this->ToLang; 
    } 
     
    function makeCallUrl(){ 
        $this->CallUrl = $this->BaseUrl . "?v=" . 
        $this->Version . "&q=" . urlencode($this->Text) . 
        "&langpair=" . $this->FromLang . "%7C" . $this->ToLang; 
    } 
     
    function translate($text = ''){ 
        if($text != ''){ 
            $this->Text = $text; 
        } 
        $this->makeCallUrl(); 
        if($this->Text != '' && $this->CallUrl != ''){ 
            $handle = fopen($this->CallUrl, "rb"); 
            $contents = ''; 
            while (!feof($handle)) { 
            $contents .= fread($handle, 8192); 
            } 
            fclose($handle); 
             
            $json = json_decode($contents, true); 
             
            if($json['responseStatus'] == 200){ //Request berhasil
                $this->TranslatedText = $json['responseData']['translatedText']; 
                $this->DebugMsg = $json['responseDetails']; 
                $this->DebugStatus = $json['responseStatus']; 
                return $this->TranslatedText; 
            } else { //Ada kesalahan
                return false; 
                $this->DebugMsg = $json['responseDetails']; 
                $this->DebugStatus = $json['responseStatus']; 
            } 
        } else { 
            return false; 
        } 
    } 
} 
$translate = new GoogleTranslateApi; 
$to=$_POST['tujuan'];

$translate->FromLang = 'id'; 
$translate->ToLang = $to; 
switch ($to)
{
  case 'en':$tolang="Inggris";break;
  case 'it':$tolang="Italia";break;
  case 'es':$tolang="Spanyol";break;
  case 'fr':$tolang="Perancis";break;
} 
$teks=$_POST['teks'];
echo '<center>Google menerjemahkan <br> 
      <b>"'.$teks.'"</b><br><br>
      ke dalam bahasa '.$tolang.' menjadi: <br><b>"';
echo $translate->translate($teks).'"</b>'; 

?>

</body>

</html>

Berikut adalah beberapa contoh tampilan yang didapatkan:

Visual Basic – Membuat Fasilitas Find & Replace

2009-09-28T21:21:00.002+07:00

Pada edisi lalu, kita membuat program File Text Viewer yang digunakan untuk menampilkan file teks. Dengan menggunakan fungsi Replace yang ada di VB, kita dapat menambahkan fasilitas Find & Replace pada program File Text Viewer tersebut.

Fungsi Replace di VB digunakan untuk mencari sebuah string dan menggantinya dengan string yang lain. Keistimewaan fungsi Replace ini adalah dapat melakukan pencarian dengan dimulai pada posisi tertentu serta membatasi penggantian dalam jumlah tertentu.

Sintaks penulisan dari fungsi Replace ini adalah

Replace(expression, find, replace[, start[, count[, compare]]])

Expression merupakan sumber dari teks atau string yang hendak dicari. Find merupakan substring yang hendak dicari. Replace merupakan substring pengganti. Start adalah posisi awal pencarian. Count adalah banyaknya penggantian yang dilakukan dan compare menunjukkan cara pembandingan yang dilakukan. Tiga parameter terakhir bersifat optional, bisa ditulis, bisa tidak.

Untuk membuat fasilitas find & replace ini, buka program file text viewer yang lalu. Tambahkan 3 buah text box (txtfind, txtReplace dan txtCount) serta dua buah command button (cmdReplace dan cmdSave).

Tambahkan kode program untuk event cmdReplace_click dan cmdSave_click.

Untuk event cmdReplace_click:

Private Sub cmdReplace_Click()
  Dim count As Long
  count = Val(txtCount.Text)
  If txtCount.Text = "" Then count = -1
  Text1.Text = Replace(Text1.Text, txtFind.Text, txtReplace.Text, 1, count)
End Sub

Untuk event cmdSave_Click:

Sub FileSave(filename As String)
    Dim fnum As Integer, isOpen As Boolean
    On Error GoTo Error_Handler
    fnum = FreeFile()
    Open filename For Output As #fnum
    isOpen = True
    Print #fnum, Text1.Text
    
Error_Handler:
    If isOpen Then Close #fnum
    If Err Then Err.Raise Err.Number, , Err.Description
End Sub

Private Sub cmdSave_Click()
  FileSave File1.Path & "\" & File1.filename
End Sub

Untuk event-event yang lain, sama dengan pada program file text viewer.

Simpan program di atas, lalu jalankan. Anda akan mendapatkan hasil seperti pada gambar.

Visual Basic – File Text Viewer

2009-09-21T13:00:00.002+07:00

Berbeda dengan file executable, file teks adalah file yang hanya terdiri dari karakter-karakter biasa seperti angka, huruf, atau tanda baca (plain text). Dengan menggunakan fungsi file pada VB, Anda dapat dengan mudah menampilkan isi suatu file text.

Untuk membuka sebuah file teks, VB mempunyai perintah OPEN. Sintaks penulisannya adalah:

Open "namafile.txt" For Input As #1

Tambahan perintah setelah nama file dapat terdiri dari 3 macam, yaitu For Input (file dibuka hanya untuk dibaca), For Output (membuat file) dan For Appending (file dibuka dan siap untuk ditambah). Angka di belakang perintah Open menunjukkan file handle. Artinya, operasi file yang dilakukan, bukan lagi mengacu pada nama file, tapi langsung ke file handle.

Di bawah ini adalah fungsi untuk membaca sebuah file teks. Parameternya yaitu nama filenya.

Function ReadTextFileContents(filename As String) As String
    Dim fnum As Integer, isOpen As Boolean
    On Error GoTo Error_Handler
    fnum = FreeFile()
    Open filename For Input As #fnum
    isOpen = True
    ReadTextFileContents = Input(LOF(fnum), fnum)
    
Error_Handler:
    If isOpen Then Close #fnum
    If Err Then Err.Raise Err.Number, , Err.Description
End Function

Untuk membuat program selengkapnya, siapkan form dengan komponen: drivelistbox (dengan nama drive1), dirlistbox (dengan nama dir1), filelistbox (dengan nama file1), command button (dengan nama cmdView) dan text box (dengan nama text1).

Untuk text1, Anda harus mengubah properti Multiline (pada window properti) menjadi True agar teks dapat ditampilkan per baris (bukan ke samping) serta properti Scrollbars menjadi 3 - Both.

Untuk event-event-nya:

Private Sub cmdView_Click()
  Text1.Text = ReadTextFileContents(File1.Path & "\" & File1.filename)
End Sub

Private Sub Dir1_Change()
  File1.Path = Dir1.Path
End Sub

Private Sub Drive1_Change()
  Dir1.Path = Drive1.Drive
End Sub

Private Sub File1_DblClick()
  Text1.Text = ReadTextFileContents(File1.Path & "\" & File1.filename)
End Sub

Private Sub Form_Load()
  File1.Pattern = "*.txt"
  Text1.MultiLine = True
End Sub

Simpan program di atas, lalu jalankan. Anda akan mendapatkan hasil seperti pada gambar.

Visual Basic – Mencari Hari Suatu Tanggal

2009-09-19T19:01:00.001+07:00

Menghitung umur adalah salah satu perhitungan yang sering dilakukan dalam pengolahan database. Tips kali ini adalah menghitung umur dengan menggunakan VB.

VB memang menyediakan fungsi untuk menghitung umur dengan menggunakan fungsi DateDiff. Format penulisannya adalah:

Umur = DateDiff("yyyy", TanggalLahir, HariIni)

Namun, fungsi DateDiff mempunyai kekurangan, yaitu jika jika tanggal lahir masih belum dilewati, maka umur akan berkurang setahun. Misalnya jika Anda lahir pada tanggal 25 September 1984, dan tanggal hari ini adalah 24 September 2005, maka umur yang dihasilkan dari fungsi DateDiff adalah 21 tahun. Dalam standard perhitungan umur, umur yang benar adalah 20 tahun (baru keesokan harinya umur menjadi 21 tahun).

Untuk mengatasi hal tersebut, dibuat fungsi khusus yang menghitung umur dengan tepat. Jika tanggal hari ini masih belum melewati tanggal ulang tahun, maka hasil dari fungsi DateDiff akan dikurangi dengan 1.

Function HitungUmur(Ultah As Date, Optional Sekarang As Date = 0) _
 As Integer
    Dim intAge As Integer
    If Sekarang = 0 Then
        Sekarang = Date
    End If
    intAge = DateDiff("yyyy", Ultah, Sekarang)
    If Sekarang < DateSerial(Year(Sekarang), Month(Ultah), _
     Day(ultah)) Then
        intAge = intAge - 1
    End If
    HitungUmur = intAge
End Function

Fungsi di atas mempunyai dua parameter yang berjenis tanggal. Parameter pertama adalah tanggal ulang tahun dan parameter kedua adalah tanggal sekarang yang bersifat opsional (boleh diisi boleh tidak). Bila diisi, maka fungsi hitungumur ini adalah hasil pengurangan dari parameter kedua dikurangi parameter kedua.

Contoh penggunaannya:

Private Sub Form_Load()
Dim TglUltah As Date
  TglUltah = #10/25/1984# 'tanggal 25 September 1985
  MsgBox "Umur saat ini: " & HitungUmur(TglUltah)
  End
End Sub

Tampilan yang dihasilkan:

VB – Validasi TextBox

2009-09-12T09:15:00.003+07:00

Jika dalam satu form ada banyak text box yang harus diisi, maka melakukan validasi untuk satu persatu text box tersebut dapat menjadi sangat membosankan. Apakah validasi harus dilakukan satu-persatu? Tidak juga, kita dapat membuat sebuah fungsi validasi yang dapat digunakan untuk semua textbox yang ada dalam sebuah form.

Validasi yang dilakukan adalah melakukan pengujian apakah text box tersebut masih kosong atau sudah terisi. Jika sudah terisi maka validasi berhasil. Jika belum terisi, kedipkan text box tersebut (untuk “menarik” perhatian dari user) dan setfocus ke text box tersebut.

Langkah pertama buat sebuah form dengan banyak text box. Lihat gambar.

Sebelum membuat proses validasinya, kita akan terlebih membuat modul untuk mengedipkan (blink) suatu objek. Proses blinking suatu objek dapat dengan mengubah properti backcolor. Lama untuk blinking dapat diatur pada perintah For.

Public Sub Blink(ByVal c As Object)
    Dim OldColor As Double
    Dim Delay As Double
    Dim x As Integer
    
    On Error Resume Next
    OldColor = c.BackColor
    
    For x = 1 To 3  'tiga kali berkedip
      c.BackColor = QBColor(12)
      Delay = Timer
      While Timer - Delay < 0.2
        DoEvents
      Wend
      c.BackColor = OldColor
      Delay = Timer
      While Timer - Delay < 0.2
        DoEvents
      Wend
    Next x

    If c.Enabled Then
      c.SetFocus
    End If
End Sub

Langkah ke tiga adalah membuat sub untuk melakukan validasi. Sub ini mempunyai parameter berupa objek. Nantinya, sub ini dipanggil dengan parameter sebuah array yang berisi semua nama text box yang hendak divalidasi.

Public Function ValidateTextBox(obj As Variant) As Boolean
Dim i As Long
  ValidateTextBox = True
  For i = 0 To UBound(obj)
    If obj(i).Text = "" Then
      If obj(i).Enabled Then
        obj(i).SetFocus
      End If
      FlashControl obj(i)
      ValidateTextBox = False
      Exit Function
    End If
  Next i
End Function

Function Validatetextbox, dapat dipanggil ketika event penekanan button Simpan. Di sinilah proses validasi dilakukan.

Private Sub Command1_Click()
  If Not ValidateTextBox(Array(Text1, Text2, Text3, Text4, Text5, Text6)) Then
  Else
    MsgBox "Data sudah lengkap!"
    'lakukan proses penyimpanan
  End If
End Sub

Simpan Form di atas dengan nama FrmValidate. Jalankan program dengan menekan tombol F5. Jika form masih kosong, dan tombol simpan di-klik, maka text box yang kosong akan berkedip dan kursor akan diarahkan pada textbox yang kosong tersebut.

Multiline Tooltip

2009-09-09T07:45:00.000+07:00

Tooltip dapat membantu user untuk dapat memberikan keterangan. Pada Microsoft Office, Tooltip telah menjadi standard. Ketika mouse berhenti sejenak di atas sebuah button, maka tooltip ditampilkan. Komponen web pun juga bisa diberi tooltip.

Tip kali ini adalah membuat multiline tooltip. Dalam sebuah komponen web (gambar misalnya), kita bisa memunculkan tooltip lebih dari satu baris.

Langkah-langkahnya adalah:

Buat header HTML beserta dengan style sheet-nya

<html>
<head>
<title>Multiline tooltip</title>
<style type="text/css">
.xstooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;

font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;

background-repeat: repeat;
background-image: url(blue.png);
}

</style>
<script type="text/javascript" src="tooltip.js"></script>
</head>

Untuk tampilan utamanya adalah:

<body>

<div id="tooltip_123" class="xstooltip">
Gunung Bromo<br/>
<br/>
Location: Probolinggo, Jawa Timur<br/>
Ketinggian 2392 meter dari permukaan laut<br/>
Panorama lanskap pengunungan yang sangat spektakuler
</div>

<div id="tooltip_123b" class="xstooltip">
Gunung Everest<br/>
<br/>
Location: Nepal<br/>
Ketinggian 8850 meter dari permukaan laut<br/>
Merupakan gunung tertinggi di dunia
</div>


<img id="the_image"
 src="images.jpg"
 onmouseover="xstooltip_show('tooltip_123', 'the_image', 289, 49);"
 onmouseout="xstooltip_hide('tooltip_123');"
/>

<img id="the_image2"
 src="everest.jpg"
 onmouseover="xstooltip_show('tooltip_123b', 'the_image2', 289, 49);"
 onmouseout="xstooltip_hide('tooltip_123b');"
/>

</body>
</html>

Sebelum menjalankan, buat sebuah file Javascript bernama tooltip.js.

function xstooltip_findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
 while (obj.offsetParent)
     {
         curleft += obj.offsetLeft
         obj = obj.offsetParent;
     }
 }
 else if (obj.x)
     curleft += obj.x;
 return curleft;
}

function xstooltip_findPosY(obj)
{
 var curtop = 0;
 if (obj.offsetParent)
 {
     while (obj.offsetParent)
     {
         curtop += obj.offsetTop
         obj = obj.offsetParent;
     }
 }
 else if (obj.y)
     curtop += obj.y;
 return curtop;
}

function xstooltip_show(tooltipId, parentId, posX, posY)
{
 it = document.getElementById(tooltipId);

 if ((it.style.top == '' || it.style.top == 0)
     && (it.style.left == '' || it.style.left == 0))
 {
     // need to fixate default size (MSIE problem)
     it.style.width = it.offsetWidth + 'px';
     it.style.height = it.offsetHeight + 'px';
  
     img = document.getElementById(parentId);

     // if tooltip is too wide, shift left to be within parent
     if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth -
it.offsetWidth;
     if (posX < 0 ) posX = 0;
  
     x = xstooltip_findPosX(img) + posX;
     y = xstooltip_findPosY(img) + posY;
  
     it.style.top = y + 'px';
     it.style.left = x + 'px';
 }

 it.style.visibility = 'visible';
}

function xstooltip_hide(id)
{
 it = document.getElementById(id);
 it.style.visibility = 'hidden';
}

Simpan dan load pada browser, tampilan yang didapatkan adalah:

Menggambar Chart di PHP dengan Memanfaatkan XML

2009-09-05T09:08:00.000+07:00

Menggambar chart di sebuah website dapat berguna untuk memvisualisasikan serangkaian data agar lebih mudah terbaca. Ada banyak cara untuk melakukan penyimpanan data, bisa melalui database, bisa juga melalui XML.

Pada tip kali ini, kita akan membuat chart dengan PHP menggunakan data yang disimpan pada sebuah file XML. Menggambar chart di PHP adalah dengan memanfaatkan GD Library yang mempunyai banyak method untuk melakukan pengolahan citra.

Langkah-langkah untuk menggambar Chart dengan memanfaatkan data yang ada di XML adalah sebagai berikut:

Buat sebuah file XML yang berisi data yang hendak digambarkan. Simpan file ini dengan nama chart.xml.

<?xml version="1.0" encoding="utf-8"?>
<chart>
<bar>
<name>Budi</name>
<score>90</score>
</bar>
<bar>
<name>Ahmad S</name>
<score>100</score>
</bar>
<bar>
<name>Fabiani</name>
<score>85</score>
</bar>
<bar>
<name>Martin P</name>
<score>25</score>
</bar>
<bar>
<name>Brandon M</name>
<score>75</score>
</bar>
<bar>
<name>Venti A</name>
<score>5</score>
</bar>
<bar>
<name>Natan C</name>
<score>50</score>
</bar>
</chart>

Untuk file PHP yang bertugas mengambil data pada file XML ini dan menampilkan dalam bentuk chart adalah sebagai berikut:

<?php
header("Content-type: image/jpeg");

$filename = "chart.xml";
$chart = simplexml_load_file($filename);

$iCh = imagecreatetruecolor(750,550);
$dark = imagecolorallocate($iCh,85,85,85);
imagefill($iCh,0,0,$dark);
$bright = imagecolorallocate($iCh,222,222,222);
imageline($iCh,25,500,725,500,$bright);
$gold = imagecolorallocate($iCh,255,240,0);
$x = 50;
$y = 525;
foreach($chart as $bar){

$name = $bar->name;
$score = $bar->score;
$width = 50;
if($score>100) $score = 100;
$height = $score*3;

imagestring($iCh,3,$x,$y,$name,$gold);
imagefilledrectangle($iCh,$x,$y-26,$x+$width,$y-26-$height,$gold);

$x += 100;
}

imagejpeg($iCh);
?>

Tampilan yang dihasilkan adalah sebagai berikut:

Mencerminkan Citra Menggunakan PHP

2009-09-04T08:51:00.000+07:00

Mencerminkan citra adalah salah satu fasilitas penting dalam proses pengolahan citra. Pencerminan dapat dilakukan secara horisontal atau secara vertikal.

Pada tip kali ini, kita akan membuat sebuah aplikasi PHP sederhana dengan memanfaatkan library GD untuk melakukan pencerminan terhadap suatu citra. Ada 2 macam proses pencerminan yang dibuat di sini, yaitu pencerminan secara horisontal dan pencerminan secara vertikal.

Langkah-langkah untuk membuat proses pencerminan citra ini adalah sebagai berikut:

Buat terlebih dulu header untuk file PHP utama dengan style yang diperlukan.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flip Image</title>
<style type="text/css">

#original {
display:inline;
border:5px solid #555;
float:left;
padding:10px;
}
</style>
</head>

Tampilkan citra yang hendak dicerminkan dengan dilengkapi link untuk melakukan proses pencerminan.

<body>
<h1></h1>
<div id="original">
<img src="pic2.jpg"/>
<br>
<a href="flipH.php?image=pic2.jpg&tipe=1">Horizontal Flip</a>
<br>
<a href="flipH.php?image=pic2.jpg&tipe=2">Vertical Flip</a>
</div>

</body>
</html>

Tampilkan citra yang hendak dicerminkan dengan dilengkapi link untuk melakukan proses pencerminan.

<?php

$image = $_GET['image'];
$tipe = $_GET['tipe'];
flipH($image, $tipe);

function flipH($image, $tipe) {

$xandy = getimagesize($image);
$x = $xandy[0];
$y = $xandy[1];
$type = $xandy[2];
$type = image_type_to_mime_type($type);
header("Content-type: $type");
$r = imagecreatefromjpeg($image);
$i = imagecreatetruecolor($x,$y);
$dark = imagecolorallocate($i,100,100,100);
imagefill($i,0,0,$dark);

$width = $x;
$height = $y;

for($cntOne = 0;$cntOne < $width;$cntOne++) {
for($cntTwo = 0;$cntTwo < $height;$cntTwo++) {
if ($tipe == 1)
imagecopy($i,$r,$width-$cntOne,$cntTwo,$cntOne,$cntTwo,1,1);
else
imagecopy($i,$r,$cntOne,$height-$cntTwo,$cntOne,$cntTwo,1,1);
}
}
imagejpeg($i);

}

?>

Tampilan yang dihasilkan adalah sebagai berikut:

VB.Net – Form Transparan Dengan Teks

2009-08-25T14:42:00.000+07:00

Bentuk Form pada VB.Net dapat dimodifikasi untuk menampilkan form transparan dengan teks di dalamnya. Logika yang digunakan cukup sederhana, yaitu melakukan override pada form yang digunakan.

Langkah-langkah untuk membuat form transparan dengan teks di dalamnya adalah sebagai berikut:

Buat sebuah form kosong. Tidak perlu ditambah komponen apapun, karena kita akan tambahkan komponennya di dalam program.

Deklarasi awalnya adalah sebagai berikut:

Imports System.Windows.Forms
Imports System.Drawing
Imports System.Drawing.Drawing2D
Public Class FormHole
    Public Shared Sub Main()
        Application.Run(New Form1)
    End Sub
End Class

Kode untuk class Form1-nya adalah sebagai berikut:

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TransparencyKey = BackColor
        Label1.BackColor = TransparencyKey
    End Sub

    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Dim thick_pen As New Pen(Color.Black, 10)
        Dim rect As New Rectangle( _
            e.ClipRectangle.X + 10, _
            e.ClipRectangle.Y + 10, _
            e.ClipRectangle.Width - 20, _
            e.ClipRectangle.Height - 20)
        e.Graphics.DrawEllipse(thick_pen, rect)
        thick_pen.Dispose()
    End Sub
End Class

Untuk memberikan efek transparan ini, kita melakukan override untuk class form1.

 _
Partial Public Class Form1
    Inherits System.Windows.Forms.Form

     _
    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
        If disposing AndAlso components IsNot Nothing Then
            components.Dispose()
        End If
        MyBase.Dispose(disposing)
    End Sub

    Private components As System.ComponentModel.IContainer

     _
    Private Sub InitializeComponent()
        Me.Label1 = New System.Windows.Forms.Label
        Me.SuspendLayout()
        Me.Label1.AutoSize = True
        Me.Label1.BackColor = System.Drawing.SystemColors.Control
        Me.Label1.Font = New System.Drawing.Font("Forte", 48.0!, System.Drawing.FontStyle.Italic, System.Drawing.GraphicsUnit.Point, CType(0, Byte))
        Me.Label1.Location = New System.Drawing.Point(48, 56)
        Me.Label1.Name = "Label1"
        Me.Label1.Size = New System.Drawing.Size(169, 70)
        Me.Label1.TabIndex = 0
        Me.Label1.Text = "Hole"
        Me.Label1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter
        Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
        Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
        Me.BackColor = System.Drawing.Color.Red
        Me.ClientSize = New System.Drawing.Size(274, 187)
        Me.Controls.Add(Me.Label1)
        Me.Name = "Form1"
        Me.Text = "Form1"
        Me.ResumeLayout(False)
        Me.PerformLayout()

    End Sub
    Friend WithEvents Label1 As System.Windows.Forms.Label

End Class

Tampilan yang dihasilkan adalah:

VB.Net – Mencegat Penekanan Keyboard

2009-08-25T14:38:00.000+07:00

Dalam banyak aplikasi game, pencegatan keyboard mutlak dilakukan. Mulai dari pencegatan untuk tombol karakter biasa (a-z, tanda baca), enter, tanda panah, alt, ctrl, page up, page down, insert, hingga tombol escape. Tombol-tombol ini dicegat agar dapat diberikan respon yang sesuai.

Pada tip kali ini, kita akan mencoba membuat sebuah program kecil untuk mendemokan bagaimana melakukan pencegatan penekanan keyboard pada VB.Net dan kemudian memberikan sebuah respon sederhana terhadap penekanan tombol tersebut.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru. Komponen-komponen yang ditambahkan adalah:

Sebuah textbox yang diberi nama textbox1. Properti yang diubah untuk textbox ini adalah property Scrollbars menjadi Vertical dan multiline menjadi True.

Textbox lain yang diberi nama textbox2.

Untuk inisialisasi, ketikkan kode berikut

Public Class Form1
    Inherits System.Windows.Forms.Form
    Private myKeyPressHandler As New myKeyPressClass()

#Region " Windows Form Designer generated code "
    Public Sub New()
        MyBase.New()

        'This call is required by the Windows Form Designer.
        InitializeComponent()

        'Add any initialization after the InitializeComponent() call

        'Handle On KeyPress event of TextBox1: invoke myKeyPressHandler.myKeyCounter method
        AddHandler TextBox1.KeyPress, AddressOf myKeyPressHandler.myKeyCounter
        'Refer myKeyPressHandler.textBox1 by TextBox1
        myKeyPressHandler.textBox1 = TextBox1
    End Sub

#End Region

Pencegatan untuk event TextBox2 adalah sebagai berikut:

 Private Sub TextBox2_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles TextBox2.KeyDown
        MsgBox(e.KeyData.ToString & " pressed. Key Value is " & e.KeyValue.ToString, MsgBoxStyle.Information, "KeyDown Handler")
    End Sub

Untuk mencegat penekanan tombol pada textbox1, kita membuat sebuah class bernama myKeyPressClass, dengan inisialisasi:

Public Class myKeyPressClass
    Private Shared keyPressCount As Long = 0
    Private Shared backspacePressed As Long = 0
    Private Shared returnPressed As Long = 0
    Private Shared escPressed As Long = 0
    Public textBox1 As TextBox

Respon pencegatan yang diberikan ada pada subrutin myKeyCounter.

Public Sub myKeyCounter(ByVal sender As Object, ByVal ex As KeyPressEventArgs)
        Select Case ex.KeyChar
            Case ControlChars.Back
                backspacePressed = backspacePressed + 1
            Case ControlChars.CrLf
                returnPressed = returnPressed + 1
            Case Convert.ToChar(27)
                escPressed = escPressed + 1
            Case Else
                keyPressCount = keyPressCount + 1
        End Select

        textBox1.Text = backspacePressed & " backspaces pressed" & _
         ControlChars.CrLf & escPressed & _
         " escapes pressed" & ControlChars.CrLf & returnPressed & _
         " returns pressed" & ControlChars.CrLf & keyPressCount & _
         " other keys pressed" & ControlChars.CrLf
        ex.Handled = True
    End Sub    'myKeyCounter
End Class 'myKeyPressClass

Jika dijalankan tampilan yang didapatkan adalah:

VB.Net – Curlicue Fractal

2009-08-25T14:35:00.000+07:00

Curlicue Fractal adalah suatu teknik membuat fraktal yang sederhana, namun dapat membentuk berbagai pola fraktal yang menarik.

Tip kali ini adalah membuat efek Curlicue Fractal di VB.Net. Langkah-langkahnya adalah:

Buat sebuah form dengan sebuah textbox bernama txtS, sebuah button bernama btnGo, sebuah combobox bernama cboS (yang berisi list: Pi, ln(2), e, Sqrt(2), Sqrt(3), Sqrt(5), Lambda, Golden Ratio, dan Feigenbaum) serta sebuah picturebox bernama picCanvas.

Deklarasi awal serta pencegatan untuk untuk event-eventnya adalah sebagai berikut:

Imports System.Math
Imports System.Drawing.Drawing2D

Public Class Form1
    Inherits System.Windows.Forms.Form

    Private Sub btnGo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGo.Click
        picCanvas.Invalidate()
    End Sub

    Private Sub picCanvas_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles picCanvas.Resize
        picCanvas.Invalidate()
    End Sub

    Private Sub picCanvas_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picCanvas.Paint
        DrawCurlicue(e.Graphics)
    End Sub

Subrutin utamanya adalah DrawCurlicue serta menentukan konstanta untuk

Private Sub DrawCurlicue(ByVal gr As Graphics)
  Const SCALE As Integer = 2
  gr.ScaleTransform(SCALE, SCALE, MatrixOrder.Append)
  gr.TranslateTransform(picCanvas.ClientSize.Width \ 2, _
  picCanvas.ClientSize.Width \ 2, MatrixOrder.Append)

  Dim s As Single = Single.Parse(txtS.Text)

  Dim theta As Single = 0
  Dim phi As Single = 0
  Dim x0, y0, x1, y1 As Single
  x0 = 0
  y0 = 0
  Dim thin_pen As New Pen(Color.Black, 0)
  For i As Integer = 1 To 10000
    x1 = x0 + Cos(phi)
    y1 = y0 + Sin(phi)
    gr.DrawLine(thin_pen, x0, -y0, x1, -y1)
    x0 = x1
    y0 = y1

    phi = (theta + phi) Mod (2 * PI)
    theta = (theta + 2 * PI * s) Mod (2 * PI)
  Next i
  thin_pen.Dispose()
End Sub

Private Sub cboS_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cboS.SelectedIndexChanged
  Select Case cboS.Text.ToLower
    Case "pi"
      txtS.Text = PI.ToString
    Case "ln(2)"
      txtS.Text = Log(2).ToString
    Case "e"
      txtS.Text = Math.E.ToString
    Case "sqrt(2)"
      txtS.Text = Sqrt(2).ToString
    Case "sqrt(3)"
      txtS.Text = Sqrt(3).ToString
    Case "sqrt(5)"
      txtS.Text = Sqrt(5).ToString
    Case "lambda"
      txtS.Text = "0.577215664901532860606512090082402431042"
    Case "golden ratio"
      txtS.Text = "1.618033988749894848204586834365638117720"
    Case "feigenbaum"
      txtS.Text = "4.6692016091029906718532038204662016172581855774757686327456513430041343302113147371386897440239480138"
    End Select
    picCanvas.Invalidate()
End Sub

Tampilan yang dihasilkan adalah:

VB.Net – Membuat Font Viewer dan Efeknya

2009-08-25T14:31:00.000+07:00

Menampilkan bentuk font dan efek-efeknya adalah hal yang penting bagi para desainer grafis. Dengan menggunakan VB.Net (dan memanfaatkan library System.Drawing.Text), kita dapat membuat sebuah aplikasi font viewer beserta efek-efeknya.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru. Komponen-komponen yang ditambahkan adalah:

Sebuah textbox bernama txtSize,

4 buah checkbox yang masing-masing bernama chkBold, chkItalic, chkUnderline, chkStrikeout

Sebuah listbox bernama lstFont yang digunakan untuk menampung daftar font yang ada di sistem.

Sebuah textbox bernama txtSample, dengan properti yang perlu diubah: Anchor menjadi Top, Bottom, Left, Right dan Multiline menjadi True.

Saat form pertama kali di-load, list box akan diisi dengan font yang terinstall pada sistem. Pencegatan untuk event form_load adalah sebagai berikut:

Imports System.Drawing.Text

Public Class Form1
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim installed_fonts As New InstalledFontCollection
        lstFont.Items.Clear()
        For Each font_family As FontFamily In installed_fonts.Families
            lstFont.Items.Add(font_family.Name)
        Next font_family
        lstFont.SelectedIndex = 0
    End Sub

Jika terjadi perubahan pada checkbox atau listbox, maka akan dipanggil sub ShowSample yang bertugas menampilkan text sesuai dengan font yang dipilih serta efek yang diberikan.

    Private Sub txtSize_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles txtSize.TextChanged, chkBold.Click, chkItalic.Click, chkUnderline.Click, chkStrikeout.Click, lstFont.SelectedIndexChanged

        ShowSample()
    End Sub

Berikut adalah sub ShowSample untuk menampilkan contoh dari font dan efek yang diberikan

 Private Sub ShowSample()
        Dim font_style As FontStyle = FontStyle.Regular
        If chkBold.Checked Then font_style = font_style Or FontStyle.Bold
        If chkItalic.Checked Then font_style = font_style Or FontStyle.Italic
        If chkUnderline.Checked Then font_style = font_style Or FontStyle.Underline
        If chkStrikeout.Checked Then font_style = font_style Or FontStyle.Strikeout

        Dim font_size As Single = 8
        Try
            font_size = Single.Parse(txtSize.Text)
        Catch ex As Exception
        End Try

        Dim family_name As String = "Times New Roman"
        If Not (lstFont.SelectedItem Is Nothing) Then
            family_name = lstFont.SelectedItem.ToString
        End If
        Dim new_font As New Font( _
            family_name, font_size, font_style)

        txtSample.Font = new_font
    End Sub
End Class

Jika dijalankan tampilan yang didapatkan adalah:

VB.Net – Animasi Starfield Dengan GDI+

2009-08-25T14:27:00.000+07:00

GDI (Graphics Device Interface) merupakan kumpulan API di Windows yang dipergunakan menggambar garis atau kurva, me-render font serta menangani palet baik pada monitor maupun pada printer. Kemampuan GDI dalam menangani grafik ini menjadi dasar dari konsep WYSIWYG (What You See Is What You Get) dari semua aplikasi Windows.

GDI+ merupakan evolusi dari GDI, yang membuat pengelolaan grafik menjadi jauh lebih mudah. Tip kali ini adalah memanfaatkan GDI+ untuk membuat animasi starfield.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru dan sebuah picturebox bernama pbstars. Property yang perlu diubah adalah BackColor menjadi hitam, Dock menjad Fill, WaitOnLoad menjadi true.

Buat sebuah class baru bernama clsStars. Class ini

Public Class clsStars
    Dim s_direction As Single = 0
    Dim s_angle As Double
    Dim center As Point
    Dim speed As Double = 0.2
    Dim s_accel As Double = 1.1
    Dim s_cd As Integer
    Dim s_x As Integer
    Dim s_y As Integer
    Dim s_pen() As Pen
    Dim s_hold As Double
    Dim s_depth As Integer = 2
    Dim s_count As Integer = 10
    Dim rn As New Random

    Private Structure fShip
        Dim spoint() As Point
        Dim cv As Single
    End Structure

    Private Structure Star
        Dim x As Single
        Dim y As Integer
        Dim z As Integer
        Dim xv As Double
        Dim yv As Double
    End Structure

    Dim Stars() As Star

Beberapa subrutin yang dibutuhkan adalah untuk inisialisasi dan mengatur gerakan star yang muncul.

 Public Sub IntializeStar(ByVal depth As Integer, ByVal count As Integer, ByVal x As Integer, ByVal y As Integer)
        ReDim Stars(count)
        ReDim s_pen(depth)
        center = New Point(x / 2, y / 2)
        s_count = count
        s_depth = depth
        s_x = x
        s_y = y
        s_cd = Int(255 / s_depth)
        For x = 0 To s_count Step s_depth
            For y = 1 To depth
                Try
                    Stars(x + y).x = rn.Next(0, s_x)
                    Stars(x + y).y = rn.Next(0, s_y)
                    Stars(x + y).z = y
                    StarAngle(x + y)
                    If x = 0 Then s_pen(y) = New Pen(Color.FromArgb(Int(s_cd * y), Int(s_cd * y), Int(s_cd * y)), 2)
                Catch ex As Exception

                End Try
            Next
        Next
    End Sub

    Private Sub SetShip(ByVal Value As Single)
        s_angle += Value
        If s_angle > 180 Then s_angle = -180
        If s_angle < -180 Then s_angle = 180
        If s_direction < 0 Then
            s_direction += Value * 2
        Else
            s_direction += Value
        End If
        If s_direction > 360 Then s_direction = -360
    End Sub

    Private Sub StarAngle(ByVal Id As Integer)
        Dim x As Integer = Stars(Id).x - (center.X)
        Dim y As Integer = Stars(Id).y - (center.Y)
        Dim a As Double = Math.Atan2(y, x)
        Stars(Id).xv = 2 * Math.Cos(a)
        Stars(Id).yv = 2 * Math.Sin(a)
    End Sub

    Public Sub DrawShip(ByVal b As System.Windows.Forms.PaintEventArgs)
        Dim x As Integer
        b.Graphics.TranslateTransform(center.X, center.Y)
        For x = 1 To s_depth
            SetShip(0.01)
            b.Graphics.RotateTransform(s_angle, MatrixOrder.Prepend)
            b.Graphics.DrawPie(s_pen(x), New RectangleF(0, 0, 150, 150), s_direction, s_direction)
            b.Graphics.DrawPie(s_pen(x), New RectangleF(0, 0, 150, 150), s_direction, -s_direction)
        Next
    End Sub

    Public Sub DrawStars(ByVal b As System.Windows.Forms.PaintEventArgs)
        Dim x As Integer
        b.Graphics.Clear(Color.Black)
        For x = 1 To UBound(Stars)
            If Stars(x).y > s_y Or Stars(x).y < 0 Or Stars(x).x > s_x Or Stars(x).x < 0 Then
                Stars(x).x = rn.Next(0, s_x)
                Stars(x).y = rn.Next(0, s_y)
                StarAngle(x)
            Else
                Stars(x).x += Stars(x).xv
                Stars(x).y += Stars(x).yv
                Stars(x).xv *= s_accel + (0.001 * Stars(x).z)
                Stars(x).yv *= s_accel + (0.001 * Stars(x).z)
            End If
            b.Graphics.DrawLine(s_pen(Stars(x).z), CInt(Stars(x).x - Stars(x).xv), CInt(Stars(x).y - Stars(x).yv), Stars(x).x, Stars(x).y)
        Next
    End Sub

End Class

Beberapa event yang perlu dicegat untuk di class Form1 adalah sebagai berikut:

Public Class Form1
    Dim sf As New clsStars
    Dim WithEvents tm As New Timer

    Private Sub Tm_Tick1(ByVal sender As Object, ByVal e As System.EventArgs) Handles tm.Tick
        Me.pbStars.Refresh()
    End Sub

    Private Sub Form1_FormClosing(ByVal sender As Object, ByVal e As System.Windows.Forms.FormClosingEventArgs) Handles Me.FormClosing
        sf = Nothing
    End Sub

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        tm.Interval = 15
        tm.Enabled = True
        Init()
    End Sub

    Private Sub Init()
        Dim tf As Font = New Font("KaiTi", 100, FontStyle.Regular, GraphicsUnit.Pixel)
        sf.IntializeStar(11, 190, Me.Width, Me.Height)
    End Sub

    Private Sub pbStars_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles pbStars.Paint
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
        sf.DrawStars(e)
        sf.DrawShip(e)
    End Sub

End Class

Jika dijalankan tampilan yang didapatkan adalah:

VB.Net – Disable/Enable Task Manager

2009-08-25T14:06:00.000+07:00

Task manager merupakan aplikasi yang disertakan oleh Windows untuk mengetahui informasi detail mengenai performansi komputer, aplikasi yang saat itu sedang aktif, proses dan penggunaan sumber daya CPU, informasi memori, aktivitas jaringan dan sebagainya. Task manager juga sering digunakan untuk menghentikan jalannya aplikasi secara paksa.

Task manager dapat ditampilkan dengan menekan tombol Ctrl+Alt+Del secara bersamaan. Karena begitu pentingnya aplikasi task manager ini hingga seringkali menjadi sasaran virus untuk menyembunyikan diri dengan cara men-disable task manager, sehingga saat user menekan Ctrl+Alt+Del, muncul pesan bahwa task manager telah di-disable.

Tip kali ini adalah mensimulasikan untuk men-disable dan meng-enable task manager. Proses untuk men-disable/meng-enable sebenarnya hanyalah melakukan modifikasi pada registry, yaitu pada Software\Microsoft\Windows\CurrentVersion\Policies\System.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru dengan dua buah button, masing-masig bernama Button1 (untuk men-disable task manager) dan Button2 (untuk meng-enable Task manager).

Inisialisasi awal untuk aplikasi ini adalah sebagai berikut:

Option Explicit On
Option Strict On

Imports Microsoft.Win32

Untuk menulis pada registry, kita membuat sebuah structure bernama RegistryValue. RegistryValue ini diarahkan pada Software\Microsoft\Windows\CurrentVersion\Policies\System untuk mendapatkan key serta memodifikasinya.

Public Class Form1

    Private Structure RegistryValue
        Public Path As String
        Public Value As String
    End Structure

    Private rv As RegistryValue = New RegistryValue()

    Private ReadOnly Property OpenRegistryKeyForWriting() As RegistryKey
        Get
            Const Path As String = "Software\Microsoft\Windows\CurrentVersion\Policies\System"
            Return Registry.CurrentUser.OpenSubKey(Path, True)
        End Get
    End Property

Beberapa fungsi yang diperlukan adalah fungsi untuk EnableDisableTaskManager serta fungsi untuk menguji kompabilitas sistem operasi.

Private Sub EnableDisableTaskmanager(ByVal Index As String)
        Dim hKey As RegistryKey = Nothing
        Try
            Select Case Index
                Case "Disabled"
                    hKey = Me.OpenRegistryKeyForWriting()
                    If hKey Is Nothing Then
                        hKey = Registry.CurrentUser.CreateSubKey(rv.Path)
                        hKey.SetValue(rv.Value, 1, RegistryValueKind.DWord)
                    Else
                        hKey = Registry.CurrentUser.CreateSubKey(rv.Path)
                        hKey.SetValue(rv.Value, 1, RegistryValueKind.DWord)
                    End If
                Case "Enabled"
                    hKey = Me.OpenRegistryKeyForWriting()
                    If hKey IsNot Nothing Then
                        hKey = Registry.CurrentUser.CreateSubKey(rv.Path)
                        hKey.SetValue(rv.Value, 0, RegistryValueKind.DWord)
                    End If
            End Select
        Catch ex As Exception
            MessageBox.Show(ex.Message.ToString(), "Info")
        Finally
            If hKey IsNot Nothing Then
                hKey.Close()
            End If
        End Try
    End Sub

    Private Function OSVersion() As Boolean
        If System.Environment.OSVersion.Platform = PlatformID.Win32NT = True Then
            Return True
        Else
            Return False
        End If
    End Function

Event masing-masing button serta form_load yang perlu dicegat adalah sebagai berikut:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
            Handles MyBase.Load
        If Me.OSVersion = False Then
            MessageBox.Show("This example works only under WinNT or higher...", "Info")
            Application.Exit()
        End If
        Me.CenterToScreen()
        With Me.rv
            .Path = "Software\Microsoft\Windows\CurrentVersion\Policies\System"
            .Value = "DisableTaskMgr"
        End With
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Me.EnableDisableTaskmanager("Disabled")
        MsgBox("Task Manager has been disabled", MsgBoxStyle.Information)
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
            Handles Button2.Click
        Me.EnableDisableTaskmanager("Enabled")
        MsgBox("Task Manager has been enabled", MsgBoxStyle.Information)
    End Sub

End Class

Tampilan yang didapatkan adalah:

Pastikan Task Manager telah di-enable kembali sebelum program ditutup.

VB.Net – Animasi Mata

2009-08-25T13:58:00.000+07:00

Tip berikut ini akan membuat sebuah animasi mata pada form yang akan selalu mengikuti gerakan mouse. Pergerakan pupil dilakukan dengan menggunakan persamaan lingkaran agar nampak lebih realistis.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru. Ubah caption form menjad "Eye Movements!". Tidak perlu ditambahkan apapun dalam form ini, karena mata akan dibuat langsung dalam program.

Deklarasi awal untuk animasi mata ini adalah sebagai berikut:

'Digunakan untuk menggambar lingkaran
Imports System.Drawing

Public Class Form1
    Inherits System.Windows.Forms.Form
    Dim crsr As Point
    Dim e1, e2 As Mata

Kita perlu membuat sebuah class Mata yang nantinya digunakan ke dalam program.

    Class Mata
        'atribut yang pada class mata
        Dim Lft, rght, LPupil, RPupil As Point
        Const EYE_RADIUS As Integer = 30
        Const PUPIL_RADIUS As Integer = 10

        Public Sub New(ByVal c As Point)
            MyBase.new()
            'membuat instance baru
            Lft = New Point(c.X - EYE_RADIUS - 3, c.Y)
            rght = New Point(c.X + EYE_RADIUS + 3, c.Y)
        End Sub

        Private Sub FillCircle(ByVal G As Graphics, ByVal Center As Point, ByVal Radius As Integer, ByVal brsh As Brush)
            'menggambar lingkaran untuk pupil
            Dim x, y As Integer
            G.FillEllipse(brsh, Center.X - Radius, Center.Y - Radius, 2 * Radius, 2 * Radius)
        End Sub

        Private Function compute(ByVal cursor As Point, ByVal eye As Point) As Point
            Dim d As Double, r As Integer
            'menghitung posisi dari pupil untuk mata kiri dan kanan
            'gunakan rumus untuk jarak antara pupil dengan kursor mouse
            'akan selalu mengikuti gerakan dari kursor mose
            'antisipasi jika terjadi kesalahan/overflow dalam perhitungan
            Try
                d = ((cursor.X - eye.X) * (cursor.X - eye.X)) + ((cursor.Y - eye.Y) * (cursor.Y - eye.Y))
                d = Math.Sqrt(d)
                r = EYE_RADIUS - PUPIL_RADIUS
                Return New Point(eye.X + ((cursor.X - eye.X) * r / d), eye.Y + ((cursor.Y - eye.Y) * r / d))
            Catch ex As Exception
                'do nothing 
            End Try
        End Function


        Public Sub stare(ByVal g As Graphics, ByVal cursor As Point)
            Dim brsh As Brush           
            brsh = Brushes.White
            FillCircle(g, Lft, EYE_RADIUS, brsh)
            FillCircle(g, rght, EYE_RADIUS, brsh)
            brsh = Brushes.Black
            LPupil = compute(cursor, Lft)
            FillCircle(g, LPupil, PUPIL_RADIUS, brsh)
            RPupil = compute(cursor, rght)
            FillCircle(g, RPupil, PUPIL_RADIUS, brsh)
        End Sub

    End Class

Event-event yang perlu dicegat adalah

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Width = 505
        Height = 400
        'membuat dua buah mata
        e1 = New Mata(New Point(250, 200))
        crsr = New Point(250, 2000)
    End Sub

Private Sub Form1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove
        crsr.X = e.X
        crsr.Y = e.Y
        Me.Refresh()
    End Sub

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        e1.stare(e.Graphics, crsr)
        e2.stare(e.Graphics, crsr)
        Dim brsh As Brush
        brsh = Brushes.Brown
        e.Graphics.DrawString("MOVE YOUR MOUSE ON THE FORM", Me.Font, brsh, 70, 345)

End Sub

Tampilan yang didapatkan untuk aplikasi di atas adalah:

Karena kita telah membuat class mata, maka untuk menambahkan mata, agar ada 2 mata pada form, kita cukup menginisialisasi objek baru pada form load. Contoh:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Width = 505
        Height = 400

        e1 = New Mata(New Point(100, 200))   'mata pertama
        e2 = New Mata(New Point(400, 200))   'mata ke dua
        crsr = New Point(250, 2000)

    End Sub

Untuk event Form1_Paint juga ditambahkan agar kedua mata dapat mengikuti gerakan mouse.

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        e1.stare(e.Graphics, crsr)
        e2.stare(e.Graphics, crsr)
        Dim brsh As Brush
        brsh = Brushes.Brown
        e.Graphics.DrawString("MOVE YOUR MOUSE ON THE FORM", Me.Font, brsh, 70, 345)

    End Sub

Tampilan yang dihasilkan untuk dua buah mata adalah:

VB.Net – Mengisi DataGrid dengan Gambar

2009-08-21T13:39:00.000+07:00

Kontrol DataGrid digunakan untuk menampilkan data dari sebuah database pada VB.NET. Karena ini merupakan satu-satunya komponen grid yang dipunyai Microsoft, umumnya programmer tidak mempunyai banyak pilihan selain memanfaatkan kontrol DataGrid ini untuk menampilkan data atau query pada aplikasi database yang dibuatnya.

Ketika harus menampilkan data, tentunya tidak semua data berupa teks. Bisa jadi data adalah berupa gambar. Apakah DataGrid dapat digunakan untuk menampilkan gambar? Tip berikut adalah salah satu cara untuk menampilkan gambar pada kontrol DataGrid.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru yang didalamnya terdapat sebuah command button yang bernama btnRefresh dan sebuah DataGrid yang bernama DataGrid1.

Deklarasi awal dari aplikasi ini adalah sebagai berikut:

Imports System.IO
imports System.Data.OleDb 
Public Class Form1
    Inherits System.Windows.Forms.Form

    Dim ItemPicture As System.Windows.Forms.PictureBox
    Dim dgCell As DataGridCell
    Dim colStyle As GridColumnStylesCollection
    Dim dgStyle As New DataGridTableStyle
    Dim dgTable As DataGridTextBoxColumn
    Dim blnNew As Boolean = False
    Dim intRow As Integer, intCol As Integer

Event-event yang perlu dicegat

Private Sub Form1_Load(ByVal sender As System.Object, _
   ByVal e As System.EventArgs) Handles MyBase.Load
        intRow = 0

        ItemPicture = New PictureBox
        ItemPicture.Width = 148
        ItemPicture.Height = 124
        ItemPicture.Cursor = System.Windows.Forms.Cursors.Arrow
        ItemPicture.Dock = DockStyle.Fill

        ItemPicture.SizeMode = PictureBoxSizeMode.StretchImage

        AddHandler ItemPicture.Click, AddressOf ClickCBO
        RefereshRec()

End Sub

Private Sub ClickCBO(ByVal sender As System.Object, ByVal e As System.EventArgs)
  ItemPicture.ContextMenu = (ImageMenu)
End Sub

Private Sub btnReferesh_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles btnReferesh.Click
        RefereshRec()
End Sub

Private Sub DataGrid1_CurrentCellChanged(ByVal sender As Object, _
  ByVal e As System.EventArgs) Handles DataGrid1.CurrentCellChanged
        RetreiveImages()
End Sub

Subrutin untuk menampilkan gambarnya adalah:

Private Sub RetreiveImages()
  Try
    Dim MyData As Byte() = Nothing
    Dim crPosition As Integer

    crPosition = Me.BindingContext(dt).Position

    If blnNew = True Then ItemPicture.Image.Dispose()
    blnNew = True
    MyData = CType(ds.Tables(0).Rows(crPosition)("ItemPicture"), Byte())

    Dim intData As New Integer
    intData = MyData.GetUpperBound(0)
    Dim fs As New FileStream("c:\tempimage.jpg", _
              FileMode.OpenOrCreate, FileAccess.Write)
    fs.Write(MyData, 0, intData)
    fs.Close()
    MyData = Nothing
    ItemPicture.Image = Image.FromFile("c:\tempimage.jpg")

  Catch ex As Exception
    '  MessageBox.Show(ex.Message.ToString)
    Finally
        cn.Close()
    End Try

End Sub

Private Sub RefereshRec()
  cmd.CommandText = "SELECT ItemsID, Item as Item, _
      ItemPicture FROM tblPicture ORDER BY ItemsID"
        cmd.CommandType = CommandType.Text
     cmd.Connection = cn
     da.SelectCommand = cmd
     ds.Clear()
     da.Fill(ds, "tblPicture")
     dt = ds.Tables("tblPicture")

     dgStyle.MappingName = dt.TableName
     DataGrid1.TableStyles.Add(dgStyle)
     dgStyle.PreferredRowHeight = 135
     dgStyle.PreferredColumnWidth = 205

     colStyle = DataGrid1.TableStyles(0).GridColumnStyles
     DataGrid1.DataSource = dt
     colStyle(0).Width = 150
     colStyle(1).Width = 150
     colStyle(2).Width = 150

     dgTable = CType(DataGrid1.TableStyles(0).GridColumnStyles(2), _
                      DataGridTextBoxColumn)
     ItemPicture.Visible = True
     ItemPicture.Focus()
     dgTable.TextBox.Controls.Add(ItemPicture)

     Dim dgCell As DataGridCell
     dgCell = New DataGridCell(intRow, 2)
     DataGrid1.CurrentCell = dgCell
End Sub

Tampilan yang didapatkan untuk aplikasi di atas adalah:

PHP - Membuat Kamus Dengan PHP dan XML

2009-08-19T18:44:00.000+07:00

Saat ini ada banyak kamus online di Internet yang menawarkan terjemahan dari dan ke berbagai bahasa. Salah satunya adalah Google Translate yang punya kemampuan menerjemahkan bukan hanya kata tapi juga kalimat.

Pada tip kali ini kita akan mencoba program kamus online dengan menggunakan PHP dan XML. Prinsip yang digunakan adalah meminta masukan sebuah kata, lalu membaca data tersebut dari sebuah file XML dan menampilkannya. Prinsip yang sederhana ini dapat dikembangkan untuk berbagai macam keperluan, misalnya dengan pencarian barang dari sebuah katalog, judul buku untuk perpustakaan, artikel dari sebuah koran dan sebagainya.

Langkah-langkah untuk membuatnya adalah:

Kita siapkan terlebih dulu sebuah file CSS untuk menunjang tampilannya. File CSS ini dapat disimpan dengan css.css.

body
{font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
a{color:#0033CC;}
h1, h2, p, form{
border:0px;
margin:0px;
padding:0px;
}

input{  font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana,
  Arial, Helvetica, sans-serif;
font-size:12px;
}

h2{ color:#666666;
margin-bottom:20px;
font-size:16px;
}

div.main{
margin:30px auto;
width:340px;
}

div.box{
border:solid 1px #c6cfe1;
background:#dfe4ee;
padding:10px;
color:#333333;
margin-bottom:20px;
}
div.box h1 {
font-size:14px;
color:#000000;
padding-bottom:4px;
}
div.box p{padding-bottom:14px;}

div.box input .input-text{
border:1px solid #3b6e22;
color:#666666;
width:180px;
}

div.box label{
display:block;
margin-bottom:10px;
color:#555555;
}

div.box label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}

Tampilan utama dari program kamus ini disimpan pada file index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Beautiful Forms</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>
<div class="main">
<h1>Kamus Online</h1>
<h2>Bahasa Indonesia - Inggris</h2>
<br/><br/>

<div class="box">
<h1>Teks</h1>
<p>Masukkan kata dalam bahasa Indonesia</p>
<form method="post" action="php.php" style="display:inline" >
<label><span>Kata</span>
<input type="text"name="strvar" class="input-text"/>
</label>
<input type="submit" value="Terjemahkan">
</form>

</div>
</body>
</html>

Untuk menangani prosesnya, kita membuat file php.php yang bertugas untuk membaca file XML dan menampilkan hasil dari terjemahan yang ada.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<center>

<div class="box">
<h1>Hasil dari kata:

<?php
$strvar=$_POST["strvar"];
echo $strvar . '</h1>';
$strptr=simplexml_load_file("xml.xml");
foreach($strptr -> dictionary_words as $fin_ptr){
print "<br>";
print "<p>";
print  $fin_ptr -> $strvar;
print "</p>";
}
?>
</div>
</center>

</body>
</html>

Terakhir adalah membuat file xml.xml yang merupakan data kamus. Struktur dokumen XML yang digunakan adalah menjadikan sebuah kata sebagai element, kemudian memberikan arti pada element content. Berikut adalah contoh untuk file xml.xml yang akan dibaca oleh php.

<?xml version="1.0" ?>
<dictionary>
<dictionary_words>
<pengetahuan>
erudition, knowing, knowledge, learning
</pengetahuan>

<belajar>
learn, study
</belajar>

<mitigasi>
To make less severe, intense, harsh, rigorous, painful, etc.; to soften; to meliorate; to alleviate; to diminish; to lessen; as, to mitigate heat or cold; to mitigate grief. 1913 Webster
</mitigasi>

</dictionary_words>
</dictionary>

Jika dijalankan pada browser, maka tampilan yang di dapatnya adalah sebagai berikut:

PHP - Membuat Jadwal Pelajaran Dengan Class PHP

2009-08-17T09:55:00.000+07:00

Bulan-bulan ini merupakan tahun ajaran baru atau semester baru bagi siswa sekolah menengah ataupun mahasiswa. Tahun ajaran baru berarti jadwal pelajaran yang baru pula. Membuat jadwal pelajaran baru, tidak harus dilakukan pada selembar kertas, tapi bisa juga diupload ke sebuah server sehingga dapat diakses sewaktu-waktu.

Pada tip kali ini, kita akan membuat jadwal pelajaran dengan terlebih dulu membuat class di PHP. Dengan menggunakan sebuah class, maka akan lebih mudah untuk menerapkannya ke dalam berbagai macam jadwal pelajaran tanpa repot memprogram ulang.

Langkah-langkah untuk membuatnya adalah:

Kita buat terlebih dulu sebuah class yang bernama schedule.inc.php. Class ini merupakan class utama dalam pembuatan jadwal pelajaran yang diawali dengan menginisialisasikan interval waktu dan waktu awal dari jadwal.


<?php

function schedule_generate($classes_arr, $options) {
// gunakan default 30 menit interval jika interval tidak ditentukan
if ( intval($options["row_interval"]) == 0 )
$options["row_interval"] = 30;

// default Pk.08.00 sebagai awal jika start_time tidak ditentukan
if ( ! isset($options["start_time"]) ) {
$options["start_time"] = 800;
} else {
$time_hour = ($options["start_time"] –
$options["start_time"] % 100) / 100;

$time_min = $options["start_time"] % 100;
$time_totalmins = $time_hour * 60 + $time_min;
if ( $time_totalmins % $options["row_interval"] > 0)
$time_totalmins = $time_totalmins –
$time_totalmins % $options["row_interval"];
$options["start_time"] = ($time_totalmins –
$time_totalmins % 60) / 60 * 100 +
$time_totalmins % 60;
}

Kode berikutnya adalah mendefinisikan akhir dari jadwal. Jika tidak ditentukan, jadwal akan berakhir pada Pk. 22.00

// default Pk. 22.00
if ( ! isset($options["end_time"]) ) {
$options["end_time"] = 2200;
} else {
// change to the nearest row interval hour down.
$time_hour = ($options["end_time"] –
$options["end_time"] % 100) / 100;
$time_min = $options["end_time"] % 100;
$time_totalmins = $time_hour * 60 + $time_min;

if ( $time_totalmins % $options["row_interval"] > 0)
$time_totalmins = $time_totalmins –
$time_totalmins % $options["row_interval"];
$options["end_time"] = ($time_totalmins –
$time_totalmins % 60) / 60 * 100 +
$time_totalmins % 60;
}

$days_arr = array("Minggu", "Senin",
"Selasa", "Rabu", "Kamis",
"Jumat", "Sabtu");
$days_norow = array(0, 0, 0, 0, 0, 0, 0);

Pembuatan tabel dilakukan berdasarkan inisialisasi yang dilakukan pada langkah sebelumnya.

$html = "<table width=\"100%\"
bgcolor=\"#000000\" cellspacing=\"1\"
cellpadding=\"0\">\n";

// judul tabel
if ( isset($options["title"]) ) {
$cell_style = "background-color: #000000; color: #ffffff;";
$cell_style .= $options["title_style"];

$html .= "<tr>\n <th colspan=\"8\"
style=\"$cell_style\">".$options["title"].
"</th>\n </tr>\n";
}

$cell_style = "background-color: #c0c0c0; color: #000000;";
$cell_style .= $options["dayheader_style"];

$html .= "<tr style=\"$cell_style\">\n<th> </th>\n";

foreach ($days_arr as $day){
$html .= "<th>$day</th>\n";
}

$html .= "</tr>\n";

$cur_time = $options["start_time"];

while ($cur_time < $options["end_time"]) {
$format_time = date("g:ia", strtotime(substr($cur_time, 0,
strlen($cur_time) - 2).":".substr($cur_time, -2, 2)));

$cell_style = "background-color: #c0c0c0; color: #000000;";
$cell_style .= $options["time_style"];

$html .= "<tr bgcolor=\"#ffffff\">\n
<td align=\"right\" width=\"2%\"
style=\"$cell_style\"><b>$format_time</b></td>\n";

for ($cur_day = 0; $cur_day < 7; $cur_day++) {
if ($days_norow[$cur_day] > 0) {
$days_norow[$cur_day]--;
continue;
}

if ( isset($classes_arr[$cur_day][$cur_time]) ) {
$class_interval = intval($classes_arr[$cur_day]
[$cur_time]["interval"]);
if ( $class_interval == 0 )
$class_interval = 60;
// round to nearest interval
$class_span = intval($class_interval / $options["row_interval"]);

$days_norow[$cur_day] += $class_span - 1;
if ( isset($classes_arr[$cur_day]
[$cur_time]["style"]) )
$cell_style = $options["class_globalstyle"].";
".$classes_arr[$cur_day][$cur_time]["style"];
else
$cell_style = $options["class_globalstyle"];

$html .= "<td width=\"14%\"
rowspan=\"$class_span\" style=\"$cell_style\">".
$classes_arr[$cur_day][$cur_time]["html"]."</td>\n";

} else {
$html .= "<td width=\"14%\"> </td>\n";
}
}
$html .= "</tr>\n";
$cur_time += $options["row_interval"];
if ($cur_time % 100 >= 60)
$cur_time = $cur_time - $cur_time % 100 + 100;
};

$html .= "</table>\n";
return $html;
}
?>

Setelah class selesai dibuat, berikutnya adalah memanfaatkan class tersebut untuk membuat jadwal dalam sebuah file baru, schedule.php.

<?php
require 'schedule.inc.php';
$classes_arr = array(
1 => array(
800 => array(
"html" => "<b>Konsep Sistem Informasi</b><br>Lab Ole",
"style" => "background-color: #66CCCC",
"interval" => 120)),

3 => array(
1300 => array(
"html" => "<b>Pemrograman Internet</b><br>Lab Krysten",
"interval" => 120))
);

$options = array(
"title" => "Jadwal Mengajar Semester Gasal 2009",
"title_style" => "font-family: verdana; font-size: 14pt;",
"time_style" => "font-family: verdana; font-size: 8pt;",
"dayheader_style" => "font-family: verdana; font-size: 10pt;",
"class_globalstyle" => "background-color: #c0c0c0;
font-family: verdana; font-size: 8pt; text-align: center;",
);

echo schedule_generate($classes_arr, $options);

?>

Berikut adalah contoh tampilan yang didapatkan:

PHP - Captcha Dengan Menggunakan Klik

2009-08-14T07:01:00.000+07:00

Captcha digunakan pada pengisian form untuk memastikan bahwa user yang saat itu sedang mengisi adalah manusia dan bukan mesin. Ada berbagai model captcha. Yang umum adalah captcha dengan menggunakan teks yang diberikan noise agar mesin tidak dapat membacanya.

Pada tip kali ini, kita akan membuat teknik captcha dengan klik pada teks tertentu. Dikatakan tepat jika user berhasil mengklik sesuai dengan yang diminta.

Langkah-langkah untuk membuatnya adalah:

Kita siapkan terlebih dulu form yang hendak ditampilkan. Simpan kode di bawah ini dengan nama form.php


<?php
ob_start('ob_gzhandler');
session_start();
if ($_POST[x]){
$x = $_POST[x];
$y = $_POST[y];
$aa = round(base64_decode($_SESSION['afloat']));
$xc[1] = ($x >= 1) && ($x <= 17);     
$xc[2] = ($x >= 18) && ($x <= 36);    
$xc[3] = ($x >= 37) && ($x <= 53);    
    if (($y >= 18) && ($y <= 35)){$ab = $aa;}  
  elseif (($y >= 36) && ($y <= 51)){$ab = $aa - 3;}       
    else {$ab = $aa - 6;}   
      $mess = "Klik tidak pada posisi yang benar";    


if ($xc[$ab]){   $mess = "Tepat!"; } ?>

// create random image
$_SESSION[igif] = "image_grid.php?a=" . $afloat . "";
$_SESSION['afloat'] = $afloat;
?>

Tampilan utama untuk form ini adalah sebagai berikut:

<html>
<head>
<style type="text/css">
.cd {
width: 54px;
height: 69px;
background-image: url(<?=$_SESSION[igif];?>);
background-repeat: no-repeat;
position: relative;
left:<?=rand(-100,100);?>px;
bottom:<?=rand(25,25);?>px;
z-index: 2;
}
</style>

<script language="JavaScript">
function submitform() {
if (document.xycoords.y.value <?=$aler;?>) {
document.xycoords.submit();}
else {
alert("Klik pada angka di dalam kotak.");
}
}

function xycoord(event) {
imagex = event.offsetX?(event.offsetX):event.pageX-document.getElementById("coord").offsetLeft;
document.xycoords.x.value = imagex;
imagey = event.offsetY?(event.offsetY):event.pageY-document.getElementById("coord").offsetTop;
document.xycoords.y.value = imagey;
}
</script>

<div align="center"><form name="xycoords" action="<?=$_SERVER['PHP_SELF']; ?>" method="post">
<table summary="" border="0">
<tr>
<input type="hidden" name="x" />
<input type="hidden" name="y" />
<td><font face="Verdana" size="4" color="#800000">Demo Click Captcha </font></td>
</tr>
</table>
</form>

<p><br></p>

<div id="coord" class="cd" onclick="submitform(xycoord(event))"></div>

</div>
</body>
</html>
<? ob_end_flush();?>

Proses untuk menggambar teks dan menentukan angka yang hendak di-klik dilakukan pada file image_grid.php. Pada proses ini, kita akan menyimpan image pada buffer terlebih dahulu sebelum ditampilkan.

<?php
ob_start('ob_gzhandler');
session_start();
$a = $_GET['a'];
if ($a == $_SESSION['afloat']){
$aa = round(base64_decode($a)) - 1;
$im = imagecreatetruecolor (54, 69);
$myn = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$rn = array_rand($myn, 9);
$string1 = "" . $myn[$rn[0]] . " " . $myn[$rn[1]] . " " .
$myn[$rn[2]] . "";
$string2 = "" . $myn[$rn[3]] . " " . $myn[$rn[4]] . " " .
$myn[$rn[5]] . "";
$string3 = "" . $myn[$rn[6]] . " " . $myn[$rn[7]] . " " .
$myn[$rn[8]] . "";
$mynum = "" . $string1 . " " . $string2 . " " .
$string3 . "";
$na = 17;
$nb = 54;
$nc = 0;
$nd = 54;
$ab = explode(" ", $mynum);
$mystring = "Click $ab[$aa]";

$change = rand(1,9);
$lime = imagecolorallocate($im,0,255,0);
$yellow = imagecolorallocate($im,255,255,0);
$white = imagecolorallocate($im,255,255,255);
$lgray = imagecolorallocate($im,206,206,206);
$gray = imagecolorallocate($im,115,115,115);
$black = imagecolorallocate($im,0,0,0);
$green = imagecolorallocate($im,1,107,0);
$grc = " $lime $yellow $white $lgray $yellow $white $gray $black $green";
$rc = explode(" ", $grc);
$bgc = $rc[$change];

$bc = imagecolorallocate ($im, 0, 0, 0);
$rd = imagecolorallocate ($im, 255, 0, 0);
$wh = imagecolorallocate ($im, 255, 255, 255);

if (($change > 3) && ($change < 7)) { $bc = $rd;}
elseif ($change > 6) { $bc = $wh;}

imagefilledrectangle ($im, 1, 1, 54, 69, $bgc);
imagerectangle ($im, 0, 0, 53, 68, $bc);
for($i=$na;$i<=$nb;$i+=19)
imageline($im,$i,17,$i,69,$bc);
for($i=$na;$i<=$nb;$i+=17)
imageline($im,0,$i,54,$i,$bc);

imagestring ( $im, 9, 5, 18,$string1, $bc);
imagestring ( $im, 9, 5, 35,$string2, $bc);
imagestring ( $im, 9, 5, 52,$string3, $bc);
imagestring ($im, 3, 2, 3, "$mystring", $bc);

header("Content-Type: image/gif");
imagegif($im);
imagedestroy($im);
}
ob_end_flush();
?>

Berikut adalah beberapa contoh tampilan yang didapatkan:

CSS – Membuat Style Image Caption

2009-08-12T20:55:00.000+07:00

Standardnya, HTML tidak menyediakan sebuah tag khusus untuk memberikan caption (judul) pada suatu image. Namun dapat diakali dengan menggunakan tabel, yaitu meletakkan caption tersebut pada baris di bawah image. Cara lain adalah membuat tag sendiri dengan menggunakan CSS.

Tip kali ini adalah membuat class di CSS yang memungkinkan untuk memberikan caption pada suatu image. Agar lebih menarik, maka caption akan muncul ketika cursor mouse masuk dalam area image.

Langkah-langkah untuk membuatnya adalah sebagai berikut:

Buat terlebih dulu CSS dalam sebuah file bernama caption.css. Kita definisikan untuk tag-tag yang umum, yaitu html dan body

html {
max-height:100%;
padding:0;
margin:0;
border:0;
font-family: sans-serif;
overflow:hidden;
}

body {
height:100%;
max-height:100%;
overflow:auto;
padding:0;
margin:0;
border:0;
background-color: transparent;
}

Untuk menambahkan caption kita membuat sebuah class imgteaser yang secara default adalah hidden. Ketika mouse ada pada area image, maka caption akan ditampilkan.

#content {
position: absolute;
top:90px;
left:0;
bottom:30px;
right:0;
overflow:auto;
padding:10px;
text-align:left;
}

.imgteaser {
margin: 5px;
overflow: hidden;
float: left;
position: relative;
}

.imgteaser a {
text-decoration: none;
float: left;
position: relative;
}

.imgteaser a:hover {
cursor: pointer;
}

.imgteaser a .more {
position: absolute;
right: 0px;
bottom: 0px;
font-size: 10pt;
color: #fff;
background: #000;
padding: 0px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
}
.imgteaser a:hover .desc{
display: block;
font-size: 10pt;
padding: 0;
background: #111;
filter:alpha(opacity=100);
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
color: #fff;
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
margin: 0;
width: 180px;
border-top: 1px solid #999;
text-align: left;
}

.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 0px;
font-size:10pt;
}

.imgteaser a {
text-align: right;
}
.imgteaser a .desc {display: none; }
.imgteaser a:hover .more { visibility: hidden;}

Untuk mencoba CSS di atas, kita buat sebuah file HTML bernama caption.html yang akan menggunakan file caption.css yang telah dibuat.

<html>
<head>
<title>Image Caption</title>
</head>
<link rel="STYLESHEET" type="text/css"
href="caption.css" media="screen">

<body>
<div class="imgteaser">
<a href="#">
<img src="gitgit.jpg" alt="Air Terjun Gitgit" />
<span class="more">» Keterangan</span>
<span class="desc">
<strong><u>Air Terjun Gitgit</u></strong>
Menjadi salah satu tujuan
  wisata di daerah Bali Utara.
  Terletak 9 Km dari Kota Singaraja.
</span>
</a>
</div>

<div class="imgteaser">
<a href="#">
<img src="lovina.jpg" alt="Lovina Beach" />
<span class="more">» Keterangan</span>
<span class="desc">
<strong><u>Pantai Lovina</u></strong>
  Terletak sekitar 9 Km sebelah barat kota Singaraja,
  ini merupakan salah satu obyek wisata yang
  ada di Bali Utara.
</span>
</a>
</div>
</body>
</head>

</html>

Tampilan pada browser adalah sebagai berikut:

VB.Net – Membuat Magnifier

2009-08-12T20:40:00.000+07:00

Magnifier merupakan salah satu fasilitas dari Windows yang dapat digunakan untuk memperbesar suatu area. Tujuannya adalah membuat teks dapat lebih terbaca terutama bagi yang mengalami gangguan pengelihatan.

Pada tip kali ini, dengan vb.net kita akan membuat magnifier yang dilengkapi dengan skala perbesaran yang dapat ditentukan sendiri dengan menggunakan scrollbar.

Langkah-langkah untuk membuatnya adalah:

Buat sebuah form dengan dengan 3 buah komponen, yaitu timer yang diberi nama tmrRepaint, Statusbar dengan nama stbMagnifier dan VScrollBar yang diberi nama vsbMagnifier. Untuk VScrollBar, agar diletakkan pada sisi kanan, kita ubah property Dock dari none menjadi Right. Demikian juga untuk Timer, property Enabled di-set menjadi True dengan Interval 100.

Deklarasi awal untuk project ini adalah sebagai berikut:


Public Class Form1

Inherits System.Windows.Forms.Form

Public Const BLACKNESS = &H42
Public Const DSTINVERT = &H550009
Public Const CAPTUREBLT = &H40000000
Public Const MERGECOPY = &HC000CA
Public Const MERGEPAINT = &HBB0226
Public Const NOMIRRORBITMAP = &H80000000
Public Const NOTSRCCOPY = &H330008
Public Const NOTSRCERASE = &H1100A6
Public Const PATCOPY = &HF00021
Public Const PATINVERT = &H5A0049
Public Const PATPAINT = &HFB0A09
Public Const SRCCOPY = &HCC0020
Public Const SRCAND = &H8800C6
Public Const SRCERASE = &H440328
Public Const SRCINVERT = &H660046
Public Const SRCPAINT = &HEE0086
Public Const WHITENESS = &HFF0062

Public Declare Function BitBlt _
Lib "gdi32" Alias "BitBlt" _
(ByVal hDestDC As Integer, _
ByVal x As Integer, _
ByVal y As Integer, _
ByVal nWidth As Integer, _
ByVal nHeight As Integer, _
ByVal hSrcDC As Integer, _
ByVal xSrc As Integer, _
ByVal ySrc As Integer, _
ByVal dwRop As Integer) As Integer

Public Declare Function GetDesktopWindow _
Lib "user32" () As IntPtr

Public Declare Function GetDC _
Lib "user32.dll" (ByVal hWnd As IntPtr) _
As IntPtr

Public Declare Function ReleaseDC _
Lib "user32" (ByVal hwnd As Integer, _
ByVal hdc As Integer) As Integer

Dim GrayscaleMatrix As Imaging.ColorMatrix = _
New Imaging.ColorMatrix(New Single()() _
       {New Single() {0.3, 0.3, 0.3, 0, 0}, _
        New Single() {0.59, 0.59, 0.59, 0, 0}, _
        New Single() {0.11, 0.11, 0.11, 0, 0}, _
        New Single() {0, 0, 0, 1, 0}, _
        New Single() {0, 0, 0, 0, 1}})

Dim ImageAttributes As New Imaging.ImageAttributes

Untuk event yang dicegat ada 2, yaitu Form_Load dan tmrRepaint yang akan melakukan refresh dalam interval waktu 0.1 detik.

Private Sub Form1_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load

ImageAttributes.SetColorMatrix(GrayscaleMatrix)
End Sub

Private Sub tmrRepaint_Tick(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles tmrRepaint.Tick

RepaintMagnifier()
End Sub

Fungsi utama pada aplikasi magnifier ini adalah sub RepaintMagnifier. Pada sub ini, kita menjadikan form sebagai objek yang direferensikan pada objek Graphics, sehingga pada form dapat dilakukan pengolahan grafis (menampilkan bitmap).

Private Sub RepaintMagnifier()
Dim e As Graphics = Me.CreateGraphics
Dim hr As Integer = Screen.PrimaryScreen.Bounds.Width
Dim vr As Integer = Screen.PrimaryScreen.Bounds.Height

   'Persentase zoom
Dim percent As Single = Me.vsbMagnifier.Value / 100
Dim lengthX As Single = (Me.Width - Me.vsbMagnifier.Width) * percent
Dim lengthY As Single = (Me.Height - Me.stbMagnifier.Height) * percent

   'Tulis faktor zoom ke statusbar
Me.stbMagnifier.Text = _
"Zoom Factor : " & _
100 - Me.vsbMagnifier.Value & " X"

Dim offsetX As Single = lengthX \ 2
Dim offsetY As Single = lengthY \ 2

Dim blitAreaX As Integer = Me.Width - Me.vsbMagnifier.Width
Dim blitAreaY As Integer = Me.Height - Me.stbMagnifier.Height

Dim b As New Bitmap(CInt(blitAreaX), CInt(blitAreaY))
Dim g As Graphics = Graphics.FromImage(b)

g.SmoothingMode = Drawing2D.SmoothingMode.HighSpeed
g.CompositingQuality = Drawing2D.CompositingQuality.HighSpeed
g.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighSpeed
g.InterpolationMode = Drawing2D.InterpolationMode.Low

e.SmoothingMode = Drawing2D.SmoothingMode.HighSpeed
e.CompositingQuality = Drawing2D.CompositingQuality.HighSpeed
e.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighSpeed
e.InterpolationMode = Drawing2D.InterpolationMode.Low

Dim hWndWindow As IntPtr = GetDesktopWindow()
Dim hdcWindow As IntPtr = GetDC(hWndWindow)
Dim hdcGraphics As IntPtr = g.GetHdc()

BitBlt(hdcGraphics.ToInt32, _
0, 0, blitAreaX, blitAreaY, _
hdcWindow.ToInt32, _
Cursor.Current.Position.X - offsetX, _
Cursor.Current.Position.Y - offsetY, _
SRCCOPY Or CAPTUREBLT Or NOMIRRORBITMAP)

ReleaseDC(hWndWindow.ToInt32, hdcWindow.ToInt32)
g.ReleaseHdc(hdcGraphics)

e.DrawImage(b, New Rectangle(0, 0, _
blitAreaX, blitAreaY), 0, 0, lengthX, _
lengthY, GraphicsUnit.Pixel)

   e.Dispose()
End Sub
End Class

Tampilan program ini saat dijalankan adalah sebagai berikut:

VB.Net – Aplikasi Drag-Drop Menggunakan TreeView

2009-08-03T12:49:00.000+07:00

TreeView merupakan sebuah control yang umum digunakan saat membuat aplikasi yang membutuhkan hirarki tertentu. Seringkali, aplikasi dengan hirarki membutuhkan drag-drop untuk memudahkan pengaturan hirarki. Aplikasi kali ini adalah menerapkan drag-drop pada control TreeView.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru yang dua buah Treeview yang masing-masing bernama TreeView1 dan TreeView2

Inisialisasi awal untuk Event Form1_Load adalah dengan memberikan node secara acak pada masing-masing TreeView. Untuk menambahkan node dibutuhkan suatu subruin yang bernama AddRandomNodes.

Public Class Form1
Inherits System.Windows.Forms.Form

Private Sub Form1_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load


   'Allow the TreeViews to be the target of a DragDrop operation
   'and populate it with some random TreeNodes for the example
   TreeView1.AllowDrop = True
   TreeView2.AllowDrop = True
   TreeView1.HideSelection = False
   TreeView2.HideSelection = False
   AddRandomNodes(TreeView1)
   AddRandomNodes(TreeView2)

End Sub

Untuk subrutin AddRandomNodes, kode-nya adalah:

Dim nodeCounter As Integer = 1

Private Sub AddRandomNodes(ByVal treeView As TreeView)
   Randomize()

   treeView.BeginUpdate()
   For i As Integer = 0 To CInt(Rnd() * 5)
       Dim rootNode As New TreeNode("Node " & nodeCounter.ToString)
       treeView.Nodes.Add(rootNode)
       nodeCounter += 1
       AddRandomNodes(rootNode)
   Next
   treeView.EndUpdate()

End Sub

Private Sub AddRandomNodes(ByVal parentNode As TreeNode)
   Dim parents() As String = parentNode.FullPath.Split("\"c)
   If parents.Length = 5 Then Exit Sub

   For i As Integer = 0 To CInt(Rnd() * 5)
       Dim newNode As New TreeNode("Node " & nodeCounter.ToString)
       nodeCounter += 1
       parentNode.Nodes.Add(newNode)
       AddRandomNodes(newNode)
   Next

End Sub

Event-event yang perlu dicegat untuk TreeView adalah:

Public Sub TreeView1_ItemDrag(ByVal sender As System.Object, _
  ByVal e As System.Windows.Forms.ItemDragEventArgs) Handles _
  TreeView1.ItemDrag, TreeView2.ItemDrag

   DoDragDrop(e.Item, DragDropEffects.Move)

End Sub

Public Sub TreeView1_DragEnter(ByVal sender As System.Object, _
    ByVal e As System.Windows.Forms.DragEventArgs) Handles _
    TreeView1.DragEnter, TreeView2.DragEnter

   'Apakah ada treenode yang di-drag?
   If e.Data.GetDataPresent("System.Windows.Forms.TreeNode", True) Then
       'Ada treenode
       e.Effect = DragDropEffects.Move
   Else
       'Tidak ditemukan treenode
       e.Effect = DragDropEffects.None
   End If

End Sub

Public Sub TreeView1_DragOver(ByVal sender As System.Object, _
     ByVal e As DragEventArgs) Handles TreeView1.DragOver, _
     TreeView2.DragOver

   'Apa ada treenode yang di-drag
   If e.Data.GetDataPresent("System.Windows.Forms.TreeNode", _
  True) = False Then Exit Sub

   Dim selectedTreeview As TreeView = CType(sender, TreeView)

   Dim pt As Point = CType(sender, TreeView).PointToClient(New Point(e.X, e.Y))
   Dim targetNode As TreeNode = selectedTreeview.GetNodeAt(pt)

   If Not (selectedTreeview Is targetNode) Then
       selectedTreeview.SelectedNode = targetNode

       Dim dropNode As TreeNode = CType(e.Data.GetData("System.Windows.Forms.TreeNode"), _
            TreeNode)
       Do Until targetNode Is Nothing
           If targetNode Is dropNode Then
               e.Effect = DragDropEffects.None
               Exit Sub
           End If
           targetNode = targetNode.Parent
       Loop
   End If

   e.Effect = DragDropEffects.Move

End Sub

Public Sub TreeView1_DragDrop(ByVal sender As System.Object, _
    ByVal e As System.Windows.Forms.DragEventArgs) Handles _
    TreeView1.DragDrop, TreeView2.DragDrop

   'Apa ada treenode yang di-drag?
   If e.Data.GetDataPresent("System.Windows.Forms.TreeNode", _
 True) = False Then Exit Sub

   Dim selectedTreeview As TreeView = CType(sender, TreeView)

   Dim dropNode As TreeNode = CType(e.Data.GetData("System.Windows.Forms.TreeNode"),_
  TreeNode)

   Dim targetNode As TreeNode = selectedTreeview.SelectedNode

   'Remove node yang di-drop dari tempat asal
   dropNode.Remove()

   If targetNode Is Nothing Then
       selectedTreeview.Nodes.Add(dropNode)
   Else
       targetNode.Nodes.Add(dropNode)
   End If

   dropNode.EnsureVisible()
   selectedTreeview.SelectedNode = dropNode

End Sub

Tampilan yang didapatkan untuk aplikasi di atas adalah:

Setelah dipindahkan dengan drag-drop maka hasilnya adalah:

VB.Net – Mendapatkan Informasi File

2009-07-23T11:50:00.000+07:00

Ketika kita melihat property suatu file melalui Windows, kita bisa mendapatkan informasi seperti tipe file, dapat diedit/dibuka dengan program apa, lokasi, ukuran, dibuat dan dimodifikasi tanggal berapa, serta atribut file. Pada tip kali ini, kita akan membuat suatu aplikasi yang dapat menampilkan informasi file yang dilengkapi dengan CRC32, MD5 Hash, short name serta short path yang biasanya dibutuhkan ketika kita melakukan pengaksesan menggunakan program-program yang tidak mendukung long-file-name.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) 2 buah group box. Group box pertama berisi:

Command button dengan caption "Select file" yang nantinya digunakan untuk memilih file yang hendak didapatkan informasinya.

Text box dengan nama Textbox1. Text box ini untuk menampung nama file yang hendak didapatkan informasinya.

Group box dengan caption Advanced Information dengan sebuah text box bernama Label1. Label1 ini nantinya digunakan untuk menampilkan berbagai informasi dari file.

Group box dengan caption HASH dengan dua buah label yang bernama Label2 dan Label3, masing-masing digunakan untuk menampilkan CRC32 dan MD5 Hash.

Deklarasi yang diperlukan dalam membuat aplikasi ini adalah sebagai berikut:

Public Class Form1

Imports System.IO
Imports System.Security.Cryptography
Imports System.Text

Berikutnya adalah sub rutin untuk mencegat event pengklikan button1.

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim o As OpenFileDialog = New OpenFileDialog
        o.Filter = "All Files (*.*)|*.*"
        If (o.ShowDialog() = DialogResult.OK) Then
            TextBox1.Text = o.FileName
        End If
        '===============================================


        Dim c As New CRC32
        Dim crc As Integer = 0
        Dim f As FileStream = New FileStream(TextBox1.Text, FileMode.Open, FileAccess.Read, FileShare.Read, 8192)
        crc = c.GetCrc32(f)
        f.Close()

        f = New FileStream(TextBox1.Text, FileMode.Open, FileAccess.Read, FileShare.Read, 8192)
        Dim md5 As MD5CryptoServiceProvider = New MD5CryptoServiceProvider
        md5.ComputeHash(f)
        f.Close()

        'mendapatkan informasi file 
        Dim chemin As String = TextBox1.Text
        Dim ObjFSO As Object = CreateObject("Scripting.FileSystemObject")
        Dim objFile = ObjFSO.GetFile(TextBox1.Text)

        Label1.Text = "Name : " & objFile.Name & vbCrLf
        Label1.Text += "Size : " & (objFile.Size) & " (" & (objFile.Size) \ 1048576 & " MB)" & vbCrLf
        Label1.Text += "File Version : " & ObjFSO.GetFileVersion(TextBox1.Text) & vbCrLf
        Label1.Text += "Date created : " & objFile.DateCreated & vbCrLf
        Label1.Text += "Date last accessed : " & objFile.DateLastAccessed & vbCrLf
        Label1.Text += "Date last modified : " & objFile.DateLastModified & vbCrLf
        Label1.Text += "Path : " & objFile.Path & vbCrLf
        Label1.Text += "Short name : " & objFile.ShortName & vbCrLf
        Label1.Text += "Short path : " & objFile.ShortPath & vbCrLf

        'mendapatkan CRC32 dan menampilkan pada label2
        Label2.Text = "CRC32 Hash : " & String.Format("{0:X8}", crc)

        'mendapatkan MD5 hash dan menampilkan pada label3
        Dim hash As Byte() = md5.Hash
        Dim buff As StringBuilder = New StringBuilder
        Dim hashByte As Byte
        For Each hashByte In hash
            buff.Append(String.Format("{0:X1}", hashByte))
        Next
        Label3.Text = "MD5 Hash : " & buff.ToString()

    End Sub
End Class

Terakhir adalah membuat sebuah class baru yang bernama CRC32.

Public Class CRC32
    ' Versi 2 dari algoritma CRC32 di VB CRC32 oleh Paul
    ' (wpsjr1@succeed.net) - 

    Private crc32Table() As Integer
    Private Const BUFFER_SIZE As Integer = 1024

    Public Function GetCrc32(ByRef stream As System.IO.Stream) As Integer

        Dim crc32Result As Integer
        crc32Result = &HFFFFFFFF

        Dim buffer(BUFFER_SIZE) As Byte
        Dim readSize As Integer = BUFFER_SIZE

        Dim count As Integer = stream.Read(buffer, 0, readSize)
        Dim i As Integer
        Dim iLookup As Integer
        Dim tot As Integer = 0
        Do While (count > 0)
            For i = 0 To count - 1
                iLookup = (crc32Result And &HFF) Xor buffer(i)
                crc32Result = ((crc32Result And &HFFFFFF00) \ &H100) And &HFFFFFF   ' nasty shr 8 with vb :/
                crc32Result = crc32Result Xor crc32Table(iLookup)
            Next i
            count = stream.Read(buffer, 0, readSize)
        Loop

        GetCrc32 = Not (crc32Result)

    End Function

    Public Sub New()

        ' Polinomial yang digunakan CRC32 in PKZip.        
        Dim dwPolynomial As Integer = &HEDB88320
        Dim i As Integer, j As Integer

        ReDim crc32Table(256)
        Dim dwCrc As Integer

        For i = 0 To 255
            dwCrc = i
            For j = 8 To 1 Step -1
                If (dwCrc And 1) Then
                    dwCrc = ((dwCrc And &HFFFFFFFE) \ 2&) And &H7FFFFFFF
                    dwCrc = dwCrc Xor dwPolynomial
                Else
                    dwCrc = ((dwCrc And &HFFFFFFFE) \ 2&) And &H7FFFFFFF
                End If
            Next j
            crc32Table(i) = dwCrc
        Next i
    End Sub

End Class

Tampilan yang didapatkan adalah sebagai berikut:

VB.Net – Membuat Captcha

2009-07-15T09:08:00.000+07:00

Saat ini, saat kita melakukan registrasi ke suatu sistem dalam aplikasi web di internet, kita mendapatkan pertanyaan verifikasi seperti mengetikkan suatu tulisan pada suatu gambar yang sedikit dikaburkan tapi masih bisa terbaca, atau menjawab suatu operasi matematik sederhana. Proses verifikasi seperti itu dilakukan untuk menghindari registrasi otomatis yang dilakukan oleh mesin (bot). Jadi sistem registrasi mencoba memverifikasi bahwa yang register adalah orang, bukan mesin. Program untuk melakukan verifikasi tersebut disebut sebagai captcha.

Captcha merupakan singkatan dari "Completely Automated Public Turing test to tell Computers and Humans Apart". Ada beberapa metode untuk mendistorsi karakter pada gambar, misalnya dengan tipe font, penambahan latar belakang (gradasi warna), penambahan objek lain yang menutupi karakter/huruf secara acak, perbedaan warna tiap-tiap huruf, dan algoritma distorsi lainnya seperti pembelokan garis atau efek fisheye. Tip kali ini adalah membuat captcha pada VB.Net.

Langkah-langkah untuk membuatnya adalah:

Buat New Project (Windows Application) dengan sebuah form baru yang berisi:

Picture Box dengan nama PictureBox1. Picture box ini nantinya akan menampung image captcha yang dihasilkan oleh program.

Text box dengan nama Textbox1. Text box ini nantinya akan menampung teks masukan dari user untuk diuji apakan sesuai dengan captcha atau tidak.

Command button dengan nama Button2. Command button ini digunakan untuk membandingkan apakah captcha pada picture box dan teks yang dimasukkan pada text box sesuai atau tidak.

Deklarasi yang diperlukan dalam membuat aplikasi captcha ini adalah sebagai berikut:

 Public Class Form1

    Dim DrawingFont As New Font("Arial", 20)
    Dim CaptchaImage As New Bitmap(140, 40)
    Dim CaptchaGraf As Graphics = Graphics.FromImage(CaptchaImage)
    Dim Alphabet As String = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
    Dim CaptchaString, TickRandom As String
    Dim ProcessNumber As Integer

Berikutnya adalah sub rutin untuk menghasilkan captcha. Banyaknya karakter yang dihasilkan dalam captcha adalah sebanyak 5 dengan kombinasi huruf besar, huruf kecil dan angka.

    Private Sub GenerateCaptcha()
        ProcessNumber = My.Computer.Clock.LocalTime.Millisecond
        If ProcessNumber < 521 Then
            ProcessNumber = ProcessNumber \ 10
            CaptchaString = Alphabet.Substring(ProcessNumber, 1)
        Else
            CaptchaString = CStr(My.Computer.Clock.LocalTime.Second \ 6)
        End If
        ProcessNumber = My.Computer.Clock.LocalTime.Second
        If ProcessNumber < 30 Then
            ProcessNumber = Math.Abs(ProcessNumber - 8)
            CaptchaString += Alphabet.Substring(ProcessNumber, 1)
        Else
            CaptchaString += CStr(My.Computer.Clock.LocalTime.Minute \ 6)
        End If
        ProcessNumber = My.Computer.Clock.LocalTime.DayOfYear
        If ProcessNumber Mod 2 = 0 Then
            ProcessNumber = ProcessNumber \ 8
            CaptchaString += Alphabet.Substring(ProcessNumber, 1)
        Else
            CaptchaString += CStr(ProcessNumber \ 37)
        End If
        TickRandom = My.Computer.Clock.TickCount.ToString
        ProcessNumber = Val(TickRandom.Substring(TickRandom.Length - 1, 1))
        If ProcessNumber Mod 2 = 0 Then
            CaptchaString += CStr(ProcessNumber)
        Else
            ProcessNumber = Math.Abs(Int(Math.Cos(Val(TickRandom)) * 51))
            CaptchaString += Alphabet.Substring(ProcessNumber, 1)
        End If
        ProcessNumber = My.Computer.Clock.LocalTime.Hour
        If ProcessNumber Mod 2 = 0 Then
            ProcessNumber = Math.Abs(Int(Math.Sin(Val(My.Computer.Clock.LocalTime.Year)) * 51))
            CaptchaString += Alphabet.Substring(ProcessNumber, 1)
        Else
            CaptchaString += CStr(ProcessNumber \ 3)
        End If
        ProcessNumber = My.Computer.Clock.LocalTime.Millisecond
        If ProcessNumber > 521 Then
            ProcessNumber = Math.Abs((ProcessNumber \ 10) - 52)
            CaptchaString += Alphabet.Substring(ProcessNumber, 1)
        Else
            CaptchaString += CStr(My.Computer.Clock.LocalTime.Second \ 6)
        End If
        CaptchaGraf.Clear(Color.White)

        For hasher As Integer = 0 To 5
            CaptchaGraf.DrawString(CaptchaString.Substring(hasher, 1), DrawingFont, Brushes.Black, hasher * 20 + hasher + ProcessNumber \ 200, (hasher Mod 3) * (ProcessNumber \ 200))
        Next
        PictureBox1.Image = CaptchaImage
    End Sub

Event-event yang perlu dicegah adalah event untuk load form dan klik pada button2.

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        GenerateCaptcha()
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        If TextBox1.Text = "" Then Exit Sub
        If TextBox1.Text = CaptchaString Then
            MsgBox("The string is correct." + Chr(13) + "Try another captcha.", MsgBoxStyle.Information)
            TextBox1.Clear()
            GenerateCaptcha()
        Else
            MsgBox("The string is incorrect.", MsgBoxStyle.Exclamation)
            TextBox1.Clear()
            GenerateCaptcha()
        End If
    End Sub

    Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox1.KeyPress
        If e.KeyChar = Chr(13) Then Button2.PerformClick()
    End Sub

Tampilan yang didapatkan adalah sebagai berikut: