طراحی های پیچیده اپلیکیشن های اندرویدی با Constraint Layout

Constraint Layout یک ViewGroup هست . ViewGroup به معنی یک view هست که با هدف نگهداری دیگر view ها ساخته شده است . درست مثل LinearLayout و RelativeLayout که ViewGroup هستند . 

Constraint Layout به برنامه نویس اپ های اندرویدی کمک میکند تا طراحی های پیچیده و بزرگ را به سادگی انجام دهند که بر سلسله مراتب flat یا طراحی مسطح استوار است . 

همچنین به برنامه نویس اندروید اجازه میدهد تا ویجت های گرافیکی خود را بصورت کاملا انعطاف پذیر بچیند و سایز آنها را تغییر دهد . 

Constraint Layout برای جلوگیری از ویوهای تو در تو و شلوغ و همچنین برای بالا بردن پرفرمنس layout های اندرویدی ساخته شده است . 

 

میشه گفت ConstraintLayout مشابه RelativeLayout است بخاطر اینکه ویو ها در ارتباط با ویو های دیگر یا ویو والد یا parent view هستند ولی خب ConstraintLayout خیلی پیشرفته تر و انعطاف پذیرتر است و همچنین با Layout Editor  اندروید استودیو بهتر میتوانید ویوها و طرح گرافیکی اپلیکیشن خود را مدیریت کنید . 

ConstraintLayout در مراسم Google I/O ۲۰۱۶ معرفی شد و از نسخه ی  ۲,۳ و نسخه های بالاتر در محیط اندروید استودیو پشتیبانی میشود .

 

- مزایای استفاده از ConstraintLayout نسبت به دیگر Layout های اندرویدی

1. یکی از مزایای استفاده از constraintlayout این است که شما میتوانید با چند خط کد انیمیشن به Layout خود اضافه کنید . 
2. شما به راحتی میتوانید رابط کاربری دلخواه خود را با درگ و دراپ کردن در محیط اندروید استودیو بسازید .
3. شما می توانید از طریق یک خط کد اتفاقات مربوط به ویجت های درون یک ViewGroup خاص  کنترل کنید.
4. استفاده از Constraint Layout باعث میشود گرافیک یا رابط کاربری اپلیکیشن شما پرفرمنس بهتری داشته باشد . 

 

- استفاده از Constraint Layout  در اندروید استودیو 

 

خب Constraint Layout داخل SDK اندروید قرار نگرفته است بلکه بعنوان یک کتابخانه ی support library به پروژه شما اضافه میشود . به همین دلیل ، هر بروزرسانی در آینده با تمام نسخه های Android سازگار خواهد بود.

ابتدا برای استفاده از Constraint Layout مطمئن شوید ریپوزیتوری زیر در فایل build.gradle شما وجود دارد اگر وجود نداشت اضافه کنید :‌
 

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

 

حالا برای اینکه از ConstraintLayout استفاده کنیم باید کتابخانه ی آنرا به build.gradle (Module app) قسمت dependencies اضافه کنیم . در زیر نحوه ی اضافه کردن آنرا در فایل گردل مشاهده میکنید :‌ 

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
}

- حالت Design یا Blueprint در Android Studio
 

در بخش دیزاین layout های اپلیکیشن اندرویدی در محیط Android Studio دو حالت وجود دارد که میتوانید استفاده کنید یکی حالت Desing و دیگری حالت Blueprint که البته این دو را باهم میتوانید استفاده کنید . 

نکته : برای استفاده از ConstraintLayout بهتر است هر دو حالت Desing و Blueprint را در کنار هم استفاده کنید . در این آموزش ما دو حالت را در کنار هم استفاده خواهیم کرد . 

در تصویر زیر هر دو حالت را در محیط اندروید استودیو مشاهده میکنید :‌

 

 

-  نقاط Anchor و Handle های Constraint Layout  چیست ؟ 

 

فرض کنید ما یک TextView را به صفحه درگ میکنیم و درون ConstraintLayout قرار میدهیم بلافاصله یک خطایی نمایش داده خواهد شد و متن خطا هم یه چیزی مثل “This view is not constrained…” است .

خب این خطا به این معنی است که view جدیدی که داخل ConstraintLayout قرار گرفته است هنوز Constrain نشده است و باید این موضوع را حل کنیم یعنی اینکه برای نمایش درون یک ConstraintLayout یک سری کارها باید انجام بدیم که اگر اینکارها را نکنیم view های ساخته شده درون ConstraintLayout قابل رندر و نمایش نخواهند بود  . 

تصویر زیر را ببینید : 

 

خب حالا اگر در اطراف TextView با ماوس حرکت کنیم نقاطی مشخص میشود که به آنها نقاط handles و anchor  در Constraint Layout گفته میشود . تصویر زیر را مشاهده کنید : 

 

حالا روی هر کدام از نقاط که کلیک کنید و درگ کنید میتوانید آن نقاط را به یک چیزی در اطراف وصل کنید . 

نکته مهم :  شما حتما باید دو نقطه از ویوهای خود را به جایی وصل کنید تا آن ویو Constrained شود و خطا به شما نمایش داده نشود . 

Resize handle  : این هندل یا کنترل کننده ها مخصوص تغییر سایز یک ویو هستند . برای تغییر سایز ویو شما میتوانید از کنترل کننده هایی که در گوشه های ویو پیدا میشود استفاده کنید . البته این را در نظر داشته باشید که این کنترل کننده ها حالت Constraint ویو را حفظ میکنند و به شما اجازه میدهند UI اپ خود را هر چه بهتر طراحی کنید . تصویر زیر را ببینید : 

Side handle : این هندل ها یا کنترل کننده ها همان هندل های گرد هستند که وظیفه شان مشخص کردن اتصال بالا پایین چپ و راست مربوط به constraint نسبت به اشیا اطراف است .. یعنی یک جور سیم اتصال به بقیه اشیا هست که سر جای خودش ثابت بشه :)

 

- ویژگی ها یا Attribute های مربوط به ConstraintLayout در طراحی اپلیکیشن های اندرویدی 

 

سمت راست اندروید استودیو شما یک پنجره مشاهده میکنید که attribute نام دارد و جزئیات مربوط ویو هایی را در اختیار ما میگذارد که در ConstraintLayout استفاده کردیم . 

شما میتوانید سایز یک عنصر را با کلیک کردن چهار فلش در اطراف از wrap_content به match_constrained یا یک سایز ثابت یا هر چیز خاص دیگری تغییر دهید . 

Bias بخشی است که در تصویر زیر هم مشخص شده است که محل قرار گیری یک ویو در بین constraint های خودش کجا قرار میگیرد . 

بصورت پیشفرض مقدار Bias روی ۵۰ ٪ است ولی میتوانید آنرا تغییر دهید . 

نکته ی مهم : دست یابی به چیزی مثل Bias در LiearLayout و RelativeLayout سخت است . 

 

 

- پاک کردن Constraint در یک ConstraintLayout : 

برای پاک کردن یک اتصال Constraint به راحتی میتوانید روی هندل یا کنترل کننده ی آن کلیک کنید تا اتصال رها شود مثل تصویر زیر :‌

ابزارهای مختلف دیگر در طراحی با ConstraintLayout :‌

شما همچنین میتوانید از ابزار Autoconnect استفاده کنید تا محیط اندروید استودیو ارتباطات خودکار ایجاد کند . دکمه ی clear all constraints  باعث میشود تمام ارتباطات constraints بین ویو و ویوهای اطراف پاک شود و ابزار بعدی که در تصویر هم مشاهده میکنید infer constraint نام دارد و باعث میشود تمام ویوهای موجود در صفحه بصورت خودکار خاصیت Constraint بگیرند . در تصویر زیر محل دستیابی به این سه ابزار را میبینید :‌

 

- موقعیت های وابسته در Constraint Layout : 

 

موقعیت گیری وابسته یکی از مهم ترین نوع طراحی در Constraint Layout است و بعنوان اساس طراحی با Constraint Layout در نظر گرفته شده است . یکی از تفاوت های این نوع طراحی در وابسته بودن موقعیت ویو ها به دیگر ویو ها است . 

موقعیت گیری وابسته روی محور عمودی و افقی کاربرد دارد . 

با استفاده از وابستگی افقی شما میتوانید موقعیت راست و چپ یا start و end یک ویجت گرافیکی نسبت به یک ویجت یا ویو دیگر را مشخص کنید و همینطور هنگام استفاده از وابستگی عمودی شما میتوانید میزان بالا و پایین یک ویجت گرافیکی را مشخص کنید . 

بیایید این مفهوم را با استفاده از یک مثال واقعی درک کنیم . در مثال زیر ما دو عدد TextView داریم . در TextView اولی متن hello و در TextView دوم عبارت avasam را مینویسیم . 

موقعیت قرار گیری متن avasam را سمت چپ متن hello قرار میدهیم که در کدهای زیر مشاهده میکنید .

textview۱ در سمت چپ textview۲ است و بعنوان constrain برای textview۱ است . 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello "/>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/textview1"
        android:text="avasam"/>
</android.support.constraint.ConstraintLayout>

 

نکته ی مهم : برای معین کردن موقعیت قرار گیری یک view در ConstraintLayout شما باید حداقل یک constraint افقی و یک constraint عمودی تعریف کنید . هر constraint موقعیت افقی و عمودی یک view را مشخص میکند بنابراین تعریف هر view باید حداقل یک constraint در محور افقی و عمودی داشته باشد تا مشخص شود در چه موقعیتی باید قرار بگیرد اما اغلب تعداد constraint ها بیشتر از یک عدد است  . 

خب در زیر چند مورد آورده ایم که اینها یک view را در یک محدوده مشخص نسبت به دیگر عناصر روی اپلیکیشن قرار میدهند . 

• layout_constraintLeft_toLeftOf : مرز سمت چپ این عنصر را وابسته به موقعیت مرز سمت چپ یک عنصر دیگر مشخص میکند .
• layout_constraintLeft_toRightOf : مرز سمت چپ این عنصر را وابسته به موقعیت مرز سمت راست یک عنصر دیگر مشخص میکند .
• layout_constraintRight_toLeftOf : مرز سمت راست این عنصر را وابسته به موقعیت مرز سمت چپ یک عنصر دیگر مشخص میکند .
• layout_constraintRight_toRightOf : مرز سمت راست این عنصر را وابسته به موقعیت مرز سمت راست یک عنصر دیگر مشخص میکند .

 

- زنجیرهای اتصال یا chain ها در ConstraintLayout : 

 

زنجیره های اتصال یا اصطلاحا chain ها به ما این اجازه را میدهد که فضای خالی بین عناصر را کنترل کنیم و عناصر را به همدیگر متصل کنیم . 

برای ساختن یک chain جدید روی عناصری که میخواهید به هم متصل کنید راست کلیک کنید و “Chain” و  سپس “Create Horizontal or Vertical Chain” را انتخاب کنید . تصویر زیر را ببینید :‌

استایل های مختلفی برای اعمال روی chain وجود دارد از جمله : 

• spread
• spread_inside 
• packed

که در تصویر زیر مشاهده میکنید : 

شما میتوانید chain افقی و عمودی را بصورت همزمان اعمال کنید . 

در زیر کد نمونه ی XML استفاده از chain ها در Constraint Layout را مشاهده میکنید : 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

- استفاده از خطوط راهنما یا guideline در طراحی ConstraintLayout : 

در طراحی لیوت مربوط به اپلیکیشن های خود که از ConstraintLayout استفاده میشود میتوانید از خطوط راهنمایی عمودی و افقی نیز بهره ببرید . 

این خطوط به شما کمک میکند در ایجاد رابطه های constraint در طراحی اپلیکیشن خود نیز بهتر عمل کنید و همچنین ارتباط constraint بین عنصر گرافیکی و خط راهنما ایجاد کنید ،  تصویر زیر را مشاهده کنید :‌

 

 

نکته ی مهم : اگر شما خاصیت margin یا percentage هر یک از خطوط راهنما یا guideline را تغییر دهید بصورت خودکار به تمام عناصر متصل به این خط راهنما نیز اعمال خواهد شد . 

- درصد دهی به ابعاد یک  ConstraintLayout : 

یک خاصیتی وجود دارد به نام app:layout_constraintWidth_default که اگر مقدار percent به آن اختصاص داده شود به شما اجازه میدهد که بصورت درصد بخشی از فضا را به constraintLayout خود اختصاص دهید . کدهای زیر را بررسی کنید :‌

<!-- the widget will take 80% of the available space -->

app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.8"

 

- Barrier ها در ConstraintLayout ها :‌

Barrier موانع هستند یعنی اجازه نمیدهند که یک عنصر یا ویجت از روی آن رد شود . وقتی یک عنصر بخواهد از روی Barrier رد شود Barrier خودش را جابجا میکند و این اجازه را نمیدهد تا عنصر گرافیکی از روی آن رد شود . 

 

در زیر مثالی از نحوه ی استفاده Barrier در ConstraintLayout را میبینید و میتوانید از کدها استفاده کنید 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">


    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Barriers avoid overlapping of elements"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button13" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="button13,textView8"
        tools:layout_editor_absoluteY="511dp" />

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@+id/barrier8"
        tools:layout_editor_absoluteY="34dp" />
</android.support.constraint.ConstraintLayout>

- گروهبندی یا group کردن در  ConstraintLayout :‌

گروه یا group کردن روشی است که اجازه میدهد در برنامه نویسی اندروید بتوانید دسته ای از ویجت های گرافیکی را در کنار هم قرار دهید و بصورت ساده همه ی آنها را یکجا کنترل کنید . 

برای تمرین کردن این بخش بهتره داخل یک پروژه با یک اکتیویتی یا فرگمنت پر از ویجت های مختلف قرار دهید یا حتی یک ViewGroup دستی بسازید و چند ویجت داخلش ادد کنید . با این تمرین شما بهتر یاد میگیرید که چطور گروه ها را مدیریت کنید . خب اگر بخواهید تمام ویجت های درون یک گروه را کنترل کنید کافیست آیدی ویجت ها را بعنوان اعضای درونی گروه معرفی کنید و سپس تنظیم را برای کل ویجت های درونی اش اعمال کنید . 

 

در کدهای XML که در زیر آمده است مثالی برای نحوه ی استفاده از ویوگروپ ها یا گروه بندی ویجت های گرافیکی درون ConstraintLayout میبینید ما مقدار visibility دو Button را invisible تنظیم کردیم :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">


    <Button
        android:id="@+id/button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="44dp"
        tools:layout_editor_absoluteY="28dp" />

    <Button
        android:id="@+id/button16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="89dp"
        tools:layout_editor_absoluteY="118dp" />

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="button16,button15" />
</android.support.constraint.ConstraintLayout>

 

- مثال نهایی برای نحوه ی استفاده کردن از ConstraintLayout در Android Studio : 

در مثال پایانی این مقاله ما یک صفحه ی Login بسیار ساده با استفاده از Constraint Layout میسازیم ما از ویجت های  ImageView, EditText, Button و TextView استفاده میکنیم تا layout زیر را طراحی کنیم :‌

قدم اول : یک پروژه جدید اندروید استودیو بسازید و نام آنرا ConstraintLayout بذارید و یک اکتیویتی Main Activity بسازید و در بخش layout ها ، layout اکتیویتی اصلی خود را پیدا کنید و کدهای زیر را داخلش بنویسید( اگر وجود نداشتند) : 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80C938">

</android.support.constraint.ConstraintLayout>

قدم دوم : view های دیگر را اضافه کنیم  (imageview, edittext, button و textview) و بعد constraints افقی و عمودی آنها را نیز اضافه کنید تا خاصیت Constraint به خود بگیرند مثل کدهای زیر :‌

<ImageView
android:layout_width="146dp"
android:layout_height="100dp"
android:src="@drawable/abhi_android"
android:id="@+id/imageView"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp" />

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/editText"
android:layout_marginStart="16dp"
android:padding="12dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:hint="Email"
android:background="#ffffff"
android:layout_marginTop="232dp"
app:layout_constraintTop_toTopOf="parent" />

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText2"
android:padding="12dp"
android:background="#ffffff"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:hint="Password"
android:layout_marginTop="304dp"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:text="SIGN IN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00773F"
android:id="@+id/button1"
android:layout_marginStart="16dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="408dp"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:text="Don't have an account?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:textColor="#aaffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="480dp"
app:layout_constraintTop_toTopOf="parent" />

قدم سوم : کد کامل نمونه برای طراحی Constraint Layout : 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80C938">

<ImageView
        android:layout_width="146dp"
        android:layout_height="100dp"
        android:src="@drawable/abhi_android"
        android:id="@+id/imageView"
        android:layout_marginTop="96dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText"
        android:layout_marginStart="16dp"
        android:padding="12dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:hint="Email"
        android:background="#ffffff"
        android:layout_marginTop="232dp"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editText2"
        android:padding="12dp"
        android:background="#ffffff"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:hint="Password"
        android:layout_marginTop="304dp"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:text="SIGN IN"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00773F"
        android:id="@+id/button1"
        android:layout_marginStart="16dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="408dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="Don't have an account?"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:textColor="#aaffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="480dp"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

 

خب حالا اگر برنامه را اجرا کنید یا بدون اجرا کردن برنامه و با رفتن به بخش ویو طراحی layout در اندروید استودیو میتوانید نتیجه را ببینید ، نتیجه یک صفحه ی لاگین با استفاده از Constraint Layout است . 

 

خب این مقاله تمام شد ولی بهتره چند نکته ی مهم را هم درباره ی  Constraint Layout  ها بگیم : 

• برای استفاده از ConstraintLayout باید نسخه ی اندروید استودیو شما بالای 2.3 باشه 
• باید ابتدا کتابخانه ی ConstraintLayout را به گردل اضافه کنید تا بتونید استفاده کنید 
• شما باید حداقل یک constraints افقی و یک constraints عمودی برای view های خود اضافه کنید 

 

خب در نهایت نتیجه میگیریم که Constraint Layout سریعتر است و برای طراحی های پیچیده  و ظریف گرافیک یا رابط کاربری اپلیکیشن های اندرویدی خوب است . 

موفق باشید

تمام .

 

 

---

مطالب زیر ممکن است برای شما مفید باشد

 آموزش ساخت اسلایدر با Viewpager برای اپ های اندرویدی در محیط android studio برنامه نویسی سوکت در جاوا آموزش کامل کار با Retrofit 2.x بعنوان یک کلاینت REST Flutter یا React Native از دید یک توسعه دهنده ساخت موزیک پلیر در اندروید استودیو

محصولات برگزیده مناسب شما

 دوره ی آموزش ساخت اپ گالری تصاویر آنلاین با کاتلین دوره ی پروژه محور ساخت سایت و اپ دیوار با سورس دوره ی پروژه محور ساخت سایت و اپ مارکت بازار با سورس کامل دوره ی آموزش برنامه نویسی اندروید با جاوا و android studio

پایان 👍

چرا باید از Node.js استفاده کنیم ؟‌ ( بررسی کلی )

 

 

نود جی اس ( Node.js ) چیست ؟‌

 

محبوبیت جاوا اسکریپت باعث تغییرات زیادی در این زبان شد و شکل توسعه ی وب سایت ها امروزه تغییر یافته است . همانطور که جاوااسکریپت قبلا برای مرورگر یا سمت کلاینت یک وب سایت کاربرد داشت امروزه جاوا اسکریپت یک زبان سمت سرور یا بک اند هم محسوب میشود . 

این درحالی است که چند سال پیش که دنیای وب با Flash و Java Applet ها محصور شده بود . 

 

خب همانطور که در ویکیپدیا نوشته شده است :‌ 

 

نود. جی‌اس (به انگلیسی: Node.js) یک محیط اجراییِ سمت سرورِ متن‌باز و چندسکویی برای زبان جاوااسکریپت است. از لحاظ تاریخی از جاوااسکریپت در درجهٔ اول به عنوان یک زبان اسکریپت‌نویسی سمت کاربر به این صورت استفاده می‌شد که اسکریپت‌های نوشته شده با جاوااسکریپت درون صفحات اچ‌تی‌ام‌ال جاسازی می‌شدند و سپس این اسکریپت‌ها توسط یک موتور جاوااسکریپت در مرورگر وب کاربر پردازش می‌شد. نود. جی‌اس امکان استفاده از جاوااسکریپت برای نوشتن اسکریپت‌های سمت سرور را فراهم می‌کند تا بدین صورت بتوان با آن صفحات وب پویا را قبل از فرستادن آن به مرورگر کاربر تولید کرد. در نتیجه نود. جی‌اس به یکی از المان‌های اصلی در پارادایمِ «جاوااسکریپت در همه جا» تبدیل شده‌است که در آن به جای استفاده از زبان‌های برنامه‌نویسی مختلف در نوشتن اسکریپت‌های سمت سرور، از یک زبان واحد برای توسعهٔ برنامه‌های کاربردی وب استفاده می‌شود.

 

بعد از ۲۰ سال ، که ارتباط وب با سرور یک طرفه بود حالا تکنولوژی داریم که با آن میتوانیم اپلیکیشن های تحت وب بصورت Real Time یا با ارتباط دو طرفه بسازیم . 

 

در یک جمله : نود جی اس در پیاده سازی اپلیکیشن های real-time درخشید و تکنولوژی وب را به سمت وب سوکت ها هدایت کرد . 

در حقیقت نود جی اس به توسعه دهنده کمک میکنند تا ارتباط یک طرفه بین سرور و کلاینت را باز نگه دارد تا تغییرات را بصورت آنی مشاهده کند مثل یک برنامه ی چت مثل تلگرام و واتس اپ و ...

 

ممکنه شخصی ادعا بکنه که این کارها را قدیم با Flash یا Java Applets هم انجام میدادیم اما در واقعیت اینها محیط های sandbox بودند که از وب بعنوان پروتکل ارسال اطلاعات به کلاینت استفاده میکرد ، بعلاوه آنها در یک محیط ایزوله شده و اکثرا از طریق پورت های غیراستاندارد کار میکردند که ممکن بود به مجوز های اضافی هم نیاز داشته باشند . 

 

جالب است بدانید ، بک اند یا سمت سرور بسیاری از سرویس ها و محصولات  شرکت های بزرگ از نود جی اس استفاده میکنند .

خب در این مقاله درباره ی اینکه نود جی اس چه مزایایی میتواند داشته باشد و چرا باید از نود جی اس استفاده کنید یا نکنید بحث خواهیم کرد . 

 

10 دلیل برای اینکه Nodejs را باید یاد بگیرید 

 

1 - Node.js بسیار سریع است :‌

 

Node.js از موتور V۸  گوگل استفاده میکند . موتور V۸ گوگل کدهای جاوااسکریپت را کدهای محلی ماشین کامپایل میکند و با سرعت بسیار بالایی اجرا میشود و به همین خاطر است که Node.js پرسرعت تر از بقیه فریمورک هاست . 

Node.js به تیم های برنامه نویسی و شرکت ها ، کمک می کند تا برنامه های سریع و انعطاف پذیر تحت شبکه بسازند که بتوانند اتصالات موازی را با توان بالا انجام دهند .

طبق گزارش شرکت PayPal این شرکت ، بعد از کوچ کردن سیستم هایشان به Node.js مدت زمان پاسخگویی سرویس هایش طی یک ثانیه ،  در حالیکه درخواست ها دوبرابر قبل شده بود ،  ۳۵% کاهش داشته  . 

 

2 - Node.js برنامه نویسان را به اشتراک گذاری کدهایشان ترغیب میکند :‌

 

Node.js سعی دارد برنامه نویسان را به NPM یا نود پکیج منیجر نزدیک کند  . این مخزن دارای بیش از ۵۰،۰۰۰ پکیج آماده است که به برنامه نویسان کمک میکند تا کارهای خود را خیلی سریع پیش ببرند . 

با استفاده از NPM برنامه نویسان میتوانند کدها را بروزرسانی کنند ، به اشتراک بگذارند یا مجدد استفاده کنند ، بدون اینکه زحمت خاصی بکشند . 

 

3 - با Node.js میتوانید اپلیکیشن های تحت وب RealTime بنویسید که پرفرمنس بالاتری داشته باشد :‌

 

Node.js ابزارهای خیلی خوبی دارد تا بتوانید یک اپلیکیشن مثل چت یا بازی انلاین بسازید که بصورت real-time با سرور در ارتباط است . 

همچنین Node.js برای برنامه هایی کاربرد دارد که event-based هستند مثل non-blocking driven server ها . 

 

4 - زبان برنامه نویسی یکسان در دو طرف اپلیکیشن های Real-Time  ( کلاینت و سرور )‌  : 

 

توسعه دهندگان Node.js با کدهای جاوا اسکریپت هم سمت سرور و هم سمت کلاینت میتوانند کد نویسی کنند و این امر باعث آسانی مبادله اطلاعات بین کلااینت و سرور میشود . 

واحد بودن زبان برنامه نویسی سمت سرور و سمت کلاینت برای یک توسعه دهنده بعنوان یک شتاب دهنده میباشد که از صرف کردن وقت برای یادگیری یک زبان برنامه نویسی دیگر جلوگیری میکند . 

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

 

5 - استریم کردن خوب داده ها در Node.js :

 

دیگر فریمورک های وب به درخواست و پاسخ مبتنی بر HTTP بعنوان دیتا ابجکت نگاه میکنند اما Node.js در کنترل  I/O بسیار خوب عمل میکند . بنابراین ما می توانیم از این مزایا بهره ببریم و اپلیکیشن های پیشرفته تری مبتنی بر شبکه بسازیم . 

مثلا می توانید هنگام بارگذاری یک فایل صوتی و تصویری را رمزگذاری کنید ، Node.js همچنین می تواند با  WebSocket ها ارتباط برقرار کند تا بتوانید اطلاعات روی HTTP  را بخواند و بنویسد.

 

6 - هر برنامه نویس جاوا اسکریپت را میشناسد :‌

 

تقریبا میشه گفت همه ی برنامه نویس ها با جاوااسکریپت آشنا هستند و حداقل یکبار با آن کدنویسی کرده اند ، میشه گفت حداقل یکبار یک پلاگین جیکوئری را دستکاری کردن ! 

پیدا کردن برنامه نویس و توسعه دهنده ی وب که حرفه ای باشد کمی دشوار است . خب چرا از یک زبانی استفاده نکنیم که همه با آن آشنا هستند ؟ اینطوری سریعتر هم میشه یک برنامه نویس واسه ی آن زبان پیدا کرد . این مزیت جاوااسکریپت به پای Node.js هم نوشته میشود . 

 

7 - Node.JS برای هاستینگ :

 

با پذیرفته شدن سریع Node.js از طرف توسعه دهندگان و شرکت های بزرگ ، سرویس دهنده های هاستینگ شروع به سرویس دهی به نود جی اس کردند . 

برای نصب Node.js روی هاست های اشتراکی شما باید دسترسی به SSH داشته باشید اگر SSH در پنل مدیریتی هاست شما وجود ندارد یا فعال نیست با پشتیبان سرویس دهنده ی خود صحبت کنید

اما اگر از سرور مجازی یا سرور شخصی استفاده کنید مسئله ای وجود نخواهد داشت و به راحتی میتوانید Node.js را اجرا کنید . 

سرویس دهنده های Platform as a Service (PaaS) در سطح جهانی نیز به فکر ایجاد بستر مناسب برای توسعه ی Node.js هستند . 

 

8 - Node.js باعث افزایش بهره وری میشود : 

 

بهره وری Node.js از دو جنبه قابل بررسی است . یکی اینکه توسعه دهنده به دلیل وجود خطاهای Run Time بهره وری بالاتری خواهد داشت و دوم اینکه شرکت های بزرگ میتوانند تیم های مجزای فرانت اند و بک اند را در یک گروه جمع کنند تا پروژه سریعتر و بهتر به نتیجه برسد . 

 

9 - سرور Node.js بعنوان Proxy - برنامه نویسان سرور Node.js را استخدام کنید :‌

 

همانطور که قبلتر دیدیم Node.js مشخص کرد که در اکثر سیستم های مدیریت با مدت زمان پاسخگویی بسیار کمتری کاربرد دارد  .به همین ترتیب Node.js می تواند برای stream کردن اطلاعات از منابع مختلف مورد استفاده قرار گیرد.

 

10 -  پشتیبان و حمایت کننده ی Node.js  

 

اگر شما از فریمورک های اوپن سورس استفاده کرده باشید ممکن است توسط سازندگان آزاد و داوطلب خودش رها شده باشد ولی Node.js توسط Joynet  حمایت میشود . 

 

خب ده دلیل خوب آوردیم برای اینکه Node.js را یاد بگیرید . هم اکنون شروع کنید و مطمعن باشید در مدت زمان کم میتوانید به آن مسلط شوید فقط از یک منبع خوب ، با کیفیت و ترجیحا فارسی برای شروع استفاده کنید  . 

تمام  

---

مطالب زیر ممکن است برای شما مفید باشد

 5 دلیل برای اینکه با جاوا اسکریپت کار کنید Express.js چیست و چرا انقدر مهمه ؟‌ رادیو صفر و یک - پادکست شماره ی 9 ام - اینترنت بی اینترنت رادیو صفر و یک - پادکست شماره ی 3 ام - شرکت جت برینز و محصولاتش برای برنامه نویسان رادیو صفر و یک - پادکست شماره ی 5 ام - دیپ فیک چیست ؟‌ آخرین مرز میان حقیقت و دروغ

محصولات برگزیده مناسب شما

 کارگاه آموزشی کار با Grunt js کارگاه آموزشی نحوه ی آپدیت ورژن فریمورک laravel دوره ی آموزش لینوکس اوبونتو کارگاه آموزش کار با API های اینستاگرامی

پایان 👍

ساخت عملیات swipe حذف آیتم های recyclerview مثل اپ GMAIL

در این مقاله ی آموزشی قصد داریم به شما یاد بدیم چطور روی آیتم های یک recyclerview عمل swipe به چپ یا راست را انجام دهید و بعد از swipe کردن کاربر آنرا حذف کنید . درست مثل اپلیکیشن اندرویدی GMail . 

در این مقاله یاد میگیرید چطور یک آیتم را هنگام swipe پاک کنید و بعد از پاکسازی Undo هم برای لغو حذف نمایش دهید . 

از نظر UX برای کاربران اپلیکیشن ها ، swipe کردن روی آیتم ها برای حذف کردن آنها بسیار راحت و دلچسب تر خواهد بود . 

شما میتوانید از این آموزش برای تغییرات شخصی خودتان نیز به سادگی استفاده کنید . 

 

خب بیایید شروع کنیم 

 

قدم ۱ - پروژه جدید کاتلین بسازید :

 

در محیط اندروید استودیو خودتان یک پروژه جدید بسازید و یک اکتیویتی empty جدیدی بسازید . و یادتون نره موقع ساختن پروژه کاتلین رو بعنوان زبان برنامه نویسی انتخاب کنید . 

حالا فایل  build.gradle(Module: app) را باز کنید و کدهای زیر را بهش اضافه کنید 

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

البته اگر قصد دارید از کتابخانه جدیدتر اینها استفاده کنید از AndroidX استفاده کنید که نحوه ی افزودن کتابخانه ها با androidx را به راحتی میتونید گوگل کنید . 

خب برای اضافه کردن recyclerview و cardview و material desing به پروژمون ما نیاز داریم سه کتابخانه بالا را به گردل اضافه کنیم بعد اتصال به اینترنت با دور زدن ip ایران بخاطر تحریم ها نیاز است و سپس sync کنید تا کتابخانه های بالا دانلود و به پروژتون اضافه بشن . 

 

قدم ۲ - اضافه کردن تصویر حذف :‌

 

خب یک فایل png تصویری پیدا کنید که تصویر سطل آشغال باشه برای پیدا کردن چنین تصویری مستقیما میتوانید در گوگل عبارت زیر را کپی و سرچ کنید ( البته بخش تصاویر ) :‌

trash icon filetype:png

و بعد از پیدا کردن تصویر آنرا در مسیر app->res->drawable کپی کنید . 

قدم ۳ - اضافه کردن فایل XML و کلاس مدل :‌

 

خب در مسیر app->res->layout یک فایل xml جدید بسازید و نام آنرا rv_item.xml قرار دهید . 

فایل rv_item.xml باید محتوای زیر را داشته باشد :‌

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    tools:context=".MainActivity"
    tools:ignore="NamespaceTypo">
 
    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_gravity="center"
        app:cardBackgroundColor="#ffffff"
        android:layout_marginTop="0dp"
        card_view:cardCornerRadius="1dp">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/tv"
                android:height="90dp"
                android:gravity="center"
                android:paddingLeft="10dp"
                android:text="Image"
                android:textColor="#000"
                android:textStyle="bold"
                android:textSize="18sp" />
 
        </LinearLayout>
 
    </android.support.v7.widget.CardView>
</RelativeLayout>

خب همانطور که در کدهای بالا میبینید این کدها یک textview را داخل یک cardview میسازد پس هر ردیف recyclerview یک عدد cardview خواهد داشت که درونش یک textview وجود دارد . 

حالا یک فایل کاتلین جدید بسازید و اسمش رو SwipeModel.kt بزارید . 

محتویات  SwipeModel.kt باید به شکل زیر باشه : 

class Model {
 
    var name: String? = null
 
 
    fun getNames(): String {
        return name.toString()
    }
 
    fun setNames(name: String) {
        this.name = name
    }
}

در کدهای بالا یک متغیر از نوع رشته ای یا string تعریف کردیم که قراره نام ماشین را نگهداری بکنه و روی recyclerview به نمایش بذاره 

برای این متغیر دو متد کمک کننده ی Setter و Getter نوشتیم که دریافت و ارسال اطلاعات را راحت میکنه . 

 

قدم ۴ - آداپتر برای swipe : 

 

یک فایل کلاس از نوع کاتلین بسازید و اسم انرا SwipeAdapter.kt انتخاب کنید . 

محتویات  SwipeAdapter.kt  باید به شکل زیر باشد :‌

import android.content.Context
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import java.util.ArrayList
 
/**
 * Created by avasam.ir in 2019
 */
class SwipeAdapter(ctx: Context, private val imageModelArrayList: ArrayList<Model>) :
    RecyclerView.Adapter<SwipeAdapter.MyViewHolder>() {
 
    private val inflater: LayoutInflater
 
 
    init {
 
        inflater = LayoutInflater.from(ctx)
    }
 
    fun removeItem(position: Int) {
        imageModelArrayList.removeAt(position)
        notifyItemRemoved(position)
        notifyItemRangeChanged(position, imageModelArrayList.size)
    }
 
    fun restoreItem(model: Model, position: Int) {
        imageModelArrayList.add(position, model)
        // notify item added by position
        notifyItemInserted(position)
    }
 
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
 
        val view = inflater.inflate(R.layout.rv_item, parent, false)
 
        return MyViewHolder(view)
    }
 
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
 
        holder.time.setText(imageModelArrayList[position].getNames())
    }
 
    override fun getItemCount(): Int {
        return imageModelArrayList.size
    }
 
     inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
 
        var time: TextView
 
 
        init {
 
            time = itemView.findViewById(R.id.tv) as TextView
 
        }
 
    }
}

 

در تابع onCreateViewHolder() ما rv_item.xml را پر میکنیم تا ویو مربوط به هر ردیف ساخته شود . 

سپس در تابع onBindViewHolder() نام ماشین را در textview ست میکنیم ، برای این از imageModelArrayList بعنوان منبع دیتا استفاده کرده ایم . 

imageModelArrayList یک arraylist است که درونش از آبجکت های SwipeModel پر میشود که آداپتر آنرا از پارامترها میگیرد . 

خب حالا به کد زیر نگاه کنید :‌

 fun removeItem(position: Int) {
        imageModelArrayList.removeAt(position)
        notifyItemRemoved(position)
        notifyItemRangeChanged(position, imageModelArrayList.size)
    }

این تابع زمانی اجرا میشود که کاربر به سمت راست یا چپ عمل swipe را انجام دهد و سپس دکمه ی undo را نزند . 

 

کامپایلر آیتمی که روی آن عمل swipe اتفاق افتاده است را پاکسازی خواهد کرد . 

سپس متد notifyItemRemoved()  فراخوانی میشود و سپس متد notifyItemRangeChanged() ریسایکلر ویو را ریفرش میکند . 

حالا به تابع زیر نگاه کنید : 

 fun restoreItem(model: Model, position: Int) {
        imageModelArrayList.add(position, model)
        // notify item added by position
        notifyItemInserted(position)
    }

 

اگر کاربر دکمه ی undo را کلیک کند قبل از اینکه آیتم حذف شود کامپایلر متد زیر را فراخوانی میکند . 

ابتدا آیتم حذف شده را دوباره به سرجایش برمیگرداند و سپس متد notifyItemInserted() را فراخوانی میکند تا ریسایکلر ویو ریفرش شود . 

 

قدم ۵ - تغییرات اکتیویتی اصلی برنامه :‌

 

خب ما دو فایل در اکتیویتی اصلی داریم یکی فایل کاتلین و یکی فایل لیوت آن بنام activity_main.xml  که کدش در زیر است :‌

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/linear"
        android:background="#e4e0e0"
        tools:context=".MainActivity">
 
    <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"/>
 
</android.support.design.widget.CoordinatorLayout>

خب همانطور که میبینید چیز خاصی ندارد و فقط یک recyclerview به آن اضافه شده است 

کد های زیر هم برای MainActivity.kt است :‌

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.support.design.widget.Snackbar
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.graphics.Canvas
import java.util.ArrayList
import android.support.v7.widget.helper.ItemTouchHelper
 
class MainActivity : AppCompatActivity() {
 
    private var recyclerView: RecyclerView? = null
    private var imageModelArrayList: ArrayList<Model>? = null
    private var adapter: SwipeAdapter? = null
    private val p = Paint()
    private val myImageNameList = arrayOf("Benz", "Bike", "Car", "Carrera", "Ferrari", "Harly", "Lamborghini", "Silver")
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        recyclerView = findViewById(R.id.recycler) as RecyclerView
 
        imageModelArrayList = populateList()
 
        adapter = SwipeAdapter(this, imageModelArrayList!!)
        recyclerView!!.adapter = adapter
        recyclerView!!.layoutManager = LinearLayoutManager(applicationContext, LinearLayoutManager.VERTICAL, false)
 
        enableSwipe()
    }
 
    private fun enableSwipe() {
        val simpleItemTouchCallback =
            object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT) {
 
                override fun onMove(
                    recyclerView: RecyclerView,
                    viewHolder: RecyclerView.ViewHolder,
                    target: RecyclerView.ViewHolder
                ): Boolean {
                    return false
                }
 
                override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                    val position = viewHolder.adapterPosition
 
                    if (direction == ItemTouchHelper.LEFT) {
                        val deletedModel = imageModelArrayList!![position]
                        adapter!!.removeItem(position)
                        // showing snack bar with Undo option
                        val snackbar = Snackbar.make(
                            window.decorView.rootView,
                            " removed from Recyclerview!",
                            Snackbar.LENGTH_LONG
                        )
                        snackbar.setAction("UNDO") {
                            // undo is selected, restore the deleted item
                            adapter!!.restoreItem(deletedModel, position)
                        }
                        snackbar.setActionTextColor(Color.YELLOW)
                        snackbar.show()
                    } else {
                        val deletedModel = imageModelArrayList!![position]
                        adapter!!.removeItem(position)
                        // showing snack bar with Undo option
                        val snackbar = Snackbar.make(
                            window.decorView.rootView,
                            " removed from Recyclerview!",
                            Snackbar.LENGTH_LONG
                        )
                        snackbar.setAction("UNDO") {
                            // undo is selected, restore the deleted item
                            adapter!!.restoreItem(deletedModel, position)
                        }
                        snackbar.setActionTextColor(Color.YELLOW)
                        snackbar.show()
                    }
                }
 
                override fun onChildDraw(
                    c: Canvas,
                    recyclerView: RecyclerView,
                    viewHolder: RecyclerView.ViewHolder,
                    dX: Float,
                    dY: Float,
                    actionState: Int,
                    isCurrentlyActive: Boolean
                ) {
 
                    val icon: Bitmap
                    if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
 
                        val itemView = viewHolder.itemView
                        val height = itemView.bottom.toFloat() - itemView.top.toFloat()
                        val width = height / 3
 
                        if (dX > 0) {
                            p.color = Color.parseColor("#388E3C")
                            val background =
                                RectF(itemView.left.toFloat(), itemView.top.toFloat(), dX, itemView.bottom.toFloat())
                            c.drawRect(background, p)
                            icon = BitmapFactory.decodeResource(resources, R.drawable.delete)
                            val icon_dest = RectF(
                                itemView.left.toFloat() + width,
                                itemView.top.toFloat() + width,
                                itemView.left.toFloat() + 2 * width,
                                itemView.bottom.toFloat() - width
                            )
                            c.drawBitmap(icon, null, icon_dest, p)
                        } else {
                            p.color = Color.parseColor("#D32F2F")
                            val background = RectF(
                                itemView.right.toFloat() + dX,
                                itemView.top.toFloat(),
                                itemView.right.toFloat(),
                                itemView.bottom.toFloat()
                            )
                            c.drawRect(background, p)
                            icon = BitmapFactory.decodeResource(resources, R.drawable.delete)
                            val icon_dest = RectF(
                                itemView.right.toFloat() - 2 * width,
                                itemView.top.toFloat() + width,
                                itemView.right.toFloat() - width,
                                itemView.bottom.toFloat() - width
                            )
                            c.drawBitmap(icon, null, icon_dest, p)
                        }
                    }
                    super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
                }
            }
        val itemTouchHelper = ItemTouchHelper(simpleItemTouchCallback)
        itemTouchHelper.attachToRecyclerView(recyclerView)
    }
 
    private fun populateList(): ArrayList<Model> {
 
        val list = ArrayList<Model>()
 
        for (i in 0..7) {
            val imageModel = Model()
            imageModel.setNames(myImageNameList[i])
            list.add(imageModel)
        }
 
        return list
    }
}

 

خب بیایید اکتیویتی اصلی را بررسی کنیم .

ابتدا کدهای زیر را میبینید :‌

 private var recyclerView: RecyclerView? = null
    private var imageModelArrayList: ArrayList<Model>? = null
    private var adapter: SwipeAdapter? = null
    private val p = Paint()
    private val myImageNameList = arrayOf("Benz", "Bike", "Car", "Carre

خب در ابتدا یک ابجکت از Recyclerview ساختیم و سپس یک SwipeAdapter و بعد هم کلاس های مورد نیازمان 

یک آرایه با ابجکت های مدلی که بالاتر ساختیم و اسمش imageModelArrayList است 

و یک آرایه ی از نوع string دیگر که نام وسایل نقلیه را نگهداری میکند مانند Benz Bike Car و ...

حالا کدهای زیر را ببینید :‌

imageModelArrayList = populateList()
 
        adapter = SwipeAdapter(this, imageModelArrayList!!)
        recyclerView!!.adapter = adapter
        recyclerView!!.layoutManager = LinearLayoutManager(applicationContext, LinearLayoutManager.VERTICAL, false)
         enableSwipe()

کامپایلر populateList() را استفاده خواهد کرد که دیتا را داخل  imageModelArrayList قرار دهد . 

سپس adapter را به recyclerview معرفی و bind خواهد کرد . 

کامپایلر متد enableSwipe()  را صدا میزند . 

در زیر کدهای متد enableSwipe()  میبینید :‌

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                    val position = viewHolder.adapterPosition
 
                    if (direction == ItemTouchHelper.LEFT) {
                        val deletedModel = imageModelArrayList!![position]
                        adapter!!.removeItem(position)
                        // showing snack bar with Undo option
                        val snackbar = Snackbar.make(
                            window.decorView.rootView,
                            " removed from Recyclerview!",
                            Snackbar.LENGTH_LONG
                        )
                        snackbar.setAction("UNDO") {
                            // undo is selected, restore the deleted item
                            adapter!!.restoreItem(deletedModel, position)
                        }
                        snackbar.setActionTextColor(Color.YELLOW)
                        snackbar.show()
                    } else {
                        val deletedModel = imageModelArrayList!![position]
                        adapter!!.removeItem(position)
                        // showing snack bar with Undo option
                        val snackbar = Snackbar.make(
                            window.decorView.rootView,
                            " removed from Recyclerview!",
                            Snackbar.LENGTH_LONG
                        )
                        snackbar.setAction("UNDO") {
                            // undo is selected, restore the deleted item
                            adapter!!.restoreItem(deletedModel, position)
                        }
                        snackbar.setActionTextColor(Color.YELLOW)
                        snackbar.show()
                    }
                }

 

کامپایلر متد onSwiped() را زمانی صدا میزند که کاربر به سمت راست یا چپ swipe بکند . 

سپس یک شرط if گذاشتیم تا بررسی کند عمل swipe به کدام سمت بوده است . 

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

سپس متد removeItem() را صدا میزند که درون کلاس آداپتر است 

سپس یک snack bar نمایش داده میشود . 

زمانی که کاربر دکمه ی UNDO را روی snack bar  کلیک میکند کامپایلر متد restoreItem()  را صدا خواهد زد . 

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

 

---

مطالب زیر ممکن است برای شما مفید باشد

 تحلیل دوره ی پروژه محور ساخت سایت و اپ مارکت بازار با سورس کامل تگ های header را در سئو سایت دست کم نگیرید رادیو صفر و یک - پادکست شماره ی 9 ام - اینترنت بی اینترنت رادیو صفر و یک - پادکست شماره ی 3 ام - شرکت جت برینز و محصولاتش برای برنامه نویسان رادیو صفر و یک - پادکست شماره ی 5 ام - دیپ فیک چیست ؟‌ آخرین مرز میان حقیقت و دروغ

محصولات برگزیده مناسب شما

 دوره ی آموزش برنامه نویسی اندروید با جاوا و android studio کارگاه آموزش طراحی سایت با BULMA دوره آموزش برنامه نویسی اندروید با کاتلین kotlin بصورت پروژه محور دوره آموزش برنامه نویسی کار با سخت افزار اندروید

پایان 👍

چند داشبورد مدیریتی آماده برای لاراول

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

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

خب چند نمونه از بهترین داشبورد های لاراولی را در این مقاله قصد دارم معرفی کنم که امیدوارم برای تمام توسعه دهندگان وب مفید باشه . 

معمولا داشبورد های مدیریتی لاراول به دو دسته اصلی تقسیم بندی میشوند :‌ visual builders و console-based و این به شما بستگی دارد که کدام دسته ها نیاز شما را رفع میکند . 

 

یکی دیگر از ویزگی های مهم داشبورد ها انجام خوب عمل CRUD در دیتابیس است خب همه میدانیم که CRUD مخفف کلمات Create, Read, Update, Delete است . معمولا عملیات CRUD با یک مدل در پروژه ی لاراول در ارتباط است . 

 

نکته ی مهم :‌ تمام ابزارهای معرفی شده در زیر روی لاراول ۵,۴ تست شده و درست کار میکنند و ممکنه الان برای نسخه های جدید تر هم بروزرسانی شده باشند . پس برای اطلاع از اینکه با نسخه های بالاتر مثلا نسخه های ۶ کار می کنند یا نه ؟‌باید به سایت اصلی آنها مراجعه کنید و ببینید که بروزرسانی جدید آنها تا نسخه ی چند لاراول را پشتیبانی میکند . 

 

پنل های مدیریتی دسته ی visual builders 

 

پنل مدیریتی Voyager: The Missing Laravel Admin

 

این محصول اگرچه تازه است ولی بیشترین تاثیر را روی من گذاشت ! طرفداران زیادی دارد و همچنین آموزش های ویدیویی رسمی روی یوتیوب دارد که از این لینک میتوانید ویدیوهای آموزشی اش را ببینید :‌ Youtube series by DevDojo

 Voyager ظاهر تر تمیز و خرفه ای دارد ولی خب نکته ی مهم کارکرد این پنل مدیریتی است . دستور العمل های واضح ، قالب ظاهری جذاب ، عدم وجود باگ های آشکار و عدم وجود بخش های نیمه تمام از ویژگی های ویجر هستند . 

آیکون شبیه کاپیتان و فرمان کشتی ، باعث القای حس مدیریتی میشود . 

 

یکی از ویژگی های دیگر ویجر این است که شما به هنگام نصب میتوانید اطلاعات ساختگی یا اصطلاحا dummy-data در پایگاه داده وارد کنید تا سایت شما شکل شمایل اصلی به خود بگیرد فرض کنید یک فروشگاه ساختید و بعد از نصب باید بشینید دونه دونه محصولات الکی وارد کنید تا ظاهر و امکانات فروشگاه را تست کنید این کار را ویجر بصورت خودکار انجام میده و کلی اطلاعات ساختگی وارد دیتابیس میکنه 

 

ویجر همچنین دارای یک بخش مدیریت رسانه ها داره و هر چیزی که اپلود میشه را میتونید مدیریت کنید که بسیار مناسب است و یک برتری برای این داشبورد مدیریت نسبت به بقیه حساب میشه . 

 

در نهایت یکی از ویژگی های خوب ویجر این است که شما میتوانید جداول دیتابیس را در پنل مدیریتی ویرایش کنید ! یه چیزی مثل phpmyadmin کوچک درون پنل مدیریتی ! جالبه نه ؟

 

خب تا اینجا که ویجر عالی به نظر میرسه و بهترین گزینه است ولی به شرط اینکه بعنوان یک پروژه اوپن سورس بروزرسانی ها و باگ گیری های مداوم داشته باشه . هر چیزی که پشتیبانی خوبی نداشته باشه بعد یه مدت میمیره . 

 

پنل مدیریت LaraAdmin: Admin Panel + CRM

این پنل مدیریت هم یکی از پنل هایی بود که برای من جالب بود شما بعد از ورود به پنل میتوانید مستقیما مدل های لاراول را ایجاد کنید ،‌ شما بصورت ویژوال میتوانید ماژول ها را ایجاد کنید که عملیات CRUD را برای شما فراهم میکند ، یک سیستم ماژولار که سازندگان آن از SugarCRM الهام گرفته اند . 

 با چند کلیک ساده شما میتوانید مایگریشن های مربوط به model های خودتان را بسازید و عملیات CRUD را روی آنها یا بصورت جداگانه انجام دهید . 

LaraAdmin با چند ماژول از پیش تعریف شده همراه است. اینها به شما کمک میکنند اما اگر مجبور باشید سیستم را از صفر طراحی کنید وقت شما را میگیرند چون برای خلاص شدن از پیشفرض ها باید زمان بذارید .

همانند voyager یک سیستم آپلود دارد . در حقیقت یک مرورگر درونی برای کارهای اپلود دارد . 

برای ظاهر پنل مدیریتی LaraAdmin از یک قالب معروف به نام AdminLTE استفاده میکند که توسط بسیاری از توسعه دهندگان وب استفاده میشود . 

 

پنل مدیریتی QuickAdmin: Package and Online Generator 

این پکیج خیلی سادست . بعد از نصب شما میتوانید آیتم های منو CRUD یا non-CRUD بسازید که به همراه فیلدهای خاص با مجوزها و نقش های معینی هستند . 

در بین تمام ابزارهای بررسی شده کمترین فایل راهنما را دارد . 

یکی از مهمترین نقاط عطف QuickAdmin سیستم آنلاین ادمین پنل است .

 

 پنل های مدیریت Non-Visual

 

پنل مدیریتی Z-song / Laravel-admin 

در حقیقت این پکیج از دو بخش تشکیل شده است بخشی که ویژوال است و میتوانید آیتم های منو را بسازید ولی بخش دیگری است که با کدنویسی باید انجام دهید مثل زیر :‌

php artisan admin:make UserController --model=App\\User

$router->resource('users', UserController::class);

use Encore\Admin\Grid;
use Encore\Admin\Facades\Admin;
$grid = Admin::grid(Movie::class, function(Grid $grid){

و این تفاوت بخش ویژوال با بخش کدنویسی است . البته شما باید سینتکس و قوانین کدنویسی آنرا یاد بگیرید 

پکیج Z-Song یک پکیج مدیریتی خوب است که بخوبی کار میکند . 

همچنین این پکیج متدهای اضافی مثل model-grid, model-form, model-tree و  ready-built widgets را داراست . 

 

پنل مدیریتی InfyOm Laravel Generator

 

شعار اصلی این پنل Get your APIs and Admin Panel ready in minutes است بنابراین این پنل بیشتر روی API ها تاکید دارد . 

این پکیج یک تولید کننده ی API دارد که میتواند بعنوان بخشی از پنل مدیریت یا به تنهایی کار کند . 

همچنین annotation های  Swagger  را هم برای API میسازد . 

همچنین پکیج InfyOm هیچ رابط گرافیکی ندارد (البته توسعه دهنده ی آن میگوید که روی رابط کاربری یا GUI آن در حال کار کردن است ).

این پکیج سه گزینه ی  دیگری برای عملیات CRUD معرفی میکند . console ، JSON file و database table .

شما میتوانید روی یک جدول از پیش ساخته شده CRUD بسازید . 

یکی از ابزارهای جالب این فریمورک این است که کدها را با   پترن repository  میسازد .

خب پس کنترلر شما باید چنین چیزی باشد :‌

class BookController extends AppBaseController
{
    /** @var  BookRepository */
    private $bookRepository;

    public function __construct(BookRepository $bookRepo)
    {
        $this->bookRepository = $bookRepo;
    }

    /**
     * Display a listing of the Book.
     *
     * @param Request $request
     * @return Response
     */
    public function index(Request $request)
    {
        $this->bookRepository->pushCriteria(new RequestCriteria($request));
        $books = $this->bookRepository->all();

        return view('books.index')
            ->with('books', $books);
    }

برای فرانت اند هم InfyOm چهار گزینه را پیشنهاد میکند : AdminLTE, Metronic, Bootstrap, و FlatLab

یکی از بزرگترین مشکلات InfyOm این است که شما مجبور هستید از سینتکس آن پیروی کنید .

میتوانید از مستندات InfyOm هم کمک بگیرید . 

 

پنل مدیریت AppzCoder: CRUD Generator + Admin Panel 

این پکیج در واقع دو محصول در یک پکیج است . یک تولید کننده CRUD یا پکیج مدیریت laravel بصورت مستقل وجود دارد . 

مستندات این پکیج میگوید که نسخه ی لاراول باید  Laravel ۵,۱ باشد اما روی لاراول ۵.۳ هم بخوبی کار کرد ! 

بعد از نصب کردن شما یک قالب تحت Bootstrap را مشاهده خواهید کرد که میتوانید CRUD را بصورت دستی یک به یک وارد کنید و میتوانید از دستور آرتیسان crud:[command] استفاده کنید . 

یک مثال از مستندات خود این پکیج :‌

php artisan crud:generate Posts --fields="title#string; content#text; category#select#options=technology,tips,health" --view-path=admin --controller-namespace=Admin --route-group=admin

اگر این به نظر شما مشکل است شما میتوانید اطلاعات فیلد ها را درون یک فایل JSON قرار دهید و بعد بعنوان یک پارامتر برای دستورات ارسال کنید . 

همچنین می توانید فایلهای مختلفی را بطور جداگانه تولید کنید ، مانند این:

php artisan crud:controller PostsController --crud-name=posts --model-name=Post --view-path="directory" --route-group=admin

php artisan crud:model Post --fillable="['title', 'body']"

بعد از تولید CRUD ها میتوانید بقیه اطلاعات مورد نظر را درون کدها وارد کنید که برای آیتم های منو میخواهید . 

مثلا اینکه middleware/roles  چه کاری انجام خواهد داد و ... .

 

Backpack for Laravel

این پکیج یک پروژه بزرگ است . این پکیج فراتر از یک پنل مدیریتی برای لاراول است و ساختار مناسبی برای دیگر پکیج ها دارد .  Base, CRUD, LogManager, BackupManager و غیره ...

سازندگان Backpack ادعا میکنند این پکیج برای پروژه های بزرگ مناسب است . 

علاوه بر تولید کننده ی  CRUD ، دارای CRUDهای از قبل ساخته شده ،  settings, page manager, news manager و menu manager. است . 

همچنین برخی پکیج ها بعنوان افزونه برایش وجود دارد مثلا :‌ logs, backups و خیلی پکیج های دیگر که به سادگی به وب سایت شما اضافه میشود . 

یکی از بدی های این پکیج سخت گیری آن است شما باید تمام عملیات CRUD را در کنترلر خود تعریف کنید کد زیر را ببینید :‌

class TagCrudController extends CrudController {

  public function setup() {
    $this->crud->setModel("App\Models\Tag");
    $this->crud->setRoute("admin/tag");
    $this->crud->setEntityNameStrings('tag', 'tags');

    $this->crud->setColumns(['name']);
    $this->crud->addField([
    'name' => 'name',
    'label' => "Tag name"
    ]);
  }

 

پنل مدیریت SleepingOw۷ Admin 

 

---

مطالب زیر ممکن است برای شما مفید باشد

 دیباگ کردن پروژه های لاراولی با Laravel Debugbar لاراولی کوچک با طعم جدید - میکروفریمورک Lumen احراز هویت با لاراول 6 کدایگنایتر یا لاراول ؟ کدام فریمورک پی اچ پی جانگو یا لاراول ؟ برنامه نویسان وب بخوانند

محصولات برگزیده مناسب شما

 دوره ی آموزش کامل فریمورک لاراول Laravel دوره پروژه محور ساخت فروشگاه بامیلو با لاراول دوره ی طلایی لاراول 6 دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل

پایان 👍

Express.js چیست و چرا انقدر مهمه ؟‌

 

در این مقاله قصد داریم درباره ی express.js بنویسیم و بگیم که چرا در بحث وب مطرح میشه و مهمه ؟‌

Express.js چیست و چرا انقدر مهمه ؟‌

خب express.js همانطور که در سایت خودش نوشته یک فریمورک سریع ، بی درد سر و سبک وزن یا مینیمال برای نود جی اس است .

Fast, unopinionated, minimalist web framework for Node.js

 

به زبان جاوا اسکریپت نوشته شده است و تنها بعنوان یک لایه ی نازک ویژگی های هسته ی وب عمل میکند . بر خلاف فریمورک های بزرگ و پردردسر مثل Ruby on Rails  اکسپرس هیچگونه تمپیلت انجین یا ORM جانبی ندارد . اکسپرس توسط کامپوننت های دیگر ساخته نشده است . 

کار اکسپرس این است که یک ابزاری برای دستان برنامه نویسان وب بسازد که ساخت سایت با Node.js را راحت بکند . 

نصب راحت و محیط کدنویسی خالی با جاوا اسکریپت ، اکسپرس را بهترین گزینه برای توسعه ی سریع و راحت ، میکند . 

express.js بهترین گزینه برای استارتاپ هایی است که میخواهند سریعا یک محصول تولید کنند و زیاد درگیر مسائل پیچیده کدنویسی نشوند . 

بیایید دقیقا express.js را بررسی کنیم و ببینیم که چطور کار میکنه ، خب اول مقاله باید این نکته را بدونید که پیش نیاز  express.js فهمیدن Node.js است . 

محیط Node.js بخشی اساسی برای ساخت و استقرار express.js است . تقریبا میشه گفت Node.js یک مفسر کراس - پلتفرم برای جاوا اسکریپت است  که قادر به اجرای جاوا اسکریپت بصورت نامحدود برای مرورگرهاست . 

در واقع Node.js به جاوا اسکریپت کمک میکند تا بتواند در سمت سرور هم نقش بازی کند و بعنوان یک زبان برنامه نویسی سمت سرور بجای زبان های PHP, Python, Java و ... اانتخاب شود . 

توسط پکیج منیجر نود یا همان npm میتوان express.js را نصب کرد و Node.js از پیش نصب شده را شخصی سازی کرد . 

برنامه نویسان Node.js هزاران کتابخانه ی اوپن سورس به این شکل نوشته اند که میتوانید استفاده کنید . 

این وب سرور ساده را بررسی کنید :‌

server.js
```
var express = require('express');
var app = express();


app.get('/', function(req, res){
           res.send('<h1>Hello World!</h1>');
});


app.listen(8000);
```

 

توسط چند خط ساده شما میتوانید یک سرور درست کنید و به مرورگر بگید در ادرس  localhost:۸۰۰۰ بهش دسترسی داشته باش !

با آمدن جاوا اسکریپت به سمت سرور ، توسعه دهندگان وب از دو راه سودبری میکنند :

1. تک زبانه شدن کل وب سایت ( بک اند و فرانت اند ) با جاوا اسکریپت در زمان توسعه وب بسیار صرفه جویی میکند .
   براساس نظرسنجی سایت استک اور فلو در سال 2017  جاوا اسکریپت بیشترین کاربرد را در بین زبان های برنامه نویسی وب دارد و همچنین جاوا اسکریپت در حال رشد سریع است همانطور که فریمورک های سمت فرانت اند مثل vue.js , Angular.js و React.js رشد سریع و خوبی داشتند . وقتی شما با جاوا اسکریپت کدنویسی میکنید در حقیقت روی یک زبان اساسی کدنویسی میکنید که اکثر برنامه نویس ها آنرا میفهمند . جاوا اسکریپت محبوب ترین تکنولوژی توسعه ی وب است پس همیشه جامعه ی اطراف آن شلوغ است و مخاطبان زیادی دارد . یکی شدن زبان برنامه نویسی فرانت اند و بک اند سایت شما اول اینکه باعث خلاقیت تیم شما و بعد باعث صرفه جویی در وقت و هزینه ها خواهد شد . 
2. مزیت بعدی یک زبان non-blocking event-driven هست فکر کنید یک ترافیک فله ای روی سرور اتفاق بیوفتد ، جاوا اسکریپت بخونی میتواند با استفاده از یک ترد واحد event loop ، ترافیک همزمان را کنترل کند . اساسا جاوااسکریپت برای سایت های شلوغ و پرترافیک بهتر است . وقتی یک درخواستی برای دسترسی به یک منبعی به هر دلیلی از بین میرود جاوااسکریپت منتظرش نمی ماند و به کارهای دیگر خود میرسد . جاوا اسکریپت زمانی که نتیجه ی درخواست آمد به آن میبپردازد . همه ی این کارها روی پردازش یک نخ یا ترد انجام میگیرد و به همین دلیل باعث میشود node.js هم منابع سروری کمتری نیاز داشته باشد . 

 

خب express.js چطور در همه ی این موارد کاربرد دارد ؟‌ express.js تمام ابزارهای مورد نیاز برای کار با یک سرور مبتنی بر HTTP را در اختیار توسعه دهنده های وب قرار میدهد . 

Node  یک محیط است این یک چیز اساسی است . Express هر آنچه که برای ورود و خروج داده ها روی سرور نیاز باشد در اختیارتان قرار میدهد ولی موارد زیر را شامل نمیشود :‌

 

• object relational mapping
• database
•  templating engine

 

قابلیت های اکسپرس به توسعه دهنده های وب آزادی میدهد ، express.js تنها یک ماژول برای Node.js نیست و شما میتوانید هر کامپوننت مورد نیاز را به آن اضافه کنید . به جای اینکه در یک قالب و سبکی ثابت بمانید express.js با موارد زیر میتواند تعامل داشته باشد و همکاری کند :‌

•  Handlebar.js
• Jade
• ejs
• و خیلی موارد دیگر ...

به راحتی شما میتوانید با یک کامپوننت template کار کنید و سپس express خود را به یک سرور API تبدیل کنید . خروجی چیزی نخواهد بود جز JSON 

 

با ذخیره سازی داده ها توسط express نیز از آزادی بهره مند خواهید شد . شما میتوانید از یک ماژول Node به نام Mongoose استفاده کنید و میتوانید express خود را به MongoDB وصل کنید ! 

ضمنا شما میتوانید به Redis, SQL, Postgres  هم وصل شوید . 

خب شما اینجا آزادی دارید که کدام دیتابیس را برای کارهای خود انتخاب کنید چیزی که مناسب هست را انتخاب کنید برخلاف فریمورکی مثل Django که با پایگاه داده ی غیر رابطه ای مثل MongoDB کار نمیکند ، برای این مورد راه حل وجود دارد ولی پشتیبانی رسمی مهم است . 

 

توسعه دهندگان میتوانند express را دقیقا بر اساس نیاز خودشان شخصی سازی بکنند . میتوانند کامپوننت های اضافی را حذف یا کامپوننت های مورد نیاز جدیدی را اضافه کنند . 

شما تقریبا میتوانید هر چیزی را تولید کنید از یک سرور محتوای ثابت گرفته تا  RESTful APIs  برای فریمورک های Model-View-Controller (MVC) 

 

 

جمع بندی و خلاصه ی نوشته های بالا :‌

 

خب پس فهمیدیم که Express.js یک فریمورک برای اپلیکیشن های تحت وب است که API ساده ای برای ساخت وب سایت ها ، وب اپلیکیشن ها و بک اند ها است . 

با ExpressJS دیگر نیاز نیست نگران پروتکل های سطح پایین ، پردازش ها و ... باشید . 

 

Express چیست ؟‌ 

 

Express یک interface مینیمال برای ساخت اپلیکیشن های ما فراهم میکند . برای ما ابزارهایی را فراهم میکند که برای ساخت اپ های خود نیاز داریم . 

بسیار انعطاف پذیر است و ماژول های فراوانی برایش روی npm وجود دارد که مستقیما میتوانید انها را در  Express  وارد کنید . 

Express توسط  TJ Holowaychuk توسعه داده شده است و توسط Node.js نگهداری و پشتیبانی میشود . 

 

چرا Express ؟‌

 

بر خلاف رقبایش مثل Rails و Django که روش های خاصی دارند و مستبد هستند Express هیچ روشی را بعنوان بهترین روش پیشنهاد نمیکند . Express بسیار انعطاف پذیر و ماژولار است . 

 

Pug

 

Pug که قبلا با اسم Jade شناخته میشد یک زبان دقیق برای نوشتن قالب های HTML است . 

• تولید HTML
• پشتیبانی از کد dynamic
• پشتیبانی مجدد از قابلیت استفاده (DRY)
•  

این یکی از محبوب ترین زبان قالب است که با Express استفاده می شود.

 

MongoDB و Mongoose

MongoDB یک پایگاه داده ، اوپن سورس ، مقیاس پذیر و document database هست که برای توسعه راحت ساخته شده است . 

همچنین برای ذخیره سازی اطلاعات استفاده میشود 

Mongoose یک API برای کلاینت node.js است که دسترسی پایگاه داده توسط Express را راحت تر میکند . 

 

 

تمام 

 

 

---

مطالب زیر ممکن است برای شما مفید باشد

 چرا باید از Node.js استفاده کنیم ؟‌ ( بررسی کلی ) تگ های header را در سئو سایت دست کم نگیرید رادیو صفر و یک - پادکست شماره ی 9 ام - اینترنت بی اینترنت رادیو صفر و یک - پادکست شماره ی 3 ام - شرکت جت برینز و محصولاتش برای برنامه نویسان رادیو صفر و یک - پادکست شماره ی 5 ام - دیپ فیک چیست ؟‌ آخرین مرز میان حقیقت و دروغ

محصولات برگزیده مناسب شما

 کارگاه آموزشی نحوه ی آپدیت ورژن فریمورک laravel کارگاه آموزش کار با API های اینستاگرامی دوره ی آموزش ساخت اپ گالری تصاویر آنلاین با کاتلین کارگاه آموزشی کار با Grunt js

پایان 👍

دیباگ کردن پروژه های لاراولی با Laravel Debugbar

برای هر توسعه دهنده ی وب نیاز است که کار با فریمورک لاراول که محبوب ترین فریمورک زبان برنامه نویسی php هست را یاد بگیرد

یکی از نیازهای اصلی در توسعه ی وب دیباگ کردن آن است تا روند توسعه هم سرعت بیشتری بگیرد و هم کار برنامه نویس راحت تر شود . 

Laravel Debuger توسط Barry vd. Heuvel ساخته شده است این پکیج به شما اجازه میدهد که تب هایی برای دیباگ کردن پروژه در حین کدنویسی یک سایت داشته باشید.  

Debugbar package  یکی از اساسی ترین پکیج های فریمورک لاراول است . 

لاراول دیباگر برای اخرین نسخه ی لاراول ۵ بروزرسانی شده است و من در این مقاله قصد دارم که ویژگی های بارز این پکیج را به شما بازگو کنم . 

 

آموزش نصب کردن دیباگر لاراول یا Laravel Debugger

 

نصب کردن دیباگر لاراول بسیار ساده است . از طریق کامپوزر یا composer میتوانید این پکیج را نصب کنید 

 

composer require barryvdh/laravel-debugbar

 

سپس در لاراول به مسیر config/app.php بروید و به ارایه ی providers خط زیر را اضافه کنید :‌

 

'Barryvdh\Debugbar\ServiceProvider',

 

در نهایت کد زیر را به آرایه aliases اضافه کنید ( اگر میخواهید Facade را اضافه کنید)  :‌

 

'Debugbar' => 'Barryvdh\Debugbar\Facade',

حالا تا زمانی که اپلیکیشن شما در حالت debug mode  باشد دیباگر برای شما لود میشود و اطلاعات مفیدی در اختیار شما میگذارد . 

 

آشنایی با debugbar

 

شما میتوانید به رابط کاربری laravel debuger در عرض چند دقیقه مسلط شوید که بسیار قدرتمند است . بیایید تمام تنظیمات پیشفرض را بررسی کنیم . 

 

بخش Messages

 

Messages بخش ویژه ای است و تنها در صورتی فراخوانی میشود که facade را لود کرده باشید

Debugbar::info($object);
Debugbar::error('Error!');
Debugbar::warning('Watch out…');
Debugbar::addMessage('Another message', 'mylabel');

 

بخش messages یا تب messages شامل PSR-۳ ها میشود (debug, info, notice, warning, error, critical, alert, emergency)

 

بخش Timeline

این بخش برای جلوگیری از رخداد bottlenecks بسیار کاربردی است . در زیر کد مثالی برای این بخش را میبینید :‌

 

Debugbar::startMeasure('render','Time for rendering');
Debugbar::stopMeasure('render');
Debugbar::addMeasure('now', LARAVEL_START, microtime(true));
Debugbar::measure('My long operation', function() {
// Do something…
});

 

بخش Exceptions 

 

تب بعدی یک لاگر برای exception ها است که میتوانید از طریق کد زیر یک لاگ به بخش exceptions بفرستید 

try {
  throw new Exception('foobar');
} catch (Exception $e) {
  Debugbar::addException($e);
}

 

بخش Views 

 

بخش Views تمپلیت های لود شده برای بخش رابط کاربری به همراه پارامترهایی که در آن بخش وجود دارد برای شما نمایش میدهد 

این بخش بسیار کاربردی است مخصوصا زمانی که ویو های زیاد با پارامترهای زیادی دارید و توسط این بخش از ارسال پارامترهای لازم به ویو مطمئن میشوید

 

بخش Route 

 

در لاراول میشه گفت همه چیز به route ها ربط داره و این بخش به شما route ها را نشان میده . یو آر ال ها ، کنترلرها ، مسیر فایل ها و namespace ها .

 

بخش Queries

 

Querie ها بخش مهمی از تمام اپلیکیشن های لاراولی است . ممکن است کوئری های زیادی داشته باشید و باعث بی نظمی و سردرگمی شود . 

برای مثال من در یک سیستم فروشگاهی با لاراول کار میکردم و بعد از اینکه داده ها را در فروشگاه اعمال میکردم بالای ۲۰ ثانیه طول میکشید ولی بخش Queries به من کمک کردم تا بفهمم مشکل درج یا واکشی اطلاعات در پایگاه داده کجاست .

 

بخش Mail and Request

این دو برای هر چیزی که به ایمیل مربوط میشود درون خود دارند . 

 

Folder Icon

شما یک آیکون به شکل پوشه میبینید با کلیک کردن روی آن درخواست های اخیر را مثل تصویر بالا مشاهده میکنید .

 

خب به پایان این مقاله رسیدیم و در این مقاله ما فقط سعی داشتیم امکانات اساسی laravel debugger  را خدمت شما معرفی کنیم . 

امکانات دیگری در laravel debugger هست مثل  twig integration, enabling/disabling at runtime, و bridge collectors .

خب در نهایت اگر اطلاعات بیشتری لازم دارید میتوانید از این لینک به مستندات اصلی این پکیج مراجعه کنید . 

ضمنا من استفاده از این پکیج را شدیدا پیشنهاد میکنم 

 

تمام .

---

مطالب زیر ممکن است برای شما مفید باشد

 چند داشبورد مدیریتی آماده برای لاراول احراز هویت با لاراول 6 لاراولی کوچک با طعم جدید - میکروفریمورک Lumen کدایگنایتر یا لاراول ؟ کدام فریمورک پی اچ پی جانگو یا لاراول ؟ برنامه نویسان وب بخوانند

محصولات برگزیده مناسب شما

 دوره پروژه محور ساخت فروشگاه بامیلو با لاراول دوره ی آموزش کامل فریمورک لاراول Laravel دوره ی طلایی لاراول 6 دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل

پایان 👍

در نسخه ی 6 لاراول چه چیزی اضافه شده است ؟‌

همانطور که میدانید لاراول محبوب ترین فریمورک زبان برنامه نویسی php است که برای ساخت انواع وب سایت ها کاربرد دارد . 

هم اکنون نسخه ی ۶ ام این فریمورک بصورت LTS یا پشتیبانی بلند مدت منتشر شده است . 

شما میتوانید بصورت رایگان نسخه ی ۶ لاراول را تهیه و استفاده کنید . نسخه ی جدید لاراول هم اکنون در گیتهاب این فریمورک موجود است که در لینک زیر میتوانید مشاهده کنید :‌ 

نسخه ی جدید لاراول در گیتهاب

این نسخه از لاراول با Laravel Vapor سازگاری دارد . همچنین در این نسخه موارد زیر بهبود داشته است :‌

 

• authorization responses
• job middleware
• lazy collections
• sub-query improvements
• و خیلی بهبودی های دیگر

 

در ادامه توضیحات بیشتری در مورد بروزرسانی های جدید در لاراول نسخه ی ۶ میپردازیم . با ما همراه باشید

 

نسخه ی ۶ لاراول جدید ترین نسخه ی LTS یا نسخه با پشتیبانی بلند مدت است .

این نسخه از لاراول تا تاریخ ۳ سپتامبر ۲۰۲۱ پشتیبانی رفع باگ ها را خواهد داشت و همچنین تا تاریخ ۳ سپتامبر ۲۰۲۲ پشتیبانی امنیتی خواهد داشت .

 

نسخه ی قبلی با پشتیبانی بلند مدت نسخه ی ۵,۵ لاراول بود که تا تاریخ ۳۰ آگوست ۲۰۲۰ دارای پشتیبانی امنیتی است . 

در جدول زیر اطلاعات نسخه های مختلف و تاریخ انقضا ی آنها را مشاهده میکنید . 

 

 

استفاده از سیستم شماره گذاری Semantic Versioning

 

از نسخه ی ۶,۰ به بعد لاراول قراره شماره گذاری نسخه های مختلف لاراول با سیستم Semantic Versioning باشه .

استفاده از سیستم Semantic Versioning باعث میشه که لاراول با نسخه های مختلف پکیج های دیگر سازگاری داشته باشه

البته با استفاده از سیستم شماره گذاری جدید چرخه انتشار لاراول بدون تغییر باقی خواهد ماند. 

 

صفحه ی خطای جدید به نام Ignition

در نسخه ی ۶ لاراول از Ignition استفاده شده است که یک صفحه خطا گیری اوپن سورس برای لاراول است و متفاوت تر از صفحه ی خطایابی لاراول های قبلی است :

بهبود احراز هویت کاربران 

 

قبلا یعنی در نسخه های قبلی لاراول کمی مشکل بود تا پیام های اختصاصی به کاربرانی که قصد دارند عمل احراز هویت را انجام دهند نمایش داده شود . در نسخه ی ۶ لاراول Gate::inspect  معرفی شده است یک متد که برای احراز هویت کمک میکند :‌

 

$response = Gate::inspect('view', $flight);

if ($response->allowed()) {
    // User is authorized to view the flight...
}

if ($response->denied()) {
    echo $response->message();
}

 

Job Middleware 

 

این یک فیچر جدید است که توسط Taylor Otwell ساخته شده است و کارش مدیریت درخواست ها درون میدلور هاست 

کد زیر را ببینید :‌

// Add a middleware method to a job class
public function middleware()
{
     return [new SomeMiddleware];
}

// Specify middleware when dispatching a job
SomeJob::dispatch()->through([new SomeMiddleware]);

 

Lazy Collections

Lazy Collections در مجموعه ی گسترده ای از داده ها نقش بازی میکند که شامل مدل های Eloquent میشود .

کلاس جدیدی برای این مورد در لاراول اضافه شده است که اینجاست Illuminate\Support\LazyCollection

این کلاس به بهبود عملکرد حافظه در حین کار با داده های بزرگ یا حجیم کمک میکند . 

در مورد این کلاس میتوانید در داکیومنت خود لاراول بخوانید . برای مشاهده ی Lazy Collection در مستندات لاراول اینجا کلیک کنید .

 

Eloquent Subquery Enhancements

این ویژگی جدید کوئری نویسی در الکوئنت را راحت تر کرده است و ابزارهای جدید اضافه کرده که میتوانید در مستندات و آموزش ها درباره ی subquery های eloquent بخوانید . 

 

Laravel UI

scaffolding فرانت اند که در نسخه های ۵ لاراول ارائه میشد الان داخل یک پکیج جدا ارائه شده است که از طریق کامپوزر قابل دسترسی است . لینک در گیتهاب 

اگر شما میخواهید از فریمورک های سنتی مثل Bootstrap/Vue/ scaffolding استفاده کنید میتوانید از کد زیر کمک بگیرید :

 

composer require laravel/ui
php artisan ui vue --auth

 

خب تقریبا میشه گفت چیزایی جدیدی که نسبت به نسخه های ۵ لاراول در نسخه ی ۶ اضافه شده همینا بودن - مطمئنا از نظر امنیت هسته و از نظر کمی باگها هم روی این فریمورک بیشتر کار شده و پیشنهاد میشه که به این نسخه سوئیچ کنید  . 

 

تمام 

---

مطالب زیر ممکن است برای شما مفید باشد

 کدایگنایتر یا لاراول ؟ کدام فریمورک پی اچ پی بررسی اپلیکیشن دیجی کالا - کشف زبان برنامه نویسی این اپلیکیشن کدام فریمورک PHP ؟ انتشار پروژه ی لاراولی روی هاست های اشتراکی جانگو یا لاراول ؟ برنامه نویسان وب بخوانند

محصولات برگزیده مناسب شما

 دوره ی آموزش ساخت فریمورک برای پی اچ پی با PHP MVC دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل دوره ی طلایی لاراول 6 دوره ی آموزش کامل زبان پی اچ پی ( PHP )

پایان 👍

برنامه نویسی سوکت در جاوا

برنامه نویسی سوکت در زبان جاوا زمانی کاربرد دارد که دو اپلیکیشن نوشته شده در دو JRE متفاوت بخواهند با همدیگر ارتباط برقرار کنند . 

این ارتباط میتواند ارتباط-گرا باشد یا اصلا نباشد . جلوتر بیشتر توضیح میدیم . 

در کل سوکت نویسی یا برنامه نویسی سوکت برای برقرار کردن ارتباط یک کلاینت با یک سرور مورد استفاده قرار میگیرد . 

در این مقاله ی آموزشی من سعی میکنم کلا درباره ی برنامه نویسی سوکت یا سوکت پروگرمینگ باهاتون صحبت کنم .

موضوعات زیر در این مقاله پوشش داده میشود :‌

 

• برنامه نویسی سوکت در زبان جاوا چیست ؟‌
• سوکت در زبان جاوا چیست ؟‌
• برنامه نویسی کلاینت یک سوکت
• برنامه نویسی یک سوکت سرور

 

برنامه نویسی سوکت در زبان جاوا چیست ؟‌

سوکت پروگرمینگ یا برنامه نویسی سوکت روشی است که توسط آن میتوان دو عدد node را در یک شبکه به هم دیگر متصل کرد و اطلاعات بین آنها مبادله کرد . یک سوکت ( یا همان node ) روی یک ip و یک port مشخص تمرکز میکند . سوکت های دیگر نیز برای خود همین موارد مشخص را دارند تا بتوانند با همدیگر یک اتصال ایجاد کنند . 

زمانی که درخواست کلاینت به سرور میرسد . سوکت سرور یک listener سوکت را فراهم میکند . کلاس های سوکت و سوکت سرور برای برنامه نویسی ارتباط گرا استفاده میشوند . 

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

 

سوکت در زبان جاوا چیست ؟‌

یک سوکت در زبان برنامه نویسی جاوا بعنوان یک endpoint یا نقطه ی پایانی برای پیوند ارتباطی دو طرفه  بین دو برنامه در یک شبکه است . 

هر سوکت به یک شماره پورت محدود شده است پس لایه ی TCP میتواند بفهمد کدام برنامه چه چیزی را میخواهد ارسال کند . 

 

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

Socket که یک طرف ارتباط دو طرفه ی بین برنامه ی جاوایی شما و برنامه ی دیگر که درون یک شبکه قرار دارند را فراهم میکند . 

کلاس مورد نظر در بالاترین بخش پیاده سازی قرار میگیرد و جزئیات هر سیستم خاص را از برنامه جاوا شما مخفی می کند.

با استفاده از این کلاس و عدم تکیه بر کدنویسی دستی  برنامه ی جاوایی شما میتواند بصورت platform-independent بر روی شبکه کار کند . 

 

حالا ما فهمیدیم که  سوکت در زبان جاوا یعنی چی ! حالا بریم سراغ اینکه چطور یک کلاینت و یک سرور بسازیم که کلاینت درخواستش را به سمت سرور ارسال کند و سرور پاسخ لازم را بدهد . 

 

برنامه نویسی سمت کلاینت در سوکت 

در سمت کلاینت ابتدا کلاینت باید منتظر بماند تا سرور استارت شود  زمانی که سرور آماده ی کار بود کلاینت یک درخواستی را به سمت سرور ارسال خواهد کرد . 

بعد از آن کلاینت منتظر میماند تا پاسخ سرور را دریافت بکند . خب این منطق اصلی پیاده سازی سمت کلاینت بود اما بیایید کمی جزئی تر وارد بحث برنامه نویسی سمت کلاینت و سمت سرور برای سوکت بشیم . 

برای پیاده سازی درخواست کلاینت باید قدم های زیر را طی کنید :‌

1. ایجاد یک اتصال 
   
   اولین قدم ایجاد یک اتصال سوکت است . اتصال سوکت بین دو عدد ماشین به اطلاعات آنها بستگی دارد باید IP آدرس همدیگر و پورت TCP همدیگر را بدانند.
   شما با خط کد زیر میتوانید یک سوکت ایجاد کنید 

   Socket socket = new Socket(“127.0.0.1”, 5000)​

   در این تکه کد اولین آرگومان نشان دهنده ی IP مربوط به سرور سوکت است و دومین پورت TCP است که در مثال بالا عدد ۵۰۰۰ است.
    

2. تبادل اطلاعات 
   
   به منظور تبادل اطلاعات در یک اتصال سوکت از stream ها برای دریافت و ارسال اطلاعات استفاده میشود . پس از برقراری اتصال و ارسال درخواست ها ، باید ارتباط را ببندید.
    
3. بستن ارتباط
   
   
   اتصال سرور بصورت یک پیام واضح به سرور ارسال میشود و سپس ارتباط قطع میشود . 

خب حالا با هم دیگر کدهای نوشته شده با زبان جاوا برای برقراری سوکت در سمت کلاینت را میبینیم ‌ :‌

// A Java program for a ClientSide
import java.net.*;
import java.io.*;
public class ClientProgram
{
// initialize socket and input output streams
private Socket socket = null;
private DataInputStream input = null;
private DataOutputStream out = null;
// constructor to put ip address and port
public Client(String address, int port)
{
// establish a connection
try
{
socket = new Socket(address, port);
System.out.println("Connected");
// takes input from terminal
input = new DataInputStream(System.in);
// sends output to the socket
out = new DataOutputStream(socket.getOutputStream());
}
catch(UnknownHostException u)
{
System.out.println(u);
}
catch(IOException i)
{
System.out.println(i);
}// string to read message from input
String line = "";
// keep reading until "Over" is input
while (!line.equals("Over"))
{
try
{
line = input.readLine();
out.writeUTF(line);
}
catch(IOException i)
{
System.out.println(i);
}
}
// close the connection
try
{
input.close();
out.close();
socket.close();
}
catch(IOException i)
{
System.out.println(i);
}
}
public static void main(String args[]) {
Client client = new Client("127.0.0.1", 5000);
}
}

 

خب حالا وقت این رسیده که بریم سمت سرور و ببینیم که در برنامه نویسی سوکت با جاوا چطور میتوانیم سمت سرور را پیاده سازی کنیم . 

 

برنامه نویسی سمت سرور سوکت یا سوکت سرور 

 

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

برای کدنویسی اپلیکیشن سمت سرور نیاز به دو سوکت است که به شرح زیر است :‌
 

1. یک ServerSocket که منتظر کلاینت میماند ( زمانی که کلاینت Socket() جدید میسازد )
2. یک سوکت قدیمی ساده برای برقراری ارتباط با کلاینت

 

بعد از اینها شما نیاز است که پاسخ سمت سرور را به کلاینت بفرستید تا کلاینت هم متوجه شود که ارتباط برقرار است . 

 

تبادل اطلاعات 

 

متد getOutputStream برای ارسال خروجی از طریق سوکت استفاده میشود . 

 

قطع ارتباط سوکت 

 

خیلی مهم است بعد از تمام شدن کارتان ارتباط را قطع کنید 

 

در زیر کدهای سمت سرور یک سوکت که با زبان جاوا نوشته شده است بعنوان مثالی آورده شده که میتوانید استفاده کنید :‌

 

// A Java program for a Serverside
import java.net.*;
import java.io.*;
public class ServerSide
{
//initialize socket and input stream
private Socket socket = null;
private ServerSocket server = null;
private DataInputStream in = null;
// constructor with port
public Server(int port)
{
// starts server and waits for a connection
try{
server = new ServerSocket(port);
System.out.println("Server started");
System.out.println("Waiting for a client ...");
socket = server.accept();
System.out.println("Client accepted");
// takes input from the client socket
in = new DataInputStream(
new BufferedInputStream(socket.getInputStream()));
String line = "";
// reads message from client until "Over" is sent
while (!line.equals("Over"))
{
try
{
line = in.readUTF();
System.out.println(line);
 
 
 
}
catch(IOException i)
{
System.out.println(i);
}
}
System.out.println("Closing connection");
// close connection
socket.close();
in.close();
}
catch(IOException i){
System.out.println(i);
}
}
public static void main(String args[]){
Server server = new Server(5000);
}
}

 

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

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

 

۱ - زمانیکه شما اسکریپت سمت سرور را اجرا میکنید سوکت اجرا میشود و منتظر کلاینت باقی می ماند تا کار خود را شروع کند .

 

 

۲- سپس کلاینت به سرور متصل میشود و درخواست خود را بصورت رشته ارسال میکند 

 

 

۳- بعد از اینکه کلاینت یک درخواستی به سمت سرور ارسال کرد سرور به کلاینت پاسخ مناسب را ارائه میدهد 

 

 

اینکه چطور سوکت نویسی یا برنامه نویسی سوکت را با جاوا انجام دهید را یاد گرفتید . همچنین شما میتوانید از برنامه را روی ترمینال یا command prompt اجرا کنید ولی در Eclipse هم میتوانید در ترمینال درونی نتیجه را ببینید 

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

تمام  

---

مطالب زیر ممکن است برای شما مفید باشد

 آموزش کامل کار با Retrofit 2.x بعنوان یک کلاینت REST طراحی های پیچیده اپلیکیشن های اندرویدی با Constraint Layout بررسی اپلیکیشن دیجی کالا - کشف زبان برنامه نویسی این اپلیکیشن مقایسه بین react Native و Kotlin رادیو صفر و یک - پادکست شماره ی 9 ام - اینترنت بی اینترنت

محصولات برگزیده مناسب شما

 دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل دوره ی آموزش ساخت اپ گالری تصاویر آنلاین با کاتلین دوره ی آموزش لینوکس اوبونتو کارگاه آموزش کار با API های اینستاگرامی

پایان 👍

آموزش ساخت اسلایدر تصاویر اپ اندرویدی با زبان Kotlin

آموزش ساخت اسلایدر تصاویر در اپ اندرویدی با زبان kotlin . 

 

• سورس کد به انتهای آموزش اضافه شد . 

 

در این مقاله ی آموزشی قصد داریم یک اسلایدر تصاویر بسازیم که از viewpager استفاده خواهیم کرد البته زبان برنامه نویسی ما زبان برنامه نویسی جدید کاتلین است . 

ما از indicator یا نقاط مشخص کننده برای اسلایدهای خود استفاده خواهیم کرد تا هم کاربر متوجه شود چند اسلاید وجود دارد و همچنین در کدام اسلاید است . 

 

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

 

 

1 - قدم اول ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن وابستگی های مورد نیاز 

 

ما از کتابخانه ی ViewPagerIndicator برای این پروژه استفاده خواهیم کرد  . 

 

خط های زیر را به فایل build.gradle(Module:app) خود اضافه کنید و سپس sync بزنید : 

 

compile ('com.github.JakeWharton:ViewPagerIndicator:2.4.1')  {
        exclude group: 'com.android.support'
        exclude module: 'appcompat-v7'
        exclude module: 'support-v4'
    }

 

2 - قدم دوم ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن تصاویر  

 

چند عدد تصویر نیاز داریم تا به اسلایدر خودمان اضافه کنیم . ما شش عدد تصویر در یک فایل زیپ شده قرار دادیم تا بتوانید سریع دانلود و از انها استفاده کنید . 

 

دانلود تصاویر مورد نیاز 

 

شما باید این تصاویر را در پوشه ی drawable اندروید خود وارد کنید . 

مسیر پوشه ی drawable را در تصویر زیر میتوانید ببینید : 

 

3 - قدم سوم ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن کلاس مدل 

 

خب حالا نیاز به یک کلاس مدل داریم که ایجاد میکنیم . یک کلاس جدید از نوع کاتلین ایجاد کنید و نام آنرا ImageModel.kt بزارید و کدهای زیر را داخلش کپی کنید : 

 

/**
 * Created by avasam
 */
class ImageModel {
 
    private var image_drawable: Int = 0
 
    fun getImage_drawables(): Int {
        return image_drawable
    }
 
    fun setImage_drawables(image_drawable: Int) {
        this.image_drawable = image_drawable
    }
}

 

4 - قدم چهارم ساخت اسلایدر اپ اندرویدی - ساخت layout یک اسلاید 

 

یک layout جدید بسازید و نام آنرا slidingimages_layout.xml  قرار دهید سپس کدهای زیر را درون آن کپی کنید 

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="1dip" >
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop" />
</FrameLayout>

 

5 - قدم پنجم ساخت اسلایدر اپ اندرویدی با کاتلین - ساخت کلاس آداپتر

 

کلاس آداپتر وظیفه دارد داده ها را به viewpager تحویل دهد . 

یک کلاس جدید کاتلین بسازید و نام آنرا SlidingImage_Adapter.kt قرار دهید . 

کدهای زیر را درون آداپتر کپی کنید : 

 

import android.content.Context
import android.os.Parcelable
import android.support.v4.view.PagerAdapter
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import java.util.ArrayList
 
/**
 * Created by avasam
 */
class SlidingImage_Adapter(private val context: Context, private val imageModelArrayList: ArrayList<ImageModel>) : PagerAdapter() {
    private val inflater: LayoutInflater
 
 
    init {
        inflater = LayoutInflater.from(context)
    }
 
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }
 
    override fun getCount(): Int {
        return imageModelArrayList.size
    }
 
    override fun instantiateItem(view: ViewGroup, position: Int): Any {
        val imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false)!!
 
        val imageView = imageLayout
                .findViewById(R.id.image) as ImageView
 
 
        imageView.setImageResource(imageModelArrayList[position].getImage_drawables())
 
        view.addView(imageLayout, 0)
 
        return imageLayout
    }
 
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view == `object`
    }
 
    override fun restoreState(state: Parcelable?, loader: ClassLoader?) {}
 
    override fun saveState(): Parcelable? {
        return null
    }
 
}

 

6 - قدم ششم ساخت اسلایدر اپ اندرویدی با زبان کاتلین - بروزرسانی اکتیویتی اصلی یا MainActivity.kt

 

فایل layout مربوط به اکتیویتی اصلی برنامه یا همان activity_main.xml را باز کنید و کدهای زیر را درون آن کپی کنید ( کدهای قبلی را پاک کنید ) : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    tools:context="com.example.avasam.kotlin_image_slider.MainActivity">
 
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
 
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true" />
 
        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:gravity="bottom"
            android:padding="10dip"
            app:centered="true"
            app:fillColor="#df0623"
            app:pageColor="#fff"
            app:snap="false" />
    </RelativeLayout>
</RelativeLayout>

 

حالا کدهای درون MainActivity.kt باید به شکل زیر باشد : 

 

import android.os.Handler
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.viewpagerindicator.CirclePageIndicator
import java.util.ArrayList
import java.util.Timer
import java.util.TimerTask
 
class MainActivity : AppCompatActivity() {
    private var imageModelArrayList: ArrayList<ImageModel>? = null
 
    private val myImageList = intArrayOf(R.drawable.harley2, R.drawable.benz2, R.drawable.vecto, R.drawable.webshots, R.drawable.bikess, R.drawable.img1)
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        imageModelArrayList = ArrayList()
        imageModelArrayList = populateList()
 
        init()
 
    }
 
    private fun populateList(): ArrayList<ImageModel> {
 
        val list = ArrayList<ImageModel>()
 
        for (i in 0..5) {
            val imageModel = ImageModel()
            imageModel.setImage_drawables(myImageList[i])
            list.add(imageModel)
        }
 
        return list
    }
 
    private fun init() {
 
        mPager = findViewById(R.id.pager) as ViewPager
        mPager!!.adapter = SlidingImage_Adapter(this@MainActivity, this.imageModelArrayList!!)
 
        val indicator = findViewById(R.id.indicator) as CirclePageIndicator
 
        indicator.setViewPager(mPager)
 
        val density = resources.displayMetrics.density
 
        //Set circle indicator radius
        indicator.setRadius(5 * density)
 
        NUM_PAGES = imageModelArrayList!!.size
 
        // Auto start of viewpager
        val handler = Handler()
        val Update = Runnable {
            if (currentPage == NUM_PAGES) {
                currentPage = 0
            }
            mPager!!.setCurrentItem(currentPage++, true)
        }
        val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)
 
        // Pager listener over indicator
        indicator.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {
 
            override fun onPageSelected(position: Int) {
                currentPage = position
 
            }
 
            override fun onPageScrolled(pos: Int, arg1: Float, arg2: Int) {
 
            }
 
            override fun onPageScrollStateChanged(pos: Int) {
 
            }
        })
 
    }
 
    companion object {
 
        private var mPager: ViewPager? = null
        private var currentPage = 0
        private var NUM_PAGES = 0
    }
 
}

 

7 - قدم هفتم در ساخت اسلایدر اپ اندرویدی - نگه داشتن اسلاید خودکار 

 

شاید شما نیاز داشته باشید که اسلاید خودکار یا اسلاید شو اتوماتیک را استاپ کنید . برای این هدف از قطعه کد زیر استفاده کنید : 

 

  // Auto start of viewpager
        val handler = Handler()
        val Update = Runnable {
            if (currentPage == NUM_PAGES) {
                currentPage = 0
            }
            mPager!!.setCurrentItem(currentPage++, true)
        }
        val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)

 

ما از کلاس Timer  استفاده کردیم که برای نمایش مدت زمان هر اسلاید از آن استفاده کنیم . 

زمانی که اسلاید شو اتوماتیک در حال اجرا هست شما میتوانید عمل کشیدن اسلایدر به سمت چپ و راست را داشته باشید. 

در قطعه کد زیر مدت زمان نمایش هر اسلاید سه ثانیه تعریف شده است که شما میتوانید انرا عوض کنید :  منظور همان عدد ۳۰۰۰ است . 

 val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)

 

 

دانلود سورس کد آماده ی این آموزش 

اتمام مقاله آموزشی

---

مطالب زیر ممکن است برای شما مفید باشد

 5 دلیل برای یادگیری کاتلین آموزش کار با آرایه ها در زبان کاتلین اطلاعات مفید کاتلین که نباید از دست بدید آموزش متغیرها در کاتلین ، انواع آنها و تبدیل متغیرها چطور یک برنامه نویس موبایل شوید ؟ (راهنمای کامل)

محصولات برگزیده مناسب شما

 دوره ی آموزش ساخت اپ گالری تصاویر آنلاین با کاتلین دوره آموزش برنامه نویسی اندروید با کاتلین kotlin بصورت پروژه محور دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل دوره ی آموزش لینوکس اوبونتو

پایان 👍

آموزش ساخت سیستم ثبت نام در PHP و پایگاه داده MySQL

سورس کد به انتهای آموزش اضافه شد / دمو ویدیویی به انتهای اموزش اضافه شد 

 

آموزش ساخت سیستم ثبت نام و ورود در PHP و با پایگاه داده MySQL

 

در این مقاله ی آموزشی قراره به شما یاد بدم که با استفاده از PHP چطور میتوانید یک سیستم ثبت نام کاربران بسازید . همچنین کاربر بتواند عمل ورود و خروج را انجام دهد و همچنین یاد بگیریم چطور بخشی از وب سایت را فقط برای کاربرانی که ثبت نام کردن و وارد شدن ، نمایش دهیم . 

در این مقاله از زبان برنامه نویسی PHP و پایگاه داده MYSQL استفاده خواهیم کرد . 

اولین کاری که باید انجام دهید تنظیم کردن یک پایگاه داده است : 

یک پایگاه داده جدید بسازید و نام آنرا registration قرار دهید در این پایگاه داده یک جدول جدید بسازید به نام users . جدول users باید فیلدهای زیر را داشته باشد : 

• id
• username  -  varchar(100)
• email  -  varchar(100)
• password  -  varchar(100)

 

شما میتوانید پایگاه داده و جدول های درون آن و همچنین فیلدهای درون جدول را با استفاده از برنامه PHPMyAdmin بسازید . اگر از XAMPP استفاده میکنید در مرورگرخود به آدرس localhost/phpmyadmin بروید . 

 

بعد از اینکه جدول و فیلد های آنرا ساختید باید مشابه تصویر زیر باشد : 

 

 

اگر قصد دارید بدون استفاده از phpmyadmin و با استفاده از کدهای زبان sql این کار را انجام دهید میتوانید بصورت زیر جدول را بسازید : 

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `username` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

اتمام ساخت پایگاه داده ثبت نام و ورود با PHP - MySQL

 

حالا باید یک دایرکتوری ( فولدر ) جدید بسازیم که مربوط به پروژه ی ما میباشد و قرار است فایل های php ما درون آن قرار بگیرد پس در روت اصلی وب سرور مجازی که استفاده میکنیم ( فرض ما این است که شما از xampp استفاده میکنید ) یک دایرکتوری جدید به نام registration  میسازیم . مسیر اصلی روت در xampp درون پوشه ی htdocs میباشد . 

بعد از ساختن پوشه ی registration فایل های php زیر را درون آن بسازید : 

 

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

• errors.php
• index.php
• login.php
• register.php
• server.php
• style.css

 

دایرکتوری یا پوشه ی پروژه را درون یک ادیتور یا ide وب مثل phpstorme یا sublime یا atom باز کنید . 

 

ثبت نام کاربر با استفاده از PHP و MYSQL

 

فایل  register.php را باز کنید و کدهای زیر را درون آن کپی کنید : 

 

register.php : 

 

<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
  <title>Registration system PHP and MySQL</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="header">
  	<h2>Register</h2>
  </div>
	
  <form method="post" action="register.php">
  	<?php include('errors.php'); ?>
  	<div class="input-group">
  	  <label>Username</label>
  	  <input type="text" name="username" value="<?php echo $username; ?>">
  	</div>
  	<div class="input-group">
  	  <label>Email</label>
  	  <input type="email" name="email" value="<?php echo $email; ?>">
  	</div>
  	<div class="input-group">
  	  <label>Password</label>
  	  <input type="password" name="password_1">
  	</div>
  	<div class="input-group">
  	  <label>Confirm password</label>
  	  <input type="password" name="password_2">
  	</div>
  	<div class="input-group">
  	  <button type="submit" class="btn" name="reg_user">Register</button>
  	</div>
  	<p>
  		Already a member? <a href="login.php">Sign in</a>
  	</p>
  </form>
</body>
</html>

 

تا کنون هیچ چیز پیچیده ای وجود ندارد . 

 

فقط چندتا نکته وجود دارد که باید به آنها توجه کنید : 

اولا که action فرم در کدهای بالا روی فایل register.php میباشد . معنی این بخش این است که وقتی فرم ارسال میشود یا روی ثبت نام کلیک میشود داده های فرم به خود صفحه ی register.php ارسال میشود نه جای دیگری . 

بخشی که وظیفه ی دریافت داده های فرم را دارد در server.php نوشته شده است به همین علت ما در بالای کدهای خود فایل server.php را اینکلود کرد یم . 

توجه کنید که ما فایل errors.php را هم اینکلود کردیم که وظیفه ی نمایش خطاها را دارد ، جلوتر آنرا توضیح خواهیم داد . 

 

در کدهای بالا درون تگ head ما یک فایل استایل به نام style.css را به صفحه ی خودمان لینک کردیم . style.css  شامل کدهای CSS مربوط به استایل صفحه ی ما است . کدهای زیر را درون style.css کپی کنید : 

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 120%;
  background: #F8F8FF;
}

.header {
  width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
form, .content {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}
.input-group {
  margin: 10px 0px 10px 0px;
}
.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}
.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}
.btn {
  padding: 10px;
  font-size: 15px;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
}
.error {
  width: 92%; 
  margin: 0px auto; 
  padding: 10px; 
  border: 1px solid #a94442; 
  color: #a94442; 
  background: #f2dede; 
  border-radius: 5px; 
  text-align: left;
}
.success {
  color: #3c763d; 
  background: #dff0d8; 
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}

 

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

 

خب حالا وقت آن رسیده است داده های ثبت نامی را دریافت کنیم و آنها را در پایگاه داده MYSQL خودمان ذخیره کنیم همانطور که قبلا گفتیم دریافت اطلاعات فرم ثبت نامی را درون فایل server.php انجام خواهیم داد . 

 

فایل server.php را باز کنید و کدهای زیر را درون آن کپی کنید : 

 

<?php
session_start();

// initializing variables
$username = "";
$email    = "";
$errors = array(); 

// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');

// REGISTER USER
if (isset($_POST['reg_user'])) {
  // receive all input values from the form
  $username = mysqli_real_escape_string($db, $_POST['username']);
  $email = mysqli_real_escape_string($db, $_POST['email']);
  $password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
  $password_2 = mysqli_real_escape_string($db, $_POST['password_2']);

  // form validation: ensure that the form is correctly filled ...
  // by adding (array_push()) corresponding error unto $errors array
  if (empty($username)) { array_push($errors, "Username is required"); }
  if (empty($email)) { array_push($errors, "Email is required"); }
  if (empty($password_1)) { array_push($errors, "Password is required"); }
  if ($password_1 != $password_2) {
	array_push($errors, "The two passwords do not match");
  }

  // first check the database to make sure 
  // a user does not already exist with the same username and/or email
  $user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
  $result = mysqli_query($db, $user_check_query);
  $user = mysqli_fetch_assoc($result);
  
  if ($user) { // if user exists
    if ($user['username'] === $username) {
      array_push($errors, "Username already exists");
    }

    if ($user['email'] === $email) {
      array_push($errors, "email already exists");
    }
  }

  // Finally, register user if there are no errors in the form
  if (count($errors) == 0) {
  	$password = md5($password_1);//encrypt the password before saving in the database

  	$query = "INSERT INTO users (username, email, password) 
  			  VALUES('$username', '$email', '$password')";
  	mysqli_query($db, $query);
  	$_SESSION['username'] = $username;
  	$_SESSION['success'] = "You are now logged in";
  	header('location: index.php');
  }
}

// ... 

 

خب ما از Session های php استفاده میکنیم تا متوجه شویم که کاربر عمل لاگین یا ورود را انجام داده است یا نه ! خب به همین خاطر session_start() را نوشتیم . 

کامنت های موجود در کدهای بالا همه چیز را مشخص میکند ولی خب چند نکته ی دیگه هم اینجا باید بدانید 

ما از طریق یک شرط بررسی میکنیم که آیا دکمه ی reg_user  در فرم ثبت نام کلیک شده است یا نه . 

به همین خاطر در فرم خودمان برای دکمه ی ثبت نام خاصیت name تعریف کردیم و مقدار انرا reg_user  قرار دادیم تا قابلیت شناسایی داشته باشد . 

تمام داده های کاربر دریافت میشود و بررسی میشود تا صحت آنها ارزیابی شود . همچنین فیلد پسورها بررسی میشود تا یکسان باشند ( منظور رمز و تکرار رمز است که باید یکسان باشند )

اگر هیچ خطایی رخ ندهد . داده ها درون جدول users در پایگاه داده ذخیره میشود البته پسورد همینطوری ذخیره نمیشود و برای امنیت بیشتر مقدار آن هش یا رمزگذاری میشود . این کار را به این خاطر انجام میدهیم تا اگر حتی هکر به پایگاه داده دسترسی داشت ، پسورد واقعی دستش نرسد ! 

خب حالا اگر خطایی وجود داشته باشد هیچ چیز نمایش داده نخواهد شد چون errors.php  ما خالی است ! برای اینکه خطاها را نمایش دهیم کدهای زیر را کپی و درون فایل errors.php پیست کنید : 

<?php  if (count($errors) > 0) : ?>
  <div class="error">
  	<?php foreach ($errors as $error) : ?>
  	  <p><?php echo $error ?></p>
  	<?php endforeach ?>
  </div>
<?php  endif ?>

 

خب وقتی ثبت نام یک کاربر با موفقیت انجام میگیرد بصورت خودکار عمل لاگین یا ورود هم برای او انجام میگیرد و به صفحه ی index.php ریدایرکت میشود . 

 

خب تا اینجای کار ، ما ثبت نام یک کاربر را بصورت روان با php و mysql انجام دادیم و به همین سادگی تمام شد . حالا بریم سراغ ورود یا لاگین : 

 

ورود کاربر توسط php : 

 

خب حالا بعد از پیاده سازی قسمت ثبت نام رسیدیم به بخش ورود کاربرانی که از قبل ثبت نام را انجام دادن و الان در دیتابیس وجود دارن . 

 

ورود کاربران راحت تر از پیاده سازی ثبت نام آنهاست کدهای زیر را درون فایل login.php کپی کنید : 

 

<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
  <title>Registration system PHP and MySQL</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="header">
  	<h2>Login</h2>
  </div>
	 
  <form method="post" action="login.php">
  	<?php include('errors.php'); ?>
  	<div class="input-group">
  		<label>Username</label>
  		<input type="text" name="username" >
  	</div>
  	<div class="input-group">
  		<label>Password</label>
  		<input type="password" name="password">
  	</div>
  	<div class="input-group">
  		<button type="submit" class="btn" name="login_user">Login</button>
  	</div>
  	<p>
  		Not yet a member? <a href="register.php">Sign up</a>
  	</p>
  </form>
</body>
</html>

 

همانطور که عمل ثبت نام کاربر را درون فایل server.php انجام دادیم ما قصد داریم کدهای عمل ورود را هم درون این فایل بنویسیم 

فایل server.php را باز کنید و کدهای زیر را به انتهای آن اضافه کنید : 

نکته : کدهای قبلی را پاک نکنید فقط کدهای زیر را به انتهای آن کپی کنید و ذخیره کنید 

 

// ... 

// LOGIN USER
if (isset($_POST['login_user'])) {
  $username = mysqli_real_escape_string($db, $_POST['username']);
  $password = mysqli_real_escape_string($db, $_POST['password']);

  if (empty($username)) {
  	array_push($errors, "Username is required");
  }
  if (empty($password)) {
  	array_push($errors, "Password is required");
  }

  if (count($errors) == 0) {
  	$password = md5($password);
  	$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
  	$results = mysqli_query($db, $query);
  	if (mysqli_num_rows($results) == 1) {
  	  $_SESSION['username'] = $username;
  	  $_SESSION['success'] = "You are now logged in";
  	  header('location: index.php');
  	}else {
  		array_push($errors, "Wrong username/password combination");
  	}
  }
}

?>

 

خب اینجا هم فرم پر شده بررسی میشود تا مطمئن شود داده ها بصورت صحیح وارد شده است یا نه ، سپس اطلاعات وارد شده با کاربران موجود در پایگاه داده مقایسه میشود . اگر با مشخصات وارد شده یعنی با ایمیل و رممز ورود شخصی وجود داشت عمل ورود انجام میگیرد و کاربر به صفحه ی index.php ریدایرکت میشود . 

 

خب حالا نوبت این رسیده ببینیم داخل صفحه ی index.php چه چیزی رخ میدهد . فایل index.php را باز کنید و کدهای زیر را درونش کپی کنید : 

<?php 
  session_start(); 

  if (!isset($_SESSION['username'])) {
  	$_SESSION['msg'] = "You must log in first";
  	header('location: login.php');
  }
  if (isset($_GET['logout'])) {
  	session_destroy();
  	unset($_SESSION['username']);
  	header("location: login.php");
  }
?>
<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
	<h2>Home Page</h2>
</div>
<div class="content">
  	<!-- notification message -->
  	<?php if (isset($_SESSION['success'])) : ?>
      <div class="error success" >
      	<h3>
          <?php 
          	echo $_SESSION['success']; 
          	unset($_SESSION['success']);
          ?>
      	</h3>
      </div>
  	<?php endif ?>

    <!-- logged in user information -->
    <?php  if (isset($_SESSION['username'])) : ?>
    	<p>Welcome <strong><?php echo $_SESSION['username']; ?></strong></p>
    	<p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>
    <?php endif ?>
</div>
		
</body>
</html>

 

شرط اول بررسی میکند تا ببیند کاربر آیا قبلا وارد شده است یا نه ، اگر وارد نشده باشد به صفحه ی login هدایت میشود . این شرط را به این دلیل گذاشتیم که این صفحه یا بخش فقط برای کاربرانی قابل دسترسی باشد که عمل ورود را انجام داده باشند  اگر دوست دارید با php کاری کنید بخشی از سایت شما فقط برای اعضا نمایش داده شود اساس کار همین است . 

شرط دوم بررسی میکند تا ببیند کاربر وارد شده آیا روی دکمه ی logout یا خروج کلیک کرده است یا نه ؟ اگر کلیک کرده باشد عمل خروج را انجام میدهد و کاربر را به صفحه ی login هدایت میکند . 

 

و به همین سادگی شما سیستم ثبت نام و ورود را نوشتید تبریک میگوئیم . 

 

 

سورس کد کامل این دوره را میتوانید از اینجا دانلود کنید : 

 

تمام 

 

---

مطالب زیر ممکن است برای شما مفید باشد

 composer چیست و چه کاربردی داره ؟ جانگو یا لاراول ؟ برنامه نویسان وب بخوانند کدایگنایتر یا لاراول ؟ کدام فریمورک پی اچ پی تماس با ما مفاهیم موتور جستجو و آموزش ساخت موتور جستجو با PHP

محصولات برگزیده مناسب شما

 دوره پروژه محور ساخت فروشگاه بامیلو با لاراول دوره ی آموزش کامل زبان پی اچ پی ( PHP ) دوره ی آموزش ساخت فریمورک برای پی اچ پی با PHP MVC دوره ی پروژه محور ساخت هتلداری با php mvc

پایان 👍