Membuat Event Click Sederhana di Angular 2

Angular2

Cara membuat event click sederhana di angular 2 sangatlah gampang, berikut contoh sederhana dengan hasil output seperti di bawah ini. Setiap button diklik maka jumlah bilangan bertambah.

//app.ts di folder app

import { Component } from 'angular2/core';

@Component({
    selector: '.wrapper',
    templateUrl: `app/templates/example.html`
})

export class AppComponent {
  times = 0;
  klik(event){
    console.log(event.target);
    this.times++;
  }
}

//example.html di folder app/templates

<button (click)="klik($event)">Klik {{times}}x</button>

//index.html, melihat javaScript yang dipakai

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="node_modules/rxjs/bundles/Rx.js"></script>

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Membuat Tabel Menggunakan sAjaxSource di DataTables

DataTable

Bagaimana cara menggunakan dataTable dengan data JSon di CodeIgniter? Di bawah contoh penggunaan secara singkatnya.

Controllers
  public function get_data() {
        $list = $this->daftar_m->getData();
        $recordsTotal = count($list);
        foreach($list as $key){
            $arr = array();
            $arr[] = $key->namakolom;
            $datanya[] = $arr;
        }
        $output = array(
            "recordsTotal" => $recordsTotal,
            "data" => $datanya,
        );
        echo json_encode($output);
    }


Models
//query kamu di model daftar_m


View
<table class="table table-bordered table-striped" id="table">
    <thead>
        <tr>
            <th style="vertical-align: middle" class="text-center" width="5%">Nama</th>
        </tr>
    </thead>
</table>


JavaScript

$(document).ready(function () {
        var sourcenya = "<?php echo site_url('spp_tu/get_pilih_paket_kegiatan/' . enkripsi($kgo_key) . '/' . enkripsi($uk_paket)) ?>";
        var oTable = $('#table').DataTable({
            "bSort": false,
            "sAjaxSource": sourcenya,
            "processing": true,
//            columns: [//deklarasi thead
//                {data: "namakolom"}
//            ]
        });

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Update ke Angular 4.0.0

Angular4

Updating to 4 is as easy as updating your Angular dependencies to the latest version, and double checking if you want animations. This will work for most use cases.

On Linux/Mac: 
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

On Windows:
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save


Then run whatever ng serve or npm start command you normally use, and everything should work.
If you rely on Animations, import the new BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule. Without this, your code will compile and run, but animations will trigger an error. Imports from @angular/core were deprecated, use imports from the new package import { trigger, state, style, transition, animate } from '@angular/animations';.
We are beginning work on an interactive Angular Update Guide if you would like to see more information about making any needed changes to your application.

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Syntax Perulangan di Angular4

Angular4

Improved *ngIf and *ngFor
Our template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count; index as i" [user]="user">
User {{i}} of {{count}}
  </user-profile>
</div>
<ng-template #loading>Loading...</ng-template>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Syntax Perulangan di Angular2 beserta Contohnya

Angular2

Ada beberapa perubahan syntax perulangan dari angular 1 ke angular 2. Di bawah ini adalah daftar syntax perulangan di angular 2:

//app.component.ts

import { Component } from 'angular2/core';

import { Book } from './login.model';
import { AppModule } from './app.module';

@Component({
    selector: 'root',
    templateUrl: `app/hobbies.html`,
    styleUrls: ['app/hobbies.css']
})

export class AppComponent {

  constructor(){
    this.hobbies = ['Musik', 'Movies', 'Sports'];
  }

}

//hobbies.html

  <div *ngIf="showHobbies">
    <h3>Hobbies:</h3>
    <ul>
      <li *ngFor="#item of hobbies">
        {{item}}
      </li>
    </ul>
  </div>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Syntax Perulangan di Angular

Angular

Syntax di angular sangat beragam, di bawah ini adalah daftar syntax yang mungkin berguna:

<ul>

<li *ngFor="let item of items; let i = index">

    {{i}} {{item}}

</li>

</ul>

Sintaks baru memiliki beberapa hal yang perlu diperhatikan. Yang pertama adalah * ngFor. * Adalah singkatan untuk sintaks template sudut baru dengan tag template. Ini juga disebut Directive struktural. Hal ini membantu untuk mengetahui bahwa * hanya singkatan untuk secara eksplisit mendefinisikan binding data pada tag template. Tag template mencegah browser membaca atau mengeksekusi kode di dalamnya.

<!-- Angular longhand ngFor -->

<template ngFor let-item="$implicit" [ngForOf]="items" let-i="index">

  {{i}} {{item}}

</template>

Jadi di bawah ini adalah sintaks khas untuk daftar sudut.

<ul>

  <li *ngFor="let item of items; let i = index">

    {{i}} {{item}}

  </li>

</ul>

Melihat kembali ngFor hal yang menarik berikutnya untuk dicatat adalah let item of items;. Kunci membiarkan merupakan bagian dari sintaks 2 Template sudut. biarkan menciptakan variabel lokal yang dapat dirujuk di mana saja di template kita. Jadi dalam kasus kami, kami menciptakan item let variabel lokal.

let i membuat template variabel lokal untuk mendapatkan indeks dari array. Jika Anda tidak perlu akses ke indeks dalam daftar Anda dengan ngFor hanya bermuara pada kode berikut.

<ul>

  <li *ngFor="let item of items">

    {{item}}

  </li>

</ul>

Satu hal yang perlu diperhatikan sintaks CamelCase diperkenalkan pada Alpha 52. Sebuah parser HTML baru diperkenalkan yang memungkinkan camelCasing di template untuk menggantikan sintaks kebab-kasus.

Lacak Dengan

Sudut 2 juga termasuk fitur trackBy dari 1.x sudut yang memungkinkan peningkatan kinerja dalam daftar render kami dengan melacak pengenal unik pada daftar barang-barang kami. The trackBy dalam versi yang lebih baru dari sudut yang sedikit berbeda dari sudut 1. Untuk menggunakan lagu oleh Anda harus lulus fungsi sebagai parameter dari komponen Anda.

<ul>

  <li *ngFor=" let item of items; trackBy: trackByFn;">

    {{item}}

  </li>

</ul>

// Method in component class

trackByFn(index, item) {

  return item.id;

}

Sintaks sudut yang baru akan memungkinkan sudut untuk bekerja dengan komponen web asli dan memperoleh manfaat menggunakan Komponen Web. Sudut akan membawa banyak perbaikan yang menarik lebih sudut 1 dan akan segera memungkinkan kita untuk membuat aplikasi web lebih terukur.

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

An invalid form control with name='catatan_verifikasi' is not focusable

Error Debugging

Pengalaman pertama menemui error:

An invalid form control with name='catatan_verifikasi' is not focusable.

Error tersebut dari console javaScript.

Penulis membaca bahwa masalah itu bisa disebabkan oleh field yang tersembunyi, yang memiliki atribut yang diperlukan, dan mungkin itu juga disebabkan karena kekurang telitian dalam penulisan script antara Swal Alert, javaScript, Ajax, ataupun dalam HTML-nya. Tapi yang jelas, dengan cara dibawah ini masalah itu terselesaikan. Yaitu menambah sintax "novalidate" di dalam form buka, berikut contohnya:

<form action="" method="post" novalidate>

...
</form>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Redirect ke Halaman Terakhir Setelah Login (HTTP_REFERER)

Redirect

Redirect ke Halaman Terakhir Setelah Login (HTTP_REFERER).

Dalam pemrograman web, sering kali hal itu dilupakan oleh programer. Ketika user sudah login dan mengakses halaman tertentu, kemudian tidak aktifitas selama waktu tertentu hingga pada akhirnya sesinya habis (session timeout). Ketika sesi sudah habis maka web secara otomatis mengarahkan ke user untuk login kembali. Kadang hal itu nampak wajar dan bagus-bagus saja, akan tetapi dalam beberapa kondisi hal itu tidak begitu bagus karena melupakan halaman terakhir yang user baca. Di bawah ini adalah salah satu contoh cara sederhana supaya web tetap mengarahkan ke halaman terakhir yang dibaca user setelah user login kembali.

HTML

Di form login di dalam form <form>...</form>

<input type="hidden" name="redirurl" value="<?php echo $_SERVER['HTTP_REFERER']; ?>">

Controllers

if (isset($_REQUEST['redirurl'])) {

   $url = $_REQUEST['redirurl']; // holds url for last page visited.

   header("Location:$url");

} else {

   redirect("dashboard");

}

atau
$ref = $_SERVER['HTTP_REFERER'];
header( 'refresh: 0; url='.$ref);

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.