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

یکی دیگر از کاربردهای نشست ها ساخت سبد خرید می باشد. علت این است که برای ساخت سبد خرید باید اطلاعات مربوط به سبد خرید یعنی کالاهای سفارش داده شده، تعداد هر کالا و قیمت هر کالا و قیمت کل در تمام صفحات وب قابل دسترس باشند. برای این مننظور اطلاعات جدول 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>

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

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

 var person={fname:"ali",lname:"alavi",age:23};

همانطوریکه مشاهده می شود رکوردها در آکولاد قرار می گیرند. سه صفت fname ، lname و age مقادیری گرفته اند و تشکیل یک رکورد را داده اند. برای دسترسی به هر صفت از [] استفاده می شود.

مثال: صفحه وبی طراحی کنید که با در نظر گرفتن مدیریت استثنا تمام مقادیر رکورد فوق را نمایش دهد:

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(){
                try{
                    var txt="";
                    var person={fname:"ali",lname:"alavi",age:23};
                    for(var x in person){
                        txt+=person[x]+" ";
                    }
                    alert(txt);
                }catch(e1){
                        alert(e1.message);
                }
                    
            }
            
       </script>
   </head>
   <body onload="printNumbers()">

   </body>
</html>

در کد فوق کدهای موجود در اکولاد try اجرا می شوند. از دستور foreach برای دسترسی به تمام مقادیر رکورد استفاده شده است. که مقادیر در متغیر txt ذخیره می شوند. چنانچه خطایی رخ دهد مثلا کاربر برای دستور alert به صورت alertt وارد کند. قسمت موجود در catch اجرا می شود.

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

آرایه به معنای مجموعه ای از عناصر همنوع می باشد. جهت تعریف آرایه ها در جاوااسکریپت از [] براکت استفاده می شود. به عنوان مثال در زیر آرایه names شامل مجموعه ای از مقادیر رشته ای می باشد.

var names=["ali","hasan","hossein","hamid","nader"];

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

alert(names[1]);

کد فوق اندیس شماره ۱ یعنی hasan را چاپ می کند زیرا اندیس ها از صفر شروع می شوند.

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

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(name){
                
                    var names=["ali","hasan","hossein","hamid","nader"];
                    for(var i=0;i<names.length;i++){
                        if(names[i]==name){
                            continue;
                        }else{
                            alert(names[i]);
                        }
                    }
            }
            
       </script>
   </head>
   <body onload="printNumbers('hasan')">

   </body>
</html>

تابع length جهت تعیین تعداد عناصر آرایه به کار می رود.

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

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

while(i<=max){
      document.write(i+"<br />");
      i+=2;
             }

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

مثال۱: به کمک حلقه while مقادیر بین min و Max که از ورودی دریافت می شوند بصورت یکی در میان در خروجی چاپ شوند:

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(min,max){
                 
                    var i=min;
                    while(i<=max){
                        document.write(i+"<br />");
                        i+=2;
                    }
            }
            
       </script>
   </head>
   <body onload="printNumbers(eval(prompt('min:')),eval(prompt('max: ')))">

   </body>
</html>

مثال۲: صفحه وبی طراحی کنید که اعدادی از ورودی به صورت نامحدود دریافت شوند و هنگامی که کاربر مقدار * را وارد کرد مجموع اعداد نمایش داده شود.

توضیح: شرطی که جلوی دستور while باید بنویسیم بررسی این است که آیا کاربر کاراکتر * را وارد کرده یا خیر. چنانچه وارد کرده بود مجوع اعداد نمایش داده می شود و در غیر اینصورت عدد جدید با مجموع اعداد وارد شده جمع می شود و مجدد از کاربر درخواست می شود عدد جدیدی وارد کند.

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(){
                
                    var sum=0;
                    var input=prompt("Enter a number (* for finish)");
                    while(input!="*"){
                        
                        sum+=eval(input);
                        var input=prompt("Enter a number (* for finish)");
                    }
                    alert(sum);
            }
            
       </script>
   </head>
   <body onload="printNumbers()">

   </body>
</html>

همانطوریکه مشاهده می شود sum مجموع را دارد و هنگامی که کاربر * را وارد می کد محتوای sum نمایش داده می شود.

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

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

 for(var i=min;i<=max;i++){
                     document.write(i+"<br />");
                 }

در کد فوق متغیر i به عنوان شمارنده از متغیر min تا مقدار متغیر max کد داخل آکولاد را تکرار می کند. در داخل آکولاد مقدار i در صفحه نوشته می شود و به خط بعد می رود. می توان این دستور را در یک تابع قرار داد و با کلیک بر روی دکمه اجرا شود.

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(min,max){
                 for(var i=min;i<=max;i++){
                     document.write(i+"<br />");
                 }
                    
            }
            
       </script>
   </head>
   <body onload="printNumbers(eval(prompt('min:')),eval(prompt('max: ')))">

   </body>
</html>

همانطوریکه در کد فوق مشاهده می شود با لود شدن صفحه دو مقدار min و max از کاربر به کمک تابع prompt دریافت می شود. سپس به کمک تابع eval مقدارهای رشته ای به عددی تبدیل می شوند و برای تابع printNumbers ارسال می شود. تابع printNumbers نیز مقادیر i را چاپ می کند.

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

ابتدا یک بانک اطلاعاتی بنام usrs ایجاد می کنیم و در آن یک جدول بنام tbl_user ایجاد می کنیم. این جدول دارای سه فیلد username، pas و role است. چند رکورد به آن اضافه می کنیم به صورت شکل زیر:

محتوای جدول

جهت ایجاد فرم صفحه ی لاگین صفحه ی loginform.php بصورت زیر ایجاد می شود:

<body>
    <form method="POST" action="login.php">
        <table align="center" 
        style="background-color: burlywood;">
        <tr>
            <td>User Name:</td>
            <td><input type="text" name="uname"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="text" name="pas"></td>
        </tr>
        <tr>
            
            <td><input type="submit" value="LOGIN"></td>
        </tr>
        </table>
    </form>
</body>

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

خروجی صفحه loginform.php

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

<?php
session_start();

$uname=$_POST['uname'];
$pas=$_POST['pas'];

سپس باید به بانک اطلاعاتی متصل شویم :

$db=mysqli_connect("127.0.0.1","root","","usrs");
if(!$db){
    echo "Error!";
    exit;
}
//echo "Connected!";

حال بررسی می شود مقادیری که در کادرهای متنی وارد شد در جدول tbl_user وجود دارد یا خیر. تعداد رکوردهای یافته شده متناسب با نام کاربری و رمز عبور وارد شده در متغیر num ذخیره می شود.

$query="select * from tbl_user where username='" . 
        $uname . "' and pas='" . $pas . "'";
$result=mysqli_query($db,$query);
if($result){
    //echo "Yes";
    $num=mysqli_num_rows($result);
    //echo $num;

چنانچه مقدار num بیشتر از ۰ بود نشست باید ایجاد شود و به صفحه ی admin.php منتقل می شود.

if($num>0){
        $row=mysqli_fetch_row($result);
        if($row[2]=="admin"){
            //echo $row[2];
            $_SESSION['admin']=$uname;
            header("Location:admin.php");
        }else{
            header("Location:login_form.htm");
            //echo "You are not administrator!";
        }

چنانچه مقدار num صفر بود به صفحه ی loginform.php‌ منتقل می شود:

else{
        header("Location:login_form.htm");
    }

کد کامل صفحه ی login.php در زیر آمده است:

<?php
session_start();

$uname=$_POST['uname'];
$pas=$_POST['pas'];
$db=mysqli_connect("127.0.0.1","root","","usrs");
if(!$db){
    echo "Error!";
    exit;
}
//echo "Connected!";
$query="select * from tbl_user where username='" . 
        $uname . "' and pas='" . $pas . "'";
$result=mysqli_query($db,$query);
if($result){
    //echo "Yes";
    $num=mysqli_num_rows($result);
    //echo $num;
    if($num>0){
        $row=mysqli_fetch_row($result);
        if($row[2]=="admin"){
            //echo $row[2];
            $_SESSION['admin']=$uname;
            header("Location:admin.php");
        }else{
            header("Location:login_form.htm");
            //echo "You are not administrator!";
        }

    }else{
        header("Location:login_form.htm");
    }
}
?>

پس از ساخت صفحه ی login.php موقع آن است که صفحه admin.php را ایجاد کنیم. در این صفحه ابتدا بررسی می شود آیا نشستی برای admin ساخته شده یا خیر. برای این منظور از تابع isset استفاده می شود. اگر نشست ساخته شده بود صفحه admin.php نشان داده می شود و به کاربر خوش آمدگویی نشان میدهد. در غیر اینصورت به صفحه ی loginform.php منتقل می شود. کد کامل این صفحه در زیر آمده است:

<body>
    <h1 style="text-align:center;color:blue">
        Welcome, Administrator's profile
    </h1>
    <?php
        session_start();
        if(isset($_SESSION['admin'])){
            echo "welcome ".$_SESSION['admin'];
        }else{
            header("Location:login_form.htm");
        }
    ?>
     <form method="POST" action="logout.php">
         <input type="submit" value="LOGOUT">
    </form>
</body>

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

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

document.getElementById("id1").style.color="red"; 

در کد بالا ابزار با id که id1 نام دارد رنگ نوشته را به قرمز تغییر می دهد.

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
     <h1 id="id1">دانشکده فنی امام محمدباقر</h1>
    <script type="text/javascript">
        function product(){
            
           document.getElementById("id1").style.color="red"; 

        }
    </script>

    
    <br/>
    <br/>
    <input type="button" name="button" value="کلیک کنید" onclick="product()"/>
</center>
</body>

بدون تابع نیز می توان برنامه فوق را تغییر داد. که در زیر آمده است:

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
     <h1 id="id1">دانشکده فنی امام محمدباقر</h1>
    
    <br/>
    <br/>
    <input type="button" name="button" value="کلیک کنید" 
    onclick="document.getElementById('id1').style.backgroundColor='red'"/>
</center>
</body>

ابتدا ابزارهای HTML‌ را ایجاد می کنیم و با id نامی برای آنها تعیین می کنیم.

<input type="text" name="txt1" id="txt2"/>

همانطوریکه مشاهده می شود txt2 نامی است که برای یک کادر متنی لحاظ شده است. سپس برای دستیابی به آن از کد زیر استفاده می شود:

var a=Number(document.getElementById("txt1").value);

کد بالا یک کد جاوااسکریپت است که محتوای کادر متنی با id که txt1 است تعلق گرفته است را در a قرار می دهد.

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
    <script type="text/javascript">
        function product(){
            
            var a=Number(document.getElementById("txt1").value);
            var b=Number(document.getElementById("txt2").value);
            document.getElementById("txt3").value=a+b;

        }
    </script>

    قیمت محصول اول
    <br/>
    
    <input type="text" name="txt1" id="txt1"/>
    <br/>
    <br/>
    قیمت محصول دوم
    <br/>
    
    <input type="text" name="txt2" id="txt2"/>
    <br/>
    <br/>
    قیمت کل
    <br/>
   
    <input type="text" name="txt3" id="txt3"/>
    <br/>
    <br/>
    <input type="button" name="button" value="نمایش محصولات" onclick="product()"/>
</center>
</body>