BOSSZI

รับออกแบบวงจร รับทำวงจร ตามความต้องการ

Currently Viewing Posts in How to Make a Website

UNIQUE KEY การกำหนดไม่ให้ข้อมูลในตารางซ้ำกัน

UNIQUE KEY การกำหนดไม่ให้ข้อมูลในตารางซ้ำกัน

$sql = "CREATE TABLE $table_name (
    id int(10) unsigned NOT NULL  AUTO_INCREMENT COMMENT 'เก็บจำนวนงานรัน AUTO',
    numberjob mediumint(6) unsigned NOT NULL COMMENT 'เก็บรหัสงาน 634352', /** UNIQUE ถ้าใส่ข้อมูลที่เหมือนกันจะไม่สามารถเขียนทับได้ */
    brand varchar(25) COMMENT 'เก็บชื่อยี่ห้อตามตาราง',
    PRIMARY KEY  (id),
    UNIQUE KEY numberjob (numberjob) /* ใส่ UNIQUE ที่ฟิล numberjob ข้อมูลในฟิลนี้จะไม่ซ้ำกันถ้ามีการเพิ่มข้อมูลที่เหมือนกันจะไม่สามารถใส่ได้ */       
)";

 

การใช้ ZEROFILL เพิ่มศูนย์ตัวหน้าในฐานข้อมูลอัตโนมัติเพื่อสร้างรหัสสินค้าหรืออื่นๆ

การใช้ ZEROFILL เพิ่มศูนย์ตัวหน้าในฐานข้อมูลอัตโนมัติเพื่อสร้างรหัสสินค้าหรืออื่นๆ

CREATE TABLE int_bosszi_zerofill (					/* สร้างตาราง*/
    a INT(6) UNSIGNED ZEROFILL NOT NULL,   /* กำหนด a ให้มีขนาด 6 หลักและเติมศูนย์ด้านหน้าอัตโนมัติ ด้วย zerofill*/
    b INT(6) UNSIGNED NOT NULL);
    
INSERT INTO int_bosszi_zerofill (a,b) VALUES	/* ใส่ข้อมูลทดลองในฐานข้อมูล*/
(1, 1),
(22, 22),
(333, 333),
(4444, 4444),
(55555, 55555),
(666666, 666666);

SELECT a, b FROM int_bosszi_zerofill;				/* เรียกข้อมูลจากฐานข้อมูลมาดูผลลัพธ์*/

 

a b
000001 1
000022 22
000333 333
0044444 4444
055555 55555
666666 666666

 

SQL บันทึกส่วนตัว

คำสั่งเกี่ยวกับ SQL

SELECT  สำหรับเรียกข้อมูลมาแสดง

  • SELECT * FROM customers;        // เรียกข้อมูลทั้งหมดจากฟิลด์ customers ออกมา
  • SELECT id FROM customers;      // เรียกข้อมูลเฉพาะคอลัมน์ id ออกมา
  • SELECT id,name FROM customers;      // เรียกข้อมูลคอลัมน์ id และ name ออกมาในฟิลด์อาจมีหลายคอลัมน์
  • SELECT id_file AS idtest,filename FROM smf_admin_info_files;   // เปลี่ยนชื่อฟิลด์ที่จะแสดงผลแต่ไม่ไม่กระทบกับฐานข้อมูล
  • SELECT * FROM customers WHERE id = 2 ;    // เรียกข้อมูลเฉพาะคอลัมน์ id ที่  row 2 ออกมา
  • SELECT * FROM customers WHERE name = ‘tarn’ ;    // ไม่ใช่ตัวเลขให้ใช้  ‘  ‘  ครอบด้วย การค้นหาถ้าในฐานข้อมูลมี tarns จะหาไม่เจอต้องให้ตรงกันทุกตัวอักษร
  • SELECT id FROM customers WHERE id = 2 ;     // เรียกข้อมูล row 2 ออกมา เอาเฉพาะคอลัมน์ id และ name เท่านั้น
  • SELECT * FROM smf_members WHERE id_member = 1  AND member_name = ‘admins’ ; // การใช้ AND
  • SELECT * FROM smf_members WHERE member_name = ‘user’  OR member_name = ‘admins’ ; // การใช้ OR
  • SELECT * FROM smf_members ORDER BY email_address; // การจัดเรียงตามชื่อฟิลด์ ในที่นี้จัดเรียงตามฟิลด์ที่ชื่อ email_adderss ถ้าไม่กำหนดมันจะเรียงจากน้อยไปหามาก 0 →a→ก
  • SELECT * FROM smf_members ORDER BY email_address DESC; //  ใส่ DESC จะเรียงจากมากไปหาน้อย มาจากคำว่า descending
  • SELECT * FROM smf_members ORDER BY email_address DESC LIMIT  5;  // จำกัดข้อมูลที่เรียกออกมา 5 row
  • SELECT * FROM smf_members WHERE id_member <= 10; //  ดึงข้อมูล id 1 – 10
  • SELECT * FROM smf_members WHERE id_member >= 10; //  ดึงข้อมูล id 10 เป็นต้นไป
  • SELECT * FROM smf_members WHERE id_member > 10; //  ดึงข้อมูล id 11 เป็นต้นไป
  • SELECT brand FROM wp_jobrepair WHERE NOT brand=’FANUC’ GROUP BY brand ; // ดึงข้อมูลฟิลด์ brand  โดยไม่เอา FANUC
  • SELECT * FROM wp_jobrepair WHERE brand IN(‘samsung’,’fanuc’); // การใช้ IN คือเราต้องการข้อมูลอะไรที่อยู่ในฟิลด์ brand
  • SELECT * FROM wp_jobrepair WHERE brand NOT IN(‘fanuc’); // การใช้ NOT IN คือเราไม่ต้องการข้อมูลอะไรที่อยู่ในฟิลด์ brand
  • SELECT * FROM wp_jobrepair WHERE brand LIKE ‘a%’;  // การค้นหาคำที่ขึ้นต้นด้วยตัว a แล้วตามด้วยอะไรก็ได้( % คือ อะไรก็ได้)
  • SELECT * FROM wp_jobrepair WHERE brand LIKE ‘%c’; // การค้นหาคำที่ลงท้ายด้วยตัว c อะไรขึ้นต้นก็ได้( % คือ อะไรก็ได้)
  • SELECT * FROM wp_jobrepair WHERE brand LIKE ‘%a%‘; // ค้นหาตัวที่มีอักษร a ในคำ ( % คือ อะไรก็ได้)
  • SELECT * FROM wp_jobrepair WHERE brand LIKE ‘f%c’; // ค้นหาคำที่ขึ้นต้นด้วยตัว f และลงท้ายด้วย a
  • SELECT * FROM wp_jobrepair WHERE id BETWEEN 5 AND 10; // ใช้ BETWEEN ค้นหา id 5-10 มาแสดงผล
  • SELECT * FROM wp_jobrepair WHERE NOT id BETWEEN 5 AND 10; // ค้นหาข้อมูลทั้งหมดแต่ไม่เอา id 5-10
  • SELECT * FROM wp_jobrepair WHERE id BETWEEN 1 AND 20 AND brand IN(‘samsung’); // ค้นหา id 5-20 และยี่ห้อ samaung มาแสดงผล
  • SELECT * FROM wp_jobrepair WHERE comment IS NULL; // ค้นหาข้อมูลสินค้าที่ยังไม่กรอกหรือเป็น NULL นั่นเอง
  • SELECT * FROM wp_jobrepair WHERE comment IS NOT NULL; //ค้นหาข้อมูลสินค้าที่มีข้อมูลหรือไม่เป็น NULL นั่นเอง

INSERT สำหรับเพิ่มข้อมูล

  • INSERT INTO wp_jobrepair VALUES (21,111111,’aerw’,’sun’,’445hft’,’5545′,NULL,’ฮาสาด’,2,1,’หมายเหตุ’,current_time(),current_time()); // จำนวนขอมูลชนิดข้อมูลและฟิลด์ จะต้องตรงกัน ตัวไหนที่ไม่มีข้อมูลให้ใส่ NULL ใว้ก่อน ข้อเสียถ้ามีการเปลี่ยนแปลงอะไรเกี่ยวกับฟิลด์ มันจะพังทันที
  • INSERT INTO wp_jobrepair(numberjob,brand,namejob,model,serialjob,picture,descriptionjob,customer_id,typejob,comment,datejob,updatejob)
    VALUES (111111,’aerw’,’sun’,’445hft’,’5545′,NULL,’ฮาสาด’,2,1,’หมายเหตุ’,current_time(),current_time());  // เพิ่มชื่อฟิลด์เข้าไปลดการผิดพลาดในกรณีที่ฟิลด์มีการเปลี่ยนแปลงข้อมูลจะไปลงตรงฟิลด์แน่นอน และใส่ข้อมูลไม่ครบฟิลด์ก็ได้

UPDATE สำหรับแก้ใขข้อมูล

  • UPDATE wp_jobrepair SET numberjob=222222,brand = ‘chang’ WHERE id=22;  // แก้ใขข้อมูล จะต้องมี UPDATE ,SET ,WHERE

DELETE สำหรับลบข้อมูล

  • DELETE FROM wp_jobrepair WHERE id=22; // ลบข้อมูลไอดี 22

Aggregate Functions คือการรวมฟังก์ชัน อื่นๆที่ใช้

  • SELECT COUNT(id_member) FROM smf_members ;  // นับ row id ทั้งหมดที่มี
  • SELECT COUNT(id_member) FROM smf_members WHERE member_name=’admin’; // นับจำนวน row id ว่ามีจำนวนเท่าใหร่ โดยมีเงื่อนใข ค้นหา admin ในฟิลด์ที่ชื่อ member_name ว่ามีจำนวนเท่าใหร่
  • SELECT AVG(numberjob) FROM wp_jobrepair;  // การหาค่าเฉลี่ยของฟิลด์ที่ชื่อ numberjob
  • SELECT SUM(numberjob) FROM wp_jobrepair; // การรวมโดยใช้  SUM
  • SELECT MIN(numberjob) FROM wp_jobrepair;  // การหาค่าน้อยที่สุดด้วย MIN
  • SELECT MAX(numberjob) FROM wp_jobrepair;  // การหาค่าน้อยที่สุดด้วย MAX
  • SELECT COUNT(id),brand FROM wp_jobrepair GROUP BY brand; //การรวมกลุ่มหรือจัดกลุ่มทางข้อมูล นับข้อมูลที่เหมือนกันในฟิลด์ว่ามีเท่าใหร่ เช่น samsung = 4 , sharp = 2 , mitsubishi = 7
  • SELECT COUNT(id) AS idtest ,brand FROM wp_jobrepair GROUP BY brand; // เปลี่ยนชื่อฟิลด์ที่จะแสดง
  • SELECT COUNT(id),brand FROM wp_jobrepair GROUP BY brand ORDER BY brand; // เพิ่มการจัดเรียงจากน้อยไปหามาก
  • SELECT COUNT(id),brand FROM wp_jobrepair GROUP BY brand ORDER BY brand DESC; // เพิ่มการจัดเรียงจากมากไปหาน้อย
  • WHERE ไม่สามารถใช้ได้กับ Aggregate Functions ต้องใช้ HAVING แทน
  • SELECT COUNT(id),brand FROM wp_jobrepair GROUP BY brand HAVING COUNT(id) >=5 ORDER BY brand ; // เอาเฉพาะ id ที่ไม่เกิน 5 วิธีใช้ต้องอยู่หลัง GROUP BY

การเรียงลำดับคำสั่งพื้นฐาน SQL

  • SELECT คำสั่งในการดึงข้อมูลทั้งหมด หรือเฉพาะคอลัมน์
  • FROM  ดึงข้อมูลทั้งหมดในตาราง
  • GROUP BY  การ Sort ข้อมูลตามคอลัมน์
  • HAVING เลือกข้อมูลต่อจาก GROUP BY
  • ORDER BY  จัดเรียงตามฟิลด์ไหน มีเงื่อนใขด้วยไหม
  • LIMIT จำกัดจำนวนข้อมูล

การเชื่อมโยงตารางข้อมูล

  • การ JOIN ตาราง คือการเชื่อมข้อมูลที่มากกว่า 2 ตารางขึ้นไป

การเพิ่ม bootstrap ให้ plugin wordpress

การเพิ่ม bootstrap ให้ plugin wordpress

<?php
/** bootstrap */
function bootstrap_install_css() {
    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );
    
}add_action( 'admin_head', 'bootstrap_install_css' );

function bootstrap_install_js() {
    wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js');
}
add_action('admin_footer', 'bootstrap_install_js');
?>

 

ตัวแปรชนิด object บันทึกส่วนตัว

ตัวแปรชนิด object บันทึกส่วนตัว

คือตัวแปรประเภทหนึ่งที่สร้างมาจากคลาส

<?php
class Test // สร้างคลาสชื่อ Test
{
    // ตัวแปร และฟังชัน
}
$obj=new Test();  // สร้างตัวแปร $obj สำหรับเก็บค่าคลาส และเรียกใช้งานคลาส
echo "ตัวแปร obj เป็นตัวแปรชนิด ". gettype($obj)."<br>"; //ปริ้นตัวแปร $obj เป็นข้อมูลชนิดใด ผลลัพที่ได้ **ตัวแปร obj เป็นตัวแปรชนิด object**
?>

ฟังชัน gettype() จะคืนค่าของข้อมูลมาเป็น ชนิดของตัวแปร ในตัวอย่างจะ ruturn เป็น object กลับมา

การเขียนคลาสแบบรับค่าพาราเข้ามาในคลาส (บันทึกส่วนตัว)

การเขียนคลาสแบบรับค่าพาราเข้ามาในคลาส (บันทึกส่วนตัว)

<?php
    // การเขียนคลาสแบบรับค่าพาราเข้ามาในคลาส
class ParaTest{ // ประกาศชื่อคลาส
    public function setname($name,$surname){    // สร้างฟังชันรับค่าตัวแปรที่จะส่งเข้ามา
        echo $name." ".$surname;                // แสดงค่าตัวแปรที่ส่งเข้ามา
    }
}
$obj = new ParaTest;                    // สร้างตัวแปรออปเจคเก็บค่าคลาสที่เราจะเรียกใช้
$obj->setname("สุใน","ใจกล้า");           // ส่งค่าพาราเข้าไปในคลาส
?>

 

ถอนการติดตั้ง Plugin

ถอนการติดตั้ง Plugin บันทึกส่วนตัว

ในการถอนปลั๊กอินจะต้องลบออกให้หมดทุกอย่าง

  • ตารางดาต้าเบส ล้าง Cache Temp
  • Permalinks เป็นการจัดการและช่วยเรื่อง SEO

register_uninstall_hook(__FILE__, ‘pluginprefix_function_to_run’);

// if uninstall.php is not called by WordPress, die
if (!defined('WP_UNINSTALL_PLUGIN')) {
    die;
}
 
$option_name = 'wporg_option';
 
delete_option($option_name);
 
// for site options in Multisite
delete_site_option($option_name);
 
// drop a custom database table
global $wpdb;
$wpdb->query("DROP TABLE IF EXISTS {$wpdb->prefix}mytable");

 

การเปิด และปิด Hook

การเปิด และปิด Hook บันทึกส่วนตัว


การเปิดใช้งาน

register_activation_hook( __FILE__, ‘pluginprefix_function_to_run’ );

ตัวอย่าง

/**
 * Register the "book" custom post type
 */
function pluginprefix_setup_post_type() {
    register_post_type( 'book', ['public' => true ] ); 
} 
add_action( 'init', 'pluginprefix_setup_post_type' );
 
 
/**
 * Activate the plugin.
 */
function pluginprefix_activate() { 
    // Trigger our function that registers the custom post type plugin.
    pluginprefix_setup_post_type(); 
    // Clear the permalinks after the post type has been registered.
    flush_rewrite_rules(); 
}
register_activation_hook( __FILE__, 'pluginprefix_activate' );

 


การปิดใช้งาน

register_deactivation_hook( __FILE__, ‘pluginprefix_function_to_run’ );


 

ส่วนหัวสำหรับ WordPress

ส่วนหัวสำหรับ WordPress  บันทึกส่วนตัว

/**
* Plugin Name: My Basics Plugin
* Plugin URI: https://example.com/plugins/the-basics/
* Description: Handle the basics with this plugin.
* Version: 1.10.3
* Requires at least: 5.2
* Requires PHP: 7.2
* Author: John Smith
* Author URI: https://author.example.com/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: my-basics-plugin
* Domain Path: /languages
*/


 

การสร้างตารางด้วยปลั๊กอิน wordpress บันทึกส่วนตัว

การสร้างตารางด้วยปลั๊กอิน wordpress บันทึกส่วนตัว

  1. การสร้างตารางจากการติดตั้งปลั๊กอินครั้งแรก
  2. การเพิ่มข้อมูลเข้ามาในตารางระหว่างใช้งาน

ให้ wordpress ได้สร้างคลาสในการเชื่อมต่อ database ใว้ให้แล้ว https://developer.wordpress.org/reference/classes/wpdb/

ตัวแปรนี้จะประกาศใวใน wp-content/db.php

วิธีใช้งาน ต้องประกาศ global $wpdb; ก่อนใช้งานเสมอ

<?php
        // 1st Method - Declaring $wpdb as global and using it to execute an SQL query statement that returns a PHP object
     global $wpdb;
     $results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}options WHERE option_id = 1", OBJECT );
?>

หรือแบบสั้น

<?php
          // 2nd Method - Utilizing the $GLOBALS superglobal. Does not require global keyword ( but may not be best practice )
     $results = $GLOBALS['wpdb']->get_results( "SELECT * FROM {$wpdb->prefix}options WHERE option_id = 1", OBJECT );
?>

การ insert()

 

PHP

PHP บันทึกส่วนตัว

โครงสร้าง

<?php
     จะทำเรียงตามคำสั่งจากบนลงล่าง
     คำสั่งที่ 1;
     คำสั่งที่ 2;
     คำสั่งที่ 3;
?>

php สามารถทำอะไรได้บ้าง

  • สามารถเก็บข้อมูลใว้ในตัวแปร
  • แสดงข้อมูล
  • คำนวณ
  • ทำ Loop ด้วยคำสั่งต่างๆ
  • ตัดสินใจตามเงื่อนใข
  • สร้างฟังชันใว้ใช้งานเองได้
  • สร้าง Class และ Object
  • ติดต่อฐานข้อมูล Database
  • จัดการไล์

ตัวแปร

  • ห้ามใช้ตัวเลขนำ แต่ใช้ตามได้
  • ต้วใหญ่เล็กเป็นคนละตัวกัน
  • ห้าม – ขีดกลาง
  • ใช้ _ อันเดอร์สกอลได้
  • $name = “เก็บข้อความ”   ถ้าเป็น “-”  จะใช้สำหรับเก็บตัวอักษร

การแสดงข้อมูล

echo "I love"; // แสดงตัวอักษร
echo "$txt!";  // แสดงตัวอักษรที่อยู่ในรูปตัวแปร
<?php $name=ดอกไม้;?>
<?php echo $name;?> //ให้แสดงคำว่า ดอกไม้

ใช้ . ในการเชื่อมข้อมูลที่มากกว่าหนึ่งอย่าง

<?php
$txt1 = "Learn PHP";
$txt2 = "W3Schools.com";
$x = 5;
$y = 4;

echo "<h2>" . $txt1 . "</h2>";          // แสดงข้อมูลจากตัวแปร text1
echo "Study PHP at " . $txt2 . "<br>";  // แสดงข้อมูลคำสั้ง echo และจากตัวแปร text2 ใช้.ในการเชื่อม
echo $x + $y;                           // แสดงข้อมูลจากตัวแปรที่บวกกัน
?>

ใช้ {} ปีกกาในการเชื่อม

echo "Study PHP at {$txt2}";  // แสดงข้อมูลคำสั้งให้ตัวแปรอยู่ใน {}ปีกกาและใน ""

 

worldpress plugin ที่ควรติดตั้ง

  • All-in-One WP Migration สำหรับ สำรองข้อมูลทั้งหมด
  • Yoast SEO สำหรับทำ SEO
  • AddToAny Share Buttons สำหรับแชร์
  • Enlighter – Customizable Syntax Highlighter สำหรับใส่โค๊ด
  • Loginizer การตั้งค่า เพอร์มิชชั้น
  • Really Simple SSL สำหรับใบรับรอง SSl

สิ่งที่ควรรู้ Yoast

Keyphrase density: ปัญหาความหนาแน่นของคีเวิด
Focus keyphrase: ใส่ ยี่ห้อ และโมเดล ของงาน ต้องเป็น ข้อความเดียวกับย่อหน้าแรก
Link keyphrase: ที่ Focus keyphrase ไม่ควรมีคำเดียว
Image alt attributes: ใส่ข้อมูลที่รูปภาพด้วย
Text length: คำในเนื้อเรื่อง อาจจะสั้นไป หรือยาวไป
Meta description length: อาจจะสั้นไป หรือยาวไป
Previously used keyphrase: คุณเคยใช้ keyphrase นี้อีกครั้งก่อน อย่าใช้ keyphrase คุณมากกว่าหนึ่งครั้ง

Visual Studio Code

Visual Studio Code บันทึกส่วนตัว

Extensions ที่ควรลงใว้

  • Auto Close Tag :  เอาใว้ปิด Tag อัตโนมัติ
  • Relative Path : เอาใว้ค้นหาไฟล์ในโปรเจคสร้างลิ้งอัตโนมัติ
  • PHP IntelliSense : ช่วยสะกดไวยากรณ์
  • PHP Awesome Snippets : ออโต้เทค PHP
  • CSS Peek : เชื่อมลิ้งไปที่ไฟล์ CSS จากไอดีหรือคลาส และแสดงชอตคัทเลย
  • Bracket Pair Colorizer 2 : แบ่งสีของวงเล็บ ( ) หรือ { } เป็นคู่ๆ อย่างชัดเจน
  • Code Spell Checker : ช่วยสะกดคำ
  • Color Highlight : จัดการเรื่องสีในเว็บ
  • JavaScript (ES6) code snippets : ปรับแต่งหน้าเว็บ

การใช้งาน emmet

Bootstrap 4-5

Bootstrap 4-5  บันทึกส่วนตัว

การติดตั้ง มี 2 แบบ

  1. เอาลิ้งมาใส่ในส่วน Head เวลาใช้หน้าเพจจะไปดึงไฟล์ CSS bootstrap และ JS มาวางก่อน </body>ออนไลน์มาใช้ เอาลิ้งที่นี้
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Basic</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
    Hello Bootstrap
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>    
</body>
</html>

2. การโหลดไฟล์มาในโฟเดอร์ของเพจ โหลดที่นี่

เมื่อแตกซิปออกมาจะมี 2 โฟเดอร์คือ CSS และ JS


utilities เป็น Class ที่เขาเตรียมใว้ให้

ศึกษาได้ที่ ลิ้ง utilities   จะมาหลายเรื่อง

  • Borders
  • Colors
  • Display property
  • Flex
  • Spacing
  • Text

Layout

ในระบบ Bootstrap จะใช้วิธีแบ่งเป็น 10 Column

layout
layout

 

 

 

 

 

 

 

 

 

ทั้งหมดจะถูกคลอบด้วย class ชื่อ container เป็นกล่องใหญ่

<div class="container">
  <!-- แบ่ง 12 ช่อง -->
</div>

ใน container จะมีหลาย row ใน row จะแบ่ง col เป็น 12 ส่วน สามารถเอา row ซ้อนเข้าไปได้

layout

<section min-vh-100 bg-light >
    <div class = "container pt-5">
        <div class="row">
            <div class="col-4 bg-primary">
                <H2>col-4</H2>
            </div>
            <div class="col-4 bg-secondary">
                <H2>col-4</H2>
            </div>
            <div class="col-4 bg-success">
                <H2>col-4</H2>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col bg-danger"><H2>col-3</H>
                <div class="row">
                    <div class="col bg-primary">1</div>
                    <div class="col bg-secondary">2</div>
                </div>
            </div>
            <div class="col-6 bg-warning"><H2>col-6</H></div>
            <div class="col bg-info"><H2>col-3</H></div>
        </div>
    </div>
</section>


Container

container  เป็นคลาสที่กำหนดค่ามาให้แล้ว

container-fluid  ตัวนี้จะกว้างเต็มหน้าเว็บเพจ

container-{breakpoint} ตัวนี้สามารถใส่ sm md lg และขนาดหน้าจออื่นๆได้

Default container

<div class="container">
  <!-- Content here -->
</div>

 


responsive utility

bootstrap จะมองหน้าจอเป็น 5 ขนาด  นะ

  • container-sm
  • container-md
  • container-lg
  • container-xl
<div row mt-5>
    <div class="col-sm-6 col-md-3 col-lg-8 col-xl-2 bg-success"><H2>col-sm-6 col-md-3 col-lg-8 col-xl-2</H2></div>
    <div class="col-sm-6 col-md-9 col-lg-4 col-xl-10 bg-primary"><H2>col-sm-6 col-md-9 col-lg-4 col-xl-10</H2></div>
</div>

components เป็นส่วนที่เขียนเอาใว้แล้ว

  • แจ้งเตือน
  • ปุ่มต่างๆ
  • สไลท์
  • เมนู
  • กล่อง
  • ฟอร์ม

  • container-fluid : จะเท่า width: 100% มันจะยืดตามขนาดจอ

รูปภาพสำหรับทำเว็บ

ไอคอนสำหรับทำเว็บ

 

CSS 3

CSS 3  บันทึกส่วนตัว

CSS Syntax

CSS Syntax
CSS Syntax

 

 

 

 

วิธีการใส่ CSS มี 3 รูปแบบ

  1. ใส่ไปที่ Tag โดยตรง ใส่<H1 style=”background: red;”>เนื้อหาข้อความที่เราจะใส่<H1>
<!DOCTYPE html> 
<html>
     <head> <!-- ส่วนหัว  -->
      <meta charset=”utf-8”>
       <meta name=”viewport” content=”width=device-width,initial-scale=1”>
      <title>ไตเติ้ลด้านบน</title>
     </head>
<body>
     <H1 style="background: red;">เนื้อหาข้อความที่เราจะใส่<H1>
</body>
</html>
<!-- คอมเม้นข้อความ  -->

 

2 .ใส่ <style>ใส่คำสั่ง CSS ใว้ในนี้</style> ใส่ใว้ใน

<!DOCTYPE html>
<html>
<head>
    <style>
    body {  /*ให้ background-color ของ body เป็นสี lightblue*/
        background-color: lightblue;
    }

    h1 {    /*ให้ h1  เป็นสี white และอยู่กึ่งกลาง */
        color: white;
        text-align: center;
    }

    p { /*ให้ p  ฟอน verdana และขนาด 20px */
        font-family: verdana;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
</body>
</html>

 

3. เขียนไฟล์แยก และลิ้งไปหา

<link rel=stylesheet href=css/style.css> เราเขียนไฟ CSS ใว้ในโฟร์เดอร์ชื่อ css ชื่อไฟล์  style.css

ส่วนที่ 1 ไฟล์ HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

ส่วนที่ 2 ไฟล์ CSS  ชื่อไฟล์ mystyle.css

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

 


การชี้ไปที่ Tag โดยตรง

<!DOCTYPE html>
<html>
<head>
<style>
    body {  /** ชี้ไปที่ body ให้ทำ CSS ในปีกกา */
        background-color: lightblue;
    }
    h1 {    /** ชี้ไปที่ h1 ให้ทำ CSS ในปีกกา */
        color: white;
        text-align: center;
    }
    p {     /** ชี้ไปที่ p ให้ทำ CSS ในปีกกา */
        font-family: verdana;
        font-size: 20px;
    }
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

การชี้ไปที่ ID ใน Tag ที่จะใส CSS

<!DOCTYPE html>
<html>
<head>
<style>
    #para1 {    /** ใช้ # นำหน้าเพื่อเรียก id  */
        text-align: center;
        color: red;
    }
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

 

การชี้ไปที่ Class ที่จะใส CSS

<!DOCTYPE html>
<html>
<head>
<style>
    .center {   /** ใช้ . นำหน้าเพื่อชี้ไปที่ คลาสชื่อ center */
        text-align: center;
        color: red;
    }
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 
</body>
</html>

 

ชี้ไปที่ Tag  และและต่อด้วย Class

<!DOCTYPE html>
<html>
<head>
<style>
    p.center {  /** ชี้ไปที่ Tag p และคลาส center*/
        text-align: center;
        color: red;
    }
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 
</body>
</html>

ชี้ให้ทุกตัวมีผลใช้ *

<html>
<head>
<style>
    * { /** ใช้ * นำหน้าเพื่อให้ทั้งหมดทำในวงเล็บ */
        text-align: center;
        color: blue;
    }
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

 

สามารถรวมหลาย Tag แล้วเขียน CSS พร้อมกันได้เลย
<!DOCTYPE html>
<html>
<head>
<style>
    h1, h2, p {     /** สามารถรวมหลาย Tag แล้วเขียน CSS พร้อมกันได้เลย  */
    text-align: center;
    color: red;
    }
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

 


CSS Fonts

<!DOCTYPE html>
<html>
<head>
    <style>
        p.impact {  /** ให้ Tag p ใน class ชื่อ impact ทำในวงเล็บ*/
        font-family: Impact, Charcoal, sans-serif; /** ให้ฟอร์นในคลาสเป็น Charcoal */
        }
    </style>
</head>
<body>
    <h1>CSS font-family</h1>
    <p class="impact">This is a paragraph, shown with the Impact font.</p>
</body>
</html>

CSS :hover Selector เมื่อนำเมาส์ไปวางจะเกิดเหตุการณ์ และสามารถทำเมนูแบบดรอปดาวได้

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
  background-color: yellow;
}
</style>
</head>
<body>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="https://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>

 


CSS Box Model

CSS Box Model
CSS Box Model

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

กล่องสามารถสร้างได้หลายกล่อง โดยใช้ <div></div> หลาย Tag

CSS Box Model all
CSS Box Model all

 

 

 

 

 

 

 

 

 

 

 

 

CSS position Property

  • static Default value
  • absolute
  • fixed
  • relative
  • sticky
  • initial
  • inherit

CSS z-index Property การทับซ้อนของ Layer

  • auto  Default value
  • number
  • initial
  • inherit

z-index: -1;

CSS Flexbox เป็นการจัดการ ตู้คอนเทนเนอร์

แกนหลักจะมี 2 แบบ คือ แนวนอน กับ แนวตั้ง ส่วนใหญ่ใช้แนวนอน

จะทำการสร้าง ตู้คอนเทนเนอร์ และเอากล่องมาใส่ภายในอีกที

 

 

 


 

รวมมคำสั้ง CSS

align-items: center; จัดการแนวแกนตั้ง Vertical Align

background-color: Orange;  พื้นหลังสีส้ม

background-image: url(“paper.gif”);   ใส่รูปพื้นหลัง

border: 1px solid black;  ให้มีกรอบหนะ 1px และ solid คือกรอบที่เป็นเส้นทึบ และมีสีดำ

border-radius: 25px;     ให้กรอบมีเส้นโค้งมล 25px

border: 2px solid Violet;    กรอบตัวอักษร 2px กรอบที่เป็นเส้นทึบ และมีสีม่วง

box-shadow: 5px 10px;     ใส่เงา

box-shadow: 5px 10px 15px;    ใส่เงา

box-shadow: 5px 10px #888888;    ใส่เงา ใส่สี

color:MediumSeaGreen;    ตัวอักษรสีเขียว

font-family: Impact, Charcoal, sans-serif;   ให้ฟอร์นในคลาสเป็น Charcoal

font-size: 40px;    ให้ฟอร์น มีขนาด 40px

font-size: 2.5em;      /* 40px/16=2.5em */

font-weight: bold;     ให้ฟอร์น เป็นตัวหนา

font-weight: 900;       ให้ฟอร์น เป็นตัวหนา 900

line-height: 10px;      ระยะห่างระหว่างบรรทัด

text-align: center;     ให้ฟอร์นอยู่ตรงกลาง

width: 150px;      ความกว้าง 150px

width: 100%;      ความกว้าง 100% เต็มพื้นที่ที่มันอยู่

z-index: -1; กำหนดตำแหน่งของกล่อง


การนำฟอร์น Google มาใส่

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

 

การดึงไอคอนจาก boxicons มาใส่

<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

 

HTML5

HTML5 บันทึกส่วนตัว

โครงสร้างภาษา

<!DOCTYPE html> 
<html>
     <head> <!-- ส่วนหัว  -->
  	<meta charset=”utf-8”>
   	<meta name=”viewport” content=”width=device-width,initial-scale=1”>
  	<title>ไตเติ้ลด้านบน</title>
     </head>
<body>
     เนื้อหาข้อความที่เราจะใส่
</body>
</html>
<!-- คอมเม้นข้อความ  -->

 


Tags และ Attribute

Heading Tag  <h1></h1>ใช้กำหนดขนาดเล็กใหญ่ของตัวอักษร

<h1>ข้อความ</h1>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h6>ข้อความ</h6>

Paragraph Tag <p></p>ใส่ให้รู้ว่านี้คือเนื้อหาย่อหน้า

<p>ใส่เนื้อหาข้อความ</p>

<!– คอมเม้นข้อความ –> สำหรับอธิบายโค๊ดที่เราเขียนแต่จะไม่เอาไปแสดง

<!-- คอมเม้นข้อความ -->

ขีดเส้นใต้ <hr>

<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages.</p>
<hr>    <!-- ขีดเส้นยาว -->
<p>CSS is a language that describes how HTML elements are to be displayed on screen</p>
<hr>    <!-- ขีดเส้นยาว -->
<p>JavaScript is the programming language of HTML and the Web.</p>

ขึ้นบรรทัดใหม่ <br>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

 


HTML Lists การเรียงลำดับข้อความ

<!DOCTYPE html>
<html>
    <body>
        <h4>An Unordered HTML List</h4>
        <ul>                <!-- การเรียงแบบ จุดกลมนำหน้า  -->
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>  

        <h4>An Ordered HTML List</h4>
        <ol>                <!-- การเรียงแบบ ตัวเลขนำหน้าอัตโนมัติ  -->
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol> 

        <h4>A Description List</h4>
        <dl>                <!-- การเรียงแบบ แสดงรายละเอียด  -->
            <dt>Coffee</dt>
            <dd>- black hot drink</dd>
            <dt>Milk</dt>
            <dd>- white cold drink</dd>
        </dl>
</body>
</html>

An Unordered HTML List

  • Coffee
  • Tea
  • Milk

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk

A Description List

Coffee
– black hot drink
Milk
– white cold drink

 

Block-level  <div></div>    กล่องดิป จะมีผลรวมทั้งหมดที่มันคลุมใว้ เวลาที่เราทำหน้าเว็บเป็นกล่องๆ

<!DOCTYPE html>
<html>
    <body>
    <div> <!-- กล่องดิป -->
        <h2>London</h2>
            <p>
                London is the capital city of England. 
                It is the most populous city in the United Kingdom, 
                with a metropolitan area of over 13 million inhabitants.
            </p>
    </div>
</body>
</html>

London

London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.


span <span></span> กล่องสเปน สำหรับกำหนดลักษณะเฉพาะของแต่ล่ะอย่าง

<!DOCTYPE html>
<html>
    <body>
        <h1>The span element</h1>
        <p>
            My mother has <span style="color:blue;font-weight:bold">blue</span> <!-- กล่องสเปน สำหรับกำหนดลักษณะเฉพาะของแต่ล่ะอย่าง -->
            eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
        </p>
</body>

 

The span element

My mother has blue
eyes and my father has dark green eyes.


Tables ตาราง

<!DOCTYPE html>
<html>
<body>
    <h4>HTML Table</h4>
    <table>
        <tr>
            <th>ส่วนหัว 1</th>    <!-- ส่วนหัว -->
            <th>ส่วนหัว 2</th>
            <th>ส่วนหัว 3</th>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 1 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 1 แถว 2</td>
            <td>ข้อมูลชุดที่ 1 แถว 3</td>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 2 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 2 แถว 2</td>
            <td>ข้อมูลชุดที่ 2 แถว 3</td>
        </tr>
    </table>
</body>
</html>

HTML Table

ส่วนหัว 1 ส่วนหัว 2 ส่วนหัว 3
ข้อมูลชุดที่ 1 แถว 1 ข้อมูลชุดที่ 1 แถว 2 ข้อมูลชุดที่ 1 แถว 3
ข้อมูลชุดที่ 2 แถว 1 ข้อมูลชุดที่ 2 แถว 2 ข้อมูลชุดที่ 2 แถว 3

 

ใส่ style เพื่อใส่ขอบตาราง ความหนา 1px แบบเส้นทึบ solid สีดำ black

  • table, th, td จะมีผลทั้งส่วนหัว และเนื้อหา
  • border สร้างขอบ
  • 1px ขนาดเส้นขอบ
  • solid ชนิดเส้นทึบ
  • black สีดำ
<!DOCTYPE html>
<html>
<head>
    <!-- ใส่ style เพื่อใส่ขอบตาราง ความหนา 1px แบบเส้นทึบ solid สีดำ black -->
<style> 
table, th, td {
  border: 1px solid black;
}
</style>
</head>

<body>
    <h4>HTML Table</h4>
    <table>
        <tr>
            <th>ส่วนหัว 1</th>    <!-- ส่วนหัว -->
            <th>ส่วนหัว 2</th>
            <th>ส่วนหัว 3</th>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 1 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 1 แถว 2</td>
            <td>ข้อมูลชุดที่ 1 แถว 3</td>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 2 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 2 แถว 2</td>
            <td>ข้อมูลชุดที่ 2 แถว 3</td>
        </tr>
    </table>
</body>
</html>

 


การกำหนดส่วนต่างๆของหน้า <section></section>

<!DOCTYPE html>
<html>
    <section>
        <h4>section 1</h4>
        <p>เนื้อหา 1</p>
    </section>

    <section>
        <h4>section 2</h4>
        <p>เนื้อหา 2</p>
    </section>
</body>
</html>

 

section 1

เนื้อหา 1

section 2

เนื้อหา 2


ส่วนนำทาง <nav> หรือเมนู อยู่ใน header

<body>
<header>
    <h1>Website Header</h1>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="about.html">Contact Us</a></li>
        </ul>
    </nav>
</header>
.....
</body>

 

Website Header

ความหมายของคำ ใน WordPress

ความหมายของคำ ใน WordPress  บันทึกส่วนตัว

  • slug คือส่วนที่ต่อจาก URL
  • Sidebar ส่วนที่เป็นกล่องยาวๆ จะอยู่ซ้ายบ้าง ขวาบ้างแล้วแต่การจัด วิเจ็ต
  • Dashboard หน้ารวมหลังบ้าน
  • Plugins โปรแกรมเสริมความสามารถ
  • วิเจ็ต ใช้ในการปรับแต่งการแสดงผลหน้าเว็บ เป็นหัวข้อย่อยของธีม
  • ธีม คือรูปร่างหน้าตา ของเว็บไซต์
  • Pages เพจเปรียบเสมือนหัวข้อใหญ่ หรือหน้าที่เราจะรวมเอาหน้าโพสมาเก็บใว้ในนี้หลายๆโพส
  • Posts โพสคือเนื้อหาที่เราจะเขียนในแต่ละหน้าเพื่อไปแสดงในเพจที่เป็นเหมือนหัวข้อใหญ่ หรือเป็นหน้ารวม
  • Media ที่เก็บ จัดการ ไฟล์ รูปภาพ วีดีโอ
  • Appearance จัดหน้าตาของเว็บ

Function WordPress all

Function WordPress all  บันทึกส่วนตัว

การนำไฟล์จากภายนอกเข้ามาประมวลผล

include(plugin_dir_path(__FILE__)."repair-menu.php");   //เรียกไฟล์หน้า php ที่อยู่ในพาทเดียวกัน
include(plugin_dir_path(__FILE__)."job/repair-menu.php");   //เรียกไฟล์หน้า php ที่อยู่ในโฟเดอร์ชื่อ job

สร้างการแจ้งเตือน

add_action( 'admin_notices', 'sample_admin_notice__success' );

wp_head ใช้กำหนดส่วน head tag  <head></head> ที่ไฟล์ header.php ของธีม

function hook_css() {
    ?>
        <style>
            .wp_head_example {
                background-color : #f1f1f1;
            }
        </style>
    <?php
}
add_action('wp_head', 'hook_css');

wp_footer ใช้กำหนดส่วน ท้ายก่อน </body>

<?php
function your_function() {
    echo '<p>This is inserted at the bottom</p>';
}
add_action( 'wp_footer', 'your_function' );
?>

add_option() ฟั่งชั่นที่จะเอาค่าออฟชั่นไปเก็บในตาราง wp_options

add_option( $option, $value = '', $deprecated = '', $autoload = 'yes' )

register_activation_hook( ) เมือเปิดการใช้งานปลั๊กอิน ให้ไปที่ฟังชั่นบางอย่างเช่น สร้างดาต้าเบส จะทำงานเมื่อ plugin activated ฟังก์ชันอัตโนมัติเมื่อ Activate plugin

function my_plugin_activate() 
{
    /* activation code here */
}
register_activation_hook( __FILE__, 'my_plugin_activate' );

register_deactivation_hook( ) เมือถูกกดปิดการใช้งานปลั๊กอินให้มาทำงานในนี้ จะถูกทำงานเมื่อ plugin deactivated ฟังก์ชันอัตโนมัติเมื่อ deactivated plugin

function register_deactivation_hook( $file, $function ) {
    $file = plugin_basename( $file );
    add_action( 'deactivate_' . $file, $function );
}

wp_nonce_field(  ) คือ field ใส่ไว้ที่ form สำหรับการป้องกันการ reqeust จาก site ของตัวเอง และไม่ให้ ภายนอก request เข้ามาแนะนำว่าให้ควรใส่ไว้ใน form

function wp_nonce_field( $action = -1, $name = '_wpnonce', $referer = true, $echo = true ) {
    $name        = esc_attr( $name );
    $nonce_field = '<input type="hidden" id="' . $name . '" name="' . $name . '" value="' . wp_create_nonce( $action ) . '" />'; 
    if ( $referer ) {
        $nonce_field .= wp_referer_field( false );
    } 
    if ( $echo ) {
        echo $nonce_field;
    } 
    return $nonce_field;
}

 

Classes

wpdb เชื่อมต่อกับฐานข้อมูล เป็นคลาส ต่อกับฐานขอมูลได้ มีฟังชั่นสำเร็จรูปให้ใช้งาน

// 1st Method - Declaring $wpdb as global and using it to execute an SQL query statement that returns a PHP object
global $wpdb;
$results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}options WHERE option_id = 1", OBJECT );

 

  • เรื่องล่าสุด

  • คลังเก็บ

  • บันทึกส่วนตัว