* [Intro to Command Line](intro_to_command_line/README.md)

You might have noticed that you didn't have to use your password apart from back when we used the admin-interface. And you might notice that this means that everyone can add or edit posts in your blog. I don't know about you, but I don't want just anyone to post on my blog. So lets do something about it.

First lets make things secure. We will protect our `post_new`, `post_edit` and `post_publish` views so that only logged-in users can access them. Django ships with some nice helpers for that using a kind-of advanced topic of _decorators_. Don't worry about the technicalities now, you can read up on these later. The decorator to use is shipped in Django in a module `django.contrib.auth.decorators` and is named `login_required`.

So edit your `mysite/views.py` and add these lines at the top where all the imports are:

Then add a line before each of the `post_new`, `post_edit` and `post_publish` like the following:

Thats it! Now try again to access `http://localhost:8000/post/new/`, notice the difference?

You should get one of the beloved errors again. This one is quite interesting actually: The decorator we added before will redirect you to the login page. But that isn't available yet, so it raises a "Page not found (404)".

Don't forget to add the decorator from above to `post_edit` and `post_publish` too.

Horray, we reached part of the goal! Other people can't just create posts on our blog anymore. Unfortunately we can't create posts anymore too. So lets fix that next.

Now we could try to do lots of magic stuff to implement users and passwords and authentication but doing this kind of stuff right is rather complicated. And as Django is "batteries included", we will make further use of the authentication stuff provided.

In your `mysite/urls.py` add an url `url(r'^accounts/login/$', 'django.contrib.auth.views.login')`. So the file should now look similar to this:

Then we need a template for the login-page, so create a directory `mysite/templates/registration` and a file inside named `login.html`:

You will see that this also makes use of our base-template for the overall look and feel of your blog.

The nice thing here is that this _just works[TM]_. We don't have to deal with handling of the forms submission nor with passwords and securing them. Only one thing is left here, we should add a setting to `mysite/settings.py`:

Now when the login is accessed directly, it will redirect successful login to the top level index.

So now we made sure that only authorized users (ie. us) can add, edit or publish posts. But still everyone gets to view the buttons to add or edit posts, lets hide these for users that aren't logged in. For this we need to edit the templates, so lets start with the base template from `mysite/templates/mysite/base.html`:

You might recognize the pattern here. There is an if-condition inside the template that checks for authenticated users to show the edit-buttons. Otherwise it shows a login button.

*Homework*: Edit the template `blog/templates/blog/post_detail.html` to only show the edit-buttons for authenticated users.

Lets add some nice sugar to our templates while we are at it. First we will add some stuff to show that we are logged in. Edit `mysite/templates/mysite/base.html` like this:

This adds a nice "Hello <username>" to remind us who we are and that we are authenticated. Also this adds link to log out of the blog. But as you might notice this isn't working yet. Oh nooz, we broke the internez! Lets fix it!

We decided to rely on django to handle log-in, lets see if Django can also handle log-out for us. Check https://docs.djangoproject.com/en/1.6/topics/auth/default/ and see if you find something.

Done reading? You should by now think about adding a url (in `mysite/urls.py`) pointing to the `django.contrib.auth.views.logout` view. Like that:

Thats it! If you followed all of the above until this point (and did the homework), you now have a blog where you

- need username and password to log in,

- need to be logged in to add/edit/publish(/delete) posts

- and can log out again

Treat yourself to a drink now because now your page is both great and secured!

But we don't want to start from scratch again, right? We will, again, use something that has already been done by programmers and released in the Internet for free. You know, reinventing the wheel is no fun.

To install Bootstrap, you need to add this to your `<head>` in your `.html` file (`blog/templates/blog/post_list.html`):

This doesn't add any files to your project. It just points to files that exist on the internet.

Just go ahead, open your website and refresh the page. Here it is!

Now we need to tell Django where it can find it. Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines:

Let's create a CSS file now, to add your own style to your web-page. Create a new folder called `css` inside your `static` folder. Then create a new file called `blog.css` inside this `css` directory. Ready?

But let's do at least a little. Maybe we could change the color of our header? To understand colors, computers use special codes. They start with `#` and are followed by 6 letters (A-F) and numbers (0-9). You can find color codes for example here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/cssref/css_colornames.asp), such as `red` and `green`.

`h1 a` is a CSS Selector. `a` element inside of `h1` element (i.e. when we have in code something like: `<h1><a href="">link</a></h1>`) is the tag we're applying our styles to, and we're telling it to change color to `#FCA205`, which is orange. Of course, you can put your own color here!

In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the element class or the element id. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point out to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`:

<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">

Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp).

We're just loading static files here :). Then, between the `<head>` and `</head>`, after the links to the Bootstrap CSS files (the browser reads the files in the order they're given, so code in our file may override code in Bootstrap files), add this line:

<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">

<script src="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fjs%2Fbootstrap.min.js"></script>

Now add the line `font-family: 'Lobster';` in the CSS file `mysite/static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page:

As mentioned above, CSS has a concept of classes, which basically allows you to name a part of the HTML code and apply styles only to this part, not affecting others. It's super helpful if you have two divs, but they're doing something very different (like your header and your post), so you don't want them to look the same.

We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `mysite/static/css/blog.css` file:

Then surround the HTML code which desplayes the posts with declarations of classes. Replace this:

Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as a post-workshop homework to learn everything you need to know about making your websites prettier with CSS.

After the installation is finished, go to the `mysite` directory and run this command: