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 :

**requires docker !

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

If it worked fine, you didn’t even have to open the browser, right ?

Now, for pros

The Code :

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

( out of all, not one I’m good at )

source : davie504

we’ll try to understand code in terms of frontend and backend.

Backend First

Simply put, the python code provides a REST API for :

• insert() document into mongo ( happens at /aep ) which is C of our CRD
• 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

And other things are mostly for emphasizing and enriching data to json objects.

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.

challenges :

• Adding inputs to forms dynamically
• Deleting them
• Listing mongo documents as a list

Code :

index.html (home)

aep.html (Adding docs)

vep.html ( Listing docs and deleting docs )

Addressing the challenges :

Adding inputs dynamically without affecting the existing input field values :

I’m not gonna talk about the whole code but about the one thing’s that does it all ( the js embedded within the aep.html header ) :

$(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
});
});

Deleting them :

Here’s the js snip (this gets called onclick of the delete button next to input fields).

function delDiv(divid) {
  document.getElementById(divid).remove();

}

yep, very short yet very useful!

Listing mongo documents as a list:

I had to play a differnt card here

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

code within.

That’s it for today folks!

You can find the code here.