I have a page on which there are different bootstrap accordians. I have different models stored in the database, Now I want to fetch them in proper order.
class CaseStudy_list(models.Model):
CaseStudy_id = models.IntegerField(primary_key=True)
title = models.CharField(max_length=255)
def __str__(self):
return self.title
class CaseStudy_parts(models.Model): #accordians
case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
CaseStudy_part_id = models.AutoField(primary_key=True)
CaseStudy_order = models.IntegerField(default="")
CaseStudy_title_accordian = models.CharField(max_length=255)
def __str__(self):
return self.CaseStudy_title_accordian
class CaseStudy_content(models.Model): #column 1 - text area
case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
content_title = models.CharField(max_length=255, default="")
content_text = models.TextField(blank=True)
content_link = models.TextField(blank=True)
def __str__(self):
return self.content_title
class CaseStudy_Media(models.Model): #column 2 - Media Area
case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
content_img = models.ImageField(upload_to='casestudy/images', default="")
class CaseStudy_buttons(models.Model):
content = models.ForeignKey(CaseStudy_content, on_delete=models.CASCADE)
button_id = models.CharField(max_length=255)
button_label = models.CharField(max_length=255)
<div class="page-layout">
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h6 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
aria-controls="panelsStayOpen-collapseOne">
{{content.section_title}}
</button>
</h6>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="container-area">
<div class="col-content">
<div class='introduction-content'>
<h3>CASESTUDY ID - {{casestudy_obj.id}} </h3><br>
<h3>TITLE - {{ casestudy_obj.title }} </h3> <br>
<h3>OBJECTIVE - {{content.content_text}}</h3>
</div>
</div>
<div class="col-data">
<img src="{{content.content_img.url}}">
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
DATA COLLECTION
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
<div class="container-area">
<div class="col-content">
<div class='introduction-content'>
<h2>DATA COLLECTION </h2>
<h2>Hello
</h2>
<button type="button" class="process-btn btn btn-info">LOAD DATA</button>
<h3 id="time-taken">Time Taken : ________ </h3>
<h3 id="time-taken">Data Size : ________ </h3>
</div>
</div>
<div class="col-data">
<img src="{% static 'images/iris-full-img.png' %}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
def casestudy(request, CaseStudy_id ):
casestudy_object = get_object_or_404(CaseStudy_list, CaseStudy_id = CaseStudy_id)
casestudy_part = CaseStudy_parts.objects.filter(case_study=casestudy_object).order_by('CaseStudy_order')
context = {
'casestudy_object': casestudy_object,
'casestudy_part': CaseStudy_parts,
}
return render(request, 'casestudy.html', context)
There are different case studiess, each case study redirect to a new page where there is information stored in accordians; these accordians may be very different in numbers for different case studies.
Now I want to know, in order to fetch data, I have to make objects for every table. And how do you show the data stored in different tables?
This is my first django project, please help
I believe that you are mixing database modeling with markup and CSS concepts and overcomplicating things.
Also, before I give you a solution I would like to point out that naming conventions are a good practice. Often, PascalCase for classes and snake_case for functions and variables.
models.py
class Case(models.Model):
id = models.BigAutoField(primary_key=True)
title = models.CharField(max_length=255)
objective = models.TextField(blank=True)
class CaseStudy(models.Model):
case = models.ForeignKey(Case, on_delete=models.CASCADE, related_name="studies")
title = models.CharField(max_length=255, default="")
order = models.IntegerField(default="")
img = models.ImageField(upload_to="casestudy/images", default="")
views.py
def case_detail(request, pk):
case = Case.objects.get(pk=pk)
return render(request, "case/detail.html", {"case": case})
case/detail.html
<div class="page-layout">
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h6 class="accordion-header">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="true"
aria-controls="panelsStayOpen-collapseOne"
>
{{content.section_title}}
</button>
</h6>
<div
id="panelsStayOpen-collapseOne"
class="accordion-collapse collapse show"
>
<div class="accordion-body">
<div class="container-area">
<div class="col-content">
<div class="introduction-content">
<h3>CASESTUDY ID - {{case.id}}</h3>
<br />
<h3>TITLE - {{ case.title }}</h3>
<br />
<h3>OBJECTIVE - {{case.objective}}</h3>
</div>
</div>
<div class="col-data">
<img src="{{content.content_img.url}}" />
</div>
</div>
</div>
</div>
</div>
{% for study in case.studies.all|dictsort:"order" %}
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-{{study.id}}"
aria-expanded="false"
aria-controls="panelsStayOpen-{{study.id}}"
>
{{study.title}}
</button>
</h2>
<div
id="panelsStayOpen-{{study.id}}"
class="accordion-collapse collapse"
>
<div class="accordion-body">
<div class="container-area">
<div class="col-content">
<div class="introduction-content">
<h2>{{study.title}}</h2>
<button type="button" class="process-btn btn btn-info">
LOAD DATA
</button>
<h3 id="time-taken">Time Taken : ________</h3>
<h3 id="time-taken">Data Size : ________</h3>
</div>
</div>
<div class="col-data">
<img src="{{study.img.url}}" />
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
A few insights:
id fields, Django does that automaticallyid is declared: id="panelsStayOpen-{{study.id}}"