Differences

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

--- apuntes:introduccion [2017/09/21 00:01] – [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 ===
-((http://www.oracle.com/technetwork/java/jsp-138432.html))
+[[http://www.oracle.com/technetwork/java/jsp-138432.html|JavaServer Pages]] (también conocido como JSP) es una tecnología creada para la creación de páginas web dinámicas del lado servidor. Al igual que PHP, su código se escribe embebido junto con el HTML de la página web y es el servidor de aplicaciones, en este caso, quién debe procesarlo para generar la página web resultante, en HTML.
-((http://www.oracle.com/technetwork/java/index-jsp-135475.html))
+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