Create URL Bookmark Manager Using Django
Last Updated :
24 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
Create Social Media Feed App using Django
In this tutorial, we'll build a basic social media feed using Django, the Python web framework. A social media feed is a core component of platforms like Facebook, Instagram, and Twitter, allowing users to view and interact with posts, comments, and likes in real-time. By the end of this tutorial, y
13 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
How to create a form using Django Forms ?
Django forms are an advanced set of HTML forms that can be created using python and support all features of HTML forms in a pythonic way. This post revolves around how to create a basic form using various Form Fields and attributes. Creating a form in Django is completely similar to creating a model
3 min read
How to Create a Bookmark Link in HTML ?
Bookmark Link is used for the users to navigate directly to the specific sections within the web application. We can create this bookmark link functionality in HTML using the id attribute with JavaScript and the class attribute with jQuery. Below are the approaches to create a bookmark link in HTML:
5 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 is a wrapper over the default Django Framework, basically used to create APIs of various kinds. There are three stages before creating an API through the REST framework, Converting a Model's data to JSON/XML format (Serialization), Rendering this data to the view, and Creating
3 min read
Language Learning App using Django
In this article, we will guide you through creating a language-learning application using Django in Python. Language Learning App Using DjangoBelow, is the step-by-step Implementation of a language learning app using Django in Python: Starting the Project FolderTo start the project use this command
15 min read