Learn Django by Building an Online Marketplace – Python Tutorial for Beginners

learn Django by building a simple Online Marketplace Django is a python framework that makes it easier to build websites with python Stein with code from Stein teaches this course Stein is a very experienced course creator the project you develop in this course features authentication communication between users a dashboard for items form handling and more in this tutorial I'm going to show you how to build an online marketplace where people can sell and buy new and used items first I just want to show you a little demo of the project so you know what we are going to build okay so here we can see the front page of the project we are building you have a simple menu with a few items you can go to the inbox dashboard you can browse items and you can create a new one on the front page the six newest items will be showing and at the bottom you can see the categories you'll also see how many items that belongs to each of the categories and if you go to for example new item you should be able to select the category for item fill out information at the name description price and add image the browse page you should search in title and the description of the product and you can go to categories if you just want to see toys for examples and you can clear the filters in the inbox you should see conversations that you have with other users and you can go into here and you can talk directly to the owner of an item you can also go into an item here and click contact seller if you want to do that on the dashboard you have your items here you can edit them and delete them so if you go into one of these then you have two buttons here edit and delete and on edit page you can just fill out information just like you did when you created it and you can set here if it was sold or not I'm going to begin by installing and setting up everything we need and then build the project piece by piece I would recommend that you know the basics of HTML before you start this course because I'm going to focus mainly on Django and a little bit of Tailwind okay let's get started building the project so first I go to a command line and the first thing I want to do here is to set up an environment that Django can work in Python comes with a built-in virtual environment called then which I'm going to use right now I'm inside a folder called puddle which is the name of our project then to create the environment I just run the command Python 3 Dash M then and then the name which is just EnV what this command does is that it creates a virtual environment called EnV a virtual environment is an isolated little environment on your computer where you can install pattern packages like Django just for this project this makes it really easy to maintain deploy and similar in order to have the environment created we can activate it by running stores EnV bin activate and then you can see here that the name of the environment is prepended before the project name and when it's activated we can install Django busing pip install Django this will now install the newest unstable version of Django and if you dependencies that Django has great so the last step of this setup now is to create Django project and we can do that by running Django Dash admin start project and then the name which is puddle great so let's go into this CD puddle just to see what files we have there so we have a managed.pi and a puddle folder let me just go to visual studio code which I'd like to use where I have open up this folder with environment and the Django project so this manage.pi file is sort of a script for running administrative tasks like updating the database structure adding super users running the development server and similar plus you have another folder here with the same name of the project asgi.pi and wsgi Pi are entry points for the web server and you don't have to think about these files at this moment these are only going to deploy a project to a live server and then you have settings.pi which is kind of like a global configuration for the whole project here we have secret Keys installed apps and where templates are located information about the database how we want the password to be structured and similar and the last file is the urls.pi this is a file that can be thought of of like a table of contents for the whole project so this area will link the URL to a specific View so I'm not going to explain these files more right now it's easier to do that when we start using mm so you have some context okay let's go back to the command line and then we're going to run the Django development server and just to see that everything is okay and to run this with just a python Dimension by run server then you can see here that you get the warning I will come back to this later right now we can just copy this address and go to browser I like to use Google Chrome and then just paste it here then you can see here the install worked successfully congratulations nice so now that we have everything up and running we can create our first Django app a Django app is a folder with some files it's used to separate the views templates database models and similar for a specific part of a project for example the pages like the home page contact about and similar will each be stored in one Django app but we will also have one app for conversations and one app for items and so on but we'll come back to this later right now I just want to focus on the front page so I want to begin by creating a new Django app called core and to do that I need to go back to the command line stop the web server and then say python managed by see here that we use this file now start app and then core and this will now create a new folder with a few files so we can see that we have it here we have the migrations which is information about the database this is generated by Django so you don't have to think about it right now admendous pie is where we register the database models to be used inside the Django admin interface dot Pi is like a configuration file but just for this specific app models.pi is where we Define database models like information about what we want to store for an item for example the title description price and similar test.pi is where we can run automated tests and similar for this app and views does Pi is where we Define views for the app so it can be a bit hard to understand what all these files do but I promise you that you will get a better understanding of them when we start using them and now that we have created this app it's almost ready to be used we just need to tell Django that app exists and they're going to use it so if we go back to settings.coin you can see here that we have a little segment called installed apps we have a few of these built-in apps here already and then at the bottom you can add core and the functionality that comes from these built-in apps is something that most djangos that's used at some point for example you have the admin interface where we log in and can add the data to the project we have one for handling sessions a one for handling authentication and similar I will come back to a few of these later in this video so since you know I added core hair Django knows that this exists and is going to be used so then we can begin setting up the front page so if I just close this and find views.pi we can create our first View So Def index then we pass in a parameter called request this is information about the browser your IP address if it's a get or post request and similar so this has to be put in on all views that we use and then we just want to render a template very quickly by saying return render and we Post in the request parameter so this will now be available inside the template and then the template we're going to use which is core slash index.html and save so this is how simple a view can be and now that we have the view we can create the template so inside the core folder create a new folder called templates Django will automatically look for a folder called templates inside all of the register apps in the installed apps section and then inside the templates folder I want to create one more folder called core this refers to the core from The View we just created so this folder so Django automatically find this folder and then it will find the core index file in here and then in here we can just create a new file called index.html and this will do something like this so we add the doctype HTML the HTML tag head and then here we can set up the meta chart set charge it utf-8 and then we can set up the viewport meta name view Port content this is so that page can be a mobile friendly width equals device Dash width and initial Dash scale s1.0 and then I want to include Tailwind as a CSS or as a CDN so script SRC HTTP test colon slash cdn.tailwind css.com and then we can just close this tag right like that now we can add a title to the page title puddle close this one title close the head create an important tag and then in here you can say div class p x 6 py6 space in here and H1 the front page then we can oops sorry closed H1 close the div close the border and close HTML and Save so the last step now is to add this to the urls.pi file so if I just open up the folder here again and find puddle URL step by then we can import The View we just created so from core.views import index and we can add it to the top of the URL patterns path set the path to be empty since this is the front page and then we want to use the view called index now we can set the name for this to be index and Save so if I now go back to here again that we can run the server go back to Chrome and refresh and now I'm at the front page and we can see here that I have space above and on the side and this is now H1 from Tailwind nice okay so now that we have all of this we can create a new page a page for the contact information but let's begin by fixing up the front page a little bit first because right now all of this code is inside index.html file I want to move most of the code into a new file called base.html which the index.html file should extend this way we can reuse the code for more templates throughout this project so inside the same folder as index.html we can create a new file called base.html great so here I can actually just copy all of the code from the index.html copy this and paste it here and then save this actually I can take this cut it out save and then in index.html file to now extend the base file we can say extends core slash base dot HTML then below here and just paste this title so now this will make sure that we extend the best.html file but the content is missing so if I go to the browser and refresh the title is gone so we need to introduce something called a code block so let's go back to paste.html and add that inside this div here so block content and close it and block this will not help yet but if I copy this go back to HTML index.html wrap it around the content here then we make sure that everything we put in here will be rendered automatically in here by Django 7 now refresh you did that the title is gone but the content from here uh sorry this doesn't have to be inside all of the templates nice so let's add one more code block to the base.html file for the browsers tab title so in here you can say block title and then and block space and then we pipe it like that so then on the index.html file create the same code block block title and now we can say welcome here and block and then welcome will automatically be put here in front of the pipe pedal see if I now refresh it will say welcome pedal nice great so now we can continue to the contact page let's begin with the view so in views.pi we create a new view depth contact passing the request parameter return render request course Dash contact dot HTML and Save then we can create a template so let's just copy everything from index.html create a new file we'll paste this and save it as contact.html in the same folder then we can rename the title of the of the page to contact and then the contact page then we need to add this to the URLs also so let's begin by importing it contact and import contact and remember to end this with the Slash let me pause in contact here that the name to be contact and the name we put in here would make it easier to reference this URL later in the project so if I now go to the browser and just manually go to contact then you will see that we are on the contact page perfect before we dive deeper into Django I just don't add a menu and a footer so let's go back again to base with HTML and edit there so base.html and then above here add a new no close py6 PX 6 Flex because we want items to be next to each other justify Dash between so that all space is put between the logo and the links if you remember from the demo and then items Center so that the links is on the same height as the logo and then we want the border on the bottom one pixel so border Dash B for Border bottom and the color for the Border can be border Dash gray 200 and then close the navigation bar like that and then on the left side we want a logo so a hrf slash I'll add a close to this text Dash XL and we want the form to be summable so font oops font semi bold purple so let me save now go to the browser see if this is correct yes so I don't have a navigation bar here which is white with the border on the bottom and then the logo to the left here nice and then I want some items on the right side here so then I need to create a new div oops div close space Dash X6 and this will automatically now add a space between each of the items I put in here so first can you begin with the new item link a hrf it's going to just be empty for now close text XL oh sorry text LG front semi bold and when we hover this I want it to be gray so hover colon text Dash gray 500 new item so let me see if this looks good yes so now it's put here on the right side and when I hover it it becomes gray nice so let me copy this to make a browse link browse and then I want to sign up a button and a login button so this looks a little bit different so I just want to create a new element H or if can just be empty for now close and this I want to have some padding so px-6 and py3 text can also be LG and the font can be semi bold just like a pair but I wanted to have a background so PG teal 500 this is a dark green color then I want to set text to be white I want the corners for the button to be around that so I can either rounded Dash XL and when we hover this I want the background to be a little bit dark or green so hover PG teal 700 and then we add the title sign up even I'll make a copy of this we can do the same thing for the login a sec I want this to be gray 500 and gray 700 when we hover this then just replace the title with log in and Save so if I go back now refresh we have the new item browse and then these two with the hover functionality great then I wanted a very simple footer here as well so the nice thing is now that for but before I go there I just want to show that this comes from the base.html file so if I go to front page the menu is there as well that's what's so nice about extensions so let's go back to base.html and create the footer So Below this div you can add footer oops footer close py-6px-6 Flex justify between just like up in the menu and we got the b g the background to be BG gray 800 so it's a dark gray color I can close this I'm done in here on the left side I want information about the project div clause W 2 3 so this will take up to a third of the footer padding rate can be set to 10. close this one and then in here I want the title so H3 class mb-5 front semi bold and this can be text Gray 400 about so we can save this now see what this looks like refresh so here I have the dark footer and then the title and down below here I want just a little bit of random text some lorem ipsum so P close text LG text Gray 500 or if blah blah blah so just copy paste and close the paragraph so then we have a little bit information about the project here then on the right side I want one more menu where we can link to about page to contact privacy terms of use and similar so here with a div close W1 slash three this doesn't need any padding and then here we had just make a copy of this title same menu instead and then I want to use a UL for the menu so you are close space Dash Y dash 2 so each of the elements in here have some space between them close the URL and then Li a hrf can just be empty for now close text LG textile 500 so it's a green color and when we hover this I want this to be a little bit darker green color so text teal 700 but closed link and close the Li so let's see what this looks like now don't have the menu here nice so let's add a few more elements here I mean that is the contact oops privacy and then we have the terms as well as terms of use privacy policy to be correct nice so if I refresh now we have the menu and everything we need so now I just want to activate this link here and let me go back here and then I want to use a code called URL let me just pass in contact and then Django will automatically use this URL function to find contact hair and give us this URL so if I refresh now click this one and I'm sent to the contact page nice by the way if you want to learn even more Django from me then check out my channel code with Stein you can find a link in the description below great now that we have the core app with a few pages it's time to start working on the categories and the items and for this we need one more Django app so go to the command line stop the web server then say python manager by start app item I want both of the categories and the item to be located in this app so that we need to register this with the Django so let's go back to settings.pi and add it in the list here save and we can close this so I want to begin with the categories since this is the simplest database model so if I just open up the browser here again find the item models.pi then we can create a new database model but then close category pausing models.model just so Django knows what we are using and the categories should only have one field which is the name so name equals models.char field and we need to set the max length there we can set this to 255 so don't have any limitations so then when we are created a database model we need to update the database by going to the command line and set python manage by make migrations so now you can see here that migration is for item we want to create a new model called category and if I open up the migrations folder and we have a new file here then you can see here what this is going to do so it's going to create a new table called category with the ID field and the name field so now that we have done this we just need to tell Django to actually execute this script and that's very easy we just python managed by migrate so now you can see here that it created it down here the item.001 and also a few other database tables this is from the authentication and similar that Django comes with now this warning should also be removed so to make it possible to add data or categories to your project we need to log into the admin interface and to do this we need a user so let's create one python managed by create super user admin admin at turtle.com and then a password then the super user created successfully then we can run the web server again try to log in so if I just copy this go to new tab slash admin then I need to log in with the user I just created okay so now you can see here that we have the authentication authorization we have users where is the admin user I just created but category model isn't there even though the database should have it already but you need to just tell Django that we want the database table to show in the admin interface so if you go to item and add the main.pi then we can first begin by importing the category model here so from dot models import category and I can say dot models because this admin.i file is in the same folder as models and then to register it we just say admin.site to register pass in the category so if I now go back and refresh the item that appeared here and we have the categories database table here nice let's try to add a few if I just click add let me add the toys I can add the furnitures I can add um clothes and save so if you see here now I see two things that I just want to fix first of all categories is misspelled that's because Django just automatically adds an add an S to the end of the app name but this should end in IES and same here category object three doesn't tell me anything about what this actually is so we need to set the string representation for this clause so if I just go back to the model Supply we can begin with the categories name so Class Matter and then we say verbose name plural categories and Save a very fresh now you can see here that this is now spelled correctly then I want to show the name of the category here so now we need to override the string representation so depth Str self return self.name so I just want to show the name the value from here it's even now refresh is it closed Furnitures and toys nice thing I just want to do now is to order this by name and this is also done in the meta which is kind of options for or configurations for the model so ordering name and since this is a typical we need to add a comma here since this is a iterable so refresh then everything looks great there nice and then I want to go to the next database model which is the item model so below here because I close item because in models.model I want this to have a name as well so I can just copy this paste it and I want the description so description equals models dot text field so this is now expected to be much longer than 255 characters that's why I want to use a text field and not a chart field I guess the blank equals true and null equals true in case the user doesn't want to provide a description for the project and then I want the price for the price field so price equals models.float field and I want a Boolean field to Mark if it's sold or not so is sold equals models.bully in field default should be just a defaults and I want to know when this was created so created at equals model dot date time field and I just want to add this automatically so then I can just add here Auto now add equals true then Django will handle this for us but I also want to know who created this so create that at night created by equals model dot foreign key now this is a index in the database between this item and the user for example adding a new user so here I can pass in the user which I will import very soon and then I need to set something about the related name to items so it's very easy to get all of the items belonging to a specific user and then the last parameter that we need here is the on delete models dot Cascade so if a user is deleted all of the items will also be deleted so now we can see here that I get an error because user is not defined so I need to imported a pair from django.comtrib dot auth dot models import user then the warning is now gone also I want one more foreign key after the category so category equals models Dot foreign key for send category and then we can set the related name here also to items and on delete models dot Cascade so if you delete the category all of the items belonging so let's category will also be deleted so the last field I want to add now is the image so for example below the price we can use the image equals model dot image field then I want to specify where on the server I want this to be uploaded so upload to item images and then Django we create this folder for us if it doesn't exist blank equals true and no equals true in case the user doesn't want to provide an image so if I now save we can go and update the database again so just go back to the terminal stop the web server then you can see here that I can't use the image view because pillow is not installed I'll just sort this I just need to run this command so clip install pillow a pillow is a python library for handling images like resizing saving them and similar so now that this is gone add-on I can run the make migration script again and you can see here that I changed the meta option for the category and I want to create a new model called item and then just pattern matched by migrate so the last step 10 or the next step is to register this in the atom interface again so import item and admin.site register item and Save so if I now go here refresh okay sorry I need to run the server again of course refresh and then I have the items here but before I can create any one I just need to do some configuration for the images so if I go to the settings.pi scroll down we find something called Static files this is formable CSS files and similar as you can see here but I need to do the same thing for the media files so media URL should be media slash and then where the root folder for the media file should be so media root equals base there slash media so now this will create a media folder inside the root folder of the project this variable is defined at the top pair unless just the root folder for the project so now we can try to add a few of these so if I click add item and I select the categories toys uh um for example Teddy Bear this is the description and then the price for example 100 and then an image then I can select the teddy bear and this is created by admin so then I can click save and add another one to create one more in the clothes and then check it blah blah blah just add some random information and then select an image okay it's shoes that I have here so shoe one and this is also created by admin so now you can see here that I have the same string representation problem here you just want to fix that before I do anything more just copy this paste and save refresh and I will see the name of the item so if I now go back to visual studio code you can see here that we got the new folder called media and then Django created a new folder called item images and in there the images is uploaded nice so now I want to show the newest products from the database on the front page so let's find core use.pi then we need to import the database models here so from item dot models import category because I want to show this as well and item and then I can get the six newest project products here the same items equals item.objects dot filter is soul equals false because I don't want products that is sold and to get six I can just say six like this 0 to 6. and then to get all of the categories he has a categories equals category Dot objects.old and then to post them in and to be able to use them in the template we need to add a context here so comma categories past n categories and items items now this here two points up to this nice okay so then we can begin by showing that items so in the index.html you can just remove this one and create a new div class margin top six so we have some space up to the menu px-6 py12 PG gray 100 rounded Dash XL close that div and then in here I want to add a title so H2 close mb12 text 2 times XL text Center and then the title newest items and save so let's go to front page just to see that it looks okay yes newest items and then I have a box here to show the items and so here I want to have a grid virtual three and three items So Below the title I can create a new div close grid grid calls three because I want to add three columns and then get three oops cap three which is the space between each of the items and then in here I want to Loop through the items that we provided in The View that is these ones which is a list of items and we can just F4 item and items close this one and four and then we create an element here div close it and a hrf just close that one as well it can just be empty for now and then we can show the image on the top so it did and then ink SRC item dot image dot URL now this will give us the full absolute URL to the image Clause rounded top XL so at the top of the image you'll have rounded corners and then below here I want to show the name and the price so div Clause P6 so I have padding on the side and on the top and bottom what the background to be white and rounded B Excel so the bottom of this div will be around that corners and then here we have a H2 for the title text to XL item.title I can close that one and below here I want to show the price P plus text Gray 500 price item dot price and close so even now save this we should see a loop of the project the products we have added okay the name is there because it's name and not the title sorry so I had a teddy bear press 100 shoe price 50. nice but the image is missing and this is because that Django really doesn't handle media image for us but since we are just in development now we can do a little hack or use Django for this but in production you should never do this so inside the urls.pi we can import two new things from chango.conf import settings and from django.conf.urls static import static and then at the bottom here you can add this plus static settings Dot oops media URL so now this points to the URL that we set in the settings Supply and the document root to find its files is settings dot media root and Save so even now go back and refresh the images is loaded nice and then below the newest images I want to show the categories just like in the demo so let's go back to the template and make a copy of this and just paste it below here and instead of saying newest item to say categories close this there and I can close that div and then in here I would Loop through the categories so for category in categories and four and then I can show you can actually copy most of this and just paste it in here but the categories doesn't have image so let's remove that and the categories doesn't have uh price but we can show how many products or items is in here so to do that we can create a function or we can just say category dot items dot count and items so I think this should be correct one items zero items one items but this should of course be category dot name so now we uploads on items Furniture items toys phone items nice so now we have a working front page for this project next step now is to make it possible to go into the detail page of an item so let's begin with the view for this this view should be in the item views.pi so here we can set def detail crossing the request parameter but since we want to find the detail of an item we need an ID or a primary key for this so let's add one more parameter here PK for primary key and then to get this from the database with the item equals get object or 404 right angle will give us a 404 error if this object doesn't exist in the database and we want to get this item from the item model where the primary key is primary key so this is now the primary key on the model itself and this is the one we get from the URL so you can see here that I get two warnings because I haven't imported this shortcut this can be together with render and I need to import this model so from dot models import item so now the warning is gone now we can return and render template so return render Quest in item slash detail.html and then the context which is item item and Save so the next step then is to create the folders and this template so here create a new folder templates and item and detail so detail.html and this should also extend the base.html so extends core slash paste.html I won't have the title here so block title and then in here we can show the name of the the items item.name and then just close this block and block then the block for the content block content and block so then in here I would have a grid for I want to show and then in here I want to have a grid because I want to have the image on the left and then information about the item on the right side so div class grid grid calls five and get can be set to six and then on the left side we have the image so div close call oops called spam call sorry call Dash span three because I want to take up three of the available filed columns msrc item dot image dot URL close rounded Excel because I want image to have rounded corners so before addending more hair I just want to see what this looks like so the next of them is to import this into the URLs file I want to have a separate URLs file for the items because this is a much cleaner way to do this so here I want to create new file urls.play and then we first need to import pod so from django.urls import path and we can import all of the views for the items from dot import oops views and URL patterns oops URL patterns path and when this has an integer primary key we want to use the views dot detail View the name can be detailed so this now expects an integer called primary key or PK and this PK has to be the same as we've set there and detail might be a little bit confusing now so I want to import or Implement something called at the name here name item I will show you very soon how this works this will now be a namespace for this app then I just need to import this URLs file to the main URLs file so in puddle urls at the topic part items include item.urls and this points to the URL file we just created and I get the warning here because you need import this together with pot and then all URS that begins with item will automatically take Lego into this and check if there is a pod with the primary key there nice so the last thing we can do now before we test this is to go into index.html and activate the link here so URL then we provide item which is the namespace or the app name detailed then we provide the primary key by saying item.id save so now Django will fix this URL for us so if I click this now teddy bear you can see that I'm sent into the detail page for the teddy bear and you can see the teddy bear name up there great so now I want to show some information on the right side here select the name the price who is selling this the description and similar so let's go back to the detail.html create a new div class call span span whoops Dash 2 close that div actually I want some more classes here like p-6 and BG gray 100 and rounded XL and then the first element in here I want to add is an H1 H1 Plus mb-6 text 3 XL and then item dot name close to H1 let's see what this looks like yes we have the gray box here with the title nice so now let's add the price and who's selling this so P close text Gray 500 trunk price item dot price and close the paragraph if I just make a cooked this I can rename the tight layered cellular and then item dot created by dot username so basically give us the username for the person who added this so 100 and seller is admin below here I want to show the description for the product item so P plus text Gray 700 is a little bit darker strong and then close you can have a text Gray 500 and this description [Music] closed string at the BR for line break and then item dot description close that one and Save so I only want to show this description or this title if there is an actual description so we can test that up here if item.description so now this will only be rendered if the user filled in and description for the item so let's close this and if like that and then below here I can have a button which we will activate later a hrf class inline block margin top six we're gonna space on this padding X6 and py3 text can be large and the font can be semi-bold and the background can be bjtl-500 text can be set to White and if we hover this we want the background to be darker so hover PG TLD 700 and we can also have rounded Corners it's all rounded Dash XL and then the title contact seller so we'll come back to this and activate it later but let's make sure it's looking good and it does nice then below here I just want to show the related products or items so if there are more products in the same category so let's add one toy car blah blah and toy car is it by admin and then I want this to be showing at the bottom here so let's first make some changes in the view because here is where we get the related items related items equals item.objects filter and then I want to get all of them items in the same category as this one so category equals I10 dot category and I want to filter out the ones which set to sold so sold is still false and I want to exclude this item from the list so dot exclude PK equals PK and I only want to have three so zero colon 3 to split it and then we just need to append this related items list like this and Save and then to show this I just want to Loop through and show them just like we do on the front page so just copy this entire div here and paste it below this grid the bottom but instead of saying item in items you can say related items and place the title with the related items and Save so let's see what this looks like related items and I have the toy car here if I go into this the teddy bear will be a related product nice great so now that they have the basic browsing for this project I want to make it possible to sign up so I Can Begin by creating it new file in the core app so in the core app is where I want all of these views to be located let me just close a little bit of this and then in the core app I want to create a new URLs file file to clean up a little bit now you can import path again from django.urls import port and from Dot import views so import all of the views belonging to this app also one is that app name to be core now we set up the URL patterns can begin with empty one pot something views.index and the name is also index and we can also add above there so or contact or whatever we created if I just go to puddle URLs now we have this contact so let me move this in here and say views.contact and Save so now I can remove this from there and when the URL here is empty I want to use the include statement here as well so include core.urls so now it it will Loop through all of the paths here before it continue and tests with the items so then I don't need to import this here anymore but if I now save and go here and refresh I will get an error on this one in the footer because now this doesn't exist anymore so let me open up base.html and rename this to core colon contact since I added app name here it's a very fresh note everything is back as it was okay so let's continue with signing up a user so inside the core app I want to create one more file called forms.pi so Django helps us with creating users validation and similar let's first import forms from Django from Django import forms and we can import a user creation form from django.com trip oauth.forms import user creation form and I need to import the database model for the user so from django.com oauth models import user and then we can create it here so close sign up form now we pass in the user creation form which we imported a pair and then we need to do some configurations plus meta do we need to set the model we are going to use which is user that comes from Django and then I want to specify which Fields I want the user to fill out Fields equals username authentic fill out email password one one and password 2 which is the repeat password so let's save this for now and then we can create the view where we are going to show this form so inside you've used Pi we can import the form we just created from dot forms import sign up form and then we create the view so at the bottom here we can say def synapse in the request parameter and then we can create an instant deform form equals sign up form whoops and then we say return render request then the template which is course signup.html now you just need to post the form into the front end form like this and save then we need to create the template before we can test this so sign app.html I want this to extend the base as well oops extends core slash space dot HTML not add a block title sign up and oops and block okay have a double there block content and close this one and block and then in here we can begin with the Box around the form div clause W1 slash two which just filled out the half of the screen my6 to have space above and below this button my box and mx-auto so it's centered on the screen on the background to be PG gray 100 and have rounded corners close that one then we can have it title H1 close and b-6 text 3XL sign up so before I add anything more here we can test that this is working so let's go to URL point in show where to add it there but sign up slash views DOT sign up and the name s sign up now we can update the menu so this link to the correct page so that is the first link here URL core colon sign up and Save so if I go back now refresh click sign up now we have this box that fills out off of the screen and is centered um looks like I forgot to add some padding to this box so let's go here and say p-6 save refresh and now it looks a little bit better down below here we can show the form so let's go back here create the form element form method should be that post action dot which is the same page we are on and since we are using a post request we need to add something called a csrf token this is security built in with Django to prevent cross-site reforce requests for jury I think it's good I can render the form by saying form.s p and then we have a button so button class py4 px8 text can be large the background can be teal 500 and only over this can be darker so BG teal 700 and I want the corners to be a rounded X L and the text to be white and we can just set the title to be submit and close the button save go back and refresh and we have the form here which doesn't look very good but we can try to customize this so it looks a little bit better so if I then go back here just remove this this is the easiest way to show the form and we can first make sure that if there are errors that are not connected to the fields we showed them here by saying form dot non field errors then we can add a div close mb-3 and in here we have a label for the username label close inline block margin button to username close the label and then form dot user name close that Dev press save it now refresh we just have the username and it looks a little bit better but I will make it even better let's add a br here and we can copy this paste it for the email and form. email and the same with the password password one the repeat password repeat password repeat the password to and Save refresh so now the Forum looks a little bit better we will fix more styling I just want to make sure that we print out more errors down here if there are any so if form dot errors or form dot non field errors then we can close this pressing and if and if there are any we create a new div class and B three padding six in all Direction background can be PG red 100 rounded XL there and then we just Loop through the images here and the errors form Dot sorry we need to Loop through rambasing for field in form field dot errors close this and four and I just want to move this down there sorry it shouldn't be up there paste and Save so if I now refresh it looks a little doesn't look any different and I can submit it yet but let's fix the rest of the styling here which is done inside the user creation or the sign up form so let's go back to forms.play and we need to do some changes here so the username let's begin with that username equals form dot Char field then we set something called widget equals form dot forms dot text input typeset attributes adders equals create the dictionary placeholder your username save this see if it works yes now we have a placeholder there now we can add some Clause let's do it as well so close W Dash full py4 px6 and rounded XL nice so now this looks much better let's do this for the other three Fields as well email and this should be an email input so Django will validate it for us your email address and then password 1. this should be a password input or password I can just copy this password to and then repeat password and save so if I now go back and refresh the form looks much better still nothing happens if I try to submit this so I need to do some more changes in the views.pi here I need to check if the user has submitted and to do that like that if request dot method is post then I know that the form has been submitted so then you can create a new instance of the form I think form equals sign up form and passing request dot post which is all of the information from the form then I can check if it's valid so if 400 is valid then I can say form dot save and then the user will be created in the database and when that is done we can redirect the user to the login page that doesn't exist yet we can just say return redirect login now we will get the 404 error but we'll fix it later and if it's not the post request then we just use the amped form like that now we get the new warning here because we haven't imported this so let's import it up here together with render so if I now refresh try to submit assign a pair so then I was redirected to the login there nice but it means that it was working so when I go to users I will have a code with Stein the email and the password you can see here that user is active but it's not status staff and it's not a super user that means that I cannot log in into the admin interface with its user only super users can do that so now we have the possibility to sign up a user then we can make a possible to log in a user so I Can Begin by creating the form so if I just go to forms.pi we want to still be using an authentication form from Django so where we import this we can also import Authentication [Music] form and then we create it at the top here doesn't really matter Clause login form or authentication form I'm done here I want to override the fields for the username and the password so I can copy this paste it and the password here it's just called password and not password one but besides this it's completely same so I don't need a view for this because I'm just going to be used a login view that Django comes with so if I now just go to uart Pi I Can Begin by importing this from Django so from jango.com trip dot oath import views now this will crash with this one so we need to rename this by saying s auth views then I can append it here port login slash and then the view we're going to use which is now auth views Dot Login view dot S View like that and now set the name to be login but now I need to specify that we are going to use the form we created here so we need to import it here from dot forms import login form so I can just say authentication oops Authentication [Music] form equals login form so if a note just go to base.html I can import this sorry fix this here URL core login save I can try to use it okay so now I get the template does not exist error because this doesn't exist but this isn't really not the file we are going to use so I need to update here to tell Django which files to use template name is core slash login.html and this will look very similar to the sign up for the file so just copy everything create a new file and save it as login.html here I don't need a repeat password this should be called formed password and I only need the username and the password so then I can just fix the title log in and Save Django automatically calls a form for form that's why I don't need to rename this and everything should now be working so let's go back refresh and now we see the login form so now I can try to log in with the user I created call it Stone and then my password so now I was automatically redirected to something about accounts slash profile this doesn't exist and we are not going to use it either it's just the default URL that Django tries to redirect you to so you can override this by going to settings time settings of Google login redirect URL so you can be sent to the front page when you are logged in login URL so again so if you try to visit the page you don't have access to you you will be redirected to this URL and you can also that log out redirect URL Wireless here to the front page or when you logout you will be sent to the front page so if I just remove this now it doesn't look like we are authenticated I want to hide these two buttons when we are authenticated and show an inbox button and a dashboard button instead so let me go to base.html and then above here you can say if request.user dot is authenticated then I want to show two buttons else then we can show these two so let me close this and if and save so I'll go back and refresh those two buttons are now gone that's because their Quest user is authenticated there is always a user and if it's not authenticated it's an anonymous user so then I can make a copy of these two buttons just paste it in there and the first one can be in box and the other one can be dashboard then they can just be empty for now say go back and refresh now we have inbox and the dashboard button instead nice okay so now I want to make it possible to add items for the users so we can begin by creating a new form for this so if I just go back to editor and find the app for this the item and then create a new file here for forms.pi then I Can Begin by importing forms from Django from Django import forms and I want to import the database model item so from dot models import item then I can create the form class new item form and pass in forms dot model form mm-hmm like is that the class matter so we can do some configurations we want to add the model to be item and the fields we want here is category and we want the name the description oops the price and the image great so now we can save this for now we will come back to The Styling in a little while but now we can go to reviews.pi to create the view for this So Def new request and I want this to be I want Django to require that you are logged in to access this error so to do that you can add something called a decorator so let's begin by importing this from django.com trip.org dot decorators import login required and under apply that to this view we just add login required so if you want to try to visit this without being authenticated you will be redirected to the front page now sorry to the login page and then here I can say form equals new item form we just need to import lists from dot forms import new item form and then we can say return render request Post in the template name which here should be item slash form dot HTML because I want to reuse this for the edit as well then we can pause in the form here form and form and Save and when that is done we can create the template so just open up here again and then inside the item folder create an equal form dot HTML so here we can begin by extending the template extends core slash base.html now we set up the title block title new item no sorry actually here I want to post in a variable called title you might wonder where this is coming from and I will show you under block in views here you can append it there title new item but then we can do the same with the edit view we just say edit edit item so when that is done you can go down here create a block content close it and then in here we can begin with the title H1 close mb-6 text 3XL and then the value here should also be title which will be new item and then we can set up the form form method should be post the action can be the page we are on and here we also need to set something called Inc type to multi port form data and this is needed to be able to upload images and then here we add the csrf token close space dashy 4 to have space between all of the fields and then just form dot s p so we can close this one and then I want to show the errors there you just want to copy that from the from the sign up form because this is identical or the login form that doesn't matter let me just copy this go back and paste it here and then below here we can have the button which is also the same as in the sign up or login so just copy this go back and paste it and then you just want to close the form element okay um you should be there like that I think everything is okay here now last step done is to import this to the URLs page so here you can add this above here but new views Dot a new item isn't that what I called it not just new okay and then we set the name to be new like that great so if I now save then I can go to the menu in base.html to add the button here so we can have this together with these two the Inbox and the dashboard can I have it first there URL should go to item colon new like that and then we can rename the title the link to new item and Save so even now go back and refresh should have a new okay I will already have this of course so I don't need the button there sorry but okay sorry let me just copy this and paste it there because it should be on that link it doesn't need a separate button so save again refresh and if I click this now I will be redirected to the login page because I wasn't logged in so let me log in with code with Stein and then my password let me try to click it again new item and then I have the form here nice so then I just want to fix the style length for this so if I go back to forms.pi I can add it there I can do it a little bit differently here than the other places just to see another way we can do this so the Jets oops digits equals and I create the dictionary category colon forms dot select and then I want to set the attribute so Etters create a new dictionary close W full py4 px6 rounded XL and border and Save so we can see if this is working that did not work okay so I need to have this inside the meta class of course so save this now refresh and then I have the styling there nice then I can do the same thing for the other just that I want to have this as a variable so up here I can say input Clauses equals paste it and then I got the input Clauses like that so I don't have to repeat this multiple times and this is still working nice so then I can copy this just at the comma here replace this for name and then forms dot text input like that and the same with the description there should be a forms dot text area and then the price which would be text input and the last one image which is the file input so then I can save this now go back and refresh and now the styling here is also working perfect I want some space between these two by the way so this should have an empty six that's better great so then the last thing we need to do now is to add a check if this form is submitted assimilar just like we did in the sign up so in the views.pi here we can see if request dot method method is post then form equals new item form and here we need to pause in request dot post and also requested files so we get the files that user uploads and then we can say if form dot is valid but instead of saying just form dot save here we need to do some changes here we can say item equals form dot save and pause and commit equals false because if we try to save to the database now the created by field is not added therefore we will get an error if we try to do this that's why we need to set commit false so this will just create an object but not save it in the database and then item dot created by equals request.user which is always authenticated since we have this login decorator item.save and that is done we can just redirect the user back to the detail page of the item they just created so return redirect pause in item colon detail and we need to set the primary key equals item.id which is the item we just created so I get the warning here now because I haven't imported redirect together from the Django shortcuts and if it's not a post request then it's a get request and we can do it like this so that is the whole new view perfect so we can try it out now if I go here now select the category furniture chair test the description blah blah two hundred dollars then I want to select an image so I can take the chair there submit okay enter a number okay let me do that instead 200 maybe I should use a DOT instead of a comma submit the image attribute has no file associated with it okay so that didn't work requested files that's correct then form as the angk type multipart slash form Terror this is weird let me just try to log in here again with the admin user oops admin like that and I just want to delete this here or I can set them chair one with it just so it's working now it's working here but why didn't the image get uploaded okay let me just try one more time it's a new item Furniture chair two hundred choose file chair two submit I guess now it was working so I don't know what the error was because I haven't changed anything but at least now it was working perfect so that means that now we have to possibility to add items okay so now I want to start building the dashboard where you can see your items edit them delete them and similar so let's start by creating a new app so python managed by start app dashboard now we can add this to the settings file dashboard and Save um here I don't want any database tables but I want to view so if I just open up dashboard views.pi then I Can Begin by importing the item model so from item dot models import oops import item and I can import the login decorator so from django.comtrib.auth.models import sorry decorators import login required then I can create the view just begin with adding this decorator def index request and then I want to get all that items that you have created so items equals item.objects.filter created by equals request.user and then I want to render the template render sorry return of course render passing the request parameter then set the template which should be dashboard slash index.html and then here we can pause in the items and Save so then I can set up the template for this I think it will be similar to top pair so no it will not that it will be very similar to the front page the beginning of the front page so down to the box for the categories let me just copy everything here and then create a folder templates and then dashboard and then the file for that index.html paste this and then I can just say and block this can just be like it is and the title here can be dashboard and instead of the newest items I can say my items and then just save this so now we have the view and the template then we just want to create a separate URLs file here so URL Point begin with importing from django.urls import path import import all of the views from dot import views setup app name to be dashboard and then the URL patterns then I just want one haircut empty because I want to prefix this in the main URLs file we use that index set the name to be index and save then I just want to import this to the main URLs so puddle slash urls.pi I can add it here below the items or above that doesn't matter Port dashboard include dashboard.urls and Save so if I now just open up base.html I can activate this button here called dashboard URL dashboard colon index and Save so then we can see if this is working now just refresh sorry I need to run the server again refresh again click dashboard my items and then I can see them here nice so now we can continue to make it possible to delete your items so I can create a view for this so inside the dashboard views.play here say at login required because you need to be logged in to delete your item def delete because in the request parameter and the PK which is the ID for the item we want to delete now we get the item from the database by saying item equals get object or 404 so it's importance we want to use the item model and we want to get to where the primary key is primary key from the URL and we are created by equals request.user so we can't get objects that you haven't created yourself and to delete it you just say item dot delete now we can redirect you back to the index page of the of the of the dashboard and when I think about it I actually want to have this in the item I item views instead so just copy and remove it from there go to item views.pi paste it below here then we can redirect user to the dashboard so return redirect dashboard colon index like that then we can import it to the URLs and add it here just copy this add delete at the end use dot delete and name is also delete so if I now go to the detail page you need to do some changes here so here where we show the price I want to have a box telling it that it's your is telling it that it's your item and that should go here below the description together with this contact seller so here I can say if request.user equals item dot created by then I know that you are the one who created this create a new theme here mt6 to some space above p-6 to get Space Inside the Box PG white and rounded XL to get around that corners if you are not the one who owns the ad then and only done will I show the button for contacting a seller and if and then in here we can say p this is your item and then I can have the delete button here so a hrf URL item colon delete pause in the item.id which is the one you are visiting then it is at classes on this button in line block ing top 6 px-6 py3 text LG font semi bold PG red Dash 500 so we know that it's dangerous button to click text white and around the dash XL let me pause and delete here so let's see if this is working now if I go back here go into one of the items nice this is your item and delete because now I'm logged in as the admin user okay I just want to add a edit button here as well so I have it so make a copy of this one paste it replace the title with edit and the button here can be green instead so teal 500 and the link can just be empty for now at least now I have these two buttons great so let me try to delete this one by clicking this delete and now it's gone from the list there nice okay so now I want to make it possible to edit an item so if I go to the forums.pi inside the item folder then I can make a copy of this I could reuse this but I want to have an extra field and I don't want the category here so let me remove the category remove it from the list here as well and then rename this to edit item form plus I want to add one more field here is sold like the one we have in the models.pi this doesn't need any styling so the form can just be like it is now and then if I go to view stockpile I can make a copy of the new view paste that I rename it to edit here we need a primary key so we can get the correct item from the database and I want to get that just like we do down here in the delete View here I do not want to use the new item form I want to use the update item form and the same down here edit item four as you can see here and it's import this so let me scroll to the top where we import the new item form and also import the edit item form so let me scroll down and then error is now gone we also need to do some other changes first and it's important I edit the title there and here I do not need to do this here I can actually just say form dot save because now the created by is already set one more problem now is that if you try to go to this page the form will be empty so we need to pause in some data here and to do that we can say instance equals item and the next problem is that this if we just try to save this the form will get an error because the instance is not set on this one so let me set it here as well instant equals four no sorry item so now everything here should be okay so then I just need to update the URL urls.pi in the item folder a copy of this edit a date and add it the last step done is to find a detailed page so we can update the URL so URL item colon edit and pass in item.id and Save so now this should work so if I try to go to the teddy bear edit now you can see that I have it here and it said and Save so teddy bear edited that means that it was working so you can now create edit and delete items perfect now I want to work a little bit on the browse page so we can search filter on categories and similar so let's begin with the view for this and just close all the files so it's easier for you to follow along so if I open up item views.pi then you can have it this on the top so I like to have the list View and then the detail View and then more specified view below So Def items or you can call it browse if you want to because in the request parameter here I want to get all of the items from the database that is not sold so items equals item.objects.filter is sole equals false now we can render the template return render request pass in item slash items.html [Music] and then we just need to pass in the items and Save so let me import this into the URLs file in the item folder this can just be empty since the items is added in the main URLs file views dot items and name items and Save so if I now open up a base.html we can update the URL here URL I oops item items save I can just close that one so now we can test I will get an error now because you have not created the template so that is the next step so let me go back to visual studio code create a new file browse dot h sorry items.html this should also extend the core slash paste.html file set the title block title and here we can just call this items we can call it browse or search or whatever you want actually and block and then block type now content content close it and block and then here I want this to be split into just like in the demo so I need to add a grid here div class pb-6 so we get some padding on the bottom of the screen here enter the grid grid calls for Gap four close this one and then I want one to the left which should be this sidebar where we can select the filter search similar so div clause call span dash one just close it and in here should be the Side Bar and then you have the div clock oops div clause call span 3 close and in here I want to list out the the items just like on the front page so if I open up index.html you can make a copy of this one and just paste it in here and Save so let me try this now so if I refresh the template is there we have the sidebar and then the list of items perfect so then I can begin working with the sidebar here should maybe have a background here on this hair maybe if I just add it there BJ gray 100 fresh so then I get the white background and these and simpler which is a little bit better so then the next step is to add the sidebar so we can begin with adding a form method get and not post action should be URL item items that is the one we are on but I like to do it like this now okay that one and since this is a get request we do not need the csrf token and then first here we can add the input field for the query input name query and close W Dash full py4 px6 on this to be border and around that XL you can set the type the text and the value to be query I will get this from the back end very soon set the placeholder to be find a bike chair or a car or whatever you want and then below here I want to have a search button so button close empty-2 the lesson space up to input field py4 PX eight text LG bgt 500 and text white around the Excel search the button and the form is closed okay so if I save now go back and refresh you should now have the search bar there nice so let me just fix the backend for this as well so that we get the query and we post it into the front end when we have it so at the top here we can say query equals request.get.get query default this to be empty now we can pause it into the front end as well like that so if I now try this about today the search will not work but you can see up here the third day is a panda there and we also have it in the form here nice so let me try to filter the search as well if there is any query so below here we can say if query and we know that the user has filled it out items equals items dot filter and then name I contains equals query so if the name contains the query I insensitive then the query will be filled out or processed it's probably more correct so if I refresh now you can see that only this is there if I empty this all of the items are there but if I want to search in the description as well I need to introduce something called Q so let's import this from Django Dot db.models import Q this makes it easier to search in multiple fields and then in here add the queue around this so if it's in the name or use a pi pair queue the description I contains equals query so if the title or the description contains it it will be searched perfect great so now that you have this we can continue with the categories first we can get all of the categories from the database so categories equals category Dot objects.org so let's import this up here and we need to append this down here in the context so now I can go back here and then below the form I can Loop through them and make it possible to click them so I'll just separate this a little bit by adding HR Clause empty to our my six and then p plus font summative bold cut the chorus p then I'll Loop through them inside an unordered list four category and categories closed and four and then in here because Ally close py2 px2 rounded Dash XL and then in here I want to have a link so a hrf URL should be item item colon items and close it like that and now we can append the query so query equals query from the form up here but I also need to specify the category category equals category dot ID which is the iteration we are on now and then here you can say category dot name let me close the link and I can close the Li and save so if now go back and refresh you know where the category is showing here great um but if I now click this nothing happens and this is not showing as active either so it can be again when making it possible to show as active so in the close here we can say if category dot ID equals category ID I need to provide this from the backend times at PG gray 200 and if so this will not work now because we don't have access to this yet so we need to go back to the Views pi then I guess category ID equals request.get.get pausing category ID there and then just default this to be zero and Save if I refresh now it's still not working you just try to inspect this okay so that does not work maybe if I default it to this no sorry I forgot to provide it down here of course and Save so refresh and it's still not working maybe if I take it back to zero nope okay no items if the category.id equals category ID okay remove category ID from there so this will just be category which is the name we have a pair so this is still not working so if I just convert this to integer down here set this to Zero Save on the refresh now you can see this has a gray background color nice so then I need to just make it possible to filter on the categories so above here I can say if category ID then I know that you have selected a category items equals items filter where category ID equals category ID and save so let me refresh and now it's only getting this if I select clothes it doesn't get anything twice you get these two nice so that is now working perfect so the last thing I want to do here now is make it possible to clear the filters so if I just go back to the template make a copy of these two and that's a clear filters and then in here I just want to add this input button so make a copy of the UL I and then in here we have the button ahref which can go to URL item colon items and this will then reset the filters reset or clear does not add some Clauses so this is more like a button close empty two py-4 px8 inline block PG yellow 500 text and G and around that Dash XL and text can be white so refresh and then we have the care filters so if I click this now the categories are cleared and the search is cleared perfect so everything here is now working as it should so now automobile was about to communicate with each other I want to make it possible for users to send messages to the owner of a product or an item so we can begin by so we can begin by creating a new app so let's go to the web server python managed by start app conversation hit enter then we can register this in settings.play close these other files conversation [Music] and Save so when we have this now we can create a new database model for this so in models.toy I want to create a new model for the conversation close conversation passing model dot model and here I want the reference to the item so we also need to import this from item dot models import item and item equals model dot foreign key pause in the item and then we set a relate name to conversations and if you delete an item also want to delete all of the conversations so here we say models dot Cascade great and then I want to know who is the members of these conversations so members equals models dot many to many field because the conversation needs a multiple users the owner and the one who is contacting you there on depositing the user because the user's object are going to be used so to relate the name to be conversations so now I get the warning here because I haven't imported this so I'll do that from django.com Models import user and then I want to know when this was created Created at equals small dot date time field person Auto now add is true and I also want to know when it was modified so we can update an order by this modified at all models dot date time field and here it is using for Auto Now equals true so every time we save this object this will automatically update it threat magic claws meta here so we can set ordering by default percent minus modified at and Save um but before we update the database we can add one more table here close conversation message pause in models.model I would love to just use message but that would crash with some built-in functionality that Django has so we can begin by adding a reference app to the conversation models.4ind key conversation related name is messages and on delete models dot Cascade so if you delete an item the conversation will be deleted and also the messages that makes it very easy I need a feel for the content of the message also text field and when it was created so let me just copy this and I want to know who created it so created by equals models.49k user related name can be created messages and if you delete user also delete all of the messages so model dot Cascade great now we need to update the database from the make migrations and then the migrate script then I can just run the server so we have it running so before I do anything more I want to add open up the admin okay so we can register them in the admin interface from dot models import conversation and conversation message admin dot sorry admin.site.register conversation [Music] admin.site.register conversation message so that's done nice so then I want to create a new file here for the forms so we can have validation and similar forms.play Can Begin by importing the forms so from Django import forms and we need to import the conversation message model from dot models import conversation message and then we create the form conversation message form percent forms.model form and then we can add a class meta set the model to be conversation message the fields we want to use is only content then we can set up the widgets so we get some nice styling only for the content field forms.txt area actors new dictionary close probably full py4px6 rounded Excel and we want to have a border on it great so if I now save this we can open up the views.pi in the conversation app and create the first view here so I'm going to have a separate view for new conversation so when you click the the contact seller you will be sent this page to Def new conversation pass in request and the primary key and the primary key here is for the item and to make it easier to know this maybe I should just call it item underscore primary key just so I know that it's not for a conversation and then I can get item from the database get object or 404 item where the primary key is item primary key then I need to import these two here so we can begin with the get object or 404 I'm from item that models import item and then I want to check here if you are the owner then you should not be able to visit this page so if item dot created by equals request user sorry to equal sign here then just return read erect to dashboard colon index or you can redirect user wherever you want but I think this is a good place and import this shortcut as well and then I want to get all of the conversations connected to this item where you are a member so conversations equals conversation dot objects filter item equals item and then filter where members in remember to double underscore equals request.user.id so this is checking now is that if this ID is one of the members then we can proceed so now I get a new error here because I haven't imported this so from dot models import conversation and I can also import the form which is create this from dot forms import conversation message form and the reason why I want to do this here is I want to check if there already is a conversation with you and the owner and in that case I want to redirect you to that conversation so if conversations then there is an actual conversation so you can just pause it there for now redirect to conversation because we don't have that page yet and then down here we can check if the form has been submitted if requested method is post then we can check the form using form equals conversation form conversation message form passing request.post data not put post and then if form dot is valid and the contact field is filled out correctly and we can create a new conversation so conversation equals conversation.objects dot create item equals item so to do this before I create the message and then we need to add U to the members list and the owner of the item to the members list so conversation.members.ed request dot user and conversation dot members dot add item dot created by and I will save it conversation dot save then we can create the conversation message conversation message equals form dot save and posting the commit equals false so we don't get error from the database then we need to set the reference to the conversation conversation oops so let's just points up to this one and who created it so created by equals request dot user now we can save this as well and then we can redirect it back to the item so return redirect items item sorry item colon detail where primary key is item primary key and if it's not post request let me just create an empty form equals conversation message form then we can return and render the template return render request pause in the template which here should be conversation Slash new DOT HTML and we can pause in the form like this save so now I want to create a URLs file for this app as well oops that's wrong place in the conversation app urls.pi crunch Django import port and then the views from dot import views and app name should be conversation and it's the URL patterns pod can be new and here we want to pass in the integer called item primary key and then we just have used dot new conversation and the name should be new so then to link to this we just say conversation colon new so let's import this to the main URLs file which is in the puddle folder thought inbox or you can call it conversation if you want to do that include conversation dot urls save and close that file so now I want to create a template for this so let's begin with the folder templates conversation and then the template itself new.html and then again I want to extend the base template so extend core slash paste.html set up the title block title here we can say new conversation and look oops and block and block content and we can add the title layer H1 close oops and b-6 and text 3XL new conversation close this one and we can close the and block then I just want to fix the link to this page so we can test that everything is working so let me just open up detail.html I can activate this button URL conversation colon new and then the item ID so if you now go into one of these okay you need to run cannot import from Django from django.urls import pod okay so now that is working refresh and now I can see this since I'm owning this if I go into toy car and set the code with Stein as the owner just save fresh now I can click contact seller and then I sent it to the new conversation page so that is working so now I'm just going to show the rest of this form and I can copy this form from the item form page this will be very similar so let me just copy this entire form tag and paste that here here don't need the multi Port because you're not going to send images but the rest can be like it is maybe you can say send instead of submit so save go back and refresh and then we have the content which is the message itself perfect so that means that now I could try to send this hello code with Stein I'm interested sound so now we're standing back here which means that it was working and if I refresh then I should have a conversation there I have one conversation between these two users for the toy car and then the message which contains the hello code it's time I'm interested message great so now we just want to set up the inbox page so we can list out all of the all of the conversations that we have so let me go back to views.play and I think I also want to add the login required here before I forget that so let me import this as well from django.com decorator Support login required then we can create the inbox view that login required inbox Quest and then here I want to get all of the conversations that you are a member of so I can actually just copy the statement from up here this can be a conversation you have created or I suggest that I've been sent to you just to remove the filter for the item then we can return and render the template return render Quest conversation slash inbox.html forcing the conversations for the template and Save so if I now import this into the URLs I can just put empty here so the URL will just be in books then we use dot inbox name is inbox you have an open up best.html I think I have a button for this this one yes inbox URL conversation colon inbox save and then go back here refresh click inbox and then I get the template does not exist error but that's great because it makes sense since I have not created it yet so let me find a template I can copy a little bit take this one and then create a new file inbox.html paste it say inbox in books and block let's say refresh and then it's there great so I'm just going to Loop through all of the conversations that we have here so below here I said div clause space Dash y 6 space between the conversations for conversation and conversations I can close this and four and then we can have a link a hrf it can be empty for now since we don't have a detailed page close block don't think that is correct actually maybe it's I'm just messing up a little bit and then we have a div for the image of the item so div clause p dash six Flex because I want this to be a flex container PG gray 100 and rounded XL close that one then out the image to the left div Clause padding right can be set to six in SRC conversation Dot item Dot image.url close w20 rounded Excel so that the width 20 and we have a rounded corners on the image as well save us save now we can try to see if this is working yes then I have the image for the toy car there then I want to show here who the member I'm talking to is and the item we are talking about so here we can say div close it right under there then I want to Loop through the members the four member in conversation.members.old so this is how you get all of the members and using many to many field and four and if the member is not you then I want to show it here so if member not equals request.user and four and then create paragraph Class B Class mb-4 strong member dot username first strong and now we can show when it was sent so conversation dot modified that and we know when the last message was sent so close this one and then below here we can show what the item is so conversation dot item dot name and Save so hopefully now I've done something wrong invalid block tag so this will be and if fresh and let me see Hue we are talking to when the message was last sent and the name of this item great next step now is make it possible to click this conversation so you can see the detail page and make it possible to talk to each other so let me just go to views.pi create a new view at login required because you need to be logged in def detail request and the primary key and this primary key is for the conversation and not the item so now we can get the conversation by getting all of the conversations you have first so we just set this in not singular not plural dot get where primary key is primary key and then we can just return this turn render request conversation [Music] detail.html and I will pass in the conversation conversation and Save great so before we do anything with the form here I just want to create a template so that we have it um I think I can just just copy all of this create a new file and save it as detail.html and then for the title we can say conversation Capital C same thing with H1 here and I want to have this and I want to have this but here I want to say for message in conversation dot messages all so we pause in the conversation here and we get the messages because they are linked in this here so go back to the detailed page then I can remove the anchor tag because this is not going to link to anything and then here I want to show the message so here I do not need an image for each of these so let me just remove everything in here so I still want to have the padding the flexed around it and messages are similar and then here I can create a new div and a paragraph be closed and b-4 so we have some styling for the name and then strong message dot created by that username and when it was sent sorry I need to close the strong pipe or at if you want that message dot created at I can close that paragraph and I can show the message so message dot content close that and Save so if I now go back sorry before I can test it I need to update to the URLs here pot where int is named primary key I can use the views dot detail name detail so if I now go to the inbox I can update the URL here URL conversation column detail pass in the conversation.id and ID and primary key is always the same so let me save that now refresh whenever I click it I'm sent to the conversation and here you can see the message and if I have sent the message I want this to be blue and if you have sent the message I want it to be Gray so let me just close the inbox go back to detail and then here before we add the background I can say if message dot created by equals request.user name is BG blue 100 else then it's gray and if and save so notice it would be blue because I sent this message great but let me make it so that it was the code with Stein who sent this refresh and then it's gray okay so now I want to add the form below here so I can send message back and talk to the other person So Below this div I create a new the form so form method should be post action dot which is the page we are on and it's at the csrf token and we can generate or show the form here form.sp then I need a button I can just go to the sign up page and copy this like that and we can close the form and let me just really notice the sun since we are sending a message if I save now go back and refresh nothing happens except the button is showing because we are not having any forums there yet so we need to go back to boost.pi and fix it here first we can import okay we have imported it but we can see if the form has been submitted so if request dot method equals post then form equals conversation message form and we need to pause in the request dot post data and if form dot is formed is valid then we can create a new conversation message so conversation message equals form dot save and need to say commit equals false and then we need to set a link up to this conversation and we need to set to create edit or created by requested user and I will save it and to update the modified date of the conversation you can just add conversation dot save since we have it already up here and when that is done we can redirect the user back to the conversation page so return redirect conversation column detail because that's a primary key to be a primary key and else we just create an empty instance of this form and Save so if I now refresh I can't see that because I forgot to add it down here form form save refresh and then we have it here hello back send and now this is blue because I sent it nice it's just a space between this close empty six better okay so now we have the conversation here and everything seems to be in order just want to fix the redirect that I did up here where is it the new conversation yes here if there are any conversation now we can now return internet return redirect conversation colon detail and then we can pause in the primary key equals we want to get the first one from this zero sorry put first Dot ID I think it's the correct way to do this let me try so if I just go back to browse the toy car contact seller then I sent directly to the conversation page perfect so now we have the possibility to create items we can edit them delete them you can set them as sold we can view our items here in the my items section we can go into them at the temp delete them everything is working we have a conversation between the users and similar so that is a wrap for this tutorial I hope you enjoyed it and that it was able to follow along if you want to keep practicing your Django skills feel free to keep building on this project you can add things like email verification image Galleries and admin dashboard and similar if you have any questions about the code or anything feel free to leave a comment below and I will answer as soon as I can

Channel: freeCodeCamp.org

Views: 139,414

Keywords:

Id: ZxMB6Njs3ck

Length: 143min 45sec (8625 seconds)

Published: Wed Feb 01 2023