Add new views and styles for music application

- Created new CSS files for styling the application, including home.css and style.css.
- Implemented 403 and 404 error views with appropriate messages and navigation.
- Developed a dump view to display deleted elements with restoration options.
- Enhanced home view to include music search functionality and display results.
- Added listplay view for managing music playlists, including creation and deletion options.
- Implemented loadmusic view for uploading new music with necessary fields.
- Created login and register views for user authentication.
- Developed sound view to display individual music tracks with playback controls and options for liking and deleting.
- Updated menu view to include navigation links based on user authentication status.
This commit is contained in:
2026-01-05 17:20:17 -04:00
parent 24f62ca4c2
commit a8624fc847
33 changed files with 1370 additions and 0 deletions

8
view/403.view.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="body text-center" style="background-color: #212529;">
<?php include $views['menu'] ?>
<br><br>
<h1 class="text-muted" style="font-size: 200px;">403</h1>
<h1 class="text-muted">Acceso no autorizado!</h1>
<br>
<a href="./?view=home" class="btn bg-info text-white"><i class="fas fa-arrow-left"></i> volver</a>
</div>

11
view/404.view.php Normal file
View File

@@ -0,0 +1,11 @@
<div class="body" style="background-color: #212529;">
<?php include $views['menu'] ?>
<br><br>
<center>
<img class="box-10" src="<?= $assets['IMAGE']['FILE_DIR']['404'] ?>" alt="">
<br><br>
<h1 class="text-muted">P&aacute;gina no encontrada!</h1>
<br>
<a href="./?view=home" class="btn btn-primary"><i class="fas fa-arrow-left"></i> volver</a>
</center>
</div>

42
view/dump.view.php Normal file
View File

@@ -0,0 +1,42 @@
<div class="body">
<?php include $views['menu']; ?>
<div class="container mt-5">
<h1 class="text-muted">Elementos Eliminados (<?= count($elementDelete) ?>)</h1>
<?php if(empty($elementDelete)):?>
<hr class="dropdown-divider">
<h2 class="text-muted text-center"><i>No Hay Elemento Eliminados.</i></h2>
<hr class="dropdown-divider">
<?php else:?>
<table class="table text-white">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha</th>
<th>Acci&oacute;n</th>
</tr>
</thead>
<tbody>
<?php foreach ($elementDelete as $element) : ?>
<tr>
<td><?= $element['name'] ?></td>
<td><?= date('h:i A | d M Y', strtotime($element['date'])) ?></td>
<td>
<?php if (time() < (strtotime($element['date']) + 86400)) : ?>
<form action="" method="post">
<input type="hidden" name="delete" value="<?= $element['id'] ?>">
<input type="hidden" name="origin" value="<?= $element['origin'] ?>">
<button type="submit" class="btn btn-info">Restaurar</button>
</form>
<?php else:?>
<span class="text-muted"><i>No Disponible</i></span>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif;?>
<br><br>
<span class="text-muted"><i>Nota: solo dispone de 24 horas para restaurar un elemento y 1 hora para borrar una m&uacute;sica.</i></span>
</div>
</div>

62
view/home.view.php Normal file
View File

@@ -0,0 +1,62 @@
<div class="body">
<?php include $views['menu']; ?>
<div class="container-fluid mt-3">
<div class="card" style="background-color: #212529;">
<div class="card-body">
<h1 class="text-muted">Busca tu m&uacute;sica favorita</h1>
<form action="" method="get">
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Nombre o Autor de Música a Buscar" required>
</div>
</form>
</div>
</div>
<?php if (isset($_GET['search'])) : ?>
<div class="card" style="background-color: #212529;">
<div class="card-header" style="background-color: #212529;">
<h2 class="text-muted">Resultados de Busqueda (<?= count($musics) ?>)</h2>
<hr class="dropdown-divider">
<br>
<?php foreach ($musics as $sound) : ?>
<?php include $views['sound']; ?>
<?php endforeach; ?>
</div>
<div class="card-body">
<br><br><br><br><br>
</div>
</div>
<?php endif; ?>
</div>
<?php if (!isset($_GET['search'])) : ?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php for ($i = 0; $i < count($assets['IMAGE']['CAROUSEL']['FILE_DIR']); $i++) : ?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?= $i ?>" class="<?= $i == 0 ? 'active' : '' ?>"></li>
<?php endfor; ?>
</ol>
<div class="carousel-inner">
<?php foreach ($assets['IMAGE']['CAROUSEL']['FILE_DIR'] as $index => $path) : ?>
<div class="carousel-item <?= $index == 'bfmv' ? 'active' : '' ?>">
<img class="d-block w-100" src="<?= $path ?>">
</div>
<?php endforeach; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid mt-5">
<h1 class="text-muted">LO NUEVO HASTA AHORA</h1>
<div class="dropdown-divider"></div><br>
<?php foreach($musics as $sound):?>
<?php include $views['sound'];?>
<?php endforeach;?>
</div>
<?php endif; ?>
<br><br><br><br><br>
</div>

43
view/listplay.view.php Normal file
View File

@@ -0,0 +1,43 @@
<div class="body">
<?php include $views['menu']; ?>
<div class="container-fluid mt-4">
<?php if (!isset($_GET['listmusic'])) : ?>
<h1 class="text-muted">Listas de Reproducci&oacute;n</h1>
<div class="dropdown-divider"></div>
<?php if (count($listsName) == 0) : ?>
<h3 class="text-muted text-center">No hay listas de reproducci&oacute;n disponibles.</h3>
<?php else : ?>
<?php foreach ($listsName as $listName) : ?>
<form action="" method="post" id="form_<?= $listName['listName'] ?>">
<a href="./?view=<?= $view ?>&listmusic=<?= md5($listName['idList']) ?>">
<h2 class="text-white"><i class="fas fa-plus"></i> <?= $listName['listName'] ?>
<a href="#" onclick="document.getElementById('form_<?= $listName['listName'] ?>').submit()"><i class="fas fa-trash-alt text-danger cursor-pointer"></i></a>
<input type="hidden" name="deleteList" value="<?= $listName['idList'] ?>">
</h2>
</a>
</form>
<?php endforeach; ?>
<?php endif; ?>
<div class="dropdown-divider"></div>
<button class="btn btn-primary" id="show-add-new-list" onclick="onClick.home.hidden('new-list');onClick.home.hidden('show-add-new-list');">Nueva Lista</button>
<div id="new-list" hidden>
<br>
<form action="" method="post">
<div class="form-group">
<label for="listname" class="text-white">Nombre de Lista</label><br>
<input type="text" name="txtListName" id="listname" minlength="3" required><br>
<button class="btn btn-danger" type="button" onclick="onClick.home.hidden('new-list');onClick.home.hidden('show-add-new-list');">Cancelar</button>
<button class="btn btn-primary" type="submit">Crear</button>
</div>
</form>
</div>
<?php else : ?>
<h1 class="text-muted">Lista de Reproducci&oacute;n <?=$listMusics['listName']?></h1>
<div class="dropdown-divider"></div>
<?php foreach($listMusics['musics'] as $music):?>
<?php $sound = $music['music'];?>
<?php include $views['sound'];?>
<?php endforeach;?>
<?php endif; ?>
</div>
</div>

53
view/loadmusic.view.php Normal file
View File

@@ -0,0 +1,53 @@
<div class="body">
<?php include $views['menu']; ?>
<div class="container mt-5">
<?php if (!isset($_GET['message'])) : ?>
<form action="" method="post" enctype="multipart/form-data">
<div class="card" style="background-color: #212529;">
<div class="card-header" style="background-color: #212529;">
<h1 class="text-muted"><i class="fas fa-music"></i> Nueva M&uacute;sica</h1>
</div>
<div class="card-body">
<div class="form-group">
<label for="title" class="text-white">T&iacute;tulo de la M&uacute;sica</label>
<input type="text" class="form-control" name="txtTitle" id="title" placeholder="título..." minlength="6" required>
</div>
<div class="form-group">
<label for="author" class="text-white">Nombre del Autor</label>
<input type="text" class="form-control" name="txtAuthor" id="author" placeholder="author..." minlength="6" required>
</div>
<div class="form-group">
<label for="description" class="text-white">Descripci&oacute;n de la M&uacute;sica</label>
<textarea class="form-control form-control-alternative" name="txtDescription" id="description" rows="3" placeholder="(opcional)"></textarea>
</div>
<div class="form-group">
<label for="" class="text-white">G&eacute;nero Musical</label>
<select name="genner" id="genner" class="form-control">
<?php foreach ($gennerMusical as $index => $genner) : ?>
<option value="<?= $index ?>"><?= $genner['gennerName'] ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="fileMusic" class="text-white">Cargar el archivo musical</label>
<input type="file" name="fileMusic" id="fileMusic" class="form-control" accept=".WAV, .AIFF, .AU, .FLAC, .MPEG-4, .Shorten, .TTA, .ATRAC, .Apple Lossless, .MP3, .Vorbis, .Musepack, .AAC, .WMA, .Opus, .OGG, .DSD, .MQA" required>
</div>
</div>
<div class="card-footer text-right" style="background-color: #212529;">
<button type="submit" class="btn btn-success">Cargar</button>
</div>
</div>
</form>
<?php else:?>
<div class="card bg-<?=$_GET['action']?>">
<div class="card-body alert alert-<?=$_GET['action']?>">
<span class="display-3"><?=$_GET['message']?></span>
</div>
<div class="card-footer" style="background-color: #212529;">
<a href="./" class="btn btn-success"><i class="fas fa-arrow-left"></i> Inicio</a>
</div>
</div>
<?php endif; ?>
</div>
<br><br><br><br><br>
</div>

42
view/login.view.php Normal file
View File

@@ -0,0 +1,42 @@
<div class="body">
<?php include $views['menu'] ?>
<div class="container px-lg-9 mt-8">
<div class="card text-white px-lg-8 py-lg-5" style="background-color: #212529;">
<div class="card-header" style="background-color: #212529;">
<h2 class="text-white">Inicio de Sesión</h2>
</div>
<div class="card-body">
<?php if (isset($_POST['username'])) : ?>
<label for="" class="alert alert-danger">Usuario y/o clave inválido.</label>
<?php endif; ?>
<form action="" method="post">
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input class="form-control form-control-alternative" name="username" placeholder="Usuario" type="text" minlength="6" required>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
</div>
<input class="form-control form-control-alternative" name="password" placeholder="Contraseña" type="password" minlength="6" required>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Acceder</button>
</div>
</form>
</div>
<div class="card-footer" style="background-color: #212529;">
<a href="./?view=register">Registrarme</a>
</div>
</div>
</div>
<br><br><br><br><br>
</div>

4
view/logout.view.php Normal file
View File

@@ -0,0 +1,4 @@
<?php
Session::logout();
header('location: ./?view=home');
?>

59
view/menu.view.php Normal file
View File

@@ -0,0 +1,59 @@
<div class="navbar navbar-expand-lg navbar-dark" style="background-color: #212529;box-shadow: 0px 1px 15px 2px #6c757d;">
<div class="container">
<a class="navbar-brand" href="./"><?= $html->getTitle() ?></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-default">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="javascript:void(0)">
<img src="<?= $html->getIconPage() ?>">
</a>
</div>
<div class="col-6 collapse-close">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class="navbar-nav ml-lg-auto">
<?php if (Session::Auth()) : ?>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="./?view=loadmusic">
<span><i class="fas fa-cloud-upload-alt"></i> Cargar M&uacute;sica</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-link-icon" href="#" id="navbar-default_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span><?=strtoupper(Session::getUsername())?></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1" style="background-color: #212529;">
<a class="dropdown-item text-white disabled" href="#"><?=Session::Admin()?'Administrador':'Miembro'?></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-white" href="./?view=dump">Papeler&iacute;a de Recliclaje</a>
<a class="dropdown-item text-white" href="./?view=listplay">Lista de Reproducci&oacute;n</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-white" href="./?view=logout"><i class="fas fa-sign-out-alt"></i>Cerrar Sesi&oacute;n</a>
</div>
</li>
<?php else : ?>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="./?view=login">
<span><i class="fas fa-sign-in-alt"></i> Acceder</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="./?view=register">
<span><i class="fas fa-user-plus"></i> Registrarse</span>
</a>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</div>

62
view/register.view.php Normal file
View File

@@ -0,0 +1,62 @@
<div class="body">
<?php include $views['menu'] ?>
<div class="container px-lg-9 mt-8">
<?php if (!isset($_GET['newuser'])) : ?>
<div class="card text-white px-lg-8 py-lg-5" style="background-color: #212529;">
<div class="card-header" style="background-color: #212529;">
<h2 class="text-white">Nuevo Usuario</h2>
</div>
<div class="card-body">
<?php if (isset($_GET['message'])) : ?>
<label class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> <?= $_GET['message'] ?></label>
<?php endif; ?>
<form action="" method="post">
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input class="form-control form-control-alternative" name="username" placeholder="Usuario" type="text" minlength="6" required>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
</div>
<input class="form-control form-control-alternative" name="password" placeholder="Contraseña" type="password" minlength="6" required>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
</div>
<input class="form-control form-control-alternative" name="rpassword" placeholder="Repetir Contraseña" type="password" minlength="6" required>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Crear</button>
</div>
</form>
</div>
<div class="card-footer" style="background-color: #212529;">
<a href="./?view=login">Iniciar Sesi&oacute;n</a>
</div>
</div>
<?php else : ?>
<div class="card" style="background-color: #212529;">
<div class="card-body">
<label class="alert alert-success"><?= $_GET['message'] ?></label>
</div>
<div class="card-footer" style="background-color: #212529;">
<a href="./?view=login" class="btn btn-primary">Iniciar Sesi&oacute;n</a>
</div>
</div>
<?php endif; ?>
</div>
<br><br><br><br><br>
</div>

100
view/sound.view.php Normal file
View File

@@ -0,0 +1,100 @@
<div style="width: 19rem;display: inline-block;">
<div class="card">
<div class="card-header" style="background-color: #212529;">
<div class="row">
<div class="col text-uppercase"><strong class="text-muted"><?= $sound['nameMusic'] ?></strong></div>
<div class="col text-right">
<span class="icon icon-shape rounded-circle bg-gray text-white">
<i class="fas fa-music"></i>
</span>
</div>
</div>
</div>
<div class="card-body" style="background-color: #212529;">
<audio id="sound_<?= $sound['idMusic'] ?>">
<source src="<?= $assets['SOUND']['FILE_DIR'][$sound['fileNameMusic']] ?>" type="<?= $sound['formatMusic'] ?>">
</audio>
<div class="music">
<div class="progress-wrapper">
<div class="progress-info">
<div class="progress-label">
<i class="fas fa-play" progress="progress_<?= $sound['idMusic'] ?>" time="time_<?= $sound['idMusic'] ?>" onclick="onClick.home.play(this, 'sound_<?= $sound['idMusic'] ?>')"></i>
<i class="fas fa-stop" progress="progress_<?= $sound['idMusic'] ?>" time="time_<?= $sound['idMusic'] ?>" onclick="onClick.home.stop()"></i>
</div>
<div class="progress-percentage">
<span id="time_<?= $sound['idMusic'] ?>"></span>
<i class="fas fa-volume-up" onclick="onClick.home.hidden('vol_<?= $sound['idMusic'] ?>')"></i>
<input class="volumeSound" id="vol_<?= $sound['idMusic'] ?>" type="range" onchange="onClick.home.volume(this, 'sound_<?= $sound['idMusic'] ?>')" onmousemove="onClick.home.volume(this, 'sound_<?= $sound['idMusic'] ?>')" hidden>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-primary" id="progress_<?= $sound['idMusic'] ?>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
</div>
<?php if (!empty($sound['descriptionMusic'])) : ?>
<div id="description_<?= $sound['idMusic'] ?>" hidden>
<div class="dropdown-divider"></div>
<span><?= $sound['descriptionMusic'] ?></span>
</div>
<?php endif; ?>
<div class="dropdown-divider"></div>
<div class="row">
<div class="col">
<h6 class="form-label text-gray" style="font-weight: normal;">G&eacute;nero: <i><span class="text-uppercase badge badge-danger"><?= $sound['genner']['gennerName'] ?></span></i></h6>
</div>
<div class="col">
<?php if (!empty($sound['descriptionMusic'])) : ?>
<button class="btn-description bg-info" onclick="onClick.home.hidden('description_<?= $sound['idMusic'] ?>')">Descripci&oacute;n</button>
<?php endif; ?>
</div>
</div>
<h6 class="form-label text-gray" style="font-weight: normal;">Publicado por: <i><span class="text-uppercase text-white"><?= $sound['user']['username'] ?></span></i></h6>
<h6 class="form-label text-gray" style="font-weight: normal;">Fecha de Pub.: <i><span class="text-uppercase text-white"><?= date('h:i A | d M Y', strtotime($sound['dateMusic'])) ?></span></i></h6>
<div class="dropdown-divider"></div>
<a href="./?view=<?= $view ?>&search=<?= $sound['authorMusic'] ?>" class="badge badge-success text-center"><?= $sound['authorMusic'] ?></a>
</div>
<div class="card-footer" style="background-color: #212529;">
<div class="row">
<?php if (Session::Auth()) : ?>
<div class="col text-success"><span class="cursor-pointer"><?= $sound['likes'] ?> <i class="<?= $sound['like'] ? 'fas' : 'far' ?> fa-thumbs-up" onclick="onClick.home.like(this, '<?= $sound['idMusic'] ?>')"></i></span></div>
<?php else : ?>
<a href="./?view=login">
<div class="col text-success"><?= $sound['likes'] ?> <i class="<?= $sound['like'] ? 'fas' : 'far' ?> fa-thumbs-up"></i></div>
</a>
<?php endif; ?>
<div class="col text-center">
<?php if (Session::Auth()) : ?>
<form action="" method="post" id="form_footer_<?= $sound['idMusic'] ?>">
<a href="<?= $assets['SOUND']['FILE_DIR'][$sound['fileNameMusic']] ?>" download="<?= $sound['nameMusic'] . '.' . (explode('.', $assets['SOUND']['FILE_DIR'][$sound['fileNameMusic']])[2]) ?>"><i class="fas fa-cloud-download-alt cursor-pointer"></i></a>
<?php if (time() <= (strtotime($sound['dateMusic']) + 3600) && $sound['idUser'] == Session::getUserID()) : ?>
<input type="hidden" name="delete" value="<?= $sound['idMusic'] ?>">
| <a href="#" onclick="document.getElementById('form_footer_<?= $sound['idMusic'] ?>').submit()"><i class="fas fa-trash-alt text-danger cursor-pointer"></i></a>
<?php endif; ?>
</form>
<?php endif; ?>
</div>
<div class="col text-right">
<?php if (Session::Auth()) : ?>
<div class="card" id="list_<?= $sound['idMusic'] ?>" style="position: absolute;bottom: 0px;right: 20px;width: 15rem;" hidden>
<div class="card-header text-center text-uppercase text-muted" style="background-color: #212529;">Mis Listas</div>
<div class="card-body text-left" style="background-color: #212529;">
<div class="dropdown-divider"></div>
<?php foreach ($listsName as $listName) : ?>
<form action="./?view=listplay" method="post" id="form_<?= $sound['idMusic'] ?>_<?= $listName['idList'] ?>">
<input type="hidden" name="idMusic" value="<?= $sound['idMusic'] ?>">
<input type="hidden" name="idList" value="<?= $listName['idList'] ?>">
<a onclick="document.getElementById('form_<?= $sound['idMusic'] ?>_<?= $listName['idList'] ?>').submit()" class="dropdown-item text-white cursor-pointer"><i class="fas fa-plus"></i> <?= $listName['listName'] ?></a>
</form>
<?php endforeach; ?>
<div class="dropdown-divider"></div>
</div>
<a href="./?view=listplay" class="btn bg-info text-white card-footer"><i class="fas fa-plus"></i> Nueva Lista</a>
</div>
<i class="fas fa-plus cursor-pointer" onclick="onClick.home.hidden('list_<?= $sound['idMusic'] ?>')"></i>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>