Forntend:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Písničky a Akordy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Písničky a Akordy</h1>
<nav>
<a href="index.html">Domů</a>
<a href="login.html">Přihlásit se</a>
<a href="add-song.html">Přidat píseň</a>
</nav>
</header>
<main>
<h2>Seznam Písní</h2>
<div id="song-list">
<!-- Dynamicky načtený seznam písní -->
</div>
</main>
<script src="script.js"></script>
</body>
</html>
styl.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
header nav a {
color: #fff;
margin: 0 10px;
text-decoration: none;
}
main {
padding: 20px;
}
app.py
from flask import Flask, request, jsonify, render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config = 'sqlite:///songs.db'
app.config = False
db = SQLAlchemy(app)
# Model pro databázi
class Song(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
artist = db.Column(db.String(100), nullable=False)
chords = db.Column(db.Text, nullable=False)
# Inicializace databáze
@app.before_first_request
def create_tables():
db.create_all()
# API pro získání seznamu písní
@app.route('/api/songs', methods=)
def get_songs():
songs = Song.query.all()
return jsonify([{"id": song.id, "title": song.title, "artist": song.artist} for song in songs])
# API pro přidání nové písně
@app.route('/api/songs', methods=)
def add_song():
data = request.json
new_song = Song(title=data, artist=data, chords=data)
db.session.add(new_song)
db.session.commit()
return jsonify({"message": "Píseň přidána!"}), 201
if __name__ == '__main__':
app.run(debug=True)
Databáze se vytvoří automaticky při spuštění aplikace Flask díky db.create_all()
script.js
document.addEventListener("DOMContentLoaded", () => {
const songList = document.getElementById("song-list");
// Načtení seznamu písní z API
fetch("/api/songs")
.then(response => response.json())
.then(data => {
data.forEach(song => {
const songDiv = document.createElement("div");
songDiv.textContent = `${song.title} - ${song.artist}`;
songList.appendChild(songDiv);
});
})
.catch(error => console.error("Chyba při načítání písní:", error));
});
Formular:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Přidat Píseň</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Přidat Novou Píseň</h1>
</header>
<main>
<form id="add-song-form">
<label for="title">Název:</label><br>
<input type="text" id="title" required><br><br>
<label for="artist">Interpret:</label><br>
<input type="text" id="artist" required><br><br>
<label for="chords">Akordy/Text:</label><br>
<textarea id="chords" rows="5" required></textarea><br><br>
<button type="submit">Přidat píseň</button>
</form>
</main>
<script>
document.getElementById("add-song-form").addEventListener("submit", function(event) {
event.preventDefault();
const title = document.getElementById("title").value;
const artist = document.getElementById("artist").value;
const chords = document.getElementById("chords").value;
fetch("/api/songs", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ title, artist, chords })
})
.then(response => response.json())
.then(data => {
alert(data.message);
this.reset();
})
.catch(error => console.error("Chyba při přidávání písně:", error));
});
</script>
</body>
</html>
Číst dál...
K čemu zde vlastně profil je? Nikde zde nevidím žádné další uživatele, žádné akce, prostě nic!!! Vypadá to,, že stránky naprosto k ničemu :-(
Porta 2023
Pro milovníky krásné hudby.... Více informací: https://www.porta-festival.cz/pro-navstevniky
- pátek, 23 červen 2023 17:00
- Praha Řevnice, Lesní divadlo
Porta 2023
PÁTEK 23.ČERVNA SCÉNA LESNÍ DIVADLO * 17.00 Richard Krajčo 18.00 Nová sekce 18.50 soutěž 20.15 Ivan Hlas trio 21.00 soutěž 22.15 Samson a parta...
- pátek, 23 červen 2023 17:00
- Praha Řevnice, Lesní divadlo
Zdravím,
co takhle zde založit možnost vytvořit si vlastní album a přidávat si tam třeba vlastní skladby? Sám si zvolit zda budou veřejné a nebo jen pro určité lidi? Přidat k tomu i možnost vložit i nahranou skladbu? Udělat pro tento web trochu více a někam se posunout, je to zde trochu mrtvolné!!! Nikdo nic skoro nemůže, uložené album se třeba najednou smaže, trochu se věnovat zdrojovému kódu a aktualizacím....
Číst dál...
Proboha, to se dva roky řeší přidání funkce "přidat skladbu"? Dejte mi přístup do zdroje a já to udělám, je to primitivní zápis do databáze!
Jako dnes nemít možnost přidávat záznam je dost divný, leda by si zakladatel zakládal na tom, že je extrémně důležitý a jeho práci nikdo jiný nezvládne 
Číst dál...