4. Cài đặt và kiểm thử hệ thống

1. Màn hình và mã nguồn một số trang

• Màn hình và mã nguồn trang chủ

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>
                                <b>Danh sách videos:</b>
                            </h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                @foreach($video as $vd)
                                    <div class="col-md-4 well">
                                        <a href="video/{{$vd->id}}"><img class="img-responsive"
                                                                         alt="Bootstrap Image Preview"
                                                                         src="{{$vd->image}}"/></a>
                                        <br>
                                        <a href="video/{{$vd->id}}">{{$vd->name}}</a>
                                        <br>
                                        {{$vd->singer}}
                                        <br>
                                        <i class="glyphicon glyphicon-eye-open"></i>{{$vd->view}} lượt xem
                                    </div>
                                @endforeach
                                <hr>
                            </div>
                        </div>
                    </div>
                    {!!$video->links()!!}
                </div>
                <div class="col-md-2 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>
                                <b>Top xem nhiều</b>
                            </h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <?php
                            $data = $video->sortByDesc('view')->take(4);
                            ?>
                            @foreach($data->all() as $dt)
                                <div class="row">
                                    <div class="col-md-12 well">
                                        <a href="#"><img class="img-responsive" alt="Bootstrap Image Preview"
                                                         src="{{$dt->image}}"/></a>
                                        <br>
                                        <a href="#">{{$dt->name}}</a>
                                        <br>
                                        {{$dt->singer}}
                                        <br>
                                        <i class="glyphicon glyphicon-eye-open"></i>{{$dt->view}} lượt xem
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

• Màn hình và mã nguồn trang xem video

<div class="container well">
    <div class="row">
        <div class="col-md-8 well video-content row-eq-heigh" id="divVideo">
            <!--<figure id="videoContainer" data-fullscreen="false">-->
            <video id="video1" controls class="video-js vjs-default-skin vjs-big-play-centered" width="100%" height="100%" data-setup='{"fluid": true}'>
                <source src="{{$video->source}}" type="video/mp4" >
             <!--    <source src="videos/sintel-short.webm" type="video/webm"> -->
                <track label="English" kind="subtitles" srclang="en" src="{{$video->eng}}" default>
                <track label="Viet Nam" kind="subtitles" srclang="vi" src="{{$video->vi}}">
            </video>
            <!--</figure>-->
        </div>
        <div class="col-md-4 well row-eq-heigh" style="height: 400px" >
            <div id="transcript"></div>
            <script>
                var video = videojs('video1',{ responsive: true }).ready(function(){
                    // fire up the plugin
                    var transcript = this.transcript();
                    // attach the widget to the page
                    var transcriptContainer = document.querySelector('#transcript');
                    transcriptContainer.appendChild(transcript.el());
                });
            </script>
        </div>


    </div>
    <div class="row">
        <div class="row">
            <div class="col-md-4 col-md-offset-2 well">
                <p>Nếu thấy hay bạn hãy like và share để bạn bè mình cùng xem nhé !!!</p>
                <div class="fb-like" data-href="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" data-width="2" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
            </div>
            <div class="col-md-4 well">
                <div class="fb-comments" data-href="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" data-width="5" data-numposts="5"></div>

            </div>
        </div>

    </div>

</div>

• Mã nguồn điều khiển đường dẫn

<?php
// Route admin
Route::get('admin', function () {
    return view('admin.layout.index');
});
// Quản lý các route
Route::group(['prefix' => 'admin'], function () {
    Route::group(['prefix' => 'Videos'], function () {
        Route::get('AddVideo', 'VideoController@getAddVideo')->name('addVideo');
        Route::get('ListVideos', 'VideoController@getListVideos')->name('listVideos');
        Route::post('AddVideo', 'VideoController@postAddVideo');
        Route::get('xoa/{id}', 'VideoController@getXoa');
    });
});
Route::get('/', 'VideoController@getShowList')->name('listmusic');
Route::get('video/{id}', 'VideoController@getVideo');

• Mã nguồn điều khiển các chức năng

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Videos;

class VideoController extends Controller
{
    public function getAddVideo(){        
        return view('admin.Videos.addVideo');
    }
    public function getListVideos(){
        $videos = Videos::all();
        return view('admin.Videos.listVideos', ['videos'=>$videos]);
    }
    public function postAddVideo(Request $request){
        $this->validate($request,[
            'name'=>'required', 'source'=>'required'
            ],[

            'name.required'=>'Bạn chưa nhập tên',
            'source.required'=>'Bạn chưa nhập đường dẫn'
            ]);
        $videos = new Videos;
        $videos->name = $request->name;
        $videos->source = $request->source;
        $videos->description =$request->decription;
        $videos->image = $request->image;
        $videos->eng = $request->eng;
        $videos->vi = $request->vi;
        $videos->save();

        return redirect('admin/Videos/AddVideo')->with('thongbao', 'Thêm thành công');

    }

    public function getXoa($id){
        $videos = Videos::find($id);
        $videos->delete();
        return redirect('admin/Videos/ListVideos');
    }

    public function getShowList(){
        $video = Videos::paginate(9);
        view()->share('videos', $video);
        return view('front.music_videos.ListMusic',['video'=>$video]);
    }

    public function getVideo($id){
        $video = Videos::find($id);

        return view('front.music_videos.video', ['video'=>$video]);

    }
}

2. Kiểm thử

• Kiểm thử tự động

Đã hoàn thành 9 trên 12 scenario

• Kiểm thử bằng tay Đã kiểm thử các chức năng chưa kiểm thử được bằng kiểm thử tự động.
  • Chức năng di chuyển video đến câu hát được chọn bằng cách chọn câu hát trong phần phụ đề.
  • Chức năng chuyển đổi phụ đề.