.

Tidak ada komentar BYAdmin Ilmuwebsite

Sering kita temukan website yang menyediakan smilies seperti gambar diatas (biasanya pada website forum dan guest book). Smilies berfungsi untuk menampilkan ekspresi muka dari setiap perkataan yang diberikan. Sebenarnya cara untuk membuat Smilies sangatlah mudah.

Tutorial Premium Mahir Web Development Membangun 5 (jenis) Project Website + Mahir Membuat Aplikasi Android (4 Project + Upload Playstore)

Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)


Pertama-tama buat databasenya terlebih dahulu untuk menyimpan nama dan komentar.

 

CREATE DATABASE komentar ;

CREATE TABLE komentar.comment (
? nama VARCHAR( 30 ) NOT NULL ,
? comment TEXT NOT NULL
? ) ENGINE = MYISAM

Setelah selesai membuat databasenya, sekarang kita buat file script kodenya. Perlu diingat, gambar smilies harus disiapkan terlebih dahulu. Buat 5 gambar smilies seperti diatas dan berikan nama sad.png, smile.png, tongue.png, wink.png, dan yang terakhir yikes.png.

config.php

<?php
class config {
public $host = “localhost”;
public $user = “root”;
public $pass = “”;
public $db = “komentar”;
function config () {
$this->connect = mysql_connect($this->host,$this->user,$this->pass);
$this->db = mysql_select_db($this->db);
if(!$this->connect)
{
print “Koneksi ke database gagal…!!!<br><br>”;
}
if(!$this->db)
{
print “Database belum ada…!!!<br><br>”;
}
} // end function
} // end class
$config = new config();
?>

Index.php

<?php
include(“config.php”);
class simpan extends config {
function simpan () {
if($_GET[‘comment’] == “do”)
{
$nama = $_POST[‘nama’];
$comment = $_POST[‘comment’];
// mengganti text menjadi smilies
$comment = str_replace(“;)”,”<img src=wink.png>”,$comment);
$comment = str_replace(“:)”,”<img src=smile.png>”,$comment);
$comment = str_replace(“:(“,”<img src=sad.png>”,$comment);
$comment = str_replace(“:p”,”<img src=tongue.png>”,$comment);
$comment = str_replace(“:o”,”<img src=yikes.png>”,$comment);
header(“Location: index.php”);
$this->query = mysql_query(“INSERT INTO comment (nama,comment) values (‘$nama’,’$comment’)”);
}
}
}
class tampil extends config {
function query () {
$this->query = mysql_query(“SELECT * FROM comment”);
}
function tampil_data () {
while($this->run_query = mysql_fetch_array($this->query))
{
print “Nama : “.$this->run_query[‘nama’].” <br>”;
print “Komentar : “.$this->run_query[‘comment’].” <br><br><br>”;
}
}
}
$simpan = new simpan();
$tampil = new tampil();
$tampil->query();
$tampil->tampil_data();
?>
<script>
function gantiText(text, textarea)
{
textarea.value += text;
textarea.focus(textarea.value.length – 1);
}
</script>
<form action=”?comment=do” method=”post” name=”smilies” id=”smilies”>
<p> <strong>Nama :<br>
<input name=”nama” type=”text” id=”nama” size=”30″ maxlength=”30″>
<br> <br>
Komentar anda :</strong><br>
<br>
<a href=”javascript:void(0);” onclick=”gantiText(‘;)’, document.smilies.comment);”><img src=”wink.png” width=”15″ height=”15″ border=”0″ /></a> <a href=”javascript:void(0);” onclick=”gantiText(‘:(‘, document.smilies.comment);”><img src=”sad.png” width=”15″ height=”15″ border=”0″ /></a> <a href=”javascript:void(0);” onclick=”gantiText(‘:)’, document.smilies.comment);”><img src=”smile.png” width=”15″ height=”15″ border=”0″ /></a> <a href=”javascript:void(0);” onclick=”gantiText(‘:p’, document.smilies.comment);”><img src=”tongue.png” width=”15″ height=”15″ border=”0″ /></a> <a href=”javascript:void(0);” onclick=”gantiText(‘:o’, document.smilies.comment);”><img src=”yikes.png” width=”15″ height=”15″ border=”0″ /></a><br>
<br>
<textarea name=”comment” cols=”50″ rows=”6″ id=”comment”></textarea>
</p> <p>
<input type=”submit” name=”Submit” value=”Simpan”>
</p>
</form>

Sedikit Penjelasan kode diatas :

Pada config.php, digunakan class config. Fungsinya untuk mengkoneksikan database. Lalu Perhatikan pada bagian class simpan. Terdapat perintah str_replace yang berfungsi agar mengganti kata semisal :) menjadi <img src=smile.png>. Kata tersebut harus diganti agar pada saat komentar tersimpan, yang ditampilkan adalah gambar smilies. Bukan :). Untuk lebih memudahkan, pembaca sekalian dapat mendownload source kodenya?Disini

Yah, sekian dulu lah penjelasan dari saya. Jika ada yang ingin ditanyakan, silahkan menghubungi saya di

Email 1 :? ivan@ilmuwebsite.com
Email 2 : ivan_wen_piao@yahoo.co.id
web : http://ivan.ilmuwebsite.com

No Responses

eXTReMe Tracker