4.1.1. Thư mục app

Phần chứa các component tương ứng với các chức năng tương ứng của phần mềm.

4.1.1.1. AppComponent

Đây là component chính của phần mềm Code:

  • app.component.ts ``ts import { Component } from '@angular/core'; import { initializeApp, database } from 'firebase'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { Question } from './question'; @Component({ selector: 'app-root', template: </app-menu> </router-outlet> </app-footer> `, }) export class AppComponent { title = 'Đề thi Vật Lý'; }
##### 4.1.1.2. HomeComponent
Là phần hiển thị ở phần thân của trang chủ.
 #####4.1.1.3. MenuComponent
 Là phần hiển thị ở phần menu của phần mềm
 Code: 
 * **menu.component.html**
 ```html
 <div class="container">
    <header id="header" class="header container">
        <div class="navbar navbar-fixed-top navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <img src="../assets/images/home.jpg" width="50" height="50" />
                    <a href="" color="white">{{title}}</a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-ex-collapse" color = "white">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown" *ngIf = "shows">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown" >Đăng nhập<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><button (click)="loginGoogle()">Đăng nhập với Google</button></li>
                                <li><button  (click)="loginFb()">Đăng nhập với Facebook</button></li>
                            </ul>
                        </li>
                        <li class="active" *ngIf="show">
                            <a><b>{{name.auth.displayName}}</b></a>
                        </li>
                        <li *ngIf="show">
                            <a><button (click)="logout()"><b>Đăng xuất</b></button></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a routerLink="/home" routerLinkActive="active"><img src="../assets/images/home-icon.png" width="50" height="50" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li class="active"><a routerLink="/home" routerLinkActive="active">Trang chủ</a></li>
                <li><a routerLink="/tailieu" routerLinkActive="active">Tài liệu</a></li>
                <li><a routerLink="/dethi" routerLinkActive="active">Đề thi</a></li>
                <li><a routerLink="/dethitest" routerLinkActive="active">Luyện thi</a></li>
                <li><a routerLink="/diendan" routerLinkActive="active">Diễn đàn</a></li>
                <li><a routerLink="/gioithieu" routerLinkActive="active">Giới thiệu</a></li>              
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</header><!-- /header -->
</div>
  • menu.component.ts

    import { Component, OnInit } from '@angular/core';
    import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
    import { Router } from '@angular/router';
    import { FirebaseService } from '../services/firebase.service';
    import { Dethi } from '../dethi';
    import { Question } from '../question';
    @Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.css'],
    providers: [FirebaseService]
    })
    export class MenuComponent implements OnInit {
    title = "Ôn Luyện Vật Lý";
    error: any;
    show = false;
    shows = true;
    name: any;
    private use_displayName: String;
    private user_email: String;
    constructor(public firebaseService: FirebaseService, public af: AngularFire,private router: Router) {
     this.af.auth.subscribe(auth => {
       if(auth) {
         this.name = auth;
       }
     });
    }
    ngOnInit() {
    }
    loginFb() {
     this.af.auth.login({
       provider: AuthProviders.Facebook,
       method: AuthMethods.Popup,
     }).then(
         (success) => {
         this.shows = false;
         this.show = true;
       }).catch(
         (err) => {
         this.error = err;
       })
    }
    
    loginGoogle() {
     this.af.auth.login({
       provider: AuthProviders.Google,
       method: AuthMethods.Popup,
     }).then(
         (success) => {
         this.shows = false;
         this.show = true;
       }).catch(
         (err) => {
         this.error = err;
       })
    }
    logout() {
     this.af.auth.logout().then(
       (success) => {
         this.shows = true;
         this.show = false;
       }
     );
    }
    }
    
    4.1.1.4 DethiComponent

    Là phần hiển thị danh sách đề thi được xem

  • dethi.component.html

    Hiển thị:

    Code:

    <content>
         <div class="container">
             <h3 class="text-center"><b>Đề thi thử Đại học môn Vật Lý</b></h3>
             <hr>
             <div class="row">
                 <div class="col-md-3" *ngFor="let xemdethi of dethi">
                     <a [routerLink]="['/xemdethi/'+ xemdethi.$key]">
                         <img src="" alt="" width="100%" height="200">
                         <p class="text-center"></p>
                     </a>
                     <hr>
                 </div>
             </div>
         </div>
    </content>
    
    4.1.1.5. XemdethiComponent

    Đây là phần xem đề thi trực tuyến và cho phép tải đề thi Hiển thị: Code:

  • xemdethi.component.html
    <content >
         <div class="container" >
             <div class="row">
                 <div class="col-md-12">
                     <h2 class="text-center"><b></b></h2>
                     <ul class="list-group">
                         <li class="list-group-item text-center"><h4><b>Đề bài</b></h4></li>
                         <div *ngFor="let a of quest">
                             <li class="list-group-item" *ngIf = "a.title == deth.title">
                                 <div class="well well-lg"  >
                                     <h4><span class=""><label></label></span></h4>
                                     <hr>
                                     <span><label><h4>Chọn câu trả lời đúng:</h4></label></span>
                                     <ul>
                                         <h5>
                                             <li class="radio" *ngFor = "let luachon of a.luachon" >
                                                 <label><b>+) </b>  </label>
                                             </li>
                                         </h5>
                                     </ul>
                                 </div>
                             </li>
                         </div>
                     </ul>
                     <a href="" target="_blank">
                         <button class="btn btn-success col-xs-3 well-sm col-md-offset-4">Tải đề thi</button>
                     </a>
                 </div>
             </div>
         </div>
    </content>
    
  • xemdethi.component.ts

    
    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute, Params } from '@angular/router';
    import { FirebaseService } from '../services/firebase.service';
    @Component({
    selector: 'app-xemdethi',
    templateUrl: './xemdethi.component.html'
    })
    export class XemdethiComponent implements OnInit {
    id: any;
    deth: any;
    quest: any;
    constructor(
     private firebaseService: FirebaseService,
     private router: Router,
     private route: ActivatedRoute,
    ) { }
    ngOnInit() {
     this.id = this.route.snapshot.params['id'];
     this.firebaseService.getDethiDetails(this.id).subscribe(deth => {
       this.deth = deth;
     });
     this.firebaseService.getQuestions().subscribe(quest => {
       this.quest = quest;
     });
    }
    }
    
    4.1.1.6 DethitestComponent

    Hiển thị danh sách các đề thi phục vụ cho thi trực tuyến Hiển thị: Code:

  • dethitest.component.html
    <content>
         <div class="container">
             <h3 class="text-center"><b>Thi thử Đại học môn Vật Lý</b></h3>
             <hr>
             <div class="row">
                 <div class="col-md-3" *ngFor="let lambai of dethi">
                     <a [routerLink]="['/lambai/'+ lambai.$key]">
                         <img src="" alt="" width="100%" height="200">
                         <p></p>
                     </a>
                 </div>
             </div>
         </div>
     </content>
    
  • dethitest.component.ts

    import { Component, OnInit } from '@angular/core';
    import { AngularFire, FirebaseListObservable } from 'angularfire2';
    import { FirebaseService } from '../services/firebase.service';
    @Component({
    selector: 'app-dethitest',
    templateUrl: './dethitest.component.html',
    styleUrls: ['/dethitest.component.css']
    })
    export class DethitestComponent implements OnInit {
    dethi: any;
    constructor(
     private af: AngularFire,
     private firebaseService: FirebaseService,
    ) { }
    
    ngOnInit() {
     this.firebaseService.getDethi().subscribe(dethi => {
       console.log(dethi);
       this.dethi = dethi;
     });
    }
    }
    
    4.1.1.7. LambaiComponent

    Đây là phần thi trực tuyến Hiển thị: Hình 4.1.1.7a- Xác nhận làm bài thi

    Hình 4.1.1.7b- Làm bài thi

    Hình 4.1.1.7c- Xem kết quả bài thi

    Sau khi làm bài xong, người dùng có thể trực tiếp xem đáp án của đề thi Hình 4.1.1.7d- Xem đáp án của đề thi

    Code:

  • lambai.component.html
    <div class="container" *ngIf = "xacnhan">
     <content>
         <div class="container">
             <h3 class="text-center">Bắt đầu làm bài</h3>
             <div class="table">
                 <table class="table table-bordered">
                     <thead>
                         <tr>
                             <th colspan="3"><h5 class="text-center text-success"><span>Xác Nhận Làm Bài Thi</span></h5></th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td></td>
                             <td>Thời gian: 60 phút</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
             <button name="bat_dau" class="btn btn-success col-xs-3 well-sm col-md-offset-4" value="Bắt đầu làm bài" (click) = "xacnhan!=xacnhan; lambai!=lambai; getClick2(); start()">Bắt đầu</button>
         </div>
     </content>
    </div>
    <content *ngIf = "lambai">
         <div class="container" *ngIf="show">
             <div class="row">
                 <div class="col-md-10">
                     <h2></h2>
             <ul class="list-group">
                 <li class="list-group-item">Đề bài</li>
                 <div *ngFor="let question of quest">
                     <li class="list-group-item" *ngIf = "question.title == deth.title">
                         <div class="well well-lg" >
                             <h4><span class=""><label></label></span></h4>
                             <hr>
                             <span><label><h4>Chọn câu trả lời đúng:</h4></label></span>
                             <div class="radio" *ngFor = "let luachon of question.luachon" >
                                 <label><input  #b type="radio" value = "" name = "" (click) = "check(deth.title, b.value)"></label>
                             </div>
                         </div>
                     </li>
                 </div>
             </ul>
                 </div>
                 <div class="col-md-2 ">
                     <div class="affix clock text-center">
                         <label><h3>Thời gian làm bài</h3></label>
                         <p>
                             <label class="text-center">
                                 <h4>
                                     <span id="h"></span> :
                                     <span id="m"></span> :
                                     <span id="s"></span>
                                 </h4>
                             </label>
                         </p>
                     </div>
                 </div>
             </div>
             <button *ngIf="show" name="end" class="btn btn-success col-xs-3 well-sm col-md-offset-4" value="Kết thúc làm bài" (click)="showHeroes!=showHeroes; showHeroe != showHeroe; getClick1()">Nộp bài</button>
         </div>
         <div class="container" *ngIf="shows" >
     <content>
         <div class="container">
             <h3 class="text-center"> Kết quả bài thi</h3>
             <div class="table">
                 <table class="table table-bordered">
                     <thead>
                         <tr>
                             <th colspan="" rowspan="" headers="" scope=""><p class="text-center">Điểm</p></th>
                             <th colspan="" rowspan="" headers="" scope=""><p class="text-center">Xem đáp án và lời giải</p></th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>
                                 <h1 class="text-center">NaN</h1>
                                 <h4 class="text-center">Số đáp án đúng: /40</h4>
                             </td>
                             <td>
                                 <h4 class="text-center">Nếu chưa hài lòng với kết quả, Bạn nên cố gắng tự kiểm tra lại bài làm trước khi xem đáp án hoặc lời giải!</h4>
                                 <button type="button" class="btn btn-primary col-md-4" (click) = "getClick3()">Xem đáp án</button>
                                 <button type="button" class="btn btn-primary col-md-4" (click) = "gotoDethitest()">Làm lại bài thi</button>    
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
             <button type="button" class="btn btn-success col-xs-3 well-sm col-md-offset-4"(click) = "gotoDethitest()">Kết thúc</button>
         </div>
     </content>
    </div>
    </content>
    <div class="container" *ngIf="da">
     <div class="row">
         <div class="col-md-10">
             <h2></h2>
             <ul class="list-group">
                 <li class="list-group-item">Đề bài</li>
                 <div *ngFor="let a of quest">
                     <li class="list-group-item" *ngIf = "a.title == deth.title">
                         <div class="well well-lg" >
                             <h4><span class=""><label></label></span></h4>
                             <hr>
                             <span><label><h4>Chọn câu trả lời đúng:</h4></label></span>
                             <div class="radio" *ngFor = "let luachon of a.luachon" >
                                 <label><input  #b type="radio" value = "" name = ""></label>
                             </div>
                             <label>Đáp án: </label>
                         </div>
                     </li>
                 </div>
             </ul>
         </div>
     </div>
    </div>
    
  • lambai.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ActivatedRoute, Params, Router }   from '@angular/router';
    import { Location }                 from '@angular/common';
    import { AngularFire, FirebaseListObservable } from 'angularfire2';
    import { FirebaseService } from '../services/firebase.service';
    @Component ({
     selector: 'my-lambai',
     templateUrl: './lambai.component.html',
     styleUrls: ['./lambai.component.css']
    })
    export class LambaiComponent implements OnInit {
     id: any;
     deth: any;
     quest: any;
     private score: number;
     private scores: number;
     private count: number;
     da = false;
     private shows = false;
     private show = true;
     xacnhan = true;
     lambai = false;
     public timer: any;
     public h: number;
     public m: number;
     public s: number;
     constructor(
       private location: Location,
       private route: ActivatedRoute,
       private router: Router,
       private af: AngularFire,
       private firebaseService: FirebaseService,
     ) { 
     }
    getClick1() {
     this.show = false;
     this.shows = true;
    }
    getClick2() {
     this.xacnhan = false;
     this.lambai = true;
    }
    getClick3() {
     this.da = true;
     this.shows = false;
    }
    ngOnInit(): void {
     this.score = 0;
     this.count = 0;
     this.scores = 0;
     this.id = this.route.snapshot.params['id'];
     this.firebaseService.getDethiDetails(this.id).subscribe(deth => {
       this.deth = deth;
     });
     this.firebaseService.getQuestions().subscribe(quest => {
       this.quest = quest;
     });
    }
    check(title: string, a: string) {
       let c = [];
         for (let i = 0; i < this.quest.length; i ++){
           c[i] = 0;
           if((this.quest[i].title == title) && (a == this.quest[i].answer)){
             c[i] =1;
             this.score+= c[i];
           }
         }
     }
    gotoDethitest() {
       let link = ['/dethitest'];
       this.router.navigate(link);
     }
    gotoDethi() {
     let link = ['/dethi'];
     this.router.navigate(link)
    }
    start() {
     this.h = 1;
     this.m = 0;
     this.s = 0;
      window.clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.s--;
        if (this.s === -1){
                     this.m -= 1;
                     this.s = 59;
                 }
                 if (this.m === -1){
                     this.h -= 1;
                     this.m = 59;
                 }
        if(this.h === -1) {
             window.clearInterval(this.timer);
             this.startFilling();
             this.getClick1();
           }
      }, 1000);
    }
    
    startFilling() {
     console.log(true);
    }
    }
    
    4.1.1.8. GioithieuComponent

    Đây là phần giới thiệu đôi chút về phần mềm

    4.1.1.9. DiendanComponent

    Phần liên kết đến fanpage trên Facebook: Ôn luyện Vật Lý

    4.1.1.10. services

    Phần liên kết đến cơ sở dữ liệu Code:

    • firebase.service.ts

      import { Injectable } from '@angular/core';
      import { AngularFire, FirebaseListObservable, FirebaseObjectObservable, AuthProviders, AuthMethods } from 'angularfire2';
      import { Http }       from '@angular/http';
      import { Observable }     from 'rxjs/Observable';
      import 'rxjs/add/operator/map';
      import { Dethi } from '../dethi';
      import { Question } from '../question';
      import { Tailieu } from '../tailieu';
      @Injectable()
      export class FirebaseService {
         dethi: FirebaseListObservable<any[]>;
         deth: FirebaseObjectObservable<any[]>;
         questions: FirebaseListObservable<any[]>;
         tailieu: FirebaseListObservable<any[]>;                                                                                            constructor(public af: AngularFire, private http: Http) {
         this.dethi = this.af.database.list('dethi') as FirebaseListObservable<Dethi[]>;
         this.questions = this.af.database.list('questions') as FirebaseListObservable<Question[]>;
         this.tailieu = this.af.database.list('tailieu') as FirebaseListObservable<Tailieu[]>;
      }
      search(term: string): Observable<Dethi[]> {
      return this.http
                 .get(`xemdethi/?$key=${term}`)
                 .map(response => response.json().data as Dethi[]);
      }
      loginWithGoogle() {
      return this.af.auth.login({
         provider: AuthProviders.Google,
         method: AuthMethods.Popup
      });
      }
      logout() {
          return this.af.auth.logout();
      }
      getDethi() {
         return this.dethi;
      }
      getDethiDetails(id) {
         this.deth = this.af.database.object('/dethi/' + id) as FirebaseObjectObservable<Dethi>
      return this.deth;
      }
      getQuestions() {
         return this.questions;
      }
      getTailieu() {
         return this.tailieu;
      }
      }
      
      4.1.1.10. TailieuComponent

      Phần hiển thị danh sách tài liệu của phần mềm

      Hiển thị:

Code:

  • tailieu.component.html
    <content>
          <div class="container">
              <h3 class="text-center"><b>Tài liệu ôn thi môn Vật Lý</b></h3>
              <hr>
              <div class="row">
                  <div class="col-md-3" *ngFor="let tailieu of tailieu">
                      <a href="" target="_blank">
                          <img src="" alt="" width="100%" height="200">
                          <p class="text-center"></p>
                      </a>
                      <hr>
                  </div>
              </div>
          </div>
    </content>
    
  • tailieu.component.ts
    import { Component, OnInit } from '@angular/core';
    import { AngularFire, FirebaseListObservable } from 'angularfire2';
    import { FirebaseService } from '../services/firebase.service';
    @Component({
    selector: 'app-tailieu',
    templateUrl: './tailieu.component.html',
    styleUrls: ['./tailieu.component.css']
    })
    export class TailieuComponent implements OnInit {
    tailieu: any;
    constructor(
      private af: AngularFire,
      private firebaseService: FirebaseService
    ) { }
    ngOnInit() {
      this.firebaseService.getTailieu().subscribe(tailieu => {
        this.tailieu = tailieu;
      });
    }
    }
    

results matching ""

    No results matching ""