Dragon Games BR!

MUDAMOS DE ENDEREÇO : www.G2EX.net

Bem vindos ao nosso fórum!

Últimos assuntos

Parceiros





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


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

    Criando um chat em PHP e Jquery

    Compartilhe

    Nick
    Administrador
    Administrador

    Mensagens Mensagens : 457
    Moedas Moedas : 1805
    Reputação Reputação : 29
    Data de inscrição Data de inscrição : 02/09/2011

    Criando um chat em PHP e Jquery

    Mensagem  Nick em Sab Nov 24, 2012 4:09 pm

    Olá gente, nesse tutorial irei ensinar como criar um chatbox (chat) em PHP , Jquery que usara banco de dados MySql

    Primeiramente bora criar uma pasta na area de trabalho com nome Chat

    Após isso iremos criar um arquivo com nome index.php >> (Abra o Bloco de Notas e insira o codigo a abaixo e salve como index.php , e ponha na pasta Chat que você criou na area de trabalho)

    Spoiler:
    <?php
    if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $nome = trim(filter_input(INPUT_POST, 'nome'));
    if(empty($nome)){
    $erro = 'Nome é obrigatório';
    }else{
    require("config/config.php");
    $chat = new Chat();
    $chat->setNome($nome);
    if($chat->existeNome()){
    $erro = 'Já existe alguém usando esse nome';
    }else{
    setcookie('nome', $chat->getNome(), time()+3600*24*TEMPO_LIMITE);
    header('location:chat-index.php');
    }
    }
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Entrar no Sistema</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    </head>
    <body>
    <h1>Entre no Chat</h1>

    <?php
    if(isset($erro)){
    printf('<p id="erro">%s</p>', $erro);
    }
    ?>

    <form action="" method="post" id="frm-login">
    <?php if(isset($_COOKIE['nome'])): ?>
    <a href="chat-index.php">Caso deseje utilizar o mesmo nome, clique aqui</a>
    <?php endif;?>
    <fieldset>
    <label>
    <span>Nome</span>
    <input type="text" name="nome" id="nome" />
    </label>

    <input type="submit" class="btn" value="Entrar" />
    </fieldset>
    </form>
    </body>
    </html>

    Agora iremos criar um arquivo com nome chat-index.php (Faça mesma coisa que fizemos la em cima so que após pega o codigo e colar no bloco de notas salve como chat-index.php)

    Spoiler:
    <?php
    include("auth.php");
    require('config/config.php');
    $chat = new Chat();
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Chat</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>

    </head>
    <body>
    <h1>Bem Vindo, <?php echo $_COOKIE['nome']?> ao nosso Chat</h1>

    <div id="painel">
    <?php
    foreach($chat->listar() as $v){
    $ativo = ($v['nome'] == $_COOKIE['nome']) ? ' class="ativo"' : '';
    printf('<p%s>[%s] - %s</p>', $ativo, $v['nome'], $v['mensagem']);
    }
    ?>
    </div>

    <form action="" method="post" id="frm-msg">
    <fieldset>
    <label>
    <span>Mensagem</span>
    <textarea name="mensagem" id="mensagem" cols="70" rows="5"></textarea>
    </label>
    <input type="button" id="submit" value="Enviar" />
    </fieldset>
    </form>
    </body>
    </html>

    Agora iremos outro arquivo com o nome chat.php (faça a mesma coisa que as outras)

    Spoiler:
    <?php
    require('config/config.php');
    $chat = new Chat();
    switch ($_POST['acao']){
    case 'inserir':
    $chat->excluir();
    $chat->setNome($_COOKIE['nome']);
    $chat->setMensagem(filter_input(INPUT_POST, 'mensagem'));
    if($chat->inserir()){
    printf('<p class="ativo">[%s] - %s</p>', $chat->getNome(), $chat->getMensagem());
    }
    break;

    case 'atualizar':
    foreach($chat->listar() as $v){
    $ativo = ($v['nome'] == $_COOKIE['nome']) ? ' class="ativo"' : '';
    printf('<p%s>[%s] - %s</p>', $ativo, $v['nome'], $v['mensagem']);
    }
    break;
    }

    E agora iremos criar o último da função inicial do chat que sera o auth.php (faça mesma coisa que os outros..)

    Spoiler:
    <?php
    if(!isset($_COOKIE['nome'])){
    header('location:index.php');
    }

    Agora iremos criar a CSS do chat (Dentro da pasta Chat que esta na area de trabalho, crie outra pasta com o nome css)
    (Agora insira o codigo de css (que esta abaixo) e ponha no bloco de notas e salve como style.css e coloque dentro da pasta css)

    Spoiler:
    body{background:#333}
    h1 {
    color: #fff;
    text-align: center;
    }

    #erro{
    width:400px;
    margin:0 auto;
    background:#fff;
    color:#f00;
    text-align:center;
    }
    #frm-login {
    width: 400px;
    margin: 0 auto;
    background:#fff;

    }

    #frm-login fieldset{
    border:1px solid #ccc;
    padding:10px ;
    }

    #frm-login a{
    color:#333;
    display:block;
    text-align:center;
    }
    #frm-login a:hover{
    background:#ccc;
    }

    #frm-login label input{
    padding:5px 0;
    width:250px;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    }
    #frm-login label input:focus{
    border-color:#333;
    }
    #frm-login .btn{
    padding:5px 10px;
    cursor:pointer;
    }
    #frm-msg {
    width: 900px;
    margin: 0 auto;
    background:#fff;
    }
    #frm-msg fieldset{border:0}
    #frm-msg label{
    width:750px;
    display:block;
    float:left;
    }
    #frm-msg label span{
    display:block;
    color:#333;
    }
    #frm-msg label textarea{
    width:750px;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    overflow:auto;

    }
    #frm-msg label textarea:focus{
    border-color:#333;
    }


    #frm-msg #submit{
    padding:40px 30px;
    float:right;
    margin-top:20px;

    }

    #painel {
    width: 900px;
    height: 400px;
    overflow: scroll;
    margin: 0 auto;
    background: #fff;
    }
    #painel p{
    border-bottom:1px solid #e5e5e5;
    color:#777;
    padding:5px 0;
    margin:0;
    }
    #painel p.ativo{
    background:#e5f5f5
    }

    Pronto finalizamos o css, agora iremos entrar no js (Crie outra pasta com nome js , dentro da pasta Chat que esta na area de trabalho)
    (copie o codigo abaixo e ponha no bloco de notas e salve como chat.js e ponha dentro da pasta js)

    Spoiler:
    $(function(){
    //inserir
    $("#submit").click(function(){
    var msg = $("#mensagem").val();
    msg = $.trim(msg);
    if(msg != ''){
    $.post('chat.php',
    {
    mensagem : msg,
    acao : 'inserir'
    }, function(retorno){
    $("#painel").prepend(retorno);
    $("#mensagem").val('');
    });
    }
    });

    //atualizar
    setInterval(function(){
    $.post('chat.php',
    {
    acao : 'atualizar'
    }, function(retorno){
    $("#painel").html(retorno);
    });
    }, 5000);

    });

    Finalizamos a area js '--' agora iremos entrar na area classes (.class) (Crie outra pasta com nome classes dentro da pasta Chat que esta na area de trabalho) (Copie o codigo e salve como BD.class e insira na pasta classes)

    Spoiler:
    <?php
    class BD{
    private static $conn;

    private function __construct(){}

    public static function getConn(){
    if(is_null(self::$conn)){
    self::$conn = new PDO(DSN, USER, PASS);
    }
    return self::$conn;
    }
    }




    Agora copie esse outro codigo , ponha no bloco de notas e salve como Chat.class e ponha na pasta classes

    Spoiler:
    <?php
    class Chat{
    private $nome;
    private $mensagem;
    private $tempoLimite;

    public function __construct(){
    $this->tempoLimite = TEMPO_LIMITE;
    }

    public function setNome($nome){
    $this->nome = $nome;
    }
    public function getNome(){
    return $this->nome;
    }
    public function setMensagem($msg){
    $this->mensagem = $msg;
    }
    public function getMensagem(){
    return $this->mensagem;
    }

    public function inserir(){
    $strSQL = "INSERT INTO chat SET nome = ?, mensagem = ? , datahora = NOW()";
    $stmt = BD::getConn()->prepare($strSQL);
    $data = array($this->getNome(), $this->getMensagem());
    return $stmt->execute($data);
    }

    public function existeNome(){
    $strSQL = "SELECT COUNT(nome) FROM chat WHERE nome = ?";
    $stmt = BD::getConn()->prepare($strSQL);
    $data = array($this->getNome());
    $stmt->execute($data);
    return ($stmt->fetchColumn() > 0) ? true : false;
    }
    public function excluir(){
    $strSQL = "DELETE FROM chat WHERE DATE_ADD(datahora, INTERVAL {$this->tempoLimite} DAY) < NOW()";
    $stmt = BD::getConn()->query($strSQL);
    }
    public function listar(){
    $strSQL = "SELECT * FROM chat ORDER BY id DESC";
    return BD::getConn()->query($strSQL);
    }


    }






    Pronto agora iremos entrar na area Config (configuracao) (Finalmente a penutima para nosso chat tiver pronto (: )

    Crie outra pasta dentro da pasta Chat na area de trabalho com nome Config
    Agora insira esse codigo no bloco de notas e salve como config.php e insira dentro da pasta Config

    Spoiler:
    [<?php
    include('config/define.php');
    include('config/load.php');


    Agora copie esse codigo bote no bloco de notas e salve como define.php e insira na pasta Config

    Spoiler:
    <?php
    define('HOST', 'localhost');
    define('USER', 'root');
    define('PASS', '');
    define('BD', 'Chat');
    define('DSN', 'mysql:host='.HOST.';dbname='.BD);
    define('TEMPO_LIMITE', 1);

    Apos isso insira esse outro codigo no bloco de notas e salve como load.php e insira na pasta Config

    Spoiler:
    <?php
    function __autoload($classe){
    $pagina = sprintf('classes/%s.class.php', $classe);
    if(file_exists($pagina)){
    require_once($pagina);
    }
    }

    E pronto acabamos (: Agora só iremos criar um banco de dados ^_^

    Copie esse codigo e salve como BD.sql e ponhe em qualquer canto.

    Spoiler:
    -- phpMyAdmin SQL Dump
    -- version 3.2.0.1
    -- [Você precisa estar registrado e conectado para ver este link.]
    --
    -- Servidor: localhost
    -- Tempo de Geração: Nov 07, 2010 as 10:38 PM
    -- Versão do Servidor: 5.1.36
    -- Versão do PHP: 5.3.0

    SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;

    --
    -- Banco de Dados: `DragonGamesBR`
    --

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

    --
    -- Estrutura da tabela `chat`
    --

    CREATE TABLE IF NOT EXISTS `chat` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `nome` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
    `mensagem` text COLLATE utf8_unicode_ci NOT NULL,
    `datahora` datetime NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=8 ;

    E finish (:

    Agora bora dechalo online. Baixe algum programa de FTP como xaamp,vertrigo,wamp.. ou use um cPanel.
    Insira todas as pastas na WWW ou HTDOCS
    Abra localhost/phpmyadmin > crie um banco de dados com nome chat > Importe a BD.sql
    Abra define.php onde tiver

    ('HOST', 'localhost'); (deche assim)
    define('USER', 'root'); (deche assim)
    define('PASS', ''); (coloque a senha do phpmyadmin , caso nao tenha deche em branco)
    define('BD', 'Chat'); (Coloque o nome do banco de dados que criou que foi Chat)

    E pronto e so salvar e testar em localhost , eu ja testei aqui é funfa 100% e até agradavel ese chatzinho.

    Créditos para: David HCH e Nick

    marciorpegoraro
    Membro
    Membro

    Mensagens Mensagens : 1
    Moedas Moedas : 1
    Reputação Reputação : 0
    Data de inscrição Data de inscrição : 01/01/2013

    Re: Criando um chat em PHP e Jquery

    Mensagem  marciorpegoraro em Ter Jan 01, 2013 7:21 pm

    foi otimo

    sedutorking
    Membro
    Membro

    Mensagens Mensagens : 1
    Moedas Moedas : 1
    Reputação Reputação : 0
    Data de inscrição Data de inscrição : 11/01/2013

    Erro aki

    Mensagem  sedutorking em Sex Jan 11, 2013 11:54 am

    pow cara eu fiz e deu tudo certo até a primeira parte de colocar o nick... depois que eu coloquei o meu nome deu esse erro aki : ) Fatal error: Class 'chat' not found in C:\wamp\www\Chat\index.php on line 8
    Call Stack
    # Time Memory Function Location
    1 0.0008 375336 {main}( ) ..\index.php:0

    Nick
    Administrador
    Administrador

    Mensagens Mensagens : 457
    Moedas Moedas : 1805
    Reputação Reputação : 29
    Data de inscrição Data de inscrição : 02/09/2011

    Re: Criando um chat em PHP e Jquery

    Mensagem  Nick em Sex Jan 11, 2013 11:59 am

    Copie esse codigo abaixo, ponha no bloco de notas e salve como chat.class e tente Wink

    Spoiler:
    <?php
    class Chat{
    private $nome;
    private $mensagem;
    private $tempoLimite;

    public function __construct(){
    $this->tempoLimite = TEMPO_LIMITE;
    }

    public function setNome($nome){
    $this->nome = $nome;
    }
    public function getNome(){
    return $this->nome;
    }
    public function setMensagem($msg){
    $this->mensagem = $msg;
    }
    public function getMensagem(){
    return $this->mensagem;
    }

    public function inserir(){
    $strSQL = "INSERT INTO chat SET nome = ?, mensagem = ? , datahora = NOW()";
    $stmt = BD::getConn()->prepare($strSQL);
    $data = array($this->getNome(), $this->getMensagem());
    return $stmt->execute($data);
    }

    public function existeNome(){
    $strSQL = "SELECT COUNT(nome) FROM chat WHERE nome = ?";
    $stmt = BD::getConn()->prepare($strSQL);
    $data = array($this->getNome());
    $stmt->execute($data);
    return ($stmt->fetchColumn() > 0) ? true : false;
    }
    public function excluir(){
    $strSQL = "DELETE FROM chat WHERE DATE_ADD(datahora, INTERVAL {$this->tempoLimite} DAY) < NOW()";
    $stmt = BD::getConn()->query($strSQL);
    }
    public function listar(){
    $strSQL = "SELECT * FROM chat ORDER BY id DESC";
    return BD::getConn()->query($strSQL);
    }


    }

    renatocs
    Membro
    Membro

    Mensagens Mensagens : 1
    Moedas Moedas : 1
    Reputação Reputação : 0
    Data de inscrição Data de inscrição : 28/02/2013

    Deu erro.

    Mensagem  renatocs em Qui Fev 28, 2013 1:14 pm

    O meu deu um erro também. Tentei alterar as coisas, mas mesmo assim não funcionou. Sera que tem alguma solução?!


    erro: Fatal error: Class 'Chat' not found in C:\xampp\htdocs\chat\chat renato\index.php on line 8


    weimer
    Membro
    Membro

    Mensagens Mensagens : 1
    Moedas Moedas : 1
    Reputação Reputação : 0
    Data de inscrição Data de inscrição : 18/05/2013

    Está dando erro :/

    Mensagem  weimer em Sab Maio 18, 2013 5:27 am

    o carrega a index, só depois acontece isso: Fatal error: Class 'Chat' not found in C:\wamp\www\index.php on line 8
    Call Stack
    # Time Memory Function Location
    1 0.0018 374160 {main}( ) .

    Conteúdo patrocinado

    Re: Criando um chat em PHP e Jquery

    Mensagem  Conteúdo patrocinado Hoje à(s) 8:45 am


      Data/hora atual: Dom Dez 11, 2016 8:45 am