Create URL Bookmark Manager Using Django
Last Updated :
28 Apr, 2025
This article explains how to make a tool called a Bookmark Organizer with Django for a website. With this tool, we can add, create, update, delete, and edit bookmarks easily. We just need to input the title and link, and we can save them. Then, we can click on the link anytime to visit the website.
What is a Bookmark Organizer?
A Bookmark Organizer is a tool or application that helps users manage and keep track of their bookmarks or favorite web links. It allows users to add, create, update, delete, and edit bookmarks in an organized manner. Typically, users can save the title and link of a website, making it convenient to revisit the websites they find interesting or frequently visit. The Bookmark Organizer aims to simplify and enhance the user's experience.
Create URL Bookmark Manager Using Django
Below, are the step-by-step guide to creating URL Bookmark Manager Using Django:
Starting the Project Folder
To start the project use this command
django-admin startproject core
cd core
To start the app use this command
python manage.py startapp home
Now add this app to the ‘settings.py’
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
File Structure
File Structure Setting Necessary Files
models.py: This Django code defines a `User` model with two fields: `name` as a character field with a maximum length of 255, and `url` as a URL field. The `__str__` method specifies that the string representation.
Python3
# models.py
from django.db import models
class User(models.Model):
name = models.CharField(max_length=255)
url = models.URLField()
def __str__(self):
return self.name
views.py:The Django views in this code manage a web application for handling URLs. The urls view creates, lists, and filters User instances. The delete_url view removes a specific User instance. The update_url view edits a User instance, allowing users to modify the associated name and URL.
Python3
from django.shortcuts import render, redirect
from .models import User # Assuming "url" is the correct model name
from django.http import HttpResponse
def urls(request):
if request.method == 'POST':
data = request.POST
name = data.get('name')
url = data.get('url')
User.objects.create(
name=name,
url=url,
)
return redirect('/')
queryset = User.objects.all()
if request.GET.get('search'):
queryset = queryset.filter(
name__icontains=request.GET.get('search'))
context = {'urls': queryset}
return render(request, 'urls.html', context)
def delete_url(request, id):
queryset = User.objects.get(id=id)
queryset.delete()
return redirect('/')
def update_url(request, id):
queryset = User.objects.get(id=id)
if request.method == 'POST':
data = request.POST
name = data.get('name')
url = data.get('url')
queryset.name = name
queryset.url = url
queryset.save()
return redirect('/')
context = {'url': queryset}
return render(request, 'update_url.html', context)
urls.py: The Django `urlpatterns` configures routes for the admin interface, main page (`urls` view), and routes to update or delete specific User instances. These paths are associated with their corresponding views.
Python3
from django.contrib import admin
from django.urls import path
from home import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.urls),
path('update_url/<id>', views.update_url, name='update_url'),
path('delete_url/<id>', views.delete_url, name='delete_url'),
]
Creating GUI
base.html : This HTML template defines a basic structure with a title dynamically set by the {{page}} variable. It includes a styled table, and the {% block start %}{% endblock %} allows extension
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{page}}</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
{% block start %}
{% endblock %}
<script>
console.log('Hey Django')
</script>
</body>
</html>
update_url.html : The provided Django template extends 'base.html,' incorporating Bootstrap styles for a form to update URL information. The form, centered in a card layout, pre-populates fields with existing data from the url variable.
HTML
{% extends "base.html" %}
{% block start %}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.text{
color: green;
font-weight: bold;
}
</style>
<div class="container mt-5">
<form class="col-6 mx-auto card p-3 shadow-lg" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h2 class="text text-center"> GeeksforGeeks </h2>
<h4>Update URL</h4>
<hr>
<div class="form-group">
<label for="exampleInputEmail1"> Website Name</label>
<input name="name" value="{{url.name}}" type="text" class="form-control" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1"> URL</label>
<textarea name="url" value="" class="form-control"
required>{{url.url}}</textarea>
</div>
<button type="submit" class="btn btn-success">Update URL</button>
</form>
</div>
{% endblock %}
base.html: It is the base HTML file which is extended by all other HTML files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{page}}</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<script>
console.log('Hey Django')
</script>
</body>
</html>
urls.html : This Django template extends 'base.html,' featuring a Bootstrap-styled form to add URLs and a table displaying existing entries. The form includes fields for website name and URL. The table dynamically lists URLs with options to view, delete, and update each entry.
HTML
{% extends "base.html" %}
{% block start %}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.text{
color: green;
font-weight: bold;
}
</style>
<div class="container mt-5">
<form class="col-6 mx-auto card p-3 shadow-lg" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h2 class="text text-center"> GeeksforGeeks </h2>
<br>
<h3>BookMark Manager</h3>
<hr>
<div class="form-group">
<label for="exampleInputEmail1">Website Name</label>
<input name="name" type="text" class="form-control" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">URL </label>
<input name="url" type="url" class="form-control" required>
</div>
<button type="submit" class="btn btn-success">Add URL</button>
</form>
<hr>
<div class="class mt-5">
<form action="">
<div class="max-auto col-6">
</form>
</div>
</div>
<table class="table mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Website Name</th>
<th scope="col"> URL</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for url in urls %}
<tr>
<th scope="row">{{forloop.counter}}</th>
<td>{{url.name}}</td>
<td><a href="{{url.url}}" target="_blank" class="btn btn-warning">View</a></td>
<td>
<a href="/delete_url/{{url.id}}" class="btn btn-danger m-2">Delete</a>
<a href="/update_url/{{url.id }}" class="btn btn-success">Update</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
admin.py:Here we are registering our models.
Python3
from django.contrib import admin
from .models import *
from django.db.models import Sum
admin.site.register(User)
Deployment of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output
urls.html
update_url.html
Similar Reads
Create Task Management System using Django Task management systems are essential tools for individuals and organizations to organize, track, and prioritize tasks efficiently. In this article, we'll explore how to build a task management system using django in Python.Task Management System using DjangoBelow, are the implementations of the Tas
15+ min read
Create A Bookmark Organizer For Website Using Flask This article explains how to make a tool called a Bookmark Organizer with Flask for a website. With this tool, we can add, create, update, delete, and edit bookmarks easily. We just need to input the title and link, and we can save them. Then, we can click on the link anytime to visit the website. W
5 min read
E-book Library using Django In this article, we will demonstrate how to build an E-book Library using Django. We have incorporated the functionality of login and registration, ensuring that users must first log in and register to access and read books. Additionally, after logging in, users gain the capability to both read and
15+ min read
Create Newsletter app using Mailchimp and Django In this article, we'll use MailChimp and Django to make a simple mailing app. When people subscribe to our app, we'll learn how to create an audience list and save the users in MailChimp using Python.Have you considered how they could send emails to subscribers with only one click? MailChimp is the
4 min read
Create a Bookmark Landing Page using HTML CSS and JavaScript In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users
4 min read
How to Create a basic API using Django Rest Framework ? Django REST Framework (DRF) is a powerful extension of Django that helps you build APIs quickly and easily. It simplifies exposing your Django models as RESTfulAPIs, which can be consumed by frontend apps, mobile clients or other services.Before creating an API, there are three main steps to underst
4 min read