آموزش دریافت دیتا از سرور و نمایش در ریسایکلر ویو اندروید با استفاده از کتابخانه والی
درآموزشی که هستیم در خدمتتون یاد خواهید گرفت که چطور قدم به قدم دیتا را از دیتابیس خود با استفاده از زبان پی اچ پی فراخوانی و سپس به صورت
جیسون در مرورگر به نمایش در بیاورید
و سپس در سمت کلاینت یعنی اندروید چطور دیتا را با کتابخانه والی به صورت جیسون بگیرید و در ریسایکلر ویو سفارشی به نمایش در بیاورید
یه آموزش کامل و اساسی برای دوستانی که تازه برنامه نویسی اندروید رو شروع کردن و یا کسانی که با بخش ارتباط با سرور مشکل دارن
خوب با کیومرث دِو همراه باشید تا بریم سراغ آموزش
قدم اول : وارد سی پنل هاستینگ خود شوید و یه دیتابیس ایجاد کنید
قدم دوم : به دیتابیس خود فیلد های نام و تلفن و ایمیل را اضافه کنید
در این آموزش ما از این سه فیلد ذکر شده استفاده کرده ایم
قدم سوم : فایل منیجر هاستینگ خود را باز کرده و یک فایل با اسم دلخواه و پسوند php ایجاد کنید
سپس کد های زیر رو بهش اضافه کنید
<?php
$servername="localhost";
$serveruser="qmarsdev_techblax"; //نام کاربری دیتابیسی که ساختید
$serverpass="techblax2023"; //رمز دیتابیسی که ساختید
$dbname="qmarsdev_techblax"; //نام دیتابیسی که ساختید
$conn = mysqli_connect($servername,$serveruser,$serverpass,$dbname);
if($conn->connect_error){
die("Connection Error" .$conn->connect_error);
}
$sql = "SELECT * FROM `user`";
$result = $conn->query($sql);
if($result->num_rows>0){
while ($row = $result->fetch_assoc()){
$js = array(
'name'=>$row['name'],
'phone'=>$row['phone'],
'email'=>$row['email'],
'status'=>"ok"
);
$res['Techblax'][]=$js;
}
echo json_encode($res);
}else{
$js = array(
'status'=>'error'
);
$res['Techblax'][]=$js;
echo json_encode($res);
}
$conn->close();
?>
قذم چهارم : اندروید استودیو را باز کرده و یک پروژه جدید ایجاد کنید
سپس فایل build.gradle را باز کرده و کتابخانه های زیر را بهش اضافه کنید
plugins {
id 'com.android.application'
}
android {
namespace 'com.techblax.getdatafromservertechblax'
compileSdk 33
defaultConfig {
applicationId "com.techblax.getdatafromservertechblax"
minSdk 21
targetSdk 33
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
dependencies {
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
//این سه کتابخانه را اضافه کنید
implementation 'androidx.recyclerview:recyclerview:1.3.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'com.android.volley:volley:1.2.1'
}
قدم پنجم: یک لایوت جدید به اسم user_item ایجاد کنید
وسپس کد های زیر را به آن اضافه کنید
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
app:cardElevation="8dp"
app:cardBackgroundColor="#FF9800"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/t_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:textSize="18sp"
android:text="Name"/>
<TextView
android:id="@+id/t_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:textSize="18sp"
android:text="phone"/>
<TextView
android:id="@+id/t_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:textSize="18sp"
android:text="email"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
قدم شیشم: لایوت مربوط به کلاستون یعنی activity_main را باز کنید
وکدهای زیر را به آن اضافه کنید
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/main_recyler"
android:background="@android:color/transparent"
android:layout_margin="2dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
قدم هفتم : مانیفست را باز کنید
و کد های زیر رو بهش اضافه کنید
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.GetDataFromServerTECHBLAX"
tools:targetApi="31"
android:usesCleartextTraffic="true">
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
قدم هشتم: در کنار کلاس اصلی برنامه دو پکیج جدید درست کنید
با نام های adapter و model سپس در داخل هر کدام یک کلاس درست کنید
در adapter یک کلاس به اسم UserAdapter و در model یک کلاس به اسم User ایجاد کنید و به ترتیب کد های زیر را در کلاس مربوطه قرار دهید
توجه
نام گذاری کلاس ها کاملا اختیاری است و صرفا جهت اموزش از اسم های گفته شده استفاده کنید
کد های زیر را درکلاس User قرار دهید
package com.techblax.getdatafromservertechblax.model;
public class User {
public String name;
public String phone;
public String email;
//alt+insert
public User(String name, String phone, String email) {
this.name = name;
this.phone = phone;
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
کد های زیر را درکلاس UserAdapter قرار دهید
package com.techblax.getdatafromservertechblax.adapter;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.techblax.getdatafromservertechblax.R;
import com.techblax.getdatafromservertechblax.model.User;
import java.util.List;
public class UserAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
public static final int TYPE = 1;
private final Context context;
private final List<Object> recyclerItem;
public UserAdapter(Context context, List<Object> recyclerItem) {
this.context = context;
this.recyclerItem = recyclerItem;
}
public class ItemViewHolder extends RecyclerView.ViewHolder{
TextView t_name,t_phone,t_email;
public ItemViewHolder(@NonNull View itemView) {
super(itemView);
t_name = itemView.findViewById(R.id.t_name);
t_phone = itemView.findViewById(R.id.t_phone);
t_email = itemView.findViewById(R.id.t_email);
}
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
switch (viewType){
case TYPE:
default:
View laView = LayoutInflater.from(parent.getContext()).inflate(R.layout.user_item,parent,false);
return new ItemViewHolder(laView);
}
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
switch (getItemViewType(position)){
case TYPE:
default:
ItemViewHolder itemViewHolder =(ItemViewHolder) holder;
User user = (User) recyclerItem.get(position);
itemViewHolder.t_name.setText("Name: "+user.getName());
itemViewHolder.t_phone.setText("Phone: "+user.getPhone());
itemViewHolder.t_email.setText("Email: "+user.getEmail());
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
context.startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("tel:"+user.getPhone())));
}
});
}
}
@Override
public int getItemCount() {
return recyclerItem.size();
}
}
قدم نهم: کلاس MainActivity را باز کرده
وسپس کد های زیر را به آن اضافه کنید
package com.techblax.getdatafromservertechblax;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.Toast;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.techblax.getdatafromservertechblax.adapter.UserAdapter;
import com.techblax.getdatafromservertechblax.model.User;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Object> ItemView = new ArrayList<>();
RecyclerView recyclerView;
RequestQueue queue;
private String url = "https://developer.qmarsdev.com/api.php";
@SuppressLint("MissingInflatedId")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView=findViewById(R.id.main_recyler);
LinearLayoutManager manager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(manager);
queue = Volley.newRequestQueue(this);
StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
@Override
public void onResponse(String response) {
try {
JSONObject object = new JSONObject(response);
JSONArray array = object.getJSONArray("Techblax");
for(int i = 0;i<array.length();i++){
JSONObject obj = array.getJSONObject(i);
if(obj.getString("status").equals("ok")){
String name = obj.getString("name");
String phone = obj.getString("phone");
String email = obj.getString("email");
User user = new User(name,phone,email);
ItemView.add(user);
UserAdapter adapter = new UserAdapter(MainActivity.this,ItemView);
recyclerView.setAdapter(adapter);
}else {
Toast.makeText(MainActivity.this, "Nothing to show", Toast.LENGTH_SHORT).show();
}
}
} catch (JSONException e) {
throw new RuntimeException(e);
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(MainActivity.this, "Error!", Toast.LENGTH_SHORT).show();
}
});
queue.add(request);
}
}
کار تمومه و اکنون از کارتون تست بگیرید
امیدوارم به دردتون خورده باشه و نهایت استفاده رو کرده باشین
در صورتی که به صورتی متنی یا مقاله ای متوجه نشدید جای نگرانی نیست چرا که ویدیو این آموزش نیز ضبط شده و شما میتونید آن را از این لینک در کانال یوتیوب ما مشاهده کنید