Mi primera arquitectura web

Hola a todos!

Debo hacer una aplicación web (en principio, a usarse sólo en intranet), en la que, de acuerdo a permisos de usuario, se acceda a los datos de una base de datos PostgreSQL, y que, por ejemplo, se visualicen en el navegador de distintas formas (tablas, lineas, barras, ...) según los filtros dados por el usuario.

Tengo alguna experiencia en Java y en BBDD, y en el pasado vi ligeramente código HTML, CSS y Javascript, pero nunca he desarrollado una arquitectura por mi cuenta, así que empiezo de cero.

Para el proyecto que os comento, he estado pensado usar:
* Eclipse para desarrollarlo (generando un Dynamic Web Project)
* Apache para alojarlo
* HTML+CSS+Javascript en cliente, con la biblioteca chart.js
* JSP para la lógica recogida/escritura de datos de PostgreSQL (ya que JSP me ahorra trabajo por mis conocimientos en java).

Básicamente escribo en el foro para preguntar... ¿cómo lo veis? No sé si estoy eligiendo los elementos adecuados, porque no he visto mucho por Internet donde se hable del tandem JSP + javascript. Y a la vez, como os he dicho, no tengo ni idea de la arquitectura típica (de hecho ni siquiera soy desarrolladora/programadora... todo lo que sé me lo enseñó google), o los problemas que me pueden surgir al usar estos elementos.

Mi idea no es hacer un "monstruo" que todo lo pueda. Sólo una web sencilla que a la vez no esté cerrada a ampliaciones que puedan surgir.

He estado testando, para ver si era capaz de hacer todo lo que os escribo ahí arriba. Para mi es un poco extraño, porque pongo código HTML, scripts y código java en un mismo .jsp, y no se si es el procedimiento habitual, como podéis ver en mi index.jsp y page2.jsp:

index.jsp

<%@ page import="java.io.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>    
	<link rel="stylesheet" href="css/style.css" type="text/css"></link>
   </head>
<body>		
     <form action="index.jsp" method="post">   
    	<input type="date" name="date1" placeholder="" >
    	<input type="submit" value="actualizar"/>
    </form> 
    <% 
	if(request.getParameter("date1") != null) {
        session.setAttribute("date1", request.getParameter("date1"));
    }
    %>
	
    <jsp:include page="jsp/page2.jsp" flush="true" >
    	<jsp:param name="foo" value="nada"/>
	</jsp:include>
       
</body>
</html>

page2.jsp

<%@ page import="java.io.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%!
    // --- String Join Function
    public String join(ArrayList<?> arr, String del)
    {
        StringBuilder output = new StringBuilder();
        for (int i = 0; i < arr.size(); i++)
        {
            if (i > 0) output.append(del);         
            if (arr.get(i) instanceof String) output.append("\"");
            output.append(arr.get(i));
            if (arr.get(i) instanceof String) output.append("\"");
        }
        return output.toString();
    }
</script>
%>

<!DOCTYPE html>
<html>
<head>
    <title>Oracle Demo</title>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>
<body>    	
    <script>
        <%                     
            Class.forName("org.postgresql.Driver").newInstance();
            final String host = "jdbc:postgresql://localhost:5432/postgres";
            final Connection conn = DriverManager.getConnection(host, "postgres", "postgres");
            final Statement stmt = conn.createStatement();
            final ResultSet rs = stmt.executeQuery("SELECT * FROM \"MI_TABLA\"");

            ArrayList<String> months = new ArrayList<String>();
            ArrayList<Integer> users = new ArrayList<Integer>();

            while(rs.next())
            {
                months.add(rs.getString("name_0"));
                users.add(Integer.parseInt(rs.getString("id")));
            }

            conn.close();
        %>

        var monthData = [<%= join(months, ",") %>];
        var userData = [<%= join(users, ",") %>];
        
    </script>

    <canvas id="myChart" width="400" height="100%"></canvas>
	<script>
	var ctx = document.getElementById('myChart').getContext('2d');
	var myChart = new Chart(ctx, {
	    type: 'bar',
	    data: {
	        labels: monthData,
	        datasets: [{
	            label: '# Activo',
	            data: userData,
	            backgroundColor: '#D6E9C6',	           
	            borderWidth: 1
	        },
	        {
	            label: '# Inactivo',
	            data: [12, 19, 3, 5, 2, 3],
	            backgroundColor: '#FAEBCC',
	            borderWidth: 1
	        },
	        {
	            label: '# Error',
	            data: [1, 9, 3, 5, 2, 3],
	            backgroundColor: '#EBCCD1',
	            borderWidth: 1
	        }
	        ]
	    },
	    options: {
	    	title:{
	    		 display: true,
	             text: "Tiempos de actividad: " + "${date1}" 
		    },
	        scales: {
	            xAxes: [{
	                stacked: true,
		            scaleLabel: {
		            }
	            }],
	            yAxes: [{
	                stacked: true,
	                ticks: {
	                    beginAtZero: true
	                },
		            scaleLabel: {
		                display: true,
		                labelString: 'Tiempo (h)'
		            }
	            }]
	        }
	        
	    }
	});
	</script>
    
    <div id="myChart"></div>
</body>
</html>

Espero vuestros comentarios.

Gracias y un saludo!

0
Puntos

1001
Visitas

0
Resp

Por monicaromero_8 hace 51 meses

Principiante