[PYTHON] 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.


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

Completed type

93f06bcd-4570-4d5c-ab3d-5d14c993de7f-1920x910r.png Item list screen

7eb35643-b63b-4d38-8557-272241099b27-1920x912r.png Item details screen


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.


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.


    images = models.ImageField(
        verbose_name='Image file',
    #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">
						<div class="col-9">
							<img src="{{ item.images.url }}" width=150>
                    <!--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 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.media }}
<!--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%}
<!--{%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.

Recommended Posts

Django-Overview the tutorial app on Qiita and add features (1)
Django --Overview the tutorial app on Qiita and add features (2)
Add lines and text on the image
Run the flask app on Cloud9 and Apache Httpd
Detect app releases on the App Store
Deploy the Flask app on Heroku
Deploy the Flask app on heroku
Deploy the Django app on Heroku [Part 2]
Deploy the Django app on Heroku [Part 1]
Launch and use IPython notebook on the network
Use AppSync on the front and back ends
Get the module itself and add members dynamically
Use the LibreOffice app in Python (3) Add library