صفحة تسجيل الدخول بالبايثون - Python Login Page

المقدمة

السلام عليكم, في هذا الموضوع سوف نقوم بانشاء صفحة تسجيل دخول بواجهة رسومية باستعمال لغة البرمجة بايثون, المكتبة التي سوف نستعملها للوصل الى ذلك هي customtkinter والتي تسهل علينا انشاء عناصر البرنامج الرسومية و بمضهر عصري. 

 CustomTkinter هي مكتبة Python واجهة مستخدم والتي بدورها مبنية على Tkinter، توفر لنا أدوات واجهة مستخدم جديدة وحديثة وقابلة للتخصيص بالكامل.

البرنامج النهائي الذي سوف نقوم بانشائه ان شاء الله سوف يكون على هذا الشكل:

المكتبة Tkinter متوفرة مسبقا. لتثبيت المكتبة customtkinter نقوم بالامر :

pip install customtkinter

المكتبات

اولا نقوم باضافة المكتبتان tkinter و customtkinter :

import tkinter
import customtkinter

التخصيص

السطرين التاليين سيقومان بتخصيص الصفحة و وضع الحجم :

customtkinter.set_appearance_mode("dark") # light / system
customtkinter.set_default_color_theme("green")

root = customtkinter.CTk()
root.geometry("400x500")

set_appearance_mode تقوم بتحديد القالب حيث تقبل 3 اختيارات (الوضع الليلي dark, النهار light او حسب theme الجهاز)

set_default_color_theme يقوم بتحديد الون للـ theme مثل لون الزر عند الـ hover.

root = customtkinter.CTk() هي القائمة الرئيسية و التي سوف نضع فيها الاطارت و العناص. سوف تتضح الصورة لاحقا.

Login Function

هدفنا الرئيسي في هذا الموضوع هو انشاء صفحة تسجيل دخول رسومية بلغة بايثون, لذلك وضيفة تسجيل الدخول ستكون بسيطة, و هي انه عند ضغط زر دخول سيتغير العنوان و سيتم ابطال وضيفة ذلك الزر :

def login():
    label.configure(text='مرحبا بك')
    label.configure(text_color='green')
    btn.configure(fg_color='green')
    btn.configure(state="disabled")

انشاء الاطار

سوف نقوم بانشاء الايطار الذي يحتوي على العناصر (Buttons, Inputs, Labels) و نحدد ايضا فراغات المساحة و الجذر الرئيسي و الذي هو root :

frame = customtkinter.CTkFrame(master=root)
frame.pack(pady=20, padx=30, fill="both", expand=True)

انشاء العناصر

الان سنقوم بانشاء العناصر و الذي يكون انشائها شبه متكرر بنفس القيّم الممررة :

label = customtkinter.CTkLabel(master=frame, 
                                text="تسجيل الدخول", 
                                justify=tkinter.RIGHT, 
                                font=customtkinter.CTkFont(size=30, family="Lalezar")
                            )
label.pack(pady=20, padx=15)

entry1 = customtkinter.CTkEntry(master=frame,
                                placeholder_text="اسم المستخدم",
                                justify=tkinter.RIGHT,
                                font=customtkinter.CTkFont(size=20, family="Lalezar -Regular"),
                                text_color="#e66491"
                            )
entry1.pack(pady=20, padx=15)

entry2 = customtkinter.CTkEntry(master=frame,
                                placeholder_text="كلمة السر",
                                show="*",
                                justify=tkinter.RIGHT,
                                font=customtkinter.CTkFont(size=20, family="Lalezar Regular"),
                                text_color="#e66491"
                            )
entry2.pack(pady=20, padx=15)

btn = customtkinter.CTkButton(master=frame,
                                text="دخول",
                                command=login,
                                font=customtkinter.CTkFont(size=20, family="Lalezar -Regular"),
                                fg_color='#15c39a'
                            )
btn.pack(pady=20, padx=15)

checkbox = customtkinter.CTkCheckBox(master=frame,
                                        text="تذكرني",
                                        font=customtkinter.CTkFont(size=20,family="Lalezar -Regular")
                                    )
checkbox.pack(pady=30, padx=15)

كما نلاحض معضم العناصر تملك text و هي اسم العنصر اذا كان label او button او checkbox. و ايضا لون النص مع تحديد الجهة التي يكون فيها العنصر (مثال justify=tkinter.RIGHT).

padx و pady تعطي المسافة على سطر الافقي و العمودي (padding x, padding y). حيث x تعني المساحة من الجهة اليمنى و اليسرى اما y فهي المساحة من الاعلى و الاسفل.

في زر الدخول نمرر الدالة التي يتم تنفيذها عن الضغط و التي في مثالنا هي login, لاحض اننا لم نقم بكتابة الدالة بالقوسين.

fg_color تمكننا من تغيير لون العنصر, مثل ما قمنا به في زر تسجيل الدخول.

في حالة اذا كانت اللغة المستعملة هي اللغة العربية, فمن الافضل تحديد خط عربي كالمثال الذي قمنا به, لتفادي اي مشاكل او فوضى في الاحرف (font=customtkinter.CTkFont(size=20, family="Lalezar -Regular")) تأكد ان الخط المستعمل متوفر في جهازك.

تشغيل البرنامج

root.mainloop() هي وضيفة في النافذة الرئيسية ننفذها عندما نريد تشغيل تطبيقنا. ستستمر هذه الوضيفة في التكرار إلى الأبد، في انتظار الأحداث من المستخدم، حتى يخرج المستخدم من البرنامج - إما عن طريق إغلاق النافذة، أو بإنهاء البرنامج بمقاطعة لوحة المفاتيح في وحدة التحكم (Ctrl + C).

root.mainloop()

البرنامج كامل

import tkinter
import customtkinter

customtkinter.set_appearance_mode("system")
customtkinter.set_default_color_theme("blue")

root = customtkinter.CTk()
root.geometry("400x500")

def login():
    label.configure(text='مرحبا بك')
    label.configure(text_color='green')
    btn.configure(fg_color='green')
    btn.configure(state="disabled")


frame = customtkinter.CTkFrame(master=root)
frame.pack(pady=20, padx=30, fill="both", expand=True)

label = customtkinter.CTkLabel(master=frame, 
                                text="تسجيل الدخول", 
                                justify=tkinter.RIGHT, 
                                font=customtkinter.CTkFont(size=30, family="Lalezar"),
                            )
label.pack(pady=20, padx=15)

entry1 = customtkinter.CTkEntry(master=frame,
                                placeholder_text="اسم المستخدم",
                                justify=tkinter.RIGHT,
                                font=customtkinter.CTkFont(size=20, family="Lalezar -Regular"),
                                text_color="#e66491"
                            )
entry1.pack(pady=20, padx=15)

entry2 = customtkinter.CTkEntry(master=frame,
                                placeholder_text="كلمة السر",
                                show="*",
                                justify=tkinter.RIGHT,
                                font=customtkinter.CTkFont(size=20, family="Lalezar Regular"),
                                text_color="#e66491"
                            )
entry2.pack(pady=20, padx=15)

btn = customtkinter.CTkButton(master=frame,
                                text="دخول",
                                command=login,
                                font=customtkinter.CTkFont(size=20, family="Lalezar -Regular"),
                                fg_color='#15c39a'
                            )
btn.pack(pady=20, padx=15)

checkbox = customtkinter.CTkCheckBox(master=frame,
                                        text="تذكرني",
                                        font=customtkinter.CTkFont(size=20,family="Lalezar -Regular")
                                    )
checkbox.pack(pady=30, padx=15)

root.mainloop()

امثلة اخرى

هناك عدة امثة والتي تحتوي الكثير من العناصر المختلفة على صفحة github

الخاتمة

نتمنى ان يكون هذا الموضوع مفيدا لكم, لا تنسى التعليق و المشاركة.

فيديو للبرنامج على الانستغرام