Commit 92c8f837 authored by Kriengkrai Yothee's avatar Kriengkrai Yothee

home

parent c88b6a72
{ {
"repoId": "de251163-a533-47ca-80ca-afe94694debb", "repoId": "3ae6f6a7-fd70-4973-bf02-7c452c232276",
"lastSync": 0 "lastSync": 0
} }
\ No newline at end of file
# MyApp # Myapp
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2.
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"my-app": { "myapp": {
"projectType": "application", "projectType": "application",
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist/my-app", "outputPath": "dist/myapp",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
...@@ -66,18 +66,18 @@ ...@@ -66,18 +66,18 @@
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "my-app:build" "browserTarget": "myapp:build"
}, },
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "my-app:build:production" "browserTarget": "myapp:build:production"
} }
} }
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "my-app:build" "browserTarget": "myapp:build"
} }
}, },
"test": { "test": {
...@@ -114,15 +114,15 @@ ...@@ -114,15 +114,15 @@
"builder": "@angular-devkit/build-angular:protractor", "builder": "@angular-devkit/build-angular:protractor",
"options": { "options": {
"protractorConfig": "e2e/protractor.conf.js", "protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve" "devServerTarget": "myapp:serve"
}, },
"configurations": { "configurations": {
"production": { "production": {
"devServerTarget": "my-app:serve:production" "devServerTarget": "myapp:serve:production"
} }
} }
} }
} }
}}, }},
"defaultProject": "my-app" "defaultProject": "myapp"
} }
...@@ -10,7 +10,7 @@ describe('workspace-project App', () => { ...@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
it('should display welcome message', () => { it('should display welcome message', () => {
page.navigateTo(); page.navigateTo();
expect(page.getTitleText()).toEqual('my-app app is running!'); expect(page.getTitleText()).toEqual('myapp app is running!');
}); });
afterEach(async () => { afterEach(async () => {
......
...@@ -16,7 +16,7 @@ module.exports = function (config) { ...@@ -16,7 +16,7 @@ module.exports = function (config) {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/my-app'), dir: require('path').join(__dirname, './coverage/myapp'),
reports: ['html', 'lcovonly', 'text-summary'], reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true
}, },
......
This diff is collapsed.
{ {
"name": "my-app", "name": "myapp",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
......
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; 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({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] exports: [RouterModule],
}) })
export class AppRoutingModule { } export class AppRoutingModule {}
...@@ -20,16 +20,16 @@ describe('AppComponent', () => { ...@@ -20,16 +20,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy(); expect(app).toBeTruthy();
}); });
it(`should have as title 'my-app'`, () => { it(`should have as title 'myapp'`, () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app.title).toEqual('my-app'); expect(app.title).toEqual('myapp');
}); });
it('should render title', () => { it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges(); fixture.detectChanges();
const compiled = fixture.nativeElement; 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!');
}); });
}); });
...@@ -3,8 +3,8 @@ import { Component } from '@angular/core'; ...@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
title = 'Cumulative Record'; title = 'myapp';
} }
...@@ -3,10 +3,18 @@ import { NgModule } from '@angular/core'; ...@@ -3,10 +3,18 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 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({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
HomeComponent,
StudentComponent,
LecturerComponent,
ScoreComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
<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>
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();
});
});
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 {}
}
<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>
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();
});
});
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 {}
}
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 ต่างๆ ที่ทำให้เว็บของเราดูน่าสนใจ'},
];
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'},
];
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},
];
import { Student } from '../models/student'; import {Student} from '../models/students';
export const STUDENTS: Student[] = [ export const STUDENTS: Student[] = [
{id: 60111111, name: 'Tom Hank', email: 'tom@gmail.com'}, {id: 60114440374, name: 'Emeli Neville', email: 'Emeli.ne@gmail.com'},
{id: 60111112, name: 'Jack Daniel', email: 'jack@gmail.com'}, {id: 60114440375, name: 'Ibrahim Alfaro', email: 'Ibrahim.al@gmail.com'},
{id: 60111113, name: 'Tommy Lee Jones', email: 'tjones@gmail.com'}, {id: 60114440376, name: 'Sofija Ford', email: 'Sofija.fo@gmail.com'},
{id: 60111114, name: 'Jack Dawson', email: 'jdawson@gmail.com'}, {id: 60114440377, name: 'Conal Quintana', email: 'Conal.qu@gmail.com'},
{id: 60114440378, name: 'Dion Avila', email: 'Dion.av@gmail.com'},
]; ];
export interface Course {
title: string;
description: string;
}
export interface Lecturer {
id: number;
name: string;
}
\ No newline at end of file
export interface Score {
student: string;
score: number;
full_mark: number;
}
<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>
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();
});
});
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 {}
}
<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>
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();
});
});
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 {}
}
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Toppic</title> <title>Myapp</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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> </head>
<body> <body>
<app-root></app-root> <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> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment