Monday, 11 March 2019

django 15 base html




#music/templates/music/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load staticfiles %}
    <!-- my css -->
    <link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}"/>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Srisakdi" rel="stylesheet">
    <title>{% block title %}Django{% endblock %}</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #fcefe5;">
        <a class="navbar-brand" style="font-family: 'Srisakdi', serif; font-weight: bold; text-shadow: 4px 4px 4px #aaa;" href="{% url 'music:index' %}">Django</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'music:index' %}"><span class="glyphicon glyphicon-cd" aria-hidden="true"></span>&nbsp Albums</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp Songs</a>
            </li>
          </ul>

            <form class="navbar-form navbar-left" role="search" method="get" action="#">
                <div class="form-group">
                    <input type="text" name="q" value=""/>
                </div>
                <button type="submit" >Search</button>
            </form>

            <ul class="navbar-nav navbar-right">
                <li>
                    <a class="nav-link" href="#">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Add Album
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="#">
                        <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    {% block body %}
    {% endblock %}
</body>
</html>

------------------------------------------------
#music/templates/music/index.html

{% extends 'music/base.html' %}
#overwrite title
{% block title %}Albums{% endblock %}

{% block body %}
    {% if all_albums %}
    <ul>
        {% for album in all_albums %}
        <li><a href="{% url 'music:detail' album.id %}">{{ album.album_title }}</a></li>
        {% endfor %}
    </ul>
    {% else %}
    <h3>There is no album</h3>
    {% endif %}
{% endblock %}

------------------------------------------------
#music/templates/music/detail.html

{% extends 'music/base.html' %}
{% block title %}Songs{% endblock %}

{% block body %}
    <img style="height: 150px;" src="{{album.album_logo}}">
    <h1>{{album.album_title}}</h1>
    <h3>{{album.artist}}</h3>

    <form action="{% url 'music:favorite' album.id %}" method="post">
        {% csrf_token %}
        {% for song in album.song_set.all %}
            <input type="radio" id="song{{forloop.counter}}" name="song" value="{{song.id}}" />
            <label for="song{{ forloop.counter}}">
                {{ song.song_title }}
                {% if song.is_favorite %}
                    <img src="https://img.icons8.com/material/24/000000/star.png"><br>
                {% endif %}
            </label><br>
        {% endfor %}
        <input type="submit" value="Favorite">
    </form>
{% endblock %}
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)