We Keep Coding

Editing it in html when we pull data from Django

The news saved in the system will come to my page. I pulled data from django. Currently the data is coming one after the other. I want to pull 3 data side by side after it's will be 3 data below again and so it will go like that. How can i do this?
My kategori.html:
{% extends "homebase.html" %}
{% block title %} {{ setting.title }} {% endblock %}
{% block keywords %} {{ setting.keywords }} {% endblock %}
{% block description %} {{ setting.description }} {% endblock %}
{% block head %}
<link rel="icon" type='image/png' href='{{ setting.icon.url }}'/>
{% endblock %}
{% block header %}{% include 'header.html'%}{% endblock %}
{% block sidebar %}{% include "sidebar.html" %}{% endblock %}
{% block content %}
{% load static %}
<section id="news" data-stellar-background-ratio="2.5">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="section-title wow fadeInUp" data-wow-delay="0.1s">
<h2>TIBBİ BİRİMLER KATEGORİSİ</h2>
</div>
</div>
<div class="col-md-4 col-sm-6" >
<!-- NEWS THUMB -->
<div class="news-thumb wow fadeInUp" data-wow-delay="0.4s">
{% for rs in category %}
<a href="kategori.html">
<img src="{{rs.image.url}}" class="img-responsive" alt="">
</a>
<div class="news-info">
<span>{{rs.create_at}}</span>
<h3>{{rs.title}}</h3>
<p>{{rs.description}}</p>
<div class="author">
<div class="author-info">
<p>{{rs.keywords}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block footer %}{% include "footer.html" %}{% endblock %}
My page's screenshots for rn:
enter image description here

Javascript ID not showing reference to input text box - Django

{% extends 'halls/base.html' %}
{% block content %}
<div class="container">
<h2>Add Video to {{hall.title}}</h2>
<form method="post">
{% csrf_token %}
{% load widget_tweaks %}
{% for field in form %}
<div class="form-group {% if field.errors %} alert alert-danger {% endif %}">
{{ field.errors }}
{{ field.label_tag }}
{% render_field field class='form-control' %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary"> Add</button>
</form>
<br>
<h2>OR</h2>
<form>
{% for field in search_form %}
<div class="form-group ">
{{ field.errors }}
{{ field.label_tag }}
{% render_field field class='form-control' %}
</div>
{% endfor %}
</form>
<div id="search_results"></div>
<script type="text/javascript">
var delayTimer;
$("#id_search_term").keyup(function (){
clearTimeout(delayTimer);
$('#search_results').text('Loadingggg');
});
</script>
</div>
{% endblock %}
this is the HTML code. SO basically the whole idea here is when I inspect the search_form, it should give the id of the input box as "id_search_term". But when I inspect the box, it gives as id="id_search".
I am not able to find a way to reference the input box with the ID in the script tag

Python Flask XSS Neutralization (Veracode alert)

Hi have the following piece of code that triggers an alert on Veracode:
#app.route('/user/<username>', methods=['GET'])
#login_required
def user(username):
username = str(escape(username))
if current_user.username == username:
user = User.query.filter_by(username=username).first_or_404()
all_regions = Region.query.all()
return render_template('user_bs.html', user=user, all_regions=all_regions,
production_mode=app.config['PRODUCTION_MODE'],
manual_registration=app.config['AUTHENTICATION_METHODS']['MANUAL'])
return redirect(url_for('index'))
I'm trying to understand what I can do to neutralize it.
In the user_bs.html template I'm properly surrounding my variables with curly brackets, double quotes etc...
What else can i do to prevent XSS?
This is the template:
{% extends "base.html" %}
{% block app_content %}
<div>
<table class="table">
<h3>My Profile</h3>
<tr >
<td>
<h1><img src="{{ user.avatar(32) }}"> {{ user.fullname }} </h1>
<p>Info: {{ user.description }}</p>
<p>Username: {{ user.username }}</p>
<p>Role: {% for role in user.roles %} {{ role }} {% endfor %}</p>
<p>Email: {{ user.email }}</p>
<p>Creation date: {{ user.creation_dt }}</p>
{% if user.last_seen %}<p>Last seen on: {{ user.last_seen }}</p>{% endif %}
</td>
</tr>
</table>
</div>
{% endblock %}
And base.html:
{% extends 'bootstrap/base.html' %}
{% block title %}
{% if title %}{{ title }}
{% elif frontend %} {{ frontend.name }} - test
{% else %} test
{% endif %}
{% endblock %}
{% block head %}
<meta charset="UTF-8">
{{super()}}
<link rel="icon" type="image/png" href="{{url_for('static', filename='images/favicon.ico')}}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
{% endblock %}
{% block navbar %}
<div id="main">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}"><img src="{{url_for('static', filename='images/logo_navbar.png')}}" width="90px" alt="test" /></a>
{% if frontend %}
{% if frontend.analytics %}
<button id='toggle_analytics' class="btn btn-default navbar-btn active"><span class="glyphicon glyphicon-signal"></span>&nbsp Dashboard</button>
<button id='toggle_filters' class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-tasks"></span>&nbsp Reports</button>
{% else %}
<button id='toggle_filters' class="btn btn-default navbar-btn active"><span class="glyphicon glyphicon-tasks"></span>&nbsp Reports</button>
{% endif %}
{% endif %}
</div>
<ul class="nav navbar-nav">
{% if frontends|length > 0 %}
{% for region in regions|sort(attribute='name') %}
{% set prod_lst = [] %}
{% for frontend in frontends %}
{% if frontend.region == region and frontend.activate %}
{% set prod_lst = prod_lst.append(frontend.product) %}
{% endif %}
{% endfor %}
<li class="dropdown">
{{ region.name }} <span class="caret"></span>
<ul class="dropdown-menu">
{% for product in products|sort(attribute='name') %}
{% if product in prod_lst %}
<h6 class="dropdown-header">{{ product.name }}</h6>
{% for frontend in frontends|sort(attribute='name') %}
{% if frontend.region == region and frontend.product == product %}
{% if frontend.activate %}
<li>{{ frontend.name }}</li>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
{% endif %}
</ul>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
{% if frontend %}
<p class="navbar-text align-right animated fadeInLeftBig animation-duration-500ms delay-3s" align="right"> {{ frontend.name }} :: <span class="glyphicon glyphicon-time"></span> {{ frontend.timezone.name }} :: <span id="clock"></span> </p>
{% else %}
<p class="navbar-text align-right animated fadeIn animation-duration-500ms" align="right"><span id="clock"></span> </p>
{% endif %}
{% if current_user.is_anonymous %}
<li>Login</li>
{% else %}
<li><span class="glyphicon glyphicon-home"></span></li>
<li><span><img src="{{ current_user.avatar(20) }}"></span></li>
{% if current_user.roles[0].name == 'Admin' %}
<li> <span class="glyphicon glyphicon-cog"></span> </li>
{% endif %}
<li> <span class="glyphicon glyphicon-log-out"></span></li>
{% endif %}
</ul>
</div>
</div>
</nav>
{% endblock %}
{% block content %}
<div class="container-fluid animated fadeIn animation-duration-100ms">
{% block app_content %}
{% endblock %}
</div>
</div>
{{super()}}
{%- block footer %}
<footer class="text-center">© 2019 test</footer>
{%- endblock footer %}
{% endblock content%}
{% block scripts %}
{{super()}}
<script src="{{url_for('static', filename='js/animate/custom.js')}}"></script>
{% endblock %}

I fixed it by simply changing the route:
#app.route('/user', methods=['GET'])
#login_required
def user():
user = User.query.filter_by(username=current_user.username).first_or_404()
all_regions = Region.query.all()
return render_template('user_bs.html', user=user, all_regions=all_regions,
production_mode=app.config['PRODUCTION_MODE'],
manual_registration=app.config['AUTHENTICATION_METHODS']['MANUAL'])

Is it possible to custom django-tables2 template for a specific page in this case?

I'm using django-tables2 to render my data in tables in the template..
everything is rendered fine with pagination..
The Designer of our company wants to change the Display of data into blocks instead of simple table. the following picture may explain more.
I Want to ask if I can use Django tables2 in this case ..since I don't want to loose the pagination
Is it possible to custom the django_tables2/table.html file to only fit this case (because I'm using django-tables2 in many other pages in the project)?
Any other ideas may be helpful.
Thanks in advance :)

Yes, you can create a custom template (based on django_tables2/table.html) and set a specific table's template Meta attribute to its path:
import django_tables2 as tables
class Table(tables.Table):
# columns
class Meta:
template = 'table-blocks.html'
or use the template argument to the Table constructor:
table = Table(queryset, template='table-blocks.html')
or use the second argument of the {% render_table %} templatetag:
{% load django_tables2 %}
{% render_table queryset 'table-blocks.html' %}

I was having the same requirement and i had been able to do it. To achieve the desired results i have used bootstrap4 and modified the "django_tables2/bootstrap4.html" template. My modified template only displays blocks which can further be enhanced by embedding more css in it.
{% load django_tables2 %}
{% load i18n %}
{% block table-wrapper %}
<div class="container-fluid relative animatedParent animateOnce p-0" >
{% block table %}
{% block table.tbody %}
<div class="row no-gutters">
<div class="col-md-12">
<div class="pl-3 pr-3 my-3">
<div class="row">
{% for row in table.paginated_rows %}
{% block table.tbody.row %}
<div class="col-md-6 col-lg-3 my-3">
<div class="card r-0 no-b shadow2">
{% for column, cell in row.items %}
<div class="d-flex align-items-center justify-content-between">
<div class="card-body text-center p-5">
{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock table.tbody.row %}
{% empty %}
{% if table.empty_text %}
{% block table.tbody.empty_text %}
<tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
{% endblock table.tbody.empty_text %}
{% endif %}
{% endfor %}
</div></div></div> </div>
{% endblock table.tbody %}
{% block table.tfoot %}
{% if table.has_footer %}
<tfoot {{ table.attrs.tfoot.as_html }}>
<tr>
{% for column in table.columns %}
<td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
{% endfor %}
</tr>
</tfoot>
{% endif %}
{% endblock table.tfoot %}
{% endblock table %}
</div>
{% block pagination %}
{% if table.page and table.paginator.num_pages > 1 %}
<nav aria-label="Table navigation">
<ul class="pagination justify-content-center">
{% if table.page.has_previous %}
{% block pagination.previous %}
<li class="previous page-item">
<a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="page-link">
<span aria-hidden="true">«</span>
{% trans 'previous' %}
</a>
</li>
{% endblock pagination.previous %}
{% endif %}
{% if table.page.has_previous or table.page.has_next %}
{% block pagination.range %}
{% for p in table.page|table_page_range:table.paginator %}
<li class="page-item{% if table.page.number == p %} active{% endif %}">
<a class="page-link" {% if p != '...' %}href="{% querystring table.prefixed_page_field=p %}"{% endif %}>
{{ p }}
</a>
</li>
{% endfor %}
{% endblock pagination.range %}
{% endif %}
{% if table.page.has_next %}
{% block pagination.next %}
<li class="next page-item">
<a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}" class="page-link">
{% trans 'next' %}
<span aria-hidden="true">»</span>
</a>
</li>
{% endblock pagination.next %}
{% endif %}
</ul>
</nav>
{% endif %}
{% endblock pagination %}
{% endblock table-wrapper %}

How to move paginator block to the footer?

I have developed a django application. I added a paginator block to a webpage. It is placed on the wrong position. Instead, i want it to be placed below the list which is being shown. Actually, I am displaying group list on the page. Per page, only 5 group names will be displayed. Using pagination, i did that. But the problem is i am unable to place it in a correct position. I am attaching an image of the page.
The html page for this is:
{% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
<div class="content">
{% if user.is_authenticated %}
<h2>
Welcome back
#{{user.username }}
</h2>
{% endif %}
<h2>Groups</h2>
<p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
</div>
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus-sign"></span> Create New Group!
{% endif %}
</div>
{% endblock %}
{% block group_content %}
<div class="col-md-8">
<div class="list-group">
{% for group in object_list %}
<a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
<h3 class="title list-group-item-heading">{{ group.name }}</h3>
<div class="list-group-item-text container-fluid">
{{ group.description_html|safe }}
<div class="row">
<div class="col-md-4">
<span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
</div>
<div class="col-md-4">
<span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
{% block pagination %}
{% if is_paginated %}
<ul class="pagination" style="display:inline-block">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
{% endblock %}
{% endblock %}

The pagination code should be inside the col-md-8 div tag like below ::
{% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
<div class="content">
{% if user.is_authenticated %}
<h2>
Welcome back
#{{user.username }}
</h2>
{% endif %}
<h2>Groups</h2>
<p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
</div>
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus-sign"></span> Create New Group!
{% endif %}
</div>
{% endblock %}
{% block group_content %}
<div class="col-md-8">
<div class="list-group">
{% for group in object_list %}
<a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
<h3 class="title list-group-item-heading">{{ group.name }}</h3>
<div class="list-group-item-text container-fluid">
{{ group.description_html|safe }}
<div class="row">
<div class="col-md-4">
<span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
</div>
<div class="col-md-4">
<span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% block pagination %}
{% if is_paginated %}
<ul class="pagination" style="display:inline-block">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
{% endblock %}
</div>
{% endblock %}