Django Tutorial for Beginners - 30 - Model Forms

preview_player
Показать описание
Рекомендации по теме
Комментарии
Автор

Ok. Before you start the tutorials make sure you already changed the templates index.html, details.html, and the base.html. I'm using Bootstrap 4

<--index.html-->
{% extends 'music/base.html' %} {% block body %}
<div class="container">
<div class="row">
{% for album in all_albums %}
<div class="col-xs-12 col-md-6">
<!-- Card -->
<article class="card">
<img height="300 px" class="card-img-top img-responsive" src="{{ album.album_cover }}" alt="" />
<div class="card-body">
<h4 class="card-title">{{ album.title }}</h4>
<h6 class="text-muted">{{ album.artist }}</h6>
<div class="btn-group" role="group" aria-label="Basic example">
<a href="{% url 'music:detail' album.id %}" class="btn btn-dark btn-sm">View Details</a>
<a href="#" class="btn btn-success btn-sm"><i class="fas fa-star"></i></a>
<a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></a>
</div>

</div>
</article>
<!-- end card -->
</div>
{% endfor %}
</div>
</div>
{% endblock %}


<--base.html-->
<!DOCTYPE html>
<html lang="en">

<head>
crossorigin="anonymous">

<!-- Compiled and minified CSS



<!-- Loads the path to your static files -->
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}" />

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %} Viberr {% endblock %}</title>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="{% url 'music:index' %}">Viberr</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'music:index' %}">
<span class="fas fa-heart"></span> Albums
<span
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-music"></span> Songs
</a>
</li>
<li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>

<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'music:index' %}">
<span class="fas fa-plus"></span> Add Album</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'music:index' %}">
<span class="fas fa-power-off"></span> Log-out</a>
</li>
</ul>

</div>

</nav>

{% block body %}
{% endblock %}

<!--Import jQuery before materialize.js-->

<!-- Compiled and minified JavaScript

<script src="{% static 'music/style.js' %}"></script> -->





</body>

</html>


<--detail.html-->
{% extends 'music/base.html' %} {% block title %} Album Details {% endblock %} {% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<figure class="figure">
<img src="{{album.album_cover}}" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption"><p>{{ album.artist }} | {{ album.title }}</p>
<p>{{ album.brief_description }}</p></figcaption>
</figure>
</div>
<div class="col-sm-12 col-md-8">
<h2>All Songs
<span style="padding-left: 2em;">
<a href="#" class="btn btn-primary btn-sm">
<i class="fas fa-plus"></i>
</a>
</span>
</h2>
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Audio File</th>
<th>Favorite</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for song in album.song_set.all %}
<tr>
<td>{{ song.title }}</td>
<td>.{{ song.file_type }}</td>
<td>{% if song.is_favorite %}
<td>
<div class="btn-group">
<a class="btn btn-warning btn-sm" href="#">
<i class="fas fa-edit"></i>
</a>
<a class="btn btn-danger btn-sm" href="#">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
{% endfor%}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

brodWenDayondon
Автор

If anyone stuck, because of the changed design, compare your files to files in this repository:
github.com/monteua/viberr
I think, all the new code, which was not showed you can find here.

ArximedMonte
Автор

If you're watching in 2018:
Note that:
- from django.core.urlresolvers import reverse
should now be ->
- from django.urls import reverse

retkoussa
Автор

I knew this day was day I have to go and learn bootstrap! lol

sean
Автор

I actually appreciate how it's all combined - Django, css, html and bootstrap - but that's because I don't know any of that! Great videos!

MaverickQbiak
Автор

for those who are stuck, this is what you can try. goto his github, copy the code for the index.html and detail.html in your files. When you try to re-run your site you will get some errors. All you do is delete the references to the views or functions that don't yet exists. Foe example, just set href= "", this will just set it to dead links for the time being.

weho_brian
Автор

Thanks, Bucky :) a clean tut as always. :) For all people complaining about this Bootstrap thing. This is a tutorial about Back-End-Development. No Front-End-Design. There are thousands of videos for bootstrap.

pascallohscheidt
Автор

If you are working with Django 2.0. its now "from django.urls import reverse" instead of "django.core.urlresolvers import reverse".

ahmedtevez
Автор

** DYI **

Django 2.0 removes the django.core.urlresolvers module, which was moved to django.urls in version 1.9. You should change any import to use django.urls instead.

tanetsriamorn
Автор

that awkward moment when you have watched 30 tutorials and still don't understand django.

jyothishkumar
Автор

Bucky... Typically; I love your videos, I have been watching them since I was a kid, I have learned a lot from them, they are very informative, detailed, and of the highest quality but in this case; you have left out a HUGE chunk of essential information... I can understand not explaining all of it but you really should at least show it on camera so that we can copy it. I am honestly, and unfortunately; a little disappointed over this one.

I know that people are going to say "Well, it's a free tutorial so; you can't complain." and while I appreciate the effort; keep in mind that because I cannot follow the tutorial from this point forward; you just wasted hours (over the course of 2-3 days) of my time and since I still don't understand Django; I have to go watch someone else's videos and spend even more time covering the basics (which I already spent the last 2-3 days learning) all over again.

I just wanted you to know exactly what you are doing to people with this tutorial so that you could understand why you need to do something about it. I recommend that you please either redo this video or take down the entire series so that this doesn't happen to the next guy that comes along. At the VERY least you could put an annotation in the first video that says "Knowledge of bootstrap is REQUIRED for this tutorial series; you have been warned." In the first video you mention that it is used and that you won't be explaining it, and that is fine but; you never specifically say "I am going to leave chunks of code off camera so; you will need to know bootstrap to follow along."

I am tempted to skip ahead and try to piece together the file from future videos to try to recover the time that I have lost but I am leery because I don't know whether or not you are going to do this again on video 36 or video 37... I'm going to take a break while I decide how to approach this moving forward...

EDIT: After perusing the comments I found a comment by Vadym Stavskyi that puts the missing code in a github repo: github.com/monteua/viberr I believe it might be more full featured than the code you have at this point in the tutorial but it's better than nothing. Could I recommend that you please put this link in the video description and/or an annotation in the video?

Deeredman
Автор

making html/css modifications off-screen is not cool mate, it confuses ppl

AthomieldD
Автор

c'mon dude not all of us know bootstrap too well despite watching your tutorials on it

swarlos
Автор

It might be that people should know bootstrap but i didnt and was following the tutorial step by step to learn by typing. And this was kinda off-setting to suddenly have to and download a bunch of code you havent been walked through. This might not sound like a big thing, but when you are learning something from scratch, taking things step by step is the way to go in terms of teaching. So, if Bootstrap was a prerequisite, it should have been mentioned earlier. You had it going good up until this point teaching wise.

carstenht
Автор

Pausing this tutorial to take the bootstrap one, a new challenge!

Hackaprende
Автор

Nice vid, but I have a question. How could i create a Instance of "Song" with a further Attribute (let's say "song_publisher) and set this Attribute via ForeignKey equal to the user who is currently logged in.

davidgromer
Автор

reverse can be imported from django.urls instead of django.core.urlresolvers for those finding reference errors. It worked for me.

karandave
Автор

I only have a small doubt, I understood up to submit button but what I can't understand is how is data saved directly in the DATA BASE even though we didn't write any functionality?

varunreddy
Автор

to do the grid view like bucky did in this video do this -
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

eshanmehendal
Автор

Hi Bucky! How to add new songs using the link on the detail view?

user