Experiment-05 Full Stack Django Search Creators

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

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.

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>

<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;

.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>

</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>

<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>

• 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'),

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.

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

Experiment-05 Full Stack Django Search Creators

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment-05 Full Stack Django Search Creators

Uploaded by

Copyright:

Available Formats

21CS62 | Full Stack Django Development|

selected students for an event.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., myproject/settings.py).

Search Creators…. Page 39

Step-03: Create a view function

• Open the views.py file in your Django app's directory

Search Creators…. Page 40

Step-04: Create a new template

<title>Fruits and Students</title>

/* Center content vertically */

Search Creators…. Page 41

/* Style for lists */

margin: 0 20px; /* Add space between lists */

<ul class="list-group list-container">

{% for fruit in fruits %}

<li class="list-group-item">{{ fruit }}</li>

Search Creators…. Page 42

<ol class="list-group list-container">

{% for student in students %}

<li class="list-group-item">{{ student }}</li>

Search Creators…. Page 43

Step-05: Map the view function to a URL

from django.urls import path

from . import views

path('home/', views.home, name='home'),

Search Creators…. Page 44

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).

from django.urls import include, path

• Add a new URL pattern to the urlpatterns list

Search Creators…. Page 45

Step-07: 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

You might also like