# A.Welcome to Try Django 1.11 So the reasons that we code in to solve the problem. Nah, the problem is to build a web applications. but how to be build web in fast and effective way? Django is the best way to do that, Django is written in Python. Just enough for beginners but then its also powerful enough for experts. For the example Instagram also using Django for their back end. And why we use python? because python is more approchable than a lot of other programming language. ## What is Django? Django is software that you can use to develop web applications quickly and efficiently.Most web applications have some common functions, such as authentication, retrieving information from databases, and cookie management.Developers must code similar functionality into every web application they write. Django makes their work easier with fast and effective used. ## Getting started with Django ### Install Django 1. Install python ![Screenshot 2024-03-09 195059](https://hackmd.io/_uploads/B13LiCF6T.png) 2. Make sure that python was installed. ![Screenshot 2024-03-09 202210](https://hackmd.io/_uploads/BJ2cMJcT6.png) 3. Install Django ![Screenshot 2024-03-09 180759](https://hackmd.io/_uploads/HJq5Xy56p.png) 4. To update and run ![Screenshot 2024-03-09 181639](https://hackmd.io/_uploads/Sy2JVy966.png) 5. Make a project directory ![Screenshot 2024-03-09 184321](https://hackmd.io/_uploads/rkb_V1q6p.png) 6. Make a new name "myproject" project for Django ![Screenshot 2024-03-09 211539](https://hackmd.io/_uploads/HJJXyl96T.png) 7. Lets run the server ![Screenshot 2024-03-09 184833](https://hackmd.io/_uploads/SkqTJl5Tp.png) 8. Open the server on internet and succesfully ![Screenshot 2024-03-09 184806](https://hackmd.io/_uploads/SJdUrgqTT.png) ### Install Django 1.11 ubuntu 1. install sources python 3.6 ![Screenshot from 2024-03-10 14-15-12](https://hackmd.io/_uploads/r1m1elsTp.png) 2. extract file ![Screenshot from 2024-03-10 15-33-39](https://hackmd.io/_uploads/ByUy-goTa.png) 3. set up python - Install the library ![Screenshot from 2024-03-10 15-42-12](https://hackmd.io/_uploads/rJwjfesTp.png) - because the "libreadline-gplv2-dev" was expired we can use "libreadline-dev" ![Screenshot from 2024-03-10 15-47-18](https://hackmd.io/_uploads/B1-pmesTp.png) - check all dependency ![image](https://hackmd.io/_uploads/SkerEespa.png) - Install with sudo make and sudo make install - check python3.6 and pip3.6 ![image](https://hackmd.io/_uploads/SkelBljpp.png) - Setting virtual enviroment in folder Dev ![image](https://hackmd.io/_uploads/r1uYSeia6.png) ![image](https://hackmd.io/_uploads/B1yTHljTa.png) - Go to the virtual enviroment ![image](https://hackmd.io/_uploads/r1qWueip6.png) - Install pip and upgrade ![image](https://hackmd.io/_uploads/r1jr_giaa.png) - Install Django 1.11.13 and check ![image](https://hackmd.io/_uploads/SkcTuli66.png) ![image](https://hackmd.io/_uploads/B1zltliaT.png) - Make a project for Django ![image](https://hackmd.io/_uploads/SyXwFgsTT.png) ![image](https://hackmd.io/_uploads/SyFoKei6T.png) - Run the server ![image](https://hackmd.io/_uploads/ByJ75ej6T.png) - Open on your browser ![image](https://hackmd.io/_uploads/BkUU9gsap.png) ### install sublime text 1. get it from browser - ![image](https://hackmd.io/_uploads/HkwvbXsa6.png) - ![image](https://hackmd.io/_uploads/rkVFWXi6a.png) 2. add folder our project to sublime text - ![image](https://hackmd.io/_uploads/BycBXXiaa.png) 3. set up like on the vidios - ![image](https://hackmd.io/_uploads/rJK3zHjpa.png) ### common optional install 1. ![image](https://hackmd.io/_uploads/HJeCYmja6.png) 2. ![image](https://hackmd.io/_uploads/ryUM97o6p.png) 3. ![image](https://hackmd.io/_uploads/S1z_qXj6p.png) 4. ![image](https://hackmd.io/_uploads/BkwkjQipp.png) ### create requirements.txt file 1. ![image](https://hackmd.io/_uploads/S1fuimj6p.png) 2. ![image](https://hackmd.io/_uploads/SyiYA7iTa.png) ### run migration and create superuser 1. run migration ![image](https://hackmd.io/_uploads/HkGJcIo6p.png) 2. create superuser ![image](https://hackmd.io/_uploads/BJywpMn6T.png) 3. Run the server again ![image](https://hackmd.io/_uploads/BkuXRGhpp.png) ![image](https://hackmd.io/_uploads/SkESCG3p6.png) ## Lets try our first app 1. ![image](https://hackmd.io/_uploads/ryLstQn6p.png) and we can see on our django project : ![image](https://hackmd.io/_uploads/HJg61cmnap.png) 2. We can handle url on the views.py ![image](https://hackmd.io/_uploads/BkvGAm2aa.png) 3. setting on urls.py ![image](https://hackmd.io/_uploads/HkCUCQ2pp.png) 4. open the server ![image](https://hackmd.io/_uploads/BkJoCm3ap.png) # B.HTML and Django ## 1. Rendering HTML ### what is HTML? HTML is the standard markup language for creating Web pages. ### Any examples? ![Screenshot 2024-03-11 145144](https://hackmd.io/_uploads/S167OVh6p.png) ### Lets start in our project ![image](https://hackmd.io/_uploads/Hy3834h6a.png) ![image](https://hackmd.io/_uploads/HynFhE2aT.png) ## 2. Render a Django Template 1. make a new folder templates and file base.html ![image](https://hackmd.io/_uploads/ryxsm3naT.png) 2. open file in browser ![image](https://hackmd.io/_uploads/Bk7rE32p6.png) ### Try using templates 1. ![image](https://hackmd.io/_uploads/SJfEBITTp.png) 2. ![image](https://hackmd.io/_uploads/Sy-DSITpT.png) 3. if we refresh on browser ![image](https://hackmd.io/_uploads/BJ6ArL66p.png) 4. ![image](https://hackmd.io/_uploads/rkpL8Ip6T.png) 5. ![image](https://hackmd.io/_uploads/BJwgXkCaT.png) 6. Try Context Variable - ![image](https://hackmd.io/_uploads/Sk_KD10aT.png) - ![image](https://hackmd.io/_uploads/ryYsDy0T6.png) - ![image](https://hackmd.io/_uploads/HyepPk0T6.png) 7. What if we make a random number?? - make a num variable like this ![image](https://hackmd.io/_uploads/rJ_po10pp.png) - change on base.html ![image](https://hackmd.io/_uploads/r1yEhJ0Ta.png) - refresh it ![image](https://hackmd.io/_uploads/ByyAnyCp6.png) ## 3. Context in Django template ### 1. Some condition - Make a condition with bool_item ![image](https://hackmd.io/_uploads/H187GeCaT.png) - if bool_item == true ![image](https://hackmd.io/_uploads/H1stzgA6T.png) the random number will show it up ![image](https://hackmd.io/_uploads/Hyg0zlAT6.png) - but if bool_item == False ![image](https://hackmd.io/_uploads/H19G7gR66.png) the random number will... ![image](https://hackmd.io/_uploads/B1krXeATp.png) ### 2. Some for loop - were gonna make some_list ![image](https://hackmd.io/_uploads/BkfgKlCa6.png) - create some_list and context ![image](https://hackmd.io/_uploads/HyYBtg0pa.png) - refresh it ![image](https://hackmd.io/_uploads/S1JiKl06p.png) ## 4.Template Inheritance ### Why we should use Template Inheritance? Because when we want to create new page, with inheritance its make easy. - for example i want to create page home, home2, and home 3 - first, make a views ![image](https://hackmd.io/_uploads/rkfvoSCTT.png) - regist page on urls ![image](https://hackmd.io/_uploads/Byk2jHR6p.png) - Make a template for home, home2, home3 ![image](https://hackmd.io/_uploads/BkV1hr0TT.png) - runserver and see it for home ![image](https://hackmd.io/_uploads/ryoXhB0Tp.png) for home2 ![image](https://hackmd.io/_uploads/SyNr2HRa6.png) for home3 ![image](https://hackmd.io/_uploads/HysI3SAaa.png) ### Lets go again with something cool - we can direct template within the template - first make a new file template ![image](https://hackmd.io/_uploads/SyH8TKRT6.png) with add a "extends from first template" and (give a block and endblock content). - first template ![image](https://hackmd.io/_uploads/Byz6ptAa6.png) - Dont forget to direct on second template ![image](https://hackmd.io/_uploads/SJ98CKATa.png) - and it works!! ![image](https://hackmd.io/_uploads/HJ8FAtRp6.png) ### we also can add link on home page - we use syntax href to direct link ![image](https://hackmd.io/_uploads/rkPvSq06T.png) - dont forget to set up the file on About and contact ![image](https://hackmd.io/_uploads/BJh7UcA6a.png) - dont forget to set up on urls and views ![image](https://hackmd.io/_uploads/By5GDcRaa.png) ![image](https://hackmd.io/_uploads/SJA7vq0pT.png) - Refresh web for Home ![image](https://hackmd.io/_uploads/HyB5wcAp6.png) for About ![image](https://hackmd.io/_uploads/r1Vov5CaT.png) for contact ![image](https://hackmd.io/_uploads/Skf3D90T6.png) ### Add the title for our website - Made a title first in base.html ![image](https://hackmd.io/_uploads/ryEHNsCaT.png) - copy and paste in Contact and About ![image](https://hackmd.io/_uploads/BJQK4oRaa.png) - Result ![image](https://hackmd.io/_uploads/BJ6oEoCap.png) ![image](https://hackmd.io/_uploads/H1O3EsC6T.png) ![image](https://hackmd.io/_uploads/B1mKv7y0p.png) ## 5. Include Template Tag ### Template tag - Make a folder snippets ![image](https://hackmd.io/_uploads/Bk9MUr10T.png) - include for direct file ![image](https://hackmd.io/_uploads/SkCeLry0p.png) - file cs ![image](https://hackmd.io/_uploads/BJPNuH1C6.png) - file js ![image](https://hackmd.io/_uploads/S1bI_ryA6.png) - file nav ![Uploading file..._57d8sdmqa]() - and work ![image](https://hackmd.io/_uploads/ryAOISkAT.png) ### Add list - Make list ![image](https://hackmd.io/_uploads/HJVhFB1C6.png) - Dont forget to include in where do u want ![image](https://hackmd.io/_uploads/ByHl5Hy06.png) - view in the page ![image](https://hackmd.io/_uploads/HyaD9ZeRp.png) ## 6. Class Based Views - make class ![image](https://hackmd.io/_uploads/B1zli-gC6.png) - dont forget to import ![image](https://hackmd.io/_uploads/S1vMoZg0p.png) - set up on urls ![image](https://hackmd.io/_uploads/Sk_PiZlC6.png) ### add an id in urls - ![image](https://hackmd.io/_uploads/HJ_ch-gAT.png) - if u open on urls u have to add number after"/" before ![image](https://hackmd.io/_uploads/r1K16ZeA6.png) after ![image](https://hackmd.io/_uploads/rJI-ablCp.png) - print kwargs to see in terminal ![image](https://hackmd.io/_uploads/BJGMC-e0T.png) in terminal ![image](https://hackmd.io/_uploads/S1KVAbgAT.png) ## 7. Template View - just with template name ![image](https://hackmd.io/_uploads/rywsZzgAT.png) - get a class for template view ![image](https://hackmd.io/_uploads/SJITWMgAa.png) - set up on urls ![image](https://hackmd.io/_uploads/SJ2DfMgC6.png) ### we can do more efficiently with - go to urls and setting up template name on there ![image](https://hackmd.io/_uploads/B1ahEGxC6.png) # C. Remembering Things ## 1.Remember Things with Models - go to django administrator with our superuser ![image](https://hackmd.io/_uploads/Hy0kf7lAa.png) - to saved bunch data in database run migrate ![image](https://hackmd.io/_uploads/SJYSUmgCa.png) - And where is the bunch data and where come from go to lib/python3.6/site-packages/django/contrib/auth/models.py ![image](https://hackmd.io/_uploads/H1AHycxRa.png) ![image](https://hackmd.io/_uploads/rJ_wk5xAT.png) ### I want to do list in restaurant - Made a class and type whatever it will save in database ![image](https://hackmd.io/_uploads/HJmQNcgR6.png) - Tell the django that we have an app called restaurants ![image](https://hackmd.io/_uploads/Sy0avcx0T.png) - we have to prepare the django to tell the database with migrate ![image](https://hackmd.io/_uploads/rJD5tcxC6.png) - if we changes the file, like add a location ![image](https://hackmd.io/_uploads/Sk19cqlA6.png) - we have to do a two step above ![image](https://hackmd.io/_uploads/H1jR95gRp.png) ### what if i want to rename my app - rename RestaurantLocation ![image](https://hackmd.io/_uploads/SJsp29l0p.png) - changes on admin.py ![image](https://hackmd.io/_uploads/HJNGp9e0a.png) - makemigrate and migrate again ![image](https://hackmd.io/_uploads/BkBiTcgC6.png) ### try to using the app - go to website admin ![image](https://hackmd.io/_uploads/Syx6J0qxRa.png) - go to Restauranlocation and add Restauranlocation ![image](https://hackmd.io/_uploads/BJ_E0ceR6.png) - fill your name and save it ![image](https://hackmd.io/_uploads/rJTIRclAT.png) - see on Restaurantlocation object ![image](https://hackmd.io/_uploads/H1h5Rcx0T.png) ## 2. More and Model Fields - if u want like this ![image](https://hackmd.io/_uploads/BJE_Usl0a.png) - changes the "blank=False" ![image](https://hackmd.io/_uploads/Hyni8ogAp.png) ### Add timestamp - ![image](https://hackmd.io/_uploads/SkHZ6jxCT.png) - ![image](https://hackmd.io/_uploads/HyXmToeCp.png) - check in our app ![image](https://hackmd.io/_uploads/ByRF6oe0a.png) ## 3. Displaying Saved Data - so were gonna make a new views on my website - first,were gonna define our function based view ![image](https://hackmd.io/_uploads/rJ8DQNWAa.png) - make a template ![image](https://hackmd.io/_uploads/B1p2QEbRT.png) - put the template in function and make somelist ![image](https://hackmd.io/_uploads/SJkXPEb0T.png) - dont forget to setting the urls ![image](https://hackmd.io/_uploads/S1xjB4-0T.png) - fill the restaurants_list.html ![image](https://hackmd.io/_uploads/ByOdPVbCp.png) - try to open in browser ![image](https://hackmd.io/_uploads/By-iDEbA6.png) - some new view ![image](https://hackmd.io/_uploads/SJ1Os4Z0p.png) - ![image](https://hackmd.io/_uploads/HJWqs4WAT.png) - we imported the data from the admin data at the admin ![image](https://hackmd.io/_uploads/HyI-hV-Ap.png) go import ![image](https://hackmd.io/_uploads/SJN5a4bAT.png) - and we gonna make list from admin build the queryset ![image](https://hackmd.io/_uploads/Bk3CpVbCa.png) - look at the web that was alredy objects in there ![image](https://hackmd.io/_uploads/ByNhRE-RT.png) and see - ![image](https://hackmd.io/_uploads/BysaAEbCa.png) and if we add the object, it will be twice ![image](https://hackmd.io/_uploads/SyKV1BZCT.png) - And how if i want to show the name of list? first, set the {{ obj }}to {{ obj.name }} ![image](https://hackmd.io/_uploads/Hkc7XHW0a.png) check it again ![image](https://hackmd.io/_uploads/rkZLQr-06.png) - And how to change the list name on admin before ![image](https://hackmd.io/_uploads/ByXi4rbCp.png) after ![image](https://hackmd.io/_uploads/SJIWBHbR6.png) the way is def__str__ ![image](https://hackmd.io/_uploads/S1N4rBbCT.png) ## 4. Understanding Querysets - Go to python shell ![image](https://hackmd.io/_uploads/rJc6W_ZC6.png) - were gonna check our querysets ![image](https://hackmd.io/_uploads/BkXjmObRp.png) ![image](https://hackmd.io/_uploads/Sk32m_ZRT.png) - we can also print the object in querysets for example i want to print object name: ![image](https://hackmd.io/_uploads/rk2kSdZC6.png) but u have to give more attention because the python was so sensitive about the indentation like this: ![image](https://hackmd.io/_uploads/BycLrubR6.png) - we can update our querysets define the qs ![image](https://hackmd.io/_uploads/r13HPdW0p.png) before category ![image](https://hackmd.io/_uploads/rJbuvOZRT.png) qs update ![image](https://hackmd.io/_uploads/S1pLdOWA6.png) after ![image](https://hackmd.io/_uploads/SyRvdu-Ca.png) ## 5. Generic list view - add ListView in import and make new class ![image](https://hackmd.io/_uploads/H1m2d0mCp.png) - setting on urls ![image](https://hackmd.io/_uploads/HJ_vOk40T.png) - dont forget to add a template name in class ![image](https://hackmd.io/_uploads/B1d9ukN0T.png) - add a object list for showing up more items ![image](https://hackmd.io/_uploads/rJD1Y1V0T.png) - lets open in browser for restaurant page ![image](https://hackmd.io/_uploads/BkmXYJVAa.png) for restaurant/soto page ![image](https://hackmd.io/_uploads/BkcrKJN0p.png) for restaurant/bakso page ![image](https://hackmd.io/_uploads/S1ZOFyNRT.png) ## 6. Restaurant profile detail - so we want to see actual profile or individual page - we want to see a primary key and what is primary key?? primary key is id when u see at url ![image](https://hackmd.io/_uploads/rkN-nOECp.png) the '3' is an primary key - make class for detail view ![image](https://hackmd.io/_uploads/ryccCu4CT.png) print(kwargs) to see a primary key print(context) to see the object - dont forget to add in urls ![image](https://hackmd.io/_uploads/ByaPMYNCT.png) - see on terminal and u can see the PK and Object ![image](https://hackmd.io/_uploads/HkqrmFNAa.png) showing the PK is 1 because i typing in web like this ![image](https://hackmd.io/_uploads/S1HK7FN06.png) ### Nahhh the function of the PK in there - first, open the restaurant ![image](https://hackmd.io/_uploads/H1eODYN06.png) - if we add /1 will ![image](https://hackmd.io/_uploads/r1VqDtER6.png) - if we add /2 will ![image](https://hackmd.io/_uploads/HkUhDKN06.png) - if we add /3 will ![image](https://hackmd.io/_uploads/B1HAPKVCa.png) - because i was edited on new file html ![image](https://hackmd.io/_uploads/Hk7N_Y4Ap.png) ## 7. SlugField and Unique Slug Generator - edit the models.py ![image](https://hackmd.io/_uploads/BJtoP5VR6.png) - add new file utils.py ![image](https://hackmd.io/_uploads/HkEGd5V0T.png) - after we edited the models.py we have to run migrate and make migrations to save it ![image](https://hackmd.io/_uploads/SJ1su9VAp.png) ## 8. signal for unique slug - edit in models.py ![image](https://hackmd.io/_uploads/HJnIhqEAa.png) add pre_save and post_save - if we create a new item in restaurantlocation ![image](https://hackmd.io/_uploads/H1kMp5ERT.png) - we can see in terminal ![image](https://hackmd.io/_uploads/S1qT65NCp.png) processing of saving and saved # D. Forms,Views,Models,and More ## 1.slug as urls parm ### Open urls with slug - first, add slug (?P<slug>[\w-]+)/ in our url ![image](https://hackmd.io/_uploads/rk2nvvrAa.png) - add link with href ![image](https://hackmd.io/_uploads/BkgxuDHA6.png) - if we show the web the name item change to be link that we can click ![image](https://hackmd.io/_uploads/rJ5SuDSRT.png) - if we click satee ayam ![image](https://hackmd.io/_uploads/HyRi_DB06.png) ## 2. Saving data the hard + wrong way - in this case we create the own version of admin mode and we can add the data from our urls not from mode admin - from the vidios this way actually not recomended but i want to know how the forms works - so were gonna make file inside of restaurant app ![image](https://hackmd.io/_uploads/SkWIUuHRT.png) - make import and new definition ![image](https://hackmd.io/_uploads/H1l58_r0T.png) - make new file form.html for the template ![image](https://hackmd.io/_uploads/rk_A8drCT.png) - DONT_USE ![image](https://hackmd.io/_uploads/rJShNtHA6.png) - setting on urls ![image](https://hackmd.io/_uploads/S1V8SYrAp.png) - open on internet ![image](https://hackmd.io/_uploads/HJCJrKSC6.png) now our web /restaurant/create can saved anything - if u save it ![image](https://hackmd.io/_uploads/BJ7Suy8Rp.png) in urls its called get parameters - print request.GET ![image](https://hackmd.io/_uploads/BkZyKJIR6.png) - to see in terminal ![image](https://hackmd.io/_uploads/Bk_eKkIA6.png) - for print(request.POST) ![image](https://hackmd.io/_uploads/Hky5hkURa.png) - see in terminal ![image](https://hackmd.io/_uploads/Syy22y8Rp.png) ### How do we make security? - we use crf_token ![image](https://hackmd.io/_uploads/Hkfgyg8Cp.png) - print req post ![image](https://hackmd.io/_uploads/BJN8Jg8Ra.png) - if we save the data ![image](https://hackmd.io/_uploads/SyDMexURp.png) - the data will goes to ![image](https://hackmd.io/_uploads/ByD4xgLCT.png)