How to render web page into Django

How to Render web page into Django

Rendering a webpage in Django involves several steps, from setting up the project to creating views and templates. Here’s a step-by-step guide:

1. Set up a Django Project

Install Django
Run the following command to install Django:
```
pip install django
```

Create a Django Project
Run:

django-admin startproject project_name
cd project_name

2. Create a Django App

Create an App
Run:
```
python manage.py startapp app_name
```
Register the App in settings.py
Open project_name/settings.py and add your app to the INSTALLED_APPS list:
```
INSTALLED_APPS = [
    ...
    'app_name',
]
```

3. Define a URL

Create a URL Pattern in app_name/urls.py
Create a urls.py file in the app folder if it doesn’t exist. Add:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),  # URL for the home page
]

Include the App’s URLs in the Project’s urls.py
Open project_name/urls.py and include the app’s urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app_name.urls')),  # Include app's URLs
]

4. Create a View

Open app_name/views.py and define a view function:

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')  # Render the template

5. Create a Template

Set up a Templates Directory
In settings.py, configure the TEMPLATES setting to include your templates directory:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # Add 'templates' directory
        'APP_DIRS': True,
        ...
    },
]

Create the Template File
Create a templates folder in the project root. Inside it, create a file named home.html with content like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to upgategadh.com</title>
    <!-- CSS Styles -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            color: #333;
        }

        header {
            background-color: #007bff;
            color: white;
            padding: 20px;
            text-align: center;
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80vh;
            text-align: center;
            flex-direction: column;
        }

        h1 {
            font-size: 3rem;
            margin: 10px 0;
        }

        p {
            font-size: 1.2rem;
        }

        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 20px;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            background-color: #218838;
        }

        footer {
            text-align: center;
            padding: 10px;
            background: #333;
            color: white;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to upgategadh.com</h1>
    </header>
    <main>
        <h1>Hello, World!</h1>
        <p>We’re glad to have you here. Explore our platform for amazing experiences.</p>
        <button id="alertButton">Click Me!</button>
    </main>
    <footer>
        &copy; 2025 upgategadh.com. All rights reserved.
    </footer>

    <!-- JavaScript -->
    <script>
        document.getElementById('alertButton').addEventListener('click', function() {
            alert('Welcome to upgategadh.com! Enjoy your visit.');
        });
    </script>
</body>
</html>

6. Run the Development Server

Start the server using:

python manage.py runserver

Create a Virtual Environment (if not already created):

Before activating, ensure you have a virtual environment. Use the following command:

python -m venv venv

Here, venv is the name of the virtual environment folder. You can replace it with any name.

2. Activate the Virtual Environment:

Windows (Command Prompt):

venv\Scripts\activate

Windows (PowerShell):

.\venv\Scripts\Activate

Windows (Git Bash):

source venv/Scripts/activate

macOS/Linux (Bash or Zsh):

source venv/bin/activate

3. Verify Activation:

After activation, you should see the name of the virtual environment in your terminal prompt. For example:

(venv) $

To confirm, you can check the Python executable path:

which python  # On macOS/Linux
where python  # On Windows

It should point to the Python executable inside the venv directory.

4. Deactivate the Virtual Environment:

When you’re done, deactivate the virtual environment using:

deactivate

Post Views: 499