21CS62 | Full Stack Django Development|
Experiment-05
Develop a simple Django app that displays an unordered list of fruits and ordered list of
selected students for an event.
Step-01: This app will be created in the Django project we made earlier.
Step-02: Add the app to INSTALLED_APPS
Open the settings.py file in your project's directory (e.g., myproject/settings.py).
Locate the INSTALLED_APPS list and add the name of your new app to the list:
Search Creators…. Page 39
21CS62 | Full Stack Django Development|
Step-03: Create a view function
• Open the views.py file in your Django app's directory
(e.g., listfruitapp/views.py).
• Create a new view function that will handle the request and render the date and time:
from django.shortcuts import render
def home(request):
fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']
students = ['John', 'Jane', 'Mike', 'Sarah', 'Tom']
context = {
'fruits': fruits,
'students': students,
}
return render(request, 'home.html', context)
• Here, we define a view function home that creates two lists: fruits and students. These
lists are then passed to the template as a context dictionary.
Search Creators…. Page 40
21CS62 | Full Stack Django Development|
Step-04: Create a new template
• In your app's directory (e.g., listfruitapp), create a new folder named templates (if it
doesn't already exist).
• Inside the templates folder, create another folder with the same name as your app (e.g.,
listfruitapp).
• Inside the fourdate_timeapp folder, create a new file named home.html.
• Open home.html and add the following code.
<!DOCTYPE html>
<html>
<head>
<title>Fruits and Students</title>
<!-- Add Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Center content vertically */
html, body {
height: 100%;
body {
display: flex;
justify-content: center;
align-items: center;
Search Creators…. Page 41
21CS62 | Full Stack Django Development|
.container {
text-align: center;
/* Style for lists */
.list-container {
display: inline-block;
margin: 0 20px; /* Add space between lists */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Fruits</h1>
<ul class="list-group list-container">
{% for fruit in fruits %}
<li class="list-group-item">{{ fruit }}</li>
{% endfor %}
</ul>
Search Creators…. Page 42
21CS62 | Full Stack Django Development|
</div>
<div class="col">
<h1>Selected Students</h1>
<ol class="list-group list-container">
{% for student in students %}
<li class="list-group-item">{{ student }}</li>
{% endfor %}
</ol>
</div>
</div>
</div>
<!-- Bootstrap JS (optional) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Search Creators…. Page 43
21CS62 | Full Stack Django Development|
• In this template, we use Django's template tags to loop through the fruits and students
lists and render them as an unordered list and an ordered list, respectively.
Step-05: Map the view function to a URL
• Open the urls.py file in your Django app's directory (e.g., listfruitapp/urls.py).
• Import the view function at the top of the file
• Add a new URL pattern to the urlpatterns list
from django.urls import path
from . import views
urlpatterns = [
path('home/', views.home, name='home'),
Search Creators…. Page 44
21CS62 | Full Stack Django Development|
Step-06: Include the app's URLs in the project's URL patterns
• Open the urls.py file in your project's directory (e.g., fullstack_project/urls.py).
• Import the include function from django. urls and the path function from django. urls:
from django.urls import include, path
• Add a new URL pattern to the urlpatterns list
path('', include(listfruitapp.urls')),
• This includes the URL patterns from your app's urls.py file.
Search Creators…. Page 45
21CS62 | Full Stack Django Development|
Step-07: Run the development server
• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server
python manage.py runserver
• Open your web browser and visit http://127.0.0.1:8000/.
• Type or copy this http://127.0.0.1:8000/home/
Final Output of the Unorder list of Fruits and Students
Search Creators…. Page 46
