Lesson 9: Building a Real Django Application: The Youth Job Bank

<h2>Building a Real Django Application: The Youth Job Bank</h2>

<p>With our development environments working, we moved on to one of the biggest projects of the program so far: building a <strong>Youth Job Bank</strong>.</p>

<p>The goal was to move beyond isolated examples and begin building something that behaves like a real web application.</p>

<p>Instead of simply displaying information on a webpage, our application needed to store jobs in a database, retrieve them, display them to users and allow new jobs to be submitted.</p>

<p>This meant connecting many of the concepts we had learned throughout the course.</p>

<h3>Thinking About the Application</h3>

<p>Before writing code, we first needed to think about what information a job posting should contain.</p>

<p>A simple job might include:</p>

<ul>
    <li>Job title</li>
    <li>Company</li>
    <li>Description</li>
    <li>Location</li>
    <li>Salary</li>
    <li>Date posted</li>
</ul>

<p>In Django, we can represent this information using a <strong>model</strong>.</p>

<h3>The Job Model</h3>

<p>A model describes the structure of information stored in our database.</p>

<pre><code>class Job(models.Model):
    title = models.CharField(max_length=200)
    company = models.CharField(max_length=200)
    description = models.TextField()
    location = models.CharField(max_length=200)
    salary = models.CharField(max_length=100)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title
</code></pre>

<p>Each field becomes part of the information Django stores for every job posting.</p>

<p>This demonstrates an important concept in software development: <strong>our Python code can define the structure of our database.</strong></p>

<h3>Models and Databases</h3>

<p>After changing a Django model, we need to tell Django to update the database.</p>

<p>We do this using migrations.</p>

<pre><code>python manage.py makemigrations
python manage.py migrate
</code></pre>

<p><code>makemigrations</code> creates instructions describing the database change.</p>

<p><code>migrate</code> applies those instructions to the database.</p>

<p>This allows developers to change database structures in a predictable and repeatable way.</p>

<h3>Displaying Jobs</h3>

<p>Once jobs exist in the database, our application needs a way to retrieve them.</p>

<p>That job belongs to the Django <strong>view</strong>.</p>

<pre><code>def job_list(request):
    jobs = Job.objects.all()

    return render(request, 'jobs/job_list.html', {
        'jobs': jobs
    })
</code></pre>

<p>The view asks the database for all available jobs and sends them to our HTML template.</p>

<p>The template can then loop through the jobs.</p>

<pre><code>{% for job in jobs %}
    &lt;h3&gt;{{ job.title }}&lt;/h3&gt;
    &lt;p&gt;{{ job.company }}&lt;/p&gt;
    &lt;p&gt;{{ job.location }}&lt;/p&gt;
{% endfor %}
</code></pre>

<p>This is one of the major differences between a static website and a web application.</p>

<p>A static webpage contains information directly inside the HTML.</p>

<p>A dynamic application generates its webpage using information stored somewhere else, such as a database.</p>

<h3>Creating Individual Job Pages</h3>

<p>We also want users to be able to select a job and see more information.</p>

<p>Instead of creating a separate HTML file for every job, Django can generate a page dynamically.</p>

<p>A URL might look like:</p>

<pre><code>/jobs/5/
</code></pre>

<p>The number <code>5</code> represents the ID of a specific job in the database.</p>

<p>Django can use that ID to retrieve the correct job.</p>

<pre><code>def job_detail(request, job_id):
    job = get_object_or_404(Job, id=job_id)

    return render(request, 'jobs/job_detail.html', {
        'job': job
    })
</code></pre>

<p>This means one template can display hundreds or thousands of different job postings.</p>

<h3>Posting a Job</h3>

<p>The next challenge was allowing information to travel in the opposite direction.</p>

<p>Instead of retrieving information from the database, users need to be able to submit information to it.</p>

<p>This introduces HTML forms and HTTP POST requests.</p>

<pre><code>&lt;form method="POST"&gt;
    {% csrf_token %}

    {{ form.as_p }}

    &lt;button type="submit"&gt;Post Job&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>When the user submits the form, the browser sends the information to Django.</p>

<p>Django validates the information and, if everything is correct, can save a new job to the database.</p>

<h3>The Request and Response Cycle</h3>

<p>Our Job Bank allowed us to see the complete journey of information through a web application.</p>

<ol>
    <li>The user visits a URL.</li>
    <li>Django receives the HTTP request.</li>
    <li>The URL configuration chooses a view.</li>
    <li>The view communicates with the model and database.</li>
    <li>The view sends information to a template.</li>
    <li>The template generates HTML.</li>
    <li>Django sends the HTML back to the browser.</li>
</ol>

<p>This process is called the <strong>request and response cycle</strong>.</p>

<p>Understanding this flow is one of the most important steps toward understanding modern web development.</p>

<h3>Connecting Everything We Have Learned</h3>

<p>The Youth Job Bank combines concepts from many of our earlier sessions:</p>

<ul>
    <li>HTML creates the structure of the webpage.</li>
    <li>CSS and Bootstrap control presentation.</li>
    <li>Python contains our application logic.</li>
    <li>Django connects URLs, views, models and templates.</li>
    <li>The database stores application information.</li>
    <li>GitHub allows our team to track and share code.</li>
    <li>Agile development helps us divide a large project into manageable tasks.</li>
</ul>

<p>Instead of learning each technology separately, we are now seeing how they work together.</p>

<h3>Key Concepts</h3>

<ul>
    <li>Django models represent data.</li>
    <li>Migrations update the database structure.</li>
    <li>Views contain application logic.</li>
    <li>Templates turn data into HTML.</li>
    <li>URLs determine which view handles a request.</li>
    <li>Forms allow users to send information back to the server.</li>
    <li>Dynamic webpages can be generated from database information.</li>
</ul>

<p>By this point, our project had begun to look much less like a programming exercise and much more like a real piece of software.</p>