Latest Student Projects

How to Render web page into Django

How to render web page into Django

How to render web page into Django

Interested in above project ,Click Below
Need Project Help ? Chat on WhatsApp
WhatsApp
Telegram
LinkedIn

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

  1. Install Django
    Run the following command to install Django:

    pip install django

  2. Create a Django Project
    Run:

    django-admin startproject project_name
cd project_name

2. Create a Django App

  1. Create an App
    Run:

    python manage.py startapp app_name

  2. 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

  1. 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
]

  2. 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

  1. 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

  1. 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,
        ...
    },
]

  2. 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>
  3.  

6. Run the Development Server

Start the server using:

python manage.py runserver
 
How to render a web page into Django

 

See also  Python Multiprocessing: A Complete Guide

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: 409