<span class="vcard">faratez</span>

درس بعدی ||||| درس قبلی

برای این مطلب نیاز است ابتدا مطالب مربوط به لینک های زیر را مطالعه کنید:

ثبت کاربر در MySQL بصورت شی گرا

اتصال به بانک اطلاعاتی و درج رکورد جدید

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

آموزش کار با کتابخانه Volley به همراه مثال کاربردی

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

public class Constants
{
    public static final String Root_URL="http://10.0.0.34:81/PHPpost/v1/registerUser.php";
}

در مرحله بعدی سطح دسترسی (permission) در فایل مانیفست (Manifest.xml) را نباید فراموش کنیم:

<uses-permission android:name="android.permission.INTERNET"/>

حال نوبت به طراحی فایل activity_main.xml میرسد. کد آن در زیر آمده است:

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout"
        android:orientation="vertical"
        android:layout_centerVertical="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="userName"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter user name"
            android:inputType="textPersonName"
            android:id="@+id/edt_username"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Password"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter user name"
            android:inputType="textPassword"
            android:id="@+id/edt_password"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="email"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter user name"
            android:inputType="textEmailAddress"
            android:id="@+id/edt_email"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Save"
            android:id="@+id/btn"
            android:layout_gravity="center"/>
    </LinearLayout>

</RelativeLayout>

حال باید در عمومی سه editText و یک دکمه (Button) تعریف شوند:

 EditText edtUsername,edtPassword,edtEmail;
    Button btn;

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

 edtUsername=findViewById(R.id.edt_username);
        edtPassword=findViewById(R.id.edt_password);
        edtEmail=findViewById(R.id.edt_email);
        btn=findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                registerUser();
            }
        });

متد registerUser در ادامه و خارج از onCreate و داخل کلاس MainActivity ساخته می شود:

 private void registerUser() {
        final String email=edtEmail.getText().toString().trim();
        final String username=edtUsername.getText().toString().trim();
        final String password=edtPassword.getText().toString().trim();
        //Toast.makeText(this, "aaa", Toast.LENGTH_SHORT).show();
        StringRequest stringRequest=new StringRequest(Request.Method.POST, Constants.Root_URL, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                try {
                    JSONObject jsonObject=new JSONObject(response);
                    Toast.makeText(MainActivity.this, jsonObject.getString("message")+"aaa", Toast.LENGTH_SHORT).show();
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
               // Toast.makeText(MainActivity.this, "error:"+error.getMessage(), Toast.LENGTH_SHORT).show();
                Log.e("TAG","error: "+error.getMessage());

            }
        }){
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {

                Map<String,String> params=new HashMap<>();
                params.put("username",username);
                params.put("email",email);
                params.put("password",password);
                return params;
            }
        };
        RequestQueue requestQueue= Volley.newRequestQueue(this);
        requestQueue.add(stringRequest);


    }

همانطوریکه مشاهده می شود کد فوق دارای چند مرحله است: در مرحله اول مقادیر وارد شده در کادرهای متنی در متغیرهای رشته ای قرار می گیرند:

final String email=edtEmail.getText().toString().trim();
final String username=edtUsername.getText().toString().trim();
final String password=edtPassword.getText().toString().trim();

به کمک کتابخانه Volley درخواست با کلاس StringRequest داده می شود که شامل دو رویداد دریافت پاسخ onResponse و دریافت خطا onErrorمی باشد:

 StringRequest stringRequest=new StringRequest(Request.Method.POST, Constants.Root_URL, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                try {
                    JSONObject jsonObject=new JSONObject(response);
                    Toast.makeText(MainActivity.this, jsonObject.getString("message")+"aaa", Toast.LENGTH_SHORT).show();
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
               // Toast.makeText(MainActivity.this, "error:"+error.getMessage(), Toast.LENGTH_SHORT).show();
                Log.e("TAG","error: "+error.getMessage());

            }
        })

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

جهت ارسال پارامترها به سرور نیازداریم که از متد getParams استفاده کنیم. کد آن بصورت زیر آمده است:

protected Map<String, String> getParams() throws AuthFailureError {

    Map<String,String> params=new HashMap<>();
    params.put("username",username);
    params.put("email",email);
    params.put("password",password);
    return params;
}

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

 RequestQueue requestQueue= Volley.newRequestQueue(this);
 requestQueue.add(stringRequest);

برنامه را اجرا بگیرید. باید بتوانید رکورد جدیدی ثبت کنید.

آموزش بعدی ||||| آموزش قبلی

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

window.open("","","_blank")

از سوی دیگر می توان تعیین کرد که پنجره بسته شود که با متد close تعیین می شود. یا می توان تعیین کرد اندازه آن چقدر باشد که برای این منظر از متد resizeTo استفاده می شود:

win.resizeTo(800,100)

جهت جابجایی پنجره نیز از متد moveTo استفاده می شود:

win.moveTo(600,700);

مثال: صفحه وبی طراحی کنید که با کلیک بر دکمه پنجره جدیدی با اندازه ۸۰۰ در ۱۰۰ باز شود و به پیکسل ۶۰۰ و ۷۰۰ منتقل شود. با زدن دکمه دیگر پنجره باز شده بسته شود.

<head>
    <script type="text/javascript">
        var win;
       function btn_open(){
           win=window.open("","","_blank")
           win.moveTo(600,700);
           win.resizeTo(800,100)
       }
       function btn_close(){
           win.close()
       }
        
    </script>
</head>
<body>
    <input type="button" value="Open Window" onclick="btn_open()">
    <input type="button" value="close Window" onclick="btn_close()">
</body>

همانطوریکه در کد فوق مشاهده می شود با کلیک بر دکمه open window متد btn_open باز می شود. ابتدا یک متغیر بنام win تعریف می شود تا از نوع پنجره ای که باز شده باشد. سپس می توان مقادیر این متغیر را با متدهای moveTo و resizeTo و close تغییر داد.

آموزش بعد ||||| آموزش قبلی

برای تطابق الگو (pattern matching) با یک رشته ورودی از regular expression‌ استفاده می شود. علاوه بر این جهت جستجو در یک رشته نیز مورد استفاده قرار می گیرد. ساختار کلی regular expression بصورت زیر است:

var patt=/pattern/modifiers

همانطوریکه مشاهده می شود در کد بالا می توان بجای pattern الگو تعیین کرد. و بجای modifiers میتوان سوییچ تعریف کرد مثلا i به عنوان سوییچ برای این است که حروف بزرگ و کوچک را در نظر بگیرد.

مثال: الگویی تعریف کنید که بررسی کند آیا حداقل یکی از حروف acgm در رشته آمده یا نه:

var patt=/[acgm]/

مثال: صفحه وبی طراحی کنید که چنانچه رشته دارای کاراکتر غیر فارسی بود پیغام مناسب نمایش دهد:

<head>
    <script type="text/javascript">
        var patt=/[^ا-ی]/;
        var txt="سلامa";
        if(patt.test(txt)){
            alert("فارسی وارد کنید");
        }else{
            alert("معتبر است");
        }
        
    </script>
</head>

همانطوریکه در کد فوق مشاهده میشود در رشته txt کاراکتر a به صورت غیر فارسی درج شده در نتیجه خروجی فارسی وارد کنید نشان داده می شود.

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

<head>
    <script type="text/javascript">
        var patt=/\D/;

        var n=prompt("Enter a number:");
        if(patt.test(n)){
            alert("Your input is Not a Number(NaN)")
        }else{
            alert("Your input is a number")
        }
        
    </script>
</head>

در کد فوق ابتدا یک کاراکتر از ورودی دریافت می شود چنانچه عدد بود پیغام You input is a number نمایش داده می شود.

درس قبلی ||||| درس بعدی

قبل از شروع مطالعه باید با آموزش زیر آشنا باشید:

تحلیل فایل json در اندروید استودیو

جهت ارتباط با اینترنت باید کتابخانه Volley را به اندروید استودیو اضافه کرد. برای این منظور در فایلbuild.gradle کد زیر را به قسمت dependencies اضافه کنید.

implementation 'com.android.volley:volley:1.1.1'

پس از افزودن کد فوق باید مجوز استفاده از اینترنت را دریافت کرد بنابراین ابتدا در manifest کد زیر را اضافه می کنیم:

<uses-permission android:name="android.permission.INTERNET"/>

سپس باید مجوز را برای نسخه های اندروید بالای۲۴ نیز بدست آورد که این کار در کلاس MainAcitivty انجام می شود:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.INTERNET)!= PackageManager.PERMISSION_GRANTED){
        Toast.makeText(this, "مجوز نیاز است", Toast.LENGTH_SHORT).show();
    }else {
        Toast.makeText(this, "مجوز قبلا دریافت شده است", Toast.LENGTH_SHORT).show();
        requsetData();
    }
}

چنانچه مجوز دریافت شده باشد متد requestData فراخوانی می شود. قبل از فراخوانی این متد باید ابتدا آدرس سایتی که API برای هواشناسی را پشتیبانی می کند در نظر بگیریم. سایت https://api.openweathermap.org برای این منظور مناسب است. نکته ای که وجود دارد باید در این سایت ثبت نام کرد و یک APIKEY‌ دریافت نمود که رایگان است و براحتی می توانید با جستجو در سایت این کار را انجام دهید. سپس برای اطمینان از درستی آدرس، آنرا در نرم افزار postman آزمایش کنید. عکس زیر آزمایش آدرس برای دریافت کد JSON می باشد:

اطلاعات بدست آمده از آدرس فوق که برای شهر Sari می باشد به صورت زیر است:

{
    "coord": {
        "lon": 53.06,
        "lat": 36.56
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 12,
        "feels_like": 10.55,
        "temp_min": 12,
        "temp_max": 12,
        "pressure": 1025,
        "humidity": 87
    },
    "visibility": 7000,
    "wind": {
        "speed": 2.1,
        "deg": 60
    },
    "clouds": {
        "all": 75
    },
    "dt": 1606923772,
    "sys": {
        "type": 1,
        "id": 7498,
        "country": "IR",
        "sunrise": 1606879351,
        "sunset": 1606914743
    },
    "timezone": 12600,
    "id": 116996,
    "name": "Sari",
    "cod": 200
}

اطلاعاتی که مورد نیاز است شامل نام شهر name، نام کشور که در json object با نام sys قرار دارد و نام آن country است. همچنین دما که در json object با نام name قرار دارد که رشته آن temp است. برای آب و هوا نیز در json Array با نام wheather است که در اندیس ۰ آرایه قرار دارد و رشته آن main , description است. با کمی دقت در کد JSON فوق متوجه خواهید شد.

حال رشته URLرا به صورت زیر به صورت عمومی به اندروید استودیو اضافه می کنیم:

public static final String URL_FORMAT="https://api.openweathermap.org/data/2.5/weather?q=%s&units=metric&appid=44e44e807c21dbce14c4cbcc02723dcc";

مقدار s% که در رشته فوق مشاهده می شود دریافت نام شهر از ورودی است. اکنون وقت آن است که طراحی اکتیویتی را انجام دهیم:

<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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        android:text="Tehran"
        android:layout_marginTop="70dp"
        android:textSize="26sp"
        android:layout_marginLeft="40dp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/temp"
        android:layout_centerInParent="true"
        android:text="40"
        android:textSize="76sp"
        android:textColor="@color/colorPrimary"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/weather"
        android:layout_below="@id/temp"
        android:text="Rain"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/holo_purple"
        android:textSize="26sp"/>

اکنون باید عناصر اکتیویتی را به کلاس MainActivity بشناسانیم: در عمومی کد زیر را می نویسیم:

TextView tvCity,tvTemp,tvWeather;

در متد onCreate کد زیر را می نویسیم:

 tvCity=findViewById(R.id.city);
        tvTemp=findViewById(R.id.temp);
        tvWeather=findViewById(R.id.weather);

حال برای دریافت اطلاعات و نمایش در اکتیویتی متد RequestData به صورت زیر تعریف می شود:

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

 String url=String.format(Locale.getDefault(),URL_FORMAT,"Sari");

سپس اشیای Volley فراخوانی می شوند: ابتدا شی از کلاس JSONObjectRequset فراخوانی می شودکه دارای آرگومانهای روش دریافت اطلاعات، آدرس است. کد JSON دریافتی در response قرار می گیرد:

 JsonObjectRequest request=new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                Log.i("TAG","response: "+response.toString());
                //Toast.makeText(MainActivity.this, response.toString(), Toast.LENGTH_SHORT).show();
                try {
                    tvWeather.setText(response.getJSONArray("weather").getJSONObject(0).getString("main"));
                    tvWeather.append(": "+response.getJSONArray("weather").getJSONObject(0).getString("description"));

                    tvCity.setText(response.getString("name").toUpperCase()+", "+ response.getJSONObject("sys").getString("country"));

                    double temp=response.getJSONObject("main").getDouble("temp");
                    tvTemp.setText(temp+"");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e("TAG", "onErrorResponse: Error");
            }
        });

برای دریافت اطلاعات نیز باید از کلاس RequestQueue استفاده کرد. و متد add این کلاس درخواست را دریافت کرده و در response می چیند:

RequestQueue queue= Volley.newRequestQueue(this);
 queue.add(request);

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

درس بعدی ||||| درس قبلی

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

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

<?php
class DBConncect {
  // code goes here...
}
?>

تعریف سازنده (Constructor):

یک سازنده به شما امکان می دهد تا خصوصیات یک شی را در هنگام ایجاد شی آغاز کنید. اگر یک تابع __construction () ایجاد کنید ، PHP هنگام ایجاد یک شی از یک کلاس به طور خودکار این تابع را فراخوانی می کند. توجه داشته باشید که عملکرد سازه با دو زیر خط (__) شروع می شود! مثال:

function __construct()
	{
		
	}

تابع prepare و bind_param
تابع prepare برای اجرای همان عبارات SQL (یا مشابه) به طور مکرر با بازده بالا استفاده می شود.

تابع prepare اساساً مانند این عمل می کنند:

آماده سازی: یک الگوی دستور SQL ایجاد شده و به پایگاه داده ارسال می شود. مقادیر با برچسب ؟ مشخص می شوند . مثال:

INSERT INTO MyGuests VALUES(?, ?, ?)


پایگاه داده پرس و جو را در الگوی دستور SQL کامپایل می کند و نتیجه را بدون اجرای آن ذخیره می کند.
اجرا: در زمان بعدی ، برنامه مقادیر را به پارامترها متصل می کند و پایگاه داده دستور را اجرا می کند. برنامه ممکن است دستور را هر چند بار که بخواهد با مقادیر مختلف اجرا کند
در مقایسه با اجرای مستقیم عبارات SQL ، دستورات تهیه شده دارای سه مزیت اصلی هستند:

دستورات آماده شده زمان تجزیه را کاهش می دهند زیرا آماده سازی روی پرس و جو فقط یک بار انجام می شود (اگرچه دستور چندین بار اجرا می شود)
پارامترهای Bound پهنای باند را به سرور کاهش می دهند زیرا شما باید هر بار فقط پارامترها را ارسال کنید ، و نه کل پرس و جو
دستورات آماده شده در برابر تزریق SQL بسیار مفید هستند ، زیرا از مقادیر پارامترهایی که بعداً با استفاده از پروتکل دیگری منتقل می شوند ، نیازی به درست فرار نیست. اگر الگوی بیانیه اصلی از ورودی خارجی مشتق نشده باشد ، تزریق SQL امکان پذیر نیست.

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

پس از معرفی مطالب گفته شده قصد داریم برنامه را ایجاد کنیم. ابتدا یک پوشه با نام Android ایجاد می کنیم. در آن یک پوشه دیگر به نام includes می سازیم. در پوشه includes فایل constansts.php را می سازیم. کدهای اولیه مقداردهی به پایگاه داده را در آن قرار می دهیم.


<?php
	define('DB_NAME', 'user');
	define('DB_USER', 'root');
	define('DB_PASSWORD', '');
	define('DB_HOST', '127.0.0.1');
?>

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

private $con;

سازنده نیز به صورت زیر تعریف می شود:

function __construct()
	{
		
	}

یک متد به نام connect جهت اتصال با بانک اطلاعاتی ساخته می شود. جهت اتصال به مقادیر موجود در فایل constant.php نیاز است. برای این منظور از دستور inclue_once استفاده می شود:

include_once dirname(__FILE__).'/constant.php';

سپس با تابع mysqli درخواست اتصال زده می شود:

$this->con=new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

کد کامل کلاس DBConnect به صورت زیر است:

<?php

class DBConnect
{
	private $con;
	
	function __construct()
	{
		
	}

	function connect(){
		include_once dirname(__FILE__).'/constant.php';
		
		$this->con=new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

		if (mysqli_connect_errno()) {
			echo "failed to connect";
		}
		return $this->con;
	}


}
?>

یک فایل دیگر در پوشه ی includes با نام DBOperations.php ایجاد می کنیم. در این فایل قصد داریم متدی قرار دهیم که رکورد جدید به جدول اضافه می کند. ابتدا در سازنده کلاس به بانک اطلاعاتی متصل می شویم:

private $con;
function __construct(){

    require_once dirname(__FILE__).'/DBConnect.php';
    $db=new DBConnect();
    $this->con=$db->connect();
}

متد createUser جهت اضافه کردن یک رکورد جدید به کلاس DBOperations اضافه می شود. برای این منظور از طریق سه آرگومان سه مقدار دریافت می شود. ابتدا پسورد رمزگذاری می شود. سپس به کمک تابع prepare به صورت زیر دستور SQL وارد می شود:

$password=md5($password);
$stmt=$this->con->prepare("INSERT INTO `tbl_user`(`id`,`username`,`password`,`email`)values(null,?,?,?)");

در مرحله بعد پارامترها به کمک تابع bind_param داده می شود. چون سه مقدار باید قرار بگیرند(بجای هر علامت سوال) بنابراین sss تعیین می شود و آرگومان ها به عنوان نام کاربری رمز عبور و ایمیل مشخص می شوند:

$stmt->bind_param("sss",$username,$password,$email);

در انتها باید رشته SQL اجرا شود. چنانچه مشکلی نداشت متد createUser مقدار true و در غیراینصورت مقدار false را برمی گرداند:

if ($stmt->execute()) {
	
	return true;

}else
{
	return false;
}

کل کد مربوط به فایل DBOperations به صورت زیر است:

<?php
	
	/**
	 * 
	 */
	class DbOperations{

		private $con;
		function __construct(){

			require_once dirname(__FILE__).'/DBConnect.php';
			$db=new DBConnect();
			$this->con=$db->connect();
		}

		function createUser($username,$password,$email){
			$password=md5($password);
			$stmt=$this->con->prepare("INSERT INTO `tbl_user`(`id`,`username`,`password`,`email`)values(null,?,?,?)");
			$stmt->bind_param("sss",$username,$password,$email);
			if ($stmt->execute()) {
				
				return true;

			}else
			{
				return false;
			}

		}
	}

?>

حالا یک پوشه به نام v1 در پوشه ی Android می سازیم و در آن فایل registerUser.php را قرار می دهیم. ابتدا به محتویات DBOperations باید دسترسی داشته باشیم تا از طریق آن رکورد جدید به جدول اضافه شود:

include_once '../includes/DbOperations.php';

یک آرایه بنام response تعریف می کنیم. محتوای این آرایه یک صفت بنام error از نوع بولین است که برای تعیین خطا بکار می رود. صفت دیگر متنی است که به کاربر نشان داده می شود و با message مشخص می شود:

$response=array();

ابتدا بررسی می شود اطلاعات با متد POST باشد. سپس نام پسورد و ایمیل بدرستی وارد شده باشد.

if ($_SERVER['REQUEST_METHOD']=='POST') {
	if (isset($_POST['username'])
		and isset($_POST['password'])
		and isset($_POST['email'])) {

اتصال برقرار می شود و متد createUser فراخوانی می شود در صورتیکه مشکلی پیش نیامده باشد مقدار error false می شود و مقدار message پیغام user registered successfully می باشد:

$db=new DbOperations();
if ($db->createUser($_POST['username'],$_POST['password'],$_POST['email'])) {
	$response['error']=false;
	$response['message']="user registered successfully";
}

در انتها محتویات آرایه ی respone به صورتJSON توسط تابع json_encode نشان داده می شود:

echo json_encode($response);

کد کامل فایل registerUser.php بصورت زیر می باشد:

<?php
	
	include_once '../includes/DbOperations.php';
	$response=array();
	if ($_SERVER['REQUEST_METHOD']=='POST') {
		if (isset($_POST['username'])
			and isset($_POST['password'])
			and isset($_POST['email'])) {
			
			$db=new DbOperations();
			if ($db->createUser($_POST['username'],$_POST['password'],$_POST['email'])) {
				$response['error']=false;
				$response['message']="user registered successfully";
			}else{
				$response['error']=true;
				$response['message']="Undefined error ";
			}
		}else{
			$response['error']=true;
			$response['message']="Requied fields are invalid";
		}
	}else{
		$response['error']=true;
		$response['message']="Invalid request method";
	}
	echo json_encode($response);
?>

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

درس بعدی ||||| درس قبلی

منظور از اعتبارسنجی فرم، بررسی این است که آیا کاربر فیلدها را درست وارد کرده یا خیر. برای این منظور باید در دستورات جاوااسکریپت به عناصر فرم دسترسی پیدا کرد. برای این منظور از تابع getElementById استفاده می شود. با توجه به اینکه تعداد عناصر فرم ممکن است زیاد باشد بهتر است از تگ div استفاده شود و برای دسترسی به هریک از عناصر تگ div، از getElementByTagName استفاده شود که خروجی آن یک آرایه است. به عنوان مثال فرم زیر را در نظر بگیرید:

<form>
  <div id="d1">
     <input type="text" id="name"><span></span><br />
     <input type="text" id="phone"><span></span><br />
     <input type="text" id="email"><span></span><br />
     input type="button" value="validation" onclick="validate()">
   </div>
</form>

در این فرم تگ div با id با نام d1 مشخص می شود و دارای ۳ کادر متنی یک دکمه و سه تگ span است. برای دسترسی به تگهای span در تگ div به صورت زیر عمل میکنیم:

 var para=document.getElementById("d1").getElementsByTagName('span');

با توجه به اینکه در فرم سه تگ span داریم بنابراین para یک آرایه است که [0]para نشان دهنده اولین تگ span است و [1]para نشان دهنده دومین تگ span است و الی آخر. مثلا می خواهیم در اولین کادر متنی که id آن name است چنانچه تعداد کاراکترها کمتر از ۳ بود پیغام مناسبی در اولین span با رنگ قرمز به کاربر نمایش داده شود. بنابراین از کد زیر استفاده می شود:

var txt=document.getElementById("name").value;
//alert(txt);
if(txt.length<3){
   para[0].style.color="red";
   para[0].innerHTML="Name must be more than 3 characters!";
   exit();
 }

یا چنانچه کاربر در کادر متنی که id آن phone است مقداری وارد کرد که با ۰۹ شروع نمی شود و یا ۱۱ رقمی نیست کد زیر باید نوشته شود:

var txt2=document.getElementById("phone").value;
 //alert(txt2);
 if(txt2.length!=11 || txt2.indexOf("09")!=0){
      para[1].style.color="red";
      para[1].innerHTML="Phone is not valid!";
      exit();
}

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

txt3.lastIndexOf('@')<=0

یا باید یک علامت @ در ایمیل داشته باشیم و بیشتر از یک علامت @ ایمیل نامعتبر است. برای این منظور از تابع split استفاده می شود که بر طبق @ رشته ایمیل را تقسیم می کند اگر بیشتر از دو باشد خطا دارد. به صورت زیر:

txt3.split("@").length>2

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

txt3.lastIndexOf('.')<txt3.lastIndexOf('@')

کل کد مربوط به اعتبارسنجی ایمیل بصورت زیر است:

var txt3=document.getElementById("email").value;
//alert(txt3);
if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
  txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
       para[2].style.color="red";
       para[2].innerHTML="Email is not valid!";
       exit();
}

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

<html>
    <head>
        <script type="text/javascript">
            function validate(){
                var para=document.getElementById("d1").getElementsByTagName('span');
                var txt=document.getElementById("name").value;
                //alert(txt);
                if(txt.length<3){
                    para[0].style.color="red";
                    para[0].innerHTML="Name must be more than 3 characters!";
                    exit();
                }else{
                    para[0].innerHTML="";
                    var txt2=document.getElementById("phone").value;
                    //alert(txt2);
                    if(txt2.length!=11 || txt2.indexOf("09")!=0){
                        para[1].style.color="red";
                        para[1].innerHTML="Phone is not valid!";
                        exit();
                    }else{
                        para[1].innerHTML="";
                        var txt3=document.getElementById("email").value;
                        //alert(txt3);
                        if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
                            txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
                            para[2].style.color="red";
                            para[2].innerHTML="Email is not valid!";
                            exit();
                        }else{
                            para[2].innerHTML="";
                            alert("All of fields are completed successfully")
                        }


                    }

                }
            }
        </script>
    </head>
    <body>
        <form>
            <div id="d1">
                <input type="text" id="name"><span></span><br />
                <input type="text" id="phone"><span></span><br />
                <input type="text" id="email"><span></span><br />
                <input type="button" value="validation" onclick="validate()">
            </div>
        </form>
    </body>
</html>

درس بعدی ||||| درس قبلی

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

اطلاعات جدول shopping

همانطوریکه مشاهده می شود لیست محصولات شامل کد محصول، نام محصول و قیمت محصول می باشد. قصد داریم صفحه وبی بسازیم که محصولات را در یک جدول نمایش دهد و یک ستون اضافی در جدول برای سفارش محصول در نظر بگیرد. برای این منظور کد صفحه وب sh.php به صورت زیر نوشته می شود:

<body>
    <div align="center">
        <table border="1">
            <tr>
                <th>Username</th>
                <th>Password</th>
                <th>Role</th>
                <th>Add to Cart</th>
            </tr>

<?php
    $db=mysqli_connect("127.0.0.1","root","","usrs");
    if(!$db){
        echo mysqli_error($db);
    }else{
        echo "connect";
    }
    $query="SELECT * FROM `shopping`" ;

    $r=mysqli_query($db,$query);

    if($r)
    {
       $num = mysqli_num_rows($r);
           echo $num;
        for($i=0;$i<$num;$i++)
        {
               $row=mysqli_fetch_row($r);
               echo "<tr>";
               echo "<td>".$row[0]."</td>";
               echo "<td>".$row[1]."</td>";
               echo "<td>".$row[2]."</td>";
               echo "<td><a href='add2cart.php?card=".$row[1]."'>add</a></td>";
               
               echo "</tr>";
        }
    }
 ?>

   </table>
    </div>
</body>

خروجی این صفحه به صورت زیر است:

خروجی صفحه وب sh.php

در کد فوق مطلبی که مهم است لینک موجود برای هر کالا در ستون Add to Cart است. این لینک به همراه انتقال به صفحه add2cart.php به کمک متد GET نام هر آیتم را نیز ارسال می کند. کد به صورت زیر آمده است:

echo "<td><a href='add2cart.php?card=".$row[1]."'>add</a></td>";

پس از کلیک بر روی دکمه add در هریک از محصولات به صفحه add2cart.php منتقل می شویم. ابتدا محصول درخواست شده در متغیر new قرار می گیرد.

$new=$_GET['card'];

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

if(!isset($_SESSION['card'])){
        $_SESSION['card']=array();
        
        $_SESSION['total_price']='0.00';
    }

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

if(isset($_SESSION['card'][$new])){
        $_SESSION['card'][$new]++;
    }
    else{
        $_SESSION['card'][$new]=1;
    }

در انتها باید مجموع قیمت ها را محاسبه کرد. برای این منظور از تابع calculate_price استفاده می شود. کد کامل صفحه add2cart.php بصورت زیر است:

<?php
include('f.php');
session_start();

    $new=$_GET['card'];
    //echo $new;
    if(!isset($_SESSION['card'])){
        $_SESSION['card']=array();
        
        $_SESSION['total_price']='0.00';
    }
    
    if(isset($_SESSION['card'][$new])){
        $_SESSION['card'][$new]++;
    }
    else{
        $_SESSION['card'][$new]=1;
    }
    $_SESSION['price']=calculate_price($_SESSION['card']);
    echo "total price is: ".$_SESSION['price'];

?>

تابع ()calculate_price در فایل f.php‌قرار دارد. کد فایل f.php بصورت زیر است.

<?php
function calculate_price($card){
    $price=0;
    $db=mysqli_connect("127.0.0.1","root","","usrs");
    if(!$db){
        echo mysqli_error($db);
    }else{
        //echo "connect";
    }
    foreach($card as $name=>$qty){
        echo $name." ".$qty;
        $query="SELECT price FROM `shopping` where product_name='$name'" ;
        $r=mysqli_query($db,$query);
        if($r){
            $item=$row=mysqli_fetch_row($r);
            $item_price=$item[0];
            $price+=$item_price*$qty;
            //echo $price;
        }
        echo  "<br>";
    }
    return $price;
}
?>

همانطوریکه مشاهده می شود لیست قیمت ها و تعداد ضرب می شوند و متغیر price بعنوان خروجی تابع می باشد.

$price+=$item_price*$qty;

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

خروجی سبد خرید

درس بعدی |||||‌ درس قبلی

JSON مخفف JavaScript Object Notation است. این یک قالب تبادل داده مستقل است و بهترین جایگزین برای XML است. در این درس نحوه تجزیه پرونده JSON و استخراج اطلاعات لازم از آن توضیح داده شده است.

اندروید چهار کلاس مختلف برای دستکاری داده های JSON فراهم می کند. این کلاسها JSONArray ، JSONObject ، JSONStringer و JSONTokenizer هستند.

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

{
   "sys":
   {
      "country":"GB",
      "sunrise":1381107633,
      "sunset":1381149604
   },
   "weather":[
      {
         "id":711,
         "main":"Smoke",
         "description":"smoke",
         "icon":"50n"
      }
   ],
	
  "main":
   {
      "temp":304.15,
      "pressure":1009,
   }
}

JSON – عناصر
یک پرونده JSON از اجزای بسیاری تشکیل شده است. در اینجا جدول تعریف اجزای یک فایل JSON و شرح آنها است –

1 Array ([): در یک پرونده JSON ، براکت مربع ([) یک آرایه JSON را نشان می دهد

2 شی ({): در یک فایل JSON ، آکولاد ({) نمایانگر یک شی JSON است

3 کلید: یک شی JSON شامل یک کلید است که فقط یک رشته است. جفت کلید / مقدار یک شی J JSON را تشکیل می دهد

4 Value: هر کلید دارای مقداری است که می تواند رشته ای ، صحیح یا غیره باشد.

تجزیه و تحلیل JSON
برای تجزیه و تحلیل یک شی JSON ، ما یک شی از کلاس JSONObject ایجاد می کنیم و یک رشته حاوی داده های JSON را برای آن مشخص می کنیم. نحو آن بصورت زیر است:

String in;
JSONObject reader = new JSONObject(in);

آخرین مرحله تجزیه JSON است. یک پرونده JSON از اشیای مختلفی با جفت کلید / مقدار متفاوت تشکیل شده است. بنابراین JSONObject عملکرد جداگانه ای برای تجزیه هر یک از مولفه های پرونده JSON دارد. نحو آن در زیر آورده شده است :

JSONObject sys  = reader.getJSONObject("sys");
country = sys.getString("country");
			
JSONObject main  = reader.getJSONObject("main");
temperature = main.getString("temp");

متد getJSONObject شی JSON را برمی گرداند. متد getString مقدار رشته کلید مشخص شده را برمی گرداند. جدا از این روشها ، روشهای دیگری نیز برای تجزیه بهتر فایلهای JSON توسط این کلاس ارائه شده است. این روش ها در زیر ذکر شده است:

1 get (نام رشته): این روش فقط مقدار را برمی گرداند اما به شکل نوع Object است

2 getBoolean (نام رشته) این روش مقدار بولی مشخص شده توسط کلید را برمی گرداند

3 getDouble (نام رشته) این روش مقدار دوگانه مشخص شده توسط کلید را برمی گرداند

4 getInt (نام رشته) این روش مقدار صحیح مشخص شده توسط کلید را برمی گرداند

5 getLong (نام رشته) این روش مقدار طولانی مشخص شده توسط کلید را برمی گرداند

6 length () این روش تعداد نگاشت های نام / مقدار را در این شی برمی گرداند.

7 names () این روش آرایه ای را شامل می کند که شامل نام رشته ها در این شی باشد.

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

این فایل با پسوند json است که محتوای آن بصورت زیر است:

 [
      {
         "name": "ali",
         "lastname": "alavi",
         "phone": "1912"
      },
      {
         "name": "reza",
         "lastname": "razavi",
         "phone": "852125"
      },
      {
         "name": "hasan",
         "lastname": "hasani",
         "phone": "258008"
      },
      {
         "name": "hamid",
         "lastname": "hamedi",
         "phone": "2589631"
      },
      {
         "name": "neda",
         "lastname": "naderi",
         "phone": "214785"
      },
      {
         "name": "korosh",
         "lastname": "kordi",
         "phone": "258521"
      },
      {
         "name": "kazem",
         "lastname": "nbaloocji",
         "phone": "258745"
      }
   ]

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

ایجاد دایرکتوری raw

سپس باید کلاسی برای مدل کردن محتوای فایل JSON ایجاد کنیم. در نتیجه سه صفت name lastname و phone را ایجاد می کنیم. سپس متدهای سازنده و getter و setter آنرا میسازیم:

public class Contact {
    private String title;
    private String phone1;
    private String phone2;

    public Contact(String title, String phone1, String phone2) {
        this.title = title;
        this.phone1 = phone1;
        this.phone2 = phone2;
    }

    public Contact() {
    }

    public String getTitle() {
        return title;
    }

    public String getPhone1() {
        return phone1;
    }

    public String getPhone2() {
        return phone2;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public void setPhone1(String phone1) {
        this.phone1 = phone1;
    }

    public void setPhone2(String phone2) {
        this.phone2 = phone2;
    }

    public String toString(){
        return title+"    "+phone1+"\n"+"     "+phone2;
    }
}

متد toString برای نحوه نمایش در ابزار ListView است.

سپس یک کلاس دیگر ایجاد می کنیم با نام ContactJSONParser تا از طریق آن محتوای JSON را تجزیه و تحلیل کنیم. برای این منظور ابتدا یک متد با نام parseJSON‌ ایجاد می کنیم. خروجی این متد لیستی از آیتم هایی است که مطابق مدل کلاس Contact ایجاد شده اند:

public class ContactJSONParser {

    public List<Contact> parseJSON(String jsonString){
        List<Contact> contactList =new ArrayList<>();
        try {
            JSONArray jsonArray=new JSONArray(jsonString);
            for (int i=0;i<jsonArray.length();i++){

                JSONObject jsonObject=jsonArray.getJSONObject(i);
                Contact contact=new Contact();
                contact.setTitle(jsonObject.getString("name"));
                contact.setPhone1(jsonObject.getString("lastname"));
                contact.setPhone2(jsonObject.getString("phone"));
                contactList.add(contact);
                Log.i("json","OK");
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return contactList;
    }

همانطوریکه مشاهده می شود ورودی متد parseJSON یک رشته با نام jsonString است. این رشته همان محتوای فایل contact.json‌ است. از آنجاییکه محتوای فایل از نوع stream است آنرا به کمک متد convertInputStream2String به رشته تبدیل می کنیم. ورودی این تابع از نوع InputStream است و خروجی آن از نوع String است. کد آن در زیر آمده است:

 public String convertInputStream2String(InputStream inputStream) throws IOException {
        StringBuilder stringBuilder=new StringBuilder();
        BufferedInputStream bufferedInputStream=new BufferedInputStream(inputStream);
        while (bufferedInputStream.available()!=0){
            stringBuilder.append((char)bufferedInputStream.read());
        }
        bufferedInputStream.close();
        return stringBuilder.toString();
    }

برای ساخت رشته از کلاس StringBuilder استفاده می شود و محتوا هر دفعه در بافر (BufferInputStream) ذخیره می شود و تا زمانی که به انتهای فایل نرسیده به رشته stringBuilder اضافه می شود. رشته ساخته شده خروجی این متد است. محتوای کامل کلاس ContactJSONPaser در زیر آمده است:

public class ContactJSONParser {

    public List<Contact> parseJSON(String jsonString){
        List<Contact> contactList =new ArrayList<>();
        try {
            JSONArray jsonArray=new JSONArray(jsonString);
            for (int i=0;i<jsonArray.length();i++){

                JSONObject jsonObject=jsonArray.getJSONObject(i);
                Contact contact=new Contact();
                contact.setTitle(jsonObject.getString("name"));
                contact.setPhone1(jsonObject.getString("lastname"));
                contact.setPhone2(jsonObject.getString("phone"));
                contactList.add(contact);
                Log.i("json","OK");
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return contactList;
    }

    public String convertInputStream2String(InputStream inputStream) throws IOException {
        StringBuilder stringBuilder=new StringBuilder();
        BufferedInputStream bufferedInputStream=new BufferedInputStream(inputStream);
        while (bufferedInputStream.available()!=0){
            stringBuilder.append((char)bufferedInputStream.read());
        }
        bufferedInputStream.close();
        return stringBuilder.toString();
    }
}

حال به mainActivity.xml میرویم و یک ListView در آن قرار می دهیم. کد این فایل به صورت زیر آمده است:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list"/>


</LinearLayout>

در ادامه به MainActivity.java میرویم و ابتدا محتوای فایل contact.json را می خوانیم:

 InputStream inputStream=getResources().openRawResource(R.raw.newjson);

سپس محتوا با فراخوانی متد convertStream2String به رشته تبدیل می شود. رشته برای متد parseJSON‌ ارسال می شود. با تجزیه تحلیل رشته ورودی در لیست قرار می گیرد این لیست contacts نام دارد و بصورت عمومی بصورت زیر تعریف می شود:

 private List<Contact> contacts;

کد مربوط به تبدیل محتوای فایل به لیست بصورت زیر آمده است:

ContactJSONParser contactJSONParser=new ContactJSONParser();
       
 String contentFile= contactJSONParser.convertInputStream2String(inputStream);
Toast.makeText(this, contentFile, Toast.LENGTH_SHORT).show();
contacts=contactJSONParser.parseJSON(contentFile);
Toast.makeText(this, "Number of contacts: "+contacts.size(), Toast.LENGTH_SHORT).show();

در ادامه باید محتوای لیست contacts را در لیست نمایش داد. برای این منظور یک متد جدید در MainActivity ایجاد می کنیم که نام آن dispaly است:

 public void Display(){
        adapter=new ArrayAdapter<Contact>(this,android.R.layout.simple_list_item_1,contacts);
        listView.setAdapter(adapter);
    }

متغیر adapter نیز به صورت عمومی از نوع ArrayAdapter بصورت زیر تعریف می شود:

 private ArrayAdapter<Contact> adapter;

کد کامل کلاس MainActivity بصورت زیر است:

public class MainActivity extends AppCompatActivity {

    private List<Contact> contacts;
    ListView listView;
    private ArrayAdapter<Contact> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView=findViewById(R.id.list);
        InputStream inputStream=getResources().openRawResource(R.raw.newjson);
        ContactJSONParser contactJSONParser=new ContactJSONParser();
        try {
            String contentFile= contactJSONParser.convertInputStream2String(inputStream);
            Toast.makeText(this, contentFile, Toast.LENGTH_SHORT).show();
            contacts=contactJSONParser.parseJSON(contentFile);
            Toast.makeText(this, "Number of contacts: "+contacts.size(), Toast.LENGTH_SHORT).show();
            Display();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void Display(){
        adapter=new ArrayAdapter<Contact>(this,android.R.layout.simple_list_item_1,contacts);
        listView.setAdapter(adapter);
    }


}

با اجرای برنامه خروجی به صورت زیر نشان داده می شود:

درس بعدی ||||| درس قبلی

جهت دسترسی به هر قسمت از صفحه وب از طریق id و با تابع getElemetById انجام می شود. برای نمونه برای دسترسی به یک div که مقدار d1 برای id آن تعریف شده است بصورت زیر عمل می شود:

document.getElementById('d1').innerHTML="Hello";

همانطوریکه مشاهده می شود مقدار Hello در ابزار با id با نام d1 قرار می گیرد.گاهی برخی از ابزارها نظیر ابزارهای div خود دارای ابزارهای دیگری هستند مانند زیر:

<div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>

همانطوریکه می بینید سه تگ p ، h1 و span در تگ div با id با نام d1 قرار گرفته اند. برای دسترسی به هریک از آنها از دستور getElementByTagName استفاده می شود. برای مثال دستور زیر لیست تگ های p موجود در div با id با نام d1 را در متغیر آرایه ای para ذخیره می کند:

var para=document.getElementById('d1').getElementsByTagName('p');

مثال: صفحه وبی طراحی کنید که با کلیک بر یک دکمه تمامی تگ های p موجود در دستور div با کد بالا به رنگ آبی تبدیل شوند:

<html>
   <head>
       <style>
           div{
               width: 200px;
               height: 200px;
               background-color: chartreuse;
           }
       </style>
       <script type="text/javascript">
            function change(){
                //document.getElementById('d1').innerHTML="Hello";
                var para=document.getElementById('d1').getElementsByTagName('p');
                for(var i=0;i<para.length;i++){
                    para[i].style.color="blue";
                }
                    
            }
            
       </script>
   </head>
   <body>
       <input type="button" value="change something" onclick="change()">
        <div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>
   </body>
</html>