tambah screen tips dan tentang kami

src/app/app-routing.module.ts

@@ -3,8 +3,8 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'home',
+    path: 'cover',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+    loadChildren: () => import('./cover/cover.module').then( m => m.CoverPageModule)
   },
   {
     path: 'pemeriksaan',
@@ -15,14 +15,26 @@ const routes: Routes = [
     redirectTo: 'home',
     pathMatch: 'full'
   },
-  {
-    path: 'pemeriksaan',
-    loadChildren: () => import('./pemeriksaan/pemeriksaan.module').then( m => m.PemeriksaanPageModule)
-  },
   {
     path: 'indikator',
     loadComponent: () => import('./indikator/indikator.page').then((m) => m.IndikatorPage),
   },
+  {
+    path: 'cover',
+    loadChildren: () => import('./cover/cover.module').then( m => m.CoverPageModule)
+  },
+  {
+    path: 'identitas',
+    loadChildren: () => import('./identitas/identitas.module').then( m => m.IdentitasPageModule)
+  },
+  {
+    path: 'tips',
+    loadChildren: () => import('./tips/tips.module').then( m => m.TipsPageModule)
+  },
+  {
+    path: 'tentang-kami',
+    loadChildren: () => import('./tentang-kami/tentang-kami.module').then( m => m.TentangKamiPageModule)
+  },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,3 +1,20 @@
 <ion-app>
-  <ion-router-outlet></ion-router-outlet>
+  <ion-split-pane contentId="main-content">
+    <ion-menu contentId="main-content" type="overlay">
+      <ion-content>
+        <ion-list id="inbox-list">
+          <ion-list-header>Inbox</ion-list-header>
+          <ion-note>hi&#64;ionicframework.com</ion-note>
+
+          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
+            <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
+              <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
+              <ion-label>{{ p.title }}</ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet id="main-content"></ion-router-outlet>
+  </ion-split-pane>
 </ion-app>

src/app/app.component.scss

@@ -0,0 +1,119 @@
+ion-menu ion-content {
+    --background: var(--ion-item-background, var(--ion-background-color, #fff));
+  }
+  
+  ion-menu.md ion-content {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    --padding-top: 20px;
+    --padding-bottom: 20px;
+  }
+  
+  ion-menu.md ion-list {
+    padding: 20px 0;
+  }
+  
+  ion-menu.md ion-note {
+    margin-bottom: 30px;
+  }
+  
+  ion-menu.md ion-list-header,
+  ion-menu.md ion-note {
+    padding-left: 10px;
+  }
+  
+  ion-menu.md ion-list#inbox-list {
+    border-bottom: 1px solid var(--ion-background-color-step-150, #d7d8da);
+  }
+  
+  ion-menu.md ion-list#inbox-list ion-list-header {
+    font-size: 22px;
+    font-weight: 600;
+  
+    min-height: 20px;
+  }
+  
+  ion-menu.md ion-list#labels-list ion-list-header {
+    font-size: 16px;
+  
+    margin-bottom: 18px;
+  
+    color: #757575;
+  
+    min-height: 26px;
+  }
+  
+  ion-menu.md ion-item {
+    --padding-start: 10px;
+    --padding-end: 10px;
+    border-radius: 4px;
+  }
+  
+  ion-menu.md ion-item.selected {
+    --background: rgba(var(--ion-color-primary-rgb), 0.14);
+  }
+  
+  ion-menu.md ion-item.selected ion-icon {
+    color: var(--ion-color-primary);
+  }
+  
+  ion-menu.md ion-item ion-icon {
+    color: #616e7e;
+  }
+  
+  ion-menu.md ion-item ion-label {
+    font-weight: 500;
+  }
+  
+  ion-menu.ios ion-content {
+    --padding-bottom: 20px;
+  }
+  
+  ion-menu.ios ion-list {
+    padding: 20px 0 0 0;
+  }
+  
+  ion-menu.ios ion-note {
+    line-height: 24px;
+    margin-bottom: 20px;
+  }
+  
+  ion-menu.ios ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --min-height: 50px;
+  }
+  
+  ion-menu.ios ion-item.selected ion-icon {
+    color: var(--ion-color-primary);
+  }
+  
+  ion-menu.ios ion-item ion-icon {
+    font-size: 24px;
+    color: #73849a;
+  }
+  
+  ion-menu.ios ion-list#labels-list ion-list-header {
+    margin-bottom: 8px;
+  }
+  
+  ion-menu.ios ion-list-header,
+  ion-menu.ios ion-note {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  
+  ion-menu.ios ion-note {
+    margin-bottom: 8px;
+  }
+  
+  ion-note {
+    display: inline-block;
+    font-size: 16px;
+  
+    color: var(--ion-color-medium-shade);
+  }
+  
+  ion-item.selected {
+    --color: var(--ion-color-primary);
+  }

src/app/app.component.ts

@@ -6,5 +6,13 @@ import { Component } from '@angular/core';
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
+  public appPages = [
+    { title: 'Home', url: '/cover', icon: 'home' },
+    { title: 'Identitas', url: '/identitas', icon: 'people' },
+    { title: 'Pengukuran', url: '/pemeriksaan', icon: 'thermometer' },
+    { title: 'Grafik', url: '/indikator', icon: 'stats-chart' },
+    { title: 'Tips', url: '/tips', icon: 'bulb' },
+    { title: 'Tentang Kami', url: '/tentang-kami', icon: 'information-circle' },
+  ];
   constructor() {}
 }

src/app/cover/cover-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CoverPage } from './cover.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CoverPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CoverPageRoutingModule {}

src/app/cover/cover.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CoverPageRoutingModule } from './cover-routing.module';
+
+import { CoverPage } from './cover.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CoverPageRoutingModule
+  ],
+  declarations: [CoverPage]
+})
+export class CoverPageModule {}

src/app/cover/cover.page.html

@@ -0,0 +1,25 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Beranda</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Beranda</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title class="ion-text-center">
+        Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+</ion-content>

src/app/cover/cover.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoverPage } from './cover.page';
+
+describe('CoverPage', () => {
+  let component: CoverPage;
+  let fixture: ComponentFixture<CoverPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoverPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cover/cover.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cover',
+  templateUrl: './cover.page.html',
+  styleUrls: ['./cover.page.scss'],
+})
+export class CoverPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home-routing.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HomePage } from './home.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: HomePage,
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HomePageRoutingModule {}

src/app/home/home.page.scss

@@ -1,37 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-
-.custom-margin {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-.center-button-container {
-  display: flex;
-  justify-content: center;
-  padding: 10px;  /* Add padding to ensure it doesn't stick to the bottom */
-}

src/app/home/home.page.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { HomePage } from './home.page';
-
-describe('HomePage', () => {
-  let component: HomePage;
-  let fixture: ComponentFixture<HomePage>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [HomePage],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(HomePage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/home/home.page.ts

@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
-  constructor(private router: Router) { }
-  goToNewPage() {
-    this.router.navigate(['/pemeriksaan']); 
-  }
-
-}

src/app/identitas/identitas-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IdentitasPage } from './identitas.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: IdentitasPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IdentitasPageRoutingModule {}

src/app/identitas/identitas.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { IdentitasPageRoutingModule } from './identitas-routing.module';
+
+import { IdentitasPage } from './identitas.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    IdentitasPageRoutingModule
+  ],
+  declarations: [IdentitasPage]
+})
+export class IdentitasPageModule {}

src/app/identitas/identitas.page.html

@@ -1,19 +1,18 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
-    <ion-title>
+    <ion-buttons slot="start">
-      Blank
+      <ion-menu-button></ion-menu-button>
-    </ion-title>
+    </ion-buttons>
+    <ion-title>Identitas</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Biodata</ion-title>
+      <ion-title size="large">Identitas</ion-title>
     </ion-toolbar>
   </ion-header>
-
- 
   <ion-list>
     <ion-item>
       <ion-label position="stacked">Nama</ion-label>
@@ -87,8 +86,6 @@
       <ion-label position="stacked">Tanggal Pengisian Buku Pertamakali</ion-label>
       <ion-input type="date"></ion-input>
     </ion-item>
-    <div class="center-button-container">
+    <ion-button expand="block" color="primary">Simpan</ion-button>
-      <ion-button color="primary" (click)="goToNewPage()">Selanjutnya</ion-button>
-    </div>
   </ion-list>
 </ion-content>

src/app/identitas/identitas.page.scss

@@ -0,0 +1,37 @@
+#container {
+    text-align: center;
+  
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+  
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
+  
+    color: #8c8c8c;
+  
+    margin: 0;
+  }
+  
+  #container a {
+    text-decoration: none;
+  }
+  
+  .custom-margin {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  .center-button-container {
+    display: flex;
+    justify-content: center;
+    padding: 10px;  /* Add padding to ensure it doesn't stick to the bottom */
+  }

src/app/identitas/identitas.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IdentitasPage } from './identitas.page';
+
+describe('IdentitasPage', () => {
+  let component: IdentitasPage;
+  let fixture: ComponentFixture<IdentitasPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdentitasPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/identitas/identitas.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-identitas',
+  templateUrl: './identitas.page.html',
+  styleUrls: ['./identitas.page.scss'],
+})
+export class IdentitasPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/indikator/indikator.page.html

@@ -1,11 +1,8 @@
-<ion-header>
+<ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
-    <ion-title>
+    <ion-title>Grafik</ion-title>
-      Charts
-    </ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
   <ion-card>
     <ion-card-title class="ion-padding-start">Line Chart</ion-card-title>

src/app/pemeriksaan/pemeriksaan.page.html

@@ -1,13 +1,16 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
-    <ion-title>Pemeriksaan</ion-title>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Pengukuran</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Pemeriksaan</ion-title>
+      <ion-title size="large">Pengukuran</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-list>
@@ -86,7 +89,7 @@
       <ion-textarea placeholder="Tuliskan Keluhan atau Perasaan"></ion-textarea>
     </ion-item>
 
-    <ion-button expand="block" (click)="goToNewPage()" color="primary">Submit</ion-button>
+    <ion-button expand="block" color="primary">Simpan</ion-button>
   </ion-list>
 </ion-content>
 

src/app/tentang-kami/tentang-kami-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TentangKamiPage } from './tentang-kami.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TentangKamiPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TentangKamiPageRoutingModule {}

src/app/tentang-kami/tentang-kami.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TentangKamiPageRoutingModule } from './tentang-kami-routing.module';
+
+import { TentangKamiPage } from './tentang-kami.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TentangKamiPageRoutingModule
+  ],
+  declarations: [TentangKamiPage]
+})
+export class TentangKamiPageModule {}

src/app/tentang-kami/tentang-kami.page.html

@@ -0,0 +1,61 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Tentang Kami</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tentang Kami</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        Deskripsi Sistem
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        <h2>Created by</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="person" slot="start"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>Email</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="at-outline" slot="start"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>No. Telepon</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/tentang-kami/tentang-kami.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TentangKamiPage } from './tentang-kami.page';
+
+describe('TentangKamiPage', () => {
+  let component: TentangKamiPage;
+  let fixture: ComponentFixture<TentangKamiPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TentangKamiPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tentang-kami/tentang-kami.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tentang-kami',
+  templateUrl: './tentang-kami.page.html',
+  styleUrls: ['./tentang-kami.page.scss'],
+})
+export class TentangKamiPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tips/tips-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TipsPage } from './tips.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TipsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TipsPageRoutingModule {}

src/app/tips/tips.module.ts

@@ -1,19 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
-import { HomePage } from './home.page';
 
-import { HomePageRoutingModule } from './home-routing.module';
+import { IonicModule } from '@ionic/angular';
 
+import { TipsPageRoutingModule } from './tips-routing.module';
+
+import { TipsPage } from './tips.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    HomePageRoutingModule
+    TipsPageRoutingModule
   ],
-  declarations: [HomePage]
+  declarations: [TipsPage]
 })
-export class HomePageModule {}
+export class TipsPageModule {}

src/app/tips/tips.page.html

@@ -0,0 +1,47 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Tips</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tips</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        TRIK AGAR SEHAT BUGAR SETIAP HARI
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        TRIK SEHAT BAGI PENDERITA DIABETES MELLITUS (DM) / KENCING MANIS
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/tips/tips.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TipsPage } from './tips.page';
+
+describe('TipsPage', () => {
+  let component: TipsPage;
+  let fixture: ComponentFixture<TipsPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TipsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tips/tips.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tips',
+  templateUrl: './tips.page.html',
+  styleUrls: ['./tips.page.scss'],
+})
+export class TipsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}