#TecnologíaWeb

[fernando-arciniega]

Crea un carrito de compras con PHP, MySQL y Bootstrap

Cómo crear una tienda en línea paso a paso: guía completa para estudiantes (Frontend y Backend) En esta guía detallada, te explico cómo construir una tienda en línea paso a paso utilizando PHP, MySQL y Bootstrap. Incluye tanto la interfaz de usuario (frontend) como la interfaz de administración (backend). Es importante seguir cada paso cuidadosamente y mantener la estructura de archivos organizada. PHP es un lenguaje de programación del lado del servidor ampliamente utilizado para desarrollar aplicaciones web dinámicas e interactivas. Es conocido por su facilidad de uso, integración con bases de datos y flexibilidad, lo que lo hace ideal para gestionar formularios, sesiones de usuarios y otros elementos de sitios web. MySQL es un sistema de gestión de bases de datos relacional que permite almacenar, organizar y recuperar grandes cantidades de datos de forma eficiente. Se utiliza en conjunto con lenguajes como PHP para crear aplicaciones web que requieren almacenamiento y manejo de datos, como tiendas en línea, foros y sistemas de gestión de contenido. Bootstrap es un framework de código abierto para el desarrollo de interfaces de usuario responsivas y móviles en la web. Facilita la creación de páginas y aplicaciones con un diseño atractivo, gracias a su conjunto de componentes prediseñados y sus sistemas de grillas flexibles, haciendo que el desarrollo sea más rápido y uniforme. Requisitos previos: - Conocimientos básicos de PHP y MySQL. - Servidor local como XAMPP o WAMP. Paso 1: Crear la estructura de carpetas y archivos Crea la siguiente estructura de carpetas y archivos en tu proyecto. Nota: No es necesario incluir carpetas de CSS ni JS ya que se utilizan archivos en línea. tienda-en-linea/ │ ├── incluir/ │ ├── conexion.php │ ├── encabezado.php │ └── pie.php │ ├── recursos/ │ └── imagenes/ │ ├── admi │ ├── inicio_sesion.php . . . (backend) │ ├── panel_control.php . . . (backend) │ ├── gestion_productos.php . . . (backend) │ ├── agregar_producto.php . . . (backend) │ └── editar_producto.php . . . (backend) │ └── cerrar_sesion.php . . . (backend) │ ├── index.php . . . (frontend) ├── carrito.php . . . (frontend) ├── pago.php . . . (frontend) └── pago_exitoso.php . . . (frontend) Paso 2: Configurar la base de datos - Crea la base de datos en MySQL llamada comercio_electronico e inserta un usuario de ejemplo: CREATE DATABASE comercio_electronico; USE comercio_electronico; CREATE TABLE productos ( id_producto INT AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100) NOT NULL, descripcion TEXT, precio DECIMAL(10, 2) NOT NULL, imagen VARCHAR(255), stock INT NOT NULL DEFAULT 0 ); CREATE TABLE usuarios ( id_usuario INT AUTO_INCREMENT PRIMARY KEY, usuario VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL ); -- Insertar un usuario de ejemplo INSERT INTO usuarios (usuario, password) VALUES ('administrador', '12345'); Paso 3: Crear la conexión a la base de datos Crea el archivo incluir/conexion.php: Paso 4: Crear el encabezado y pie de página

En esta sección se diseñó el logotipo, el nombre de la tienda y el menú con el siguiente código: Archivo incluir/encabezado.php Tienda en Línea Tienda en Línea Inicio Carrito Pagar Este código es una estructura básica de una página web en HTML con Bootstrap para darle estilo y funcionalidad: - Estructura HTML: - Define la estructura básica de la página con elementos como , , , y . - Meta y Título: El define la codificación de caracteres como UTF-8 para acentos y el lenguaje español. - asegura que el sitio se vea bien en dispositivos móviles. - define el título de la página. - Enlaces a CSS: Se incluyen un archivo de estilos CSS de Bootstrap para usar componentes prediseñados. - Barra de navegación: - : Contiene la barra de navegación. - Logo y enlace: Un logo de Bootstrap es mostrado con . - Botón de menú colapsable: Permite que el menú se colapse en dispositivos móviles. - Enlaces de navegación: con - que dirigen a diferentes páginas (inicio.php, carrito.php, pago.php). El uso de Bootstrap proporciona un diseño responsivo y una presentación uniforme. Archivo incluir/pie.php

Al visualizar este archivo de manera individual, no se ver+an los estilos, ya que están siendo llamados desde el archivo index.php © Tienda en Línea. Todos los derechos reservados.

Creación del Frontend para la tienda en linea

Paso 5: Crear la interfaz de usuario Archivo index.php (Página de inicio): Inicio - Tienda en Línea

Bienvenido a nuestra tienda en línea

Hasta este punto, tu tienda deberá tener la siguiente apariencia:

Nota: no debe mostrar ningun tipo de error, ya que el mensaje de "No hay productos disponibles en este momento" hace una conexión a la base de datos y verifica si hay registros en la tabla productos Archivo carrito.php (Carrito de compras): Este archivo es un script PHP para gestionar un carrito de compras de la tienda en línea. - Conexión a la base de datos: Incluye un archivo externo (incluir/conexion.php) que establece la conexión con la base de datos. - Gestión de la sesión: Inicia la sesión con session_start() y verifica si existe un carrito en la sesión, creando uno vacío si no existe. - Lógica de carrito: - Agregar producto: Incrementa la cantidad del producto si ya está en el carrito; si no, lo agrega con cantidad 1. - Eliminar producto: Elimina un producto específico del carrito y reindexa el array. - HTML y Bootstrap: - Muestra la interfaz del carrito de compras con una tabla que detalla los productos, sus cantidades, precios unitarios, subtotales y opciones de acción (eliminar). - Calcula y muestra el total del carrito. - Enlaces y navegación: - Un botón para proceder al pago (pago.php). - Scripts y estilos: - Incluye estilos CSS y enlaces a las bibliotecas de Bootstrap y jQuery para un diseño y funcionalidad responsivos. El archivo combina lógica de servidor (PHP) y estructura de presentación (HTML/CSS) para gestionar y mostrar un carrito de compras interactivo en una página web.

Carrito de Compras

Carrito de Compras

Producto Cantidad Precio Unitario Subtotal Acciones Total: $ Proceder al Pago Archivo pago.php (Proceso de pago): Este código es un script PHP que gestiona un proceso de pago simulado de la tienda en línea, verificando que haya productos en el carrito y calculando el total. Se incluye el archivo conexion.php para establecer la conexión con la base de datos y se inicia una sesión con session_start() para gestionar el carrito de compras. Si el carrito está vacío (empty($_SESSION)), el script redirige al usuario a carrito.php y finaliza la ejecución (exit()), impidiendo que se acceda al proceso de pago sin productos en el carrito. Cuando el formulario es enviado ($_SERVER === 'POST'), se ejecuta un bucle que recorre los productos en el carrito. Se consulta cada producto en la base de datos usando su id_producto para verificar que existe y obtener su precio, y se calcula el subtotal multiplicando el precio por la cantidad de cada producto y sumándolo al total. La página muestra un encabezado y un formulario con un botón que simula la confirmación de compra y utiliza estilos CSS propios y los de Bootstrap para un diseño responsivo y atractivo. Se incluyen scripts de Bootstrap y jQuery para proporcionar funcionalidad y estilo a la página. Nota: Si el carrito está vacío, el script no realiza ninguna acción relacionada con el procesamiento de pago. En lugar de eso, verifica si el carrito está vacío y, de ser así, redirige al usuario a carrito.php y termina la ejecución del script con exit(). Esto evita que se procese un pago o se muestre la interfaz de pago si no hay productos en el carrito.

Pago

Proceso de Pago

Este es un proceso de pago simulado. Haz clic en "Completar Compra" para finalizar tu compra. Completar Compra Archivo pago_exitoso.php (Confirmación de compra):

Este archivo es una página HTML que muestra un mensaje de confirmación de compra exitosa al usuario. Incluye un encabezado (incluir/encabezado.php) y un pie de página (incluir/pie.php). El cuerpo de la página contiene un contenedor con una alerta de Bootstrap que muestra un mensaje de agradecimiento por la compra y notifica que el pedido ha sido procesado con éxito. También se proporciona un enlace con un botón que redirige al usuario de vuelta a la página de inicio (index.php). La página utiliza estilos CSS personalizados y de Bootstrap para un diseño atractivo y responsivo, y se complementa con scripts de jQuery y Bootstrap para funcionalidad adicional. Compra Exitosa

¡Gracias por tu compra!

Tu pedido ha sido procesado exitosamente. Pronto recibirás un correo con los detalles de tu pedido. Volver al Inicio Nota para los estudiantes

Hasta este punto, ya hemos creado la parte frontend de la tienda en línea. Con los archivos desarrollados, deberían poder probar la tienda y comprobar que todo funcione sin errores. Esto incluye la visualización de productos, el carrito de compras, y el proceso de pago simulado. Cómo probar la tienda antes de completar el backend Para probar las funcionalidades de la tienda, deberán ingresar un registro de producto directamente en phpMyAdmin: - Accede a phpMyAdmin y selecciona la base de datos comercio_electronico. - Selecciona la tabla productos. - Haz clic en la pestaña "Insertar" y añade un nuevo producto con la siguiente información de ejemplo: - nombre: Sudadera - descripcion: Sudadera de algodón unisex - precio: 250.00 - imagen: sudadera.png (asegúrate de que la imagen esté en la carpeta recursos/imagenes/) - stock: 10 - Guarda el registro y vuelve a tu navegador para probar la tienda en línea. Tienes que ver algo así:

Qué puedes hacer ahora: - Navegar por la página de inicio (index.php), verificar que los productos se muestren correctamente. - Agregar productos al carrito (carrito.php) y simular una compra completa (pago.php y pago_exitoso.php).

Creación del Backend para la tienda en linea

En esta sección, desarrollaremos la interfaz de administración (backend) de la tienda en línea. Esto permitirá gestionar productos de manera sencilla a través de un panel de control. La administración incluirá funcionalidades para iniciar sesión, agregar, editar y eliminar productos. Estructura de archivos del backend La estructura del backend estará contenida dentro de la carpeta admin/: tienda-en-linea/ │ ├── admin/ (backend) │ ├── inicio_sesion.php │ ├── panel_control.php │ ├── gestion_productos.php │ ├── agregar_producto.php │ └── editar_producto.php │ └── cerrar_sesion.php Paso 1: Crear el archivo de inicio de sesión (admin/inicio_sesion.php) Este archivo permitirá a los administradores acceder al panel de control.

Recuerda que los datos para acceder se insertaron al inicio al crear la base de datos: Usuario: administrador Password: 12345

Código para inicio_sesion.php: Usuario: Contraseña: Iniciar Sesión Paso 2: Crear el archivo del panel de control (admin/panel_control.php) Este archivo será el punto de acceso principal después de iniciar sesión.

Código para panel_control.php: Panel de Control - Administración

Panel de Control - Administración

Cerrar Sesión Gestionar Productos Agregar, editar y eliminar productos de la tienda. Ir a Gestión de Productos Paso 3: Crear el archivo para gestionar productos (admin/gestion_productos.php) Este archivo mostrará una lista de productos y permitirá editarlos o eliminarlos.

Código para gestion_productos.php: Gestión de Productos

Gestión de Productos

Agregar Producto Cerrar Sesión ID Nombre Descripción Precio Stock Acciones Paso 4: Crear el archivo para agregar productos (admin/agregar_producto.php) Este archivo permitirá al administrador agregar nuevos productos.

Código para agregar_producto.php Read the full article

[msrlunatj]

¿React o Django? Diferencias, Ventajas y Desventajas en el Desarrollo Web / React or Django? Differences, Advantages, and Disadvantages in Web Development

Introducción / Introduction

Español: En el desarrollo web moderno, elegir la tecnología adecuada puede marcar una gran diferencia en el éxito de un proyecto. React y Django son dos de las herramientas más populares, cada una con sus propios puntos fuertes y limitaciones. React, una biblioteca de JavaScript, es ampliamente utilizada para construir interfaces de usuario dinámicas y altamente interactivas. Django, por otro lado, es un framework de Python que permite crear aplicaciones web robustas y seguras con rapidez. En este blog, exploraremos las diferencias clave entre React y Django, así como sus ventajas y desventajas, para ayudarte a decidir cuál es la mejor opción según tus necesidades.

English: In modern web development, choosing the right technology can make a significant difference in a project's success. React and Django are two of the most popular tools, each with its strengths and limitations. React, a JavaScript library, is widely used for building dynamic and highly interactive user interfaces. Django, on the other hand, is a Python framework that allows for creating robust and secure web applications quickly. In this blog, we will explore the key differences between React and Django, as well as their advantages and disadvantages, to help you decide which one is the best fit for your needs.

1. Diferencias Fundamentales / Fundamental Differences

Español: La principal diferencia entre React y Django es su propósito y enfoque en el desarrollo web:

React: Es una biblioteca de JavaScript utilizada principalmente para construir interfaces de usuario (UI). React se enfoca en la vista en la arquitectura MVC (Modelo-Vista-Controlador), permitiendo la creación de aplicaciones web dinámicas y de una sola página (SPA). React es ideal para manejar la parte frontal de las aplicaciones web, proporcionando herramientas para crear componentes reutilizables y gestionar el estado de la aplicación.

Django: Es un framework completo de Python diseñado para construir aplicaciones web desde cero. Django sigue la arquitectura MVT (Modelo-Vista-Plantilla) y proporciona todo lo necesario para manejar tanto el backend como el frontend de una aplicación web. Es una opción excelente para proyectos que requieren un sistema de autenticación, bases de datos robustas y administración de contenido.

English: The main difference between React and Django is their purpose and focus in web development:

React: It is a JavaScript library primarily used for building user interfaces (UI). React focuses on the view in the MVC (Model-View-Controller) architecture, enabling the creation of dynamic and single-page web applications (SPA). React is ideal for handling the front end of web applications, providing tools to create reusable components and manage application state.

Django: It is a full-stack Python framework designed to build web applications from scratch. Django follows the MVT (Model-View-Template) architecture and provides everything needed to handle both the backend and frontend of a web application. It is an excellent choice for projects requiring an authentication system, robust databases, and content management.

2. Ventajas de React / Advantages of React

Español:

Interactividad y Dinamismo: React permite crear interfaces de usuario altamente interactivas con actualizaciones en tiempo real sin necesidad de recargar la página completa.

Componentes Reutilizables: Los componentes en React son reutilizables, lo que facilita la creación de elementos UI consistentes y la gestión del código.

Amplia Comunidad y Ecosistema: React cuenta con una gran comunidad y un ecosistema de herramientas y librerías que simplifican el desarrollo, como Redux para la gestión del estado y React Router para la navegación.

Rendimiento: React optimiza automáticamente la actualización de la UI mediante el uso de un DOM virtual, lo que mejora el rendimiento de las aplicaciones.

English:

Interactivity and Dynamism: React allows creating highly interactive user interfaces with real-time updates without needing to reload the entire page.

Reusable Components: Components in React are reusable, making it easier to create consistent UI elements and manage code.

Large Community and Ecosystem: React has a large community and an ecosystem of tools and libraries that simplify development, such as Redux for state management and React Router for navigation.

Performance: React automatically optimizes UI updates using a virtual DOM, improving the performance of applications.

3. Desventajas de React / Disadvantages of React

Español:

Curva de Aprendizaje: Aunque React es flexible, su flexibilidad puede ser una desventaja para principiantes que no estén familiarizados con conceptos como JSX, el DOM virtual y la gestión del estado.

Complejidad de Integración: React se centra únicamente en el frontend, por lo que se requiere la integración con otras tecnologías para manejar el backend, lo que puede aumentar la complejidad del proyecto.

Dependencias Externas: Para desarrollar una aplicación completa, es necesario depender de varias librerías y herramientas externas, lo que puede complicar la gestión del proyecto.

English:

Learning Curve: Although React is flexible, its flexibility can be a disadvantage for beginners who are unfamiliar with concepts like JSX, the virtual DOM, and state management.

Integration Complexity: React focuses solely on the frontend, so it requires integration with other technologies to handle the backend, which can increase project complexity.

External Dependencies: Developing a complete application requires relying on various external libraries and tools, which can complicate project management.

4. Ventajas de Django / Advantages of Django

Español:

Framework Completo: Django es un framework completo que incluye todo lo necesario para el desarrollo de aplicaciones web, desde la autenticación de usuarios hasta la gestión de bases de datos.

Seguridad: Django viene con características de seguridad integradas, como protección contra CSRF, SQL injection y XSS, lo que ayuda a crear aplicaciones web seguras por defecto.

Rapidez en el Desarrollo: Con Django, se puede desarrollar aplicaciones de manera rápida gracias a su enfoque en la reutilización de código, el sistema de administración automático y las migraciones de bases de datos.

Soporte para Proyectos Grandes: Django es ideal para proyectos de gran escala, como redes sociales, plataformas de comercio electrónico y sistemas de gestión de contenido, gracias a su robustez y escalabilidad.

English:

Full-Stack Framework: Django is a full-stack framework that includes everything needed for web application development, from user authentication to database management.

Security: Django comes with built-in security features like protection against CSRF, SQL injection, and XSS, helping to create secure web applications by default.

Rapid Development: With Django, applications can be developed quickly thanks to its focus on code reuse, the automatic administration system, and database migrations.

Support for Large Projects: Django is ideal for large-scale projects such as social networks, e-commerce platforms, and content management systems due to its robustness and scalability.

5. Desventajas de Django / Disadvantages of Django

Español:

Rigidez: Django sigue un enfoque de "una forma correcta de hacer las cosas", lo que puede ser restrictivo para desarrolladores que prefieren más flexibilidad en cómo estructurar su código.

Curva de Aprendizaje para Nuevos Usuarios: Aunque Django es poderoso, la curva de aprendizaje puede ser empinada, especialmente para desarrolladores que no están familiarizados con Python o con los patrones de diseño que utiliza.

Menor Interactividad: Comparado con React, las aplicaciones desarrolladas con Django pueden tener menos interactividad en el frontend, a menos que se integren con librerías de JavaScript.

English:

Rigidity: Django follows a "one right way to do things" approach, which can be restrictive for developers who prefer more flexibility in structuring their code.

Learning Curve for New Users: While Django is powerful, the learning curve can be steep, especially for developers who are not familiar with Python or the design patterns it uses.

Less Interactivity: Compared to React, applications developed with Django may have less interactivity on the frontend unless integrated with JavaScript libraries.

6. ¿Cuándo Usar React o Django? / When to Use React or Django?

Español:

Usa React si:

Necesitas construir una interfaz de usuario interactiva y dinámica.

Estás desarrollando una aplicación de una sola página (SPA).

Quieres utilizar una biblioteca con un amplio soporte y comunidad.

Prefieres trabajar con JavaScript y te interesa mantener el frontend separado del backend.

Usa Django si:

Estás desarrollando una aplicación web completa con backend y frontend integrados.

Necesitas un sistema robusto y seguro con autenticación y gestión de bases de datos.

Prefieres un enfoque de desarrollo rápido con muchas herramientas listas para usar.

Estás construyendo un proyecto de gran escala que requiere escalabilidad y mantenimiento a largo plazo.

English:

Use React if:

You need to build an interactive and dynamic user interface.

You are developing a single-page application (SPA).

You want to use a library with broad support and community.

You prefer working with JavaScript and are interested in keeping the frontend separate from the backend.

Use Django if:

You are developing a complete web application with integrated backend and frontend.

You need a robust and secure system with authentication and database management.

You prefer a rapid development approach with many out-of-the-box tools.

You are building a large-scale project that requires scalability and long-term maintenance.

Conclusión / Conclusion

Español: La elección entre React y Django depende en gran medida de las necesidades específicas de tu proyecto. React es ideal para crear interfaces de usuario dinámicas y modernas, mientras que Django proporciona un framework completo para el desarrollo rápido de aplicaciones web robustas. Si tu enfoque es en la interactividad del frontend, React podría ser la mejor opción. Si buscas una solución integral que incluya tanto el backend como el frontend, Django puede ser la elección correcta.

English: The choice between React and Django largely depends on the specific needs of your project. React is ideal for creating dynamic, modern user interfaces, while Django provides a comprehensive framework for rapidly developing robust web applications. If your focus is on frontend interactivity, React might be the best choice. If you’re looking for an all-in-one solution that includes both backend and frontend, Django could be the right choice.

[stealthtechnoocrats]

En este artículo se describen los principales lenguajes de programación utilizados para el desarrollo de aplicaciones móviles. Se discuten las características de cada lenguaje y su uso en las plataformas Android e iOS. El objetivo del artículo es proporcionar una visión general de los lenguajes de programación más populares en el mundo del desarrollo de aplicaciones móviles.