Dragon Games BR!

MUDAMOS DE ENDEREÇO : www.G2EX.net

Bem vindos ao nosso fórum!

Últimos assuntos

Parceiros





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


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

    Como criar um ShoutBox

    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

    Como criar um ShoutBox

    Mensagem  Nick em Dom Dez 02, 2012 7:36 am

    Olá gente irei adicionar uns codigos aqui de um shoutbox bme simples e bem bonito.

    Bora cria uma pasta na area de trabalho com nome shoutbox.

    Pegue esse codigo e ponha no bloco de notas e salve como index.php ( e ponha na pasta shoutbox)

    Spoiler:
    [<?php
    session_start();

    function createForm(){
    ?>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <table align="center">
    <tr><td colspan="2">Por favor ponha um Nome</td></tr>
    <tr><td>Seu Nome: </td>
    <td><input class="text" type="text" name="name" /></td></tr>
    <tr><td colspan="2" align="center">
    <input class="text" type="submit" name="submitBtn" value="Entrar" />
    </td></tr>
    </table>
    </form>
    <?php
    }

    if (isset($_GET['u'])){
    unset($_SESSION['nickname']);
    }

    // Process login info
    if (isset($_POST['submitBtn'])){
    $name = isset($_POST['name']) ? $_POST['name'] : "Unnamed";
    $_SESSION['nickname'] = $name;
    }

    $nickname = isset($_SESSION['nickname']) ? $_SESSION['nickname'] : "Hidden";
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>MSG Box - Mini Versao</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
    <!--
    var httpObject = null;
    var link = "";
    var timerID = 0;
    var nickName = "<?php echo $nickname; ?>";

    // Get the HTTP Object
    function getHTTPObject(){
    if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest) return new XMLHttpRequest();
    else {
    alert("Seu navegador nao suporta AJAX.");
    return null;
    }
    }

    // Change the value of the outputText field
    function setOutput(){
    if(httpObject.readyState == 4){
    var response = httpObject.responseText;
    var objDiv = document.getElementById("result");
    objDiv.innerHTML += response;
    objDiv.scrollTop = objDiv.scrollHeight;
    var inpObj = document.getElementById("msg");
    inpObj.value = "";
    inpObj.focus();
    }
    }

    // Change the value of the outputText field
    function setAll(){
    if(httpObject.readyState == 4){
    var response = httpObject.responseText;
    var objDiv = document.getElementById("result");
    objDiv.innerHTML = response;
    objDiv.scrollTop = objDiv.scrollHeight;
    }
    }

    // Implement business logic
    function doWork(){
    httpObject = getHTTPObject();
    if (httpObject != null) {
    link = "message.php?nick="+nickName+"&msg="+document.getElementById('msg').value;
    httpObject.open("GET", link , true);
    httpObject.onreadystatechange = setOutput;
    httpObject.send(null);
    }
    }

    // Implement business logic
    function doReload(){
    httpObject = getHTTPObject();
    var randomnumber=Math.floor(Math.random()*10000);
    if (httpObject != null) {
    link = "message.php?all=1&rnd="+randomnumber;
    httpObject.open("GET", link , true);
    httpObject.onreadystatechange = setAll;
    httpObject.send(null);
    }
    }

    function UpdateTimer() {
    doReload();
    timerID = setTimeout("UpdateTimer()", 5000);
    }


    function keypressed(e){
    if(e.keyCode=='13'){
    doWork();
    }
    }
    //-->
    </script>
    </head>
    <body onload="UpdateTimer();">
    <div id="main">
    <div id="caption">MSG Box</div>
    <div id="icon"> </div>
    <?php

    if (!isset($_SESSION['nickname']) ){
    createForm();
    } else {
    $name = isset($_POST['name']) ? $_POST['name'] : "Unnamed";
    $_SESSION['nickname'] = $name;
    ?>

    <div id="result">
    <?php
    $data = file("msg.html");
    foreach ($data as $line) {
    echo $line;
    }
    ?>
    </div>
    <div id="sender" onkeyup="keypressed(event);">
    Sua mensagem: <input type="text" name="msg" size="30" id="msg" />
    <button onclick="doWork();">Enviar</button>
    </div>
    <?php
    }

    ?>
    </div>
    </body>

    Pegue esse codigo e ponha no bloco de notas e salve como message.php ( e ponha na pasta shoutbox)

    Spoiler:
    <?php
    if (isset($_GET['msg'])){
    if (file_exists('msg.html')) {
    $f = fopen('msg.html',"a+");
    } else {
    $f = fopen('msg.html',"w+");
    }
    $nick = isset($_GET['nick']) ? $_GET['nick'] : "Hidden";
    $msg = isset($_GET['msg']) ? htmlspecialchars($_GET['msg']) : ".";
    $line = "<p><span class=\"name\">$nick: </span><span class=\"txt\">$msg</span></p>";
    fwrite($f,$line."\r\n");
    fclose($f);

    echo $line;

    } else if (isset($_GET['all'])) {
    $flag = file('msg.html');
    $content = "";
    foreach ($flag as $value) {
    $content .= $value;
    }
    echo $content;

    }
    ?>

    agora abra bloco de notas, deche em branco de salve como msg.html (obs isso e onde todas mensagens seram salvas) e coloque na pasta shoutbox.

    Agora crie uma pasta com nome style dentro da pasta shoutbox, e copie esse codigo ponha no bloco de notas e salve como style.css e ponha na pasta style que esta la no shoutbox.

    Spoiler:
    #main {
    margin: auto;
    border: 1px solid #cccccc;
    width: 450px;
    min-height:150px;
    background: #F1F3F5;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    border-collapse:collapse;
    }

    #sender {
    clear:both;
    border: 1px solid #cccccc;
    width: 356px;
    background: #E9ECEF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:2px;
    margin-bottom:10px;
    margin-top:10px;
    margin-left: 60px;
    }

    td {
    padding:5px;
    }

    #result {
    margin-top:20px;
    border: 1px solid #cccccc;
    width: 356px;
    background: #E9ECEF;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:2px;
    height:400px;
    overflow:auto;
    }

    .error {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size : 10px;
    color:#dd1111;
    padding:5px;

    }


    .text {
    border: 1px solid #cccccc;
    }

    input {
    border: 0px solid #cccccc;
    }


    #caption{
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    margin:10px;
    font-size : 14px;
    color:#C64934;
    }

    #icon{
    width:60px;
    height:100px;
    padding:0px;
    margin:0px;
    border:0px;
    float:left;
    background-image:url(icon.gif);
    background-repeat: no-repeat;
    background-position:center center;
    }

    p{
    margin:0px;
    padding:0px;
    }

    .name{
    font-weight:bold;
    font-style: italic;
    color:#999;
    }

    .txt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:12px;
    color:#333;
    }

    #mchat{
    border:0px;
    width:100%;
    }

    Pronto seu shoutbox está pronto, agora e so ir testar Smile

    Olhem como irar ficar: [Você precisa estar registrado e conectado para ver este link.]


    Última edição por Nick em Dom Dez 02, 2012 7:41 am, editado 2 vez(es)

      Data/hora atual: Seg Dez 05, 2016 3:32 am