Wateke: Descubre las Mejores Discotecas en tu Ciudad

Bienvenido a Wateke, tu portal especializado en la búsqueda y exploración de las discotecas más vibrantes y emocionantes de tu ciudad.

Con Wateke, encontrarás fácilmente el lugar perfecto para disfrutar de una noche inolvidable llena de música y diversión.

Visual Studio Code y Xampp (phpMyAdmin).

Lenguajes: PHP, SQL, HTML y CSS.

Pantalla Principal: Explora y Encuentra tu Discoteca Ideal

En nuestra pantalla principal, te damos la bienvenida con un diseño intuitivo y fácil de usar. Aquí, encontrarás:

• Título Principal: En la parte superior de la página, te recibimos con nuestro distintivo logotipo y el nombre de nuestro servicio, Wateke.
 
• Campo de Estilo de Música: Justo debajo del título, te ofrecemos la opción de seleccionar tu estilo de música preferido. Puedes explorar una amplia gama de géneros, desde el electrizante techno hasta los ritmos tropicales del reggaetón.

<label for="music">Music Style:</label>
        <select id="music" class="form-control">
                <option value="all">All</option>
                <option value="reggaeton">Reggaeton</option>
                <option value="techno">Techno</option>
        </select>

 

• Campo de Selección de Ciudad: Más abajo, tienes la posibilidad de elegir la ciudad en la que te encuentras. Nuestra base de datos abarca una amplia variedad de ciudades, así que encontrarás opciones emocionantes sin importar dónde te encuentres.
 

<label for="location">Location:</label>
        <select id="location" class="form-control">
                <option value="madrid">Madrid</option>
                <option value="barcelona">Barcelona</option>
        </select>

 

• Mapa con Marcadores: En la parte principal de la página, encontrarás un mapa interactivo con marcadores que indican la ubicación de las discotecas. Esta función te permite visualizar fácilmente la distribución geográfica de las opciones disponibles.
 

// Función para inicializar el mapa
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 40.416775, lng: -3.70379 }, // Coordenadas de Madrid
                zoom: 12 // Nivel de zoom inicial
            });
        
            // Agrega marcadores para cada discoteca
            const clubs = [
                { name: "Silikona", location: { lat: 40.406007356327635, lng: -3.6523181618687066 }, address: "Pl. del Encuentro, 1, Moratalaz, 28030 Madrid" },
                { name: "Moondance", location: { lat: 40.41865903926285, lng: -3.701100148375687 }, address: "C. de la Aduana, 21, Centro, 28012 Madrid" },
                { name: "Sala B", location: { lat: 40.43152516965834, lng: -3.700213533031417 }, address: "C. de Trafalgar, 6, Chamberí, 28010 Madrid" },
                { name: "Teatro Kapital", location: { lat: 40.40989994829465, lng: -3.6930761176890585 }, address: "C. de Atocha, 125, Centro, 28012 Madrid" },
                { name: "Shoko", location: { lat: 40.408901489068946, lng: -3.7105715311814342 }, address: "C. de Toledo, 86, Centro, 28005 Madrid" },
                { name: "La Cartuja", location: { lat: 40.416079061611136, lng: -3.70095240843254 }, address: "C. de la Cruz, 10, Centro, 28012 Madrid" },
                { name: "The Bassement", location: { lat: 40.43291866728769, lng: -3.7102472675295024 }, address: "C. de Galileo, 26, Chamberí, 28015 Madrid"},
                { name: "LAB theCLUB", location: { lat: 40.471612200044056, lng: -3.682425277208593 }, address: "Estación de Chamartín Planta Ático"},
                { name: "Fabrik", location: { lat: 40.27161173751371, lng:  -3.840829425017393 }, address: "Av. de la Industria, 82, 28970 Humanes de Madrid, Madrid"},
                { name: "X Private Club", location: { lat: 40.40465205817693, lng: -3.6555327773288773 }, address: "C. de la Cerámica, 76, Puente de Vallecas, 28038 Madrid"},
                { name: "Octogon", location: { lat: 40.40502787045241, lng: -3.6579574942401862 }, address: "C. de la Cerámica, 16, Puente de Vallecas, 28038 Madrid"},
                { name: "Mondo Disko", location: { lat: 40.41874043842268, lng: -3.6996289477658975 }, address: "C. de Alcalá, 20, Centro, 28014 Madrid"}
                // Agrega más discotecas aquí 
            ];

            clubs.forEach(club => {
                const marker = new google.maps.Marker({
                    position: club.location,
                    map: map,
                    title: club.name
                });

                // Event listener para abrir Google Maps al hacer clic en la dirección
                const infowindow = new google.maps.InfoWindow({
                    content: `<strong>${club.name}</strong><br>${club.address}`
                });
                marker.addListener("click", () => {
                    infowindow.open(map, marker);
                });
            });
        }

 

• Botón de Búsqueda: A la derecha de los campos de selección, encontrarás nuestro botón de búsqueda. Al hacer clic en él, accederás a una nueva pantalla donde se mostrarán las discotecas que coinciden con tus preferencias.
 

    <script>
 const searchForm = document.getElementById("search-form");

searchForm.addEventListener("submit", function(event) {
    event.preventDefault();
    const musicSelect = document.getElementById("music").value;
    const locationSelect = document.getElementById("location").value;

    let url = "php/discotecas.php";

    if (musicSelect !== "all") {
        url += `?music=${musicSelect}`;
    }

    if (locationSelect !== "all") {
        url += `${musicSelect !== "all" ? "&" : "?"}location=${locationSelect}`;
    }

    window.location.href = url;
});

 

 

Pantalla de Discotecas: Explora y Descubre tus Lugares Favoritos

Al pulsar el botón de búsqueda, serás dirigido a nuestra pantalla de discotecas, donde encontrarás:

• Tabla de Discotecas: Aquí se muestran las discotecas que coinciden con tus criterios de búsqueda. Cada entrada incluye el nombre de la discoteca, su dirección y un botón "Cómo Llegar" que te lleva directamente a Google Maps con la ubicación seleccionada.
 
• Campo de Sitio Web: También encontrarás un enlace directo al sitio web de cada discoteca, para que puedas obtener más información sobre eventos, horarios y promociones.
 
• Columna de Reseñas: Por último, podrás leer y dejar reseñas sobre cada discoteca. Tu opinión es importante para nosotros y para otros usuarios que buscan recomendaciones.

<table class='tabla-discotecas'>
        <tr>
            <th>Nombre</th>
            <th>Dirección</th>
            <th>Página Web</th>
            <th>Reseñas</th> <!-- Nueva columna para enlace a las reseñas -->

        </tr>
<?php
        while ($row = $result->fetch_assoc()) {
?>
        <tr>
            <td><?php echo $row['nombre']; ?></td>
            <td>
                <!-- Botón "Como Llegar" -->
                <a href="https://www.google.com/maps/dir/?api=1&destination=<?php echo urlencode($row['direccion']); ?>" target="_blank" class="button">Como Llegar</a>
                <!-- Mostrar la dirección -->
                <?php echo $row['direccion']; ?>
            </td>
            <td><a href="<?php echo $row['pagina_web']; ?>" class="hidden-link">Website</a></td>
            <td><a href="reviews.php?id=<?php echo $row['id_discoteca']; ?>">Ver reseñas</a></td> <!-- Enlace a la página de reseñas -->
        </tr>
<?php
        }
?>
</table>

   

Pantalla de Nueva Reseña: Comparte tu Experiencia

Si decides dejar una reseña, serás llevado a nuestra pantalla de Nueva Reseña, donde podrás:

• Seleccionar la Discoteca: Utiliza el desplegable para elegir la discoteca en la que deseas dejar tu reseña.

<label for="id_discoteca">Nightclub:</label>
            <select id="id_discoteca" name="id_discoteca">
                <option value="" disabled selected>Select a nightclub</option>
                <?php
                    while ($row = mysqli_fetch_assoc($result)) {
                        echo "<option value=" . $row['id_discoteca'] . ">" . $row['nombre'] . "</option>";
                    }
                ?>
            </select>
            <span id="id_discoteca_error" class="error-message"></span>

 

• Ingresar tu Nombre: Proporciona tu nombre para que otros usuarios conozcan quién está compartiendo la experiencia.
 

<label for="nombre">Your Name:</label>
            <input type="text" id="nombre" name="nombre">
            <span id="nombre_error" class="error-message"></span>

 

• Clasificar la Experiencia: Utiliza nuestros cinco círculos para clasificar tu experiencia, desde una estrella hasta cinco estrellas.
 

<label for="calificacion">Rating:</label>
            <div class="rating">
                <input type="radio" id="star5" name="calificacion" value="5">
                <label for="star5"></label>
                <input type="radio" id="star4" name="calificacion" value="4">
                <label for="star4"></label>
                <input type="radio" id="star3" name="calificacion" value="3">
                <label for="star3"></label>
                <input type="radio" id="star2" name="calificacion" value="2">
                <label for="star2"></label>
                <input type="radio" id="star1" name="calificacion" value="1">
                <label for="star1"></label>
            </div>
            <span id="calificacion_error" class="error-message"></span>

 

• Escribir un Comentario: Comparte tus pensamientos y comentarios sobre la discoteca en un campo de texto.
 

<label for="comentario">Comment:</label>
            <textarea id="comentario" name="comentario"></textarea>
            <span id="comentario_error" class="error-message"></span>

 

• Enviar tu Reseña: Una vez completados todos los campos, utiliza el botón de enviar para compartir tu reseña con la comunidad de Wateke.
 

<script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('form_grabar').addEventListener('submit', function(event) {
                var discoteca = document.getElementById('id_discoteca').value;
                // Resto de código
        });
</script>
// Resto de código
<form id="form_grabar" enctype="multipart/form-data" method="post" action="guardar_reviews.php">
        <button type="submit" id="submit_button">Submit</button>
</form>

 

Footer: Accesos Rápidos y Útiles

En la parte inferior de la página, nuestro footer incluye enlaces útiles:

• Página Principal: Vuelve rápidamente a la pantalla principal de Wateke.
 
• Nueva Reseña: Si deseas dejar una nueva reseña, puedes acceder a la pantalla correspondiente desde aquí.
 
• Uber: Si tienes la aplicación de Uber descargada, puedes acceder directamente a ella para organizar tu transporte hacia la discoteca de tu elección.
 
• Página del Ministerio: Para obtener información sobre los efectos del alcohol y la seguridad en la vida nocturna, te proporcionamos un enlace a la página oficial del Ministerio de Salud.

<footer  style="margin-top: 100px;">
        <nav class="footer-nav">
            <a href="../index.php">Main</a>
            <a href="new_reviews.php">New Review</a>
            <a href="uber://">Uber</a>
            <a href="https://pnsd.sanidad.gob.es/ciudadanos/informacion/alcohol/menuAlcohol/mitosRealidades.htm" target="_blank">No te Pases</a>
        </nav>
</footer>

 

Conexión con Base de Datos

Para proporcionarte la mejor experiencia de usuario, hemos establecido una conexión con una base de datos creada en XAMPP. En esta base de datos, hemos creado 4 tablas: discotecas, ciudades, género y reviews. Estas tablas nos permiten optimizar la web al facilitar las búsquedas, los filtrados y garantizar una navegación fluida para nuestros usuarios.

// Configuración de la conexión a la base de datos
include 'conexion.php';

// Esta función sirve para realizar la llamada a la BBDD deseada y comprobar que está disponible.
$con = mysqli_connect($Servidor, $Usuario, $Password, $bd);

 

Créditos

• Desarrollador: Carlos Valencia Sánchez
• Diseñador de Web: Carlos Valencia Sánchez
• Artista Gráfico: Carlos Valencia Sánchez

 

Contacto

Para obtener soporte técnico, reportar errores o proporcionar comentarios, no dudes en contactar.

---

Este documento proporciona una visión general de la web, incluyendo sus características, tecnología utilizada, requisitos del sistema, instrucciones y créditos. Para obtener más información detallada sobre el desarrollo y funcionamiento de la web, consulta la documentación interna o comunícate con el desarrollador.