Mensagens
Moedas
Reputação
Data de inscrição
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)
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)
Agora iremos outro arquivo com o nome chat.php (faça a mesma coisa que as outras)
E agora iremos criar o último da função inicial do chat que sera o auth.php (faça mesma coisa que os outros..)
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)
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)
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)
Agora copie esse outro codigo , ponha no bloco de notas e salve como Chat.class e ponha na pasta classes
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
Agora copie esse codigo bote no bloco de notas e salve como define.php e insira na pasta Config
Apos isso insira esse outro codigo no bloco de notas e salve como load.php e insira na pasta Config
E pronto acabamos (: Agora só iremos criar um banco de dados ^_^
Copie esse codigo e salve como BD.sql e ponhe em qualquer canto.
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
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
-- [Tens de ter uma conta e sessão iniciada para poderes visualizar 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
» [RELEASE] Criando servidor de BiteFight .
» Mu Web Browser 1.5 - ServerFiles + Tutorial
» [TUTO] Como criar server de Ikariam
» G2EX.net -> Fórum de jogos, designer, tecnologia e muito mais!
» BiteFight - PrivateServer - 24H Online!
» xat ixat pirata 2015-2016 2 anos online o melhor do brasil ixatbr.com
» NarutoOnline - BrowserGame ServerFiles- BR
» Naruto Web Browser [Source] - v3.1