MongoDB CRUD using flask

Building a simple web-based user interface for performing CRUD operations using bootstrap & flask.

Set-up :

If you just want the app up and running in your local :

git clone git@github.com:VijayChandamala/mongo-crud-using-flask.git
cd mongo-crud-using-flask
chmod +x set-up.sh
./setup.sh

The Code :

Since this app uses python-flask , bootstrap and some java-script

source : davie504

Backend First

  • find() documents from mongo ( happens at /vep ) which is R of our CRD
  • delete_one() document from mongo ( happens at /dep ) the D of CRD

Frontend

I’m going to be honest here, the code is a mess out of which each part’s stack-overflowed and put right into it just get things working. So I can’t explain much about it, but I will point out the confusing and complex parts according to me and probably quite noob to UI experts.

  • Deleting them
  • Listing mongo documents as a list

Code :

index.html (home)

Addressing the challenges :

Adding inputs dynamically without affecting the existing input field values :

$(document).ready(function() {

var rowcount = 1
var addrow = document.getElementById('addrow');
var div = document.getElementById('custompairs');
var rc = document.getElementById('rowCount');

addrow.addEventListener('click', function () {
var row = document.createElement('div')
row.innerHTML = "<div id='"+rowcount+"' class='form-group'><div class='row'><div class='col'><input placeholder='key' name='key-"+rowcount+"' type='text' class='form-control' required/></div> : <div class='col'><input placeholder='value' name='value-"+rowcount+"' type='text' class='form-control' required/></div><input class='btn btn-outline-secondary' value=delete type=button onclick=delDiv("+rowcount+")></div></div>";
div.appendChild(row);
rowcount = rowcount+1
rc.value = rowcount
});
});
function delDiv(divid) {  document.getElementById(divid).remove();

}
<ul class="list-group">
{% for doc in response %}
<li class="list-group-item"> <pre><code><strong>{{ doc }}</strong></code></pre>
<form class="form-inline" action="/dep" method=post>
<button type=submit class="btn btn-outline-danger" value=Delete>delete</button>
<input type=hidden value="{{ doc._id }}" name="patternid" />
</form>
{% endfor %}
</li>
</ul>

DevOps Engineer by profession, guitarist by passion.