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

4.1. Cài đặt:

Trang chủ: Hình 4.1: Giao diện trang chủ.

Mã nguồn giao diện trang chủ:

<?php
require_once('modules/header.php');
?>
<div id="slogan">
<img src="images/slogan_background.jpg" alt="">
<div id="words">
<p style="font-size: 115pt;">
It's not just coffee
</p>
<p style="font-size: 140pt;">
It's Café
</p>
</div>
</div>
<div id="menu">
<div class="menu-header container">
<img src="images/menu-header.png" alt="">
<p>Menu</p>
<img src="images/menu-header.png" alt="">
</div>
<div class="menu-content container clearfix">
<!--products-->
<button id = "abc"></button>
<?php
require_once('app/database.php');
$products = $conn->query("SELECT * FROM products");
while ($product = $products->fetch_assoc()) {
?>
<div class="product">
<div class="product-thumbnail" style="background-image: url('images/products/<?php echo $product['thumbnaillinks']; ?>')">
<button class="thumbnail-overlay" name="<?php echo $product['index']; ?>" onclick="add_cart(<?php echo $product['index']; ?>)">
<p>
Đặt hàng
</p>
</button>
</div>
<div class="product-price">
<p>
<?php echo $product['price']; ?>k</p>
</div>
<p class="product-name">
<?php echo $product['name']; ?>
</p>
</div>
<?php
}
?>
<!--end products-->
</div>
<!--xem session-->
<p id='test'>

</p>
</div>
<!--end menu-->
<?php
require_once('modules/footer.php');
?>

Hình 4.2: Giao diện trang chủ: menu và giỏ hàng.

Lấy dữ liệu từ database và hiển thị:

<?php
require_once('app/database.php');
$products = $conn->query("SELECT * FROM products");
while ($product = $products->fetch_assoc()) {
?>
<div class="product">
<div class="product-thumbnail" style="background-image: url('images/products/<?php echo $product['thumbnaillinks']; ?>')">
<button class="thumbnail-overlay" name="<?php echo $product['index']; ?>" onclick="add_cart(<?php echo $product['index']; ?>)">
<p>
Đặt hàng
</p>
</button>
</div>
<div class="product-price">
<p>
<?php echo $product['price']; ?>k</p>
</div>
<p class="product-name">
<?php echo $product['name']; ?>
</p>
</div>
<?php
}
?>

Sử dụng ajax để lấy dữ liệu sản phẩm và hiển thị trực tiếp mà không cần tải lại trang.

//Add to cart function, using AJAX
function add_cart(index) {
$.ajax({
//gửi request
url: "app/addcart.php?productindex=" + index,
type: "get",
// Lấy data về
success: function (data) {
data.trim();
$('.cart').fadeIn();
if (data == 'error') {
alert('Có lỗi xảy ra trong quá trình đặt hàng. Vui lòng thử lại!!!');
}
else if (data == 'duplicate') {
alert('Bạn vừa đặt sản phẩm đó thêm lần nữa. Bạn cũng có thể chỉnh số lượng sản phẩm trong trang thanh toán.')
}
else {
var newElem = $(data);
$('.cart-products').append(newElem);
newElem.ready(function () {
newElem.fadeIn();
});
}
}
});
}

Trang thanh toán:

Hình 4.3: Giao diện thanh toán.

Đoạn mã sửa giỏ hàng:

//This is JS code
$(document).ready(function(){
$(".quantity").change(function(){
slm=$(this).val();
index=$(this).attr("data-index");
$.ajax({
url:"js/xuly_Cart.php",
type:"post",
data:"slm"+'='+slm+"&index"+'='+index,
async:true,
success:function(kq){
location.reload();

}
});
});
});

Tự động lấy thông tin người dùng và điền vào thông tin giao hàng.

<div class="form-group">

<label for="name">
Họ và tên
</label>
<input type="text" class="form-control" name="name" value="<?php
$loggedIn = false;
if(isset($_SESSION['userid'])){
$query = "SELECT * FROM `users` WHERE `userid` = ".$_SESSION['userid'];
$result= $conn->query($query);
$data=mysqli_fetch_assoc($result);
// var_dump($data);
$loggedIn = true;
}
if($loggedIn)echo $data['fullname'];
?>"/>
<div class="form-group">

<label for="phonenumber">
Số điện thoại
</label>
<input type="text" class="form-control" name="phonenumber" value="<?php
if($loggedIn)echo $data['phonenumber'];
?>"/>
<div class="form-group">

<label for="address">
Địa chỉ
</label>
<input type="text" class="form-control" name="address" value="<?php
if($loggedIn)echo $data['addresses'];

?>"/>
</div>

Trang admin (Nhận đơn hàng):

Hình 4.4: Giao diện nhận đơn hàng.

Trang đăng nhập:

Hình 4.5: Giao diện đăng nhập.

Mã nguồn xử lý đăng nhập:

<?php
session_start();
require_once('../app/database.php');
if (isset($_POST['button-submit'])) {
$user_name = $_POST['username'];
$password = $_POST['password'];
if ($user_name == '' && $password == '') {
$_SESSION['tb'] = "Bạn chưa điền thông tin để đăng nhập !!!!";
header('location: index.php');
}
else if ($user_name == '') {
$_SESSION['tb'] = "Bạn chưa nhập email !!!!";
header('location: index.php');
}
else if ($password == '') {
$_SESSION['tb'] = "Bạn chưa nhập mật khẩu !!!!";
header('location: index.php');
}
else {
$sql = "select * from users where email = '$user_name' and password = '$password' ";
$query = mysqli_query($conn, $sql);
$num_rows = mysqli_num_rows($query);
if ($num_rows == 0) {
$_SESSION['tb'] = "Tên đăng nhập hoặc mật khẩu không chính xác !!!";
header('location: index.php');
}
else if ($num_rows == 1) {
$query = $query->fetch_assoc();
if ($query['admin']) {
$_SESSION['admin'] = true;
$_SESSION['username'] = 'Admin';
$_SESSION['userid'] = $query['userid'];
header('location: ../admin');
}
else{
$_SESSION['username'] = $query['username'];
$_SESSION['userid'] = $query['userid'];
echo "Đăng nhập thành công!!! Đang chuyển hướng về trang chủ.....";

// chuyến hướng về trang chủ
header('location: ..//');
}
}
}
}
?>

/*
Sample User:
  Email: sampleuser@example.com
  Password: 123456
Sample Admin:
  Email: sampleadmin@example.com
  Password: 123456
*/

4.2. Kết quả kiểm thử tự động:

Kiểm thử tự động sử dụng framework PHP behat với Mink extension, các ca kiểm thử được viết dựa theo ngôn ngữ kịch bản Gherkin.

Các kịch bản kiểm thử đã được trình bày tại phần 2.2. Features chương này, với tổng cộng 15 scenario, bao phủ được 60% mã nguồn.
Kết quả kiểm thử:

Hình 4.6: Kết quả kiểm thử tự động.

4.3 Kiểm thử thủ công:

Đã kiểm thử thủ công các tính năng:

Chọn hàng và thanh toán sản phẩm.
Xử lý các đơn hàng trong trang admin.
Đăng nhập bằng facebook.

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