<?php
session_start();
header('Access-Control-Allow-Origin: *');
ini_set('error_reporting', E_WARNING);
ini_set('display_errors', 'on');
/* ปรับปรุง 3 กันยายน 2564
ข้อมูลเกี่ยวกับ source code
1. ไม่พบ icon ด้านซ้าย ที่เรียกใช้จาก adminlte.io เนื่องจากปัญหา CORS
กรณีใช้กับ localhost แต่ถ้าใช้กับ server จะไม่พบปัญหาเช่น http://www.thaiall.com/adminlte/
แก้ไขโดยติดตั้ง Extension : Allow CORS: Access-Control-Allow-Origin (Add to chrome)
เพื่อเปิดการอนุญาตให้ทำ CORS (Cross Origin Resource Sharing) ผ่าน chrome ได้
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
2. หน้า Template : /project ตามลิงค์ด้านซ้าย ที่ใช้ในโปรแกรมนี้ พบหน้าตัวอย่างที่ http://www.thaiall.com/php/adminlte357.png
3. เริ่มต้นใช้งานให้คลิ๊ก create table ที่กลางจอภาพ
4. ตรวจสอบ html ,css และ php
[pass] ตรวจ html code ที่ https://validator.w3.org/#validate_by_input
[pass] ตรวจ css code ที่ https://jigsaw.w3.org/css-validator/validator
[pass] ตรวจ php code ที่ https://phpcodechecker.com/
5. ผลการตรวจสอบ css พบ 11 errors
แต่เกิด error ที่มาจากแฟ้มภายนอก ส่วนในแฟ้มนี้ไม่พบ error
6. เผยแพร่ใน http://www.thaiall.com/source
7. การสร้างตารางทำผ่านตัวแปร $create_sql กำหนดชื่อตารางว่า test
8. ตัวอย่างที่ http://www.thaiall.com/perlphpasp/source.pl?key=9144 - mysql_update357.php (ก่อนปรับ)
9. ตัวอย่างที่ http://www.thaiall.com/perlphpasp/source.pl?key=9146 - adminlte357.php (หลังปรับ)
10. เพิ่มการเรียกใช้ font ChulabhornLikit จาก lazywasabi.net ร่วมกับ Kanit ของ googleapis.com
ซึ่งใน CDN ของ lazywasabi.net มีบริการอีกหลายฟอนต์ เช่น Anakotmai, Anuphan, Droid Sans Thai, Kinnari, Loma, Noto Sans Thai, Sarabun, Umpush
***
คำถามให้ฝึกปฏิบัติ
1. เปลี่ยนชื่อตาราง
2. เปลี่ยนชื่อฐานข้อมูล
3. คัดลอก code แล้วสร้าง page ที่มีหลายตาราง และเชื่อมโยงกันไปมา 3 page
4. เพิ่มฟอนต์
5. เพิ่มเขตข้อมูล
6. แยกเป็น select, insert, delete, update อย่างละหน้า
7. จัดทำรายงานที่ select 2 ตาราง เชื่อมตาราง สั่งซื้อละเอียด กับ สินค้า
เช่น select `order details`.*, products.* from (`order details` inner join products on `order details`.productid = products.productid)
8. จัดทำรายงานที่ select 3 ตาราง เชื่อมตาราง สั่งซื้อ สั่งซื้อละเอียด กับ สินค้า
เช่น select orders.customerid, `order details`.*, products.*
from (orders inner join `order details` on orders.orderid = `order details`.orderid
inner join products on `order details`.productid = products.productid)
where `order details`.unitprice > 100
9. จัดทำรายงานที่ select 2 ตาราง และใช้ aggregate function คือ sum กับ group by
เช่น select orderid, sum(quantity * unitprice) as total from `order details` group by orderid having sum(quantity * unitprice) > 1000
มีตัวอย่าง ที https://github.com/thaiall/programming-page/blob/master/php/northwind.php
*/
?><!DOCTYPE html><html lang="th"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 357 - 1 table and 3 fields</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="https://adminlte.io/themes/v3/plugins/summernote/summernote-bs4.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit:300,400,400i,700">
<link rel="stylesheet" href="https://cdn.lazywasabi.net/fonts/ChulabhornLikit/ChulabhornLikitText.css" >
<style>
body {font-family:'Chulabhorn Likit Text';}
@font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;font-weight:normal;font-display:auto;
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.eot');
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.eot?#iefix') format("embedded-opentype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.woff2') format("woff2"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.woff') format("woff"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.ttf') format("truetype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-brands-400.svg#fontawesome') format("svg")
}.fab{font-family:"Font Awesome 5 Brands"}
@font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;font-weight:400;font-display:auto;
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.eot');
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.eot?#iefix') format("embedded-opentype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.woff2') format("woff2"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.woff') format("woff"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.ttf') format("truetype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-regular-400.svg#fontawesome') format("svg")
}.far{font-weight:400}
@font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;font-weight:900;font-display:auto;
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.eot');
src:url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.eot?#iefix') format("embedded-opentype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.woff2') format("woff2"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.woff') format("woff"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.ttf') format("truetype"),
url('https://adminlte.io/themes/v3/plugins/fontawesome-free/webfontsfa-solid-900.svg#fontawesome') format("svg")
}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
</style>
</head><body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav" style="font-weight:bold;">
<li class="nav-item d-none d-sm-inline-block"><a href="https://thaiall.github.io/mygitfriends/adminlte_mygitfriends.htm" class="nav-link">Git friends</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://jakkapatchai.github.io/home/index.html" class="nav-link">คอม</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://warayutkhanka.github.io/home/" class="nav-link">หนึ่ง</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="http://www.gadios.lnw.mn/" class="nav-link">นิค</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://mim321.github.io/home/index.html" class="nav-link">มิ้ม</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://sampan6108111007.github.io/home/" class="nav-link">แบล็ค</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://kawintharawiw.github.io/home/index.html" class="nav-link">วิว</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://www.thaiall.com/blog/burin/10298/" class="nav-link">6 sense</a></li>
<li class="nav-item d-none d-sm-inline-block"><a href="https://thaiall.github.io/www/adminlte/adminlte_github.htm" class="nav-link">github.io</a></li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4" style="background-color:#000044;">
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex" style="background-color:black">
<div class="image"><img src="http://www.thaiall.com/me/picme.jpg" class="img-circle elevation-2" alt="User Image"></div>
<div class="info"><a href="https://github.com/thaiall" class="d-block">Burin<br/>Rujjanapan</a></div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2" style="font-family:Kanit;">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item"><a href="?" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>Home / Select</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/perlphpasp/source.pl?key=9116" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>9116 : mysqlworking</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/perlphpasp/source.pl?key=9144" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>9144 : update 357</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/perlphpasp/source.pl?key=9146" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>9146 : adminlte 357</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/perlphpasp/source.pl?key=9150" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>9150 : test 357 (limited)</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/adminlte-3.0.4/" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>My AdminLTE 3.0.4</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/adminlte-3.0.4/pages/examples/projects.html" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>Project : view/edit/del</p></a></li>
<li class="nav-item"><a href="http://www.thaiall.com/project/indexo.html" class="nav-link"><i class="fas fa-circle nav-icon"></i><p>/Project </p></a></li>
<li class="nav-item has-treeview"><!-- menu-open -->
<a href="#" class="nav-link"><!-- active -->
<i class="nav-icon fas fa-tachometer-alt"></i> <p>Check code<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item"><a href="https://validator.w3.org/#validate_by_input" class="nav-link"><i class="far fa-circle nav-icon"></i> <p>check : html</p></a></li>
<li class="nav-item"><a href="https://jigsaw.w3.org/css-validator/validator" class="nav-link"><i class="far fa-circle nav-icon"></i> <p>check : css</p></a></li>
<li class="nav-item"><a href="https://phpcodechecker.com/" class="nav-link"><i class="far fa-circle nav-icon"></i> <p>check : php</p></a></li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<!-- Main row -->
<div class="row">
<?php
/* # 01 - ส่วนกำหนดค่าเริ่มต้นของระบบ */
$host = "localhost";
$db = "mysql";
$tb = "test";
$user = "root"; /* รหัสผู้ใช้ ให้สอบถามจากผู้ดูแลระบบ */
$password = ""; /* รหัสผ่าน ให้สอบถามจากผู้ดูแลระบบ */
$create_sql = "create table test
(id varchar(20), ns varchar(20), salary varchar(20))
engine = InnoDB default charset=utf8 collate=utf8_unicode_ci;";
$drop_sql = "drop table test";
$table_header = "Employees";
if (isset($_REQUEST['action'])) $act = $_REQUEST['action']; else $act = "";
/* # จัดการ session ของ php7 */
if (isset($_REQUEST["v7"])) {
$_SESSION["v7"] = false;
if($_REQUEST["v7"] == "obj") $_SESSION["v7"] = true;
}
/* # 02 - ส่วนสร้าง และลบตาราง */
if (strlen($act) > 0 && ($act == "createtable" || $act == "droptable")) {
doconnect();
if($act == "droptable") doquery($drop_sql); else doquery($create_sql);
footer("$act : completely<br/><a href='?'>back</a>");
echo '<meta http-equiv="refresh" content="0; url='. $_SERVER["SCRIPT_NAME"] .'">';
}
/* # 03 - ส่วนแสดงผลหลัก ทั้งปกติ และหลังกดปุ่ม del หรือ edit */
if (strlen($act) == 0 || $act == "del" || $act == "edit") {
doconnect();
doquery("select * from test");
if ($r) echo '<h4>Table : '. $table_header .'</h4> <!-- ถ้าใช้ section tag จะต้องเขียนอย่างน้อย 1 header tag -->
<table class="table table-striped projects">
<thead><tr>
<th style="width: 10%">id</th>
<th style="width: 40%">name - lastname</th>
<th style="width: 10%">Salary</th>
<th style="width: 40%" class="text-center">Process</th>
</tr></thead></table>';
while (dofetch("object")) {
if (isset($_REQUEST['id']) && $_REQUEST['id'] == getfld("object","id")) $chg = " style='background-color:#f9f9f9"; else $chg = " readonly style='background-color:#ffffdd";
echo "<form action='?' method=post><table class='table table-striped projects'><tr>
<td style=\"width: 10%\"><input name=id size=5 value='". getfld("object","id") . "' style='background-color:#dddddd' readonly></td>
<td style=\"width: 40%\"><input name=ns size=40 value='". getfld("object","ns") . "' $chg'></td>
<td style=\"width: 10%\"><input name=salary size=20 value='". getfld("object","salary") . "' $chg;text-align:right'></td>
<td style=\"width: 40%\">";
if (isset($_REQUEST['id']) && $_REQUEST['id'] == getfld("object","id")) {
if ($act == "del") echo "<input type=submit name=action value='del : confirm' class='btn btn-info btn-sm' style='background-color:#440000'>";
if ($act == "edit") echo "<input type=submit name=action value='edit : confirm' class='btn btn-info btn-sm' style='background-color:#000044'>";
} else {
echo "<input type=submit name=action value='del' class='btn btn-info btn-sm' style='background-color:red'>";
echo "<input type=submit name=action value='edit' class='btn btn-info btn-sm' style='background-color:blue'>";
}
echo "</td></tr></table></form>";
} /* dofetch */
if ($r == true) {
echo "<form action='?' method=post><table class='table table-striped projects'><tr>
<td style=\"width: 10%\"><input name=id size=5></td>
<td style=\"width: 40%\"><input name=ns size=40></td>
<td style=\"width: 10%\"><input name=salary size=20></td><td style=\"width: 40%\">
<input type=submit name=action value='add' class='btn btn-info btn-sm'></td>
</tr></table></form>";
if (isset($_SESSION["msg"]) && strlen($_SESSION["msg"]) > 1) {
echo '<div class="col-12"><div class="small-box card-body"><div class="inner"><p style="text-align:center;">';
echo $_SESSION["msg"]; /* แสดงผลค่านี้ หลังการ Refresh */
echo '</p></div></div></div>';
}
$_SESSION["msg"] = ""; /* เมื่อแสดงผลแล้ว ก็ล้างค่านี้จากตัวแปร msg */
footer(null);
}
}
/* # 04 - ส่วนเพิ่มข้อมูล */
if ($act == "add") {
doconnect();
doquery("insert into $tb values('". $_REQUEST['id'] . "','". $_REQUEST['ns'] . "','". $_REQUEST['salary'] . "')");
if ($r) $_SESSION["msg"] = "insert : completely";
footer("refresh");
}
/* # 05 - ส่วนลบข้อมูล */
if ($act == "del : confirm") {
doconnect();
doquery("delete from $tb where id ='". $_REQUEST['id'] . "'");
if ($r) $_SESSION["msg"] = "delete : completely";
footer("refresh");
}
/* # 06 - ส่วนแก้ไขข้อมูล */
if ($act == "edit : confirm") {
doconnect();
doquery("update $tb set ns ='". $_REQUEST['ns'] . "', salary ='". $_REQUEST['salary'] . "' where id =" . $_REQUEST['id']);
footer("refresh");
}
/* # 07 - footer */
function footer($msg){
global $conn;
if($msg == "refresh") {
echo '<meta http-equiv="refresh" content="0; url='. $_SERVER["SCRIPT_NAME"] .'">';
if (isset($_SESSION["v7"]) && $_SESSION["v7"] == true) mysqli_close($conn); else $conn->close();
}
if (strlen($msg) > 1) {
echo '<div class="col-lg-3 col-12"><div class="small-box bg-info"><div class="inner"><p>'. $msg .'</p></div></div></div>';
}
if ((int)phpversion() >=7)
echo '<div class="col-lg-8 col-4"><div class="small-box card-body">';
else
echo '<div class="col-12"><div class="small-box bg-warning">';
echo '<div class="inner"><p style="text-align:center;">';
echo "<a href='?action=createtable'>create table</a> : <a href='?action=droptable'>drop table</a>";
echo "<br/>version " . (int)phpversion() . " : ";
echo '</p></div></div></div>';
if ((int)phpversion() >=7) {
echo '<div class="col-lg-4 col-8"><div class="small-box bg-warning"><div class="inner"><p>';
if (isset($_SESSION["v7"]) && $_SESSION["v7"] == false)
echo "<a href='?v7=obj'>mysqli object</a> : mysqli no object";
else
echo "mysqli object : <a href='?v7=noobj'>mysqli no object</a>";
echo '</p></div></div></div>';
}
}
/* # 08 - connect */
function doconnect(){
global $conn,$host,$user,$password,$db;
if ((int)phpversion() >=7) {
if (isset($_SESSION["v7"]) && $_SESSION["v7"] == false) {
/* v7 เลือก connect ได้ 2 แบบ */
/* แบบแรก mysqli_connect */
$conn = mysqli_connect($host, $user, $password, $db);
if (!$conn) footer("Connection failed: " . mysqli_connect_error());
} else {
/* แบบที่สอง new mysqli */
$conn = new mysqli($host, $user, $password, $db);
if ($conn->connect_error) footer("Connection failed: " . $conn->connect_error);
}
} else {
/* v5 ใช้แบบ mysql_connect */
$conn = mysqli_connect($host, $user, $password, $db);
if (!$conn) footer("Connection failed: " . mysqli_connect_error());
}
}
/* # 09 - query */
function doquery($myq){
global $r,$conn,$db;
if ((int)phpversion() >=7) {
if (isset($_SESSION["v7"]) && $_SESSION["v7"] == false) {
$r = mysqli_query($conn,$myq);
} else {
$r = $conn->query($myq);
}
if (!$r) footer("Query : Fail<br/>$myq");
} else {
$r = mysqli_query($conn,$myq);
if (!$r) footer("Query : Fail<br/>$myq");
}
}
/* # 10 - fetch */
function dofetch($t) {
global $o, $r; /* object, assoc, array */
if(!$r) { $o = false; return false; }
if ((int)phpversion() >=7) {
if($t == "object") return $o = $r->fetch_object();
} else {
if($t == "object") return ($o = mysqli_fetch_object($r));
}
}
/* # 11 - get field value ตามชื่อเขตข้อมูล */
function getfld($t,$fld) {
global $o; /* การอ้างอิงเขตข้อมูลเหมือนกันทั้งใน php7 และ php5 */
if($t == "object") return ($o->{$fld});
}
?>
</div>
<!-- /.row (main row) -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
<div class="float-right d-none d-sm-inline-block"><b>Version</b> 3.0.4</div>
</footer>
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="https://adminlte.io/themes/v3/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://adminlte.io/themes/v3/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<!-- Bootstrap 4 -->
<script src="https://adminlte.io/themes/v3/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="https://adminlte.io/themes/v3/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="https://adminlte.io/themes/v3/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="https://adminlte.io/themes/v3/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="https://adminlte.io/themes/v3/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="https://adminlte.io/themes/v3/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="https://adminlte.io/themes/v3/plugins/moment/moment.min.js"></script>
<script src="https://adminlte.io/themes/v3/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="https://adminlte.io/themes/v3/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="https://adminlte.io/themes/v3/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="https://adminlte.io/themes/v3/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="https://adminlte.io/themes/v3/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="https://www.masterhook.net/public/assets/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="https://adminlte.io/themes/v3/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="https://adminlte.io/themes/v3/dist/js/demo.js"></script>
</body></html>
จำนวน : 382 บรรทัด