home

22-july-2020/my-app/.angulardoc.json

 {
-  "repoId": "de251163-a533-47ca-80ca-afe94694debb",
+  "repoId": "3ae6f6a7-fd70-4973-bf02-7c452c232276",
   "lastSync": 0
 }
\ No newline at end of file

22-july-2020/my-app/README.md

-# MyApp
+# Myapp
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2.
 

22-july-2020/my-app/angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "my-app": {
+    "myapp": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/my-app",
+            "outputPath": "dist/myapp",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -66,18 +66,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "my-app:build"
+            "browserTarget": "myapp:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "my-app:build:production"
+              "browserTarget": "myapp:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "my-app:build"
+            "browserTarget": "myapp:build"
           }
         },
         "test": {
@@ -114,15 +114,15 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "my-app:serve"
+            "devServerTarget": "myapp:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "my-app:serve:production"
+              "devServerTarget": "myapp:serve:production"
             }
           }
         }
       }
     }},
-  "defaultProject": "my-app"
+  "defaultProject": "myapp"
 }

22-july-2020/my-app/e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('my-app app is running!');
+    expect(page.getTitleText()).toEqual('myapp app is running!');
   });
 
   afterEach(async () => {

22-july-2020/my-app/karma.conf.js

@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/my-app'),
+      dir: require('path').join(__dirname, './coverage/myapp'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },

22-july-2020/my-app/package.json

 {
-  "name": "my-app",
+  "name": "myapp",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

22-july-2020/my-app/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { StudentComponent } from './student/student.component';
+import { LecturerComponent } from './lecturer/lecturer.component';
+import { ScoreComponent } from './score/score.component';
 
-
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'student', component: StudentComponent },
+  { path: 'lecturer', component: LecturerComponent },
+  { path: 'score', component: ScoreComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

22-july-2020/my-app/src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'my-app'`, () => {
+  it(`should have as title 'myapp'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('my-app');
+    expect(app.title).toEqual('myapp');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('my-app app is running!');
+    expect(compiled.querySelector('.content span').textContent).toContain('myapp app is running!');
   });
 });

22-july-2020/my-app/src/app/app.component.ts

@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Cumulative Record';
+  title = 'myapp';
 }

22-july-2020/my-app/src/app/app.module.ts

@@ -3,10 +3,18 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { StudentComponent } from './student/student.component';
+import { LecturerComponent } from './lecturer/lecturer.component';
+import { ScoreComponent } from './score/score.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    StudentComponent,
+    LecturerComponent,
+    ScoreComponent
   ],
   imports: [
     BrowserModule,

22-july-2020/my-app/src/app/home/home.component.html

+<div class="container">
+  <br />
+  <div>
+    <h1>
+      {{ title }}
+    </h1>
+  </div>
+  <div *ngFor="let course of courses; let i = index">
+    <h5>{{ course.title }}</h5>
+    <p>{{ course.description }}</p>
+    <p>
+      <span style="font-weight: bold;">Lecturer:</span> {{ lecturers[i].name }}
+    </p>
+    <p>รายชื่อนักศึกษา</p>
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">ID</th>
+          <th scope="col">Name</th>
+          <th scope="col">Email</th>
+          <th scope="col">Score</th>
+          <th scope="col">Full_mark</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let student of students; let i = index">
+          <th scope="row">{{ i + 1 }}</th>
+          <td>{{ student.id }}</td>
+          <td>{{ student.name }}</td>
+          <td>{{ student.email }}</td>
+          <td>{{ scores[i].score }}</td>
+          <td>{{ scores[i].full_mark }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="space"></div>
+    <hr />
+  </div>
+</div>

22-july-2020/my-app/src/app/home/home.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

22-july-2020/my-app/src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { Student } from '../models/students';
+import { STUDENTS } from '../mock/mock-students';
+
+import { Lecturer } from '../models/lecturers';
+import { LECTURER } from '../mock/mock-lecturers';
+
+import { Score } from '../models/scores';
+import { SCORES } from '../mock/mock-scores';
+
+import { Course } from '../models/courses';
+import { COURSES } from '../mock/mock-courses';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent implements OnInit {
+  title = 'Course Web Application and Mobile Application';
+  descriptiion = 'คำอธิบายรายวิชา';
+  students: Student[] = STUDENTS;
+  lecturers: Lecturer[] = LECTURER;
+  scores: Score[] = SCORES;
+  courses: Course[] = COURSES;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

22-july-2020/my-app/src/app/lecturer/lecturer.component.html

+<div class="container">
+    <br>
+      <h1>
+        {{ title }}
+      </h1>
+      <div>
+        <table class="table" style="text-align: center;">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tr *ngFor="let lecturer of lecturers">
+            <td>{{ lecturer.id }}</td>
+            <td>{{ lecturer.name }}</td>
+          </tr>
+        </table>
+        <div class="space"></div>
+      </div>
+    </div>

22-july-2020/my-app/src/app/lecturer/lecturer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LecturerComponent } from './lecturer.component';
+
+describe('LecturerComponent', () => {
+  let component: LecturerComponent;
+  let fixture: ComponentFixture<LecturerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LecturerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LecturerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

22-july-2020/my-app/src/app/lecturer/lecturer.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Lecturer } from '../models/lecturers';
+import { LECTURER } from '../mock/mock-lecturers';
+
+@Component({
+  selector: 'app-lecturer',
+  templateUrl: './lecturer.component.html',
+  styleUrls: ['./lecturer.component.scss'],
+})
+export class LecturerComponent implements OnInit {
+  title = 'รายชื่ออาจารย์';
+  lecturers: Lecturer[] = LECTURER;
+  constructor() {}
+
+  ngOnInit(): void {}
+}

22-july-2020/my-app/src/app/mock/mock-courses.ts

+import {Course} from '../models/courses';
+
+export const COURSES: Course[] = [
+  {title: 'Vue.JS', description: 'ปัจจุบัน Vue.js เป็นหนึ่งใน Web Framework ที่คนนิยมนำมาพัฒนาเว็บไซต์ (3 เจ้าใหญ่ๆ คือ React, Vue, Angular นั่นเอง) วันนี้ผมจะมาทำ Tutorial อธิบายว่า Vue.js คืออะไร? ไปจนถึงสอนวิธีการใช้งาน Vue.js ตั้งแต่เริ่มต้น เข้าใจ Concept ภาพรวม จนจบบทความ ทุกคนสามารถสร้างเว็บไซต์ได้เองโดยใช้ Vue.js'},
+  {title: 'Flutter', description: 'Flutter คือ Framework ที่ใช้สร้าง UI สำหรับ mobile application ที่สามารถทำงานข้ามแพลตฟอร์มได้ทั้ง iOS และ Android ในเวลาเดียวกัน โดยภาษาที่ใช้ใน Flutter นั้นจะเป็นภาษา dart ซึ่งถูกพัฒนาโดย Google และที่สำคัญคือเป็น open source ที่สามารถใช้งานได้แบบฟรี ๆ อีกด้วย'},
+  {title: 'Laravel', description: 'Laravel คือ PHP Framework รูปแบบ MVC และเป็นที่นิยมใช้มากของนักพัฒนาเระบบ หรือเว็บแอพพลิเคชั่นในปัจจุบันเพราะมีความสามรถที่ช่วยในการทำงานให้ง่ายและเป็นระเบียบมากขึ้น'},
+  {title: 'Ionic', description: 'Ionic Framework คือเครื่องมือในการสร้าง HTML , CSS และ JavaScript เพื่อใช้ในการสร้าง Mobile Application ซึ่งสามารถใช้งานได้ค่อนข้างง่าย Ionic Framework เป็นเครื่องมือสร้างแอพมือถือที่สามารถสร้างทีเดียว สามารถใช้งานได้บนระบบปฏิบัติการ iOS, Android และ Windows'},
+  {title: 'React', description: 'React เป็น Javascript Library หรือจะเรียกว่าเป็น Javascript Framework ก็ได้ ที่เราใช้สำหรับสร้างหน้าเว็บของเราให้ออกมาเจ๋ง และแจ๋ว พร้อมด้วย action ต่างๆ ที่ทำให้เว็บของเราดูน่าสนใจ'},
+];

22-july-2020/my-app/src/app/mock/mock-lecturers.ts

+import {Lecturer} from '../models/lecturers';
+
+export const LECTURER: Lecturer[] = [
+  {id: 487985632, name: 'Huxley Ashley'},
+  {id: 798652132, name: 'Otis Monaghan'},
+  {id: 123548546, name: 'Tyler-Jay Donovan'},
+  {id: 788596413, name: 'Jak Drummond'},
+  {id: 489762156, name: 'Kiya Walter'},
+];

22-july-2020/my-app/src/app/mock/mock-scores.ts

+import { Score } from '../models/scores';
+
+export const SCORES: Score[] = [
+  {student: 'Emeli Neville', score: 82, full_mark: 100},
+  {student: 'Ibrahim Alfaro', score: 78, full_mark: 100},
+  {student: 'Sofija Ford', score: 65, full_mark: 100},
+  {student: 'Conal Quintana', score: 98, full_mark: 100},
+  {student: 'Dion Avila', score: 61, full_mark: 100},
+];

22-july-2020/my-app/src/app/mock/mock-students.ts

-import { Student } from '../models/student';
+import {Student} from '../models/students';
 
 export const STUDENTS: Student[] = [
-    {id: 60111111, name: 'Tom Hank', email: 'tom@gmail.com'},
-    {id: 60111112, name: 'Jack Daniel', email: 'jack@gmail.com'},
-    {id: 60111113, name: 'Tommy Lee Jones', email: 'tjones@gmail.com'},
-    {id: 60111114, name: 'Jack Dawson', email: 'jdawson@gmail.com'},
+  {id: 60114440374, name: 'Emeli Neville', email: 'Emeli.ne@gmail.com'},
+  {id: 60114440375, name: 'Ibrahim Alfaro', email: 'Ibrahim.al@gmail.com'},
+  {id: 60114440376, name: 'Sofija Ford', email: 'Sofija.fo@gmail.com'},
+  {id: 60114440377, name: 'Conal Quintana', email: 'Conal.qu@gmail.com'},
+  {id: 60114440378, name: 'Dion Avila', email: 'Dion.av@gmail.com'},
 ];

22-july-2020/my-app/src/app/models/courses.ts

+export interface Course {
+  title: string;
+  description: string;
+}

22-july-2020/my-app/src/app/models/lecturers.ts

+export interface Lecturer {
+  id: number;
+  name: string;
+}
\ No newline at end of file

22-july-2020/my-app/src/app/models/scores.ts

+export interface Score {
+  student: string;
+  score: number;
+  full_mark: number;
+}

22-july-2020/my-app/src/app/score/score.component.html

+<div class="container">
+  <br />
+  <h1>
+    {{ title }}
+  </h1>
+  <div>
+    <table class="table" style="text-align: center;">
+      <thead>
+        <tr>
+          <th>Student</th>
+          <th>Score</th>
+          <th>Max_score</th>
+        </tr>
+      </thead>
+      <tr *ngFor="let score of scores">
+        <td>{{ score.student }}</td>
+        <td>{{ score.score }}</td>
+        <td>{{ score.full_mark }}</td>
+      </tr>
+    </table>
+    <div class="space"></div>
+  </div>
+</div>

22-july-2020/my-app/src/app/score/score.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScoreComponent } from './score.component';
+
+describe('ScoreComponent', () => {
+  let component: ScoreComponent;
+  let fixture: ComponentFixture<ScoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScoreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

22-july-2020/my-app/src/app/score/score.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { Score } from '../models/scores';
+import { SCORES } from '../mock/mock-scores';
+
+@Component({
+  selector: 'app-score',
+  templateUrl: './score.component.html',
+  styleUrls: ['./score.component.scss'],
+})
+export class ScoreComponent implements OnInit {
+  title = 'คะแนน';
+  scores: Score[] = SCORES;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

22-july-2020/my-app/src/app/student/student.component.html

+<div class="container">
+  <br />
+  <h1>
+    {{ title }}
+  </h1>
+  <div>
+    <table class="table" style="text-align: center;">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>E-mail</th>
+        </tr>
+      </thead>
+      <tr *ngFor="let student of students; let i = index">
+        <td>{{ student.id }}</td>
+        <td>{{ student.name }}</td>
+        <td>{{ student.email }}</td>
+      </tr>
+    </table>
+    <div class="space"></div>
+  </div>
+</div>

22-july-2020/my-app/src/app/student/student.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentComponent } from './student.component';
+
+describe('StudentComponent', () => {
+  let component: StudentComponent;
+  let fixture: ComponentFixture<StudentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StudentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StudentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

22-july-2020/my-app/src/app/student/student.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { Student } from '../models/students';
+import { STUDENTS } from '../mock/mock-students';
+@Component({
+  selector: 'app-student',
+  templateUrl: './student.component.html',
+  styleUrls: ['./student.component.scss'],
+})
+export class StudentComponent implements OnInit {
+  title = 'รายชื่อนักศึกษา';
+  students: Student[] = STUDENTS;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

22-july-2020/my-app/src/index.html

 <!doctype html>
 <html lang="en">
 <head>
-
   <meta charset="utf-8">
-  <title>Toppic</title>
+  <title>Myapp</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>
 </html>