Assessment: DIY Django mini blog

In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog.

Prerequisites: Before attempting this assessment you should have already worked through all the articles in this module.
Objective: To test comprehension of Django fundamentals, including URL configurations, models, views, forms, and templates.

Project brief

The pages that need to be displayed, their URLs, and other requirements, are listed below:

Page URL 要求
首页 / and /blog/ An index page describing the site.
List of all blog posts /blog/blogs/ List of all blog posts:

  • Accessible to all users from a sidebar link.
  • List sorted by post date (newest to oldest).
  • List paginated in groups of 5 articles.
  • List items display the blog title, post date, and author.
  • Blog post names are linked to blog detail pages.
  • Blogger (author names) are linked to blog author detail pages.
Blog author (blogger) detail page /blog/blogger/<author-id> Information for a specified author (by id) and list of their blog posts:

  • Accessible to all users from author links in blog posts etc.
  • Contains some biographical information about the blogger/author.
  • List sorted by post date (newest to oldest).
  • Not paginated.
  • List items display just the blog post name and post date.
  • Blog post names are linked to blog detail pages.
Blog post detail page /blog/<blog-id>

Blog post details.

  • Accessible to all users from blog post lists.
  • Page contains the blog post: name, author, post date, and content.
  • Comments for the blog post should be displayed at bottom.
  • Comments should be sorted in order: oldest to most recent.
  • Contains link to add comments at end for logged in users (see Comment form page)
  • Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).
List of all bloggers /blog/bloggers/ List of bloggers on system:

  • Accessible to all users from site sidebar
  • Blogger names are linked to Blog author detail pages.
Comment form page /blog/<blog-id>/create Create comment for blog post:

  • Accessible to logged-in users (only) from link at bottom of blog post detail pages.
  • Displays form with description for entering comments (post date and blog is not editable).
  • After a comment has been posted, the page will redirect back to the associated blog post page.
  • Users cannot edit or delete their posts.
  • Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.
  • Comment pages should include the name/link to the blogpost being commented on.
User authentication pages /accounts/<standard urls> Standard Django authentication pages for logging in, out and setting the password:

  • Login/out should be accessible via sidebar links.
Admin site /admin/<standard urls> Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):

  • Admin site blog posts records should display the list of associated comments inline (below each blog post).
  • Comment names in the Admin site are created by truncating the comment description to 75 characters.
  • Other types of records can use basic registration.

In addition you should write some basic tests to verify:

  • All model fields have the correct label and length.
  • All models have the expected object name (e.g. __str__() returns the expected value).
  • Models have the expected URL for individual Blog and Comment records (e.g. get_absolute_url() returns the expected URL).
  • The BlogListView (all-blog page) is accessible at the expected location (e.g. /blog/blogs)
  • The BlogListView (all-blog page) is accessible at the expected named url (e.g. 'blogs')
  • The BlogListView (all-blog page) uses the expected template (e.g. the default)
  • The BlogListView paginates records by 5 (at least on the first page)

注意: There are of course many other tests you can run. Use your discretion, but we'll expect you to do at least the tests above.

The following section shows screenshots of a site that implements the requirements above.

屏幕截图

The following screenshots provide an example of what the finished program should output.

List of all blog posts

This displays the list of all blog posts (accessible from the "All blogs" link in the sidebar). Things to note:

  • The sidebar also lists the logged in user.
  • Individual blog posts and bloggers are accessible as links in the page.
  • Pagination is enabled (in groups of 5)
  • Ordering is newest to oldest.

List of all blogs

List of all bloggers

This provides links to all bloggers, as linked from the "All bloggers" link in the sidebar. In this case we can see from the sidebar that no user is logged in.

List of all bloggers

Blog detail page

This shows the detail page for a particular blog.

Blog detail with add comment link

Note that the comments have a date and time, and are ordered from oldest to newest (opposite of blog ordering). At the end we have a link for accessing the form to add a new comment. If a user is not logged in we'd instead see a suggestion to log in.

Comment link when not logged in

Add comment form

This is the form to add comments. Note that we're logged in. When this succeeds we should be taken back to the associated blog post page.

Add comment form

Author bio

This displays bio information for a blogger along with their blog posts list.

Blogger detail page

Steps to complete

The following sections describe what you need to do.

  1. Create a skeleton project and web application for the site (as described in Django Tutorial Part 2: Creating a skeleton website ). You might use 'diyblog' for the project name and 'blog' for the application name.
  2. Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember:
    • Each comment will have only one blog, but a blog may have many comments.
    • Blog posts and comments must be sorted by post date.
    • Not every user will necessarily be a blog author though any user may be a commenter.
    • Blog authors must also include bio information.
  3. Run migrations for your new models and create a superuser.
  4. Use the admin site to create some example blog posts and blog comments.
  5. Create views, templates, and URL configurations for blog post and blogger list pages.
  6. Create views, templates, and URL configurations for blog post and blogger detail pages.
  7. Create a page with a form for adding new comments (remember to make this only available to logged in users!)

Hints and tips

This project is very similar to the LocalLibrary tutorial. You will be able to set up the skeleton, user login/logout behavior, support for static files, views, URLs, forms, base templates and admin site configuration using almost all the same approaches.

Some general hints:

  1. The index page can be implemented as a basic function view and template (just like for the locallibrary).
  2. The list view for blog posts and bloggers, and the detail view for blog posts can be created using the generic list and detail views .
  3. The list of blog posts for a particular author can be created by using a generic blog list view and filtering for blog objects that match the specified author.
    • You will have to implement get_queryset(self) to do the filtering (much like in our library class LoanedBooksAllListView ) and get the author information from the URL.
    • You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement get_context_data() (discussed below).
  4. add comment form can be created using a function-based view (and associated model and form) or using a generic CreateView . If you use a CreateView (recommended) then:
    • You will also need to pass the name of the blog post to the comment page in the context (implement get_context_data() as discussed below).
    • The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the form_valid() function so it can be saved into the model ( as described here — Django docs). In that same function we set the associated blog. A possible implementation is shown below ( pk is a blog id passed in from the URL/URL configuration).
          def form_valid(self, form):
              """
              Add author and associated blog to form data before setting it as valid (so it is saved to model)
              """
              #Add logged-in user as author of comment
              form.instance.author = self.request.user
              #Associate comment with blog based on passed id
              form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
              # Call super-class form validation behavior
              return super(BlogCommentCreate, self).form_valid(form)
      
      				
    • You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override get_success_url() and "reverse" the URL for the original blog. You can get the required blog ID using the self.kwargs attribute, as shown in the form_valid() method above.

We briefly talked about passing a context to the template in a class-based view in the Django Tutorial Part 6: Generic list and detail views topic. To do this you need to override get_context_data() (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context). For example, the code fragment below shows how you can add a blogger object to the context based on their BlogAuthor id.

class SomeView(generic.ListView):
    ...
    def get_context_data(self, **kwargs):
        # Call the base implementation first to get a context
        context = super(SomeView, self).get_context_data(**kwargs)
        # Get the blogger object from the "pk" URL parameter and add it to the context
        context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk'])
        return context

Assessment

The assessment for this task is available on Github here . This assessment is primarily based on how well your application meets the requirements we listed above, though there are some parts of the assessment that check your code uses appropriate models, and that you have written at least some test code. When you're done, you can check out our the finished example which reflects a "full marks" project.

Once you've completed this module you've also finished all the MDN content for learning basic Django server-side website programming! We hope you enjoyed this module and feel you have a good grasp of the basics!

In this module

发现此页面有问题吗?

最后修改: , 由 MDN 贡献者

  1. Complete beginners start here!
  2. Web 快速入门
    1. Getting started with the Web overview
    2. 安装基本软件
    3. What will your website look like?
    4. 处理文件
    5. HTML 基础
    6. CSS 基础
    7. JavaScript 基础
    8. 发布您的网站
    9. How the Web works
  3. HTML — Structuring the Web
  4. HTML 介绍
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. 多媒体和嵌入
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML 表格
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. CSS — Styling the Web
  8. CSS 第一步
    1. CSS first steps overview
    2. What is CSS?
    3. Getting started with CSS
    4. How CSS is structured
    5. How CSS works
    6. Using your new knowledge
  9. CSS 构建块
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS 选择器
    4. The box model
    5. Backgrounds and borders
    6. Handling different text directions
    7. Overflowing content
    8. Values and units
    9. Sizing items in CSS
    10. Images, media, and form elements
    11. Styling tables
    12. Debugging CSS
    13. Organizing your CSS
  10. 样式化文本
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  11. CSS 布局
    1. CSS layout overview
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. 位置
    8. Multiple-column Layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy Layout Methods
    12. Supporting Older Browsers
    13. Fundamental Layout Comprehension
  12. JavaScript — Dynamic client-side scripting
  13. JavaScript 第一步
    1. JavaScript first steps overview
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic math in JavaScript — Numbers and operators
    7. Handling text — Strings in JavaScript
    8. Useful string methods
    9. 数组
    10. Assessment: Silly story generator
  14. JavaScript 构建块
    1. JavaScript building blocks overview
    2. Making decisions in your code — Conditionals
    3. Looping code
    4. Functions — Reusable blocks of code
    5. Build your own function
    6. Function return values
    7. 事件介绍
    8. Assessment: Image gallery
  15. 引入 JavaScript 对象
    1. Introducing JavaScript objects overview
    2. Object basics
    3. 对象原型
    4. Object-oriented programming concepts
    5. Classes in JavaScript
    6. Working with JSON data
    7. Object building practice
    8. Assessment: Adding features to our bouncing balls demo
  16. 异步 JavaScript
    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
  17. 客户端侧 Web API
    1. 客户端侧 Web API
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third party APIs
    6. Drawing graphics
    7. Video and audio APIs
    8. Client-side storage
  18. Web forms — Working with user data
  19. Core forms learning pathway
    1. Web forms overview
    2. Your first form
    3. How to structure a web form
    4. Basic native form controls
    5. The HTML5 input types
    6. Other form controls
    7. Styling web forms
    8. Advanced form styling
    9. UI pseudo-classes
    10. Client-side form validation
    11. Sending form data
  20. Advanced forms articles
    1. How to build custom form controls
    2. Sending forms through JavaScript
    3. CSS property compatibility table for form controls
  21. Accessibility — Make the web usable by everyone
  22. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  23. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  24. Tools and testing
  25. Client-side web development tools
    1. Client-side web development tools index
    2. Client-side tooling overview
    3. Command line crash course
    4. Package management basics
    5. Introducing a complete toolchain
    6. Deploying our app
  26. Introduction to client-side frameworks
    1. Client-side frameworks overview
    2. Framework main features
  27. React
    1. Getting started with React
    2. Beginning our React todo list
    3. Componentizing our React app
    4. React interactivity: Events and state
    5. React interactivity: Editing, filtering, conditional rendering
    6. Accessibility in React
    7. React resources
  28. Ember
    1. Getting started with Ember
    2. Ember app structure and componentization
    3. Ember interactivity: Events, classes and state
    4. Ember Interactivity: Footer functionality, conditional rendering
    5. Routing in Ember
    6. Ember resources and troubleshooting
  29. Vue
    1. Getting started with Vue
    2. Creating our first Vue component
    3. Rendering a list of Vue components
    4. Adding a new todo form: Vue events, methods, and models
    5. Styling Vue components with CSS
    6. Using Vue computed properties
    7. Vue conditional rendering: editing existing todos
    8. Focus management with Vue refs
    9. Vue resources
  30. Svelte
    1. Getting started with Svelte
    2. Starting our Svelte Todo list app
    3. Dynamic behavior in Svelte: working with variables and props
    4. Componentizing our Svelte app
    5. Advanced Svelte: Reactivity, lifecycle, accessibility
    6. Working with Svelte stores
    7. TypeScript support in Svelte
    8. Deployment and next steps
  31. Angular
    1. Getting started with Angular
    2. Beginning our Angular todo list app
    3. Styling our Angular app
    4. Creating an item component
    5. Filtering our to-do items
    6. Building Angular applications and further resources
  32. Git and GitHub
    1. Git and GitHub overview
    2. Hello World
    3. Git Handbook
    4. Forking Projects
    5. About pull requests
    6. Mastering Issues
  33. Cross browser testing
    1. Cross browser testing overview
    2. Introduction to cross browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
  34. Server-side website programming
  35. 第一步
    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
  36. Django Web 框架 (Python)
    1. Django web framework (Python) overview
    2. 介绍
    3. 设置开发环境
    4. Tutorial: The Local Library website
    5. Tutorial Part 2: Creating a skeleton website
    6. Tutorial Part 3: Using models
    7. Tutorial Part 4: Django admin site
    8. Tutorial Part 5: Creating our home page
    9. Tutorial Part 6: Generic list and detail views
    10. Tutorial Part 7: Sessions framework
    11. Tutorial Part 8: User authentication and permissions
    12. Tutorial Part 9: Working with forms
    13. Tutorial Part 10: Testing a Django web application
    14. Tutorial Part 11: Deploying Django to production
    15. Web application security
    16. Assessment: DIY mini blog
  37. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  38. Further resources
  39. Common questions
    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. Web mechanics
    5. Tools and setup
    6. Design and accessibility