Beginning Django E Commerce
398 pág.

Beginning Django E Commerce

DisciplinaProgramação I24.794 materiais282.206 seguidores
Pré-visualização50 páginas
the standard meta 
tags, which we\u2019ll set later when we write our view functions. 
The next level down should contain the layout that will be used by most of the pages on the site, like 
the homepage, category and product pages, and any static content pages, such as an \u201cAbout Us\u201d or 
\u201cPrivacy Policy\u201d page. This layout will include a side bar with extra content. When we get around to 
making the checkout pages, we will probably create a different second-level template. We want to allow 
ourselves the options to do this, so we can change pages based on our needs. For example, we might 
remove the side bar from the checkout pages so that users are less likely to get distracted during the 
checkout process and click somewhere else. 
Create a new file in your templates directory called catalog.html and put in the following 
{% extends "base.html" %} 
{% block site_wrapper %} 
<div id=&quot;main&quot;> 
 <a href=&quot;#content&quot; class=&quot;skip_link&quot;>Skip to main content</a> 
 <div id=&quot;banner&quot;> 
 <div class=&quot;bannerIEPadder&quot;> 
 <div class=&quot;cart_box&quot;> 
 [link to cart here] 
 Modern Musician 
 <div id=&quot;navigation&quot;> 
 <div class=&quot;navIEPadder&quot;> 
 [navigation here] 
 <div id=&quot;middle&quot;> 
 <div id=&quot;sidebar&quot;> 
 <div class=&quot;sidebarIEPadder&quot;> 
 [search box here] 
 <br /> 
 [category listing here] 
 <div id=&quot;content&quot;> 
 <a name=\u201dcontent\u201d></a> 
 <div class=&quot;contentIEPadder&quot;> 
 {% block content %}{% endblock %} 
 <div id=&quot;footer&quot;> 
 <div class=&quot;footerIEPadder&quot;> 
 [footer here] 
{% endblock %} 
The key thing is to make sure that {% extends &quot;base.html&quot; %} is the first line in the file. This is 
the directive that tells catalog.html to inherit from base.html. 
In the rest of the file, you see that we\u2019ve overridden the content of the site_wrapper block with a 
bunch of markup for the site layout. We\u2019ve also created a new content block called, aptly enough, 
content, which we\u2019ll use for the content of individual pages. We\u2019ll see the CSS that accompanies this 
markup in a moment. 
Finally, create a third template in your templates directory that we\u2019ll use for the homepage, and 
name it the traditional index.html. Within that template, put the following: 
{% extends &quot;catalog.html&quot; %} 
{% block content %} 
{% endblock %}
Our content block has a cordial welcome message in it. Look over these three templates and make 
sure you understand how things are flowing from top to bottom. In a moment, we\u2019ll see what they look 
like all put together. 
Before we go further, it\u2019s worth retracing our steps and examining the blocks in our templates that 
open and close with curly braces and percentage signs. We used them to create blocks in our templates, 
but these tags are much more versatile in Django templates. They are used for if statements, for loops, 
including blocks of template code, and other directives much like the {% extends... %} we saw before. 
We\u2019ll come back to those other uses at various points in the book. 
Greater Ease with render_to_response() 
Now that we\u2019ve done all of this work setting up the templates, we just have to test them to see if 
everything\u2019s been done correctly. We still have more work to do, but let\u2019s gratify ourselves with a quick 
peek at our layout so far. 
Code inside of a Django project resides inside of individual subdirectories called apps, which we\u2019ll 
learn more about in the next chapter. For now, we\u2019re going to create an app to store code for this simple 
preview. Inside your project\u2019s root directory, execute the following to create an app called preview: 
$ python startapp preview 
Inside this new app directory, you should find a file named Open up that file and add the 
following code to create a single view function: 
from django.shortcuts import render_to_response 
def home(request): 
 return render_to_response(&quot;index.html&quot;) 
That\u2019s interesting. Using render_to_response() sure seems to make everything quite a bit quicker 
than the sample views we looked at before. As it turns out, the Django developers created the 
render_to_response() function to do the heavy lifting for us whenever we are writing Django view 
functions , which allows us to handle a very common case using only a single line of code. In our case, 
we just passed it the name of the template to render, but it takes an optional second argument: a Python 
dictionary of variables. The render_to_response() function takes the template, populates it with 
variables, and then returns the generated content to us in form of an HttpResponse. 
In most web frameworks, such as ASP.NET, PHP, and Ruby on Rails, the URL is mapped to a file on 
the file system that contains application code, such as Default.aspx or index.php. In Django, your 
URL ends up being mapped to a function in Python code, which in turn renders a template file on the file 
system. It\u2019s a different way of doing things, but you\u2019ll get used to it quickly, so don\u2019t sweat it. 
So, we have a simple view for testing our homepage. Unfortunately, we still don\u2019t have a way of 
navigating to it, so open up your file and add the following line: 
urlpatterns += patterns('', 
 #other commented code here 
 (r'^catalog/$', 'preview.views.home'), 
With this in place, jump back to the shell and boot up the server (if it\u2019s not running already): 
$ python runserver
Once that\u2019s up, fire up a browser and navigate to http://localhost:8000/catalog/. You should 
see some black on white text that lacks any formatting whatsoever: 
Skip to main content 
[link to cart here] 
Modern Musician 
[navigation here] 
[search box here] 
[category listing here] 
[footer here] 
The reason we\u2019re not seeing anything particularly pretty is because we haven\u2019t yet attached our CSS 
file. That\u2019s all right... I deliberately left out that step so we could check what our site looks like without 
any CSS markup. Remember, there are people out there with special browsers that don\u2019t render CSS, 
and you don\u2019t want to preclude them from being able to use your site conveniently. Sure, the preceding 
markup on a product page might be awkward, but the flow is still there in good order, and we\u2019re not 
preventing anyone from checking out. 
Make it a point to check your site during the various stages of development to ensure that the layout 
looks okay, and that elements are logically ordered, without the aid of any CSS styles. You actually don\u2019t 
have to remove the CSS link from your template code each time you want to do this. If you\u2019re using 
Firefox, with the Firefox Accessibility Extension toolbar installed, you can easily disable CSS from the 
\u201cStyle\u201d menu by toggling off the \u201cAuthor CSS\u201d setting. 
Adding in the CSS 
There\u2019s one piece of the puzzle still missing, and it\u2019s the CSS for our layout in catalog.html. To add the 
CSS, create a directory called static in the root of your Django project and create a file called css.css 
within your new static folder. Enter the following CSS: