PHP PDO & BAR CHART : ออกรายงานในรูปแบบกราฟแท่ง

สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง PHP PDO & BAR CHART : ออกรายงานในรูปแบบกราฟแท่งแบบง่ายๆ เพื่อประยุกต์ใช้ในการทำระบบแสดงรายงานในอนาคต Code ที่แจกจะรองรับการทำงาน PHP7 และ PHP8 *ฝึกไว้ครับเผื่อได้ใช้

ตัวอย่างระบบที่มีแสดงรายงานเป็นกราฟแท่ง
1.เว็บไซต์สำหรับองค์กร คลิก
2.ระบบยืมคืนอุปกรณ์กีฬา คลิก
3.เว็บอีคอมเมิร์ช คลิก
4.ระบบอื่นๆ เพิ่มเติม คลิก

รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

โค้ดประกอบด้วย

PHP PDO
MySQL SUM
HTML
Bootstrap5
แสดงข้อมูลในรูปกราฟแท่ง

มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด

0.รวม Workshop PHP PDO ก่อนหน้าคลิก

1.ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo

2.ตารางเก็บข้อมูลรายการขาย prdsales พร้อมข้อมูลตัวอย่าง (จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go)

CREATE TABLE `prdsales` (
  `s_id` int(11) NOT NULL,
  `totals` float(10,2) NOT NULL,
  `datesave` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `prdsales`
--

INSERT INTO `prdsales` (`s_id`, `totals`, `datesave`) VALUES
(1, 22.00, '2018-06-13'),
(3, 33.00, '2016-06-13'),
(4, 111.00, '2017-06-30'),
(5, 90.00, '2017-07-15'),
(6, 30000.00, '2018-01-05'),
(7, 200000.00, '2017-06-16'),
(8, 25500.00, '2017-06-07'),
(9, 4800.00, '2017-06-29'),
(10, 9999.00, '2017-06-16'),
(11, 5200.00, '2017-06-27'),
(12, 100000.00, '2016-07-03'),
(13, 50000.00, '2018-01-10'),
(14, 8500.00, '2018-01-09'),
(15, 70000.00, '2015-01-01'),
(16, 98000.00, '2015-01-01'),
(17, 50000.00, '2019-01-31'),
(18, 20000.00, '2019-01-31');

ALTER TABLE `prdsales`
  ADD PRIMARY KEY (`s_id`);

ALTER TABLE `prdsales`
  MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

CREATE TABLE `prdsales` (

`s_id` int(11) NOT NULL,

`totals` float(10,2) NOT NULL,

`datesave` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `prdsales`

INSERT INTO `prdsales` (`s_id`, `totals`, `datesave`) VALUES

(1, 22.00, '2018-06-13'),

(3, 33.00, '2016-06-13'),

(4, 111.00, '2017-06-30'),

(5, 90.00, '2017-07-15'),

(6, 30000.00, '2018-01-05'),

(7, 200000.00, '2017-06-16'),

(8, 25500.00, '2017-06-07'),

(9, 4800.00, '2017-06-29'),

(10, 9999.00, '2017-06-16'),

(11, 5200.00, '2017-06-27'),

(12, 100000.00, '2016-07-03'),

(13, 50000.00, '2018-01-10'),

(14, 8500.00, '2018-01-09'),

(15, 70000.00, '2015-01-01'),

(16, 98000.00, '2015-01-01'),

(17, 50000.00, '2019-01-31'),

(18, 20000.00, '2019-01-31');

ALTER TABLE `prdsales`

ADD PRIMARY KEY (`s_id`);

ALTER TABLE `prdsales`

MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

3.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

4.ไฟล์เชื่อมต่อฐานข้อมูล ชื่อไฟล์ connect.php

<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  //echo "Connected successfully";
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย
    date_default_timezone_set('Asia/Bangkok');
?>

<?php

$servername = "localhost";

$username = "root";

$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย

date_default_timezone_set('Asia/Bangkok');

5.ไฟล์ Workshop barChart.php

<?php
//เรียกใช้งานไฟล์เชื่อมต่อฐานข้อมูล
require_once 'connect.php';
//คิวรี่ข้อมูลหาผมรวมยอดขายโดยใช้ SQL SUM
$stmt = $conn->prepare("
SELECT SUM(totals) AS total, DATE_FORMAT(datesave, '%Y') AS datesave
FROM prdsales 
GROUP BY DATE_FORMAT(datesave, '%Y%')
ORDER BY DATE_FORMAT(datesave, '%Y%') DESC
  ");
$stmt->execute();
$result = $stmt->fetchAll();

//นำข้อมูลที่ได้จากคิวรี่มากำหนดรูปแบบข้อมุลให้ถูกโครงสร้างของกราฟที่ใช้ 
$datesave = array();
$total = array();
foreach ($result as $rs) {
  $datesave[] = "\"".$rs['datesave']."\""; 
  $total[] = "\"".$rs['total']."\""; 
}
//ตัด commar อันสุดท้ายโดยใช้ implode เพื่อให้โครงสร้างข้อมูลถูกต้องก่อนจะนำไปแสดงบนกราฟ
$datesave = implode(",", $datesave); 
$total = implode(",", $total); 

?>
<html>
  <head>
    <title>PHP PDO & BAR CHART : ออกรายงานกราฟแท่ง  devbanban.com 2021</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <!-- call js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12"> <br>
          <h4>PHP PDO & BAR CHART : ออกรายงานในรูปแบบกราฟแท่ง</h4>
 <!--devbanban.com-->
              <canvas id="myChart" width="800px" height="300px"></canvas>
              <script>
              var ctx = document.getElementById("myChart").getContext('2d');
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: [<?php echo $datesave;?>
                  
                      ],
                      datasets: [{
                          label: 'รายงานภาพรวม แยกตามปี (บาท)',
                          data: [<?php echo $total;?>
                          ],
                          backgroundColor: [
                              'rgba(255, 99, 132, 0.2)',
                              'rgba(54, 162, 235, 0.2)',
                              'rgba(255, 206, 86, 0.2)',
                              'rgba(75, 192, 192, 0.2)',
                              'rgba(153, 102, 255, 0.2)',
                              'rgba(255, 159, 64, 0.2)'
                          ],
                          borderColor: [
                              'rgba(255,99,132,1)',
                              'rgba(54, 162, 235, 1)',
                              'rgba(255, 206, 86, 1)',
                              'rgba(75, 192, 192, 1)',
                              'rgba(153, 102, 255, 1)',
                              'rgba(255, 159, 64, 1)'
                          ],
                          borderWidth: 1
                      }]
                  },
                  options: {
                      scales: {
                          yAxes: [{
                              ticks: {
                                  beginAtZero:true
                              }
                          }]
                      }
                  }
              });
              </script>  
        </div>
      </div>
    </div>
  </body>
</html>

<?php

//เรียกใช้งานไฟล์เชื่อมต่อฐานข้อมูล

require_once 'connect.php';

//คิวรี่ข้อมูลหาผมรวมยอดขายโดยใช้ SQL SUM

$stmt = $conn->prepare("

SELECT SUM(totals) AS total, DATE_FORMAT(datesave, '%Y') AS datesave

FROM prdsales

GROUP BY DATE_FORMAT(datesave, '%Y%')

ORDER BY DATE_FORMAT(datesave, '%Y%') DESC

");

$stmt->execute();

$result = $stmt->fetchAll();

//นำข้อมูลที่ได้จากคิวรี่มากำหนดรูปแบบข้อมุลให้ถูกโครงสร้างของกราฟที่ใช้

$datesave = array();

$total = array();

foreach ($result as $rs) {

$datesave[] = "\"".$rs['datesave']."\"";

$total[] = "\"".$rs['total']."\"";

}

//ตัด commar อันสุดท้ายโดยใช้ implode เพื่อให้โครงสร้างข้อมูลถูกต้องก่อนจะนำไปแสดงบนกราฟ

$datesave = implode(",", $datesave);

$total = implode(",", $total);

<html>

<head>

<title>PHP PDO & BAR CHART : ออกรายงานกราฟแท่ง devbanban.com 2021</title>

</head>

<body>

<h4>PHP PDO & BAR CHART : ออกรายงานในรูปแบบกราฟแท่ง</h4>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: [<?php echo $datesave;?>

datasets: [{

label: 'รายงานภาพรวม แยกตามปี (บาท)',

data: [<?php echo $total;?>

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</div>

</body>

</html>

6.ผลการทำงาน

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม
Bootstrap5 : https://getbootstrap.com/
ฝึก SQL : https://www.w3schools.com/sql/default.asp
แหล่งศึกษา PDO เพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ระบบพร้อมใช้ทั้งหมด คลิก

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP PDO & BAR CHART : ออกรายงานในรูปแบบกราฟแท่ง

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed