9. Develop a Model form for student that contains his topic chosen for project, languages used and duration with a model called project.
Step-01: Create new folder:-
⦿ In the same project folder whatever we made earlier create again one new app name called as ‘projectRegistration’ using below command.
cd projectpython manage.py startapp projectRegistrationStep-02: Add the ‘projectRegistration’ to the installed_apps list:-
⦿ locate the settings.py file (usually located in the project directory) and open it.
⦿After then add your app name in install_apps list as per below image.
Step-03: Inside models.py file create a model:-
from django.db import models
class Project(models.Model):
fname = models.CharField(max_length=255, null=True)
lname = models.CharField(max_length=255, null=True)
email = models.EmailField(null=True, unique=True)
topic = models.CharField(max_length=255, null=True, unique=True)
languages_used = models.CharField(max_length=255, null=True)
duration = models.IntegerField()
def __str__(self):
return self.topic
Step-04: Run the below command to create the model:-
python manage.py makemigrationspython manage.py migrateStep-05: Create forms.py file inside the ‘projectRegistration’ folder:-
⦿ Open the forms.py file in your Django project directory (projectRegistration/forms.py).
⦿ Create a new form that will handle the request using below command.
from django import forms
from .models import Project
class ProjectForm(forms.ModelForm):
class Meta:
model = Project
fields = ('fname', 'lname', 'email', 'topic', 'languages_used', 'duration')
labels = {
'topic': 'Project Name',
'languages_used': 'Languages Used',
'duration': 'Duration (in days)',
'fname': 'First Name',
'lname': 'Last Name',
'email': 'Email'
}
Step-06: Inside views.py file create a function:-
⦿ Open the views.py file in your Django project directory (projectRegistration/views.py).
⦿ Import the required modules at the top of the file.
⦿ Create a new view function that will handle the request and display the data in the templates.
from django.shortcuts import render, redirect
from .forms import ProjectForm
from .models import Project
def project_register(request):
if request.method == 'POST':
form = ProjectForm(request.POST)
if form.is_valid():
form.save()
return redirect('project_register_list')
else:
form = ProjectForm()
return render(request, 'project_form.html', {'form': form})
def project_register_list(request):
projects = Project.objects.all()
return render(request, 'project_register_list.html', {'projects': projects})
Step-07: Create a template:-
⦿ Right click on ‘projectRegistration’ folder, create a new folder named templates.
⦿ Inside the templates folder, create a new file named base.html.
⦿ Inside the templates folder, create a new file named project_form.html.
⦿ Inside the templates folder, create a new file named project_register_list.html.
⦿ Copy all the different different html file code and paste into all different html file to display the user interface.
base.html
<!DOCTYPE html>
<html>
<head>
<title>Project Registration</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
justify-content: center;
align-items: center;
display: flex;
background: #000;
color: #fff;
padding: 15px;
text-align: center;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header nav li {
margin-right: 20px;
}
header nav a {
transition: all 0.3s ease;
font-weight: 600;
color: #fffd3c;
text-decoration: none;
}
header nav li a:hover {
color: lightgreen;
}
footer p {
font-weight: 600;
}
main {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20.5px;
}
form {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
width: 30%;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 10px;
}
form h1 {
text-align: center;
margin-bottom: 20px;
border-radius: 10px;
padding: 10px;
color: #fff;
background: #000;
font-size: 24px;
}
label {
display: block;
margin-bottom: 10px;
}
input,
textarea {
border-radius: 10px;
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
button[type="submit"] {
font-size: 16px;
font-weight: 600;
width: 100%;
background-color: #0b742e;
color: #fff;
padding: 14px;
border: none;
border-radius: 10px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}
footer {
background: #000;
color: #fff;
padding: 15px;
text-align: center;
}
.project-list {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
border-radius: 10px;
background: #fff;
list-style: none;
padding: 20px;
margin: 0;
}
span {
font-weight: bold;
}
ul.project-list h1 {
font-size: 25px;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
background: #000;
color: #fff;
text-align: center;
}
.project-list li {
border: 1px solid #00000054;
transition: all 0.4s ease;
border-radius: 10px;
margin-bottom: 8.3px;
background: #fff;
box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
padding: 15px;
}
.project-list li:hover {
background: #ffecf2a6;
box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}
.project-info {
display: flex;
flex-direction: column;
align-items: center;
}
.project-info h2 {
font-weight: bold;
margin-top: 0;
}
.project-info p {
margin-bottom: 10px;
}
.project-info span {
font-weight: bold;
margin-right: 10px;
}
.project-list li:hover:before {
color: #23527c;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{% url 'project_register' %}">Project Register</a></li>
<li>
<a href="{% url 'project_register_list' %}"
>Project Register List</a
>
</li>
</ul>
</nav>
</header>
<main>{% block content %}{% endblock %}</main>
<footer>
<p>
Designed by Braham Kumar | Copyright © 2024 vtucode | All Right Reserved...
</p>
</footer>
</body>
</html>project_form.html
{% extends 'base.html' %}
{% block content %}
<form method="post">
<h1>Project Registration</h1>
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Register Project</button>
</form>
{% endblock %}project_register_list.html
{% extends 'base.html' %}
{% block content %}
<ul class="project-list">
<h1>Registered Projects</h1>
{% for project in projects %}
<li>
<span>Name:</span> {{ project.fname }} {{ project.lname }}<br>
<span>Email:</span> {{ project.email }}<br>
<span>Project Name:</span> {{ project.topic }}<br>
<span>Languages Used:</span> {{ project.languages_used }}<br>
<span>Duration:</span> {{ project.duration }} days
</li>
{% empty %}
<li>No projects registered yet.</li>
{% endfor %}
</ul>
{% endblock %}Step-08: Add URLs path in the project’s URL patterns:-
⦿ Open the file in your Django project directory (project/urls.py).
⦿ Import the view function at the top of the file.
⦿ Add new URL pattern to the urlpatterns list.
from django.urls import path
from projectRegistration import views
urlpatterns = [
path('', views.project_register, name='project_register'),
path('projects/register', views.project_register_list, name='project_register_list'),
]
Step-09: Run Your Project:-
⦿ Now setup is completed you can run your project using below command.
⦿ The terminal will display the URL where the development server is running, typically http://127.0.0.1:8000/.
⦿ Copy the URL from the terminal and paste it into your web browser’s address bar to see the output web page.
python manage.py runserver
