How To Create Livechat Form Or Widget Using PHP-MySQL

What Will I Learn?

You will learn how to create simple form
You will learn how to create livechat action on you web page
You will learn how to connect PHP with MySQL

Requirements

you must understand basic of php programming
you must understand CSS desain
you must understand basic of SQL query

Difficulty

Intermediate

Tutorial Contents

live chat form is a form that is very widely used on websites such as online gambling websites, websites for downloading applications, website frequently asked question,etc. this time I will share tutorial how to make a live chat form which connected to database.

the first step you should do is create a database via MySQL database.
then create a table, you can create via query, and also through the MySQL GUI.
type the query below in the SQL column.

CREATE TABLE  `widget`.`chat` (
`nama` VARCHAR( 20 ) NOT NULL ,
`email` VARCHAR( 20 ) NOT NULL ,
`komen` VARCHAR( 30 ) NOT NULL ,
`waktu` VARCHAR( 30 ) NOT NULL ,
`chat` VARCHAR( 30 ) NOT NULL
)

then we will create a form. paste the script below then save it with the name index.php

FULL SCRIPT

<div style="overflow:auto; width:31%; height:321px; margin-left:35%;margin-right:36%;">
    <table class="art-article" border="1" cellspacing="1" cellpadding="1" style=" margin: 1; width: 100%;">
        <tbody>
        <body background="BACK.jpg">
            <?php
            $Open = mysql_connect("localhost","root","");
                if (!$Open){
                    die ("MySQL E !
");
                }
            $Koneksi = mysql_select_db("widget");
                if (!$Koneksi){
                    die ("DBase E !");
                }
            $Tampil="SELECT * FROM chat ORDER BY waktu DESC LIMIT 99;";
            $query = mysql_query($Tampil);
            while ( $hasil = mysql_fetch_array ($query)) {
                $komen = stripslashes ($hasil['komen']);
                $waktu = stripslashes ($hasil['waktu']);
                $nama = stripslashes ($hasil['nama']);  ?>  
            <style type="text/css">
                #atas {border-bottom-width: 1px;
                    border-bottom-style: ridge;
                    border-bottom-color: #HAC;
                    margin-right: 1px;
                    margin-bottom: 2px;
                    margin-left: 0px;
                    padding-bottom: 1px;
                    color: #FFA500;}
                #pesan {padding-right: 1px;
                    padding-left: 0px;
                    margin-bottom: 10px;
                    color: #080808;}
                .waktu {float: right;
                    color: #871214;
                    font-family: Arial;
                    font-size: 9px;}
            </style>
            <?php
            echo"
                $hasil[nama]$hasil[waktu]
                $hasil[komen]
";}
            ?>
        </tbody>
    </table>  
</div><br>
<div style="width:30%; height:320px; margin-left:35%;margin-right:35%;">
    <form method="POST" name="chat" action="#" enctype="application/x-www-form-urlencoded"><p>Post your chat:</p>
Name</p><input type="text" placeholder="enter your name" name="nama" maxlength="9" style="width: 95%;"></input>

Email</p><input type="text" placeholder=" enter your Email" name="email" maxlength="30" style="width: 95%;"></input>

Chat</p><textarea placeholder=" your chat" name="komen" rows="2" cols="40" maxlength="120" style="width: 95%;"></textarea>

 Confirm you are NOT robot</input><br><br><input type="submit" name="submit" value="Send" class="art-button"></input> </input>
    <?php
        if (isset($_POST['submit'])) {
        $nama   = $_POST['nama'];
        $email  = $_POST['email'];
        $komen  = $_POST['komen'];
        $waktu  = date ("Y-m-d, H:i a");
        $cek    = $_POST['cek'];
        if ($_POST['nama']=='Admin') { 
    ?>
        <script language="JavaScript">
            alert('you are not admin !');
                document.location='index.php';
        </script>
    <?php
        mysql_close($Open);
    }
        if (empty($_POST['nama'])|| empty($_POST['email']) || empty($_POST['komen'])) {
    ?>
        <script language="JavaScript">
            alert('data is not complete !');
                document.location='index.php';
            </script>
    <?php
    }
        if (empty($_POST['cek'])) { 
    ?>
        <script language="JavaScript">
            alert('Please Checklist - Confirm you are NOT robot !');
                document.location='index.php';
        </script>
    <?php
    }
    else {
        $input_chat = "INSERT INTO chat (nama, email, komen, waktu, cek) VALUES ('$nama', '$email', '$komen', '$waktu', '$cek')";
        $query_input =mysql_query($input_chat);
        if ($query_input) {?>
        <script language="JavaScript">
            document.location='index.php';
        </script>
    <?php
    }
    else{
        echo'Dbase E';}}}
    mysql_close($Open);?>
    </form>
</div>

okay, I'll explain the usefulness of the script above.
this is the part for database connection with php form. customize it with your database name.

    mysql_close($Open);
    }
        if (empty($_POST['nama'])|| empty($_POST['email']) || empty($_POST['komen'])) {
    ?>
        <script language="JavaScript">
            alert('data is not complete !');
                document.location='index.php';

then this is the part that serves to display messages that have been stored to the database on the form menngunakan query select

$Tampil="SELECT * FROM chat ORDER BY waktu DESC LIMIT 99;";
            $query = mysql_query($Tampil);
            while ( $hasil = mysql_fetch_array ($query)) {
                $komen = stripslashes ($hasil['komen']);
                $waktu = stripslashes ($hasil['waktu']);
                $nama = stripslashes ($hasil['nama']);  ?>

then this is a script that works for the design of the form using CSS script.

<style type="text/css">
                #atas {border-bottom-width: 1px;
                    border-bottom-style: ridge;
                    border-bottom-color: #CCC;
                    margin-top: 1px;
                    margin-right: 1px;
                    margin-bottom: 2px;
                    margin-left: 0px;
                    padding-bottom: 1px;
                    color: #FFA500;}
                #pesan {padding-right: 1px;
                    padding-left: 0px;
                    margin-bottom: 10px;
                    color: #080808;}
                .waktu {float: right;
                    color: #871214;
                    font-family: Arial;
                    font-size: 9px;}
            </style>

and this is the part to define the variable and ukurang layout of the form.

<div style="width:30%; height:320px; margin-left:35%;margin-right:35%;">
    <form method="POST" name="chat" action="#" enctype="application/x-www-form-urlencoded"><p>Post your chat:</p>
Name</p><input type="text" placeholder="enter your name" name="nama" maxlength="9" style="width: 95%;"></input>

Email</p><input type="text" placeholder=" enter your Email" name="email" maxlength="30" style="width: 95%;"></input>

Chat</p><textarea placeholder=" your chat" name="komen" rows="2" cols="40" maxlength="120" style="width: 95%;"></textarea>

 Confirm you are NOT robot</input><br><br><input type="submit" name="submit" value="Send" class="art-button"></input> </input>

do not forget to save the index.php file in the xampp / htdocs / folder_name folder as shown below.
now we try to run the index.php file
write the filename in your browser search field as shown below.
then we try to fill in the form and press the submit button.
it will look like this.
then we see whether the chats that have been sent are saved to the database.

Okay, the message has been saved to the database

Okay, the tutorial has been completed, please try, if there is less understandable can be directly asked in the comments.

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors