CGI CSS SQLite JavaScript

cgi-bin/demo.cgi

@@ -0,0 +1,4 @@
+#!/usr/bin/perl
+
+print "Content-type: text/html\n\n";
+print "Hello World!";

cgi-bin/form.cgi

@@ -0,0 +1,58 @@
+#!/usr/bin/env perl
+use strict;
+use warnings;
+use URI;
+use CGI qw(:standard);
+use DBI;
+
+# Configura la conexión a la base de datos SQLite
+my $dbh = DBI->connect("dbi:SQLite:dbname=../productos.db", "", "");
+$dbh->{RaiseError} = 1; # Habilita mensajes de error en caso de problemas
+
+# Crea la tabla si no existe
+$dbh->do(q{
+    CREATE TABLE IF NOT EXISTS productos (
+        id_producto INTEGER PRIMARY KEY,
+        Descripcion TEXT,
+        Cantidad INTEGER,
+        proveedor TEXT
+    )
+});
+
+# Manejo de la solicitud POST
+if ($ENV{'REQUEST_METHOD'} eq 'POST') {
+    my $id_producto = param('id_producto');
+    my $Descripcion = param('Descripcion');
+    my $Cantidad = param('Cantidad');
+    my $proveedor = param('proveedor');
+
+    # Inserta los datos en la base de datos
+    my $sth = $dbh->prepare(q{
+        INSERT INTO productos (id_producto, Descripcion, Cantidad, proveedor)
+        VALUES (?, ?, ?, ?)
+    });
+
+    $sth->execute($id_producto, $Descripcion, $Cantidad, $proveedor);
+}
+
+# Genera el formulario HTML
+print header();
+print start_html('Formulario de Producto');
+
+print h1('Ingrese los datos del producto:');
+print start_form(-method => 'POST', -action => $ENV{'SCRIPT_NAME'});
+
+print div({class=>'field'}, label('ID Producto:', 'id_producto'));
+print textfield('id_producto');
+
+print div({class=>'field'}, label('Descripción:', 'Descripcion'));
+print textfield('Descripcion');
+
+print div({class=>'field'}, label('Cantidad:', 'Cantidad'));
+print textfield('Cantidad', {type => 'number'});
+
+print div({class=>'field'}, label('Proveedor:', 'proveedor'));
+print textfield('proveedor');
+
+print submit(-value => 'Guardar Producto');
+print end_form();

cgi-bin/form2.cgi

@@ -0,0 +1,65 @@
+#!/usr/bin/env perl
+use strict;
+use warnings;
+use URI;
+use CGI qw(:standard);
+use DBI;
+
+# Configura la conexión a la base de datos SQLite
+my $dbh = DBI->connect("dbi:SQLite:dbname=../productos.db", "", "");
+$dbh->{RaiseError} = 1; # Habilita mensajes de error en caso de problemas
+
+# Crea la tabla si no existe
+$dbh->do(q{
+    CREATE TABLE IF NOT EXISTS productos (
+        id_producto INTEGER PRIMARY KEY,
+        Descripcion TEXT,
+        Cantidad INTEGER,
+        proveedor TEXT
+    )
+});
+
+# Manejo de la solicitud POST
+if ($ENV{'REQUEST_METHOD'} eq 'POST') {
+    my $id_producto = param('id_producto');
+    my $Descripcion = param('Descripcion');
+    my $Cantidad = param('Cantidad');
+    my $proveedor = param('proveedor');
+
+    # Inserta los datos en la base de datos
+    my $sth = $dbh->prepare(q{
+        INSERT INTO productos (id_producto, Descripcion, Cantidad, proveedor)
+        VALUES (?, ?, ?, ?)
+    });
+
+    $sth->execute($id_producto, $Descripcion, $Cantidad, $proveedor);
+}
+
+# Genera el formulario HTML
+print header();
+
+print <<'END_MESSAGE';
+    <form id="productoForm" action="form2.cgi" method="POST">
+        <div>
+            <label for="id_producto">ID Producto:</label>
+            <input type="text" id="id_producto" name="id_producto" required>
+            <span class="error" id="idProductoError"></span>
+        </div>
+        <div>
+            <label for="Descripcion">Descripción:</label>
+            <input type="text" id="Descripcion" name="Descripcion" required>
+            <span class="error" id="DescripcionError"></span>
+        </div>
+        <div>
+            <label for="Cantidad">Cantidad:</label>
+            <input type="number" id="Cantidad" name="Cantidad" required>
+            <span class="error" id="CantidadError"></span>
+        </div>
+        <div>
+            <label for="proveedor">Proveedor:</label>
+            <input type="text" id="proveedor" name="proveedor" required>
+            <span class="error" id="proveedorError"></span>
+        </div>
+        <button type="submit">Guardar Producto</button>
+    </form>
+END_MESSAGE

cgi-bin/form3.cgi

@@ -0,0 +1,72 @@
+#!/usr/bin/env perl
+use strict;
+use warnings;
+use URI;
+use CGI qw(:standard);
+use DBI;
+
+# Configura la conexión a la base de datos SQLite
+my $dbh = DBI->connect("dbi:SQLite:dbname=../productos.db", "", "");
+$dbh->{RaiseError} = 1; # Habilita mensajes de error en caso de problemas
+
+# Crea la tabla si no existe
+$dbh->do(q{
+    CREATE TABLE IF NOT EXISTS productos (
+        id_producto INTEGER PRIMARY KEY,
+        Descripcion TEXT,
+        Cantidad INTEGER,
+        proveedor TEXT
+    )
+});
+
+# Manejo de la solicitud POST
+if ($ENV{'REQUEST_METHOD'} eq 'POST') {
+    my $id_producto = param('id_producto');
+    my $Descripcion = param('Descripcion');
+    my $Cantidad = param('Cantidad');
+    my $proveedor = param('proveedor');
+
+    # Inserta los datos en la base de datos
+    my $sth = $dbh->prepare(q{
+        INSERT INTO productos (id_producto, Descripcion, Cantidad, proveedor)
+        VALUES (?, ?, ?, ?)
+    });
+
+    $sth->execute($id_producto, $Descripcion, $Cantidad, $proveedor);
+}
+
+# Genera el formulario HTML
+print header();
+
+print <<'END_MESSAGE';
+<HEAD>
+	<TITLE>Demo3 </TITLE>
+	<link rel="stylesheet" href="http://127.0.0.1/form.css">
+
+</HEAD>
+<BODY>
+    <form id="productoForm" action="form3.cgi" method="POST">
+        <div>
+            <label for="id_producto">ID Producto:</label>
+            <input type="text" id="id_producto" name="id_producto" required>
+            <span class="error" id="idProductoError"></span>
+        </div>
+        <div>
+            <label for="Descripcion">Descripción:</label>
+            <input type="text" id="Descripcion" name="Descripcion" required>
+            <span class="error" id="DescripcionError"></span>
+        </div>
+        <div>
+            <label for="Cantidad">Cantidad:</label>
+            <input type="number" id="Cantidad" name="Cantidad" required>
+            <span class="error" id="CantidadError"></span>
+        </div>
+        <div>
+            <label for="proveedor">Proveedor:</label>
+            <input type="text" id="proveedor" name="proveedor" required>
+            <span class="error" id="proveedorError"></span>
+        </div>
+        <button type="submit">Guardar Producto</button>
+    </form>
+    </BODY>
+END_MESSAGE

cgi-bin/form4.cgi

@@ -0,0 +1,73 @@
+#!/usr/bin/env perl
+use strict;
+use warnings;
+use URI;
+use CGI qw(:standard);
+use DBI;
+
+# Configura la conexión a la base de datos SQLite
+my $dbh = DBI->connect("dbi:SQLite:dbname=../productos.db", "", "");
+$dbh->{RaiseError} = 1; # Habilita mensajes de error en caso de problemas
+
+# Crea la tabla si no existe
+$dbh->do(q{
+    CREATE TABLE IF NOT EXISTS productos (
+        id_producto INTEGER PRIMARY KEY,
+        Descripcion TEXT,
+        Cantidad INTEGER,
+        proveedor TEXT
+    )
+});
+
+# Manejo de la solicitud POST
+if ($ENV{'REQUEST_METHOD'} eq 'POST') {
+    my $id_producto = param('id_producto');
+    my $Descripcion = param('Descripcion');
+    my $Cantidad = param('Cantidad');
+    my $proveedor = param('proveedor');
+
+    # Inserta los datos en la base de datos
+    my $sth = $dbh->prepare(q{
+        INSERT INTO productos (id_producto, Descripcion, Cantidad, proveedor)
+        VALUES (?, ?, ?, ?)
+    });
+
+    $sth->execute($id_producto, $Descripcion, $Cantidad, $proveedor);
+}
+
+# Genera el formulario HTML
+print header();
+
+print <<'END_MESSAGE';
+<HEAD>
+	<TITLE>Demo3 </TITLE>
+	<link rel="stylesheet" href="http://127.0.0.1/form.css">
+        <script src="http://127.0.0.1/script.js"></script>
+
+</HEAD>
+<BODY>
+    <form id="productoForm" action="form4.cgi" method="POST">
+        <div>
+            <label for="id_producto">ID Producto:</label>
+            <input type="text" id="id_producto" name="id_producto" required>
+            <span class="error" id="idProductoError"></span>
+        </div>
+        <div>
+            <label for="Descripcion">Descripción:</label>
+            <input type="text" id="Descripcion" name="Descripcion" required>
+            <span class="error" id="DescripcionError"></span>
+        </div>
+        <div>
+            <label for="Cantidad">Cantidad:</label>
+            <input type="number" id="Cantidad" name="Cantidad" required>
+            <span class="error" id="CantidadError"></span>
+        </div>
+        <div>
+            <label for="proveedor">Proveedor:</label>
+            <input type="text" id="proveedor" name="proveedor" required>
+            <span class="error" id="proveedorError"></span>
+        </div>
+        <button type="submit">Guardar Producto</button>
+    </form>
+    </BODY>
+END_MESSAGE

cgi-bin/test.cgi

@@ -0,0 +1,17 @@
+#!/usr/bin/env perl
+use strict;
+use warnings;
+use CGI qw(:standard);
+
+# Imprimir todas las variables de entorno CGI
+print header();
+print start_html('Variables de Entorno');
+
+print h1('Variables de Entorno de CGI');
+print "<ul>\n";
+foreach my $key (sort keys %ENV) {
+    print "<li><strong>$key:</strong> $ENV{$key}</li>\n";
+}
+print "</ul>\n";
+
+print end_html();

www/form.css

@@ -0,0 +1,54 @@
+       body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f4f4f4;
+        }
+
+        form {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+        }
+
+        div {
+            margin-bottom: 15px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        input[type="text"],
+        input[type="number"] {
+            width: 100%;
+            padding: 8px;
+            box-sizing: border-box;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        button {
+            width: 100%;
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #218838;
+        }
+
+        .error {
+            color: red;
+            font-size: 0.9em;
+        }

www/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Welcome to nginx!</title>
+<style>
+html { color-scheme: light dark; }
+body { width: 35em; margin: 0 auto;
+font-family: Tahoma, Verdana, Arial, sans-serif; }
+</style>
+</head>
+<body>
+<h1>Welcome to nginx!</h1>
+<p>If you see this page, the nginx web server is successfully installed and
+working. Further configuration is required.</p>
+
+<p>For online documentation and support please refer to
+<a href="http://nginx.org/">nginx.org</a>.<br/>
+Commercial support is available at
+<a href="http://nginx.com/">nginx.com</a>.</p>
+
+<p><em>Thank you for using nginx.</em></p>
+</body>
+</html>

www/script.js

@@ -0,0 +1,36 @@
+    <script>
+        document.getElementById('productoForm').addEventListener('submit', function(event) {
+            let valid = true;
+            const idProducto = document.getElementById('id_producto');
+            const Descripcion = document.getElementById('Descripcion');
+            const Cantidad = document.getElementById('Cantidad');
+            const proveedor = document.getElementById('proveedor');
+
+            // Limpiar mensajes de error anteriores
+            document.getElementById('idProductoError').textContent = '';
+            document.getElementById('DescripcionError').textContent = '';
+            document.getElementById('CantidadError').textContent = '';
+            document.getElementById('proveedorError').textContent = '';
+
+            if (!idProducto.value) {
+                document.getElementById('idProductoError').textContent = 'Este campo es obligatorio';
+                valid = false;
+            }
+            if (!Descripcion.value) {
+                document.getElementById('DescripcionError').textContent = 'Este campo es obligatorio';
+                valid = false;
+            }
+            if (!Cantidad.value) {
+                document.getElementById('CantidadError').textContent = 'Este campo es obligatorio';
+                valid = false;
+            }
+            if (!proveedor.value) {
+                document.getElementById('proveedorError').textContent = 'Este campo es obligatorio';
+                valid = false;
+            }
+
+            if (!valid) {
+                event.preventDefault(); // Evita el envío del formulario si hay errores de validación
+            }
+        });
+    </script>