Jump to content

Buscar en la comunidad

Mostrando resultados para las etiquetas 'php sql javascript html css'.

  • Buscar por etiquetas

    Escribe las etiquetas separadas por comas.
  • Buscar por autor

Tipo de contenido


Foros

  • Metin2 Zone
    • Comunidad
    • Presentaciones y despedidas
  • Servidores Privados
    • Presentaciones de Servidores
    • Presentación de Proyectos
  • General
    • Discusiones generales
    • Socios y Colaboraciones
    • Servicios y compraventa
    • Ayudas y preguntas
    • Opiniones y consejos
    • Offtopic
  • Técnica
    • Programación
    • Edición de servidores Metin2
    • Desarrollo Web
    • Seguridad
    • Sistemas Operativos
    • Informática
  • Arte
    • Diseño y sección gráfica
    • Galería de imágenes y vídeos
    • Modelado 3D
    • Mapping
  • Descargas
    • Servidores y Clientes
    • Modelos 3D
    • Imágenes Metin2
    • Mapas
    • Traducciones
  • Archivo
    • Servidores Offline
    • Temas Links Caidos

Encontrar resultados en...

Encontrar resultados que...


Fecha creación

  • Inicio

    Fin


Última actualización

  • Inicio

    Fin


Filtrar por número de...

Ingreso

  • Inicio

    Fin


Grupo


Email


Sitio web


Jabber


Skype


Discord


Localización


Intereses

Encontrado 1 resultado

  1. Hola, que tal a todos, hoy vengo a regalarles una parte de lo que vendria siendo un noticiero, seccion de noticias, como quieran decirle, que algo parecido a esto: https://gyazo.com/23058393672cc2c941696405386ddf48 bien, básicamente es un noticiero con scroll infinito empleado ajax y json. es muy básico, por medio de JavaScript solicito datos a travez de ajax a php, php responde y manda a travez de json, JavaScript entiende JSON y plasma el array, en este caso y se refleja en la web. No dare soporte de instalación, y, esta versión no esta terminada del todo. Sí quieres soporte, para adaptarla a tu web, crearle una sección para introducir nuevas noticias etc, entonces en ese caso cobrare servicios. Esto es la conexion, luego veremos como lo utilizaremos. <?php $DB_HOST = "localhost"; $DB_NAME = "host"; $DB_USER = "root"; $DB_PASS = ""; ?> A qui esta la clase de php para la conexión. <?php class conexion{ public static function conection(){ require("daten_inc.php"); try{ $conexion = new PDO("mysql:host=$DB_HOST;dbname=$DB_NAME", "$DB_USER", "$DB_PASS"); $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $conexion->exec("SET CHARACTER SET UTF8"); }catch(Exception $e){ die ("Error al conectar con la base de datos"); echo "Linea: " . $e->getLine(); } return $conexion; } } ?> Aquí esta la parte de la consulta SQL para la llamada (sinceramente la consulta esta mejor con INER JOIN debido que se tiene que extraer con el id_account la id de la cuenta para mostrarlo) <?php class article{ protected $conection; public function __construct(){ require("conection.php"); $this->conection = conexion::conection(); } // End construct public function get_notice($hasta){ $sql = "SELECT * FROM notice ORDER BY date DESC limit $hasta, 3"; $query = $this->conection->query($sql)->fetchAll(PDO::FETCH_ASSOC); $r = count($query); if ($r == 0) $query = array("status" => "Empty"); echo json_encode($query); } //End get_notice } // End class $x = new article(); $hasta = $_POST["hasta"]; $x->get_notice($hasta); ?> Pasamos al lado de JavaScript, en este caso, viene incluido ya con el metodo AJAX var scroll = true; var pag = 0, hasta; function aumento(){ pag++; hasta = pag*3; } $(document).ready(function(){ //Scroll para las noticias del menu if (pag == 0){ var daten = [{name: "hasta", value: 0}]; //console.log(daten); $.ajax({ url: "page/article.php", data: daten, type: "post", dataType: "json", success : function(date){ console.log(date); if (date.status == "Empty"){ scroll = false; } else{ for (var i=0; i<date.length; i++){ $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer class="footer_notices">autor, fecha</footer></article> '); } } } }) .fail(function(){ alert("No se pudo enviar"); }); } $('.contenedor').scroll(function(){ if (($(this).scrollTop() + $(this).height()) == $(this).prop('scrollHeight') && scroll == true){ aumento(); var daten = [{name: "hasta", value: hasta}]; //console.log(daten); $.ajax({ url: "page/article.php", data: daten, type: "post", dataType: "json", success : function(date){ if (date.status == "Empty"){ scroll = false; } else{ for (var i=0; i<date.length; i++){ $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer class="footer_notices">autor, fecha</footer></article> '); } } } }) .fail(function(){ alert("No se pudo enviar"); }); } //if condicion }); }); Como plus, incluire la parte de la hoja de estilos. (no dare información acerca de los selectores ni nada por el estilo) .notices{ float: right; margin: auto; background-color: transparent; width: 50%; height: 200px; margin-right: 6%; } .titulo_notices{ background-color: grey; text-align: center; font-size: 30px; width: 80%; margin: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-color: orange; border-bottom-width: 5px; border-bottom-style: solid; color: white; margin-top: 50px; } .notices .article_notice{ background-color: transparent; background-color: grey; } .notices .contenedor{ background-color: transparent; overflow: auto; height: 230px; width: 80%; margin: auto; } .header_notices{ margin-left: 5px; margin-top: 6px; margin-bottom: 6px; overflow: hidden; font-size: 30px; } .section_notices{ overflow: auto; text-align: justify; margin-left: 13px; margin-right: auto; text-decoration: none; margin-bottom: 10px; } .footer_notices{ margin-left: 5px; } La parte del HTML <!--Noticias--> <div class="notices"> <div class="titulo_notices">NOTICIAS <i class="fa fa-comments" aria-hidden="true"></i></div> <div class="contenedor"></div> </div> y ya para finalizar, la parte SQL https://mega.nz/#!Rp0DhDqK!nNpe8PSy2BXlbwTuHUanAOs2a09ztY_cWdpMQJQmrqM PD:en la sección del javascript se pueden reducir algunas lineas de codigo con la seccion donde es valor == 0.
×
×
  • Crear nuevo...