ARTICLES

Form Upload Foto Dengan PHP

Pada artikel kali ini saya akan memberikan tutorial tentang Membuat Form Upload Foto Dengan PHP. Jika teman ingin membuatnya, silakan ikuti langkah-langkah berikut :

1. Buat file dengan type PHP

2. Masukan script berikut ini :

index.php »

<?php
if($_POST['upload']){
if($_FILES['gambar']['type']=="image/png" || $_FILES['gambar']['type']=="image/jpeg" || $_FILES['gambar']['type']=="image/png"){
$tmp = $_FILES['gambar']['tmp_name'];
$name = $_FILES['gambar']['name'];
$path = "upload/$name"; //lokasi file gambar yang akan di upload
$simpen = move_uploaded_file($tmp,$path); //meng-copy file gambar ke dalam folder upload
if($simpen){
echo "<script>alert('Sukses Upload File');</script>";
echo "<img src='upload/$name' />";
}else{
echo "<script>alert('Gagal !');</script>";
}
}
}
?>

<form name="form" method="post" enctype="multipart/form-data" action="#">
<input type="file" name="gambar" accept="image/*" />
<input type="submit" name="upload" value="Upload" />
</form>

3. Lalu buat folder baru bernama upload

4. Lalu simpan file tersebut dengan nama index.php

*Jika gagal anda belum membuat sebuah folder baru bernama upload

Download File
Semoga Bermanfaat

Readmore »»

Validasi Email Dengan PHP

Hai teman, pada artikel kali ini saya akan memberikan artikel membuat Validasi email dengan php. Validasi email adalah ketika anda memasukan email kedalam input text dengan format ex: Nauval_azhar maka akan salah, maka sebaliknya jika anda memeasukan alamat email dengan format yang benar ex: nauval_azhar@tampan.com maka anda akan dibawa kehalaman selanjutnya. Jika anda ingin membuatnya maka ikuti langkah-langkah berikut :

1. Buat file dengan format PHP di notepad atau dreamweaver

2. Lalu masukan script berikut :

Test.php »

<!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=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
    //Total Karakter
   var maxChar = 2000;

   //Fungsi Hitung Textbox
   function itung()
   {
     if (document.formku.deskripsi.value.length > maxChar)
     {
        document.formku.deskripsi.value = document.formku.deskripsi.value.substring(0, maxChar);
     }
     else document.formku.hitung.value = maxChar - document.formku.deskripsi.value.length;
   }

   //Menampilkan jumlah karakter
   function initial()
   {
      document.formku.hitung.value=maxChar;
    }
</script>
<style>

.text{
width:300px;
border:none;
background:#FFF;;
color:#666;
padding:5px;
border:1px solid #999;
}
.text:focus{
background:#fff;
color:#000;
border:1px solid #82E2FF;
}

.modern {
display: inline-block;
margin: 0px;
padding: 5px 10px;
cursor:pointer;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2);
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
transition:all 0.5s ease-out;
}

.modern:hover { background:#00FF66; }

.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
</style>

</head>

<body>
<form name="formku" id="form1" method="post" action="terima.php">
<br />
<table width="100%" border="0">
<tr>
    <td><span class="style1">Email</span></td>
    <td><input name="email" type="text" class="text" placeholder="Email" /></td>
</tr>
<tr>
    <td><span class="style1">Password</span></td>
    <td><input name="code" type="password" class="text" id="code" placeholder="Password" /></td>
</tr>
<tr>
    <td> </td>
    <td><input name="Reset" type="reset" class="modern" value="Reset" />
      <input name="Submit2" type="submit" class="modern" value="Submit" /></td>
</tr>
</table>
</form>

</body>
</html>

Simpan file tersebut dengan nama test.php

3. Buat file PHP lagi yang berfungsi untuk membuat proses validasi

Terima.php »

<!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=iso-8859-1" />
<title>Untitled Document</title>

<?php
if(empty($_POST['email'])){
?>
<script>
alert('Email Tidak Isi !');
document.location='test.php';
</script>
<?php
}elseif(empty($_POST['code'])){
?>
<script>
alert('Password Tidak Diisi !');
document.location='test.php';
</script>
<?php
}else{
?>
<?php
$email = $_POST['email'];
if(preg_match("/\w+@\w+\.[a-zA-Z]+/i",$email)){
?>
<?php
$email = $_POST['email'];
echo "<script>";
echo "alert('Selamat Datang $email')";
echo "</script>";
}else{
?>
<script>
alert('Format Email Salah !');
document.location='javascript:history.back()';
</script>
<?php
}
?>
<?php
}
?>
<style type="text/css">

</style>
</head>

<body>
<div align="center" class="style1">Selamat Datang <?php echo $_POST['email']; ?></div><br />
<br />
<br />
Dapatkan Artikel Yang Keren Tentang Web

Lainnya<br />
<h3 itemprop="name"><span class="style2"><a href="http://97-ninetyseven.blogspot.com/2013/07/membatasi-jumlah-karakter-pada-textarea_24.html">Membatasi Jumlah Karakter Pada Textarea</a></span></h3>
<h3 class="style2" itemprop="name"><a href="http://97-ninetyseven.blogspot.com/2013/07/membuat-forum-dengan-fasilitas-menarik.html">Membuat Forum Dengan Fasilitas Menarik</a>(emoticon dan BBcode)</h3>
<h3 class="style2" itemprop="name"><a href="http://97-ninetyseven.blogspot.com/2013/07/menampilkan-kotak-komentar-facebook-di.html">Menampilkan Kotak Komentar Facebook Di Website</a></h3>
<p class="style2"><a href="http://97-ninetyseven.blogspot.com/2013/06/koneksi-ke-database_15.html">Koneksi Ke Database</a></p>
<p class="style2"><a href="http://97-ninetyseven.blogspot.com/2013/06/membuat-favicon-pada-website-dreamweaver.html">Membuat Favicon Pada Website</a><br />
</p>
</body>
</html>

Simpan file tersebut dengan nama terima.php

Selesai coba lihat hasilnya

Lihat Demo

Sumber : http://zooroos.blogspot.com
Semoga Bermanfaat

Readmore »»

Memasang Plugin Like Button Di Website

Hai teman, pada artikel kali ini saya akan memberikan tutorial tentang Memasang plugin like button di web. Nah jika anda tertarik silakan ikuti tutorial berikut ini :

1. Kunjungi alamat ini https://developers.facebook.com/docs/reference/plugins/like/

2. Akan ada tampilan seperti gambar dibawah

3. Scroll kebawah dan atur like button menjadi yang anda suka lau klik get code

URL to Like   Masukan alamat website anda ex: http://yoursite.co.id
Send Button (XFBML Only)    Beri tanda centang untuk menampilkan tombol kirim
Layout Style    Atur tampilan like button
Width     Atur panjang like button yang anda inginkan
Show Faces     Beri tanda centang saja
Font     Atur jenis huruf yang anda suka
Color Scheme    Pilih warna background
Verb to Display     Pilih jenis tombol yang akan ditampilkan
Get Code     Untuk Menampilkan hasil like button yang anda atur

4. Setelah di klik get code akan muncul tampilan seperti ini

5. Pilih HTML5 lalu copy script yang ada pada kotak no 1

6. Lalu paste kan dibawah tag pembuka <body>

7. Kemudian copy script yang ada di kotak no 2

8. Lalu pastekan di tempat yang anda mau

9. Lalu lihat hasilnya

Script nya kurang lebihnya seperti ini :

Kotak No1 »

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Kotak No2 »

Hasilnya kurang lebih seperti ini :

Sumber : http://zooroos.blogspot.com
Selamat Mencoba dan Semoga Berhasil

Readmore »»

Membatasi Jumlah Karakter Pada Textarea

Hai teman, pada artikel kali ini saya akan memberikan tutorial tentang Membatasi jumlah karakter dengan javascript. Nah berikut langkah - langkahnya :

1. Buka software notepad

2. Pada notepad masukan Script berikut

Test.php

<!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=iso-8859-1" />
<title>membatasi Jumlah Karakter | Articles</title>
<script type="text/javascript">
    //Total Karakter
   var maxChar = 2000;

   //Fungsi Hitung Textbox
   function itung()
   {
     if (document.formku.deskripsi.value.length > maxChar)
     {
        document.formku.deskripsi.value = document.formku.deskripsi.value.substring(0, maxChar);
     }
     else document.formku.hitung.value = maxChar - document.formku.deskripsi.value.length;
   }

   //Menampilkan jumlah karakter
   function initial()
   {
      document.formku.hitung.value=maxChar;
    }
</script>
<style>
.pesan{
width:400px;
height:150px;
border:1px solid #999999;
background:#fff;
color:#666;
padding:5px;
margin-top:-1px;
resize:none;
}
.pesan:focus{
border:1px solid #82e2ff;
color:#000;
}

</style>

</head>

<body>
<form name="formku" id="form1" method="post" action="#">
<textarea name="pesan" cols="30" rows="5" class="pesan" id="deskripsi" onkeyup="itung()" placeholder="Pesan Anda .." ></textarea>
       <br />
       Karakter Tersisa
       <input type="text" readonly name="hitung" id="hitung" class="trans1" size="3" disabled="disabled" style="border:none; background:none; color:#000000;"/>
       </form>

</body>
</html>

Simpan file tersebut dengan nama terserah anda.php

Lihat Hasilnya :

Sumber : http://zooroos.blogspot.com
Selamat Mencoba Dan Semoga Berhasil

Readmore »»

Membuat Forum Dengan Fasilitas Menarik

Hai teman, mungkin sebagian dari anda sulit menemukan tutorial tentang membuat forum dengan fasilitas BBcode dan sedikit emoticon. BBcode adalah sebuah code yang dibuat menyerupai code HTML contohnya : <b>text</b> menjadi [b]text[/b]. Mungkin tutorial seperti ini cukup sulit dijumpai, nah kali ini saya akan memberikan tutorial nya. Berikut adalah langkah - langkahnya :

Software Pendukung :
1. Dreamweaver
2. Xampp
3. Mozilla Firefox

Langkah pertama membuat database.
1. Buka Mozilla Firefox anda
2. Tuliskan alamat berikut di adress bar http://localhost/phpmyad min/
3. Buat database dengan nama forum (lihat gambar)

4. Kemudian anda akan dibawa ke halaman structure masuklah anda ke halaman SQL

5. Dan masukan script SQL berikut kedalam SQL input lalu klik GO

SQL Script »

CREATE TABLE `forum`.`komentar` (
`id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 200 ) NOT NULL ,
`email` VARCHAR( 200 ) NOT NULL ,
`pesan` TEXT NOT NULL ,
`tanggal` DATE NOT NULL
) ENGINE = MYISAM ;

6. Jika berhasil akan ada tampilan seperti berikut

Pembuatan database telah selesai.

Langkah kedua membuat koneksi ke database.
1. Buka software Dreamweaver
2. Buat file dengan format PHP
3. Masukan Script berikut :

Koneksi.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("forum");
?>

Simpan file tersebut dengan nama koneksi.php

Langkah ketiga membuat file input
1. Tekan CTRL + N buat file dengan format PHP
2. Kemudian masukan Script berikut :

Form.php

<html>
<title>Input Komentar</title>
<style type="text/css">

</style>
<head>
<script type="text/javascript">
    //Total Karakter
   var maxChar = 2000;

   //Fungsi Hitung Textbox
   function itung()
   {
     if (document.formku.deskripsi.value.length > maxChar)
     {
        document.formku.deskripsi.value = document.formku.deskripsi.value.substring(0, maxChar);
     }
     else document.formku.hitung.value = maxChar - document.formku.deskripsi.value.length;
   }

   //Menampilkan jumlah karakter
   function initial()
   {
      document.formku.hitung.value=maxChar;
   }
</script>
<style>
.pesan{
width:400px;
height:150px;
border:1px solid #999999;
background:#fff;
color:#666;
padding:5px;
margin-top:-1px;
resize:none;
}
.pesan:focus{
border:1px solid #82e2ff;
color:#000;
}
.text{
width:300px;
border:none;
background:#FFF;;
color:#666;
padding:5px;
border:1px solid #999;
}
.text:focus{
background:#fff;
color:#000;
border:1px solid #82E2FF;
}

.modern {
display: inline-block;
margin: 0px;
padding: 5px 10px;
cursor:pointer;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2);
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
transition:all 0.5s ease-out;
}

.modern:hover { background:#00FF66; }
input.trigger {
display:inline-block;
margin:0;
padding:0;
}

.spoiler {
overflow:hidden;
background-color:;
margin:10px 0 0;
padding:0 30px;
height:10px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
padding:5px 10px;
background:#FFF;
border:1PX solid #E4E4E4;
visibility:visible;
height:auto;
}
.all{
background:#E6FAFF;
height:10;
padding:20px;
margin-left:2px;
border-radius:5px;
margin-right:-4px;
margin-bottom:-6px;
padding-bottom:15px;
BOX-SHADOW:0 0 10px 0px #000;
margin-top:-5px;
font:12px Verdana, Arial, Helvetica, sans-serif;
}

</style>
</head>
<body>
<form name="formku" id="form1" method="post" action="simpan.php">
<table width="100%" border="0" class="all">
   <tr>
     <td height="23" colspan="2">
   BBcode
   <input type='checkbox' class='trigger'/><div class='spoiler' style='background:#fff;'><br />
<table width="100%" border="0" style="font- family:Verdana, Arial, Helvetica, sans-serif;">
       <tr>
         <td width="17%">Spoiler</td>
         <td width="83%">[spoiler=judul spoiler]isi spoiler[/spoiler] </td>
       </tr>
       <tr>
         <td><blink>Blink</blink></td>
         <td>[kedip]text[/kedip]</td>
       </tr>
       <tr>
         <td>Bold</td>
         <td>[b]text[/b]</td>
       </tr>
       <tr>
         <td>Italic</td>
         <td>[i]text[/i]</td>
       </tr>
       <tr>
         <td>Underline</td>
         <td>[u]text[/u]</td>
       </tr>
       <tr>
         <td>Font Size </td>
         <td>[ukuran=8]text[/ukuran]</td>
       </tr>
       <tr>
         <td>Center</td>
         <td>[tengah]text[/tengah]</td>
       </tr>
       <tr>
         <td>Left</td>
         <td>[kiri]text[/kiri]</td>
       </tr>
       <tr>
         <td>Right</td>
         <td>[kanan]text[/kanan]</td>
       </tr>
       <tr>
         <td>Justify</td>
         <td>[justify]text[/justify]</td>
       </tr>
       <tr>
         <td>Blockquote</td>
         <td>[blockquote]text[/blockquote]</td>
       </tr>
       <tr>
         <td>Marquee</td>
         <td>[jalan=1]text[/jalan]</td>
       </tr>
       <tr>
         <td>Gambar</td>
         <td>[gambar]URL[/gambar]</td>
       </tr>
       <tr>
         <td>Link</td>
         <td>[url=tujuan]nama link[/url] </td>
       </tr>
       <tr>
         <td>Smiles</td>
         <td><a href="emoticon.php" target="_blank">Get Smiley </a></td>
       </tr>
     </table></div>
      <p> </p>
      <p><a href="terima.php">Lihat Daftar Komentar</a> </p></td>
    </tr>
   <tr>
     <td width="14%"><span class="style3">Nama</span></td>
     <td width="86%"><input placeholder='nama' name="nama" type="text" class="text" /></td>
   </tr>
   <tr>
     <td><span class="style3">Email</span></td>
     <td><input name="email" type="text" class="text" placeholder='email' /></td>
   </tr>
   <tr>
     <td><span class="style3">Pesan</span></td>
     <td><textarea name="pesan" cols="30" rows="5" class="pesan" id="deskripsi" onkeyup="itung()" placeholder="Pesan Anda .." ></textarea>
       <br />
       Karakter Tersisa
       <input type="text" readonly name="hitung" id="hitung" class="trans1" size="3" disabled="disabled" style="border:none; background:none; color:#000000;"/></td>
   </tr>
   <tr>
     <td> </td>
     <td><input name="Reset" type="reset" class="modern" value="Reset" />
         <input name="submit" type="submit" class="modern" value="kirim" /></td>
   </tr>
</table>
<br />
</form>
</body>
</html>

Simpan file tersebut dengan nama form.php

Langkah keempat membuat file simpan.php
1. Buat file baru dengan format PHP
2. Kemudian masukan script berikut :

Simpan.php »

<?php
if(empty($_POST['nama'])){
?>
<script>
alert('Nama Kosong !');
document.location = "javascript:history.back()";
</script>
<?php
}
elseif(empty($_POST['email'])){
?>
<script>
alert('email Wajib Diisi !');
document.location = "javascript:history.back()";</script>
<?php
}
elseif(empty($_POST['pesan'])){
?>
<script>
alert('Tuliskan Pesan Anda !');
document.location = "javascript:history.back()";</script>
<?php
}else{
?>
<?php
$email = $_POST['email'];
if(preg_match("/\w+@\w+\.[a-zA-Z]+/i",$email)){
?>
<?php
include "koneksi.php";
$id = $_POST['id'];
$nama = $_POST['nama'];
$email = $_POST['email'];
$pesan = $_POST['pesan'];
$tanggal = $_POST['tanggal'];
$simpan = "insert into komentar values ('$id','$nama','$email','$pesan',NOW( ))";
$jalankan = mysql_query($simpan);
?>
<script>
alert("Sukses");
document.location='terima.php';
</script>
<?php
}else{
?>
<script>
alert('Email Tidak Valid !');
document.location='javascript:history.back()';
</script>
<?php
}
?>
<?php
}
?>

Langkah kelima menampilkan hasil input dari database
1. Buat file baru dengan format PHP
2. Lalu masukan script berikut :

Terima.php »

<!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>
<title>Chat</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.foto{
width:110px;
height:100px;
border-radius:5px;
box-shadow:0 0 2px 2px #000;
background:#FFFFFF;
}

blockquote {
font:normal normal 11px/16px Verdana,Arial,Sans-Serif;
color:#666;
border:2px solid #cec2c2;
background-color:#fff;
padding:18px 20px;
-webkit-box-shadow:inset 0px 0px 7px #222;
-moz-box-shadow:inset 0px 0px 7px #222;
box-shadow:inset 0px 0px 7px #222;
margin:0px 30px 15px;
/*
overflow:auto;
height:250px;
(opsional) */
}
input.trigger {
display:inline-block;
margin:0;
padding:0;
}

.spoiler {
overflow:hidden;
background-color:;
margin:10px 0 0;
padding:0 30px;
height:10px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
padding:5px 10px;
background:#FFF;
border:1PX solid #E4E4E4;
visibility:visible;
height:auto;
}
img{
width:55px;
height:50px;
}
#flip{ text-align:left;} #panel { padding:1px; text-align:left; background:#fff; border:0px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:2px; border:1PX solid #D4D4D4; } #panel { padding:10px; display:none; } .bspl{border:none; background:#CCCCCC; color:#000000; border-radius:2px; padding:1px; width:80px; cursor:pointer;}

.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl5580gX7FvkYkPxAcvqzFakDQVEK-ZQTClQ-X6sgvT6j15vszvkJMl4irfu-cC43LVtLcWbZnwo8ZsYLnQsdnebuW-5Ol8QqrsZucJ_Xlb1kjBgi0-nAyVEwQYK2uMQkol7zR6t5f2Uou/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left}
.box{
width:75%;
height:auto;
padding:5px;
margin-left:145px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}
.boxtop{
background:#0099FF;
height:10;
width:99.1%;
border-bottom:2px solid #333;
padding:7px;
color:#fff;
margin-left:2px;
margin-right:-4px;
margin-bottom:-0px;
padding-bottom:2px;
box-shadow:
    inset 0 2px 3px #f2f2f2,
    inset 0 -2px 3px #555,
    0 1px 1px rgba(255,255,255,0.9);
margin-top:-28px;
font:12px Verdana, Arial, Helvetica, sans-serif;
}
.boxleft{
background:#DFEEFF;
padding:12px;
border-right:2px solid #E9E9E9;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.boxbottom{
background:#fff;
height:45px;
border-top:0.5px solid #E9E9E9;
padding:3px;
padding-right:17px;
width:99.3%;
border-bottom:3px solid #FFF;
margin-left:-3PX;
margin-top:0px;
}
.obrol{
padding:20PX;
width:97.5%;
height:98%;
margin-top:-1px;
margin-left:-3px;
padding-left:15px;
background:#fff;
}
.tanggal{
margin:0px;
}

.modern a{
font:13px Verdana, Arial, Helvetica, sans-serif;
color:#666666;
text-decoration:none;
}
.modern {
display: inline-block;
margin: 10px;
margin-left:-6px;
padding: 5px 10px;
background:#E9E9E9;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.5s ease-out;
box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2);

/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}

.modern:hover { background:#46D6FF; text-decoration:none; }
.modern a:hover { text-decoration:none; }

body {
   background-color: #E6F1FF;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.terang').fadeTo('slow', 0.40);
$('.terang').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('fast', 0.40);
});
});
</script>
<body>
<br />
<p>

<?php
include "koneksi.php";
$cari = "select * from komentar ORDER BY `id` DESC ";
$jalankan = mysql_query($cari);
while($isi = mysql_fetch_array($jalankan))
{

?>
</p>
<div class="box">
<div class="boxtop"><table><tr><td><img src="images/kalender.png" style="width:20px; height:20px;" /></td><td><div class="tanggal"><?php echo "$isi[tanggal]"; ?> </div></td></tr></table></div>
<?php
echo "<table width='100%' height='10' border='0'>";
echo " <tr>";
echo "    <td width='13%' height='80' valign='top' class='boxleft' rowspan='2' align='center'><img src='images/pp.jpg' class='foto'/></div><br/><br/><div style='text-transform:capitalize;'>$isi[nama]</div><br/><p align='left'>ID : $isi[id]</p><p align='left'>Pada : $isi[tanggal]</p><br/></td>";
echo "    <td valign='top'><div class='obrol'>";
?>
<?php
    $bbcode = array(
    "/\[b\](.*?)\[\/b\]/is" => "<b>$1</b>",
    "/\[i\](.*?)\[\/i\]/is" => "<i>$1</i>",
    "/\[u\](.*?)\[\/u\]/is" => "<u>$1</u>",
   "/\[ukuran=(.*?)\](.*?)\[\/ukuran\]/is"=>"<font size='$1'>$2</font>",
   "/\[tengah\](.*?)\[\/tengah\]/is" => "<center>$1</center>",
   "/\[kiri\](.*?)\[\/kiri\]/is"=>"<div align='left'>$1</div>",
   "/\[kanan\](.*?)\[\/kanan\]/is"=>"<div align='right'>$1</div>",
   "/\[justify\](.*?)\[\/justify\]/is"=>"<div align='justify'>$1</div>",
   "/\#sedih/is"=>"<img src='emoticon/sedih.gif'/>",
   "/\#ckckck/is"=>"<img src='emoticon/geleng.gif'/>",
   "/\#payah/is"=>"<img src='emoticon/payah.gif'/>",
   "/\#pentung/is"=>"<img src='emoticon/pentung.gif'/>",
   "/\#jempol/is"=>"<img src='emoticon/sipp.gif'/>",
   "/\#tepuktangan/is"=>"<img src='emoticon/tepuktangan.gif'/>",
   "/\[blockquote\](.*?)\[\/blockquote\]/is" => "<font size='2' color='lightblue'>Quote :</font> <blockquote>$1</blockquote>",
   "/\[kedip\](.*?)\[\/kedip\]/is"=>"<blink>$1</blink>",
   "/\[jalan\=(.*?)\](.*?)\[\/jalan\]/is"=>"<marquee scrollmounth='$1'>$2</marquee>",
   "/\r/is"=>"<br />",
   "/\[gambar\](.*?)\[\/gambar\]/is" => "<span class='terang'><img src='$1' class'terang' style='width:auto; height:auto;'/></span>",
   "/\[spoiler\=(.*?)\](.*?)\[\/spoiler\]/is"=>" <font size='1'>Spoiler For <i>$1</i> </font> <input type='checkbox' class='trigger'/>
<div class='spoiler' style='background:#fff;'>
<br/>$2
</div> ",
   "/\[url\=(.*?)\](.*?)\[\/url\]/is" => "<a href='$1'>$2</a>"
    );

    $teks = "$isi[pesan]";

    $teks = preg_replace(array_keys($bbcode), array_values($bbcode), $teks);

    echo $teks;
    ?>
<?php
echo "</div></td>";
echo " </tr>";
echo " <tr>
    <td height='21'><div class='boxbottom' align='right'><div class='modern'><a href='form.php' title='Buat Postingan Baru' >Buat Postingan Baru</a></div> <div class='modern'><a href='mailto:$isi[email]' target=_blank'>Kunjungi</a></div></td>
</tr>";
echo "</table>";
?>
</div>
</div><?php } ?>

</body>
</html>

Simpan file tersebut dengan nama terima.php

Simpan keenam smiley itu ke dalam folder emoticon(lihat gambar)

Kerangka folder

Penting !
Semua file harus dalam satu folder yang sama dan jangan mengubah nama file ataupun script

Sedikit penjelasan :

Pada script ini    "/\[ukuran=(.*?)\](.*?)\[\/ukuran\]/is"=>"<font size='$1'>$2</font>",
ukuran adalah nama bbcode bisa diganti dengan nama yang lain
$1, $2 adalah $1 untuk mengisi kode (.*?) yang pertama sedangkan $2 untuk kode (.*?) yang kedua

script BBcode nya seperti ini
[ukuran=8] text [/ukuran]

untuk smiley "/\#jempol/is"=>"<img src='emoticon/sipp.gif'/>",
Pada #jempol itu adalah code yang akan menggantikan script <img src='emoticon/sipp.gif'/> bisa diganti dengan contoh : (y) atau :ok atau terserah anda
<img src='emoticon/sipp.gif'/> pada kata src='emoticon/sipp.gif' itu adalah alamat url gambar emoticon berada.

Jika smiley yang saya berikan kurang cari lagi saja emiticonnya dan masukan script
"/\#CODE/is"=>"<img src='URL'/>",      untuk dipertengahan
"/\#CODE/is"=>"<img src='URL'/>",      jika disimpan diakhir script maka hilangkan tanda koma di akhrir code. Menjadi "/\#CODE/is"=>"<img src='URL'/>"

jika ada kata - kata yang kurang jelas harap ditanyakan !

Maaf kalau tutorial ini agak ribet

Sumber : http://zooroos.blogspot.com

Selamat Mencoba Dan Semoga Berhasil

Readmore »»

ARTICLES

Form Upload Foto Dengan PHP

Validasi Email Dengan PHP

Memasang Plugin Like Button Di Website

Membatasi Jumlah Karakter Pada Textarea

Membuat Forum Dengan Fasilitas Menarik

Recent Post

Like Box

Categories