1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Contador de Visitas [PHP/JQUERY]

Tema en 'Tutoriales de PHP' comenzado por AngelKrak, 28 de Septiembre de 2015.

  1. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.005
    Me gusta recibidos:
    399
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    [​IMG]
    Hola :3 esta vez les traigo un tutorial super duper genial :cool: jajajja ok no psz ._. empecemos;)

    1.- La Librería de Jquery para que pueda funcionar una Function
    Código (Text):
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    2.- Aquí viene el código que abre el contador de visitas y las muestra(Todos los Códigos Explicados lo mejor posible:oops:)
    PHP:

    <?php
    $archivo = "contador.txt"; // Archivo en donde se acumulará el numero de visitas
    $abre = fopen($archivo, "r"); // Abrimos el archivo para solamente leerlo (r de read)
    $total = fread($abre, filesize($archivo)); // Leemos el contenido del archivo(filesize "detectara" la longitud de Bytes de $archivo la cual desconocemos)
    fclose($abre); // Cerramos la conexión al archivo
    $abre = fopen($archivo, "w"); // Abrimos nuevamente el archivo (w de write)
    $total = $total + 1; // Sumamos 1 nueva visita
    $grabar = fwrite($abre, $total); // Y reemplazamos por la nueva cantidad de visitas
    fclose($abre); // Cerramos la conexión al archivo

    // Imprimimos el total de visitas dándole un formato
    echo "<div id='contentt'><img src='img/views.png' alt='' /><span class='total'>Total de visitas: <span class='views'>".$total."</span></span></div>";
    echo "<div id='contentt2'><img src='img/views.png' alt='' /><span class='total'>Total de visitas: <span class='views'>".$total."</span></span></div>";
    ?>
     
    3.- Los Estilos para el Contador(Viene con 2 apariencias[Botón&Background-Color)
    Código (CSS):

    img {
        vertical-align: middle;
        width: 32px;
    }
    .views {
        color: #ff0000;
    }
    .total {
        font-family: arial;
        font-size: 1em;
        vertical-align: middle;
    }

    /* Aqui empiezan los Estilos de las Visitas */
    #contentt {
        padding: 5px;
        margin: 5px auto;
        background: #2ECC40;
        box-shadow: 1px 1px 14px #888888;
    }

    #contentt2 {
        padding: 5px;
        margin: 5px auto;
        cursor: pointer;
        appearance:button;
        -moz-appearance:button; /* Firefox */
        -webkit-appearance:button; /* Safari and Chrome */
    }
    #contentt2 span {
        -moz-user-select: none; /* Firefox */
        -webkit-user-select: none; /* Safari y Chrome */
    }
     
    4.- El Código Jquery para que recarga las Visitas sin necesidad de Recargar la Pagina
    Código (Javascript):
    // Hacemos la Function para abrir el contador de visitas
    function recargar_views(){
        $(".views").load("./contador.txt");
    }

    // Establecemos el temporizador a 1 segundos
    timer = setInterval("recargar_views()", 1000);
    5.- Descarga:
    https://mega.nz/#!3U1QzA5C!RNjhdzbIby6UBoMHh8tK-grctvKI_MZx6hCiTFGGfDw
     
    Última modificación por un moderador: 28 de Septiembre de 2015
    A Dawud, nahuel, chivodev y 3 otros les gusta esto.
  2. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    184
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Por fin un tutorial bravissimo jajajaj que falta de emoticonos para aplaudirte jajaja por fin decides explicarte ;)

    Pd: ahora mismo voy a integrarlo en mi web XD
     
    Última modificación: 28 de Septiembre de 2015
  3. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.005
    Me gusta recibidos:
    399
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    jajajaja si, aun que no tenia planeado que este fuera mi primer tutorial explicado bn jajajaja xD
     

Comparte esta página