How to Manage Site Information Using JSON in Django

Managing site-specific information dynamically can be essential for maintaining a professional and easily editable website. Using a JSON file to store information such as site name, description, contact details, and social media links provides a lightweight and flexible solution. In this post, we’ll explore how to create a Django-based system that allows staff users to edit this data directly from the frontend.

Why Use a JSON File?

Storing site information in a JSON file has several advantages:

• Ease of Updates: You can edit content without diving into code or the database.
• Portability: JSON is a universal format, easily transferred between systems.
• Clarity: JSON’s hierarchical structure is intuitive and readable.

Here’s an example of a JSON file (website_info.json) for a real estate website:

{
    "site_name": "My Real State",
    "site_description": "A fantastic website for all your needs. You can have a perfect real estate platform using this platform.",
    "site_logo": "logo.png",
    "address": {
        "line1": "A108 Adam Street",
        "line2": "New York, NY 535022"
    },
    "contact": {
        "phone": "+1 234 567 890",
        "mobile": "+1 234 567 890",
        "email": "info@myrealstate.com"
    },
    "social_media": {
        "facebook": "https://www.facebook.com/myrealstate",
        "twitter": "https://twitter.com/myrealstate",
        "instagram": "https://www.instagram.com/myrealstate",
        "linkdin": "https://www.linkedin.com/in/myrealstate/"
    }
}

Implementing the Editable Interface in Django

Step 1: Create the View to Edit JSON Data

We’ll create a Django view in an app called web that loads the JSON file, allows users to edit the data via a form, and saves the changes back to the file. Here's the edit_website_info view:

from django.shortcuts import render, redirect
from django.contrib.admin.views.decorators import staff_member_required
import json

JSON_FILE_PATH = "path/to/website_info.json"

@staff_member_required
def edit_website_info(request):
    # Load the JSON data
    with open(JSON_FILE_PATH, "r") as json_file:
        data = json.load(json_file)

    if request.method == "POST":
        # Update the JSON data with the form data
        data["site_name"] = request.POST.get("site_name")
        data["site_description"] = request.POST.get("site_description")
        data["address"]["line1"] = request.POST.get("address_line1")
        data["address"]["line2"] = request.POST.get("address_line2")
        data["contact"]["phone"] = request.POST.get("contact_phone")
        data["contact"]["mobile"] = request.POST.get("contact_mobile")
        data["contact"]["email"] = request.POST.get("contact_email")
        data["social_media"]["facebook"] = request.POST.get("social_media_facebook")
        data["social_media"]["twitter"] = request.POST.get("social_media_twitter")
        data["social_media"]["instagram"] = request.POST.get("social_media_instagram")
        data["social_media"]["linkdin"] = request.POST.get("social_media_linkdin")

        # Save the updated data back to the JSON file
        with open(JSON_FILE_PATH, "w") as json_file:
            json.dump(data, json_file, indent=4)

        return redirect("web:edit_website_info")  # Redirect to the same edit page after saving

    return render(request, "edit_website_info.html", {"data": data})

Step 2: Define the URL Route

Add the view to the urls.py file in the web app:

from django.urls import path
from .views import edit_website_info

app_name = "web"

urlpatterns = [
    path("edit-website-info/", edit_website_info, name="edit_website_info"),
]

Step 3: Create the Template

The template edit_website_info.html will allow staff users to edit all fields stored in the JSON file. Bootstrap is used for styling:

{% extends '_base.html' %}

{% block title %}
  Edit Site Info | {{ data.site_name }}
{% endblock %}

{% block content %}
<main>
  <section>
    <div class="container mb-4 mt-4">
      <h1>Edit Site Info</h1>
      <form method="post">
        {% csrf_token %}
        <div class="mb-3">
          <label for="site_name" class="form-label">Site Name:</label>
          <input type="text" class="form-control" id="site_name" name="site_name" value="{{ data.site_name }}" />
        </div>

        <div class="mb-3">
          <label for="site_description" class="form-label">Site Description:</label>
          <textarea class="form-control" id="site_description" name="site_description">{{ data.site_description }}</textarea>
        </div>

        <div class="mb-3">
          <label for="address_line1" class="form-label">Address Line 1:</label>
          <input type="text" class="form-control" id="address_line1" name="address_line1" value="{{ data.address.line1 }}" />
        </div>

        <div class="mb-3">
          <label for="address_line2" class="form-label">Address Line 2:</label>
          <input type="text" class="form-control" id="address_line2" name="address_line2" value="{{ data.address.line2 }}" />
        </div>

        <!-- Contact Fields -->
        <div class="mb-3">
          <label for="contact_phone" class="form-label">Phone:</label>
          <input type="text" class="form-control" id="contact_phone" name="contact_phone" value="{{ data.contact.phone }}" />
        </div>
        <div class="mb-3">
          <label for="contact_email" class="form-label">Email:</label>
          <input type="email" class="form-control" id="contact_email" name="contact_email" value="{{ data.contact.email }}" />
        </div>

        <!-- Social Media -->
        <div class="mb-3">
          <label for="social_media_facebook" class="form-label">Facebook:</label>
          <input type="url" class="form-control" id="social_media_facebook" name="social_media_facebook" value="{{ data.social_media.facebook }}" />
        </div>

        <!-- Other fields follow similar patterns -->

        <button type="submit" class="btn btn-primary">Save Changes</button>
      </form>
    </div>
  </section>
</main>
{% endblock %}

Conclusion

This implementation provides a simple and secure way for staff users to manage site-specific content dynamically. Using a JSON file allows easy configuration while Django’s tools like decorators ensure that only authorized users have access. Expand this setup by adding validation or integrating a file upload feature for logos or images!