Membuat program Chat dengan PHP tanpa database

  Belajar bikin Chat dengan PHP.  bagi kalian terjun di dunia IT pasti nggak asing dengan pemrograman yang namanya PHP.Bukan PHP (Pemberi harapan palsu lho) . hehehe... Nah di pemrograman PHP ini aku akan bagi beberepa source code bikinan ku. tapi eitss maaf ya,codenya gk bisa dicopas karena aku harap supaya kalian bisa bener-bener paham dengan codingannya.Okeee .. Jadi dikodingan ini aku bikin chat, yg bisa menampilkan sensor,sama membuat sensor kata setiap ketemu kata yang genap,q kasih sensor " * ".Sebelum kalian bikin php jgn lupa siapin file txt.nya ya.. disini aku bikin txtnya aku kasih nama chatbox.txt.
<style>
.td{
     border-bottom:1px #a1a1a1 solid;
   }
.input{
     border:1px #a1a1a1 solid;
     height:30px;
     width:200px;
     font-size: 12px;
     color: #777;
     cursor: pointer;
     margin: 5px;
     padding: 0 10px;
     color: #404040;
     background: #fff;
     border-width: 1px;
     border-style: solid;
     border-color: #c4c4c4 #d1d1d1 #d4d4d4;
     border-radius:3px;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}
   
.area{
    color: #404040;
     background: #fff;
     border-width: 1px;
     border-style: solid;
     border-color: #c4c4c4 #d1d1d1 #d4d4d4;
     border-radius:3px;
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
     }
section{
    margin-left: 350px;
    width: 500px;
    height: 300px;
    border-radius: 30px;
    background-color: #99CCFF;
    position:relative;
  padding:70px 30px;
  margin:10px auto 20px;
  border:10px solid #f3961c;
  text-align:center;
  color:#333;
  background:#fff;
  /* css3 */
  /*
  NOTES:
  -webkit-border-radius:200px 140px; // produces oval in safari 4 and chrome 4
  -webkit-border-radius:200px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  */
  -webkit-border-top-left-radius:200px 140px;
  -webkit-border-top-right-radius:200px 140px;
  -webkit-border-bottom-right-radius:200px 140px;
  -webkit-border-bottom-left-radius:200px 140px;
  -moz-border-radius:240px / 140px;
  border-radius:240px / 140px;
}
}

</style>

<?php
function cek_email($email) {
if (!preg_match("/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email))
return false;
return true;
}

function cek_pesan($pesan){
$pesan = trim($pesan);
$pesan = str_datakelace('r', ", $pesan);
$pesan = str_datakelace('n', ", $pesan);

if (empty($pesan)) return false;
else return true;
}

// command2 emoticon
$command = array(
':)',    ':-)',    ':(',    ':-(',    ':p',    ':-p',
':D',    ':-D',    ':o',    ':-o',    ':s',    ':-s',
':’(',    ':z',    ':-z',    ':@',   ':-@',
);

function cek_emot($pesan){
global $command; // menjadikan variabel $command diatas menjadi variabel global

foreach ($command as $emot) if ($pesan == $emot) return true;
return false;
}

function emot($pesan){
global $command; // menjadikan variabel $command diatas menjadi variabel global

// daftar smiley
$datake = array(
'smile.gif',    'smile.gif',    'sad.png',        'sad.png',        'tongue.gif',        'tongue.gif',
'laugh.gif',    'laugh.gif',    'shock.gif',    'shock.gif',    'dizzy.gif',        'dizzy.gif',
'cry.gif',        'sleep.png',    'sleep.png',    'mad.png',        'mad.png',
);

for ($i=0; $i<count($command); $i++)
if ($pesan == $command[$i])    // jika smiley berada didalam folder emot/ maka source seperti dibawah
$pesan = str_datakelace($pesan, '<img src="emot/'.$datake[$i].'" />', $pesan);

return $pesan;
}

// tempat penyimpanan data
$file = 'chatbox.txt';

if (!file_exists($file)){
$fopen = fopen($file, "w");
$data = "";
fputs($fopen, $data);
fclose($fopen);
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box </title>
</head>
<body background='chat.png'>
<?php

if (isset($_POST['nama']) && isset($_POST['email'])){
$nama = trim($_POST['nama']);

echo '<p align="center">';
if (!empty($nama))
if (cek_email($_POST['email']) != false)
if (cek_pesan($_POST['pesan']) != false){

if (file_exists($file)){

$data = $_POST['nama'].';'.$_POST['email'].';';
$data .= $_POST['pesan'].'|';

$fopen = fopen($file, 'a');
fputs($fopen, $data);
fclose($fopen);

echo '<strong>Pesan berhasil terkirim!</strong>';
}

}else echo '<strong>Pesan tidak boleh kosong!</strong>';
else echo '<strong>Email yang Anda tidak valid!</strong>';
else echo '<strong>Nama tidak boleh kosong!</strong>';

echo '</p>';
}
?>
<section>
<form method="post">
<table align="center">
    <tr><td colspan="2" align="center"><h2>Ca_Chat</h2><hr />
<tr>
<td class = "td" width="150">Nama</td>
<td class = "td">: <input type="text" class = "input" name="nama" size="40"  /></td>
</tr>
<tr>
<td class = "td">Email</td>
<td class = "td">: <input type="text" class = "input" name="email" size="40"/></td>
</tr>
<tr>
<td class = "td">Pesan</td>
<td class = "td">: <textarea name="pesan" class = "area" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Kirim" /></td>
</tr>
</table>
</form>
</section>
<?php
error_datakeorting (E_ALL^(E_NOTICE|E_WARNING));
if (file_exists($file)){
if (filesize($file) != NULL){
$fopen = fopen($file, 'r');
$data = fread($fopen, filesize($file));
fclose($fopen);

echo '<section><table width="420" align="center"><tr><td><h3>Siapa saja yang berkomentar:</h3></td></tr></section>';

$pecah = explode('|', $data);
foreach ($pecah as $pesan){
$datake = explode(';', $pesan);

if (!empty($datake[0]) && !empty($datake[1])){
echo '<tr><td><strong>'.$datake[0].' &lt;<a href="mailto:'.$datake[1].'" title="Kirim email ke '.$datake[1].'">'.$datake[1].'</a>&gt; berkata:</strong><p>';

$cetak_bintang = explode(' ', $datake[2]);

foreach ($cetak_bintang as $spasi){
if (cek_emot($spasi) != false){
echo emot($spasi);
}else{
$i = 0;
while ($i<strlen($spasi)){

$sensor = str_datakelace($spasi[$i+1],'*', $spasi[$i+1]);
echo $spasi[$i].$sensor;

$i+=2;
}
}
echo ' ';
}

echo '</p></td></tr>';
}
}
echo '</table>';
}else echo '<p align="center"><strong>Chat box masih kosong!</strong></p>';
}
?>
</body>
</html>

Read More

Tutorial mendesain web menggunakan 960.gs

Belajar Mengenai Sistem grid 960.gs dalam membuat Desain Web .

Bagi yang belum tahu apa itu 960gs mungkin perlu baca dulu tulisan Membuat Website Lebih Cepat Menggunakan CSS Framework. Banyak sekali CSS Framework yang kesemuanya sebenarnya mudah digunakan untuk proyek pembuatan website kita, selain ke-16 yang ada di link di atas sekarang sudah mulai banyak bermunculan css grid baru.
Setelah saya paham memang sangat-sangat-sangat membuat pekerjaan saya lebih cepat dari biasanya. Oke kita langsung saja. Persiapan
960gs ini bagusnya sudah menyediakan template PSD untuk memudahkan kita dalam mendesain di Photoshop yang nantinya menggunakan 960gs untuk html/css-nya, silahkan unduh templatenya disini Template 960gs Disitu sudah tersedia template untuk Photoshop, illustrator dll.

Persiapan

960gs ini bagusnya sudah menyediakan template PSD untuk memudahkan kita dalam mendesain di Photoshop yang nantinya menggunakan 960gs untuk html/css-nya, silahkan unduh templatenya disini Template 960gs Disitu sudah tersedia template untuk Photoshop, illustrator dll.

960gs

Contoh Kasus

Kita akan membuat tampilan website seperti gambar dibawah ini

layout yang sederhana sebagai awal pembelajaran kita

Kita persiapkan dulu beberapa file yang diperlukan untuk membuat tampilan seperti diatas

Pada folder 960gs itu terdapat 3 file yaitu : reset.css, text,css, dan 960.css. Disini kita menggunakan yang 16 Grid, maksudnya adalah 960 dibagi kedalam 16 grid, lihat gambar (ada 16 garis disitu)

Pengenalan Kode 960gs

Perlu diketahui dulu kode-kode yang ada di 960gs tersebut :

container_12 atau container_16 atau container_24
ini dipakai sebagai batas dari konten, seperti yang saya bilang diatas bahwa container_12 artinya 960px dibagi kedalam 12 grid, dst.

grid_1, grid_2, … dst.
kode ini adalah kode untuk gridnya, misalkan kita mau buat 4 grid kita tinggal tulis grid_4 dst.

alpha & omega
alpha dimana kondisi margin-left dibuat 0, dan omega margin-right = 0, kenapa begitu? karena setiap grid_1 itu mengandung margin-right & margin-left sebesar 10px, gunanya untuk memberikan ruang de kiri-kanan agar ada space (longgar)

prefix_1, prefix_2, … dan suffix_1, suffix-2, …
prefix_1 adalah dimana dibagian kiri diberikan nilai padding (padding-left), prefix_1 artinya nilai paddingnya sama dengan grid 1. kalau suffix_1 adalah kebalikan dari prefix_1 dimana padding yang ditambahkan adalah untuk sebelah kanan (padding-right)

push_1, push_2, … dan pull_1, pull_2, ….
push_1 artinya memberikan dorongan untuk left dengan nilai positif, sedangkan pull_1 memberikan dorongan dengan nilai negatif.

clear
meng-clear-kan baris selanjutnya : clear : both

Implementasi

Sekarang kita akan masuk dalam tahap koding. Pada file index.html kita panggil dulu 960gs & style.css

Read More