About my Blog

Share Information; Blogs, Travel, Technology, Tutorial, Business, College and etc.

Senin, 12 April 2010

ID VS CLASS

Terdapat dua buah selector yang terkenal dalam CSS yaitu ID dan Class. Penulis pernah bingung membedakan keduanya dan akankah menggunakan selector ID ataukah menggunakan selector Class untuk sebuah tag HTML. Untuk itu saya ingin sedikit berbagi mengenai perbedaan keduanya dan pengaplikasiannya pada kode HTML dan CSS.

ID
ID sepantasnya digunakan hanya sekali pada setiap elemen halaman web. Yang dimaksud dengan elemen yaitu header, main navigation, left side, footer, dll. Jadi, ID digunakan untuk memberi nama untuk sebuah elemen atau bagian sebuah halaman web yang bersifat unik. Mengapa dikatakan unik, karena dalam setiap document CSS hanya boleh ada satu nama elemen. Pada document CSS harus diawali karakter “#”. Berikut ini contoh selector ID.

<div id="footer">
<p>Copyright &copy; 2010 Denis Haryanto.</p>
</div>

Contoh pada document CSS-nya :

#footer {
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}

CLASS
Sedangkan Class dapat digunakan pada tag HTML yang tak terbatas penggunaanya. Class lebih fleksibel untuk diaplikasikan dibanding ID. Class biasanya berada diantara tag ID. Pada document CSS harus diawali karakter “.”. Untuk lebih jelasnya berikut ini contoh class.

<div id = âminumanâ>
<div class = "soda">coca cola</div>
<div class = "soda">sprite</div>
<div class = "hot">teh</div>
<div class = "hot">kopi</div>
</div>

Contoh pada document CSS-nya :

.minuman{
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}

Untuk penggunaan selector Class maupun ID tidak terbatas hanya tag div saja, namun juga bisa diaplikasikan dengan tag-tag HTML lainnya seperti <table>, <ul>, <body>, <h1>, dll.

Selamat belajar...

METODE ENKRIPSI MD5

Sistem keamanan dalam sebuah aplikasi komputer berbasis web salah satu yang dipakai adalah metode hashing MD5. MD5 merupakan metode one way yang merubah suatu plain text berubah menjadi bentuk enkripsi atau yang disebut dengan chypertext. Penggunaannya seringkali untuk merahasiakan password user maupun admin, nomor PIN, dan lainnya yang berhubungan dengan akun seseorang. Dalam contoh pemakaian metode MD5 ini dibuat 2 file :
1. login.Html
2. checklogin.php
Dibawah ini merupakan tampilan hasil eksekusi file login.Html :



Berikut ini source file login.html yang dipakai :



Supaya lebih jelas silakan diklik gambarnya.

Source code diatas merupakan kode html untuk membentuk halaman login. Apabila username dan password telah terisi maka browser akan diarahkan ke halaman file checklogin.php.
Masukkan username dan password. Untuk keamanan, input pada password diberi type password agar tidak dapat dibaca atau dilihat pihak yang tidak berwenang. erikut ini tampilan hasil eksekusi file checklogin.php :



Dan berikut ini Source code file checklogin.php



Dapat kita lihat pada gambar diatas hasil input password dijadikan variable $mypassword. Kemudian variable tersebut di enkripsi dengan metode hashing MD5 dengan mengubahnya menjadi variable $mypasswordmd5. Sampai situ password sudah berubah menjadi algoritma.
Apabila kita cetak (echo) passwordnya akan berubah menjadi tampilan algoritma seperti ditunjukkan pada gambar berikut :



Semoga bermanfaat...

TOMBOL NAVIGASI CANTIK DENGAN CSS

Ketika kita sedang browsing di sebuah halaman website, kadang kita menemukan tombol anvigasi yang kelap-kelip atau berubah warna ketika kita arahkan kursor ke tombol tersebut. Oleh karena itu penulis penasaran bagaimana bisa membuat tombol unik seperti itu. Ternyata untuk membuatnya dapat digunakan beberapa cara seperti menggunakan macromedia flash atau yang disebut dengan flash button dan ada juga yang hanya menggunakan elemen-elemen yang ada di CSS. Saya akan mencoba membahas yang menggunakan elemen-elemen CSS tersebut. Untuk lebih jelasnya berikut ini contoh tampilan tombol unik tersebut.



Berikut ini kode CSS yang digunakan untuk membentuk tampilan button seperti gambar diatas.



Kode yang membuat tombol tersebut berubah warna ketika kursor diarahkan tepat pada tombol tersebut adalah pada elemen “tag #menu a:hover”. Jadi, ketika kursor diarahkan pada tombol maka tombol tersebut akan berubah warna menjadi kuning (#fffcd04).
Sedangkan bagaimana tombol berubaha warna menjadi kuning setelah tombol ditekan dan halaman yang dituju aktif. Misalkan halaman yang dituju adalah halaman Home atau document index.html. Hal pertama yang kita fokuskan adalah pada document HTML-nya. Kalau kita perhatikan pada gambar dibawah kode tombol “Home ” memiliki nama tag class “active”. Tag “active” tersebut berguna untuk kode CSS.



Jadi, ketika tombol “Home” ditekan maka tombol tersebut akan berubah warna menjadi kuning. Begitu juga ketika kursor diarahkan menjauh, tombol tetap berwarna kuning. Keadaan demikian disebut dengan “active” sesuai tag class-nya.

Semoga bermanfaat...

Berkenalan dengan CSS

Apa itu CSS?
Menurut sumber wikipedia.org CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk memformat tampilan html, bahasa yang direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya seperti font, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS sangat membantu para web designer untuk memperindah halaman web templatesnya.
Sebenarnya dengan format HTML biasa saja kita sudah bisa membentuk suatu halaman web karena format HTML memiliki fungsi yang sama CSS. Namun bedanya CSS memiliki lebih banyak element. Sehingga seorang programmer atau web designer lebih leluasa memformat dan memperindah suatu halaman web.

Dimana Kode CSS dapat diletakkan?
Ada 3 tempat untuk meletakkan kode-kode CSS antara lain :
1. Tag <HEAD> document HTML
Contoh :

<HTML><head>
<title>page title</title>
//MULAI KODE CSS
<style type="text/css">
body{
background-color:#FFFFFF;
margin:1px,1px;
}
</style>
//AKHIR KODE CSS
</head>
<body></body>
</HTML>

Kode diatas termasuk yang dengan mudah dapat dilihat oleh siapa saja yang ingin mengetahui kode CSSnya. Karena kodenya terletak bersamaan dengan kode HTML tepatnya di Tag <Head>. Sehingga apabila kita tekan Ctrl+U pada browser kode CSS akan dapat ditemukan. Cirinya selalu diawali dengan kode .

2. Di Tag Element-element HTML
Kita juga bisa meletakkan kode-kode css kita di dalam tag-tag html

contoh:
<p style="font-size:12px;color:#000"> text-text content yang akan diformat </p>

Tag HTML contoh diatas adalah

. Untuk menambahkan kode CSS dengan mengawali kode style kemudian menambahkan kode properties CSS sama seperti tag-tag HTML lainnya seperti <body>, <div>, <table>,<p>,<h1>,<font>, dll. Jadi tidak terbatas pada tag <DIV> saja seperti yang biasanya kita lihat. Tapi tag-tag lain juga dapat di aplikasikan dengan kode CSS.

3. Ekternal File
Sesuai dengan namanya eksternal berarti menuliskan kode-kode CSS diluar file HTML yang terdapat di file tersendiri berformat .css. File berformat ini dalam sebuah file web biasanya terdapat di dalam folder bernama css. Kemudian file *.css ini disertakan (include) kedalam document HTML tepatnya pada tag head. Berikut ini contoh include CSS dalam document HTML.

<head>
<title>page title</title>
<link rel="stylesheet" href="eksternal_file_css.css " type="text/css">
</head>

Selector Class
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :

<div class="ClassDenis">Ini contoh CSS</div>

Sedangkan kode CSS-nya :
. ClassDenis {
font-size:12px;color:#0000DD
width:200px;
height:100px;
}

Semua tag html yang mempunyai nama class Denis maka akan diformat sesuai dengan format yang ditulis di kode CSS .ClassDenis.


Selector ID
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :

<div id=" IdDenis ">content</div>

kode css:
# IdDenis{
width:200px;
height:100px;
}

Dengan menambahkan karakter # di awal nama ID nya, berarti format itu adalah format untuk tag html yang berselector ID.

Selamat belajar…

Selasa, 30 Maret 2010

HTMLSpecialChars Pada PHP

Htmlspecialchars adalah sebuah fungsi atau sebuah perintah atau sintax yang di miliki oleh PHP yang berguna untuk menontaktifkan seluruh perintah – perintah html mengubah specialpada sebuah halamn web. Yang artinya mempertahankan penulisan HTML pada sebuah tampilan HTML. Htmlspecialchars digunakan ketika anda akan menuliskan kode HTML pada file berekstensi HTML namun karakter-karakter special tetap ingin dipertahankan pada saat tampil dibrowser. Pada saat kita menginputkan komentar, saya beri contoh komentar pada bukutamu, jika pengunjung memasukkan komentar missal Tebal maka yang akan ditampilkan adalah tulisan Tebal, tetapi jika kita menggunakan htmlspecialchars( ); maka komentar yang di tampilkan adalah Tebal. hasilnya perintah html tidak aktif dan perintah tetap di tampilkan pada komentar bukutamu.



Hasil outputnya adalah seperti berikut :

<a href='test'>Test</a>

Sedangkan apabila tidak menggunakan htmlspecialchars maka entitas htmlnya akan menjadi link. Seperti output yang tercetak dibawah ini :
Explode dan Implode

Test


Sumber : Manual PHP

Explode dan Implode PHP

Saya akan mencoba menjelaskan beberapa fungsi pada bahasa pemrograman berbasis web PHP. Yang pertama adalah explode. Explode merupakan string function yang digunakan untuk memisahkan string. Untuk lebih jelasnya dapat kita lihat pada contoh source code PHP dibawah ini :

Variable $pizza pada source code diatas yang berisi kata potongan1 sampai 5. Sebelum dibentuk menjadi potong-potongan string kembali, variable $pizza dipisahkan dengan fungsi string explode dengan delimiter sebagai pemisah (boundaries). Yang dimaksud delimiter pada source code diatas adalah tanda spasi masing-masing string pada variable $pizza.
Setelah dipisah (split) menjadi potongan-potongan akan terbentuk menjadi array yang apabila di eksekusi dengan perintah echo maka outputnya adalah seperti berikut :

potongan1
potongan2

Implode
Fungsi string implode merupakan kebalikan dari explode. Implode digunakan untuk menyatukan beberapa elemen array menjadi sebuah string yang dipisahkan delimiter. Contohnya dapat dilihat pada source code berikut.


Untuk menyatukan elemen-elemen array pada variable $arraybiodata diatas menggunakan fungsi string implode. Ketiga elemen array disatukan (implode) dengan dibatasi oleh tanda koma (,) diantara elemen satu dengan yang lain. Outputnya dapat dilihat seperti berikut :
nama,alamat,telepon

Sumber : Manual PHP

Enkripsi Password Dengan MD5

Sebenarnya masih banyak metode yang digunakan untuk mengenkripsi data. Seperti root13, MD4, dan lain-lain. Yang saya bahas kali ini adalah MD5.Data apa saja yang biasa dienkripsi sehubungan dengan ilmu web salah satunya ialah password. Tidak bisa dipungkiri lagi bahwa keamanan akses disebuah halaman web merupakan suatu hal penting untuk diperhatikan. Data yang terdapat dalam suatu halaman web seringkali merupakan data penting yang tidak boleh diperlihatkan sembarangan kepada orang yang tidak berhak.
Tutorial kali ini saya akan mencoba membahas tentang enkripsi password menggunakan MD5. Apa itu MD5? Definisi menurut sumber dari wikipedia.org MD5 merupakan algoritma yang memiliki metode one-way. Untuk definisi yang mudah dimengerti, MD5 merupakan metode enkripsi data dari yang berbentuk plaintext menjadi berbentuk algoritma (chypertext) yang bertujuan agar tidak mudah dibaca mentah-mentah oleh siapapun termasuk database administrator. Sebagai catatan tutorial ini sengaja saya tidak sertakan database agar dapat fokus pada MD5 saja dan juga sesuai judulnya “Enkripsi Password Dengan MD5”. Pembaca tinggal menambahkan database jika akan diaplikasikan menjadi selayaknya halaman login.
Saya akan mencoba mengilustrasikan enkripsi password pada sebuah halaman login. Berikut ini tampilannya.



Dan Berikut ini source code tampilan diatas :

<head>
<title>MD5</title>
<link rel="stylesheet" href="style.css " type="text/css">
</head>
<style type="text/css">
body{
background-color:#ffff;
}
.picbar{
position:fixed;
bottom:0px;
right:4px;
}
</style>

<body>
<div id="qwer">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="MD5.php">
<div style="margin-top:210px; color:#CCCCCC;">
<td style="color:#0000DD;">
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#d1d1d1">
<tr>
<td colspan="2"><strong><h2>Login</h2x></strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</div>
</form>
</tr>
</table>
</div>
<div class="picbar"><img src="bartelme.png" width="300" height="70" alt="Pic 2"></div>
</body>

Terdapat dua buah file yang diperlukan yaitu Login.Html dan MD5.php. File Login.Html berisi halaman untuk melakukan proses input username dan password. Saya akan masukkan masing-masing input usernamenya adalah username dan password nya password.



Setelah dimasukkan input username dan password, tekan tombol login. Halaman login.html berganti menjadi halaman file MD5.php. Pada halaman ini ditampilkan password hasil enkripsi menggunakan MD5. Data dilihat pada gambar dibawah perbedaan antara password yang masih berbentuk plaintext dan yang telah dienkripsi. Berikut ini merupakan tampilan file halaman MD5.php.


Berikut source codenya :

<?
$myusername= $_POST['myusername'];
$mypassword=$_POST['mypassword'];
$mypasswordmd5 = Md5($mypassword);
?>

<table width="550" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="checklogin.php">
<div style="margin-top:210px; color:#CCCCCC;">
<td style="color:#0000DD;">
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#d1d1d1">
<tr>
<td width="178">Username</td>
<td width="6">:</td>
<td width="294"><? echo $myusername?></td>
</tr>
<tr>
<td width="178">Password MD5/Chypertext</td>
<td width="6">:</td>
<td width="294"><? echo $mypasswordmd5?></td>
</tr>
<tr>
<td width="178">Password Plain Text</td>
<td>:</td>
<td width="294"><? echo $mypassword?></td>
</tr>
</table>
</td>
</div>
</form>
</table>

<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#d1d1d1">

</div>
</table>



Sumber : Php manual