logo أكاديمية أكسبورت للتطوير والبرمجة logo-alt أكاديمية أكسبورت للتطوير والبرمجة
تسجيل الدخول  أو  تسجيل حساب
  • الرئيسية
  • دروس برمجية
    • HTML
    • CSS
    • ANGULAR
    • IONIC / MOBILE
    • YII 2.0
    • Odoo /epen ERP
  • مفاهيم برمجية
  • من نحـن
  • اتصل بنا

عرض قائمة users وجلبها عبر API من قاعدة البيانات

الدرس الثامن

المستوى 102 من دورة angular الصفحة الرئيسية

في هدا الدرس سنقوم بتجربة حقيقية لعرض قائمة المستخدمين  الدين قمنا بانشائهم يودويا من قاعدة البيانات

وسير عمل هده العملية ستكون كالتالي

  1. المكون  component  سيرسل طلبية الى ملف الخدمة الدي سننئسئه بجلب بيانات المستخدمين  
  2. ملف الخدمة يستجيب للطلب ويقوم بارسال الطلب الى api
  3. الـ api يقوم بمعالجة الطلب ويتفقد قاعدة البيانات  ثم يعيد النتائج الى ملف الخدمة service على شكل بيانات json
  4. ملف الخدمة سيتلقى الرد من webapi وسيحول الرد الى المكون
  5. المكون سيعالج الرد ويرسله الى ملف template الخاص به
  6. ملف template الخاص بالمكون سيستعرض اما جدول المستخدمين  اما خطأ ما لسبب معين .. اما بيانات فارغة بسبب عدم وجود مستخدمين بقاعدة البيانات

  ونلخص هده النقاط على هدا الشكل

A. علينا أولا ان ننشيء ملف الخدمة service ولنسمه مثلا user.service . انشيء مجلد داخل app وسمه services حيث سنضع داخله ملفات الخدمة التي نحتاج اليها 

/src/app/services/user.service.ts

ng generate service services/user

قم بتضمين ملف الخدمة بالموديول module

import { UserService } from './services/user.service'; // +
  providers: [
    UserService,  //+
  ],

 

B. ننشيء  الدالة  getUsers التي تقوم بطلب البيانات من ملف الخدمة الى api  عن طريق GET Method

افتح ملف الخدمة واضف الدالة 

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';  //+
import { map } from 'rxjs/operators';  //+

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(public httpClient: HttpClient,) { }  //+


  getUsers(url:string){  //+
   return  this.httpClient.get(url)
      .pipe(
        map(res => res) 
      );
  }

}

بما اننا استخدمنا  موديول HttpClient الخاص بالتواصل عبر برتوكول http  مع api فيجب علينا تضمين هدا الموديول بملف app.module  حتى يتعرف عليه

افتح ملف app.module وقم بتضمينه

import { HttpClientModule } from '@angular/common/http'; // + here
 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, // + here
  ],

ليصبح ملف module بهدا الشكل

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, 
  ],
  providers: [
    UserService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 C. بعد دلك ننشيء الطلبية بالمكون app.component سننشيئ دالة بالـ component تقوم  بعمل قناة بين المكون وملف الخدمة حيث هدفها هو الاتصال بملف الخدمة لارسال الطلب واستقبال النتيجة

قم بتمهيد كائن  عن ملف الخدمة بدالة constractor + قم بتضمين ملف الخدمة بال component

import { UserService } from '../user.service';
  constructor(public usersService:UserService, ) {
  }

انشيء الطلبية بدالة init 

 ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }

 

ليصبح المكون بهدا الشكل

import { UserService } from './services/user.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 public users;

  constructor(public usersService:UserService, ) {
  }
  
  ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }


}

D. احفظ الكل وافتح debugger عن طريق F12 ثم اختر نافدة Console لنتتبع النتائج

لاتنسى تشغيل سرفر apache لكي يقوم بمعالجة api

ng serve

النتيجة تمت بنجاح

 

الان لم يتبقى سوى استعراض النتائج في جدول بملف template

افتح app.component.html واضف الجدول

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">CRUD</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
    </ul>
    <a class="btn btn-outline-success my-2 my-sm-0" >Login</a>
    <a class="btn btn-outline-success my-2 my-sm-0" >Register</a>
  </div>
</nav>

<br>
<br>

<div class="container">
  <table *ngIf='users' class="table table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
        <th scope="col">password</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor='let user of users'>
            <th scope="row">{{  user.id  }}</th>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </tbody>
  </table>
</div>

 

النتيجة على المتصفح

 

ادا صادفتك اخطاء فضعها بخانة الـ comments..

 

ماهو تقييمك للدرس
تقييم الزوار للدرس
الدرس السابق : ماهو الفرق بين API و REST API وماهي وضيفتهما الدرس القادم : تعديل بيانات المستخدم والتعرف على كيفية تمرير parameters بالمكون
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • تعديل بيانات المستخدم والتعرف على كيفية تمرير parameters بالمكون
    الدرس العاشر
  • json web token vs OAuth
    الدرس الثاني عشر
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved