Mengobrol di php dan mysql

Hai teman-teman, hari ini di blog ini Anda akan belajar cara membuat Aplikasi Web Obrolan menggunakan PHP dengan MySQL & JavaScript. Sebelumnya saya telah membagikan blog tentang cara membuat Chatbot Sederhana menggunakan PHP dengan MySQL & jQuery Ajax. Pemirsa maksimum kami telah meminta saya untuk membuat Aplikasi Obrolan, jadi saya memutuskan untuk membuatnya

Pada aplikasi chat ini, saat pertama kali dibuka di browser, akan muncul form pendaftaran dimana Anda harus mendaftar dengan detail seperti nama, email, password, dan gambar. Bidang email dan gambar sepenuhnya divalidasi yang berarti Anda harus memasukkan email yang valid dan file gambar saja. Setelah berhasil mendaftar, Anda akan dialihkan ke halaman pengguna tempat Anda dapat melihat nama lengkap, gambar, status, dan tombol keluar di bagian atas, dan pengguna, seperti Anda, muncul di bagian bawah jika seseorang telah mendaftar

Di halaman ini, Anda dapat melihat gambar, nama, status, dan pesan terakhir mereka jika dikirimkan kepada Anda. Anda harus mengklik pengguna tertentu atau Anda juga dapat mencari pengguna yang ada dengan nama mereka kemudian Anda akan diarahkan ke halaman obrolan dan di sana Anda dapat melihat gambar, nama, status pengguna yang akan mengobrol

Setelah Anda mengirim pesan ke pengguna lain maka segera pesan itu muncul di kotak obrolan Anda dan juga kotak obrolan pengguna lain yang telah Anda kirimi pesan. Di kotak obrolan penerima pesan, pengguna ini menerima pesan dengan gambar pengirim. Ingat kotak obrolan akan otomatis digulir ke bawah setelah kotak obrolan mulai bergulir. Anda dapat keluar dari aplikasi obrolan kapan saja dan begitu Anda keluar, semua pengguna lain akan segera tahu bahwa Anda telah keluar atau offline

Setelah Anda keluar, Anda dapat masuk lagi dan dengan email dan kata sandi yang Anda gunakan saat mendaftar untuk formulir. Jika Anda memasukkan kredensial yang benar maka Anda akan dialihkan ke halaman pengguna dan semua pengguna lain akan segera mengetahui bahwa Anda telah masuk dan sekarang aktif

Video Tutorial Aplikasi Chat di PHP dan MySQL

 
Dalam video tersebut, Anda telah melihat demo aplikasi obrolan di PHP dan MySQL dan kode atau konsep di balik pembuatan aplikasi obrolan. Seperti yang sudah saya katakan, saya menggunakan PHP dengan MySQL dan JavaScript murni Ajax untuk membuat aplikasi obrolan ini sehingga Anda tidak perlu memuat ulang halaman untuk melihat perubahan pada aplikasi obrolan. Saya tahu jika Anda seorang pemula dan Anda tidak memiliki pengetahuan yang cukup tentang PHP maka pasti Anda akan kesulitan untuk memahami kode-kodenya.

Tapi saya mencoba menjelaskan setiap baris JavaScript dan PHP dengan komentar, subtitle, dll. Tapi jangan khawatir saya telah menyediakan file kode sumber dari aplikasi obrolan ini sehingga Anda dapat dengan mudah mengunduh dari tombol unduh yang diberikan dan mencoba menganalisis, mempraktikkan kode untuk memahami dengan lebih baik. Dan saya tahu, masih banyak fitur lain yang terlewatkan pada aplikasi chat ini tapi untuk saat ini, saya rasa sudah lebih dari cukup untuk latihan.

Anda mungkin menyukai ini

  • Formulir Berlangganan Email hanya dalam PHP
  • Chatbot menggunakan PHP dengan MySQL & jQuery
  • Login & Formulir Pendaftaran dengan Verifikasi Email
  • Cara Mengirim Email dari Localhost menggunakan XAMPP

Aplikasi Web Obrolan menggunakan PHP [Source Codes]

Bagaimana cara mengunduh file kode sumber dan apa yang harus dilakukan setelah mengunduhnya?

Langkah. – Untuk mengunduh file, cukup klik tombol unduh yang diberikan kemudian penghitung waktu 60 detik akan dimulai, tunggu saja penghitung waktu. Setelah penghitung waktu selesai maka file zip akan diunduh secara otomatis. Setelah diunduh, ekstrak saja file zipnya lalu Anda akan melihat nama folder dengan ChatApp. Salin folder ini dan tempel di dalam folder htdocs XAMPP Anda, lalu mulai apache dan MySQL Anda dari panel kontrol XAMMP

Setelah menyelesaikan langkah-langkah ini, buka browser Anda dan buka URL ini localhost/phpmyadmin lalu buat nama database baru dengan chatapp. Setelah membuat database, di sana Anda dapat melihat opsi impor, cukup klik itu dan impor file SQL yang ada di folder ChatApp. Semuanya sudah selesai sekarang, buka saja URL localhost/chatapp ini. Aplikasi obrolan Anda siap untuk mengobrol

Jika Anda ingin mengunggah aplikasi obrolan ini ke server online secara gratis dan tidak tahu caranya?

Pada postingan kali ini, kita akan membangun Aplikasi Obrolan PHP dan Mysql sederhana menggunakan PHP Web Socket Ratchet. Jika Anda mencari Cara Membuat Aplikasi Live Chat atau Real Time Chat di PHP maka Anda berada di tempat yang tepat, karena pada postingan kali ini kami telah membagikan kepada Anda cara membuat Aplikasi Live Chat PHP dengan WebSockets. Dalam posting ini, kita akan membuat Aplikasi Obrolan di mana banyak pengguna dapat mengobrol dengan pengguna lain

Ini adalah posting yang sangat menarik tentang Cara membuat Aplikasi obrolan di PHP tanpa menggunakan Ajax. Pada salah satu postingan kami sebelumnya, kami telah memublikasikan tutorial aplikasi Chat di PHP menggunakan ajax. Namun Seperti yang telah kita ketahui dalam sistem Chat, aplikasi Chat berbasis Ajax di PHP bukanlah solusi terbaik, hal ini dikarenakan Ajax akan menambah beban pada server. Jadi untuk ini di sini kami telah menggunakan Ratchet PHP WebSockets untuk membangun aplikasi obrolan langsung waktu nyata di PHP dan di aplikasi obrolan ini kami akan menyimpan data obrolan di database Mysql ketika satu pengguna memposting obrolan di bawah sistem ini

Dari tutorial ini Anda tidak hanya dapat mempelajari cara membuat obrolan grup atau aplikasi obrolan multi-pengguna menggunakan perpustakaan Ratchet WebSocket, tetapi Anda juga dapat menemukan solusi ini dari satu ke satu atau satu pengguna atau aplikasi obrolan pribadi juga. Ini karena di bawah posting ini kami akan menggabungkan kode sumber sistem obrolan grup dan juga kode sumber tutorial aplikasi obrolan satu lawan satu. Jadi dari tutorial tunggal ini Anda dapat menemukan solusi untuk cara membuat sistem obrolan grup dan cara membangun aplikasi obrolan satu ke satu waktu nyata juga

Fitur Aplikasi Obrolan Grup


Di bawah aplikasi Obrolan Grup ini menggunakan soket Web Ratchet Anda bisa mendapatkan fitur berikut di bawah tutorial ini

  1. Setelah satu pengguna mengirim pesan obrolan, maka pengguna lain yang terhubung lainnya dapat menerima pesan obrolan menggunakan server klien Ratchet
  2. Status pengguna online atau Offline akan berubah setelah penyegaran halaman

Fitur Aplikasi Obrolan One to One


Di bawah aplikasi Obrolan Satu ke Satu atau Pengguna Tunggal atau Pribadi dengan perpustakaan Ratchet WebSocket Anda dapat menemukan fitur berikut di bawah tutorial ini

  1. Kirim Pesan Obrolan Satu ke Satu secara Real-time menggunakan Ratchet WebSocket Library
  2. Tampilkan atau Sembunyikan Notifikasi Pesan Belum Dibaca secara Real-time menggunakan Ratchet WebSocket Library
  3. Menampilkan Pengguna Online atau Offline Status secara Real-time menggunakan Ratchet WebSocket Library





Apa itu WebSockets?


WebSockets adalah bi-directional dan full-duplex yang menyediakan koneksi persisten dari web browser ke server kami. Jadi ketika koneksi WebSocket telah dibuat di browser kita, maka itu akan membuka koneksi sampai klien atau server memutuskan untuk menutup koneksi ini. Jadi dengan koneksi terbuka ini, pengguna atau server kami dapat mengirim atau menerima data obrolan pada waktu tertentu satu sama lain dan itu akan membuat pemrograman web kami sepenuhnya didorong oleh peristiwa dan bukan hanya pengguna yang memulai. Manfaat lain dari soket web ini adalah, pada saat yang sama pada satu server yang berjalan, ini akan menghubungkan semua koneksi dan memungkinkan kita untuk berkomunikasi dengan sejumlah koneksi langsung pada waktu tertentu. Jadi ini semua manfaat dari WebSockets ini dalam pemrograman Web ini

Berdasarkan manfaat ini, kami menggunakan PHP WebSockets seperti Ratchet untuk membangun Aplikasi Obrolan di PHP dan Mysql. Di bawah posting ini, kami akan mempelajari Anda langkah demi langkah bagaimana membangun Aplikasi Obrolan di PHP menggunakan WebSocket dari awal. Di bawah tutorial Pengembangan Web PHP ini, Anda dapat mempelajari bagaimana kami dapat dengan cepat membangun di Aplikasi Obrolan dengan RatChet menggunakan skrip PHP dan Database Mysql

Database Aplikasi Obrolan


Sebelum mempelajari aplikasi chat, terlebih dahulu Anda perlu membuat tabel untuk menyimpan data aplikasi chat di database Mysql. Jadi pertama-tama Anda perlu membuat tabel dengan menjalankan skrip SQL berikut, Anda dapat membuat tabel aplikasi obrolan di database mysql Anda



Unduh Kode Sumber



Database Aplikasi Obrolan


Sebelum mempelajari aplikasi chat, terlebih dahulu Anda perlu membuat tabel untuk menyimpan data aplikasi chat di database Mysql. Jadi pertama-tama Anda perlu membuat tabel dengan menjalankan skrip SQL berikut, Anda dapat membuat tabel aplikasi obrolan di database mysql Anda


--
-- Database: `chat`
--

-- --------------------------------------------------------

--
-- Table structure for table `chatrooms`
--

CREATE TABLE `chatrooms` (
  `id` int(11) NOT NULL,
  `userid` int(11) NOT NULL,
  `msg` varchar(200) NOT NULL,
  `created_on` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Table structure for table `chat_user_table`
--

CREATE TABLE `chat_user_table` (
  `user_id` int(11) NOT NULL,
  `user_name` varchar(250) NOT NULL,
  `user_email` varchar(250) NOT NULL,
  `user_password` varchar(100) NOT NULL,
  `user_profile` varchar(100) NOT NULL,
  `user_status` enum('Disabled','Enable') NOT NULL,
  `user_created_on` datetime NOT NULL,
  `user_verification_code` varchar(100) NOT NULL,
  `user_login_status` enum('Logout','Login') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `chatrooms`
--
ALTER TABLE `chatrooms`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `chat_user_table`
--
ALTER TABLE `chat_user_table`
  ADD PRIMARY KEY (`user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `chatrooms`
--
ALTER TABLE `chatrooms`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT for table `chat_user_table`
--
ALTER TABLE `chat_user_table`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;


Kode Sumber Aplikasi Obrolan PHP


Di bawah ini Anda dapat menemukan file kode Sumber Aplikasi Obrolan PHP

database/koneksi_database. php


File ini akan kita gunakan untuk membuat koneksi database di bawah aplikasi chatting ini


<?php

//Database_connection.php

class Database_connection
{
	function connect()
	{
		$connect = new PDO("mysql:host=localhost; dbname=chat", "root", "");

		return $connect;
	}
}

?>

_

basis data/Pengguna Obrolan. php


Pengguna Obrolan ini. File kelas php yang kami gunakan untuk memproses data pengguna di sisi server. Di bawah file kelas ini kami telah membuat set dan mendapatkan metode untuk data pengguna dan setelah ini kami telah membuat metode untuk memeriksa pengguna sudah mendaftar atau belum dan terakhir kami telah memasukkan data pengguna di tabel mysql


<?php

//ChatUser.php

class ChatUser
{
	private $user_id;
	private $user_name;
	private $user_email;
	private $user_password;
	private $user_profile;
	private $user_status;
	private $user_created_on;
	private $user_verification_code;
	private $user_login_status;
	public $connect;

	public function __construct()
	{
		require_once('Database_connection.php');

		$database_object = new Database_connection;

		$this->connect = $database_object->connect();
	}

	function setUserId($user_id)
	{
		$this->user_id = $user_id;
	}

	function getUserId()
	{
		return $this->user_id;
	}

	function setUserName($user_name)
	{
		$this->user_name = $user_name;
	}

	function getUserName()
	{
		return $this->user_name;
	}

	function setUserEmail($user_email)
	{
		$this->user_email = $user_email;
	}

	function getUserEmail()
	{
		return $this->user_email;
	}

	function setUserPassword($user_password)
	{
		$this->user_password = $user_password;
	}

	function getUserPassword()
	{
		return $this->user_password;
	}

	function setUserProfile($user_profile)
	{
		$this->user_profile = $user_profile;
	}

	function getUserProfile()
	{
		return $this->user_profile;
	}

	function setUserStatus($user_status)
	{
		$this->user_status = $user_status;
	}

	function getUserStatus()
	{
		return $this->user_status;
	}

	function setUserCreatedOn($user_created_on)
	{
		$this->user_created_on = $user_created_on;
	}

	function getUserCreatedOn()
	{
		return $this->user_created_on;
	}

	function setUserVerificationCode($user_verification_code)
	{
		$this->user_verification_code = $user_verification_code;
	}

	function getUserVerificationCode()
	{
		return $this->user_verification_code;
	}

	function setUserLoginStatus($user_login_status)
	{
		$this->user_login_status = $user_login_status;
	}

	function getUserLoginStatus()
	{
		return $this->user_login_status;
	}

	function make_avatar($character)
	{
	    $path = "images/". time() . ".png";
		$image = imagecreate(200, 200);
		$red = rand(0, 255);
		$green = rand(0, 255);
		$blue = rand(0, 255);
	    imagecolorallocate($image, $red, $green, $blue);  
	    $textcolor = imagecolorallocate($image, 255,255,255);

	    $font = dirname(__FILE__) . '/font/arial.ttf';

	    imagettftext($image, 100, 0, 55, 150, $textcolor, $font, $character);
	    imagepng($image, $path);
	    imagedestroy($image);
	    return $path;
	}

	function get_user_data_by_email()
	{
		$query = "
		SELECT * FROM chat_user_table 
		WHERE user_email = :user_email
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_email', $this->user_email);

		if($statement->execute())
		{
			$user_data = $statement->fetch(PDO::FETCH_ASSOC);
		}
		return $user_data;
	}

	function save_data()
	{
		$query = "
		INSERT INTO chat_user_table (user_name, user_email, user_password, user_profile, user_status, user_created_on, user_verification_code) 
		VALUES (:user_name, :user_email, :user_password, :user_profile, :user_status, :user_created_on, :user_verification_code)
		";
		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_name', $this->user_name);

		$statement->bindParam(':user_email', $this->user_email);

		$statement->bindParam(':user_password', $this->user_password);

		$statement->bindParam(':user_profile', $this->user_profile);

		$statement->bindParam(':user_status', $this->user_status);

		$statement->bindParam(':user_created_on', $this->user_created_on);

		$statement->bindParam(':user_verification_code', $this->user_verification_code);

		if($statement->execute())
		{
			return true;
		}
		else
		{
			return false;
		}
	}

	function is_valid_email_verification_code()
	{
		$query = "
		SELECT * FROM chat_user_table 
		WHERE user_verification_code = :user_verification_code
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_verification_code', $this->user_verification_code);

		$statement->execute();

		if($statement->rowCount() > 0)
		{
			return true;
		}
		else
		{
			return false;
		}
	}

	function enable_user_account()
	{
		$query = "
		UPDATE chat_user_table 
		SET user_status = :user_status 
		WHERE user_verification_code = :user_verification_code
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_status', $this->user_status);

		$statement->bindParam(':user_verification_code', $this->user_verification_code);

		if($statement->execute())
		{
			return true;
		}
		else
		{
			return false;
		}
	}

	function update_user_login_data()
	{
		$query = "
		UPDATE chat_user_table 
		SET user_login_status = :user_login_status 
		WHERE user_id = :user_id
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_login_status', $this->user_login_status);

		$statement->bindParam(':user_id', $this->user_id);

		if($statement->execute())
		{
			return true;
		}
		else
		{
			return false;
		}
	}

	function get_user_data_by_id()
	{
		$query = "
		SELECT * FROM chat_user_table 
		WHERE user_id = :user_id";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_id', $this->user_id);

		try
		{
			if($statement->execute())
			{
				$user_data = $statement->fetch(PDO::FETCH_ASSOC);
			}
			else
			{
				$user_data = array();
			}
		}
		catch (Exception $error)
		{
			echo $error->getMessage();
		}
		return $user_data;
	}

	function upload_image($user_profile)
	{
		$extension = explode('.', $user_profile['name']);
		$new_name = rand() . '.' . $extension[1];
		$destination = 'images/' . $new_name;
		move_uploaded_file($user_profile['tmp_name'], $destination);
		return $destination;
	}

	function update_data()
	{
		$query = "
		UPDATE chat_user_table 
		SET user_name = :user_name, 
		user_email = :user_email, 
		user_password = :user_password, 
		user_profile = :user_profile  
		WHERE user_id = :user_id
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':user_name', $this->user_name);

		$statement->bindParam(':user_email', $this->user_email);

		$statement->bindParam(':user_password', $this->user_password);

		$statement->bindParam(':user_profile', $this->user_profile);

		$statement->bindParam(':user_id', $this->user_id);

		if($statement->execute())
		{
			return true;
		}
		else
		{
			return false;
		}
	}

	function get_user_all_data()
	{
		$query = "
		SELECT * FROM chat_user_table 
		";

		$statement = $this->connect->prepare($query);

		$statement->execute();

		$data = $statement->fetchAll(PDO::FETCH_ASSOC);

		return $data;
	}

}



?>




database/ChatRoom. php


Class ini akan kita gunakan untuk operasi database data pesan chat. Di bawah kelas ini kita akan membuat fungsi set dan get untuk memproses data obrolan dari operasi terkait basis data. Dengan menggunakan kelas ini kita akan menyisipkan atau menyimpan pesan obrolan di database Mysql dan mengambil data obrolan dari database Mysql untuk ditampilkan di halaman web


<?php 
	
class ChatRooms
{
	private $chat_id;
	private $user_id;
	private $message;
	private $created_on;
	protected $connect;

	public function setChatId($chat_id)
	{
		$this->chat_id = $chat_id;
	}

	function getChatId()
	{
		return $this->chat_id;
	}

	function setUserId($user_id)
	{
		$this->user_id = $user_id;
	}

	function getUserId()
	{
		return $this->user_id;
	}

	function setMessage($message)
	{
		$this->message = $message;
	}

	function getMessage()
	{
		return $this->message;
	}

	function setCreatedOn($created_on)
	{
		$this->created_on = $created_on;
	}

	function getCreatedOn()
	{
		return $this->created_on;
	}

	public function __construct()
	{
		require_once("Database_connection.php");

		$database_object = new Database_connection;

		$this->connect = $database_object->connect();
	}

	function save_chat()
	{
		$query = "
		INSERT INTO chatrooms 
			(userid, msg, created_on) 
			VALUES (:userid, :msg, :created_on)
		";

		$statement = $this->connect->prepare($query);

		$statement->bindParam(':userid', $this->user_id);

		$statement->bindParam(':msg', $this->message);

		$statement->bindParam(':created_on', $this->created_on);

		$statement->execute();
	}

	function get_all_chat_data()
	{
		$query = "
		SELECT * FROM chatrooms 
			INNER JOIN chat_user_table 
			ON chat_user_table.user_id = chatrooms.userid 
			ORDER BY chatrooms.id ASC
		";

		$statement = $this->connect->prepare($query);

		$statement->execute();

		return $statement->fetchAll(PDO::FETCH_ASSOC);
	}
}
	
?>


daftar. php


File ini kami gunakan untuk mendapatkan registrasi pengguna aplikasi Chat. Pengguna dapat mendaftar dari halaman web ini


<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require 'vendor/autoload.php';

$error = '';

$success_message = '';

if(isset($_POST["register"]))
{
    session_start();

    if(isset($_SESSION['user_data']))
    {
        header('location:chatroom.php');
    }

    require_once('database/ChatUser.php');

    $user_object = new ChatUser;

    $user_object->setUserName($_POST['user_name']);

    $user_object->setUserEmail($_POST['user_email']);

    $user_object->setUserPassword($_POST['user_password']);

    $user_object->setUserProfile($user_object->make_avatar(strtoupper($_POST['user_name'][0])));

    $user_object->setUserStatus('Disabled');

    $user_object->setUserCreatedOn(date('Y-m-d H:i:s'));

    $user_object->setUserVerificationCode(md5(uniqid()));

    $user_data = $user_object->get_user_data_by_email();

    if(is_array($user_data) && count($user_data) > 0)
    {
        $error = 'This Email Already Register';
    }
    else
    {
        if($user_object->save_data())
        {

            $mail = new PHPMailer(true);

            $mail->isSMTP();

            $mail->Host = 'smtpout.secureserver.net';

            $mail->SMTPAuth = true;

            $mail->Username   = 'xxxxx';                     // SMTP username
            $mail->Password   = 'xxxxxx';

            $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;

            $mail->Port = 80;

            $mail->setFrom('[email protected]', 'Webslesson');

            $mail->addAddress($user_object->getUserEmail());

            $mail->isHTML(true);

            $mail->Subject = 'Registration Verification for Chat Application Demo';

            $mail->Body = '
            <p>Thank you for registering for Chat Application Demo.</p>
                <p>This is a verification email, please click the link to verify your email address.</p>
                <p><a href="http://localhost/tutorial/chat_application/verify.php?code='.$user_object->getUserVerificationCode().'">Click to Verify</a></p>
                <p>Thank you...</p>
            ';

            $mail->send();


            $success_message = 'Verification Email sent to ' . $user_object->getUserEmail() . ', so before login first verify your email';
        }
        else
        {
            $error = 'Something went wrong try again';
        }
    }

}


?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Register | PHP Chat Application using Websocket</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">

    <link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor-front/jquery/jquery.min.js"></script>
    <script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>

    <script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
</head>

<body>

    <div class="containter">
        <br />
        <br />
        <h1 class="text-center">Chat Application in PHP & MySql using WebSocket - Email Verification</h1>
        
        <div class="row justify-content-md-center">
            <div class="col col-md-4 mt-5">
                <?php
                if($error != '')
                {
                    echo '
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                      '.$error.'
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    ';
                }

                if($success_message != '')
                {
                    echo '
                    <div class="alert alert-success">
                    '.$success_message.'
                    </div>
                    ';
                }
                ?>
                <div class="card">
                    <div class="card-header">Register</div>
                    <div class="card-body">

                        <form method="post" id="register_form">

                            <div class="form-group">
                                <label>Enter Your Name</label>
                                <input type="text" name="user_name" id="user_name" class="form-control" data-parsley-pattern="/^[a-zA-Z\s]+$/" required />
                            </div>

                            <div class="form-group">
                                <label>Enter Your Email</label>
                                <input type="text" name="user_email" id="user_email" class="form-control" data-parsley-type="email" required />
                            </div>

                            <div class="form-group">
                                <label>Enter Your Password</label>
                                <input type="password" name="user_password" id="user_password" class="form-control" data-parsley-minlength="6" data-parsley-maxlength="12" data-parsley-pattern="^[a-zA-Z]+$" required />
                            </div>

                            <div class="form-group text-center">
                                <input type="submit" name="register" class="btn btn-success" value="Register" />
                            </div>

                        </form>
                        
                    </div>
                </div>
                
            </div>
        </div>
    </div>

</body>

</html>

<script>

$(document).ready(function(){

    $('#register_form').parsley();

});

</script>

_

indeks. php


Di bawah file ini kita akan membuat halaman login untuk aplikasi chatting ini



<?php

session_start();

$error = '';

if(isset($_SESSION['user_data']))
{
    header('location:chatroom.php');
}

if(isset($_POST['login']))
{
    require_once('database/ChatUser.php');

    $user_object = new ChatUser;

    $user_object->setUserEmail($_POST['user_email']);

    $user_data = $user_object->get_user_data_by_email();

    if(is_array($user_data) && count($user_data) > 0)
    {
        if($user_data['user_status'] == 'Enable')
        {
            if($user_data['user_password'] == $_POST['user_password'])
            {
                $user_object->setUserId($user_data['user_id']);
                $user_object->setUserLoginStatus('Login');

                if($user_object->update_user_login_data())
                {
                    $_SESSION['user_data'][$user_data['user_id']] = [
                        'id'    =>  $user_data['user_id'],
                        'name'  =>  $user_data['user_name'],
                        'profile'   =>  $user_data['user_profile']
                    ];

                    header('location:chatroom.php');

                }
            }
            else
            {
                $error = 'Wrong Password';
            }
        }
        else
        {
            $error = 'Please Verify Your Email Address';
        }
    }
    else
    {
        $error = 'Wrong Email Address';
    }
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login | PHP Chat Application using Websocket</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">

    <link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor-front/jquery/jquery.min.js"></script>
    <script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>

    <script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
</head>

<body>

    <div class="containter">
        <br />
        <br />
        <h1 class="text-center">Chat Application in PHP & MySql using WebSocket - Login</h1>
        <div class="row justify-content-md-center mt-5">
            
            <div class="col-md-4">
               <?php
               if(isset($_SESSION['success_message']))
               {
                    echo '
                    <div class="alert alert-success">
                    '.$_SESSION["success_message"] .'
                    </div>
                    ';
                    unset($_SESSION['success_message']);
               }

               if($error != '')
               {
                    echo '
                    <div class="alert alert-danger">
                    '.$error.'
                    </div>
                    ';
               }
               ?>
                <div class="card">
                    <div class="card-header">Login</div>
                    <div class="card-body">
                        <form method="post" id="login_form">
                            <div class="form-group">
                                <label>Enter Your Email Address</label>
                                <input type="text" name="user_email" id="user_email"  class="form-control" data-parsley-type="email" required />
                            </div>
                            <div class="form-group">
                                <label>Enter Your Password</label>
                                <input type="password" name="user_password" id="user_password" class="form-control" required />
                            </div>
                            <div class="form-group text-center">
                                <input type="submit" name="login" id="login" class="btn btn-primary" value="Login" />
                            </div>
                        </form>
                    </div>  
                </div>
            </div>
        </div>
    </div>

</body>

</html>

<script>

$(document).ready(function(){
    
    $('#login_form').parsley();
    
});

</script>


memeriksa. php


Kode sumber file ini akan memverifikasi alamat email pengguna dan akan mengaktifkan akun pengguna untuk masuk ke sistem obrolan


<?php

//verify.php

$error = '';

session_start();

if(isset($_GET['code']))
{
    require_once('database/ChatUser.php');

    $user_object = new ChatUser;

    $user_object->setUserVerificationCode($_GET['code']);

    if($user_object->is_valid_email_verification_code())
    {
        $user_object->setUserStatus('Enable');

        if($user_object->enable_user_account())
        {
            $_SESSION['success_message'] = 'Your Email Successfully verify, now you can login into this chat Application';

            header('location:index.php');
        }
        else
        {
            $error = 'Something went wrong try again....';
        }
    }
    else
    {
        $error = 'Something went wrong try again....';
    }
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Email Verify | PHP Chat Application using Websocket</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Bootstrap core JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

<body>

    <div class="containter">
        <br />
        <br />
        <h1 class="text-center">PHP Chat Application using Websocket</h1>
        
        <div class="row justify-content-md-center">
            <div class="col col-md-4 mt-5">
            	<div class="alert alert-danger">
            		<h2><?php echo $error; ?></h2>
            	</div>
            </div>
        </div>
    </div>
</body>

</html>

_

ruang obrolan. php


ruang obrolan ini. php hanya akan diakses oleh pengguna yang masuk, jadi setelah pengguna masuk ke aplikasi obrolan ini, sistem akan mengarahkan halaman ke ruang obrolan ini. php dan di bawah file ini kita akan membuat ruang obrolan, sehingga setiap pengguna dapat mengobrol satu sama lain. Di bawah halaman ini, pengguna dapat melihat gambar profil mereka dengan edit profil dan tautan tombol logout juga


<?php 
session_start();

if(!isset($_SESSION['user_data']))
{
	header('location:index.php');
}

require('database/ChatUser.php');

require('database/ChatRooms.php');

$chat_object = new ChatRooms;

$chat_data = $chat_object->get_all_chat_data();

$user_object = new ChatUser;

$user_data = $user_object->get_user_all_data();

?>

<!DOCTYPE html>
<html>
<head>
	<title>Chat application in php using web scocket programming</title>
	<!-- Bootstrap core CSS -->
    <link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">

    <link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor-front/jquery/jquery.min.js"></script>
    <script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>

    <script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
	<style type="text/css">
		html,
		body {
		  height: 100%;
		  width: 100%;
		  margin: 0;
		}
		#wrapper
		{
			display: flex;
		  	flex-flow: column;
		  	height: 100%;
		}
		#remaining
		{
			flex-grow : 1;
		}
		#messages {
			height: 200px;
			background: whitesmoke;
			overflow: auto;
		}
		#chat-room-frm {
			margin-top: 10px;
		}
		#user_list
		{
			height:450px;
			overflow-y: auto;
		}

		#messages_area
		{
			height: 650px;
			overflow-y: auto;
			background-color:#e6e6e6;
		}

	</style>
</head>
<body>
	<div class="container">
		<br />
        <h3 class="text-center">PHP Chat Application using Websocket - Display User with Online or Offline Status</h3>
        <br />
		<div class="row">
			
			<div class="col-lg-8">
				<div class="card">
					<div class="card-header"><h3>Chat Room</h3></div>
					<div class="card-body" id="messages_area">
					<?php
					foreach($chat_data as $chat)
					{
						if(isset($_SESSION['user_data'][$chat['userid']]))
						{
							$from = 'Me';
							$row_class = 'row justify-content-start';
							$background_class = 'text-dark alert-light';
						}
						else
						{
							$from = $chat['user_name'];
							$row_class = 'row justify-content-end';
							$background_class = 'alert-success';
						}

						echo '
						<div class="'.$row_class.'">
							<div class="col-sm-10">
								<div class="shadow-sm alert '.$background_class.'">
									<b>'.$from.' - </b>'.$chat["msg"].'
									<br />
									<div class="text-right">
										<small><i>'.$chat["created_on"].'</i></small>
									</div>
								</div>
							</div>
						</div>
						';
					}
					?>
					</div>
				</div>

				<form method="post" id="chat_form" data-parsley-errors-container="#validation_error">
					<div class="input-group mb-3">
						<textarea class="form-control" id="chat_message" name="chat_message" placeholder="Type Message Here" data-parsley-maxlength="1000" data-parsley-pattern="/^[a-zA-Z0-9\s]+$/" required></textarea>
						<div class="input-group-append">
							<button type="submit" name="send" id="send" class="btn btn-primary"><i class="fa fa-paper-plane"></i></button>
						</div>
					</div>
					<div id="validation_error"></div>
				</form>
			</div>
			<div class="col-lg-4">
				<?php

				$login_user_id = '';

				foreach($_SESSION['user_data'] as $key => $value)
				{
					$login_user_id = $value['id'];
				?>
				<input type="hidden" name="login_user_id" id="login_user_id" value="<?php echo $login_user_id; ?>" />
				<div class="mt-3 mb-3 text-center">
					<img src="<?php echo $value['profile']; ?>" width="150" class="img-fluid rounded-circle img-thumbnail" />
					<h3 class="mt-2"><?php echo $value['name']; ?></h3>
					<a href="profile.php" class="btn btn-secondary mt-2 mb-2">Edit</a>
					<input type="button" class="btn btn-primary mt-2 mb-2" name="logout" id="logout" value="Logout" />
				</div>
				<?php
				}
				?>

				<div class="card mt-3">
					<div class="card-header">User List</div>
					<div class="card-body" id="user_list">
						<div class="list-group list-group-flush">
						<?php
						if(count($user_data) > 0)
						{
							foreach($user_data as $key => $user)
							{
								$icon = '<i class="fa fa-circle text-danger"></i>';

								if($user['user_login_status'] == 'Login')
								{
									$icon = '<i class="fa fa-circle text-success"></i>';
								}

								if($user['user_id'] != $login_user_id)
								{
									echo '
									<a class="list-group-item list-group-item-action">
										<img src="'.$user["user_profile"].'" class="img-fluid rounded-circle img-thumbnail" width="50" />
										<span class="ml-1"><strong>'.$user["user_name"].'</strong></span>
										<span class="mt-2 float-right">'.$icon.'</span>
									</a>
									';
								}

							}
						}
						?>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	
	$(document).ready(function(){

		var conn = new WebSocket('ws://localhost:8080');
		conn.onopen = function(e) {
		    console.log("Connection established!");
		};

		conn.onmessage = function(e) {
		    console.log(e.data);

		    var data = JSON.parse(e.data);

		    var row_class = '';

		    var background_class = '';

		    if(data.from == 'Me')
		    {
		    	row_class = 'row justify-content-start';
		    	background_class = 'text-dark alert-light';
		    }
		    else
		    {
		    	row_class = 'row justify-content-end';
		    	background_class = 'alert-success';
		    }

		    var html_data = "<div class='"+row_class+"'><div class='col-sm-10'><div class='shadow-sm alert "+background_class+"'><b>"+data.from+" - </b>"+data.msg+"<br /><div class='text-right'><small><i>"+data.dt+"</i></small></div></div></div></div>";

		    $('#messages_area').append(html_data);

		    $("#chat_message").val("");
		};

		$('#chat_form').parsley();

		$('#messages_area').scrollTop($('#messages_area')[0].scrollHeight);

		$('#chat_form').on('submit', function(event){

			event.preventDefault();

			if($('#chat_form').parsley().isValid())
			{

				var user_id = $('#login_user_id').val();

				var message = $('#chat_message').val();

				var data = {
					userId : user_id,
					msg : message
				};

				conn.send(JSON.stringify(data));

				$('#messages_area').scrollTop($('#messages_area')[0].scrollHeight);

			}

		});
		
		$('#logout').click(function(){

			user_id = $('#login_user_id').val();

			$.ajax({
				url:"action.php",
				method:"POST",
				data:{user_id:user_id, action:'leave'},
				success:function(data)
				{
					var response = JSON.parse(data);

					if(response.status == 1)
					{
						conn.close();
						location = 'index.php';
					}
				}
			})

		});

	});
	
</script>
</html>



Mengobrol di php dan mysql





tindakan. php


File ini telah menerima permintaan ajax untuk logout pengguna dari aplikasi pengguna obrolan. Di bawah file ini, pertama-tama kita telah menghapus nilai variabel sesi dan kemudian setelah kita menghapus semua variabel sesi dan memberikan nilai status ke permintaan ajax dalam format json

Bagaimana cara membuat obrolan di PHP dan MySQL?

Buat Tabel Langsung yang Dapat Diedit dengan jQuery, PHP, dan MySQL. .
Langkah 1. Buat Tabel Database. .
Langkah 2. Login Pengguna Obrolan. .
Langkah3. Buat HTML Sistem Obrolan. .
Langkah4. Menangani Balasan Obrolan Pengguna. .
Langkah5. Perbarui Info daftar Pengguna Obrolan. .
Langkah6. Perbarui Detail Obrolan Pengguna Aktif. .
Langkah7. Perbarui Jumlah Pesan yang Belum Dibaca Pengguna. .
Langkah8. Perbarui Status Pengetikan Pengguna

Bagaimana cara membuat obrolan dengan PHP?

Mulailah dengan membuat indeks. .
Tambahkan skrip dan tautan ke tajuk
Buat formulir Bootstrap dasar
Aktifkan Pusher dengan meneruskan kunci API
Masukkan saluran unik untuk langganan dan pengikatan acara
Buat panggilan AJAX untuk mengirim dan menerima data ke pesan. file php
Pemicu Masukkan acara klik tombol untuk mengirim pesan

Apakah PHP bagus untuk aplikasi obrolan?

Tentu, PHP adalah pilihan yang bagus . Obrolan waktu nyata pada dasarnya adalah pemberitahuan push, dengan sedikit JS yang terlibat untuk membuat aplikasi lebih halus. Oleh karena itu, meskipun PHP baik-baik saja, saya akan menggunakan Socket. io. Mengapa menemukan kembali roda ketika ada solusi hebat yang sudah tersedia?

Bagaimana cara membuat messenger di PHP?

$input = json_decode(file_get_contents('php. //input'), true);$sender = $input['entry'][0]['messaging'][0]['sender']['id'];