DJANGO AND AZU – THE MOULA

In this tutorial, we will be learning how to create a web application using Django and AZU’s La Moula theme. Django is a high-level web framework written in Python that encourages rapid development and clean, pragmatic design. AZU’s La Moula theme is a modern and sleek design that will give our web application a professional and polished look.

To get started, make sure you have Python installed on your computer. You can download Python from the official website (https://www.python.org/downloads/). Once Python is installed, you can proceed with installing Django by running the following command in your terminal:

pip install Django

Next, we will create a new Django project by running the following command:

django-admin startproject mywebapp

Navigate into the newly created project directory:

cd mywebapp

Now, we will create a new Django app within our project:

python manage.py startapp mywebapp

We will now download the La Moula theme from AZU’s website (https://www.azu.com) and extract the files into the static directory of our Django project. The static directory is where we will store all the CSS, JavaScript, and image files for our web application.

Next, open the settings.py file in the mywebapp directory and add the following lines of code to configure the static files:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

We will now create a base HTML template for our web application. Create a new file called base.html in the templates directory of our Django app and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web App</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/la-moula.css' %}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">My Web App</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

Now, we will create a new template file called index.html in the templates directory and add the following code:

{% extends 'base.html' %}

{% block content %}
    <div class="jumbotron">
        <h1 class="display-4">Welcome to My Web App!</h1>
        <p class="lead">This is a simple Django web application using AZU's La Moula theme.</p>
        <hr class="my-4">
        <p>Click the button below to get started.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Get Started</a>
    </div>
{% endblock %}

Now, we will create a view for our index page. Open the views.py file in the mywebapp directory and add the following code:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

Next, we will create a URL pattern for our index page. Open the urls.py file in the mywebapp directory and add the following code:

from django.urls import path
from .views import index

urlpatterns = [
    path('', index, name='index'),
]

Finally, we will run the Django development server by running the following command:

python manage.py runserver

Open your web browser and navigate to http://127.0.0.1:8000 to see your Django web application using AZU’s La Moula theme in action!

This tutorial covered the basics of creating a web application using Django and AZU’s La Moula theme. Feel free to explore more features of Django and customize the theme to suit your needs. Happy coding!