จำนวนคนเข้าดู: 3,002

Front-end ShoppingCart version1.0 ||PHP7 + MySQLi + SweetAlert + Admin LTE [FreeCode]

Workshop การจัดการหน้าบ้านของ Shopping Cart ที่ผมแจกใน EP.36
ซึ่งจะเป็นการปรับหน้า UX/UI เป็นการเอา Bootstrap 4 มาใช้งานร่วมกับ PHP
ขั้นตอนแรกเราจะเปลี่ยนตัว index.php ใหม่ที่ผมได้สร้างขึ้นมา

ไฟล์ index.php

<?php
include('h.php');
include("condb.php");
?>
<!DOCTYPE html>
<head>
  <?php include('boot4.php');?>
</head>
<body>
<?php
  include('banner.php');
  ?>
 <?php
  include('navbar.php');
  ?>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-top: 10px">
        <div class="row">
            <?php
            $act = (isset($_GET['act']) ? $_GET['act'] : '');
            $q = $_GET['q'];
            if($act=='showbytype'){
            include('list_prd_by_type.php');
            }else if($q!=''){
            include("show_product_q.php");
            }else if($act=='add'){
            include("member_form_add.php");
            }else{
            include('show_product.php');
            }
            ?>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
<?php include('script4.php');?>

<?php

include('h.php');

include("condb.php");

<!DOCTYPE html>

<head>

<?php include('boot4.php');?>

</head>

<body>

<?php

include('banner.php');

<?php

include('navbar.php');

<?php

$act = (isset($_GET['act']) ? $_GET['act'] : '');

$q = $_GET['q'];

if($act=='showbytype'){

include('list_prd_by_type.php');

}else if($q!=''){

include("show_product_q.php");

}else if($act=='add'){

include("member_form_add.php");

}else{

include('show_product.php');

}

</div>

</body>

</html>

<?php include('script4.php');?>

ต่อไปจะเป็นการเรียกใช้ไฟล์ boot4.php ซึ่งย่อมาจากการดึง bootstarp 4 มาใช้นั้นเองครับ

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

และขั้นตอนต่อไปคือการสร้าง banner.php ขั้นตอนนี้เราจะสร้างโฟลเดอร์ขึ้นมาก่อนเพื่อเอารูปมาวางไว้ในโฟลเดอร์ก่อน

<div class="col-md-12" align="center" >
        	<img src="banner/shopping-4694470_1280.jpg" width="1110px" height="350px">
            <!--size 980 x 200px --> 
</div>

</div>

และต่อด้วยการสร้าง navbar.php ไว้สำหรับเมนูต่างๆ

<?php require_once('condb.php');
$query_typeprd = "SELECT * FROM tbl_type ORDER BY type_id ASC";
$typeprd =mysqli_query($con, $query_typeprd) or die ("Error in query: $query_typeprd " . mysqli_error());
// echo($query_typeprd);
// exit();
$row_typeprd = mysqli_fetch_assoc($typeprd);
$totalRows_typeprd = mysqli_num_rows($typeprd);
?>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-expand-lg navbar-info bg-warning">
        <a class="btn btn-Light" href="index.php" role="button">หน้าหลัก</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        &nbsp;<div class="btn-group">
          <button type="button" class="btn btn-Light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ประเภทสินค้า
          </button>
          <div class="dropdown-menu">
            <?php do { ?>
            <a href="index.php?act=showbytype&type_id=<?php echo $row_typeprd['type_id'];?>" class="dropdown-item"> <?php echo $row_typeprd['type_name']; ?></a>
            <?php } while ($row_typeprd = mysqli_fetch_assoc($typeprd)); ?>
            
          </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            &nbsp;
            <div class="btn-group">
              <a class="btn btn-Light" href="index.php?act=add" role="button">สมัครสมาชิก</a>
            </div>
            &nbsp;
            
            <?php
            if ($member_id!='') {
            
            } else {
            ?>
            <div class="btn-group">
              <a class="btn btn-Light" href="form_login.php" role="button">เข้าสู่ระบบ</a>
            </div>
            <?php } ?>
            
            
            <?php
            if ($member_id!='') {
            ?>
            <li class="nav-item">
              <a class="btn btn-Light" href="logout.php" role="button" onclick="return confirm('คุณต้องการออกจากระบบหรือไม่ ?')">ออกจากระบบ</a>
            </li>
            <?php } ?>
                                  
          </ul>
          <form class="form-inline my-2 my-lg-0" name="qp" action="index.php" method="GET">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" name="q">
            <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
          </form>       
        </div>
      </nav>
    </div>
  </div>
</div>

<?php require_once('condb.php');

$query_typeprd = "SELECT * FROM tbl_type ORDER BY type_id ASC";

$typeprd =mysqli_query($con, $query_typeprd) or die ("Error in query: $query_typeprd " . mysqli_error());

// echo($query_typeprd);

// exit();

$row_typeprd = mysqli_fetch_assoc($typeprd);

$totalRows_typeprd = mysqli_num_rows($typeprd);

<a class="btn btn-Light" href="index.php" role="button">หน้าหลัก</a>

</button>

ประเภทสินค้า

</button>

<?php do { ?>

<a href="index.php?act=showbytype&type_id=<?php echo $row_typeprd['type_id'];?>" class="dropdown-item"> <?php echo $row_typeprd['type_name']; ?></a>

<?php } while ($row_typeprd = mysqli_fetch_assoc($typeprd)); ?>

</div>

<a class="btn btn-Light" href="index.php?act=add" role="button">สมัครสมาชิก</a>

</div>

<?php

if ($member_id!='') {

} else {

</div>

<?php } ?>

<?php

if ($member_id!='') {

<a class="btn btn-Light" href="logout.php" role="button" onclick="return confirm('คุณต้องการออกจากระบบหรือไม่ ?')">ออกจากระบบ</a>

</li>

<?php } ?>

</ul>

<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

</div>

ไฟล์ script4.php

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

ต่อไปเป็นการสร้างหน้าแสดงสินค้า show_product.php

<?php
$q = $_GET['q'];
include("condb.php");
$sql = "SELECT * FROM tbl_product as p
INNER JOIN tbl_type  as t ON p.type_id=t.type_id
ORDER BY p.p_id DESC";  //เรียกข้อมูลมาแสดงทั้งหมด
$result = mysqli_query($con, $sql);
while($row_prd = mysqli_fetch_array($result)){
?>

<div class="col-sm-3" align="center">
    <div class="card border-Light mb-1" style="width: 16.5rem;">
        <br>
        <img class="card-img-top">
        <a href=""> <?php echo"<img src='p_img/".$row_prd['p_img']."'width='200' height='200'>";?></a>
        <div class="card-body">
            <a href="prd.php?id=<?php echo $row_prd[0]; ?>"><b> <?php echo $row_prd["p_name"];?></b> </a>
            <br>
            ราคา <font color=""> <?php echo $row_prd["p_price"];?></font> บาท
            <br>
            
            คงเหลือ <?php echo $row_prd["p_qty"];?> <?php echo $row_prd["p_unit"];?>
        </div>
        <br>
    </div>
</div>
<?php } ?>

<?php

$q = $_GET['q'];

include("condb.php");

$sql = "SELECT * FROM tbl_product as p

INNER JOIN tbl_type as t ON p.type_id=t.type_id

ORDER BY p.p_id DESC"; //เรียกข้อมูลมาแสดงทั้งหมด

$result = mysqli_query($con, $sql);

while($row_prd = mysqli_fetch_array($result)){

<br>

<br>

ราคา <font color=""> <?php echo $row_prd["p_price"];?></font> บาท

<br>

คงเหลือ <?php echo $row_prd["p_qty"];?> <?php echo $row_prd["p_unit"];?>

</div>

<br>

</div>

<?php } ?>

หน้ารายละเอียดสินค้า prd.php

<?php
include('h.php');
include("condb.php");
$p_id = $_GET["id"];
?>
<!DOCTYPE html>
<head>
  <?php include('boot4.php');?>
  <style>
  * {
  box-sizing: border-box;
  }
  .zoom {
  padding: 50px;
  transition: transform .2s;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  }
  .zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  }
  </style>
</head>
<body>
  <?php
  include('banner.php');
  include('navbar.php');
  ?>
  <div class="container">
    <div class="row">
      <?php
      $sql = "SELECT * FROM tbl_product as p 
          INNER JOIN tbl_type  as t ON p.type_id=t.type_id      
      AND p_id = $p_id
      ";
      $result = mysqli_query($con, $sql) or die ("Error in query: $sql " . mysqli_error());
      $row = mysqli_fetch_array($result);
      ?>
      <div class="col-md-12">
        <div class="container" style="margin-top: 50px">
          <div class="row">
            <div class="col-md-6">
              <div class="zoom">
                <?php echo"<img src='p_img/".$row['p_img']."'width='100%'>";?>
              </div>
            </div>
            <div class="col-md-6">
              <br>
              <h5><b><?php echo $row["p_name"];?></b></h5>
              <p>
                ประเภท : <?php echo $row["type_name"];?>
                <br>
                ราคา : <font color="red"> <?php echo $row["p_price"];?> </font> บาท  <br>
                 <b>คงเหลือ :</b> <?php echo $row["p_qty"];?> <?php echo $row["p_unit"];?>
              </p>
              <?php echo $row["p_detail"];?>
              <br> จำนวนการเข้าชม  <?php echo $row["p_view"];?> ครั้ง
                 <p> <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5500ee80057fdb99"></script>
                <div class="addthis_inline_share_toolbox_sf2w"></div>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
<?php include('script4.php');?>

<?php

include('h.php');

include("condb.php");

$p_id = $_GET["id"];

<!DOCTYPE html>

<head>

<?php include('boot4.php');?>

<style>

* {

box-sizing: border-box;

}

.zoom {

padding: 50px;

transition: transform .2s;

width: 300px;

height: 300px;

margin: 0 auto;

}

.zoom:hover {

-ms-transform: scale(1.5); /* IE 9 */

-webkit-transform: scale(1.5); /* Safari 3-8 */

transform: scale(1.5);

}

</style>

</head>

<body>

<?php

include('banner.php');

include('navbar.php');

<?php

$sql = "SELECT * FROM tbl_product as p

INNER JOIN tbl_type as t ON p.type_id=t.type_id

AND p_id = $p_id

$result = mysqli_query($con, $sql) or die ("Error in query: $sql " . mysqli_error());

$row = mysqli_fetch_array($result);

<?php echo"<img src='p_img/".$row['p_img']."'width='100%'>";?>

</div>

<br>

<p>

ประเภท : <?php echo $row["type_name"];?>

<br>

ราคา : <font color="red"> <?php echo $row["p_price"];?> </font> บาท <br>

<b>คงเหลือ :</b> <?php echo $row["p_qty"];?> <?php echo $row["p_unit"];?>

</p>

<?php echo $row["p_detail"];?>

<br> จำนวนการเข้าชม <?php echo $row["p_view"];?> ครั้ง

</p>

</div>

</body>

</html>

<?php include('script4.php');?>

last_view อัพเดทจำนวนการเข้าชมสินค้านั้นๆ

$sql_last_view = "SELECT p_view FROM tbl_product Where p_id = '".$p_id."'";
            $resalt_last_view = mysqli_query($con, $sql_last_view) or die ("Error in query: $sql_last_view " . mysqli_error());
            $row_last_view = mysqli_fetch_assoc($resalt_last_view);
            //เรียกดูวิวของสินค้านั้นๆ
                $last_view = $row_last_view['p_view']++;            
                $last_view++;
                //นำวิวสินค้าเดิมมา+1
                $update_view = "UPDATE `tbl_product` SET `p_view` = '".$last_view."' WHERE `p_id` ='".$p_id."'";
                $resalt_updateview = $con->query($update_view);
                //อัพเดทวิวสินค้าใหม่

$sql_last_view = "SELECT p_view FROM tbl_product Where p_id = '".$p_id."'";

$resalt_last_view = mysqli_query($con, $sql_last_view) or die ("Error in query: $sql_last_view " . mysqli_error());

$row_last_view = mysqli_fetch_assoc($resalt_last_view);

//เรียกดูวิวของสินค้านั้นๆ

$last_view = $row_last_view['p_view']++;

$last_view++;

//นำวิวสินค้าเดิมมา+1

$update_view = "UPDATE `tbl_product` SET `p_view` = '".$last_view."' WHERE `p_id` ='".$p_id."'";

$resalt_updateview = $con->query($update_view);

//อัพเดทวิวสินค้าใหม่

สร้างหน้าสมัครสมาชิก member_form_add.php

<div class="col-md-10">
<form  name="register" action="member_form_add_db.php" method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-2">  </div>
    <div class="col-sm-6" align="left">
      
      <h4> สมัครสมาชิก </h4><hr>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-2" align=""> Username :</div>
    <div class="col-sm-6" align="left">
      <input  name="m_user" type="text" required class="form-control" />  
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-2" align=""> Password :</div>
    <div class="col-sm-6" align="left">
      <input  name="m_pass" type="password" required class="form-control" id="m_pass"/>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-2" align=""> ชื่อ-สกุล :</div>
    <div class="col-sm-6" align="left">
      <input  name="m_name" type="text" required class="form-control" id="m_name" placeholder="ภาษาอังกฤษหรือภาษาไทย" />
    </div>
  </div>
  
  
  <div class="form-group">
    <div class="col-sm-3" align=""> อีเมล : </div>
    <div class="col-sm-6" align="left">
      <input  name="m_email" type="email" class="form-control" id="m_email" required  placeholder="name@hotmail.com"/>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-2" align=""> เบอร์โทรศัพท์ : </div>
    <div class="col-sm-6" align="left">
      <input  name="m_tel" type="text" class="form-control" id="m_tel" required  placeholder="ตัวเลขเท่านั้น" maxlength="10" pattern="^[0-9]+$" title="ตัวเลขเท่านั้น" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-2" align=""> ที่อยู่ : </div>
    &nbsp;&nbsp;&nbsp;<font color="red">** หมายเหตุ: กรุณากรอกที่อยู่จริง ** </font>
    <div class="col-sm-6" align="left">
      <textarea name="m_address" class="form-control" id="m_address" required></textarea>
    </div>
  </div>
    <div class="form-group">   
          <div class="col-sm-6">
            รูปภาพ :
            <input type="file" name="m_img" id="card_img" class="form-control" />
          </div>
        </div>
  <div class="form-group">
    <div class="col-sm-2"> </div>
    <div class="col-sm-6" align="right">
      <button type="submit" class="btn btn-success" id="btn"><span class="glyphicon glyphicon-saved"></span> สมัครสมาชิก  
      </button> <a href="index.php" type="button" class="btn btn-danger" id="btn"><span class="glyphicon glyphicon-saved"></span> ยกเลิก  </a>
    </div>
    
  </div>
</form>
</div>

<h4> สมัครสมาชิก </h4><hr>

</div>

<div class="col-sm-2" align=""> Username :</div>

</div>

<div class="col-sm-2" align=""> Password :</div>

</div>

</div>

<div class="col-sm-3" align=""> อีเมล : </div>

</div>

<div class="col-sm-2" align=""> เบอร์โทรศัพท์ : </div>

</div>

   <font color="red">** หมายเหตุ: กรุณากรอกที่อยู่จริง ** </font>

</div>

รูปภาพ :

</div>

<button type="submit" class="btn btn-success" id="btn"><span class="glyphicon glyphicon-saved"></span> สมัครสมาชิก

</button> <a href="index.php" type="button" class="btn btn-danger" id="btn"><span class="glyphicon glyphicon-saved"></span> ยกเลิก </a>

</div>

</form>

</div>

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Front-end ShoppingCart ShoppingCart

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Front-end ShoppingCart version1.0 || Bootstrap4

Front-end ShoppingCart version1.0 ||PHP7 + MySQLi + SweetAlert + Admin LTE [FreeCode]

Related

วัยวุฒิ ชุมเมืองปัก

Front-end ShoppingCart version1.0 ||PHP7 + MySQLi + SweetAlert + Admin LTE [FreeCode]

Share this:

Related

วัยวุฒิ ชุมเมืองปัก