آموزش پایتون

آموزش ساخت فرم Sign up در Django

مراحل ایجاد فرم Sign in در اپلیکیشن جنگو:

  1. ایجاد یک اپ جدید به نام account یا accounts به منظور پیاده سازی Login و Sign up و Logout
  2. معرفی اپ جدید به فایل settings.py
  3. اضافه کردن آدرس accounts در فایل urls.py پروژه اصلی
  4. اضافه کردن آدرس های Login و Sign up و Logout در فایل urls.py اپ account
  5. نوشتن متد برای پاسخگویی به request های وارد شده به آدرس های Login, Sign up, Logout در فایل views.py اپ account (متناظر با مسیرهایی که در مرحله قبل ایجاد کردیم)
  6. ایجاد فولدر templates در اپ account
  7. ساخت صفحه Signup.html در فولدر مرحله قبل
  8. ساخت فرم الکترونیکی در صفحه فوق
  9. ایجاد متد دریافت و پردازش فرم در فایل views.py اپ account

۱- ایجاد یک اپ جدید به نام account

در حالی که venv فعال است و داخل فولدر اصلی اپلیکیشن هستید،‌دستور زیر را برای ایجاد اپ جدید در ترمینال وارد کنید.

python manage.py startapp accounts

فرایند ثبت نام،لاگین و لاگ اوت کاربر در این اپ پیاده سازی خواهد شد.

۲-معرفی اپ جدید به فایل settings.py

ابتدا فایل apps.py اپ account رو باز کنید تا نام کلاس اصلی این اپلیکیشن رو پیدا کنید.

class AccountConfig(AppConfig):
    name = 'account'

فایل settings.py اپلیکیشن اصلی رو باز کنید و در قسمت installed apps، اپ جدید رو با نوشتن نام کلاس اصلی اون فرمتی که در زیر می بینید، معرفی کنید:‌

INSTALLED_APPS = [
    'account.apps.AccountConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

۳-اضافه کردن آدرس accounts در فایل urls.py پروژه اصلی

در اینجا میخوایم کاری کنیم که تمام رکوئست هایی که بعد از آدرس accounts در url وارد میشن به فایل urls.py اپ account سپرده بشن و تکلیفشون اونجا مشخص بشه.

برای این کار نیاز به استفاده از include داریم. اگر ایمپورت نشده باید ایمپورتش کنید.

و بعد یک path جدید تعریف می کنیم:

۵from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/',include('account.urls') , name='accounts'),

]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

۴-اضافه کردن آدرس های Login و Sign up و Logout در فایل urls.py اپ account

در فایل urls.py در اپ account،(معمولا این فایل در اپ شما وجود ندارد، آن را خودتان ایجاد کنید) سایر مسیرهای فرعی account را تعریف می کنیم. در حقیقت تعیین می کنیم که کدام متد (از متد های فایل views.py) مسئولیت تعیین تکلیف کدام مسیر ها را داشته باشند.

from django.urls import path
from . import views


urlpatterns = [
    path('', views.home, name='accounts' ),
    path('login/', views.login, name = 'login'),
    path('logout/', views.logout, name = 'logout'),
    path('signup/', views.signup, name='signup')
    ]

دقت کنید که در انتهای هر خط تعریف path، یک name هم به آن اختصاص داده ایم. از این نام خیلی جاها استفاده می شود. یکی از استفاده های این name در صفحات html پروژه است.

در صفحات html پروژه می توانیم آدرس هر کدام از این path ها را با صدازدن نام انها بعد از دستور url، صدا بزنیم.

مثلا اگر در صفحه base.html بخواهیم لینک صفحه signup را قرار بدهیم، این کار را با استفاده از name ی که در فایل urls.py تعریف کرده ایم و به صورت زیر انجام می دهیم‌:

<a href = "{% url 'signup' %}"> Sign Up! </a>

۵- نوشتن متد برای پاسخگویی به request های وارد شده به آدرس های Login, Sign up, Logout در فایل views.py اپ account (متناظر با مسیرهایی که در مرحله قبل ایجاد کردیم)

در فایل views.py که در اپ account قرار دارد (اگر ندارد خودتان بسازیدش)، به ازای هر مسیر، یک فانکشن ایجاد کنید (همنام با همان متدی که در صفحه urls.py به آن اشاره کرده اید).

def signup(request):
     return render(request, 'account/signup.html')

این متد در پاسخ به رکوئست، صفحه signup.html را رندر کرده و در مرورگر نمایش می دهد.

البته در پاسخ به تکمیل فرم ثبت نام هم این متد باید کاری انجام بدهد که در ادامه آموزش، به آن خواهیم رسید.

درصورت نیاز، برای هر کدام از مسیر های Login و Logout هم یک فانکشن مجزا تعریف می کنیم.

(اینها را هم در آموزشهای مربوط به خودشان کامل توضیح داده ام)

۶ و ۷ ایجاد فولدر templates در اپ account و ساخت صفحه Signup.html در آن

در اپ account یک فولدر به اسم templates ایجاد کنید. داخل اینف فولدر یک فایل جدید با نام signup.html ایجاد کنید. در نامگذاری این فایل دقت کنید چون باید دقیقا همان نمی باشد که در مرحله قبل در متد signup وارد کرده ایم.

۸- ساخت فرم الکترونیکی در صفحه signup.html

یک فرم الکترونیکی در این صفحه میسازیم.

متد ارسال آن را بر روی POST می گذاریم.

آدرس اکشن آن را هم روی signup می گذاریم. که name که در path در urls.py تعریف کرده بودیم را صدا میزند.

   <form method="post" action="{% url 'signup' %}">
    {% csrf_token %}
    Username:
    <br>
    <input type="text" name="username" class="form-control"/>
    Email:
    <br>
    <input type="email" name="email" class="form-control"/>
    Password:
    <br>
    <input type="password" name="password1" class="form-control"/>
    Confirm Password:
    <br>
    <input type="password" name="password2" class="form-control"/>
    <br>
    <input class="btn btn-primary" type="submit" value="Sign Up!" class="form-control"/>

   </form>

نکته بسیار مهم:‌در فرم های جنگو حتما میبایست {% csrf_token %} رو داخل فرم درج کنید. وگرنه موقع ارسال فرم، خطا بر می گردونه.

۹-ایجاد متد دریافت و پردازش فرم در فایل views.py اپ account

def signup(request):
    if request.method == 'POST':
        #user has info and wants an account now!
        if request.POST['password1'] == request.POST['password2']: #  در صورتی که دوتا پسورد باهم همخوانی داشته باشه
            try: # سعی میکنه نام کاربری رو از بین کاربران موجود پیدا کنه

                # در خط زیر سعی میکنه کاربر با نام کاربری ورودی رو از دیتابیس پیدا کنه
                # اگر همچین کاربری پیدا نشه، ارور زیر پرت میشه
                # User.DoesNotExist
                # که این ارور رو چند خط پایین تر در اکسپت گرفتیم
                # و این ارور به معنی اینه که کاربر جدیده و باید ساخته بشه
                user = User.objects.get(username=request.POST['username']) # means this username already Exist!

                # در صورتی که در خط قبل کاربر موجود بود، کد به این خط میرسه و این یک پیام رو به صفحه مبدا بر می گردونه
                #  و میگه که نام کاربری قبلا انتخاب شده
                return render(request, 'account/signup.html', {'error':'Username has already been taken!'})
            except User.DoesNotExist: # اگر نام کاربری از قبل موجود نبود، کاربر جدید رو میسازه
                # ترتیب یوزرنیم و ایمیل و پسورد در متدزیر مهمه. مثلا اگر کلا ایمیل رو ننویسیم، و پسورد رو بعنوان دومی بنویسیم، پسورد میره بعنوان آدرس ایمیل کاربر ذخیره میشه
                user = User.objects.create_user(request.POST['username'], request.POST['email'] , request.POST['password1'])
                # در خط زیر با کاربری که در خط بالا ایجاد کرده در سایت لاگین می کنه
                auth.login(request,user)
                # و کاربر لاگین کرده رو زارت میفرسته به صفحه اصلی. البته میشد اینجا با یک پیام به کاربر اعلام کنیم که ثبت نام با موفقیت انجام شد.
                return redirect('allproducts')

        else: # در صورتی که دوتا پسورد باهم همخوانی نداشته باشه
            return render(request,'account/signup.html', {'error':'paswords did not match!'})
    else:
        # در این حالت متد پست فراخوانی نشده. یعنی کاربر فرم را سابمیت نکرده. بلکه فقط آدرس صفحه را زده که صفحه را ببیند.
        # بنابراین صفحه حاوی فرم به کاربر نمایش داده میشود و پردازشی انجام نمی شود.
        return render(request, 'account/signup.html')

در این متد، با استفاده از دستور if چک کرده ایم که آیا درخواست به این آدرس به صورت POST ارسال شده یا خیر (که یعنی به صورت GET ارسال شده).

خب در چه صورتی درخواست به یک صفحه به صورت GET ارسال میشه؟‌ در صورتی که آدرس صفحه در مرورگر فراخوانی بشه.

و اگر یادتون باشه ما فرممون رو به صورت POST ارسال کردیم.

پس در صورتی که متد درخواست دریافتی، از نوع POST باشه به این معناست که این درخواست، ارسال فرم به صفحه بوده.

اما در صورتی که متد درخواست دریافتی از نوع GET باشه به این معناست که کاربر لینک صفحه signup رو زده و میخواد صفحه signup رو ببینه.

ما بهش گفتیم در صورتی که متد درخواست از نوعPOST بود،‌پردازش روی دیتای ارسالی فرم رو انجام بده، و درصورتی که درخواست از نوع GET بود،‌ صفحه signup.html رو رندر کن و به کاربر نمایش بده.

سایز توضیحات مربوط به پیاده سازی این متد رو در کامنت های کد براتون نوشتم.

فقط دقت کنید برای کار با یوزرها و authentication باید این متدها رو در فایل جاری (views.py) ایمپورت کنید:

from django.contrib.auth.models import User
from django.contrib import auth

حامد عسکریان

برنامه نویس و عاشق تکنولوژی

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن