Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1

Posted on November 16, 2019 by admin

Di tutorial ini kita akan menggunakan AdminLTE 2 untuk membuat login page dan dashboard. Tutorial ini akan dibagi menjadi 3 bagian. Bagian pertama akan mengintegrasikan Angular dengan AdminLTE, bagian kedua kita akan membuat login page AdminLTE, dan bagian ketiga akan membuat AdminLTE Dashboard. Download AdminLTE3 Download AdminLTE 2 dari adminlte.io Buka Page Source Halaman Dashboard Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1[…]

Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8

Posted on November 15, 2019 by admin

Untuk membuat sweetalert berfungsi pada aplikasi Angular 8, cara nya juga sama seperti dua tips sebelumnya. Langkah pertama, install sweetalert melalui npm : Install Sweetalert

npm i sweetalert2

1	npm i sweetalert2

Angular.json Tambahkan css dan js pada angular.json :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/sweetalert2/dist/sweetalert2.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/sweetalert2/dist/sweetalert2.all.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/sweetalert2/dist/sweetalert2.css",

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

"scripts": [

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

"node_modules/sweetalert2/dist/sweetalert2.all.min.js",

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

]

Modifikasi app.component.ts Modifikasi app.component.ts dengan import Swal from sweetalert dan OnInit component, karena kita ingin melihat apakah sweetalert berhasil diinstal Read more about Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8[…]

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[…]

indocoder.com