Sección 3: Música
Conexión a base de datos, generación de servicios REST registro, actualización,eliminación y obtención de pacientes
La tercera sección es el CRUD de música, creación, registro modificación y eliminación de datos relacionados a las pistas musicales a ser aplicadas durante la terapia.
La interfaz de usuario reside en el nodo "Música HTML", el cual esta escrito en html, css, js y utiliza jsgrid para poblar una tabla y permitir las acciones de CRUD, además cuenta con la funcionalidad de reproducir las pistas musicales que han sido ingresadas en la base de datos.
Las extensiones permitidas deben ser del tipo MIME audio y son las siguientes:
File Extension
MIME Type
au
audio/basic
snd
audio/basic
Linear PCM
audio/L24
mid
audio/mid
rmi
audio/mid
mp3
audio/mp3
mp4 audio
audio/mp4
aif
audio/x-aiff
aifc
audio/x-aiff
aiff
audio/x-aiff
m3u
audio/x-mpegurl
ra
audio/vnd.rn-realaudio
ram
audio/vnd.rn-realaudio
Ogg Vorbis
audio/ogg
Vorbis
audio/vorbis
wav
audio/vnd.wav
Para la interpretación de la eficiencia se utiliza la siguiente tabla, valorada de 0 a 5
Clase de eficiencia
Valor generado
La mayor eficiencia posible
5
Muy eficiente
4
Eficiente
3
Eficiente intermedio
2
Poco eficiente
1
La menor eficiencia posible
0
El código que permite el poblado de datos, registro, modificación y eliminación es el siguiente:
<script type="text/javascript">
$(function() {
$("#jsgrid").jsGrid({
width: "98%",
inserting: true,
editing: true,
sorting: true,
paging: true,
filtering: true,
inserting: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
autoload: true,
deleteConfirm: function(item) {
return "La pista músical \"" + item.musica_nombre + "\" va a ser eliminada del registro";
},
fields: [
{
name: "musica_id",
type: "hidden",
css: 'hide'
},
{
title: "Título",
name: "musica_nombre",
type: "text",
width: 50,
validate: "required"
},
{
title: "Género",
name: "musica_genero",
type: "text",
width: 50,
validate: "required"
},
{
title: "Url",
name: "musica_url",
type: "text",
width: 100,
validate: "required"
},
{
title: "Eficiencia",
name: "musica_eficiencia",
width: 50
},
{
type: "control"
}],
controller:
{
loadData: function(filter) {
return $.ajax({
url: "/api/musica",
dataType: "json"
});
},
insertItem: function(item) {
var d = $.Deferred();
$.ajax({
type: "POST",
url: "/api/musica",
data: item
}).done(function(insertItemReturnedFromServer) {
d.resolve(insertItemReturnedFromServer);
$("#jsgrid").jsGrid("loadData");
reloadSelect();
});
return d.promise();
},
updateItem: function(item) {
var d = $.Deferred();
$.ajax({
type: "PUT",
url: "/api/musica/update",
data: item
}).done(function(updatedItemReturnedFromServer) {
d.resolve(updatedItemReturnedFromServer);
reloadSelect();
});
return d.promise();
},
/*updateItem: function(item) {
return $.ajax({
type: "PUT",
url: "/api/pacientes/update",
data: item
});
},*/
deleteItem: function(item) {
return $.ajax({
type: "DELETE",
url: "/api/musica/delete",
data: item,
success: function () {
reloadSelect();
}
}).done(function(deleteItemReturnedFromServer)
{
d.resolve(deleteItemReturnedFromServer);
});
return d.promise();
}
}
});
// setInterval(function(){$("#jsgrid").jsGrid("loadData");}, 5000);
});
</script>Para permitir la reproducción de música, y la actualización del ajax al realizar un registro o modificación se utiliza la siguiente función, la cual se basa en asignar los valores a través de DOM
<section class="row">
<br/>
<label>Escuchar música</label>
<select
id="clienteP"
class="form-control"
name="clienteP"
data-source="/api/musica"
data-valueKey="musica_url"
data-displayKey="musica_nombre">
</select>
<div class="col-md-4"></div>
<div class="col-md-4">
<audio id="audio" preload="metadata" controls>
<source id="audioSource" src=""></source>
Your browser does not support the audio element.
</audio>
</div>
<div class="col-md-4"></div>
</section>
</div>
<script>
var globalid = 0;
$(document).on('change', '#clienteP', function(e) {
globalid = this.options[e.target.selectedIndex].value;
console.log(globalid);
var audio = document.getElementById('audio');
var source = document.getElementById('audioSource');
source.src = globalid;
audio.addEventListener('loadedmetadata', function() {
console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
audio.play();
});
audio.load(); //call this to just preload the audio without playing
});
function reloadSelect()
{
$('#clienteP').find('option').remove()
$('#clienteP').each(function() {
var $select = $(this);
$select.append('<option>Por favor seleccione música a escuchar</option>');
$.ajax({
url: $select.attr('data-source'),
}).then(function(options) {
options.map(function(option) {
var $option = $('<option>');
$option
.val(option[$select.attr('data-valueKey')])
.text(option[$select.attr('data-displayKey')]);
$select.append($option);
$select.trigger("chosen:updated");
});
});
});
}
reloadSelect();
</script>Cada REST es bastante similar al de la sección 2 con la excepción del REST en POST y PUT, los cuales utilizan una función para remplazar caracteres especiales en el campo URL y así evitar SQL injection.
nombre = msg.payload.musica_nombre
//Remplazamos el caracter ' con su valor en ASCII
url = msg.payload.musica_url.replace(/[']/g, "%27")
genero = msg.payload.musica_genero
msg.topic = "INSERT INTO musica (`musica_nombre`,`musica_genero`,`musica_url`) VALUES ('"+ nombre +"','"+ genero +"','"+ url +"');"
return msg;GET Música
GET http://localhost:1880/api/musica
Obtiene todas las pistas musicales en la base de datos
[{"musica_id":2,"musica_nombre":"Rock and rolls","musica_genero":"Rock","musica_url":"http://www.panacherock.com/downloads/mp3/01_Sayso.mp3","musica_duracion":"0","musica_eficiencia":1.1123}]POST Música
POST http://localhost:1880/api/musica
Ingresa los datos de las pistas musicales a la base de datos
Request Body
musica_url
string
musica_genero
string
musica_nombre
string
"La pista musical fue ingresada"UPDATE Música
PUT http://localhost:1880/api/musica/update
Query Parameters
musica_id
integer
Request Body
musica_url
string
musica_genero
string
musica_nombre
string
DELETE Música
DELETE
Path Parameters
string
Última actualización
¿Te fue útil?