Bukan mati senang – mungkin boleh terjemah sangat mudah atau piece a cake. Kita cuba buat apps yang utilize kamera pada phone.
Sebelum kita buat apps kamera, kepada yang tak biasa (beginner), sila rujuk setting asas dalam pembangunan Ionic pada Windows di sini
–>> http://fstm.kuis.edu.my/blog/ionic-pengenalan/
Katakan kita nak buat apps baru dalam Ionic, dalam PowerShell boleh taip arahan-arahan (CLI) berikut;
ionic start appkamera sidemenu
Pilih Angular dan tunggu selesai download Ionic project.
Sila rujuk langkah di sini untuk dapatkan kod seterusnya; https://ionicframework.com/docs/native/camera
npm install @ionic-native/camera
ionic cordova plugin add cordova-plugin-cameranpm
install @ionic-native/camera
SESI KODING
Pada src/app/app.module.ts tambahkan hanya dua balis kod yang ditanda komen
<!-- Crayon Syntax Highlighter v_2.7.2_beta --> <div id="crayon-67e711bd45b9d332545739" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important; height: 18px !important; line-height: 18px !important; margin-top: -18px; display: none; position: absolute; z-index: 2;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly="" style="tab-size: 4; font-size: 12px !important; line-height: 15px !important; z-index: 0; opacity: 0; overflow: hidden;">import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouteReuseStrategy } from '@angular/router';import { IonicModule, IonicRouteStrategy } from '@ionic/angular';import { SplashScreen } from '@ionic-native/splash-screen/ngx';import { StatusBar } from '@ionic-native/status-bar/ngx';import { AppComponent } from './app.component';import { AppRoutingModule } from './app-routing.module';//add for camera ******************import { Camera } from '@ionic-native/camera/ngx';//use camera@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule ], providers: [ StatusBar, Camera, //add for camera ****************** SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent]})export class AppModule {}</textarea></div> <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;"> <table class="crayon-table" style=""> <tbody><tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-2">2</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-4">4</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-6">6</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-8">8</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-10">10</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-12">12</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-14">14</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-16">16</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-18">18</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-20">20</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-22">22</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-24">24</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-26">26</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-28">28</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45b9d332545739-30">30</div><div class="crayon-num" data-line="crayon-67e711bd45b9d332545739-31">31</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-67e711bd45b9d332545739-1"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">NgModule</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@angular/core'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-2"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">BrowserModule</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@angular/platform-browser'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-3"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">RouteReuseStrategy</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@angular/router'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-4"> </div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-5"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">IonicModule</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">IonicRouteStrategy</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@ionic/angular'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-6"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">SplashScreen</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@ionic-native/splash-screen/ngx'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-7"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">StatusBar</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@ionic-native/status-bar/ngx'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-8"> </div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-9"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">AppComponent</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./app.component'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-10"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">AppRoutingModule</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./app-routing.module'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-11"> </div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-12"><span class="crayon-c">//add for camera ******************</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-13"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">Camera</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@ionic-native/camera/ngx'</span><span class="crayon-sy">;</span><span class="crayon-c">//use camera</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-14"> </div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-15"><span class="crayon-sy">@</span><span class="crayon-e">NgModule</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-16"><span class="crayon-h"> </span><span class="crayon-v">declarations</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">AppComponent</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-17"><span class="crayon-h"> </span><span class="crayon-v">entryComponents</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-18"><span class="crayon-h"> </span><span class="crayon-v">imports</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-19"><span class="crayon-h"> </span><span class="crayon-v">BrowserModule</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-20"><span class="crayon-h"> </span><span class="crayon-v">IonicModule</span><span class="crayon-sy">.</span><span class="crayon-e">forRoot</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-21"><span class="crayon-h"> </span><span class="crayon-i">AppRoutingModule</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-22"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-23"><span class="crayon-h"> </span><span class="crayon-v">providers</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-24"><span class="crayon-h"> </span><span class="crayon-v">StatusBar</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-25"><span class="crayon-h"> </span><span class="crayon-v">Camera</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//add for camera ******************</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-26"><span class="crayon-h"> </span><span class="crayon-v">SplashScreen</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-27"><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">provide</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">RouteReuseStrategy</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">useClass</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">IonicRouteStrategy</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-28"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-29"><span class="crayon-h"> </span><span class="crayon-v">bootstrap</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">AppComponent</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45b9d332545739-30"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-67e711bd45b9d332545739-31"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">AppModule</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div></div></td> </tr> </tbody></table> </div> </div><!-- [Format Time: 0.0029 seconds] --> |
Kemudian pada src/app/home/home.page.ts tambahkan kod berikut;
<!-- Crayon Syntax Highlighter v_2.7.2_beta --> <div id="crayon-67e711bd45ba8513327529" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important; height: 18px !important; line-height: 18px !important; margin-top: -18px; display: none; position: absolute; z-index: 2;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly="" style="tab-size: 4; font-size: 12px !important; line-height: 15px !important; z-index: 0; opacity: 0; overflow: hidden;">import { Component } from '@angular/core';//to utilize cameraimport { Camera, CameraOptions } from '@ionic-native/camera/ngx';//use camera@Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'],})export class HomePage { //declarations nama:any; gambar:any; constructor( public camera:Camera, //to utilize camera ) {} ambilgambar(){ //code to shoot image camera //copy from const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, correctOrientation:true, saveToPhotoAlbum:true } this.camera.getPicture(options).then((imageData) => { // imageData is either a base64 encoded string or a file URI // If it's base64 (DATA_URL): this.gambar = 'data:image/jpeg;base64,' + imageData; }, (err) => { // Handle error }); }}</textarea></div> <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;"> <table class="crayon-table" style=""> <tbody><tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-2">2</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-4">4</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-6">6</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-8">8</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-10">10</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-12">12</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-14">14</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-16">16</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-18">18</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-20">20</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-22">22</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-24">24</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-26">26</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-28">28</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-30">30</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-32">32</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-34">34</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-36">36</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-38">38</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45ba8513327529-40">40</div><div class="crayon-num" data-line="crayon-67e711bd45ba8513327529-41">41</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-67e711bd45ba8513327529-1"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">Component</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@angular/core'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-2"><span class="crayon-c">//to utilize camera</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-3"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">Camera</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">CameraOptions</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@ionic-native/camera/ngx'</span><span class="crayon-sy">;</span><span class="crayon-c">//use camera</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-4"><span class="crayon-sy">@</span><span class="crayon-e">Component</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-5"><span class="crayon-h"> </span><span class="crayon-v">selector</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'app-home'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-6"><span class="crayon-h"> </span><span class="crayon-v">templateUrl</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'home.page.html'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-7"><span class="crayon-h"> </span><span class="crayon-v">styleUrls</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'home.page.scss'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-8"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-9"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">HomePage</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-10"> </div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-11"><span class="crayon-h"> </span><span class="crayon-c">//declarations</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-12"><span class="crayon-h"> </span><span class="crayon-v">nama</span><span class="crayon-o">:</span><span class="crayon-v">any</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-13"><span class="crayon-h"> </span><span class="crayon-v">gambar</span><span class="crayon-o">:</span><span class="crayon-v">any</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-14"> </div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-15"><span class="crayon-h"> </span><span class="crayon-e">constructor</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-16"><span class="crayon-h"> </span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-v">camera</span><span class="crayon-o">:</span><span class="crayon-v">Camera</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//to utilize camera</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-17"><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-18"><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-19"> </div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-20"><span class="crayon-h"> </span><span class="crayon-e">ambilgambar</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-21"><span class="crayon-h"> </span><span class="crayon-c">//code to shoot image camera</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-22"><span class="crayon-h"> </span><span class="crayon-c">//copy from </span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-23"><span class="crayon-h"> </span><span class="crayon-c">// https://ionicframework.com/docs/native/camera</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-24"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">CameraOptions</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-25"><span class="crayon-h"> </span><span class="crayon-v">quality</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-26"><span class="crayon-h"> </span><span class="crayon-v">destinationType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">DestinationType</span><span class="crayon-sy">.</span><span class="crayon-v">DATA_URL</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-27"><span class="crayon-h"> </span><span class="crayon-v">encodingType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">EncodingType</span><span class="crayon-sy">.</span><span class="crayon-v">JPEG</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-28"><span class="crayon-h"> </span><span class="crayon-v">mediaType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">MediaType</span><span class="crayon-sy">.</span><span class="crayon-v">PICTURE</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-29"><span class="crayon-h"> </span><span class="crayon-v">correctOrientation</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-30"><span class="crayon-h"> </span><span class="crayon-v">saveToPhotoAlbum</span><span class="crayon-o">:</span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-31"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-32"> </div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-33"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-e">getPicture</span><span class="crayon-sy">(</span><span class="crayon-v">options</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-v">imageData</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-34"><span class="crayon-h"> </span><span class="crayon-c">// imageData is either a base64 encoded string or a file URI</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-35"><span class="crayon-h"> </span><span class="crayon-c">// If it's base64 (DATA_URL):</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-36"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">gambar</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'data:image/jpeg;base64,'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">imageData</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-37"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">err</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-38"><span class="crayon-h"> </span><span class="crayon-c">// Handle error</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-39"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45ba8513327529-40"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-67e711bd45ba8513327529-41"><span class="crayon-sy">}</span></div></div></td> </tr> </tbody></table> </div> </div><!-- [Format Time: 0.0028 seconds] --> |
Setersnya pada antaramuka src/app/home/home.page.html tambahkan kod berikut ;
Home
<!-- Crayon Syntax Highlighter v_2.7.2_beta --> <div id="crayon-67e711bd45bad451047672" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important; height: 18px !important; line-height: 18px !important; margin-top: -18px; display: none; position: absolute; z-index: 2;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly="" style="tab-size: 4; font-size: 12px !important; line-height: 15px !important; z-index: 0; opacity: 0; overflow: hidden;"><ion-header> <ion-toolbar color="primary"> <ion-buttons slot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title> Home </ion-title> </ion-toolbar></ion-header><ion-content> <ion-button (click)="ambilgambar()" color="warning" expand="block"> <ion-icon name="camera"></ion-icon> </ion-button> <div *ngIf="gambar"> <img src={{gambar}}> </div> </ion-content></textarea></div> <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;"> <table class="crayon-table" style=""> <tbody><tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-2">2</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-4">4</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-6">6</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-8">8</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-10">10</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-12">12</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-14">14</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-16">16</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-18">18</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-20">20</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-22">22</div><div class="crayon-num" data-line="crayon-67e711bd45bad451047672-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-67e711bd45bad451047672-24">24</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-67e711bd45bad451047672-1"><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">header</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-2"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-e">toolbar </span><span class="crayon-v">color</span><span class="crayon-o">=</span><span class="crayon-s">"primary"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-3"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-e">buttons </span><span class="crayon-v">slot</span><span class="crayon-o">=</span><span class="crayon-s">"start"</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-4"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">menu</span><span class="crayon-o">-</span><span class="crayon-v">button</span><span class="crayon-o">></span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">menu</span><span class="crayon-o">-</span><span class="crayon-v">button</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-5"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">buttons</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-6"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">title</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-7"><span class="crayon-h"> </span><span class="crayon-v">Home</span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-8"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">title</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-9"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">toolbar</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-10"><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">header</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-11"> </div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-12"><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">content</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-13"> </div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-14"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-e">button</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">click</span><span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-s">"ambilgambar()"</span><span class="crayon-h"> </span><span class="crayon-v">color</span><span class="crayon-o">=</span><span class="crayon-s">"warning"</span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-15"><span class="crayon-h"> </span><span class="crayon-v">expand</span><span class="crayon-o">=</span><span class="crayon-s">"block"</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-16"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-e">icon </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"camera"</span><span class="crayon-o">></span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">icon</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-17"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">button</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-18"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-19"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-e ">div *</span><span class="crayon-v">ngIf</span><span class="crayon-o">=</span><span class="crayon-s">"gambar"</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-20"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-e">img </span><span class="crayon-v">src</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">gambar</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-67e711bd45bad451047672-21"><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-22"> </div><div class="crayon-line" id="crayon-67e711bd45bad451047672-23"><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-67e711bd45bad451047672-24"><span class="crayon-o">&</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">ion</span><span class="crayon-o">-</span><span class="crayon-v">content</span><span class="crayon-o">></span></div></div></td> </tr> </tbody></table> </div> </div><!-- [Format Time: 0.0030 seconds] --> |
Penulis adalah pensyarah di Jabatan Sains Komputer, FSTM KUIS. Khirulnizam telah menjadi pengajar/trainer Programming semenjak 1999. Bermula dengan C, Java, Visual Basic, PHP & MySQL. Sekarang lebih berminat dengan MVC framework (masa depan pengaturcaraan) seperti Android Studio, Bootstrap, Laravel, dan IONIC. Bermula 2020 beliau akan fokus dengan IONIC sebagai mobile frontend dan Laravel sebagai backend. Hubungi kami di fstm.wasap.my
https://github.com/khirulnizam/ionicfirebasecamera/tree/master/appkamera
<div id="crayon-67e711bd45bb2229699713" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important; height: 18px !important; line-height: 18px !important; margin-top: -18px; display: none; position: absolute; z-index: 2;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly="" style="tab-size: 4; font-size: 12px !important; line-height: 15px !important; z-index: 0; opacity: 0; overflow: hidden;"></textarea></div> <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;"> <table class="crayon-table" style=""> <tbody><tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-67e711bd45bb2229699713-1">1</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-67e711bd45bb2229699713-1"> </div></div></td> </tr> </tbody></table> </div></div> |
