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

انشاء صفحة محتوى السيارة - تفاصيل المنتج-

detail page

Mobile development الصفحة الرئيسية

مظهر صفحة تفاصيل المنتج سيكون بهدا الشكل

 

لانشاء  صفحة تفاصيل السيارة  يتوجب علينا الدهاب الى  terminal   او سطر الأوامر بالويندوز وضع هده الأوامر

//الدهاب الى مسار مشروعك
cd your/project/path   

انشاء الصفحة

ionic generate page car-detail --no-module

نقوم بتضمين الصفحة بملف الـ app.module

import { CarDetailPage } from '../pages/car-detail/car-detail'; //+
declarations: [
    // ....
    CarDetailPage, //+
   // ....
  ],
 entryComponents: [
      // ....
    CarDetailPage, //+
   // ....
  ],

 

نضيف دالة تقوم بالتوجيه الى هده الصفحة  / ندهب لملف home.ts ونضع الدالة التالية

import { CarDetailPage } from '../car-detail/car-detail';
 detail(id:number){  // نرسل قيمة المعرف عبر المسار الى صفحة التفاصيل
    this.navCtrl.push(CarDetailPage, {
      ID:id, 
    });

 

الفرق بين الدالة push و setRoot

push  : تقوم بتحويلك الى الصفحة الجديدة مع امكانية الرجوع للصفحة السابقة وتضع لك ايقونة الرجوع في اعلى الصفحة
setRoot : تقومبتحويلك الىالصفحة الجديدة دون امكانية الرجوع للصفحة السابقة حيث لن يظهر لك زر الرجوع للخلف بالأعلى في واجهة التطبيق
 

نتأكد بملف home.html  من الحدث (click) " في الحلقة على السيارات" حيث يجب ان يحمل اسم الدالة detail

(click)="detail(car.id)"

 

الأن لم يتبقى سوى عملية عرض تفاصيل السيارة بالصفحة الجديدة  والتي سنجلبها من ملف الـ json الدي يحتوي على بيانات كل السيارات .وكل ماعلينا فعله هو فلترة بيانات المصفوفة ونستخرج بيانات السيارة المحددة عن طريق المعرف id 

نتوجه الى ملف الخدمة  src/provider/car وننشيء دالة جلب بيانات السيارة عن طريق المعرف id 

  getCarByID(id:number){ 
    let url:string='assets/data/cars.json';
    return  this.http.get(url)
      .pipe(
        map(res => res) 
      );
  }

 

صفحة detail  ستكون بهدا الشكل

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { CarProvider } from '../../providers/car/car';
import { MycartProvider } from '../../providers/mycart/mycart';
import { AlertController } from 'ionic-angular';
import { CartPage } from '../cart/cart';

 

@Component({
  selector: 'page-car-detail',
  templateUrl: 'car-detail.html',
})
export class CarDetailPage {
  
  public car;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public carProvider: CarProvider,
    public mycartProvider: MycartProvider,
    private alertCtrl: AlertController,
    
  ) {

  }

  ionViewDidLoad() {
    let ID = this.navParams.get('ID');    // التقاط المعرف  
    if(ID){
      ID = Number(ID);                    // تحويل المعرف الى صيغة رقمية
      this.carProvider.getCarByID(ID)     // التواصل مع ملف الخدمة
        .subscribe(
            result => {
              let response:any = result; 
              response.forEach(item => {  //  عمل حلقة على مصفوفة السيارات لتحديد السيارة المستهدفة
                if(item.id == ID){
                  this.car = item; 
                  console.log(this.car);
                }
              });
            },
            error => {
                console.log(error);
            }
       );
    }
  }


  // هدا الحدث يتم تنفيده بعد الضغط على زر الاضافة الى السلة
  addToCart(car:any) {
    this.mycartProvider.addItem(car).then(
      data =>{
        this.presentAlert(); // دالة  تقوم بعرض نافدة تعطي لك رسالة بنجاح الاضافة بعد الضغط على الزر
      });
   }

 // دالة  تقوم بعرض نافدة تعطي لك رسالة بنجاح الاضافة بعد الضغط على الزر
  presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'Add to Cart',
      subTitle: 'Item was added successfully',
      buttons: ['Close']
    });
    alert.present();
  }
  
  cart(){  // نرسل قيمة المعرف عبر المسار الى صفحة التفاصيل
    this.navCtrl.push(CartPage);
  }
  
}

  
  

 

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

بالنسبة لمحتوى ملف car-detail.html

<ion-header>
  <div class="main-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title *ngIf='car'>
      <strong>{{ car.reference }}</strong> {{ car.brand }}
    </ion-title>
 
    <ion-buttons end>
      <button ion-button tappable (click)="account()">
        <ion-icon name="person"></ion-icon>
      </button>
      <button ion-button tappable (click)="cart($event)">
          <ion-icon name="ios-cart"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
</div>
</ion-header>



<ion-content>
  <ion-card *ngIf='car'>
    <img [src]="car.image">
  
    <ion-card-content>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    <ion-row padding-top class="description">
      <ion-col col-6>
        <strong> Modele  </strong>
      </ion-col>
      <ion-col col-6>
         {{ car.reference }} - {{ car.brand }}
      </ion-col>
      <ion-col col-6>
        <strong> Engine  </strong>
      </ion-col>
      <ion-col col-6>
        1.6 MPi 110 ch
      </ion-col>

      <ion-col col-6>
        <strong>Energy</strong>
      </ion-col>
      <ion-col col-6>
        Gasoline
      </ion-col>

      <ion-col col-6>
        <strong>Power</strong>
      </ion-col>
      <ion-col col-6>
        110 ch
      </ion-col>
      <ion-col col-6>
        <strong>Displacement</strong>
      </ion-col>
      <ion-col col-6>
        1598 cc
      </ion-col>

      <ion-col col-6>
        <strong>Max speed</strong>
      </ion-col>
      <ion-col col-6>
        Max speed
      </ion-col>
    </ion-row>
  </ion-card-content>  
  </ion-card>
</ion-content>
<ion-footer no-shadow>
	<ion-toolbar position="bottom">
    <ion-row  padding>
      <ion-col>
        <button color="primary" ion-button icon-left small full  menuClose>
          <ion-icon name="flash" (click)="OrdersList()"></ion-icon>
           Orders List
        </button>
      </ion-col>
      <ion-col>
        <button color="secondary"  ion-button icon-left small full menuClose (click)="addToCart(car)">
          <ion-icon name="cart"></ion-icon>
          Add to Cart
        </button>
      </ion-col>
    </ion-row>
    
	</ion-toolbar>
</ion-footer>

طبعا قد تلاحظ بيانات الجدول  ثابثة حيث لم نجلبها من ملف json  ...بامكانك اضافة تلك المتغيرات الى ملف الـ json  واضافتها بالجدول للمزيد من الديناميكية .اترك لك تجربة دلك للمزيد من التمرن

نضيف تسيق الـ css الخاص بصفحة الوصف 

نتوجه الى ملف car-detail.scss  ونضع  التالي

page-car-detail {
    
    ion-content{
        background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
  
    }

    ion-card{

        .description {
            ion-col {
                color: #3c3c3c;
                border: 1px solid #ababab;
                margin-bottom: -1px;
                margin-right: -1px;
            }
        }

    }
   

}

ion-footer{
    .toolbar-background{
        background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
    }
}

 

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

 

 

في أحيان قليلة (بعض الحالات) قد تجد عدم تجاوب مع البرنامج  رغم حفظ التغييرات والكود صحيح . وهدا راجع الى  مشاكل بالـ ionic  نفسه لدا عندما لاتجد تجاوب رغم انك قمت بحفظ التغييرات ستحتاج الى اعادة تشغيل  المشروع عن طريق  ionic serve --poll=2000

 

ماهو تقييمك للدرس
تقييم الزوار للدرس
الدرس السابق : تصميم القائمة الرئيسية menu الدرس القادم : تجهيز صفحة add to cart
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • تجهيز صفحة add to cart
    add to cart
  • كيفية تغيير كمية المنتج في السلة Change in Quantity
    ionic quantity
  • تجهيز قائمة البحث عن المنتج search item
    search bar
  • انشاء صفحة login page
    login page
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved