Crear plantillas o componentes para reutilizarlos

#1 · April 4, 2022, 11:50 am

Buen dia

Quiero hacer una aplicacioon que lea una base de datos por ejemplo una lista que contenga

titulo, contenifo, imagen, fecha digamos que regrese 10 registros

para esto no tengo problemas (al menos eso Creo)

Lo que me gustaria y no se como hacerlo es generar una plantilla para mostar esos datos uno debajo de otro como una Card, digamos con un for generar las 10 cards y me coloque una debajo de otra y que la aplicacion se haga tan larga para abajo como cards cree y recorrercas con el dedo, no se si explique, espero que si, les agradesco la orientacion que me puedan dar

#2 · April 4, 2022, 12:58 pm

@ingemoller para eso es el atributo ng-repeat
Hay algunos ejemplos incluidos con VisualNEO Web y quizá quieras echar un vistazo aquí también:

https://visualneo.com/forum/topic/ng-repeat-with-neocms

Saludos.

#3 · April 4, 2022, 10:12 pm

Se ve muy interesante, pero no me queda muy claro que es neocms

hay algun tutorial de neocms?

#4 · April 5, 2022, 1:46 pm

Hola @ingemoller, en primer lugar, sabes cómo traer los datos desde la base de datos y manejar arrays?, si no es así deberías comenzar por este punto. Luego deberías crear 1 card con un conjunto de datos que la conformen con el Array devuelto por el comando neoPhp. Recorda que cuando lees de una base de datos el resultado queda en una array que podemos leer por ejemplo con un loop.

Acá por ejemplo tienes el ejemplo de una card con imagen, título, y demás en html y css: https://www.w3schools.com/howto/howto_css_cards.asp

Podes basarte en el css de esa página o de alguna otra que tenga una card (por ejemplo de bootstrap) e ir sumando el código html:

<div class="card">
  <img src="[elementoimagen]" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>[elementonombre]</b></h4>
    <p>[elementocomentario]</p>
  </div>
</div>

a un Contenedor con un loop o bien de la manera que menciona Luis.

En cada parte del loop deberías definir cada variable con los datos de la array de la base de datos e incluir el código html en el contenedor. Lo he hecho muchas veces y funciona muy bien; un ejemplo de esto es la web: http://unprograma.sytes.net/#!/Index la cual va sumando cards de programas en la medida que los trae de la base de datos (de forma interminable)

Por ejemplo:

Loop 0 [totalderegistros] [loop]
SetVar [Titulo] [tabla([loop])('Titulo')]
SetVar [Imagen] [tabla([loop])('Imagen')]
SetVar [Texto] [tabla([loop])('Texto')]

SetVar [ColocaHtml] "<div class='card'>
  <img src='[Imagen]' alt='Avatar' style='width:100%'>
  <div class='container'>
    <h4><b>[Titulo]</b></h4>
    <p>[Titulo]</p>
  </div>
</div>"
SetVar [ArmaHtml] "[Armahtml][ColocaHtml]"
SetObjectHTML "DataClass1" "[ArmaHtml]"
endloop

De todos modos para esto debes manejarte con Base de datos y Arrays.

IngeMoller has reacted to this post.

#5 · April 5, 2022, 6:51 pm

@ingemoller fíjate que en el foro hay una sección específica para neoCms y que hay varios ejemplos incluidos con VisualNEO Web que puedes estudiar.
neoCms es un backend donde puedes actualizar los datos que se muestran en tu aplicación de manera similar a como se hace en WordPress.

IngeMoller has reacted to this post.

Crear plantillas o componentes para reutilizarlos - Forum

Crear plantillas o componentes para reutilizarlos