Readmore Dengan PHP dan Mysql

|
Selamat datang di artikel ini, pada artikel kali ini saya akan membahas tentang embuat Readmore dengan PHP. Berikut langkah - langkahnya :

1. Buat database dengan nama blog
2. Buat tabel database masukan script sql berikut ke bagian SQL tabel database

Post.SQL
-- phpMyAdmin SQL Dump
-- version 3.2.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Waktu pembuatan: 10. Agustus 2013 jam 01:33
-- Versi Server: 5.1.41
-- Versi PHP: 5.3.1

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `blog`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `post`
--

CREATE TABLE IF NOT EXISTS `post` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `judul` varchar(200) NOT NULL,
  `foto` varchar(200) NOT NULL,
  `isi` text NOT NULL,
  `penulis` varchar(200) NOT NULL,
  `tanggal` datetime NOT NULL,
  `views` int(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data untuk tabel `post`
--

INSERT INTO `post` (`id`, `judul`, `foto`, `isi`, `penulis`, `tanggal`, `views`) VALUES
(1, 'HTML', 'http://t2.gstatic.com/images?q=tbn:ANd9GcSoZqwALMyrwVq4dFeLpAD_CVT2X_qe2NB6eEZej3PEJ8Hc3yyO2g&t=1', 'HTML\r\n\r\nHTML atau Hyper Text Markup Language adalah sebuah bahasa pemrogramman yang sering digunakan pada web. HTML merupakan file text murni yang dibuat dengan sembarang, “sembarang” dalam hal ini pengerjaannya bisa menggunakan software editor apa saja seperti notepad, editplus, dreamweaver ataupun editor lainnya.\r\n\r\nSTRUKTUR DASAR HTML\r\n\r\nSecara umum struktur HTML terbagi menjadi dua bagian yaitu Head dan Body, kedua kode tersebut terpisah oleh beberapa tag. Struktur Dasar HTML :\r\n<noscript>\r\n<HTML>\r\n\r\n<HEAD>\r\n<TITLE>Belajar WEB</TITLE>\r\n\r\n</HEAD>\r\n\r\n<BODY>\r\nisi dari web yang ditampilkan pada browser ...\r\n</BODY>\r\n</HTML>\r\n\r\n</noscript>\r\nSEJARAH HTML\r\n\r\nHTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).\r\n\r\n\r\nHTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).\r\n\r\n\r\nSemoga Arikel Kali Ini Bermanfaat ', 'Nauval Azhar', '2013-08-09 00:18:03', 0);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

3. Buka script editor anda(notepad,dreamweaver,dsb)
4. Kemudian masukan script berikut :

Post.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>
</head>

<body>
<table border="0">
  <tr>
    <td width="41%" height="127" colspan="2" valign="top"><div align="justify" id="kotak" style="width:900px;">
      <?PHP
switch($_GET[act]){
default :
mysql_connect("localhost","root","");
mysql_select_db("blog");
$Query = mysql_query("Select * from post ORDER BY `id` DESC");
while($tampil=mysql_fetch_array($Query)){
echo "<table>";
echo "<tr>
    <td colspan='2'><font color=red size=+2 style='text-transform:capitalize;'><a href=?index.php&act=Selanjutnya&data=$tampil[id]>$tampil[judul]</a></font></td>
  </tr>";
echo "<tr><td valign='top' height='0%' colspan='2'>Posted by :

$tampil[penulis] At : $tampil[tanggal]</td></tr>";
echo "<tr><td width='18%' align='left'>";
$f = $tampil['foto'];
if(empty($f)){
echo "No Images !";
}else{
echo "<img src='$tampil[foto]' width='98%' height='100%' />";
}
echo "</td>";
echo "<td width='83%' valign='top'><p class=gaya>".substr($tampil[isi],0,235)." ......";
echo "<a href=?index.php&act=Selanjutnya&data=$tampil[id]><br>Read more &raquo;</a><br>";
$orang=$tampil['views'];
if($orang=='0'){
echo "Belum Pernah Dibaca";
}else{
echo "Telah Dibaca Oleh $tampil[views] orang</p></td></tr>";
}
echo "</table><br>";
}
echo "<div class='justify'>";
case 'Selanjutnya':
if(isset($_GET['data'])){
$dataId=$_GET['data'];
include'koneksi/koneksi.php';

$tampilinsemuanya = mysql_query("SELECT * FROM post

WHERE id='$dataId' ORDER
by id asc");
if($tampildong = mysql_fetch_array( $tampilinsemuanya )){
echo "<font color=red size=+2 style=text-transform:capitalize;>

$tampildong[judul]</font><br>";
echo "Posted by : $tampildong[penulis] At : $tampildong[tanggal]<br><br>";
echo "<div align='center'><img src='$tampildong[foto]' /></div>";
echo "<p class=gaya>";
?>
      <?php
    $bbcode = array(
    "/\[b\](.*?)\[\/b\]/is" => "<b>$1</b>",
    "/\[i\](.*?)\[\/i\]/is" => "<i>$1</i>",
    "/\[u\](.*?)\[\/u\]/is" => "<u>$1</u>",
    "/\[size=(.*?)\](.*?)\[\/size\]/is"=>"<font size='$1'>$2</font>",
    "/\[center\](.*?)\[\/center\]/is" => "<center>$1</center>",
    "/\[left\](.*?)\[\/left\]/is"=>"<div align='left'>$1</div>",
    "/\[right\](.*?)\[\/right\]/is"=>"<div align='right'>$1</div>",
    "/\[justify\](.*?)\[\/justify\]/is"=>"<div align='justify'>$1</div>",
    "/\[blockquote\](.*?)\[\/blockquote\]/is" => "<font size='2' color='lightblue'>Quote :</font> <blockquote>$1</blockquote>",
    "/\[blink\](.*?)\[\/blink\]/is"=>"<blink>$1</blink>",
    "/\[marquee\](.*?)\[\/marquee\]/is"=>"<marquee >$2</marquee>",
    "/\r/is"=>"<br />",
    "/\[img\](.*?)\[\/img\]/is" => "<span class='terang'><a href='$1'><img src='$1' class'terang' style='width:100%; height:auto;'/></a></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 = "$tampildong[isi]";
    
    $teks = preg_replace(array_keys($bbcode), array_values

($bbcode), $teks);
    
    echo $teks;
    ?>
    <?php echo "</p>";
$orang=$tampildong['views'];
if($orang=='0'){
echo "Belum Pernah Dibaca";
}else{
echo "Telah Dibaca Oleh $tampildong[views] orang</p></td></tr>";
}
$query = "UPDATE `post` SET `views`= views + 1 WHERE id ='$tampildong[id]'";
mysql_query($query);
}
}
}
echo "</div>";
?> </div></td>
  </tr>
</table>
</body>
</html>

Lihat !
Perhatikan text berwarna biru adalah jumlah karakter yang di rangkum
Perhatikan text berwarna merah adalah nama link Read More

5. Simpan File diatas dengan nama post.php


Selamat Mencoba & Good Luck
baca selengkapnya »

Fungsi Echo

|

Sebelumnya saya telah memberikan artikel tentang PHP atau mengenal wajah dari bahasa pemrogramman PHP. Pada artikel kali ini saya akan memberikan artikel tentang Program Dasar PHP Echo. Pada script HTML ada tag pembuka dan tag penutup, jika pada HTML tag pembuka dan penutup akan seperti berikut :

<html>     //pembuka

........... 

</html>     //penutup

Jika pada bahasa PHP berbeda dengan HTML Jika pada PHP seperti berikut :

<?php     //pembuka
.....
?>           //penutup

Penulisan text pada PHP harus menggunakan echo. Contoh pada script gambar jika pada html penulisannya seperti ini <img src='URL Gambar' /> namun berbeda jika anda memsukan script gambar tersebut tanpa echo Contoh :
<?php
<img src='URL Gambar' />
?>
hasilnya pasti akan error. Contoh error : Parse error: syntax error, unexpected '<' in C:\xampp\htdocs\postingan\1.php on line 2

Penulisan script HTML pada bahasa PHP Contoh :

<?php
echo "<img src='URL Gambar' />";
?>

Jika pada echo menggunakan kutip satu maka kode didalam echo harus menggunakan kutip dua. Contoh:

<?php
echo '<img src="URL gambar" height="100" />';
?>

maka sebaliknya, jika pada echo menggunakan kutip dua maka kode didalam echo menggunakan kutip satu.


Demikian Tutorial ini, Semoga Bermanfaat
baca selengkapnya »

PHP

|

PHP
PHP adalah kepanjangan dari PHP Hypertext Preprocessor yang merupakan bahasa pemrogramman yang
berjalan dalam sebuah web server dan berfungsi sebagai pengolahan data pada web server. PHP merupakan salah satu program yang dapat dijalankan di server dan cukup handal. Dengan menggunakan program PHP, sebuah website akan lebih interaktif dan dinamis.

Sejarah PHP
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

Contoh Program
<?php
echo "Hello Word";

?>

Semoga Bermanfaat
baca selengkapnya »

Forum Dengan PHP dan MYSQL

|

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/phpmyadmin/
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">
<!--
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</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>&nbsp;</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>&nbsp;</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/AVvXsEhyhYZWzLcTzWpVEV_qHA8IUNowrdloqYQFcsVqWIGOddEN4Xyw1TH6TtC9R_yhCMZNBMuGVQVHo2SDer7REi9djXrh65mmjnhsBScpiMpFoHtcJ-RzEJi9o-2mGyd_WP1gVurUtferuFgP/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

Selamat Mencoba Dan Semoga Berhasil

baca selengkapnya »

Menampilkan Kotak Komentar Facebook

|

Hai teman, pada artikel kali ini saya akan memberikan tutorial tentang Menampilkan kotak komentar facebook di website. Nah berikut langkah - langkahnya :

1. Buat file PHP pada notepad atau dreamweaver

2. Lalu masukan script berikut

Comment Box »
<html>
<title>Comment Box</title>
<head>
</head>

<body>
 <h1>Beri Komentar Anda</h1>
<br/>

<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>


<div class="fb-comments" data-href="http://zooroos.blogspot.com" data-width="470" data-num-posts="10"></div>

</body>
</html>

Lalu simpan file tersebut dengan nama terserah anda.php

Catatan :
ganti text berwarna merah dengan alamat website anda
text berwarna biru adalah script javascript nya

Kurang lebihnya akan seperti ini :





Selamat Mencoba

baca selengkapnya »

Menampilkan Plugin Like Button

|


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 »

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>




Hasilnya kurang lebih seperti ini :










Selamat Mencoba dan Semoga Berhasil


baca selengkapnya »

Script CSS Untuk Input Text

|
  


Kali ini saya akan memberikan beberapa script css untuk mempercantik input teks : 


Simple





.simple-input {

display: block;

padding: 5px;

border: 4px solid #F1B720;

border-radius: 5px;

color: #333;

transition: all 0.3s ease-out;

}

.simple-input:hover { border-radius: 8px; }

.simple-input:focus {

outline: none;

border-radius: 8px;

border-color: #EBD292;

}










Mac



 




.mac {

display: block;

border: none;

border-radius: 20px;

padding: 5px 8px;

color: #333;

box-shadow:

inset 0 2px 0 rgba(0,0,0,.2),

0 0 4px rgba(0,0,0,0.1);

}

.mac:focus {

outline: none;

box-shadow:

inset 0 2px 0 rgba(0,0,0,.2),

0 0 4px rgba(0,0,0,0.1),

0 0 5px 1px #51CBEE;

}








Gradient





.depth {

display: block;

border: 1px solid silver;

background: linear-gradient(#eee, #fff);

transition: all 0.3s ease-out;

padding: 5px;

color: #555;

}

.depth:focus {

outline: none;

background-position: 0 -1.7em;

}








Only Line 



 

.line {

display: block;

border: none;

color: #333;

background: transparent;

border-bottom: 1px dotted black;

padding: 5px 2px 0 2px;

}

.line:focus {

outline: none;

border-color: #51CBEE;

}



Semoga Bermanfaat


baca selengkapnya »