Minggu, 15 Januari 2012

Ekspresi Reguler untuk Konversi Format Tanggal dari MySQL Ke PHP

Selamat siang...
Teringat ucapan senior yang bernama alias Mas kuthux, "agar tidak lupa ketika belajar sesuatu tulis saja di blog" maka saya berniat post disini. Kali ini mengenai ekspresi reguler.

Waktu pertama kali belajar pemrograman dengan MySQl dan PHP, seringkali mendapat masalah sepele, yaitu ketika mempunyai data yang berype DATE atau DATETIME di MySQL yang biasanya memiliki format YYYY-MM-DD untuk DATE, dan YYYY-MM-DD HH:MM:SS untuk DATETIME, dan ketika dioutput pakai PHP kita harus ngutak-atik formatnya agar menjadi standar bahasa Indonesia, misal menjadi MM-DD-YYYY, Jam  HH:MM WIB.

Contoh tanggal 15-01-2012, Jam 12.50 biasanya disimpan di MySQL dalam Format DATETIME:

2012-01-15 12:50:00

Nah untuk menampilkan menjadi format misal:

15-01-2012, Jam 12:50 WIB


Dahulu saya menggunakan cara pemrograman klasik, dengan memotong substring menggunakan fungsi substr pada PHP:



Sehingga, kode PHP untuk mendapatkan menampilkan format tanggal yg diinginkan adalah:

<?php 
echo substr($date_sql,8,2)."-".substr($date_sql,5,2)."-".substr($date_sql,0,4).", Jam ".substr($date_sql,11,5)." WIB";
?>

Cara radikal, namun berhasil dan mudah dipahami ^^V


Sekarang untuk melakukan format tersebut, bisa menggunakan cara yang lebih modern yaitu pakai Ekspresi Reguler, mendengarnya saja sudah terlihat keren kan, hahaha. Paling tidak biar ilmu pemrograman kita sedikit lebih maju lah, daripada cara-cara lama.

Langsung saja untuk merubah menjadi menjadi format tadi bisa menggunakan ekspresi reguler berikut:

<?php 
$date_sql = "2012-01-15 12:50:00";
  
$pola   = "/^(\d+)-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/";
$pengganti  = "$3-$2-$1, Jam $4:$5 WIB";
 
echo preg_replace($pola,$pengganti,$date_sql);
?>


Disitu saya memakai fungsi preg_replace dari PHP, yang memiliki kegunaan untuk mendapatkan string dengan bagian yang kita ganti menggunakan ekspresi reguler. Pola (pattern) ekspresi reguler yang saya gunakan di atas adalah

/^(\d+)-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/

dimana itu adalah pattern format DATETIME dari MySQL.
Penjelasan simbol2 ekspresi reguler yang saya gunakan adalah sbb:

/^       : / menandakan awal atau akhir suatu pattern ekspresi reguler
           ^ menandakan pengecekan pola hanya pada awal string
(\d+)    : \d berarti karakter angka [0-9] dan + adalah jumlah karakter >1
           diapit ( ) untuk menandai sebuah group
           ini saya gunakan untuk pola tahun YYYY pada DATETIME karena tahun 
           hanya boleh angka dan biasanya dalam mysql ada 4 digit, 
           disini saya pakai >1 karena siapa tahu ada tahun 3 [satu digit tahun], 
           10000 [empat digit tahun], 222222 dst.
  -      : pemisah tahun dengan bulan pada format DATETIME mySQL
(\d+{2}) : pola bulan MM, karena bulan sudah pasti DUA DIGIT ANGKA 
           \d artinya karakter numerik dan {2} artinya dua digit --> ada 2 digit   
           karakter numerik pada MM

dan selanjutnya penjelasannya kurang lebih sama

$/       : $ menandakan akhir suatu string, jadi kalau diapit tanda /^ [pola] $/ 
           [pola] pengecekan diterapkan pada string penuh dari awal sampai akhir (bukan sebagian)

Kemudian untuk pengganti di situ saya gunakan

$3-$2-$1, Jam $4:$5 WIB

Pada pengganti, $1 $2 itu menandakan group string yang ada pada pola, group adalah sesuatu yang diapit ( ) pada pola, $1 dalam pola tadi adalah mengacu pada (\d+) yaitu tahun, $2 mengacu pada (\d{2}) yaitu tanggal, dst lihat gambar.



Untuk lebih singkat pola tadi dapat ditulis langsung dalam satu baris sebagai berikut:

<?php 
$date_sql = "2012-01-15 12:50:00";

echo preg_replace( "/^(\d+)-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/",
     "$3-$2-$1, Jam $4:$5 WIB",
     $date_sql
    );
?>


Selamat mencoba!!

Jumat, 06 Januari 2012

OpenGL di JAVA dengan Library LWJGL

Selamat pagi.. (*saya bikin ini pas pagi hari soalnya ^^)...

Akhirnya setelah sekian lama muncul post baru juga, ini mumpung lagi nganggur dan kecewa, jadi bisa posting lagi di sini. Langsung saja ke topik!! Kali ini kita akan belajar teknologi 3D di Java, di sini saya memakai Library LWJGL. LWJGL (Lightweight Java Game Library) adalah sebuah library untuk graphics 3D di atas plathform Java yang berdasarkan pada OpenGL. Walaupun berjalan di atas java, performa yang dihasilkan tidak lemot kok,, hampir sama dengan OpenGL dengan C++ atau lainnya..., ini saya kasih screen shoot contoh nya


Untuk mengembangkan aplikasi dengan library ini pertama harus install dan setting dulu library LWJG, tutorial lengkap buat setting nya ada di halaman installation di website LWJGL, tapi di sini saya jelaskan instalasi untuk memakai Netbeans IDE.

1. Download Dulu Library JWGL dari Alamat sourceforge ini (*lihat gambar di bawah) di situ ada 4 file, untuk tutorial ini silakan download 3 file yang paling atas.


3. Kalau sudah ter-download, buat folder LWJGL di drive C:/ ato mana saja yang penting mudah diingat, kemudian ekstrak file lwjgl-2.8.2.zip dan lwjgl-source-2.8.2.zip ke dalamnya., sehingga struktur foldernya menjadi seperti pada gambar:

4. Selanjutnya buka Netbeans IDE. dan setting Library lewat menu Tools --> Libraries


5. Pada jendela Libraries, buat Class Library baru, misal dengan nama LWJGL, 

6. Setelah library kosongan terbentuk, pada Tab Classpath, klik tombol Add Jar/Folder dan cari pada folder jar hasil ekstrak tadi misal C:/LWJGL/lwjgl-2.8.2/jar, tambahkan file jinput.jar, lwjgl.jar, dan lwjgl_util.jar (tekan Ctrl untuk memilih 3 file tersebut sekaligus)

7. Kemuadian pada Tab Sources, klik  Add Jar/Folder dan cari pada folder hasil ekstrak yang C:/LWJGL/ lwjgl-source-2.8.2/src/ tambahkan Folder generated dan java. 

8. Dan terakhir pada Tab Javadoc tambahkan file lwjgl-docs-2.8.2.zip cari pada folder C:/LWJGL/, jika semua sudah ditambahkan. Klik Ok untuk mulai membuat project baru dengan library LWJGL ini.


Setelah library LWJG di Netbeans sudah terbentuk, silakan membuat project baru (File --> New Project --> Java --> Java Application) beri nama misal BelajarLWJGL, (kosongkan centang Create Main Class)  --> Finish

Sebelum memulai coding, tambahkan dahulu Library pada project yang telah kita buat  (Klik Kanan [Nama Project] --> Properties --> Libraries), pada tab Compile, klik Add Library, cari library LWJGL yang sebelumnya telah kita buat.


Kemudian setting dulu path native library LWJGL pada Property project. (Klik Kanan [Nama Project] --> Properties --> Run) tambahkan parameter pada baris VM Options : 

-Djava.library.path="C:/LWJGL/lwjgl-2.8.2/lwjgl-2.8.2/native/windows"


Parameter tersebut untuk memberitahu Netbeans Letak Eksternal Native library yang dipakai oleh LWJGL, cek/eksplore pada folder tersebut untuk memastikan file dll ada. Untuk selain windows, folder native library yang dipakai menyesuaikan.


   
Project terbentuk dan buatlah class baru, misal dengan nama LWJGLMain (Klik Kanan [Nama Project] --> New --> Java Class). Untuk sekedar ngetes apakah library sudah bisa digunakan, bisa copas kode berikut, biar cepet:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 *
 * @author ffred
 */

import static org.lwjgl.opengl.GL11.*;
import static org.lwjgl.util.glu.GLU.*;
 
import org.lwjgl.LWJGLException;
import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
 
public class LWJGLMain {
    public static final int DISPLAY_HEIGHT = 480;
    public static final int DISPLAY_WIDTH = 640;
    
    private float rtri;
    
    private long lastTime;
    private int fps;
        
    public static void main(String[] args) {
        LWJGLMain main = null;
        try {
            main = new LWJGLMain();
            main.create();
            main.run();
        }catch(Exception e){}
        
        if(main != null) {
            main.destroy();
        }
    }
    
    public LWJGLMain() {
        //tambahkan inisiasi sesukanya
    }
    
    public void create() throws LWJGLException {
        Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH, DISPLAY_HEIGHT));
        Display.setTitle("Belajar LWJGL");
        Display.setFullscreen(false);
        Display.create();
        
        initGL();
        resizeGL();
    }
    
    public void destroy() {
        Display.destroy();
    }
    
    public void initGL() {
        glShadeModel(GL_SMOOTH);                // Enables Smooth Shading
 glClearColor(0.0f, 0.0f, 0.0f, 0.0f);   // Black Background
        glClearDepth(1.0f);                     // Depth Buffer Setup 
        glEnable(GL_DEPTH_TEST);                // Enables Depth Testing 
        glDepthFunc(GL_LEQUAL);                 // The Type Of Depth Test To Do
        
        glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);          // Really Nice Perspective Calculations
        
        lastTime = Sys.getTime();
    }
    
    public void resizeGL() {
        glViewport(0,0,DISPLAY_WIDTH,DISPLAY_HEIGHT);
        
        glMatrixMode(GL_PROJECTION);    // Select The Projection Matrix 
        glLoadIdentity();               // Reset The Projection Matrix 

        // Calculate The Aspect Ratio Of The Window 
        gluPerspective(45.0f,(float)DISPLAY_WIDTH/(float)DISPLAY_HEIGHT,0.1f,100.0f); 

        glMatrixMode(GL_MODELVIEW);     // Select The Modelview Matrix 
        glLoadIdentity();               // Reset The Modelview Matrix
    }
 
    public void render() {
        glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
        glLoadIdentity();
        
        glTranslated(0.0f,0.0f,-5.0f);      // Translasi piramid ke belakang
        glRotatef(rtri,0.0f,1.0f,0.0f);     // Rotate The Pyramid On It's Y Axis
        
        glBegin(GL_TRIANGLES);              // Start Drawing The Pyramid
        glColor3f(1.0f,0.0f,0.0f);          // Red
        glVertex3f( 0.0f, 1.0f, 0.0f);      // Top Of Triangle (Front)
        glColor3f(0.0f,1.0f,0.0f);          // Green
        glVertex3f(-1.0f,-1.0f, 1.0f);      // Left Of Triangle (Front)
        glColor3f(0.0f,0.0f,1.0f);          // Blue
        glVertex3f( 1.0f,-1.0f, 1.0f);      // Right Of Triangle (Front)
        
        glColor3f(1.0f,0.0f,0.0f);          // Red
        glVertex3f( 0.0f, 1.0f, 0.0f);      // Top Of Triangle (Right)
        glColor3f(0.0f,0.0f,1.0f);          // Blue
        glVertex3f( 1.0f,-1.0f, 1.0f);      // Left Of Triangle (Right)
        glColor3f(0.0f,1.0f,0.0f);          // Green
        glVertex3f( 1.0f,-1.0f, -1.0f);     // Right Of Triangle (Right)
        
        glColor3f(1.0f,0.0f,0.0f);          // Red
        glVertex3f( 0.0f, 1.0f, 0.0f);      // Top Of Triangle (Back)
        glColor3f(0.0f,1.0f,0.0f);          // Green
        glVertex3f( 1.0f,-1.0f, -1.0f);     // Left Of Triangle (Back)
        glColor3f(0.0f,0.0f,1.0f);          // Blue
        glVertex3f(-1.0f,-1.0f, -1.0f);     // Right Of Triangle (Back)

        glColor3f(1.0f,0.0f,0.0f);          // Red
        glVertex3f( 0.0f, 1.0f, 0.0f);      // Top Of Triangle (Left)
        glColor3f(0.0f,0.0f,1.0f);          // Blue
        glVertex3f(-1.0f,-1.0f,-1.0f);      // Left Of Triangle (Left)
        glColor3f(0.0f,1.0f,0.0f);          // Green
        glVertex3f(-1.0f,-1.0f, 1.0f);      // Right Of Triangle (Left)
        glEnd();                            // Done Drawing The Pyramid
        
        rtri+=0.2f;
    }
 
  public void run() {
        while(!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) {
            if(Display.isVisible()) {
                update();
                render();
            }
            else {
                if(Display.isDirty()) {
                    render();
                }
                try {
                    Thread.sleep(100);
                }
                catch(InterruptedException ex) {
                }
            }
            Display.update();
            Display.sync(60); //fps --> 60
        }
    }
    
    public void update() {
        updateFPS();
    }
    
    public void updateFPS(){
        if(Sys.getTime()-lastTime>1000){
            Display.setTitle("Belajar LWJGL fps: "+fps);
            fps = 0;
            lastTime = Sys.getTime();
        }
        fps++;
    }
}


Silakan klik Run (Tekan F6). dan jika berhasil maka akan muncul!

Senin, 22 Agustus 2011

Membuat CSS Komik Chat Box tanpa Image


Haloo.. apa kabar? sudah lama saya tidak ngeblog dan baru bisa posting lagi sekarang, itupun karena kehilangan mood buat nyekripsi :p. Langsung saja kali ini saya coba posting tentang web desain dan CSS yaitu membuat komik chat box seperti di atas tanpa menggunakan gambar (image). Box seperti itu sering digunakan web-web modern seperti facebook, twitter, google, yahoo dll untuk chatting, tool tip dll juga.

Langkah pertama untuk membuatnya adalah dengan membuat elemen div sebanyak 4 buat dengan susunan sebagai berikut, dan beri nama atribut class disesuaikan pada contoh.

<div class="chat-body">	<!-- Kerangka utama -->
<div class="chat-text">	<!-- Tempat teks -->
Ini adalah teks chat 
</div>
<div class="arrow-border"></div> <!-- untuk border panah -->
<div class="arrow-background"></div> <!-- body panah -->
</div>

Kemudian beri CSS sebagai berikut, yang pertama untuk CSS kerangka chat-body, di sini bisa setting lebar dari komik chat box yang diinginkan, untuk tingginya bisa dikosongkan agar bisa otomatis memanjang ke bawah

.chat-body{
width:200px;
position:relative;
}
Kemudian beri CSS untuk div chat-text, setting border, warna background atau warna font dll kalau mau.

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;
}


Lanjut, kita buat segitiga panah bawahnya, ini trik rahasia buat segitiga dengan CSS tanpa Image. Rahasianya adalah memakai border pada div yang diset luasnya 0 dengan kelebaran yang berbeda-beda, kemudian beri warna berbeda-beda pula, warna sampingan bisanya diset transparant, untuk menghasilkan efek segitiga, untuk lebih jelasnya baca dari sumbernya langsung di sini.

Trik segitiga diterapkan pada div dengan class arrow-border yang digunakan sebagai segitiga border (yg digunakan sebagai border)


.arrow-border{	
position:absolute;
width:0px;
border-style:solid;

/* warna border dg urutan:  atas kanan bawah kiri */
/* warna atas sesuaikan dg warna border chat-text, disini pakai #aaa */
border-color:#aaa transparent transparent transparent;

/* tebal border dg urutan: atas kanan bawah kiri*/
border-width:10px 10px 0px 10px;	

margin-left:10px; /* posisi segitiga agar sedikit ke tengah */
}

Kemudian div satunya dgn class arrow-background digunakan untuk menimpa segitiga border (setting margin dengan nilai negatif) sehingga dua segitiga dengan warna yang berbeda tampak seperti segitiga ber-border.


CSSnya:

.arrow-background{
position:absolute;
width:0px;
border-style:solid;
/* warna atas sesuaikan dengan warna background chat box disini digunakan white */
border-color:white transparent transparent transparent;
/* ketebalan border sesuaikan dgn arrow-border */
border-width:10px 10px 0px 10px;
margin-left:10px;

/* sesuai ketebalan border */
margin-top:-1px; 
}

Sudah bisa terlihat hasilnya, namun untuk mempercantik bisa menambahkan round corner dan shadow, dengan menambah css pada chat-text menjadi:

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;

-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
-khtml-border-radius: 5px; /* Linux browsers */
border-radius: 5px; /* Opera 10.50, IE and CSS3 */

box-shadow:0px 0px 5px #aaa;
-moz-box-shadow:0px 0px 5px #aaa;
-webkit-box-shadow:0px 0px 5px #aaa;
}


IE6 tidak support warna transparant, sehingga panah akan terlihat jelek pada IE.


untuk mengatasinya ganti warna transparant dengan pink dan set chroma dengan menambah CSS pada arrow-border dan arrow-background sebagai berikut:

.arrow-border{
position:absolute;
width:0px;
border-style:solid;
border-color:#aaa transparent transparent transparent;
border-width:10px 10px 0px 10px;
margin-left:10px;

/* khusus IE IE */
_border-right-color:pink;
_border-left-color:pink;
_filter:chroma(color=pink);
}

Tambahkan sendiri CSSnya juga pada arrow-background.


Sayangnya IE tidak support round corner dan shadow box, jadi terlihat kurang cantik di IE, tapi apa boleh buat ;}