Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > class card จะเชื่อมต่อกับข้อมูลในฐานข้อมูลได้ยังไงคะ



 

class card จะเชื่อมต่อกับข้อมูลในฐานข้อมูลได้ยังไงคะ

 



Topic : 135944



โพสกระทู้ ( 8 )
บทความ ( 0 )



สถานะออฟไลน์




สวัสดีค่ะอยากจะทราบว่า หากเราจะเอาข้อมูลจากฐานข้อมูลมาแสดงในหน้าเว็ปเราโดนใช้ class card ต้องใช้คำสั่งไหนคะ

Code (PHP)
</table>
        <div class="col col-sm-9 col-md-9">
          <br>
          <div class="alert alert-info" role="alert">
            - ข่าวประชาสัมพันธ์
          </div>

          <div class="row slider">
            <div class="col-md-12" >
              <div class="card"  style="width: 100%;">
                <img src="2.jpg" class="card-img-top" alt="..."> ดึงภาพจากฐานข้อมูลมาแสดง
                <div class="card-body">
                  <h5 class="card-title">ค่ายที่1</h5>  ใส่ตัวแปรชื่อกิจกรรม
                  <a href="#" class="btn btn-primary btn-sm" target="_blank">Read More..</a>
                </div>
              </div>
            </div>
			 
            </div> 
			


โดยอยากให้แสดงข้อมูล loop ออกมาเรื่อยๆจนครบตามจำนวนค่ะ เช่นมีข้อมูลของกิจกรรมทั้งหมด3กิจกรรม ก็จะได้card3อัน
อยากให้ข้อมูลที่ได้ออกมาเป็นลักษณะประมาณนี้ค่ะ โดยเปลี่ยนภาพและชื่อให้เป็นข้อมูลที่มาจากฐานข้อมูล
class crad

รยกวนผู้รู้ชี้แนะด้วยค่ะ



Tag : PHP, HTML, CSS, Bootstrap Framework, XAMPP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-02-27 00:38:44 By : _dbteen View : 2279 Reply : 9
 

 

No. 1



โพสกระทู้ ( 4,169 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


โดยปกติ Bootstrap มาตราฐานคือ 1 rows มี 12 col ถ้าคุณอยากให้มีรายละเอียดแถวละ 3 นำไปหาร 12 ผลลัพที่ได้คือ 4 col ต่อ 1 rows








ประวัติการแก้ไข
2021-02-27 00:59:07
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 00:58:33 By : Genesis™
 


 

No. 2



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


Code (PHP)
</table>
        <div class="col col-sm-9 col-md-9">
          <br>
          <div class="alert alert-info" role="alert">
            - ข่าวประชาสัมพันธ์
          </div>

          <div class="row slider">
            <div class="col-md-12" >
<!-- loop ผลลัพธ์เริ่มตรงนี้ -->
              <div class="card"  style="width: 100%;">
                <img src="2.jpg" class="card-img-top" alt="..."> ดึงภาพจากฐานข้อมูลมาแสดง
                <div class="card-body">
                  <h5 class="card-title">ค่ายที่1</h5>  ใส่ตัวแปรชื่อกิจกรรม
                  <a href="#" class="btn btn-primary btn-sm" target="_blank">Read More..</a>
                </div>
              </div>
<!-- สิ้นสุดการ loop ตรงนี้ -->
            </div>
			 
            </div> 
			


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 04:58:29 By : mr.v
 

 
วิธีการแก้ไขความต้องการ ณ. ปี ค.ศ. 2021 โดยใช้ CSS Flexbox/Grid
ให้คัดลอกไปวาง แล้วตั้งชื่อไฟล์ว่า JiMi.html และใช้ Browser ตัวไหนก็ได้เปิดดู

Code (PHP)
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .card-3-columns {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* แบ่งสามดอลัมภ์ เท่าฯกัน*/
            column-gap: 8px; /* ระยะห่างระหว่าง ดอลัมภ์*/
            grid-row-gap: 10px; /* ระยะห่างระหว่าง แถว*/
            box-sizing: border-box;
        }
        .card-3-item {
            box-sizing: border-box;
            border: 2px solid red;
            background-color: lightgray;
            padding: 12px;
        }
    </style>
</head>
<body>
    <!--ลูปตรงนี้ แต่ละลูปคือ หนึ่งแถว/สามดอลัมภ์-->
    <div class="card-3-columns">
        <div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
        <div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
        <div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
    </div>
    <!--จบลูปตรงนี้-->
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 07:23:25 By : ผ่านมา
 


 
จาก #NO 3 ออกแบบจากหน้าจอตัวอย่าง คิดซุกซนเข้าไปอีก
แบ่ง คอลัมภ์เดียว คือ 1fr
บรรทัดที่ 27-28 ก็ไม่จำเป็น

เดี๋ยวมันจัดเรียงให้เองแหละ งามแว๊บเลยแหล่ะ


ปล. ไปทางไหน ไม่เคยกลับทางเดิม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 07:33:54 By : ผ่านมา
 


 
ลืมบอกไปว่า เป็นเด็กเป็นเล็ก อย่าทำตัวแก่
ให้คิดซุกซน แหก แหวก กฏมีเอาไว้แหก

ส่วนพวกผมไม่ต้องเป็นห่วง มันกลายเป็น "ช่างแอร์ในตำนาน"
(เคยดูไหมหนังเรื่องนี้)
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 07:43:00 By : ผ่านมา
 


 

No. 6



โพสกระทู้ ( 1,994 )
บทความ ( 10 )



สถานะออฟไลน์
Facebook Blogger

PHP MySQL List Data Record & Get Result Row (mysqli) บทความนี้จะเป็นตัวอย่างของ mysqli การเขียน PHP เพื่ออ่านข้อมูลจาก Database ของ MySQL มาแสดงผลทางหน้าจอด้วย function ต่าง ๆ ของ mysqli ทำงานร่วมกับการ fetch ข้อมูลในรูปแบบของ array
https://www.thaicreate.com/php/php-mysql-mysqli-list-record.html
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 09:42:34 By : {Cyberman}
 


 

No. 7



โพสกระทู้ ( 9,587 )
บทความ ( 2 )



สถานะออฟไลน์


Code (PHP)
<style>
.my_col{ width: 25%; } /*  25% = 4 columns ต่อ 1 row  ปรับได้ตามต้องการ */
</style>
<div class="row" >
<?php
$ros = $cnx->query('select ....');
while($ro = $ros->fetch_object()){ ?>
  <div class = "d-table-cell my_col">
     <div class="card" >
        <img src="<?=$ro->img?>" >
     </div>
  </div>
<?php } ?>
</div>


bootstrap ไม่ได้มีแค่ col-xx-1 เท่านั้น ลองอย่างอื่น หรือ สร้างเอง ง่ายๆ ดูบ้างก็ได้ อิสระเสรี
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 12:21:43 By : Chaidhanan
 


 
วันข้างหน้าหากเจ้าของกระทู้ โชคร้ายไปเจอคนที่ต้องการ
ความแม่นยำระดับ เส้นขน คุณอาจจำเป็นต้องใช้มัน (วันนี้ไม่ได้ใช้ แต่วันหน้าก็ไม่แน่)

Code (PHP)
<style>
.my_col{ width: calc(25% - 2px); } /*  25% = 4 columns ต่อ 1 row  ปรับได้ตามต้องการ */
</style>
<div class="row" >
<?php
$ros = $cnx->query('select ....');
while($ro = $ros->fetch_object()){ ?>
  <div class = "d-table-cell my_col">
     <div class="card" >
        <img src="<?=$ro->img?>" >
     </div>
  </div>
<?php } ?>
</div>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-27 12:49:43 By : ผ่านมา
 


 
ขอบพระคุณสำหรับคำแนะนำทุกท่านเลยนะคะ ลองทำตั้งแต่วันแรกที่ได้รับคำแนะนำแล้วค่ะ จนได้ผลลัพธ์ที่ต้องการเรียบร้อย. นี้เป็นโค้ดที่ทำออกมาค่ะ สำหรับอนาคตอาจจะมีคนเอาเป็นแนวทางเพิ่มเติมค่ะ โดยโค้ดนี้จะให้แสดงข้อมูลในรูปแบบการ์ด ไม่เกิน 8 อันนะคะ. เพราะอยู่ในหน้าแรก ไม่ใช่หน้าแสดงผลลัพธ์ข้อมูลทั้งหมด

Code (PHP)
	
	<style> 
p.a {
  margin-bottom: 2px;
}
		   
p.cut_word {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
}		   
	  </style> 
  
<?php
$result = mysqli_query($conn,"select * from camp_data");
$num = mysqli_num_rows($result);//นับแถวทั้งหมดในตารางออกมา
	
			$i = 0;		$limit = 8;
			
?> <div class="row ">   <!--- start class row ------ !-->

<?php  
	while ($i < $num  && $i < $limit ){ 
			$row = mysqli_fetch_array($result);
		
			$id_camp = $row['id_camp'];

			$name_camp = $row['name_camp'];

		    $detail_camp = $row['detail_camp'];
			?>
   <div class="col-3 col-sm-3 col-md-3" style="margin-bottom: 20px;">
              <div class="card h-100"  style="width: 100%; ">
                <img src="school-template-master/img/2.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                 <h5 class="card-title" > <p class="cut_word"> <?php echo $name_camp ?> </p>  </h5>
                <p class="a">  <a href="#.php" class="btn btn-primary btn-sm" target="_blank">Read More..</a> </p>
                </div>
              </div>
            </div>
			
  <?php $i++; } ; ?>
<?php

?> </div> <!--- end class row ------ !-->

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-03-03 15:12:23 By : เจ้าของกระทู้
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : class card จะเชื่อมต่อกับข้อมูลในฐานข้อมูลได้ยังไงคะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่