middle page
first page
last page
#views
class IndexView(generic.ListView):
template_name = 'music/index.html'
paginate_by = 4
def get_queryset(self):
return Album.objects.all()
-----------------------------------
#template/index
{% extends 'music/base.html' %}
{% block title %}Albums{% endblock %}
{% block body %}
<div class="container-fluid">
<div class="row">
{% for album in object_list %}
<div class="col" style="margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;">
<div class="card" style="width: 200px;">
<img src="{{album.album_logo.url}}" class="card-img-top" style="height: 150px" alt="{{album.album_title}}">
<div class="card-body">
<div style="height: 40px"><h5 class="card-title">Album: {{album.album_title}}</h5></div>
<div style="height: 40px"><p class="card-text">Artist: {{album.artist}}</p></div>
<!-- Detail -->
<a href="{% url 'music:detail' album.id %}" class="btn btn-primary btn-sm">View Detail</a>
<!-- Edit -->
<a class="btn btn-default btn-sm" href="{% url 'music:album-update' album.id %}">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<!-- Delete -->
<a class="btn btn-default btn-sm" href="{% url 'music:album-delete' album.id %}">
<span class="glyphicon glyphicon-trash"></span>
</a>
</div>
<div class="card-footer text-muted">
Created by {{album.author}} @ {{album.date_posted}}
</div>
</div>
</div>
{% endfor %}
</div>
#---------------pagination----------------
<div class="row justify-content-between align-items-center mt-4">
<div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-pagination" href="?page=1" >First</a>
<a class="btn btn-pagination" href="?page={{page_obj.previous_page_number}}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-primary" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-pagination" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-pagination" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-pagination" href="?page={{page_obj.paginator.num_pages}}">Last</a>
{% endif %}
{% endif %}
</div>
</div>
#---------------pagination----------------
</div>
{% endblock %}
------------------------------------
#static/css
body{
height: 100vh;
background: white url("images/background.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
}
.btn-pagination{
background-color: black;
color: white;
}
.btn-pagination:hover{
color: yellow;
}
------------------------------
#template/base
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 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">
<!-- my css -->
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}">
<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>  Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>  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="{% url 'music:album-add' %}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Album
</a>
</li>
<li>
{% if user.is_authenticated %}
<a class="nav-link" href="{% url 'music:logout' %}">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout {{user.username}}
</a>
{% else %}
<a class="nav-link" href="{% url 'music:login' %}">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Login
</a>
{% endif %}
</li>
</ul>
</div>
</nav>
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">{{message}}</div>
{% else %}
<div class="alert alert-{{message.tags}}">{{message}}</div>
{% endif %}
{% endfor %}
{% endif %}
{% block body %}
{% endblock %}
</body>
</html>
--------------------------------------
#model
from django.db import models
from django.urls import reverse
from django.contrib.auth.models import User
class Album(models.Model):
artist = models.CharField(max_length=50)
album_title = models.CharField(max_length=50)
genre = models.CharField(max_length=50)
album_logo = models.FileField()
date_posted = models.DateTimeField(auto_now_add=True)
author = models.ForeignKey(User, on_delete=models.CASCADE, default=1)
#form submitted without action redirect to detail
def get_absolute_url(self):
return reverse('music:detail', kwargs={'pk': self.pk})
#query album.objects.get(pk=1)
def __str__(self):
return self.album_title + ' - ' + self.artist
class Song(models.Model):
album = models.ForeignKey(Album, on_delete=models.CASCADE)
file_type = models.CharField(max_length=50)
song_title = models.CharField(max_length=50)
is_favorite = models.BooleanField(default=False)
def __str__(self):
return self.song_title
# form submitted without action redirect to detail
def get_absolute_url(self):
return reverse('music:detail', kwargs={'pk': self.album.id})
No comments:
Post a Comment