Refrensi Warna untuk HTML maupun CSS

Banyak tersedia warna yang bisa kita gunakan agar web/blog kita lebih menarik. Umumnya yang paling gampang diingat yaitu warna dasar seperti merah, hijau, biru dll yang ditulis dalam bahasa inggris. Selain itu masih banyak warna-warna yang bisa kita gunakan dengan menuliskan kode warnanya contoh warna merah dituliskan dengan kode #FF0000. Contoh mengubah format H1 menjadi berwarna merah muda, penggunaanya bisa dilihat di kode berikut :

h1 { color : #F75D59; }

atau

TULISAN

TABEL KODE WARNA UNTUK HTML ATAU CSS

#EEEEEE		#DDDDDD		#CCCCCC		#BBBBBB		#AAAAAA		#999999
#888888		#777777		#666666		#555555		#444444		#333333
#000000		#000033		#000066		#000099		#0000CC		#0000FF
#330000		#330033		#330066		#330099		#3300CC		#3300FF
#660000		#660033		#660066		#660099		#6600CC		#6600FF
#990000		#990033		#990066		#990099		#9900CC		#9900FF
#CC0000		#CC0033		#CC0066		#CC0099		#CC00CC		#CC00FF
#FF0000		#FF0033		#FF0066		#FF0099		#FF00CC		#FF00FF
#003300		#003333		#003366		#003399		#0033CC		#0033FF
#333300		#333333		#333366		#333399		#3333CC		#3333FF
#663300		#663333		#663366		#663399		#6633CC		#6633FF
#993300		#993333		#993366		#993399		#9933CC		#9933FF
#CC3300		#CC3333		#CC3366		#CC3399		#CC33CC		#CC33FF
#FF3300		#FF3333		#FF3366		#FF3399		#FF33CC		#FF33FF
#006600		#006633		#006666		#006699		#0066CC		#0066FF
#336600		#336633		#336666		#336699		#3366CC		#3366FF
#666600		#666633		#666666		#666699		#6666CC		#6666FF
#996600		#996633		#996666		#996699		#9966CC		#9966FF
#CC6600		#CC6633		#CC6666		#CC3399		#CC66CC		#CC66FF
#FF6600		#FF6633		#FF6666		#FF6699		#FF66CC		#FF66FF
#009900		#009933		#009966		#009999		#0099CC		#0099FF
#339900		#339933		#339966		#339999		#3399CC		#3399FF
#669900		#669933		#669966		#669999		#6699CC		#6699FF
#999900		#999933		#999966		#999999		#9999CC		#9999FF
#CC9900		#CC9933		#CC9966		#CC9999		#CC99CC		#CC99FF
#FF9900		#FF9933		#FF9966		#FF9999		#FF99CC		#FF99FF
#00CC00		#00CC33		#00CC66		#00CC99		#00CCCC		#00CCFF
#33CC00		#33CC33		#33CC66		#33CC99		#33CCCC		#33CCFF
#66CC00		#66CC33		#66CC66		#66CC99		#66CCCC		#66CCFF
#99CC00		#99CC33		#99CC66		#99CC99		#99CCCC		#99CCFF
#CCCC00		#CCCC33		#CCCC66		#CCCC99		#CCCCCC		#CCCCFF
#FFCC00		#FFCC33		#FFCC66		#FFCC99		#FFCCCC		#FFCCFF
#00FF00		#00FF33		#00FF66		#00FF99		#00FFCC		#00FFFF
#33FF00		#33FF33		#33FF66		#33FF99		#33FFCC		#33FFFF
#66FF00		#66FF33		#66FF66		#66FF99		#66FFCC		#66FFFF
#99FF00		#99FF33		#99FF66		#99FF99		#99FFCC		#99FFFF
#CCFF00		#CCFF33		#CCFF66		#CCFF99		#CCFFCC		#CCFFFF
#FFFF00		#FFFF33		#FFFF66		#FFFF99		#FFFFCC		#FFFFFF

TABEL NAMA WARNA UNTUK HTML / CSS

Aliceblue #F0F8FF		Antiquewhite #FAEBD7		Aqua #00FFFF
Aquamarine #7FFFD4		Azure #F0FFFF		Beige #F5F5DC
Bisque #FFE4C4		Black #000000		Blanchedalmond #FFEBCD
Blue #0000FF		Blueviolet #8A2BE2		Brown #A52A2A
Burlywood #DEB887		Cadetblue #5F9EA0		Chartreuse #7FFF00
Chocolate #D2691E		Coral #FF7F50		Cornflowerblue #6495ED
Cornsilk #FFF8DC		Crimson #DC143C		Cyan #00FFFF
Darkblue #00008B		Darkcyan #008B8B		Darkgoldenrod #B8860B
Darkgray #A9A9A9		Darkgreen #006400		Darkkhaki #BDB76B
Darkmagenta #8B008B		Darkolivegreen #556B2F		Darkorange #FF8C00
Darkorchid #9932CC		Darkred #8B0000		Darksalmon #E9967A
Darkseagreen #8FBC8F		Darkslateblue #483D8B		Darkslategray #2F4F4F
Darkturquoise #00CED1		Darkviolet #9400D3		Deeppink #FF1493
Deepskyblue #00BFFF		Dimgray #696969		Dodgerblue #1E90FF
Firebrick #B22222		Floralwhite #FFFAF0		Forestgreen #228B22
Fuchsia #FF00FF		Gainsboro #DCDCDC		Ghostwhite #F8F8FF
Gold #FFD700		Goldenrod #DAA520		Gray #808080
Green #008000		Greenyellow #ADFF2F		Honeydew #F0FFF0
Hotpink #FF69B4		Indianred #CD5C5C		Indigo #4B0082
Ivory #FFFFF0		Khaki #F0E68C		Lavender #E6E6FA
Lavenderblush #FFF0F5		Lawngreen #7CFC00		Lemonchiffon #FFFACD
Lightblue #ADD8E6		Lightcoral #F08080		Lightcyan #E0FFFF
Lightgoldenrodyellow #FAFAD2		Lightgreen #90EE90		Lightgrey #D3D3D3
Lightpink #FFB6C1		Lightsalmon #FFA07A		Lightseagreen #20B2AA
Lightskyblue #87CEFA		Lightslategray #778899		Lightsteelblue #B0C4DE
Lightyellow #FFFFE0		Lime #00FF00		Limegreen #32CD32
Linen #FAF0E6		Magenta #FF00FF		Maroon #800000
Mediumaquamarine #66CDAA		Mediumblue #0000CD		Mediumorchid #BA55D3
Mediumpurple #9370D8		Mediumseagreen #3CB371		Mediumslateblue #7B68EE
Mediumspringgreen #00FA9A		Mediumturquoise #48D1CC		Mediumvioletred #C71585
Midnightblue #191970		Mintcream #F5FFFA		Mistyrose #FFE4E1
Moccasin #FFE4B5		Navajowhite #FFDEAD		Navy #000080
Oldlace #FDF5E6		Olive #808000		Olivedrab #688E23
Orange #FFA500		Orangered #FF4500		Orchid #DA70D6
Palegoldenrod #EEE8AA		Palegreen #98FB98		Paleturquoise #AFEEEE
Palevioletred #D87093		Papayawhip #FFEFD5		Peachpuff #FFDAB9
Peru #CD853F		Pink #FFC0CB		Plum #DDA0DD
Powderblue #B0E0E6		Purple #800080		Red #FF0000
Rosybrown #BC8F8F		Royalblue #4169E1		Saddlebrown #8B4513
Salmon #FA8072		Sandybrown #F4A460		Seagreen #2E8B57
Seashell #FFF5EE		Sienna #A0522D		Silver #C0C0C0
Skyblue #87CEEB		Slateblue #6A5ACD		Slategray #708090
Snow #FFFAFA		Springgreen #00FF7F		Steelblue #4682B4
Tan #D2B48C		Teal #008080		Thistle #D8BFD8
Tomato #FF6347		Turquoise #40E0D0		Violet #EE82EE
Wheat #F5DEB3		White #FFFFFF		Whitesmoke #F5F5F5
Yellow #FFFF00		YellowGreen #9ACD32

Warna-warna web diatas dapat digunakan untuk banyak keperluan seperti warna tulisan, warna garis, warna background/latar
Semoga bermanfaat

Share:

Read More

Kenapa menggunakan CSS

CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.

Alasan menggunakan CSS

1. CSS sangat mudah digunakan
   Hal ini tidak bisa dipungkiri bahwa untuk menggunakan css kita tidak memerlukan waktu yang lama dan tidak harus menuliskan baris perintah yang banyak untuk menerapkan teknologi css dalam blog atau web kita
2. CSS didukung oleh hampir semua jenis browser
   CSS tidak hanya bisa ditampilkan pada jenis browser-browser ternama saja, tapi juga bisa ditampilkan dengan aplikasi-aplikasi sejenis walaupun pada media yang sangat minimal seperti ponsel atau perangat gadget lainnya
3. CSS dapat diterapkan dengan banyak cara
   Untuk menggunakan css kita bisa gunakan beberapa cara seperti mendeklarasikan pada bagian head, membuat file css secara terpisah, mendeklarasikan pada saat diperlukan dan menempelkan pada TAG html
4. CSS membuat kontrol terpusat sehingga tidak perlu merubah  semua halaman
5. CSS mempercepat tampilnya sebuah halaman
6. CSS meminimalkan penggunaan bandwidh
7. Penulisan kode HTML menjadi lebih sederhana sehingga lebih disukai mesin pencari
8. CSS dapat melakukan apa yang tidak bisa dilakukan oleh HTML
   Dengan css kita bisa menempatkan sebuah objek pada lokasi yang bebas dalam posisi layar
9. CSS menghasilkan tampilan yang lebih baik
10. CSS dapat menggantikan beberapa fungsi gambar
11. CSS dapat menambahkan efek pada objek-objek yang ada dalam halaman web

Dari 11 point alasan diatas, pasti tiap orang punya pendapat berbeda, yang jelas css memberikan nilai tambah yang perlu anda pertimbangkan dalam membuat susunan layout halaman web atau blog anda.
Semoga bermanfaat

Share:

Read More

Kode Warna HTML

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

Share:

Read More

Menampilkan data dari database ke Combo Box (PHP)

Combo Box, sekilas pernah mendengar istilah tersebut atau mungkin pernah menemui dan bahkan menggunakannya seperti pada form-form pendaftaran di web (Contoh Gambar 1 – sign up form pada halaman facebook), tapi apa sih sebenarnya combo box itu ?? berikut adalah pengertian dari istilah combo box (di kutip dari wikipedia) “A combo box is a commonly used graphical user interface widget (or control). It is a combination of a drop-down list or list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from the list of existing options.“

Gambar 1. Contoh combo box pada form pendaftaran facebook

Selain pada aplikasi berbasis web (web based application), combo box juga dapat kita temui pada aplikasi yang dibangun dengan menggunakan bahasa program lainnya terutama pada aplikasi visual, sebut saja delphi (nama sebenarnya) atau visual basic. Pada aplikasi tersebut juga terdapat komponen combo box yang fungsi nya kurang lebih sama dengan combo box yang kita temui pada aplikasi berbasis website. Gambar 2 menunjukkan contoh komponen combo box pada program delphi.

 Gambar 2. Contoh komponen combo box pada Borland Delphi.

 

Selanjutnya kita akan membuat sebuah antar muka aplikasi berbasis web, dengan sebuah combo box yang akan menampilkan list data dari database. 

Studi Kasus :

Sebelum menginjak ke studi kasus menggunakan database, terlebih dahulu kita bahas sejenak proses pembuatan combo box dengan php, dengan list / option yang sudah kita tentukan sendiri (Tidak berasal dari database).

CODE :

<select name="pilihan">
<option value="belum milih" selected>-Silahkan Pilih makanan Kesukaan Anda-</option>
<option value="sate">Sate</option>
<option value="soto">Soto</option>
<option value="nasi goreng">Nasi Goreng</option>
<option value="nasi pecel">Nasi Pecel</option>
</select>

RESULT :

Selanjutnya kita buat combo box dengan pilihan list / option yang berasal dari database. Studi kasus : Disini saya memiliki database atau basis data anggota ludruk, kemudian kita tampilkan data anggota ludruk tersebut ke combo box pada halaman website yang akan kita buat.

Sederhana saja sih studi kasus nya, namanya juga contoh

Database Structure :

Sebagai contoh, isikan beberapa nama pada tabel anggota_ludruk, pada kolom nama

Code :

Buat koneksi ke database :

<?php
$host = "localhost"; // db host
$username = "root";  // db username
$password = "123456"; // db password
$db = "combo";  // db name

// Melakukan koneksi ke database
mysql_connect($host,$username,$password) or die("Koneksi gagal");
mysql_select_db($db) or die("Database tidak bisa dibuka");
?>

Tampil anggota ke combo :

<?php
include"koneksi.php";

echo "<select name='anggota'>";
$tampil=mysql_query("SELECT * FROM anggota_ludruk ORDER BY id");
echo "<option value='belum milih' selected>- Pilih Anggota Ludruk -</option>";

while($w=mysql_fetch_array($tampil))
{
    echo "<option value=$w[nama] selected>$w[nama]</option>";        
}
 echo "</select>";
?>

Result :

Share:

Read More

Membuat User Online Sederhana Pada Halaman Website (PHP)

Seringkali  kita menjumpai sebuah aplikasi (khususnya aplikasi web) seperti facebook, yahoo, gmail, dlsb. Dimana terdapat list atau daftar pengguna / user yang sedang online saat sesi berlangsung. Pada artikel ini, akan diulas sedikit tentang cara pembuatan aplikasi tersebut secara sederhana. Sebenarnya ada beberapa cara untuk menampilkan data user yang sedang online saat sesi sedang berlangsung, salah satunya dapat menggunakan session atau dapat juga menggunakan parameter baru (istilah saya sendiri lho). Parameter baru yang seperti apa sih ? kok seumur-umur di dunia perwebsite’an baru dengar kali ini. Yah, mungkin itu hanya sekedar istilah saja, maklum penulis mempelajari ini semua dengan cara otodidak dengan bantuan internet. Ok, Let’s start…..

Untuk memudahkan, akan saya bagi menjadi 3 bagian utama :

1. Bagian Login, yang berfungsi untuk mengetahui siapa yang boleh mengakses aplikasi tsb, apakah user atau bukan. Disini juga akan dilakukan pencocokan user-id dan password user.
2. Bagian User Log, Apabila berhasil melewati bagian pertama, data user akan di simpan ke dalam basis data (data yang di simpan meliputi : jam login, hari atau tanggal login, nama user, dan status login). Status login inilah yang saya istilahkan parameter baru.
3. Bagian Penampil, Berfungsi untuk menampilkan siapa saja user yang sedang mengakses sistem (user online) mengacu pada status user.

Ok dehh, selanjutnya langsung ke proses pembuatannya :

Step 1
Buat Database dan Tabel-nya, seperti gambar berikut (hanya contoh) :
Database Name : user_online ; Tabel Name : user & log

Gambar 1. Struktur Tabel user

Gambar 2. Struktur Tabel log

Step 2

Proses pembuatan Halaman Login / Login Page (index.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript">
function validasi(form){
if (form.username.value == ""){
alert("Anda belum mengisikan Username.");
form.username.focus();
return (false);
}

if (form.password.value == ""){
alert("Anda belum mengisikan Password.");
form.password.focus();
return (false);
}
return (true);
}
</script>

<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<head>
<title>LOGIN</title>
</head>
<body>
<form name="login" action="cek_login.php" method="POST" onSubmit="return validasi(this)">

<br /><br /><br /><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td height="25">Username :</td>
<td> &nbsp;&nbsp;
<input type="text" name="username"  /></td></tr>
<tr><td height="30">Password :</td>
<td> &nbsp;&nbsp;
<input type="password" name="password" /></td></tr>

<tr><td colspan="2"><div align="right">
<input name="submit"  type="submit" value="LOGIN" /></div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>

</body>
</html>

Step 3
Membuat koneksi ke database (koneksi.php)
Source Code :

<?php
// -- Host, Username dan Password Database
$host = "localhost";//db-host
$username = "root";//db-user
$password = "123456";//db-password
$db = "user_online";//db-name

// Melakukan koneksi ke database
mysql_connect($host,$username,$password) or die("Koneksi gagal");
mysql_select_db($db) or die("Database tidak bisa dibuka");
?>

Step 4

Proses Validasi / Pencocokan data user & password ke Database (cek_login.php)

Source Code :

<?php
include "koneksi.php";
function antiinjection($data){
$filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
return $filter_sql;
}

$username = antiinjection($_POST[username]);
$pass     = antiinjection($_POST[password]);

$login=mysql_query("SELECT * FROM user WHERE username='$username' AND password='$pass'");
$ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);

// Apabila username dan password ditemukan
if ($ketemu > 0)
{
session_start();
session_register("username");
session_register("password");

$_SESSION[username]     = $r[username];
$_SESSION[password]     = $r[password];

$jam = date("H:i:s");
$tgl = date("Y-m-d");

mysql_query("INSERT INTO log(username,
tanggal,
jamin,
jamout,
status)
VALUES('$_SESSION[username]',
'$tgl',
'$jam',
'logged',
'online')");

header('location:home.php');
}
else
{
echo "<center><br><br><br><br><br><br><b>LOGIN GAGAL! </b><br>
Username atau Password Anda tidak benar.<br>";
echo "<br>";
echo "<input type=button value='ULANGI LAGI' onclick=location.href='index.php'></a></center>";

}
?>

Step 5

Proses selanjutnya bila login berhasil (home.php)

Source Code :

<?php
include "koneksi.php";
session_start();
if (empty($_SESSION[username]) AND empty($_SESSION[password]))
{
header('location:index.php');
}
else
{
?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>HOME</title>
<style>
th{
color: #FFFFFF;
font-size: 8pt;
text-transform: uppercase;
text-align: center;
padding: 0.1em;
border-width: 1px;
border-style: solid;
border-color: #969BA5;
border-collapse: collapse;
background-color: #265180;
}
</style>
</head>
<body>                  
<?php                 
echo"
<center>USER ONLINE
<table border=1 width='650' align=center>
<tr><th>No</th><th>Username</th><th>Tanggal Login</th><th>Jam Login</th><th>Jam Logout</th><th>Status</th></tr>";
$sql = mysql_query("SELECT * FROM log ORDER BY no DESC");    
$no=1;
while($d=mysql_fetch_array($sql))
{
echo "<tr><td align=center>$no</td>
<td align=center>$d[username]</td>
<td align=center>$d[tanggal]</td>
<td align=center>$d[jamin]</td>
<td align=center>$d[jamout]</td>";
if($d[status]=='offline')
{
echo"<td style='background-color:red' align=center>OFFLINE</td>";
}      
else
{
echo"<td style='background-color:00ff00' align=center>ONLINE</td>";
}                            
echo"</tr>";
$no++;      
}
echo "</table>";    
echo "<br /><br /><input type=button value='LOGOUT' onclick=location.href='logout.php'></a></center>";    
?>             
</body>
</html>
<?php
}
?>

Step 6

Proses keluar / Logout (logout.php)

Source Code :

<?php
include "koneksi.php";
$jam = date("H:i:s");
session_start();                        
mysql_query("UPDATE log SET jamout='$jam',
status='offline'
WHERE username = '$_SESSION[username]' AND jamout='logged' AND status='online'");
session_destroy();
header('location:index.php');
?>

Tamat ¦..

Pada aplikasi diatas masih memiliki beberapa kekurangan, mohon koreksi dari kawan-kawan dan para pembaca yang budiman. Saran kedepannya untuk user online ini akan lebih baik lagi apabila dipadukan dengan AJAX, sehingga user yang baru melakukan proses login dapat diketahui langsung tanpa me-reload atau me-refresh halaman website tersebut.

Share:

Read More

Bilingual Website (PHP & MySQL)

Pernahkah teman-teman memanfaatkan fasilitas / tools google translate ? Pasti rata-rata menjawab “Pernah”. Tetapi yang saya maksud disini adalah tools google yang berfungsi untuk menterjemahkan halaman web yang banyak kita temui pada website atau blog pada umumnya, yang menyediakan banyak pilihan bahasa (Multi Language) pada website tersebut. Umumnya berupa widget yang disediakan oleh mbah google untuk selanjutnya dipasang pada halaman webiste atau blog kita (lihat gambar 1). Nah, udah tau kan sekarang ? trus apa hubungannya sama judul artikel diatas ? kan judulnya cuma bilingual alias 2 bahasa, kalau pakai widget google translate kan bisa bermacam-macam bahasa. Kalau sudah begitu ya kembali ke kebutuhan saja, tergantung keinginan si pemilik web tersebut. Tetapi terkadang dengan pemanfaatan widget multi bahasa tersebut memiliki kekurangan, salah satunya adalah beberapa hasil translation yang kurang sesuai sehingga informasi yang akan ditampilkan menjadi kurang relevan. Pada web-web papan atas yang dibangun secara profesional, ternyata jarang kita temui widget multi bahasa tersebut. Mereka lebih cenderung menggunakan translation atau terjemahan yang berasal dari basis data (database) mereka sendiri.

Gambar 1. Widget Google Translate

Diartikel edisi ini saya hanya ingin sekedar share tentang pembuatan website dwi bahasa tersebut. Sebenarnya tidak harus dwi bahasa sih, cm sebagai contoh aja biar ga banyak-banyak bikinnya. Mau pake multi bahasa juga gpp, sama aja prosesnya. Tetapi disini saya memberi contoh yang sangat sederhana sekali lho, mungkin kalau kita terapkan pada website yang komplek tentu kurang effisien. Yaaaah, namanya mencoba kan ga ada salahnya daripada tidak sama sekali.

Ok, kita mulai saja daripada banyak bicara kayak koruptor….hehehe..

Biar beda ama bahasa-bahasa yang tersedia di widget nya si-mbah google, kali ini kita akan membuat sebuah halaman website sederhana dimana terdapat 2 pilihan bahasa yang tersedia, yaitu : Bahasa Indonesia dan Bahasa Jawa. Demonya bisa kawan lihat pada tautan berikut :

Source Code :

<?php
  session_register('bahasa');
  include "koneksi.php";  

  if($_GET['lang'])
  {
    $_SESSION['bahasa']=$_GET['lang'];
    header('location:index.php');
  }
  else
  {
     if(!$_SESSION['bahasa'])
     {
     $_SESSION['bahasa']='indonesia';
     header('location:index.php');
     }
   }

include "".$_SESSION['bahasa'].".php";
?>

Source code diatas merupakan bagian inti yang berfungsi untuk SWITCHING. Hah?? istilah apa lagi tuh ??? itu istilah saya sendiri alias ngawur.com. hahahaha…. Tetapi pada intinya code diatas berfungsi untuk proses peralihan dari bahasa satu ke bahasa lainnya dengan memanfaatkan session.

Ok, dech ga perlu panjang lebar langsung aja download Full Source Code nya Di SINI

Soalnya kalo Sorce nya di tulis semua disini jadi panjang dehhh artikel nya….hahahaha

-Selesai-

Share:

Read More