หมวดไฟฟ้า/อิเล็กทรอนิกส์/คอมพิวเตอร์ => ห้อง SMF 2.0.X => Programming => ห้องคอมพิวเตอร์ => นานาสาระ SMF => ข้อความที่เริ่มโดย: Auto Man ที่ 01 มีนาคม 2563, 10:44:05
-
กำลังหาวิธีการแนะนำคู่มือการซ่อมล่าสุด สัก 5-6 เรื่อง มาแสดงที่หน้าแรก
เพื่อนสมาชิกเว็บจะได้เข้าถึงข้อมูลคู่มือการซ่อมล่าสุดของเว็บได้ง่ายขึ้น ประมาณนั้น
แหล่งข้อมูล => http://www.thaiseoboard.com/index.php?topic=375548.0
ลิ้งค์สำรอง => http://www.thaiseoboard.com/index.php/topic,355815.0.html
อีก => http://www.thaiseoboard.com/index.php/topic,280856.0.html
มันต้องได้สักอันล่ะ http://www.thaiseoboard.com/index.php/topic,186333.0.html
อันนี้ล่าสุด สไตล์ โซนไอที -> https://www.forum.coolhostplus.net/index.php/topic,102.0.html
(11 มีนา 63)
หน้าตาประมาณนี้ แต่ว่าไม่ใช่ม้านะ เป็นหน้าตาคู่มือการซ่อม 5 5 5
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606592)
-
ลองดูครับ
ไฟล์ BoardIndex.template.php ครับผม เวอร์ชั่น 2.0.11
แทรกไว้ก่อน ?>
function findIMG($text){
preg_match_all('/\[img\].*?\[\/img\]/i',$text,$page);
foreach($page as $value)
$src = substr($value[0],5);
$src = substr($src,0,-6);
return($src);
}
function ssi_pic($num_top = 12,$order,$board){
global $db_prefix, $scripturl, $smcFunc;
$request = $smcFunc['db_query']('', '
SELECT t.id_topic,m.body,m.subject
FROM {db_prefix}messages m,{db_prefix}topics t
WHERE t.id_first_msg=m.id_msg AND t.id_board='.$board.'
ORDER BY t.'.$order.' DESC
LIMIT '.$num_top,
array(
)
);
$posts = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
// Build the array.
$topics[] = array(
'id' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject']
);
}
$smcFunc['db_free_result']($request);
foreach ($topics as $data){
$topic = "index.php?topic=".$data['id'].".0";
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
if($srcPic ==''){
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$topic.'" title="'.$subject.'" target="_blank"><img src="http://เวปของคุณ/Themes/default/images/noimage.jpg" width="220" height="146" alt="" /><p>'.$subject.'</p></a></div>
</div>';
}else{
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$topic.'" title="'.$subject.'" target="_blank"><img src="'.$srcPic.'" width="220" height="146" alt="" /><p>'.$subject.'</p></a></div>
</div>';
}
}
}
ส่วนโค๊ดนี้ ไฟล์เดียวกันครับ แทรกไว้ตรงที่อยากจะแทรกครับ
echo'<div class="cat_bar">
<h3 class="catbg">สินค้า และ ร้านค้าใหม่ ล่าสุด</h3></div>';
echo''.ssi_pic(6,'ID_TOPIC',array(34,35,36)).'';
6 คือรูปหรือโพสต์ที่อยากให้โชว์ในหน้าแรกครับ
34,35,36 คือไอดีของบอร์ดที่ต้องการดึงมาแสดงครับ
ไฟล์ index.css (ในธีมที่คุณใช้อยู่ครับ) ต่อท้ายเลยครับ
.boxpGal {
background-color: rgba(255, 255, 255, 0);
float: left;
height: 180;
width: 150px;
margin: 5px;
}
-
raykung
ฟังก์ชั่น findIMG ใช้ดึงภาพจาก tag ของ [ img]..[ /img] แรกของกระทู้นั้นๆ ครับ (ดึงภาพแรกของกระทู้)
โดยดึงจากข้อความในส่วนของ body นะ มันจะแยกให้ว่าภาพแรกของกระทู้คือลิงก์อะไรโดยใช้คำสั่ง preg_match_all
แต่ฟังก์ชั่นนี้มันมี bug อยู่ตรงที่ tag ของ [ img] มันใส่ parameter เพิ่มเติมได้เช่น alt, width, height
เช่น [ img width="80"]..[ /img] มันจะใช้งานกับฟังก์ชั่น findIMG ไม่ได้
ส่วนฟังก์ชั่น ssi_pic ถ้าคุณกำหนด Order โดย 'ID_TOPIC' จะเป็นการดึงกระทู้ล่าสุดของ Board ที่เลือกมา
แล้วก็วนลูปไปเอา Id, รูป, ชื่อกระทู้ มาแสดง แต่ถ้าในกระทู้นั้นไม่มีรูปอยู่ (ไม่มีการใช้งาน [ img]...[ /img])
มันจะไปเอารูป http://www.post-nook.com/forum...es/default/images/NO_IMAGE.png มาแสดงแทน
TaLonTour
.boxpGal{
background-color: #ffffff;
padding:3px;
float:left;
width:174px;
height:180px;
}
.picpGal{
padding:2px;
height:130px;
overflow:hidden;
border:1px #CCC dotted;
}
ลองใล่ปรับดูนะครับ อันนี้ที่ผมปรับ
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
-
ลองปรับแต่งแล้ว แต่ว่ามีเออเรอร์แบบนี้
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606593)
-
ยังไม่เป็นผล ฝากไว้ก่อน เดี๋ยวจะมาเอา
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606594)
-
พยายามกันต่อไป ได้มาบ้างล่ะ เห็นความจริงลางๆ
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606615)
-
ต้องย้อนไปศึกษาเรื่อง <div></div>
https://www.beanthemes.com/knowledge/basic-div-html/
ตัวอย่างโค้ด แบบใส่ค่าตรง ใน div
<div style="color: red;">
Your Text
</div>
ตัวอย่างโค้ด ใส่ id หรือ class เพื่อใช้อ้างอิงกับการจัด CSS
ใน html
<div class="red">
Your Text
</div>
ใน CSS
.red{
color: red;
}
ตามตัวอย่าง ตัวหนังสือคำว่า Your Text ก็จะแสดงผลเป็นสีแดงเช่นเดียวกับแบบแรก ซึ่งวิธีการหลังจะเป็นวิธีการที่ได้รับความนิยมมากกว่า เนื่องจากง่ายต่อการแก้ไขในภายหลังนั้นเอง
-
HTML : เขียนเว็บไซต์ด้วยแท็ก Div
ทำความรู้จักกับ tag div
tag div เป็นการแสดงข้อมูลหรือรูปแบบเป็นลักษณะเป็นบล็อกๆ
เปรียบเทียบ tag div กับ table
1.div ส่วนใหญ่ใช้กำหนดเป็นกรอบของข้อมูล สามารถใช้ css เข้ามาจัดการตำแหน่ง ซ้าย ขวา ล่าง หรือจะให้ลอยก็ได้ ส่วนการโหลดข้อมูล แต่ละข้อมูลใน div จะแบ่งแยกกันโหลด
2.table ส่วนมากแล้วจะนำไปใช้กับข้อมูลที่จัดเป็นรูปแบบของตาราง เป็นช่องๆ ส่วนการโหลดข้อมูล มันจะรอให้ข้อมูลภายในช่องต่างๆโหลดให้เสร็จทั้งหมดก่อน มันถึงจะแสดงข้อมูลทั้งตารางออกมาให้เห็น
ข้อดีในการใช้ tag div
1. div มีความยืดหยุ่นในการจัดหน้าเว็บ มากกว่าการใช้ Table
2. Table จะแสดงผลเนื้อหาได้ก็ต่อเมื่อโหลดจบแท็กแล้ว (</table>)
3. ตกแต่งรูปแบบได้หลากหลายกว่า เมื่อใช้ร่วมกับ css
4.ไฟล์ที่ใช้ Div มีขนาดเล็กกว่า
ตัวอย่าง code ที่ใช้ div
<?
if($level_arry[$i] == 'A1' || $_SESSION['name'] == "administrator") {
?>
<div id = "cpanel">
<div style = "float:left;">
<div class="icon">
<a href="index2.php?option=addusermac"> <img src="images/student1.jpg" alt="เพิ่มผู้ใช้งานใหม่ประเภทนักศึกษา" width="54" height="54" border="0" align="middle" />
<span>เพิ่มผู้ใช้นักศึกษา</span><b>MAC</b>
</a>
</div>
</div>
</div>
<b>
</b>
<?
}
?>
ผลที่ได้
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
ที่มา... (https://arit.rmutsv.ac.th/th/blogs/50-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-php-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%81-div-789)
-
เว็บนี้เข้าท่าดีแฮะ... (https://www.108like.com/computer/css_layout_tutorial.html)
- การวางเลย์เอาท์ (Layout) ด้วยวิธีต่างๆใน CSS
ในช่วงก่อนๆนั้นการวาง Layout มักจะใช้คำสั่ง Table ในการจัดวาง เพื่อออกแบบเค้าโครงของหน้าเว็บเพจ หรือทั้งเว็บไซต์ วิธีการนี้เพียงแค่เราเข้าใจคำสั่งที่เกี่ยวกับตาราง (Table) อันได้แก่ table , tr , td เป็นต้น ก็จะสามารถสร้างหรือออกแบบโครงสร้าง หรือเลย์เอาท์
(Layout) ได้ดั่งใจ
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606743)
แต่ปัญหาคือเมื่อเพจนั้นถูกเปิดขึ้น มันจะแสดงเนื้อหาหลังจากที่โหลด Table เสร็จเสิ้น หรือจะอ่านขึ้นมูลจากด้านบนลงสู่ด้านล่าง และการใช้ Table ในการจัด Layout ทำให้ใช้เวลาในการโหลดหน้าเว็บพอสมควร เว็บโปรแกรมเมอร์ส่วนใหญ่จึงหันมาใช้แท็กง่ายๆอย่างแท็ก DIV หรือแท็ก P แทน และใช้ CSS ในการกำหนดว่าจะใช้บล็อกไหนเป็น Header บล็อกไหนเป็น Footer ดังภาพ
ใช้ DIV & CSS ในการจัดวาง Layout
วิธีการนี้เป็นการจัดวางเลย์เอาท์(layout)เพื่อออกแบบเว็บไซต์ที่เป็นที่นิยมในปัจจุบัน โดยวิธีการนี้เราจะใช้ DIV Tag ในภาษา HTML ทั้งหน้าเว็บเพจ จากนั้นจึงใช้ CSS ในการกำหนดหรือจัดวางเลย์เอาท์ได้ตามใจเรา
ตัวอย่าง layout_design.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="css_layout.css">
</head>
<body>
<div id="all">
<div id="header"><h1>CSS&HTML Layout</h1></div>
<div id="left"><b>This is left side.</b>
</div>
<div id="content">
<p>การจัดวางโครงสร้าง (Layout) ของเว็บ ถือเป็นจุดเริ่มต้นและจุดสำคัญมากในการออกแบบ ก่อนที่จะสร้างส่วนอื่นๆ เว็บโปรแกรมเมอร์ส่วนใหญ่มักออกแบบเค้าโครงของเว็บเพจไว้ก่อนเสมอ จากนั้นจึงกำหนดโครงสร้างอื่นๆต่อไป
</p>
<p>ตัวอย่างนี้ผู้เขียนได้ออกแบบ Layout อย่างคร่าวๆ โดยใช้แท็ก DIV ใน HTML พร้อมกับใช้ CSS ในการจัดการให้ข้อมูลออกมาในรูปแบบที่ต้องการ
</p>
</div>
<div id="right"><b>This is right side.</b></div>
<div id="footer"><b>This is footer</b></div>
</div>
</body>
</html>
ผลลัพธ์ที่ได้เมื่อยังไม่มีคำสั่ง CSS ที่เอาไว้ควบคุมลักษณะ หรือการจัดวางเลย์เอาท์ต่างๆ จะแสดงเพียงแค่ text ข้อความธรรมดาเมื่อรันผ่านแต่ละบราวเซอร์ ดังภาพ
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606745)
ขั้นตอนต่อไปเป็นการสร้างไฟล์ CSS อีก 1 ไฟล์ (แทรกแบบ External) โดยมีชื่อไฟล์ว่า css_layout.css ดังนี้
ตัวอย่าง css_layout.css
* { margin: 0; padding: 0; }
#all{ width:980px; height:100%; margin:0px auto; position:relative; }
#header{ background-color:#ec8000; height:100px; padding:8px; }
#left{ background-color:#80ec00; height:100%; width:200px; position:absolute;}
#content{ position:absolute; margin:0 250px 0 200px; padding:8px; }
#right{ background-color:#8080ec; height:100%; width:250px; position:absolute; right:0; }
#footer{ position:absolute; background-color:#808080; height:100px; text-align:center; bottom:-120px; width:100%; }
ผลลัพธ์ที่ได้จะเป็นการจัดเลย์เอาท์ (Layout) โดยแบ่งเป็น Header , Left side , Right side , Content และ Footer ดังภาพ
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62606744)
หวังว่านักศึกษาทุกท่านคงพอจะเข้าใจในบทนี้ ผู้เขียนต้องการจะสื่อให้เห็นว่าในการจัดวางเลย์เอาท์ในปัจจุบันไม่ควรใช้ Table หรือให้พยายามใช้แท็ก DIV ใน HTML แทน เพราะข้อดีที่สำคัญคือทำให้เว็บโหลดได้เร็วขึ้น ซึ่ง CSS กับ HTML ทุกวันนี้สามารถประยุกต์ใช้งานได้อย่างกว้างขวางมากกว่า
อย่างไรก็ตามขึ้นอยู่กับนักออกแบบเองว่าควรเลือกใช้ TAG ใด หรือจะออกแบบให้ Layout มีความสวยงามแตกต่างกับเว็บไซต์อื่นๆอย่างไร ซึ่งตรงจุดนี้ก็เป็นความสามารถเฉพาะของนักออกแบบและพัฒนาซอฟแวร์
-
ฝากไว้ก่อน Tag <div> 5 5 5
-
น่าจะพอได้แล้วล่ะ เลยเอาไปใช้ในเบื้องต้นก่อน
ซึ่งยังไม่ลงจุดที่ต้องการสักเท่าไหร่
เลยไปโพสต์ถามที่ Thai SEO Board
ได้คำแนะนำมา
เขียนแยกไฟล์แล้วดึงผ่าน iframe มาแสดงครับ
สร้างไฟล์ใหม่ขึ้นมา แล้ว include 'SSI.php'; ตาม path
เช่นสร้าวไฟล์ new-topic.php
<?php
include 'SSI.php';
โค้ดต่างๆ ...............
?>
เวลาเรียกใช้งานก็ <iframe src="doamin[dot]com/new-topic.php"></iframe> เป็นต้นครับ
-
ไฟล์ new-ad.php
<?
include ('SSI.php');
function findIMG($text){
preg_match_all('/\[img\].*?\[\/img\]/i',$text,$page);
foreach($page as $value)
$src = substr($value[0],5);
$src = substr($src,0,-6);
return($src);
}
function ssi_pic($num_top = 12,$order,$board = array()){
global $db_prefix, $scripturl, $smcFunc;
$request = $smcFunc['db_query']('', '
SELECT t.id_topic,m.body,m.subject
FROM {db_prefix}messages m,{db_prefix}topics t
WHERE t.id_first_msg=m.id_msg AND t.id_board IN('. implode(',',$board) .')
ORDER BY t.'.$order.' DESC
LIMIT '.$num_top,
array(
)
);
$posts = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
// Build the array.
$topics[] = array(
'id' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject']
);
}
$smcFunc['db_free_result']($request);
foreach ($topics as $data){
$topic = "index.php?topic=".$data['id'];
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$srcPic.'" title="คลิ๊กเพื่อดูภาพเต็ม."><img src="'.$srcPic.'" width="150" alt="" /></a></div><center>'.mb_substr($subject,0,20,'UTF-8').'</center>
<div class="viewAllpic"><a href="'.$topic.'" target="_blank"><font color="#0000FF"><b>อ่านเพิ่มเติม...</b></font></a></div>
</div>';
}
}
echo'<div class="cat_bar">
<h3 class="catbg">คู่มือการซ่อม และวายริ่งรถยนต์ ล่าสุด...</h3></div>';
echo''.ssi_pic(6,'ID_TOPIC', array(25,436,656,739)).'';
?>
-
ตัวอย่างมาจากการตั้งห้องสนทนา (https://www.goragod.com/knowledge/%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B8%AB%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%AA%E0%B8%99%E0%B8%97%E0%B8%99%E0%B8%B2%E0%B8%9A%E0%B8%99%20smf.html)
-
แทรกโค๊ด iframe ได้มาวางตรงจุดที่ต้องการ แต่ได้มาแบบนี้
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62612501)
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62612502)
-
จากบอร์ดไทยเสียว เอ๊ย... Thai SEO Board
ได้ความว่า
ถ้าเอาง่ายๆ สะดวกๆ ก็ tag table ครับ
https://www.w3schools.com/css/css_table.asp
ถ้าพอมีความรู้เรื่อง css แนะนำเขียนแบบ flexbox ครับ
https://www.w3schools.com/css/css3_flexbox.asp
เพิ่มเติมคือแบบ flexbox จัดการเรื่อง responsive ง่ายกว่า table ครับ
-
เพิ่มให้ดึงรูปคู่มือของรถยนต์แต่ละยี่ห้อเข้าไป เมื่อ 18 ก.ย. 65
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62802180)
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(http://upic.me/show/62802181)