ตัวอย่างโค้ดสร้างรายการแสดงความเห็นบนเว็บไซต์

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21906
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

ตัวอย่างโค้ดสร้างรายการแสดงความเห็นบนเว็บไซต์

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

การทำเว็บไซต์นอกจากใช้เพื่อแสดงข้อมูลต่างๆ แล้ว บางเว็บไซต์ยังเปิดให้ผู้เข้าชมหรือสมาชิก สามารถที่จะแสดงความคิดเห็นกับเรื่องต่างๆ ได้ด้วย ซึ่งโครงสร้างของส่วนแสดงความคิดเห็นหลักๆ แล้วจะแบ่งเป็น ข้อมูลรายการความคิดเห็นที่มีผู้บันทึกไว้ กับ ส่วนของฟอร์มที่ใช้ในการบันทึกความคิดเห็น สำหรับในตัวอย่างนี้จะเป็นเพียงการทำ Layout ด้วย HTML และ CSS เท่านั้น ไม่ได้มีการเชื่อมต่อฐานข้อมูล แต่ผู้ที่สนใจสามารถนำตัวอย่างโค้ดไปประยุกต์ใช้ดึงจากฐานข้อมูลได้

รายการ Library ที่เกี่ยวข้องในตัวอย่างนี้

โค้ดตัวอย่างทั้งหมด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Comments</title>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
		<style>
			.review_group {
				margin-top: 30px;
			}
			.review_header {
				margin-top: 20px;
				font-weight: bold;
				border-bottom: 1px solid #999;
			}
			.review_header h3 {
				margin: 0;
			}
			.review_write {
				background-color: #6b6a6a;
				color: #fff;
				height: 2.5em;
				padding-top: 0.6em;
				padding-left: 0.2em;
				font-size: 1.5em;
				padding-right: 0.2em;
				text-align: center;
				border-radius: 5px;
				font-weight: 400;
			}
			.review_item {
				margin-top: 1em;
				margin-bottom: 1em;
				padding: 10px 10px 10px 0;
			}
			.review_user .icon-username {
				position: relative;
				display: inline-block;
				font-size: 3em;
				color: #6b6a6a;
				bottom: -10px;
				margin-right: 10px;
			}
			.review_datetime {
				text-align: right;
				font-size: 12px;
				font-weight: 400;
				padding-top: 15px;
			}
			.review-rating {
				color: #f0cb2d;
			}
			.review_item .review_text {
				margin: 1em 0 0 0.25em;
			}
			.review_group .alert.alert-warning {
				background-color: #efe7b8;
				padding: 30px;
				margin-bottom: 30px;
				border-radius: 3px;
				border: none;
				position: relative;
			}
			.review_text_not_login {
				margin-top: 10px;
				font-style: italic;
			}
			.review_group .btn {
				margin-top: 20px;
				border-color: #75a338;
				background: #85ba40;
				border: none;
				border-radius: 30px;
				line-height: 40px;
				padding: 0 30px;
			}
		</style>
	</head>
	<body>
		<div class="review_group container">
			<div class="row">
				<div class="col-md-10 col-sm-9 col-xs-9  review_header"><h3>FEATURED REVIEWS &amp; RATINGS</h3></div>
				<div class="col-md-2 col-sm-3 col-xs-3 review_write"><i class="fa fa-pencil"></i> เขียนรีวิว</div>
			</div>
			<div class="row review_item">
				<div class="col-md-6 col-sm-12 col-xs-12 review_user">
					<div class="icon-username">
						<i class="fa fa-user-circle"></i> 
					</div>
					สมปอง				
					<p></p>
					<div class="review-rating">
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
					</div>
				</div>
				<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
					1 เดือนที่แล้ว			
				</div>
				<div class="col-md-12 col-sm-12 col-xs-12 review_text">
					ข่าวสารดีมากครับ			
				</div>
			</div>
			<div class="row review_item">
				<div class="col-md-6 col-sm-12 col-xs-12 review_user">
					<div class="icon-username">
						<i class="fa fa-user-circle"></i> 
					</div>
					สมชาย				
					<p></p>
					<div class="review-rating">
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
					</div>
				</div>
				<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
					1 สัปดาห์ที่แล้ว			
				</div>
				<div class="col-md-12 col-sm-12 col-xs-12 review_text">
					อยากได้ข้อมูลมากกว่านี้ สอบถามเพิ่มเติมได้ที่ไหนครับ			
				</div>
			</div>
			<div class="row review_item">
				<div class="col-md-6 col-sm-12 col-xs-12 review_user">
					<div class="icon-username">
						<i class="fa fa-user-circle"></i> 
					</div>
					สมหมาย				
					<p></p>
					<div class="review-rating">
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
					</div>
				</div>
				<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
					1 สัปดาห์ที่แล้ว			
				</div>
				<div class="col-md-12 col-sm-12 col-xs-12 review_text">
					เห็นด้วยครับ			
				</div>
			</div>
			<div id="jshop_review_write" class="review_text_not_login text-center alert alert-warning">
				กรุณาเข้าระบบเพื่อเขียนความเห็น			
				<p>
					<a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#login">
						ลงทะเบียน / เข้าสู่ระบบ				
					</a>
				</p>
			</div>
		</div>
	</body>
</html>

ตัวอย่างการแสดงผล
Share Knowledge-1.png
Share Knowledge-1.png (42.31 KiB) Viewed 3706 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41117
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: ตัวอย่างโค้ดสร้างรายการแสดงความเห็นบนเว็บไซต์

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

มีแบบโค้ดเต็มๆ ของ Joomla Extension ไหมครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 45