Get hands-on experience of Django web development by building a functional web application with user management, search filters, styling, and cloud deployment.

Zero to Hero in Back-end Web Development

This module focuses on learning Django web development through hands-on examples. We will learn to build a web application, step-by-step, including setting up URLs, views, and templates for different web pages. We will also look at various other useful concepts, such as creating and managing user accounts, implementing search filters, uploading images, and using Bootstrap for styling. Additionally, we’ll also cover cloud deployment using AWS (Amazon Web Services) and Heroku. We’ll learn each concept with the help of an executable environment to get hands-on experience. At the end of this module, we will have built a functional web application using Django.

Django Takeoff: Developing Modern Applications

After creating the filter, add it to the *Listings* page. To do this, we need to update the *Listings* view and template.

# Adding a filter in Listings view

We add the filter in the `all_listings` view in ***views<span>.py***.

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys


def main():
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'example.settings')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)


if __name__ == '__main__':
    main()


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


ch13-lsn2-to-aws

React

Dart

GoJS React

Typescript React

Vue.js

In **line 12**, we make a `GET` request to search for a particular field in our `Listings` model which is stored in the `all_listings` variable. We use `ListingFilter()` to pass the `GET` request and also the `queryset` variable that holds the data that we want to search.

To access the filtered objects, we use `.qs`. For example, we used `my_Filter.qs` in **line 13**.

Learn how to add a filter in the Listings view and template.

Add Filter in the Listings Page

Adding a filter in Listings view