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

I. Chụp ảnh một số màn hình của ứng dụng và các đoạn mã nguồn chính kèm theo giải thích bằng lời:

• Giao diện trang chủ và code:

@extends('Template/header')
@section('page')
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="1.jpg">
                        <div class="caption">
                            <h3>
                                Đề ngẫu nhiên
                            </h3>
                            <div>
                                Ôn thi với các câu hỏi tổng hợp từ các mức độ khác nhau.
                            </div>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="doExam">Bắt đầu</a>
                            @else 
                                <a class="btn btn-primary" href="admin/doExam">Bắt đầu</a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Thi theo bộ đề" src="1.jpg">
                        <div class="caption">
                            <h3>
                                Thi theo bộ đề
                            </h3>
                            <div>
                                Ôn thi với các bộ câu hỏi tương ứng với trình độ khác nhau.
                            </div>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="chooseexam">Bắt đầu</a> 
                            @else 
                                <a class="btn btn-primary" href="admin/chooseexam">Bắt đầu</a> 
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Câu hỏi ôn tập" src="2.jpg">
                        <div class="caption">
                            <h3>
                                Câu hỏi ôn tập
                            </h3>
                            <div>
                                Tổng hợp kết quả các câu hỏi.
                            </div>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="cauhoi">Xem</a>
                            @else
                                <a class="btn btn-primary" href="admin/cauhoi">Xem</a>
                            @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Các loại biển báo" src="3.jpg">
                        <div class="caption">
                            <h3>
                                Các loại biển báo
                            </h3>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="bienbao">Xem</a>
                            @else 
                                <a class="btn btn-primary" href="admin/bienbao">Xem</a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Mẹo thi" src="4.jpg">
                        <div class="caption">
                            <h3>
                                Mẹo thi
                            </h3>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="meo">Xem</a>    
                            @else  <a class="btn btn-primary" href="admin/meo">Xem</a>    
                            @endif

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Các dạng thi" src="5.jpg">
                        <div class="caption">
                            <h3>
                                Các dạng thi
                            </h3>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="dangthi">Xem</a>    
                            @else  <a class="btn btn-primary" href="admin/dangthi">Xem</a>    
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Các loại biển báo" src="0.jpg">
                        <div class="caption">
                            <h3>
                                Nhận xét trang web
                            </h3>
                            @if(Auth::guest())
                                <a class="btn btn-primary" href="feedback">Xem</a>
                            @else 
                                <a class="btn btn-primary" href="admin/feedback">Xem</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
@stop

• Giao diện làm bài kiểm tra và code (bên dưới). Dữ liệu câu hỏi đc lấy từ database và hiển thị lên nhờ cái đoạn mã Php trong code. 1 đồng hồ đếm ngược và sẽ tự động nộp bài nếu đến hết thời gian. File code thứ 2 để hiển thị câu hỏi bên trong file code 1.

@extends('Template/header')
@section('page')

    <div class="row">
        <div class="col-md-10">
             <h2>
                @yield('exam')
             </h2>
        </div>
        <div class = "col-md-2">
             <h2><span class="label label-warning" id="clock" ></span></h2>
        </div>
    </div>
    <br /><br />

<form name= "checkform" action="" method="POST" >
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<!-- ////////////////////////////////////////////////////// -->      
        <div class="carousel slide" id="carousel-1"  data-interval="9999999">

                <div class="carousel-inner">
                    @yield('ques')

                   </div>
  <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>    
</div> 

   <div align="bottom">
      <div class = "row">
        <div class="container-fluid,carousel-indicators">
                <center>
                <ul class="pagination pagination">
                    <li id="num0" data-slide-to="0" data-target="#carousel-1" >
                        <a>1</a>
                    </li>
                    <li id="num1" data-slide-to="1" data-target="#carousel-1">
                        <a>2</a>
                    </li>
                    <li id="num2" data-slide-to="2" data-target="#carousel-1">
                        <a>3</a>
                    </li>
                    <li id="num3" data-slide-to="3" data-target="#carousel-1">
                        <a>4</a>
                    </li>
                    <li id="num4" data-slide-to="4" data-target="#carousel-1">
                        <a>5</a>
                    </li>
                    <li id="num5" data-slide-to="5" data-target="#carousel-1">
                        <a>6</a>
                    </li>
                    <li id="num6" data-slide-to="6" data-target="#carousel-1">
                        <a>7</a>
                    </li>
                    <li id="num7" data-slide-to="7" data-target="#carousel-1">
                        <a>8</a>
                    </li>
                    <li id="num8" data-slide-to="8" data-target="#carousel-1">
                        <a>9</a>
                    </li>
                    <li id="num9" data-slide-to="9" data-target="#carousel-1">
                        <a>10</a>
                    </li>
                </ul>
                </center>
          </div>
        </div>
                     <div class="row">    
                         <center><input id = "sumbit" type="submit" class="btn btn-lg btn-success" name="submit-form" value="Nộp bài" />
                         </center>
                     </div>
      </div>
 </form>  

    <script language="javascript" >

            var seconds = 600;
            function timer() {
                var hours       = Math.floor(seconds/3600);
                var minutesLeft = Math.floor(seconds - (hours*3600));
                var minutes     = Math.floor(minutesLeft/60);
                var remainingSeconds = seconds % 60;
                if (remainingSeconds < 10) {
                    remainingSeconds = "0" + remainingSeconds; 
                }
                if (minutes < 10) {
                    minutes = "0" + minutes; 
                }

                document.getElementById('clock').innerHTML = hours + ": " + minutes + ": " + remainingSeconds;
                if (seconds == 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('clock').innerHTML = "Finish!";
                    document.getElementById('sumbit').click() ;

                } else {
                    seconds--;
                }
            }
            var countdownTimer = setInterval('timer()', 1000);

            var check = new Array();
            for(var i =0; i < 40; i++) check[i] = 0;
            var c = [0,0,0,0,0,0,0,0,0,0];
            function active_num(n){
                var t = Math.floor(n/10);
                n = Math.floor(n/10)*4  + n % 10;
                check[n] = !check[n];
                var temp = t*4;
                if(check[temp] || check[temp+1] || check[temp+2] ||check[temp+3]) c[t]=1;
                else c[t] = 0;
                var name = "num" + t.toString();
                var obj = document.getElementById(name);
                if(c[t]){
                    if(!obj.hasAttribute("class"))
                        obj.setAttribute("class","active");
                }else{
                    obj.removeAttribute("class");
                }
            }
    </script>
@stop

@extends('Template/exam')

@section('exam')
@if (!Auth::guest())
    <?php 
        if(isset($key)){ 
            echo "Bộ đề thi số ".($key + 1);
            $url = "../../picture/";
        }
        else {
            echo "Bộ đề thi ngẫu nhiên";
            $url = "../picture/";
        }
    ?>
@else
<?php 
        if(isset($key)){ 
            echo "Bộ đề thi số ".($key + 1);
            $url = "../picture/";
        }
        else {
            echo "Bộ đề thi ngẫu nhiên";
            $url = "picture/";
        }
    ?>
@endif
@stop
@section('ques')
<?php 
    $i = 0;
    foreach($data as $ques)
        {
            getanswer($i, $ques, $url);
            $i++;
            //if($i == 7) break;
        }
?>
@stop
<?php
function getanswer($number,$row, $url){    
        if($number == 0){?>
            <div class="item active">
        <?php } else {
            ?>
            <div class="item">
            <?php } ?>
                <div class="row">
                            <div class="col-xs-1">
                            </div>
                            <div class="col-xs-10">
                                <h3>
                                Câu <?php echo (($number+1).":  ".$row["question"]) ?>
                                </h3>
                            </div>
                            <div class="col-xs-1">
                            </div>
                    </div>
                    <br />
        <?php 
            if(isset($row["name_img"])) { ?>
            <center><img src="
        <?php echo $url.$row["name_img"]; ?>
            " alt = ""/></center>
        <?php }
            ?>

            <div class="row">
                <div class="col-xs-2">
                </div>
                <div class="col-xs-8">
                    <input onclick="active_num(<?php echo $number."0";?>);" type="checkbox" name="cb[]" value="<?php echo $number."0";?>" /> 
                          <?php echo $row['c0']; ?>

                </div>
                <div class="col-xs-2">
                </div>
            </div>
            <br /><br />

                    <div class="row">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-8">
                                 <input onclick="active_num(<?php echo $number."1";?>);" type="checkbox" name="cb[]" value="<?php echo $number."1";?>" /> 
                                 <?php echo $row["c1"];?>

                            </div>
                            <div class="col-xs-2">
                            </div>
                         </div><br /><br />
            <?php 

            if($row["c2"] != null){?>
                    <div class="row">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-8">
                                 <input onclick="active_num(<?php echo $number."2";?>);" type="checkbox" name="cb[]" value="<?php echo $number."2";?>" /> 
                                 <?php echo $row["c2"]; ?>

                            </div>
                            <div class="col-xs-2">
                            </div>
                         </div><br /><br />
            <?php 
            }
            if ($row["c3"] != null){?>
                    <div class="row">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-8">
                                 <input onclick="active_num(<?php echo $number."3";?>);" type="checkbox" name="cb[]" value="<?php echo $number."3";?>" /> 
                                 <?php echo ($row["c3"]); ?>

                            </div>
                            <div class="col-xs-2">
                            </div>
                         </div>
            <?php } ?>
      </div>
<?php                    
}
?>

• Giao diện kết quả bài thi và code (bên dưới). Có 2 file code với qui tắc hoạt động tương tự như trang thi. 2 đoạn mã dài trong file thứ 2 chỉ là mã hình ảnh dấu tích hoặc dấu x.

@extends('Template/header')
@section('page')
    <div class="row">
        <h1 class="text-center">
            Kết quả bài thi
        </h1>
    </div>

    <div class="row">
        <div class="col-md-8">
        <h2 class="text-center">
                @yield('pass')
            </h2>
        </div>
        <div class="col-md-4">
            <h3 class="text-center">
                Tổng số
            </h3>
            <div class="row">
                <h4 class="text-center text-danger">
                    @yield('total')/10
                </h4>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-2">
            <h3 class="text-center">
                Câu 1
            </h3>
            @yield('q1')
        </div>
        <div class="col-md-2">
            <h3 class="text-center">
                Câu 2
            </h3>
            @yield('q2')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 3
            </h3>
            @yield('q3')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 4
            </h3>
            @yield('q4')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 5
            </h3>
            @yield('q5')
        </div>

        <div class="col-md-1">
        </div>
    </div>

<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-2">
            <h3 class="text-center">
                Câu 6
            </h3>
            @yield('q6')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 7
            </h3>
            @yield('q7')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 8
            </h3>
            @yield('q8')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 9
            </h3>
            @yield('q9')
        </div>

        <div class="col-md-2">
            <h3 class="text-center">
                Câu 10
            </h3>
            @yield('q10')
         </div>
        <div class="col-md-1">
        </div>
    </div>
    <br /><br />
    <center><a class="btn btn-primary btn-lg" href="{{url('/')}}">Trang chủ</a></center>
@stop

@extends('Template/results')
<?php function show($i,$res){
    if($res[$i]) { ?> <center><img alt="Bootstrap Image Preview" class = "center" src="data:image/png;base64,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" width="100"></center> <?php }
    else { ?><center><img alt="Bootstrap Image Preview" src="data:image/png;base64,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" width="100"></center> <?php }} ?>

@section('q1')
    <?php show(0,$res); ?>
@stop
@section('q2')
    <?php show(1,$res); ?>
@stop
@section('q3')
    <?php show(2,$res); ?>
@stop
@section('q4')
    <?php show(3,$res); ?>
@stop
@section('q5')
    <?php show(4,$res); ?>
@stop
@section('q6')
    <?php show(5,$res); ?>
@stop
@section('q7')
    <?php show(6,$res); ?>
@stop
@section('q8')
    <?php show(7,$res); ?>
@stop
@section('q9')
    <?php show(8,$res); ?>
@stop
@section('q10')
    <?php show(9,$res); ?>
@stop


@section('total')
<?php 
    $count = 0;
    for($i = 0; $i < 10; $i++)
        if($res[$i]) $count++;
    echo $count;
?>
@stop
@section('pass')
<?php
    if ($count >= 5 && $count <=7){
        echo "Bạn cần cố gắng hơn nữa";}
    else if($count >= 8){
        echo "Bạn đã có thể thi thật rồi đó";}
    else if($count <5){ 
        echo "Bạn không đạt rồi, cố gắng lên";}
?>
@stop

• Giao diện trang xem câu hỏi và code (bên dưới). Dữ liệu câu hỏi được lấy từ database và hiển thị nhờ các đoạn mã Php trong code.

@extends('Template/header')

@section('page')
<br /><br />
<center><h2> Danh sách câu hỏi có trong đề thi </h2></center>
<br /><br />
    <?php
     $url = '../picture/';
    $i = 0;
    foreach($data as $ques) {
             getanswer($i, $ques, $url); 
             $i++;       
        }
function getanswer($number,$ques, $url){ 
            ?>
            <div class="row">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-9">
                                <h3>
                Câu <?php echo (($number+1).":  ".$ques['question']) ?>
                                </h3>
                            </div>
                            <div class="col-xs-1">
                            </div>
                    </div>
                    <br />
        <?php if(isset($ques["name_img"])) { ?>
            <center><img src="
        <?php echo $url.$ques["name_img"]; ?>
            " alt = ""/>
            </center>
        <?php }

            if($ques["a0"] == 1)
                initques($ques["c0"]);
            if($ques["a1"] == 1)
                initques($ques["c1"]);
            if($ques["a2"] == 1)
                initques($ques["c2"]);
            if($ques["a3"] == 1)
                initques($ques["c3"]);
                ?>
            <br />
            <?php           
}
    function initques($val){
        ?>
            <div class="row">
                <div class="col-xs-3">
                </div>
                <div class="col-xs-7">
                    <input type="checkbox" checked="checked" disabled="disabled" /> 
                          <?php echo ($val) ?>

                </div>
                <div class="col-xs-2">
                </div>
            </div>
            <br />
        <?php    
    }
?>
@stop

• Giao diện trang đăng nhập của Admin và code:

@extends('Template.header')

@section('page')
<div class="container" style="margin-top: 40px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Mật khẩu</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Ghi nhớ tôi
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Đăng nhập
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Quên mật khẩu?
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

• Giao diện trang quản lí của super Admin:

• Giao diện trang quản lý của Admin:

• Code của 2 trang trên (chung 1 file code):

@extends('Template/header')
@section('page')
            <div class="row" style="margin-top: 15px;">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="8.jpg">
                        <div class="caption">
                            <h3>
                                Thêm câu hỏi
                            </h3>
                            <a class="btn btn-primary" href="home/addQues">Thêm</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="9.jpg">
                        <div class="caption">
                            <h3>
                                Sửa câu hỏi
                            </h3>
                            <a class="btn btn-primary" href="home/selectques">Sửa</a>
                        </div>
                    </div>
                </div>
                @if(Auth::user()->level != 0)
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="10.jpg">
                        <div class="caption">
                            <h3>
                                Thêm admin
                            </h3>
                            <a class="btn btn-primary" href="register">Thêm</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="11.jpg">
                        <div class="caption">
                            <h3>
                                Sửa admin
                            </h3>
                            <a class="btn btn-primary" href="home/selectadmin">Sửa</a>
                        </div>
                    </div>
                </div>
                @endif
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="Đề ngẫu nhiên" src="12.jpg">
                        <div class="caption">
                            <h3>
                                Ý kiến phản hồi
                            </h3>
                            <a class="btn btn-primary" target="_blank" href="https://developers.facebook.com/tools/comments/298724750557046/pending/descending/">Xem</a>
                        </div>
                    </div>
                </div>
            </div>
@stop

• Giao thêm câu hỏi và code:

@extends('Template.header')
<!--{{ route('register') }}-->
@section('page')
<div class="container" style="margin-top: 40px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Thêm câu hỏi</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="" enctype="multipart/form-data">
                        {{ csrf_field() }}

                        <div class="form-group">
                            <label for="ques" class="col-md-3 control-label">Câu hỏi:</label>

                            <div class="col-md-7">
                                <input id="ques" type="text" class="form-control" name="ques" required autofocus>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="firt-answer" class="col-md-3 control-label">Đáp án 1:</label>

                            <div class="col-md-7">
                                <input  id="answer1" type="second-answer" class="form-control" name="answer1" required>
                            </div>
                            <div class="col-md-2">
                                <input id = "cb1" onclick="switchadd();" type="checkbox" name="a1" value="1" /> 
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="second-answer" class="col-md-3 control-label">Đáp án 2:</label>

                            <div class="col-md-7">
                                <input  id="answer2" type="second-answer" class="form-control" name="answer2" required>
                            </div>
                            <div class="col-md-2">
                                <input id = "cb2" onclick="switchadd();" type="checkbox" name="a2" value="1" /> 
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="third-answer" class="col-md-3 control-label">Đáp án 3:</label>

                            <div class="col-md-7">
                                <input id="answer3" type="third-answer" class="form-control" name="answer3">
                            </div>
                            <div class="col-md-2">
                                <input id = "cb3" onclick="switchadd();" type="checkbox" name="a3" value="1" /> 
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="fourth-answer" class="col-md-3 control-label">Đáp án 4:</label>

                            <div class="col-md-7">
                                <input id="answer4" type="fourth-answer" class="form-control" name="answer4">
                            </div>
                            <div class="col-md-2">
                                <input id = "cb4" onclick="switchadd();" type="checkbox" name="a4" value="1" /> 
                            </div>
                        </div>

                        <div class="form-group"> 
                            <label for="InputFile" class="col-md-3 control-label" >  
                                Thêm ảnh: 
                            </label>
                            <div class="col-md-7">
                                <input type="file" id="ifile" name="up_img" /> 
                                <p class="help-block"> Chọn ảnh từ máy tính. 
                                </p>
                            </div> 
                        </div>

                        <div class="form-group">
                            <center>
                                <button disabled="disabled" id="btadd" type="submit" class="btn btn-primary">
                                    Thêm
                                </button>
                            </center>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script language="javascript">
    function switchadd() {
        var answer1 = document.getElementById('answer1');
        var answer2 = document.getElementById('answer2');
        var answer3 = document.getElementById('answer3');
        var answer4 = document.getElementById('answer4');
        var cb1 = document.getElementById('cb1');
        var cb2 = document.getElementById('cb2');
        var cb3 = document.getElementById('cb3');
        var cb4 = document.getElementById('cb4');
        if((cb1.checked && answer1.value != "")
         ||(cb2.checked && answer2.value != "")
         ||(cb3.checked && answer3.value != "")
         ||(cb4.checked && answer4.value != "")){
            document.getElementById("btadd").removeAttribute("disabled");
        }
        else{
            document.getElementById("btadd").setAttribute("disabled","disabled");
        }
    }

</script>
@endsection

• Giao diện trang sửa câu hỏi và code:

@extends('Template/header')

@section('page')

<br /><br />
<center><h2> Danh sách các câu hỏi </h2></center>
<br /><br />
<div class="row">
    <center>
    <table cellspacing="20" cellpadding="20" border="5" >
        <tr>
            <th width="40"><center>ID</center></th>
            <th width="800"><center>Câu hỏi</center></th>
            <th width="120"><center>Hành động</center></th>
        </tr>
    <?php
        $url = '../picture/';     
        $i = 0;
        foreach($data as $ques) {
                 getques($i, $ques, $url); 
                 $i++;       
            }
        foreach($dataimg as $ques){
            getques($i, $ques, $url);
            $i++;
        }
    ?>
    </table>
    </center>
</div>
<br>

• Giao diện trang thêm admin (chỉ dành cho super Admin) và code:

@extends('Template.header')

@section('page')
<div class="container" style="margin-top: 40px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Thêm admin</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label for="name" class="col-md-4 control-label">Tên</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password-confirm" class="col-md-4 control-label">Nhập lại mật khẩu</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Thêm
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

• Giao diện trang sửa admin (chỉ dành cho super Admin) và code. Nếu thằng cấp cho 1 admin lên super Admin thì super Admin hiện tại bị giảm cấp xuống Admin.

@extends('Template/header')

@section('page')

<br /><br />
<center><h2> Danh sách các admin </h2></center>
<br /><br />
<div class="row">
    <center>
    <table cellspacing="20" cellpadding="20" border="5" >
        <tr>
            <th width="40"><center>ID</center></th>
            <th width="400"><center>Tên</center></th>
            <th width="400"><center>Địa chỉ email</center></th>
            <th width="100"><center>Level</center></th>
            <th width="170"><center>Hành động</center></th>
        </tr>
    <?php
        foreach($data as $admin) {
                 getadmin( $admin); 

            }
    ?>
    </table>
    </center>
</div>
<br>


<?php
    function getadmin($admin){
        ?><tr>
        <th><center> <?php
            echo $admin['id'];
        ?></center></th>
        <th><?php
            echo $admin['name'];?>
        </th>
        <th><?php
            echo $admin['email'];?>
        </th>
        <th><?php
            if($admin['level']) echo "Super Admin" ; else echo "Admin";?>
        </th>
        <th> @if((Auth::user()->level != 0) && (Auth::user()->id != $admin->id))
        <center>
            @if($admin->level == 0) <a id = "<?php echo "btup_".$admin['id']?>" onclick = "confim('Bạn có thực sự muốn thăng Admin này lên Super Admin thay cho bạn?\n Lưu ý: Bạn sẽ bị giáng cấp xuống Admin.','uplevel/<?php echo $admin['id'] ?>','<?php echo "btup_".$admin['id']?>');" 
            type="button" class="btn btn-success"> Thăng cấp </a> 
            @endif

            <a id = "<?php echo "btdelete_".$admin['id']?>" onclick="confim('Bạn có thực sự muốn xóa? \n\nLưu ý: Toàn bộ câu hỏi liên quan đến admin này đều bị xóa. ','<?php echo "modifiersadmin/".$admin['id']?>','<?php echo "btdelete_".$admin['id']?>');" type="button" class="btn btn-danger">
                Xóa
            </a></center> 
        @endif
        </th>
        </tr><?php
    }
?>
<script language="javascript">
    function confim(st,lk,id){
        var check = confirm(st);
        if(check)
            document.getElementById(id).setAttribute("href",lk);
        else document.getElementById(id).removeAttribute("href");
    }
</script>
@stop

• Giao diện trang xem biển báo:

• Giao diện trang xem mẹo:

• Giao diện trang xem dạng thi:

II. Kiểm thử tự động (phương pháp: cài behat vào trong laravel và sử dụng phpunit test sẵn có của laravel):

a. Phương pháp cài behat (sử dụng thư viện MinkContext được định nghĩa sẵn):

• Với các kịch bản đã được viết thì độ phủ code khoảng 70% (không test được các tính năng chấm thi đúng hay sai, các tính năng sau khi đăng nhập bằng tài khoản admin và bình luận).
• Tuy nhiên, việc cài đặt behat trên laravel 5.4 gặp lỗi và nhóm không thể khắc phục nên các hàm thực thi trên phiên bản khác đúng nhưng sau khi nâng lên laravel 5.4 lại sai dẫn đến các kịch bản đều bị sai (duy nhất kịch bản kiểm tra có chữ thi trên trang chủ là qua), kết quả:

b. Phương pháp sử dụng phpunit test sẵn có của laravel:

• Sau khi test bằng behat bị lỗi, nhóm dùng thêm phương pháp này để test.

• Với các kịch bản đã được viết thì độ phủ chỉ code khoảng 20% (chỉ test được khi chạy đúng url thì hiển thị đúng trang).

• Tất cả các hàm test đều chạy đúng, các test giống nhau báo sai bên cách 1 nhưng lại đúng bên cách này (chứng minh cách 1 các test không qua do lỗi cài đặt trên phiên bản laravel 5.4), kết quả (các kịch bản đã có trong code trên repo của nhóm, file Feature (trong tests/Feature)):

III. Kiểm thử bằng tay, kịch bản, báo cáo kiểm thử:

• Đã kiểm thử bằng tay các tính năng không kiểm thử tự động được. Hầu hết hoạt động tốt.

• Các kịch bản:

  • Từ trang chủ -> thi thử đề ngẫu nhiên hoặc theo bộ đề -> làm bài, bấm nộp bài -> kiểm tra trang đáp án có hiển thị đúng kết quả không? (Thành công).

  • Từ trang chủ -> thi thử đề ngẫu nhiên hoặc theo bộ đề -> làm bài, không nộp bài đợi hết giờ-> kiểm tra khi hết giờ có tự động nộp bài không? (Thành công).

  • Đăng nhập bằng tài khoản admin -> thử thêm, sửa câu hỏi hoặc xem các ý kiến phản hồi (sẽ tự động chuyển sang link facebook của web)? (Thành công).

  • Đăng nhập bằng tài khoản Super admin -> thêm hoặc sửa các tài khoản admin khác? (Thành công).

  • Từ trang đăng nhập -> bấm vào gửi ý kiếm phản hồi về trang web -> viết bình luận (bằng tài khoản facebook) -> xem các bình luận có hiện không? (Thất bại chưa sửa được).