Topic: How to connect events in the frontend with the backend using Flask and Bootstrap/MDBootstrap

meierlin free asked 2 years ago


I am new to web programming and wonder what is the most elegant way to integrate Flask on the server side with MDB and Bootstrap 4 on the design framework side.

I know that MDBootstrap was not created primarily for Flask. Nevertheless, there seem to be many users who successfully use Flask and MDBootstrap together.

I'm interested on a conceptual level how to connect changes in the frontend with the backend using Flask and Bootstrap/MDB.

For example,lets assume an editor table: If I delete the line via modal button, it is gone until I refresh the browser window. But how can this event be sent to the server - and finally to the database? Does it necessarily need Ajax or an API for this? Or how can this interface look like using between Flask and Bootstrap/MDBootstrap?

If anyone would like, I am happy to add some sample code from my project to better illustrate the issue. However, I generally refrain from doing so because I am interested in the answer on a conceptual level.

Thank you for any guidance.


Marcin Luczak staff answered 2 years ago


Hi,

I can't really help you with creating an interface between Flask and MDB as we do not use Python nor any of his frameworks in the MDB. Maybe our users who successfully integrated Flask with MDB could help you.

Generally speaking, unless you use cloud solutions you would have to create a backend server connecting with the database and a frontend connecting with the backend. For communication between frontend and backend, I would recommend you to check how to create applications with REST or GraphQL.

You can also check our MDB GO CLI that provides deployment and hosting solutions.

Keep coding, Marcin


meierlin free commented 2 years ago

Thank you Marcin. I am aware that you can't guarantee a working solution with Flask, but your general remarks already helped me out quite a bit.

Could you try to tell me how I would create a rest api endpoint from my MDB element, such as editor table? Or more specifically: how do you send a http request every time I delete a row using MDB Modal Editor? Is there a tutorial for this?

Thank you a lot. I'm new to web programmig so I might be stumbling over the basics here...


Marcin Luczak staff commented 2 years ago

We only provide tutorials for following integrations of our products: https://mdbootstrap.com/docs/standard/integrations/

As you mentioned you are new to web programming I would recommend reading general information about creating restful application, connectind frontend with backend and making an api calls, e.g. from here https://medium.com/swlh/making-use-of-apis-in-your-front-end-c168e343bea3. Also if you are using Flaskyou should also check the documentation for creating RESTful architectures with Flask: https://flask-restful.readthedocs.io/en/latest/.

You can also check this snippet https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2892856#js-tab-view to check how MDB works with async data.

I hope this chunk of information will help you in developing your skills.

Keep coding, Marcin


meierlin free commented 2 years ago

Thank you vers much, I will have a good read on these topics.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: MSI GS66
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No