Differences

This shows you the differences between two versions of the page.

--- apuntes:introduccion [2017/09/21 01:00] – [Lenguajes y tecnologías para programación web en entorno servidor] Santiago Faci
+++ apuntes:introduccion [2019/02/13 17:16] (current) – [Herramientas para el desarrollo web en entorno servidor] Santiago Faci
@@ Line 96: / Line 96: @@
 {{ lamp.jpg }}
 <caption>Arquitectura habitual LAMP</caption></figure>
+El lenguaje //PHP// fue diseñado por //Rasmus Lerdorf// y ahora se mantiene por una comunidad de desarrolladores, y además es open source.
+A continuación, un fragmento de una página web dinámica escrita con PHP donde se puede apreciar cómo se incrusta el código junto con el HTML de la página:
+<code php>
+. . .
+. . .
+<div id="listado">
+  <table class="cebra">
+  <thead class="cabecera">
+  <tr class="cabecera">
+  <td>#</td>
+  <td>Nombre</td>
+  <td>Descripción</td>
+  <td>Stock</td>
+  <td>Precio venta</td>
+  <td>Imagen</td>
+  <td></td>
+  <td></td>
+  <td></td>
+  </tr>
+  </thead>
+  <tbody class="scroll">
+<?php
+  $resultado = $bbdd->ejecuta_consulta("SELECT id, nombre, descripcion, stock, precio_venta, imagen1, miniatura FROM articulos " .
+ "WHERE nombre LIKE '%" . $busqueda_rapida . "%' OR descripcion LIKE '%" . $busqueda_rapida . "%' LIMIT " . $inicio . ", " . $tamano);
+  if ($resultado->num_rows == 0) {
+    echo "<td colspan='7' style='text-align:center'><span class='titulocelda'>## Sin Datos ##</span></td>\n";
+  }
+  else {
+    while ($fila = $resultado->fetch_array()) {
+      echo "<tr id='registro-" . $fila["id"] . "'>\n";
+      echo "<td>" . $fila["id"] . "</td>\n";
+      echo "<td>" . $fila["nombre"] . "</td>\n";
+      echo "<td>" . $fila["descripcion"] . "</td>\n";
+      if ($fila["stock"] <= 0)
+      	echo "<td><span class='error'>" . $fila["stock"] . "</span></td>\n";
+      else
+       	echo "<td>" . $fila["stock"] . "</td>\n";
+      echo "<td>" . money_format("%i", $fila["precio_venta"]) . "</td>\n";
+      echo "<td><a href='articulos/" . $fila["id"] . "/" . $fila["imagen1"] . "' title='Ampliar'><img src='articulos/" . $fila["id"] . "/" . $fila["miniatura"] . "'/></a></td>\n";
+      echo "<td><a href='run/_generar_barcode.php?id=" . $fila["id"] . "' title='Generar Código'><img src='icons/barcode16.png' alt='Generar Código'/></a></td>\n";
+      echo "<td><a href='?id=nuevo_articulo&modificar=" . $fila["id"] . "' title='Modificar Artículo'><img src='icons/editar16.png' alt='Modificar Artículo'/></a></td>\n";
+      echo "<td><a class='eliminar' href='?eliminar=" . $fila["id"] . "' title='Eliminar Artículo'><img src='icons/cerrar16.png' alt='Eliminar Artículo'/></a></td>\n";
+      echo "</tr>\n";
+   }
+  $resultado->close();
+}
+?>
+. . .
+. . .
+</code>
 === JSP / Servlets ===
@@ Line 102: / Line 160: @@
 Por otra parte, [[http://www.oracle.com/technetwork/java/index-jsp-135475.html|Java Servlets]] es una tecnología que también se puede utilizar para crear contenido web dinámico pero que además extiende su funcionalidad a la posibilidad de conectar esas webs dinámicas con otro contenido accesible a través de Internet. En ocasiones se utiliza junto con JSP para crear aplicaciones web más complejas.
+Ambas son tecnologías desarrolladas por //Sun Microsystems// y propiedad ahora de //Oracle//, tras adquirir esta última a la primera hace ya algunos años.
 <figure>
 {{ jsp.gif }}
 <caption>Arquitectura habitual JSP/Servlets</caption></figure>
+Ejemplo de página web dinámica creada con JSP:
+<code html>
+<div class="container">
+    <div class="page-header">
+        <h2>Teléfonos de Emergencia</h2>
+    </div>
+    <div class="col-md-12">
+        <table class="table table-striped">
+            <jsp:include page="includes/table_header.jsp">
+                <jsp:param name="1" value="Nombre"/>
+                <jsp:param name="2" value="Teléfono"/>
+            </jsp:include>
+            <tbody>
+            <%
+                Repository repo = new PhoneRepository();
+                List<Phone> phonesList = repo.findAll();
+                int count = 1;
+                for (Phone phone : phonesList) {
+            %>
+            <jsp:include page="includes/table_body.jsp">
+                <jsp:param name="id" value="<%=phone.getName()%>"/>
+                <jsp:param name="count" value="<%=count%>"/>
+                <jsp:param name="data" value="<%=phone.toString()%>"/>
+            </jsp:include>
+. . .
+. . .
+<div class="container" style="margin-left:0px;width:25%">
+        <form class="form-anadir" action="PhoneActions">
+            <label for="inputName" class="sr-only">Nombre</label>
+            <input type="text" name="name" id="inputName" class="form-control" placeholder="Nombre" required autofocus>
+            <label for="inputNumber" class="sr-only">Número</label>
+            <input type="text" name="number" id="inputNumber" class="form-control" placeholder="Número" required>
+            <!--<input type="file" id="inputFile" class="form-control" placeholder="Imagen">-->
+            <input type="hidden" name="action" value="insert"/>
+            <button class="btn btn-primary btn-block" type="submit">Añadir</button>
+        </form>
+    </div>
+. . .
+. . .
+</code>
+Ejemplo de Java Servlet, correspondiente al mismo proyecto que la página JSP anterior:
+<code java>
+@WebServlet(name = "PhoneActions")
+public class PhoneActions extends HttpServlet {
+    private final static Logger LOGGER =
+            Logger.getLogger(PhoneActions.class.getCanonicalName());
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        String action = request.getParameter("action");
+        Repository repo = new PhoneRepository();
+        switch(action) {
+            case "insert":
+                repo.insert(new Phone(request.getParameter("name"),
+                        Phone.IMAGE,
+                        request.getParameter("number")));
+                response.sendRedirect("phones.jsp");
+                break;
+            case "delete":
+                repo.delete(request.getParameter("name"));
+                response.sendRedirect(request.getHeader("referer"));
+                break;
+            default:
+                break;
+        }
+    }
+}
+</code>
 === Python ===
 ((http://www.python.org))
+El lenguaje //Python// fue diseñado por //Guido van Rossum// y ahora se mantiene gracias a una comunidad de desarrolladores, y es open source.
 <figure>
 {{ django_apache.png }}
 <caption>Arquitectura habitual JSP/Servlets</caption></figure>
+Ejemplo de código escrito con Python. En este caso utilizando el framework //Django// para el desarrollo de aplicaciones web:
+En este caso, al tratarse de un framework MVC, tendremos la vista:
+<code python>
+<h1>Mis películas</h1> <a href="#">+</a>
+{% if lista_peliculas %}
+   <ul>
+       {% for pelicula in lista_peliculas %}
+           <li><a href="{% url 'pelicula' pelicula.id %}">{{ pelicula.titulo }}</a></li>
+       {% endfor %}
+    </ul>
+{% else %}
+   <p>No hay películas disponibles</p>
+{% endif %}
+</code>
+Separada del controlador:
+<code python>
+from django.shortcuts import render
+. . .
+def index(request):
+    lista_peliculas = Pelicula.objects.all()
+    context = {'lista_peliculas': lista_peliculas}
+    return render(request, 'mispeliculas/index.html', context)
+</code>
 === ASP.NET ===
-((https://www.asp.net))
+[[https://www.asp.net|ASP.NET]] es una tecnología, creada por Microsoft, para el desarrollo de sitio web dinámicos, aplicaciones y servicios web. Es la tecnología sucesora de lo que antes se conocía como //ASP//, la antigua tecnología de Microsoft para la creación de páginas web dinámicas.
+Al funcionar sobre la plataforma //.NET// de Microsoft, permite que se pueda desarrollar en cualquier de los lenguajes de programación de dicha plataforma, //Visual Basic .NET// o //C#//.
+Lo más habitual es verlo funcionar junto con el servidor web de Microsoft, IIS (Internet Information Server).
 <figure>
 {{ asp_iis.png }}
 <caption>Arquitectura habitual JSP/Servlets</caption></figure>
-==== Herramientas para el desarrollo web en entorno servidor ====
-----
+A continuación, un ejemplo de página web dinámica con ASP.NET (desarrollada en lenguaje C#) programando la acción que ocurre al pulsar un botón (aparece el texto de un formulario en la parte final de la web):
-===== Ejercicios =====
+<code csharp>
+protected void Button1_Click(object sender, EventArgs e)
+{
+   string buf = TextBox1.Text;
+   changed_text.InnerHtml = buf.ToUpper();
+}
+</code>
-----
+<code html>
+<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
+   Inherits="firstexample._Default" %>
-===== Proyectos de Ejemplo =====
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-----
+<html xmlns="http://www.w3.org/1999/xhtml" >
-===== Prácticas =====
+   <head runat="server">
+      <title>
+         Untitled Page
+      </title>
+   </head>
+   <body>
+      <form id="form1" runat="server">
+         <div>
+            <asp:TextBox ID="TextBox1" runat="server" style="width:224px">
+            </asp:TextBox>
+            <br />
+            <br />
+            <asp:Button ID="Button1" runat="server" Text="Enter..." style="width:85px" onclick="Button1_Click" />
+            <hr />
+            <h3> Results: </h3>
+            <span runat="server" id="changed_text" />
+         </div>
+      </form>
+   </body>
+</html>
+</code>
 ----
-(c) 2017 Santiago Faci
+(c) 2017-2019 Santiago Faci