Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3

Posted on November 16, 2019 by admin

Buat Dashboard Module

ng g m dashboard --routing

1	ng g m dashboard --routing

Buat Dasboard Component di dalam dashboard module

ng g c ./dashboard/dashboard --skipTests=true

1	ng g c ./dashboard/dashboard --skipTests=true

Buat Layout Module Layout Module ini akan digunakan sebagai layout utama website seperti header, footer, sidebar.

ng g m layout --routing

1	ng g m layout --routing

Buat topnavbar Component

ng g c ./layout/topnavbar --skipTests=true

1	ng g c ./layout/topnavbar --skipTests=true

Buat asidenavbar Component

ng g c ./layout/asidenavbar --skipTests=true

1	ng g c ./layout/asidenavbar --skipTests=true

Buat footernavbar Component

ng g c ./layout/footernavbar --skipTests=true

1	ng g c ./layout/footernavbar --skipTests=true

Buat settingsnavbar Component

ng g c ./layout/settingsnavbar --skipTests=true

1	ng g c ./layout/settingsnavbar --skipTests=true

Export Component di layout.module.ts Export seluruh component yang baru dibuat Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3[…]

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2

Posted on November 16, 2019 by admin

Di bagian 2 kita akan membuat login page adminLTE. Berikut adalah langkahnya : Modifikasi app.component.html

<router-outlet></router-outlet>

1	<router-outlet></router-outlet>

Buat Login Module

ng g m login --routing

1	ng g m login --routing

Buat Login Component di Dalam Login Module

ng g c ./login/login --skipTests=true

1	ng g c ./login/login --skipTests=true

Import LoginModule ke Dalam app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LoginModule } from './login/login.module';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

LoginModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Konfigurasi Login Routing pada login-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';


const routes: Routes = [
  {path: 'login', component: LoginComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';

const routes: Routes = [

{path: 'login', component: LoginComponent}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class LoginRoutingModule { }

Redirect ke login page sewaktu aplikasi di jalankan Modifikasi app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{path: '', redirectTo: 'login', pathMatch: 'full'}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Page Source AdminLTE Login Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2[…]

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

Fliter Post by Author – WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (7)

Posted on September 13, 2018October 11, 2018 by admin

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (7) – Filter Post by Author In this seventh part, we will : Filter the post based on author Utilize Gravater Filter the Post by Author With this feature, the visitor will be able to see the post written by certain author when they click the author name Read more about Fliter Post by Author – WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (7)[…]

WordPress-Like Blog Laravel 5.6 and AdminLTE 3 (3) – Create Dummy Data

Posted on August 25, 2018October 11, 2018 by admin

In this third part of creating WordPress-Like Blog using Laravel 5.6 and AdminLTE 3, we will : Create Post model and posts table Prepare some dummy data using database seeder Before we proceed, we need to make sure the database information inside .env file has been properly set according to your database credentials :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_adminlte
DB_USERNAME=root
DB_PASSWORD=root

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel_adminlte

DB_USERNAME=root

DB_PASSWORD=root

indocoder.com

Tag: AdminLTE

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 3

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2

Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 1

Fliter Post by Author – WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (7)

WordPress-Like Blog Laravel 5.6 and AdminLTE 3 (3) – Create Dummy Data