Skip to content

Commit 680c004

Browse files
amakarudzeamakarudze
authored
Merge pull request #172 from IwonaZ/Changes-to-homework-tutorial
Changes to homework tutorial
2 parents 056f91a + f805af4 commit 680c004

File tree

7 files changed

+68
-44
lines changed

7 files changed

+68
-44
lines changed

‎en/authentication_authorization/README.md‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -96,30 +96,34 @@ We already set things up so that only authorized users (i.e. us) see the buttons
9696
We will add a login button that looks like this:
9797

9898
```django
99-
<a href="{% url 'login' %}" class="top-menu"><span class="glyphicon glyphicon-lock"></span></a>
99+
<a href="{% url 'login' %}" class="top-menu">{% include './icons/lock-fill.svg' %}</a>
100100
```
101101

102102
For this we need to edit the templates, so let's open up `blog/templates/blog/base.html` and change it so the part between the `<body>` tags looks like this:
103103

104104
```django
105105
<body>
106-
<div class="page-header">
107-
{% if user.is_authenticated %}
108-
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
109-
<a href="{% url 'post_draft_list' %}" class="top-menu"><span class="glyphicon glyphicon-edit"></span></a>
110-
{% else %}
111-
<a href="{% url 'login' %}" class="top-menu"><span class="glyphicon glyphicon-lock"></span></a>
112-
{% endif %}
113-
<h1><a href="/">Django Girls Blog</a></h1>
114-
</div>
115-
<div class="content container">
106+
<header class="page-header">
107+
<div class="container">
108+
{% if user.is_authenticated %}
109+
<a href="{% url 'post_new' %}" class="top-menu">
110+
{% include './icons/file-earmark-plus.svg' %}
111+
</a>
112+
<a href="{% url 'post_draft_list' %}" class="top-menu">{% include './icons/pencil-square.svg'%}</a>
113+
{% else %}
114+
<a href="{% url 'login' %}" class="top-menu">{% include './icons/lock-fill.svg' %}</a>
115+
{% endif %}
116+
<h1><a href="/">Django Girls Blog</a></h1>
117+
</div>
118+
</header>
119+
<main class="content container">
116120
<div class="row">
117-
<div class="col-md-8">
118-
{% block content %}
119-
{% endblock %}
121+
<div class="col">
122+
{% block content %}
123+
{% endblock %}
120124
</div>
121125
</div>
122-
</div>
126+
</main>
123127
</body>
124128
```
125129

@@ -130,16 +134,20 @@ You might recognize the pattern here. There is an if-condition in the template t
130134
Let's add some sugar to our templates while we're at it. First we will add some details to show when we are logged in. Edit `blog/templates/blog/base.html` like this:
131135

132136
```django
133-
<div class="page-header">
134-
{% if user.is_authenticated %}
135-
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
136-
<a href="{% url 'post_draft_list' %}" class="top-menu"><span class="glyphicon glyphicon-edit"></span></a>
137-
<p class="top-menu">Hello {{ user.username }} <small>(<a href="{% url 'logout' %}">Log out</a>)</small></p>
138-
{% else %}
139-
<a href="{% url 'login' %}" class="top-menu"><span class="glyphicon glyphicon-lock"></span></a>
140-
{% endif %}
141-
<h1><a href="/">Django Girls Blog</a></h1>
142-
</div>
137+
<header class="page-header">
138+
<div class="container">
139+
{% if user.is_authenticated %}
140+
<a href="{% url 'post_new' %}" class="top-menu">
141+
{% include './icons/file-earmark-plus.svg' %}
142+
</a>
143+
<a href="{% url 'post_draft_list' %}" class="top-menu">{% include './icons/pencil-square.svg'%}</a>
144+
<p id="logout" class="top-menu">Hello {{ user.username }} <small><a href="{% url 'logout' %}">(Log out)</a></small></p>
145+
{% else %}
146+
<a href="{% url 'login' %}" class="top-menu">{% include './icons/lock-fill.svg' %}</a>
147+
{% endif %}
148+
<h1><a href="/">Django Girls Blog</a></h1>
149+
</div>
150+
</header>
143151
```
144152

145153
This adds a nice "Hello _&lt;username&gt;_" to remind us who we are logged in as, and that we are authenticated. Also, this adds a link to log out of the blog -- but as you might notice this isn't working yet. Let's fix it!
@@ -161,6 +169,23 @@ urlpatterns = [
161169
path('', include('blog.urls')),
162170
]
163171
```
172+
Let's also add this to our `blog.css` file for the proper styling of our login:
173+
174+
```css
175+
#logout {
176+
font-family: 'Lobster', cursive;
177+
178+
}
179+
180+
small a,
181+
small a:hover,
182+
small a:visited {
183+
font-size: 15pt;
184+
color: #ffffff;
185+
text-decoration: none;
186+
}
187+
```
188+
![Publish button](images/loggdin.png)
164189

165190
That's it! If you followed all of the above up to this point (and did the homework), you now have a blog where you
166191

‎en/authentication_authorization/images/loggdin.png‎

705 KB
Loading

‎en/homework/README.md‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Time to do something similar, but for draft posts.
2121
Let's add a link in `blog/templates/blog/base.html` in the header. We don't want to show our list of drafts to everybody, so we'll put it inside the {% raw %}`{% if user.is_authenticated %}`{% endraw %} check, right after the button for adding new posts.
2222

2323
```django
24-
<a href="{% url 'post_draft_list' %}" class="top-menu">Drafts</span></a>
24+
<a href="{% url 'post_draft_list' %}" class="top-menu">{% include './icons/pencil-square.svg'%}</a>
2525
```
2626

2727
Next: urls! In `blog/urls.py` we add:
@@ -83,10 +83,11 @@ into these:
8383
<div class="date">
8484
{{ post.published_date }}
8585
</div>
86-
{% else %}
87-
<form method="POST" action="{% url 'post_publish' pk=post.pk %}" class="post-form">{% csrf_token %}
88-
<button type="submit" class="post btn btn-secondary" name="publish">Publish</button>
89-
</form>
86+
87+
{% else %}
88+
<aside class="actions">
89+
<a class="btn btn-secondary" role="button" href="{% url 'post_publish' pk=post.pk %}">Publish</a>
90+
</aside>
9091
{% endif %}
9192
```
9293

@@ -128,7 +129,7 @@ Now we can finally use this!
128129

129130
And once again after publishing the post we are immediately redirected to the `post_detail` page!
130131

131-
![Publish button](images/publish2.png)
132+
![Publish button](images/publish3.png)
132133

133134
Congratulations! You are almost there. The last step is adding a delete button!
134135

@@ -137,11 +138,9 @@ Congratulations! You are almost there. The last step is adding a delete button!
137138
Let's open `blog/templates/blog/post_detail.html` once again and add these lines:
138139

139140
```django
140-
<form method="POST" action="{% url 'post_remove' pk=post.pk %}" class="post-form">{% csrf_token %}
141-
<button type="submit" class="post btn btn-danger" name="delete">
142-
Delete
143-
</button>
144-
</form>
141+
<a class="btn btn-secondary" href="{% url 'post_remove' pk=post.pk %}">
142+
{% include './icons/trash-fill.svg' %}
143+
</a>
145144
```
146145

147146
just under a line with the edit button.
@@ -168,6 +167,6 @@ And this time, after deleting a post we want to go to the webpage with a list of
168167

169168
Let's test it! Go to the page with a post and try to delete it!
170169

171-
![Delete button](images/delete3.png)
170+
![Delete button](images/delete4.png)
172171

173172
Yes, this is the last thing! You completed this tutorial! You are awesome!

‎en/homework/images/delete4.png‎

688 KB
Loading

‎en/homework/images/publish3.png‎

689 KB
Loading

‎en/homework_create_more_models/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ from .models import Post, Comment
158158
Now, go to `blog/templates/blog/post_detail.html` and before the line {% raw %}`{% for comment in post.comments.all %}`{% endraw %}, add:
159159

160160
```django
161-
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
161+
<a class="btn btn-secondary" role="button" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
162162
```
163163

164164
If you go to the post detail page you should see this error:
@@ -201,7 +201,7 @@ from .forms import PostForm, CommentForm
201201

202202
Now, on the post detail page, you should see the "Add Comment" button.
203203

204-
![AddComment](images/add_comment_button.png)
204+
![AddComment](images/add_comment_button1.png)
205205

206206
However, when you click that button, you'll see:
207207

@@ -214,11 +214,11 @@ Like the error tells us, the template doesn't exist yet. So, let's create a new
214214
{% extends 'blog/base.html' %}
215215
216216
{% block content %}
217-
<h1>New comment</h1>
218-
<form method="POST" class="post-form">{% csrf_token %}
219-
{{ form.as_p }}
220-
<button type="submit" class="save btn btn-default">Send</button>
221-
</form>
217+
<h1>New comment</h1>
218+
<form method="POST" class="post-form">{% csrf_token %}
219+
{{ form.as_p }}
220+
<button type="submit" class="save btn btn-secondary">Send</button>
221+
</form>
222222
{% endblock %}
223223
```
224224

‎en/homework_create_more_models/images/add_comment_button1.png‎

10.2 KB
Loading

0 commit comments

Comments
 (0)