ربط نموذج تسجيل الدخول اندرويد مع قاعدة بيانات MYSQL-PHP

بسم الله الرحمن الرحيم

درس قد طلب مني كثيراً ولكن أقوم بتأجيله لكي ننتهي من المستوى المبتدأ ونتقدم خطوة بخطوة, من أجل جميع متابعين المواقع يستطيعون تطبيق جميع الدروس. ولكن كثيراً أحتاجه لذلك قمت بتجهيزه ونشره.

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

فالدرس جداً مفيد ومهم للكثيرون, وبعد انتهاء الدرس أي شخص لديه استفسار في الأسفل في صندوق التعليقات أرحب بجميع المشاكل والاستفسارات وجميعاً نتساعد على حلها.

سوف يبدع في مثل هذه الدروس من لديه خلفية ببرمجة المواقع والتعامل مع لغة php.

سوف نقوم بعمل هذا النموذج عند تسجيل الدخول بنجاح ينقلنا إلى الواجهة الرئيسية للتطبيق.

في البداية يجب أن يكون لديك سيرفر داخلي ( اباتشي ) او أي سيرفر داخلي, لكي ننشأ فيه قاعدة بيانات ونربطها بالتطبيق, ونحاول الاتصال بها لجلب معلومات المستخدم, وسوف نطلب فقط الاسم وكلمة المرور لكي يستطيع تسجيل الدخول.

# تجهيز قاعدة البيانات :

في البداية نقوم بإنشاء قاعدة بيانات, ولنعطيها إسم ( andrody ) وداخلها جدول جديد بإسم (users) وداخل هذا الجدول نقوم بإنشاء حقلين, الاول (username) والثاني (password) , بالتأكيد ليس مقيد بالأسماء ولكن هذا ما سوف نقوم فيه بالدرس لتعرف من أين أتينا بهذه الأسماء إذا رأيتها بالكود.

بعد ذلك نقوم بإنشاء ملف مستند نصي ونضعه داخل ملفات السيرفر الداخلي, هذا الملف بصيغة php وهو الذي يتصل فيه التطبيق ومنه يتصل بقاعدة البيانات.

إذا نقوم بإنشاء ملف وإعطائه اسم (sync.php) ونضع فيه الكود التالي :

<?php
$hostname_localhost ="localhost"; // اتركه كما هو
$database_localhost ="andrody"; // اسم قاعدة البيانات التي قمنا بإنشائها
$username_localhost ="root"; // بين علامات التنصيص ندخل الاسم الخاص للقاعدة او اسم المستخدم للسيرفر الداخلي
$password_localhost =""; // بين علامات التنصيص ندخل كلمة المرور الخاصة بالسيرفر او الخاصة بقاعدة البيانات إذا كنت تستخدمها لموقعك
$localhost = mysql_connect($hostname_localhost,$username_localhost,$password_localhost)
or
trigger_error(mysql_error(),E_USER_ERROR);

mysql_select_db($database_localhost, $localhost);

$username = $_POST['username'];
$password = $_POST['password'];
$query_search = "select * from users where username = '".$username."' AND password = '".$password. "'";
$query_exec = mysql_query($query_search) or die(mysql_error());
$rows = mysql_num_rows($query_exec);
//echo $rows;
 if($rows == 0) { 
 echo "No Such User Found";  // الرسالة الي تظهر في التطبيق - اسفل زر تسجيل الدخول - في حال إذا لم يتم ايجاد اسم المستخدم في القاعدة
 }
 else  {
	echo "User Found";  // الرسالة التي تظهر اسفل زر تسجيل الدخول في حال تم ايجاد اسم المستخدم .. لا تقم بتعديلها إلا اذا فهمتها, فهي مرتبطة برمجياً مع الكود الخاص بك
}
?>

# نقوم الآن بتصميم نموذج تسجيل الدخول :

بالنسبة لنا سوف نعمل على تنسيق مبسط وكما ذكرت سابقاً أنت بنفسك تقوم بصنع النموذج الذي تريد, ولكن ما يهمنا هو فراغ نصي لوضع اسم المستخدم وآخر لكلمة المرور وزر لعملية تسجيل الدخول ونص صغير يظهر النص الذي أتى من الملف المرتبط بقاعدة البيانات.

هذا ما قمت به :

وهذا الكود :

login.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff321419"
    android:orientation="vertical">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="نموذج تسجيل الدخول"
        android:textSize="25sp"
        android:layout_margin="30dp"
        android:textColor="#ffc3c3c3"
        android:layout_gravity="center_horizontal" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="50dp"
        android:padding="20dp"
        android:background="#ffc3c3c3">

        <LinearLayout
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:ems="10"
                    android:layout_gravity="left"
                    android:gravity="right"
                    android:layout_margin="10dp"
                    android:id="@+id/user" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="اسم المستخدم"
                    android:textSize="15sp"
                    android:layout_margin="5dp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical|right" />

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:ems="10"
                    android:layout_gravity="left"
                    android:gravity="right"
                    android:layout_margin="10dp"
                    android:id="@+id/pass" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="كلمة المرور"
                    android:textSize="15sp"
                    android:layout_margin="5dp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical|right" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff8cb2fc">

            <Button
                android:id="@+id/login"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:text="تسجيل الدخول"
                android:layout_gravity="right"
                android:layout_margin="25dp"
                android:paddingRight="15dp"
                android:paddingLeft="15dp"
                android:onClick="onClick"
                android:background="#ffc3c3c3" />

        </LinearLayout>

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="#f00"
            android:gravity="center" />


    </LinearLayout>
</LinearLayout>

 # الكود البرمجي للاكتفتي :

سوف أعرض لكم الكود وأضع عليه سطور التعليقات كما أتمنى ملاحظة المعرفات (id) التي استخدمناها في اللياوت.

Login.java

package com.andrody.testandrodycom;

import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.HttpClient;
import org.apache.http.client.ResponseHandler;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.BasicResponseHandler;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.message.BasicNameValuePair;

import java.util.ArrayList;
import java.util.List;


public class Login extends Activity {
    EditText et, pass;
    TextView text1;
    String send_num;
    HttpPost httppost;
    HttpResponse response;
    HttpClient httpclient;
    List<NameValuePair> nameValuePairs;
    ProgressDialog dialog = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);
        et = (EditText) findViewById(R.id.user);
        pass = (EditText) findViewById(R.id.pass);
        text1 = (TextView) findViewById(R.id.text1);
    }

    public void onClick(View v) {
        dialog = ProgressDialog.show(Login.this, "",
                "التحقق من اسم المستخدم ...", true);
        new Thread(new Runnable() {
            public void run() {
                login(); // نفذ الدالة داخل الثريد اي في خلفية التطبيق ..
            }
        }).start();
    }

    void login() {
        try {

            httpclient = new DefaultHttpClient();
            httppost = new HttpPost("http://192.168.1.10/sync.php"); // رابط مسار ملف الربط سواء كان على السيرفر او استضافة إلخ
            //اضافة البيانات
            nameValuePairs = new ArrayList<>(2);
            // المتغيرات التي كتبها المستخدم
            nameValuePairs.add(new BasicNameValuePair("username", et.getText().toString().trim()));
            nameValuePairs.add(new BasicNameValuePair("password", pass.getText().toString().trim()));
            httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs));
            //تنفيذ HTTP
            response = httpclient.execute(httppost);
            // جلب الرسالة التي يظهرها ملف الربط مع القاعدة
            ResponseHandler<String> responseHandler = new BasicResponseHandler();
            final String response = httpclient.execute(httppost, responseHandler);
            runOnUiThread(new Runnable() {
                public void run() {
                    text1.setText(response); // ضع الرسالة التي تأتي من ملف الربط مكان النص
                    dialog.dismiss();
                }
            });

            if (response.equalsIgnoreCase("User Found")) { // لاحظ الرسالة هنا هي نفسها التي موجودة في ملف الربط مع القاعدة
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(Login.this, "تم تسجيل الدخول بنجاح", Toast.LENGTH_SHORT).show();
                    }
                });
// اذا تم تسجيل الدخول بنجاح أذهب إلى الصفحة الرئيسية وخذ معك اسم المستخدم
                Intent i = new Intent(Login.this, Activity_Main.class);
                send_num = et.getText().toString();
                i.putExtra("text", send_num);
                startActivity(i);
            } else {
            }

        } catch (Exception e) {
        }
    }
}

أما بالنسبة للاكتفتي الرئيسية التي يذهب إليها التطبيق بعد تسجيل الدخول بنجاح :

Activity_Main.java

package com.andrody.testandrodycom;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

/**
 * Created by Abboudi_Aliwi on 31/03/2015.
 */
public class Activity_Main extends Activity {
    TextView GOOD;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        GOOD = (TextView)findViewById(R.id.Congratulations);
        GOOD.setText(getIntent().getExtras().getString("text"));

    }
}

 main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="50dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:layout_gravity="center"
        android:text="لقد تم تسجيل الدخول بنجاح يا"/>
    <TextView
        android:id="@+id/Congratulations"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="#f00"
        android:layout_gravity="center"
        android:text=""/>

</LinearLayout>

 # إنشاء اسم مستخدم جديد :

الآن نذهب إلى قاعدة البيانات ونقوم بإنشاء اسم مستخدم جديد ونعطي القيمة اسم المستخدم وكلمة المرور ..
لقد قمت بإنشاء واحد بإسم Abboudi

وقم بعرض التطبيق على جوالك وجرب تسجيل الدخول ^__^ . تم بحمد الله ~

# معاينة :

في هذا الفيديو سوف أعرض معاينة لعملنا هذا, ومتابعة الفيديو مهمة لتوضيح بعض النقاط .

وانتظرونا بكل جديد ومفيد وحصري .. وفي أمان الله ~