Django-Overview the tutorial app on Qiita and add features (1)

This is an article I wrote about a year ago.

I will post it on Qiita so that it can be published to the public.

Introduction

In this article --Understand the correlation and rough role of each file in a Django application --Get an overview of your existing applications and make the right changes ――For those who don't know Django, you can get the image that it's like that.

Is the purpose. Personally, I will work on it as a review.

An overview of the apps in the following articles [[Python] Django Tutorial-Making a General Purpose Business Web App Fastest](https://qiita.com/okoppe8/items/54eb105c9c94c0960f14#%E6%89%8B%E9%A0%86%EF%BC%93% E3% 83% A2% E3% 83% 87% E3% 83% AB% E4% BD% 9C% E6% 88% 90)

This time, ** Login function and its screen creation (2) Perform (1) work that enables uploading and display of image files. ** **

The following is the one that finished the work of (1) this time https://github.com/Rio157/crud-image-app.git

Development environment

Windows10
Ubuntu LTS18.04 - Windows for Linux Terminal --I have Ubuntu open in Visual Studio Code.

Completed type

Item list screen

Item details screen

function

This time, we will upload the image and display the uploaded image on the list screen and detail screen.

This time, for convenience, I will write the server side processing and the front end side operation separately.

Also, for images, first use terminal

pip3 install pillows

Let's make the image workable with Django.

Image upload process

The image upload process is almost routine. I will write the code operation and its intention in #comment out.

We will make it possible to receive images on the server side.

`settings.py(Under project)`


MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

#First, specify the storage and recipient of the image file. Added per last line.
#MEDIA_ROOT:There is a media folder in the same hierarchy as project
#MEDIA_URL:(Because Django has a one-to-one URL correspondence with image files)Specify the URL when publishing the media file.

`urls.py(Under project)`


urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
#Add the URL for publishing the media file. Added per last line.

`forms.py`


class ItemForm(forms.ModelForm):

    class Meta:
        model = Item
        fields = ('name','age','sex','memo','images')
        widgets = {
                    'name': forms.TextInput(attrs={'placeholder':'Entry example: Taro Yamada'}),
                    'age': forms.NumberInput(attrs={'min':1}),
                    'sex': forms.RadioSelect(),
                    'memo': forms.Textarea(attrs={'rows':4}),
                    'images': forms.ClearableFileInput(attrs={'multiple': False}),
                  }
                  #Add images. This creates a database of media files and'images'It is now possible to withdraw as.

`models.py`


    images = models.ImageField(
        verbose_name='Image file',
        upload_to='',
        default='defo.png'
    )
    #class Item(models.Model):Added to. upload_to=''In settings.The save destination written on py is specified.
    #In default, specify the image to be displayed when the media file is not uploaded. defo under media folder.Place png.

Image display

Extract the images in the database and display them on the list screen and detail screen. Since you are playing with the front end, the operation is under templates.

`item_filter.html(Item of each item on the list screen)`


					<!--I want to display an image in the list-->
					<div class="row">
						<div class="col-3">
							<p>image</p>
						</div>
						<div class="col-9">
							<img src="{{ item.images.url }}" width=150>
						</div>
					</div>
                    <!--Add names in the same hierarchy and below the registration date.-->
                    <!--When retrieving server-side data in Django{{}}Or{%%}You can specify the directory by enclosing it in.-->

`item_card.html(Item details screen)`


<div class="row">
    <div class="col-3">
        <p>Image file</p>
    </div>
    <div class="col-9">
        <form method="post" enctype="multipart/form-data">
            <!--I want to display the input image-->
            <img src="{{ object.images.url }}" width=300>
        </form>
        {{ form.media }}
    </div>
</div>
<!--item name:Add above the remarks.-->

`item_forms.html(Item creation screen)`


    <div class="row">
        <div class="col-12">
            <!-- enctype=...Add-->
            <form method="post" id="myform" enctype="multipart/form-data">
                {% crispy form%}
            </form>
        </div>
    </div>
<!--{%crispy form%}Since the data including the media file is stored in, it is necessary to specify the enctype.-->
<!--I will omit the details of crispy, but crispy_The forms app organizes the input items neatly.-->

Looking back

This time, I implemented the image upload function and its image display in Django. I really wanted to implement the preview function on the creation screen and edit screen, and upload / display multiple images (it seems that the preview function can be done with JavaScript), but this time the purpose is to implement a simple function with a simple implementation. Because it was, I omitted it.

Also, the following article this time is about uploading other files instead of media files, but the operation is almost the same, so please refer to it for comparison. [Django] How to use the file upload function [Basic settings]

next time

Next time, we'll implement a login feature in Django. Django has a login function as standard, but we will implement it by creating a new application in the project.