Angular Tips 2 : Menginstall Font Awesome pada Angular 8

Posted on November 15, 2019 by admin

Setelah di tips sebelumnya kita berhasil menginstall boostrap, saat ini kita akan menginstall font awesome untuk mengaktifkan icon. Install Font Awesome Seperti pada dokumentasinya di https://fontawesome.com/, untuk menginstall melalui npm adalah dengan perintah berikut:

npm install --save-dev @fortawesome/fontawesome-free

1	npm install --save-dev @fortawesome/fontawesome-free

Tambahkan file css dan js font awesome pada angular.json Selanjutnya, pada file angular.json tambahkan file berikut :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css",

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/@fortawesome/fontawesome-free/js/all.min.js"

]

Restart Angular Restart Read more about Angular Tips 2 : Menginstall Font Awesome pada Angular 8[…]

Angular Tips 1 : Menginstall Bootstrap pada Angular 8

Posted on November 15, 2019November 15, 2019 by admin

Menginstall bootstrap pada angular 8 sangat mudah. Pertama-tama setelah kita membuat aplikasi angular, tambahkan satu button bootstrap pada app.component.html di atas resource:

<button class="btn btn-primary">Bootstrap Button</button>

  <!-- Resources -->
  <h2>Resources</h2>

<button class="btn btn-primary">Bootstrap Button</button>

<h2>Resources</h2>

Saat pertama kali dijalankan, kelas bootstrap tidak akan terinstall dan tampilan button masih sederhana. Untuk mengaktifkan kelas bootstrap, install package bootstrap dari npm :

npm install --save bootstrap

1	npm install --save bootstrap

Setelah itu, modifikasi angular.json dengan menambahkan bootstrap Read more about Angular Tips 1 : Menginstall Bootstrap pada Angular 8[…]

Basic Tutorial CRUD pada Angular 8

Posted on November 11, 2019November 12, 2019 by admin

Di tutorial ini kita akan bersama-sama membuat proses CRUD pada Angular 8. Pada tutorial ini, yang dibutuhkan adalah Angular versi 8 untuk membuat frontendnya, dan Laravel untuk membuat web servicenya. Tabel yang digunakan adalah mysql, nama database bebas, nama tabel yang akan kita gunakan adalah tabel employee :

CREATE TABLE `employee` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `last_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `status` int(11) DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE `employee` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`first_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`last_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`status` int(11) DEFAULT 1,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Membuat Web Service dengan Laravel Buat Read more about Basic Tutorial CRUD pada Angular 8[…]

Tutorial Flutter : Membuat Aplikasi Interaktif Sederhana dengan Stateful Wigdet

Posted on July 6, 2019July 14, 2019 by admin

Stateful vs Stateless Widget State adalah property dari sebuah Widget. Widget yang extends Stateless Widget tidak pernah berubah dan selalu konstan. Stateful Widget akan berubah ketika user melakukan interaksi dengannya. Interaksi user secara langsung tidak terdapat pada Stateless Widget. Untuk mengimplemetasikan StatefulWidget, berikut langkah-langkahnya (Source : Smartherd Flutter) : Membuat Stateful Widget Kita akan Read more about Tutorial Flutter : Membuat Aplikasi Interaktif Sederhana dengan Stateful Wigdet[…]

Tutorial Flutter : Widget yang Sering Digunakan Pada Flutter

Posted on June 29, 2019July 4, 2019 by admin

Aplikasi Flutter adalah kumpulan dari berbagai widget. Pada tutorial kali ini, kita akan membahas widget-widget yang biasa digunakan saat membangun aplikasi Flutter. Beberapa widget yang umum digunakan adalah : Rows and Columns Text Scaffold and AppBar Raised Button Alert Dialog Box Constraints Container Image Size, Margin, and Padding ListView Floating Action Button Container Widget Kita Read more about Tutorial Flutter : Widget yang Sering Digunakan Pada Flutter[…]

indocoder.com