BugBytes
BugBytes
  • 290
  • 2 034 940
Django & HTMX App - Updating Data with HTMX
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
In this video, we'll add functionality to update user transactions in the application. We'll wire all of this up with HTMX!
We'll also write a test with pytest, for the update transaction functionality.
Github: github.com/bugbytes-io/Django-HTMX-Finance-App
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:27 Adding edit & delete icons
05:18 Adding URL & view to edit transactions with HTMX
16:31 Handling POST request in Django view
21:52 Adding test for updating transaction
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/Django-HTMX-Finance-App
🐦 Twitter: bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Django-htmx: django-htmx.readthedocs.io/en/latest/
Django ModelForm: docs.djangoproject.com/en/5.0/topics/forms/modelforms/#the-save-method
HeroIcons: heroicons.com/
DaisyUI Alert: daisyui.com/components/alert/
HTMX: htmx.org/docs/
#python #django #webdevelopment #htmx
Переглядів: 1 187

Відео

Django & HTMX App - Form Validation & Tests with HTMX
Переглядів 1,8 тис.20 годин тому
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes In this video, we'll add form validation and error-handling to our form, and wire that up to work with HTMX. We'll see how to navigate between pages, and update the URL with the hx-push-url attribute. We'll also write tests, using pytest, for the add transaction funct...
django-components - Build re-usable components in Django with TailwindCSS and DaisyUI
Переглядів 3,6 тис.День тому
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes This video looks at the 'django-components' package that allows developers to build re-usable, custom Django template components. We'll learn how to define these components, and use them in our Django apps. 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 01:21 django-components intro and set...
Django & HTMX App - Create Transactions w/ HTMX
Переглядів 2,5 тис.28 днів тому
In this video, we'll give users the ability to create new transactions using HTMX and Django. We'll create a Django Form class for adding a transaction, and will create an HTMX-driven submission to enable the user to add their transactions. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coff...
Django & HTMX App - Adding Date & Category Filters | pytest tests
Переглядів 2,1 тис.Місяць тому
In this video, we'll add date & category filters to our app, allowing users to filter their transactions between a start and end date, and filter down to one (or more) categories. We'll also add pytest functions to test this functionality. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffe...
Django & Azure Blob Storage - Storing User Uploaded files in Azure Storage
Переглядів 1,3 тис.Місяць тому
In this video, we'll see how to integrate Django with Azure Blob Storage, using the django-storages package. We'll explore different concepts relating to Azure Storage Accounts and Containers, and will learn how to store user-uploaded files on the cloud. ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 0...
Django & HTMX App - Adding Aggregated Totals to Page | Testing Context with pytest
Переглядів 1,8 тис.Місяць тому
In this video, we'll add the aggregated totals for user transactions to the transaction list page. We'll create a new table for these, and will add a pytest function to ensure the correct aggregated variables appear in the context, with the correct values. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider ...
Django & HTMX App - Custom Managers | pytest & factory-boy for unit tests
Переглядів 2,2 тис.Місяць тому
In this video, we'll add a custom model manager to our app's transaction model, and will set up pytest and factory-boy for unit testing our application functionality. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 00:55 Creating custom ...
Django & HTMX App - HTMX form submission | Query Optimization with django-debug-toolbar
Переглядів 2,8 тис.Місяць тому
In this video, we'll amend our transaction filter form to submit using HTMX, and will handle the hypermedia response from Django by swapping HTML into the DOM We'll also bring HTMX into the static directory of the project (rather than reference a CDN). Finally, we'll quickly optimize database queries using django-debug-toolbar, to prevent the N 1 problem. Github: github.com/bugbytes-io/Django-H...
Django & HTMX App - Display Transactions | django-filter FilterSet
Переглядів 3,7 тис.Місяць тому
In this video, we'll build a list page for the user's transactions, and will style it up with TailwindCSS and DaisyUI. We'll also build a FilterSet class in Django, using the django-filter package, to allow us to easily filter transactions using a form on the page. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please ...
Django & HTMX App - Setup, Models and Management Command
Переглядів 8 тис.Місяць тому
This video is the first in a series where we build a Finance App with Django & HTMX. We'll set the project up, build some Django models, and create a management command to populate our database with some sample data. Github: github.com/bugbytes-io/Django-HTMX-Finance-App ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugby...
File Uploads - with Django REST Framework!
Переглядів 2,6 тис.Місяць тому
This video looks at how to setup file uploads with Django REST Framework. We cover Django FileFields, MEDIA settings, DRF Parsers, Views and Serializers, and finally how to upload the file to the DRF API using an AJAX request in JavaScript. ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 00:...
django-after-response - Execute Django code AFTER sending the response!
Переглядів 2,5 тис.2 місяці тому
In this video, we'll look at the 'django-after-response' package for executing code after the response has been sent back to the client. This allows us to offload processing and return a response more quickly and efficiently, improving user experience. For simple use-cases, django-after-response can replace more complex tools like Celery. We'll set up an example in this video and walk through t...
Environment-based Settings in Django Projects | django-environ | Setup for local/production/testing
Переглядів 2,5 тис.2 місяці тому
In this video, we'll look at how to setup Django for multiple environments, such as local development, production, and testing. We'll see how to setup a configuration folder with files for each environment, and will see how to load in sensitive settings from a .env file using django-environ. We'll also see an approach for third-party configuration settings, for services like Celery, AWS, Azure,...
GeneratedField in Django 5 - New Django Model Field!
Переглядів 3,3 тис.2 місяці тому
Django ORM Playlist: ua-cam.com/video/EsBqIZmR2Uc/v-deo.html This video looks at the new GeneratedField in Django v5, and we create a few scenarios where GeneratedField is a useful addition to your Django models. ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: ko-fi.com/bugbytes 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 00:47 GeneratedField overview 0...
Re-Write Django tests with pytest | pytest fixtures & test functions
Переглядів 1,6 тис.2 місяці тому
Re-Write Django tests with pytest | pytest fixtures & test functions
Writing Maintenance Mode Middleware in Django (with tests)!
Переглядів 1,9 тис.2 місяці тому
Writing Maintenance Mode Middleware in Django (with tests)!
Django Model Properties & Methods | @property decorator | get_absolute_url() method
Переглядів 2,8 тис.2 місяці тому
Django Model Properties & Methods | @property decorator | get_absolute_url() method
FastAPI & Alembic - Database Migrations in FastAPI apps
Переглядів 3,3 тис.2 місяці тому
FastAPI & Alembic - Database Migrations in FastAPI apps
FastAPI & SQLModel - Database Interaction in FastAPI apps with SQLModel
Переглядів 4,4 тис.2 місяці тому
FastAPI & SQLModel - Database Interaction in FastAPI apps with SQLModel
Go flag Module - Reading Command-Line Flags in Golang!
Переглядів 1,1 тис.3 місяці тому
Go flag Module - Reading Command-Line Flags in Golang!
Go, Alpine.js & HTMX - Building a Small Todo App ( Golang )
Переглядів 6 тис.3 місяці тому
Go, Alpine.js & HTMX - Building a Small Todo App ( Golang )
Live Reloading in Go / Golang - with Air
Переглядів 2,8 тис.3 місяці тому
Live Reloading in Go / Golang - with Air
SQLC in Go - Auto-Generating Database Code in Golang
Переглядів 8 тис.3 місяці тому
SQLC in Go - Auto-Generating Database Code in Golang
Alpine AJAX - Alpine plugin (bringing HTMX-like functionality to Alpine!)
Переглядів 3,9 тис.3 місяці тому
Alpine AJAX - Alpine plugin (bringing HTMX-like functionality to Alpine!)
Django Proxy Models - Customizing Model Behaviour using Proxy Models!
Переглядів 3,4 тис.3 місяці тому
Django Proxy Models - Customizing Model Behaviour using Proxy Models!
Writing Django Middleware (with tests!) | HTMX middleware | IP Blacklist middleware
Переглядів 2,5 тис.3 місяці тому
Writing Django Middleware (with tests!) | HTMX middleware | IP Blacklist middleware
Django Graph Models command - Generate ER Diagrams for your Database
Переглядів 5 тис.3 місяці тому
Django Graph Models command - Generate ER Diagrams for your Database
Svelte & Django - User Registration with Svelte + Django!
Переглядів 2,6 тис.4 місяці тому
Svelte & Django - User Registration with Svelte Django!
Building a CLI Tool | Scraping & Processing Data with BeautifulSoup, Requests & Pydantic
Переглядів 2,2 тис.4 місяці тому
Building a CLI Tool | Scraping & Processing Data with BeautifulSoup, Requests & Pydantic

КОМЕНТАРІ

  • @syedazeemjaved
    @syedazeemjaved 14 годин тому

    Lesson learned, if you want to make a profit, don't add a number in your restaurant name.

  • @raulolmos345
    @raulolmos345 17 годин тому

    Thanks for the video, we are slowly completing the CRUD.

  • @ouuv8607
    @ouuv8607 17 годин тому

    Thank you so much! You are a great teacher

  • @zxmu5755
    @zxmu5755 20 годин тому

    Thank you so much!

  • @zxmu5755
    @zxmu5755 20 годин тому

    ¡Gracias!

  • @vfb6265
    @vfb6265 22 години тому

    What version of azure-storage-blob you use ? I have an error with latest version 12.20.0 "Could not find backend 'storages.backends.azure_storage.AzureStorage': cannot import name 'BlockBlobService' from 'azure.storage.blob" 😭 Please can you provide your requirements.txt with your videos ? Thanks !

  • @abdusuf523
    @abdusuf523 День тому

    Nice, can u add modal for create and update? as they r tricky to work with htmx , hiding modal and updating the table list after success.. That would be appreciated.

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thanks for the suggestion, I'll consider adding that later in the series.

  • @pm1234
    @pm1234 День тому

    Nice, thank you! Subscribed. With 'django_components.safer_staticfiles', 127.0.0.1:8000/static/card/card.py is still downloadable for me (django 5.0.6, django_components 0.82), you too?

  • @zxmu5755
    @zxmu5755 День тому

    Thank you so much! Im learning so fast with you...

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Awesome - glad to hear it - thanks!

  • @repotranstech9614
    @repotranstech9614 2 дні тому

    Cool video as always.

  • @user-eg6kh2rk3y
    @user-eg6kh2rk3y 2 дні тому

    Thank you bug bytes for your efforts. You help developers like me

    • @bugbytes3923
      @bugbytes3923 2 дні тому

      Thanks for watching - glad to hear that!

  • @technolung
    @technolung 2 дні тому

    Bugbytes is so gud. He knows all the htmx and he doesn't afraid of anything

  • @wiki-infodevelopment3369
    @wiki-infodevelopment3369 2 дні тому

    Best, so just a thing it looks good if you use Modal to create and Update

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thank you for the suggestion!

  • @codernerd7076
    @codernerd7076 2 дні тому

    couldn't even get pass the install :( Getting requirements to build wheel did not run successfully.

    • @bugbytes3923
      @bugbytes3923 2 дні тому

      Did you update pip? “pip install -U pip”

    • @codernerd7076
      @codernerd7076 2 дні тому

      @@bugbytes3923 yup :(

    • @codernerd7076
      @codernerd7076 День тому

      @@bugbytes3923 I did, maybe I'm missing some build tools?! I just got the Python install on windows 11.

  • @ParhamSalamati
    @ParhamSalamati 2 дні тому

    Great as always, really appreciate the time you put on this series :)

  • @nasirgaayte2695
    @nasirgaayte2695 2 дні тому

    great day i just wander if you can make this app a desktop app using pyq5 or make any video on django+pyq5 thanks

  • @piorprogramadorbr9481
    @piorprogramadorbr9481 2 дні тому

    YOU SIR, YOU ARE A SIR

  • @frameff9073
    @frameff9073 2 дні тому

    thank you

  • @priyanshvatsal9791
    @priyanshvatsal9791 3 дні тому

    😇

  • @DemelashShimekit
    @DemelashShimekit 3 дні тому

    Thank you

  • @reelsergealain
    @reelsergealain 3 дні тому

    Great videos, can you add a slug system, and make it so that we can export the data

    • @bugbytes3923
      @bugbytes3923 3 дні тому

      Thank you! I'll add import/export functionality in the near future!

    • @rick_er2481
      @rick_er2481 3 дні тому

      Already looking forward learning al lot

  • @hakanbilgin6875
    @hakanbilgin6875 3 дні тому

    thank you good informations.

  • @PratikBhande-qq1ht
    @PratikBhande-qq1ht 3 дні тому

    Can you please help me where I can upload multiple excel or csv files and ai agent will correlate between them in order to give output

  • @nearyou30
    @nearyou30 3 дні тому

    Isn't Path the class, and not an object? Just FYI. Thanks for the video

  • @coderfek
    @coderfek 3 дні тому

    Been following your tutorials for a while now. And I have no regrets, love how you show the documentations of everything you are implementing into your code. Looking forward to more new django series like this one!

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thanks a lot! Glad to hear you're enjoying the content, cheers!

  • @timothymalahy7880
    @timothymalahy7880 4 дні тому

    You could really find a niche with Django and azure. I find that it is way too complicated for azure docs to help with - so we’ve gotten pretty far at my work, but it was a ton of work to learn.

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Great suggestion thanks! I'd like to explore a lot more with Azure in the future, definitely.

  • @timothymalahy7880
    @timothymalahy7880 4 дні тому

    Yes on the htmx - it seems very ripe for DRY, but I struggle to not get lost in my templates with a bunch of htmx components in them. Would love to see some robust examples. I regularly add rows to a table from a form. That would be great to have reusable all over. I can understand the abstracted logic but it gets so messy that I’m better off rewriting the views.

  • @levantenieshvili5263
    @levantenieshvili5263 4 дні тому

    By the way, could we unite testing for start and end dates in one GET parameter? Thanks a lot!

  • @levantenieshvili5263
    @levantenieshvili5263 4 дні тому

    BugBytes, super great tutorials for filtering the data at the same time knowing how to test that! Thanks!

  • @myoji5580
    @myoji5580 4 дні тому

    Thank you! I really want to this content. I will make filter site. One more how to add page? 1, 2, 3 how to change content in SPA using HTMX I got HTMX filter on Django.❤🎉

  • @myoji5580
    @myoji5580 4 дні тому

    14:37 use url tag. Not use url string

  • @hamzaelmhoujab2350
    @hamzaelmhoujab2350 4 дні тому

    Great video 🦾

  • @25Ericcheong
    @25Ericcheong 4 дні тому

    Great video! Just to add to this - for someone who is new to docker and am curious about the commands. The meaning behind this command (specifically after the -p which also means --publish) "docker run --name pg-container -e POSTGRES_PASSWORD=SECRET -p 5432:5432 -d" at 1:42 mark. Aside from everything that BugBytes have explained which all makes sense and is intuitive to me. The -p here means that you are mapping the docker host port to the running container postgres port (in this scenario). Meaning you are mapping the docker host's port 5432 to the container's port 5432 (this is by default set in placed by the postgres image you've downloaded and can also be modified by need be) This is important since your connection string (in your local Golang project) will need to be connecting to the docker host port (which then eventually gets mapped to the postgres container you've built). For reference - stackoverflow.com/questions/22111060/what-is-the-difference-between-expose-and-publish-in-docker Just thought this is interesting. This is only applicable if you do decide to change the port number (which is what i did out of curiosity but had to do more research in understanding why it didn't work for me locally)

  • @agentNirmites
    @agentNirmites 4 дні тому

    I get confused between file system and failed system. Great tutorial tho.

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thanks a lot! Scottish accent.... haha

  • @hamzaelmhoujab2350
    @hamzaelmhoujab2350 4 дні тому

    Straight to the point explanation good job !

  • @hamzaelmhoujab2350
    @hamzaelmhoujab2350 4 дні тому

    Great Video 🤟

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Many thanks, glad you liked!

  • @hamzaelmhoujab2350
    @hamzaelmhoujab2350 5 днів тому

    Thank you bro ! 🥊

  • @ampy4961
    @ampy4961 5 днів тому

    Do you have any plan of adding approval of payments by users with different level of authorization? Something like Payment Request ->{Pending, Approved, Paid).

  • @ampy4961
    @ampy4961 5 днів тому

    Wow!! The most under rated youtube channel. Amazing! Your contribution is priceless.

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thanks a lot, super glad to hear it - much appreciated!

  • @levantenieshvili5263
    @levantenieshvili5263 5 днів тому

    BugBytes, thanks a lot for the video! It would be more intuitive to add only those items (e.g. table) that would be changed in {% include "tracker/partials/transactions-container.html %} and leave form in the main transaction-list.html - to make all things correctly working you would need to drop off 'hx-swap=outerHTML' from HTMX - let me know if it makes sense!

  • @inteliconn995
    @inteliconn995 5 днів тому

    Thanks!

  • @aminzahedsadeghi4995
    @aminzahedsadeghi4995 5 днів тому

    Please more video about django ninja extra :) Model Controllers, Model Services and ... are confusing stuff.

  • @burhansuleymanvural6902
    @burhansuleymanvural6902 5 днів тому

    @app.post("/api/user/add/") async def create_user(form:Annotated[UserForm, fastui_form(UserForm)]): id=users[-1].id+1 user=User(id=id,**form.model_dump()) users.append(user) return [c.FireEvent(event=GoToEvent(url="/"))]

  • @tchappui
    @tchappui 5 днів тому

    What about the todos variable in the x-data of the current Alpine component ? After the first hypermedia request, you are appending the new todo to the list using the received html fragment. Now, the todos js variable does not reprensent the state of the todos anymore. I have the same kind of problems with htmx/alpine: how to keep x-data in sync after alpine ajax requests or hx requests.

  • @raulolmos345
    @raulolmos345 6 днів тому

    Very good video, I remain very attentive to this saga until the end. I come from developing a large project in Django, Admin LTE with Jquery and all the CRUD Ajax, we will rewrite it using HTMX, and we will not move to React or Angular or Vue which was the first option, hypermedia is simpler, very good job.

    • @legion_prex3650
      @legion_prex3650 4 дні тому

      same here. I invested many hours learning react and vue, but finally (as a backend dev) i want it just simple. And with alpine.js it is even more powerful.

    • @raulolmos345
      @raulolmos345 4 дні тому

      @@legion_prex3650 I see that I am not the only one as a backend developer who had that problem, thanks for commenting.

    • @bugbytes3923
      @bugbytes3923 23 години тому

      Thanks for watching! I think the hypermedia approach is definitely fine for at least 90% of apps, to be honest. Good luck with your project!

  • @Kennerdoll
    @Kennerdoll 6 днів тому

    can you bring it to the frontend instead of using Admin dashboard

  • @daffastack
    @daffastack 6 днів тому

    sir.. but how to passing different js function on each button ? can we pass javascript trough components tag ?

    • @bugbytes3923
      @bugbytes3923 6 днів тому

      You would need to target the buttons individually to run different code for each one. In the video, we are targeting all buttons with a generic 'button' selector.

  • @Maik.iptoux
    @Maik.iptoux 6 днів тому

    Can you please create an update about the fastapi events? i don't get it with the lifespan...

  • @graczew
    @graczew 6 днів тому

    Well deserved donations for all your django content. Can't wait to see rest series.

    • @bugbytes3923
      @bugbytes3923 6 днів тому

      Thanks a lot, really appreciate it!

  • @villiamefron
    @villiamefron 6 днів тому

    thanks, it was perfect please make a series about writing tests in django

    • @bugbytes3923
      @bugbytes3923 6 днів тому

      Thanks a lot! Will do, it's on my list