Membuat Shoutbox Untuk Situs Grabber Mp3 atau Video

16 May 2016 02:30 • Post By

Membuat Shoutbox Untuk Situs Grabber Mp3 atau Video

Dalam membuat shoutbox atau guestbook tanpa database pada web grabber sangatlah mudah apalagi buat anda yang memakai situs grabber mp3 atau grabber video dari youtube mungkin ada kalanya untuk memasang halaman contact, supaya visitor agan bisa menghubungi anda lebih mudah.

Terus caranya gimana donk?
Sangat mudah melainkan hal ini tanpa perlu capek-capek kamu membuatnya, karena sudah saya atur sedemikian rupa untuk bisa langsung kalian gunakan pada situs anda.

Disini saya membuatnya tanpa sedikitpun mencampur script php dengan mysql database, lebih simple bukan.. karena biar lebih irit biaya+irit copi pastenya hahaha..

Ok berikut cara membuatnya bisa langsung anda praktekan sendiri.

Buka notepad anda kemudian buat file dengan nama index.php kemudian isi script berikut ini :

<html>
    <head>
        <title>Contact Us Tutorialku.net</title>
        <link rel='stylesheet' href='style.css'/>
        <style>body { max-width: 500px; margin: auto; }</style>
    </head>
    <body>
    
        <div class='title' align='center'>
            <big>Contact Us Tutorialku.net</big><br/>
            by: <a href='http://www.tutorialku.net'>tutorialku.net</a>
        </div>

        <div class='gmenu'>
            <form action='post.php' method='post'>
                Nama : <input type='text' name='nama'/> <br/>
                Web : <input type='text' name='web' value='http://'/> <br/>
                Pesan : <input type='text' name='pesan'/> <br/>
                <input type='submit' value='kirim'/>
            </form>
        </div>
        
        <div class='maintxt'>
            <?php

                if(file_exists("db.html") && filesize("db.html") > 0){
                    $handle = fopen("db.html", "r");
                    $contents = fread($handle, filesize("db.html"));
                    fclose($handle);
                    
                    echo "$contents";
                }
                else {
                    echo "<div class='alarm'>no messages!<br/>be the first!</div>";
                }

            ?>
        </div>
        
        <div class='footer' align='center'>
            Copyright &copy; <a href='http://www.tutorialku.net'>tutorialku.net</a> 2016
        </div>
    
    </body>
</html>

Kemudian untuk mengisi hasil input nama, web dan isi pesan buatlah file lagi di notepad dengan nama post.php lalu isi script dibawah ini :

<?php

    if(!empty($_POST['nama']) AND !empty($_POST['pesan'])) {
        $nama = $_POST['nama'];
        if($_POST['web'] != 'http://' OR !empty($_POST['web'])) { $web = $_POST['web']; } else { $web = "#"; }
        $pesan = $_POST['pesan'];
        $tgl = date('D, d M Y - H:i:s');
        $text = stripslashes(htmlspecialchars($pesan));
        
        $l = rand(1,2);

        $fp = fopen("db.html", 'a');
        fwrite($fp, "<div class='list$l'><div class='hr'><div align='right'>$tgl</div></div> <a href='$web'><b>$nama</b></a> : $text </div>");
        fclose($fp);
    }
    
    header('location:index.php');
    
?>

Ketiga ialah buat file kosong dengan nama db.html dimana file ini untuk menyimpan hasil input shoutbox tadi.

Biarkan kosong saja vroh

Yang terakhir buat file css dengan nama style.css untuk men-desain shoutboxnya agar terlihat ganteng kyak ane hihihi, lalu isi dengan code css berikut :

body {
    color: #787878;
    font-size: 11px;
    font-family: Tahoma;
    margin: auto;
    border: 1px solid #e1e1e1;
    max-width: 500px;
    }
a, a:link, a:visited {
    color: #00bae8;
    text-decoration: none;
    }
input, textarea, select , button{
    color: #6d6d6d;
    background-color: #fbfbfb;
    border: 1px solid #e3e3e3;
    margin: 1px;
    }
hr, div.hr {
    margin-top: 2px;
    margin-bottom: 2px;
    border-bottom: 1px dotted #e3e3e3;
    border-right-style: none;
    border-right-width: 0;
    border-top-style: none;
    border-top-width: 0;
    border-left-style: none;
    border-left-width: 0;
    }
.title {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    text-shadow: #000000 1px 1px 1px;
    background-color: #84e2f8;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #68e1ff;
    }
.gmenu {
    color: #75bf00;
    background-color: #fafff0;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #d4eba1;
    }
.gmenu a {
    color: #6db900;
    border-bottom: 1px dotted#cfe798;
    }
.footer{
    color: #ffffff;
    text-shadow: #45cdf5 1px 1px 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #68e1ff;
    background-color: #84e2f8;
    }
.footer a {
    color: #fe8f17;
    text-decoration: none;
    border-bottom: 1px dotted #979797;
    }
.list1 {
    background-color: #f6f6f6;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #e7e7e7;
    }
.list2 {
    background-color: #fdfdfd;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #ececec;
    }
.maintxt {
    padding-right: 1px;
    padding-left: 1px;
    border: 1px solid #dadada;
    }
.alarm {
    color: #fd4646;
    background-color: #fff0f0;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid #ffd0d0;
    }

Dan nanti hasilnya kurang lebih seperti gambar dibawah ini.

Membuat Shoutbox Untuk Situs Grabber Mp3 atau Video


Nah cukup mudah bukan, pasti kamu bisa membuatnya.. namun kalo ada kendala yang kurang dipahami bisa bertanya kepada saya di kolom komentar yang sudah tutorialku.net sediakan.

Sekian dari saya semoga bermanfaat..

Jangan lupa Subscribe ya !!

Membuat Shoutbox Untuk Situs Grabber Mp3 atau Video | Tutorialku.Net | 4.5