Home > Menengah > Web Development > Tutorial PHP > Membuat Smilies

.

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.

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

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

eXTReMe Tracker