Quiero mostrar un dato en mi pagina web que se encuentra en otra tabla, por ejemplo, tengo mi base de datos relacionada de esta forma:
[![introducir la descripción de la imagen aquí][1]][1]


donde mi llave foranea en mi tabla usuario es el idPerfil de la tabla perfil,
por lo cual mis tablas en MySQL, ya con datos registrados se ven de esta forma:
**TABLA USUARIO**

[![introducir la descripción de la imagen aquí][2]][2]


y mi **TABLA PERFIL**

[![introducir la descripción de la imagen aquí][3]][3]


lo que quiero saber es como podre hacerle para que en mi sitio web aparezca el **nombrePerfil** de acuerdo con la relacion, en lugar de que muestre el idPerfil **1** muestre el nombrePerfil **ADMINISTRADOR** lo mismo con el idPerfil 2 muestre **EMPLEADO** y no el idPerfil

[![introducir la descripción de la imagen aquí][4]][4]


  [1]: https://i.sstatic.net/deyel.png
  [2]: https://i.sstatic.net/wAXsk.png
  [3]: https://i.sstatic.net/A5xja.png
  [4]: https://i.sstatic.net/Ywj6D.png

Este es mi codigo donde mando a llamar los datos en la tabla

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <c:forEach var="dato" items="${lista}">
                                    <tr>
                                        <td>${dato.idUsuario}</td>
                                        <td>${dato.claveUsuario}</td>
                                        <td>${dato.nombre}</td>
                                        <td>${dato.apellido}</td>
                                        <td>${dato.email}</td>
                                        <td>${dato.contrasena}</td>
                                        <td>${dato.idPerfil}</td>
                                        <td>
                                            <a href="editar.htm?id=${dato.idUsuario}" class="btn btn-warning">Editar</a>
                                            <a href="delete.htm?id=${dato.idUsuario}" class="btn btn-danger">Eliminar</a>
                                        </td>
                                    </tr>
                                </c:forEach>

<!-- end snippet -->

Estas son mis consultas SQL, La de mostrar los datos

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    @RequestMapping("index.htm")
        public ModelAndView Listar()
        {
            String sql = "SELECT * FROM usuario";
            datos = this.jdbcTemplate.queryForList(sql);
            mav.addObject("lista", datos);
            mav.setViewName("index");
            return mav;
        }

<!-- end snippet -->

y mi consulta para insertar los datos

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    @RequestMapping(value = "agregar.htm", method = RequestMethod.POST)
        public ModelAndView Agregar(Persona p)
        {
            String sql = "INSERT INTO usuario(claveUsuario, nombre, apellido, email, contrasena) VALUES(?, ?, ?, ?, ?)";
            this.jdbcTemplate.update(sql,p.getClave(), p.getNom(), p.getApe(), p.getCorreo(), p.getPass());
            return new ModelAndView("redirect:/index.htm");
        }

<!-- end snippet -->

faltaría agregar el campo nombrePerfil a mi tabla usuario para que lo muestre
Cualquier ayuda se los agradecería