Untuk kali ini admin akan membahas tentang cara membuat form emoticon dengan PHP. Tentu anda-anda semua pasti sudah kenal dengan apa itu namanya emoticon.
Yap, emoticon kan sering berada di kehidupan kita pada saat chatting , posting atau pun kirim email, jadi kalo kalian tidak tau itu sungguh terlalu :D
Sebenernya membuat emoticon itu mudah loh kawan-kawan, kita itu tinggal mengimplementasikan array, kemudian kita memanfaatkan fungsi str_replace(), untuk menghindari ketidaksesuaian karakter dan icon.
Oke langsung saja kita ke pokok pembahasannya.
1. Langkah pertama anda silahkan buat file dengan nama index.php, dan setelah anda membuat file index.php selanjutnya silahkan masukkan code berikut ke dalam file index.php, pada code itu juga admin sudah memberikan komentar-komentar agar kalian bisa mengerti.
Oke langsung saja kita ke pokok pembahasannya.
1. Langkah pertama anda silahkan buat file dengan nama index.php, dan setelah anda membuat file index.php selanjutnya silahkan masukkan code berikut ke dalam file index.php, pada code itu juga admin sudah memberikan komentar-komentar agar kalian bisa mengerti.
<?php
//Pendefinisian karakter dan icon
$icons = array(
':)' => "<img src='img/smile.png' />",
':(' => "<img src='img/sad.png' />",
':D' => "<img src='img/biggrin.png' />",
':8' => "<img src='img/cool.png' />",
":'(" => "<img src='img/cry.png' />",
':*' => "<img src='img/kiss.png' />",
':p' => "<img src='img/lel.png' />",
';)' => "<img src='img/wink.png' />",
);
?>
<html>
<head>
<title>Cara membuat form smile dengan PHP</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='style.css' />
<!-- Untuk memanggil karakter icon dan dipindahkan ke dalam kolom message -->
<script type='text/javascript'>
function setIcon(icon) {
document.post.msg.value = document.post.msg.value + icon;
}
</script>
</head>
<body>
<div class='message'>
<h2>Click to add Icon</h2>
<!-- Syntax untuk menambahkan smile -->
<div class='icon'>
<?php foreach ($icons as $key => $val) { ?>
<a href="javascript:setIcon('<?php echo $key; ?>')" title="<?php echo $key; ?>"><?php echo $val; ?></a>
<?php } ?>
</div>
<form action="" method='POST' name='post'>
<textarea name='msg' rows='10' cols='40' placeholder='Your message ...'></textarea><br><br>
<input type='submit' name='submit' value='Send' />
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['submit'])) {
$msg = $_POST['msg'];
$msg = htmlspecialchars(trim(stripslashes($msg)));
$msg = str_replace(array_keys($icons), array_values($icons), $msg);
$msg = nl2br($msg);
?>
<div class='content'>
<div class='people'>
<img src='img/people.jpg'>
</div>
<div class='msg'>
<p><?php echo $msg; ?></p>
</div>
</div>
<?php } ?>
2. Setelah anda memasukkan code diatas ke dalam file index.php, selanjutnya anda silahkan buat file style.css untuk merubah tampilannya agar seperti yang di gambar, biar terlihat bagus :D. Dan masukkan code berikut.//Pendefinisian karakter dan icon
$icons = array(
':)' => "<img src='img/smile.png' />",
':(' => "<img src='img/sad.png' />",
':D' => "<img src='img/biggrin.png' />",
':8' => "<img src='img/cool.png' />",
":'(" => "<img src='img/cry.png' />",
':*' => "<img src='img/kiss.png' />",
':p' => "<img src='img/lel.png' />",
';)' => "<img src='img/wink.png' />",
);
?>
<html>
<head>
<title>Cara membuat form smile dengan PHP</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='style.css' />
<!-- Untuk memanggil karakter icon dan dipindahkan ke dalam kolom message -->
<script type='text/javascript'>
function setIcon(icon) {
document.post.msg.value = document.post.msg.value + icon;
}
</script>
</head>
<body>
<div class='message'>
<h2>Click to add Icon</h2>
<!-- Syntax untuk menambahkan smile -->
<div class='icon'>
<?php foreach ($icons as $key => $val) { ?>
<a href="javascript:setIcon('<?php echo $key; ?>')" title="<?php echo $key; ?>"><?php echo $val; ?></a>
<?php } ?>
</div>
<form action="" method='POST' name='post'>
<textarea name='msg' rows='10' cols='40' placeholder='Your message ...'></textarea><br><br>
<input type='submit' name='submit' value='Send' />
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['submit'])) {
$msg = $_POST['msg'];
$msg = htmlspecialchars(trim(stripslashes($msg)));
$msg = str_replace(array_keys($icons), array_values($icons), $msg);
$msg = nl2br($msg);
?>
<div class='content'>
<div class='people'>
<img src='img/people.jpg'>
</div>
<div class='msg'>
<p><?php echo $msg; ?></p>
</div>
</div>
<?php } ?>
body {
margin: 0;
padding: 0;
background: #34495e;
font-family: 'Open Sans', sans-serif;
}
.message {
width: 500px;
margin: 50px auto;
}
.message h2 {
text-align: center;
color: #fff;
font-weight: 300;
padding: 4px 6px;
}
.icon {
padding: 4px 6px;
background: #fff;
border-radius: 3px;
margin-bottom: 20px;
}
form textarea {
width: 100%;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 8px;
}
form input {
float: right;
padding: 6px 15px;
font-size: 16px;
background:#2c3e50;
color: #fff;
border: 2px solid #fff;
border-radius: 3px;
transition: 0.5s;
}
form input:hover {
transform: scale(0.95);
cursor: pointer;
}
.content {
margin: 20px auto;
width: 500px;
}
.content .people {
width: 80px;
height: 200px;
float: left;
background: #34495e;
display: block;
}
.people img {
width: 60px;
border-radius: 99em;
}
.msg p{
background: #fff;
padding: 4px 8px;
padding-left: 90px;
font-size: 12px;
color: #333;
border-radius: 3px;
}
Dan selesai sudah tutorial kali ini mudah bukan :D cara membuatnya berikut tampilannya juga loh bonus admin kasih biar keliatan Dewa Coding nya hehe
Untuk Source Code nya bisa di download Disini / Here
Terima kasih yah telah mengunjungi blog kami. Jangan lupa berkomentar :D
Cara membuat form Emoticon dengan PHP
4/
5
Oleh
Unknown
