ออกแบบระบบ Login อย่างง่ายด้วย CodeIgniter Framework

โดย SONGCHAI SAETERN
โครงสร้างการจัดวางไฟล์

application/
├── controllers/
│   └── Member_login.php
├── models/
│   └── Member_login_model.php
├── views/
│   └── member_login/
│       └── login_view.php



ส่วนของฟอร์ม HTML ( View )

<div class="container">
<h2>Login</h2>
<?php if($this->session->flashdata('error_message')): ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('error_message'); ?>
</div>
<?php endif; ?>
<?php echo form_open('member_login/login'); ?>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<?php echo form_close(); ?>
</div>



ส่วนของ Controller

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

/**
 * [ Controller File name : Member_login.php ]
 */
class Member_login extends CRUD_Controller
{
private $per_page;
private $another_js;
private $another_css;

public function __construct()
{
parent::__construct();
$this->per_page = 30;
$this->num_links = 6;
$this->uri_segment = 4;
$this->load->model('Member_login_model', 'Login');
$this->data['page_url'] = site_url('member_login');
$this->data['page_title'] = 'PHP CI MANIA';

}

// ------------------------------------------------------------------------

/**
* Index of controller
*/
public function index()
{
$this->login();
}

// ------------------------------------------------------------------------

/**
* Login function
*/
public function login()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'required');
$this->form_validation->set_rules('password', 'Password', 'required');

if ($this->form_validation->run() == TRUE) {
$username = $this->input->post('username');
$password = $this->input->post('password');
// Authenticate user
$user = $this->Login->get_user_by_username($username);
if ($user && password_verify($password, $user['password'])) {
$this->session->set_userdata('user_id', $user['id']);
$this->session->set_userdata('username', $user['username']);
redirect('dashboard'); // Redirect to a dashboard or some other page
} else {
$this->session->set_flashdata('error_message', 'Invalid Username or Password');
redirect('member_login');
}
}

$this->render_view('member_login/login_view');
}

/**
* Logout function
*/
public function logout()
{
$this->session->unset_userdata('user_id');
$this->session->unset_userdata('username');
$this->session->sess_destroy();
redirect('member_login');
}

// ------------------------------------------------------------------------

protected function render_view($path)
{
$this->data['top_navbar'] = $this->parser->parse('template/sb-admin-bs4/top_navbar_view', $this->top_navbar_data, TRUE);
$this->data['left_sidebar'] = $this->parser->parse('template/sb-admin-bs4/left_sidebar_view', $this->left_sidebar_data, TRUE);
$this->data['breadcrumb_list'] = $this->parser->parse('template/sb-admin-bs4/breadcrumb_view', $this->breadcrumb_data, TRUE);
$this->data['page_content'] = $this->parser->parse_repeat($path, $this->data, TRUE);
$this->data['another_css'] = $this->another_css;
$this->data['another_js'] = $this->another_js;
$this->data['utilities_file_time'] = filemtime('assets/js/ci_utilities.js');
$this->parser->parse('template/sb-admin-bs4/homepage_view', $this->data);
}


}


ส่วนของ Model
application/models/Member_login_model.php

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Member_login_model extends CI_Model
{
public function get_user_by_username($username)
{
$this->db->where('username', $username);
$query = $this->db->get('members');
return $query->row_array();
}
}


คำสั่ง SQL สำหรับสร้างฐานข้อมูล

CREATE TABLE `members` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;





PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

การใช้ CSS ตรึงส่วนหัวข้อของตาราง HTML ด้วย style position: sticky

โดย SONGCHAI SAETERN


<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th {
    position: sticky;
    top: 0;
    background-color: #ffffff; /* สีพื้นหลังหัวตาราง */
    z-index: 10; /* ทำให้หัวตารางอยู่บนสุด */
  }
</style>

<table border=1>
  <thead>
    <tr>
      <th>หัวข้อ 1</th>
      <th>หัวข้อ 2</th>
      <th>หัวข้อ 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <!-- เพิ่มข้อมูลอื่นๆ -->
  </tbody>
</table>





PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

การใช้ jQuery ตรึงคอลัมน์ส่วนหัวข้อของตาราง HTML

โดย SONGCHAI SAETERN


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Header Fixed</title>
<style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      text-align: left;
      border: 1px solid #ddd;
    }

    .fixed-header {
      position: fixed;
      top: 0;
      z-index: 10;
      background-color: #ffffff;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
        <th>หัวข้อ 3</th>
      </tr>
    </thead>
    <tbody>
<tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
      <!-- เพิ่มข้อมูลอื่นๆ -->
    </tbody>
  </table>

<script>
    $(document).ready(function() {
      var $table = $("#myTable");
      var $header = $table.find("thead");
      var $fixedHeader = $header.clone().addClass("fixed-header").removeClass("thead");

      // เพิ่มตารางที่ตรึงหลังจากตารางจริง
      $table.after($fixedHeader);

      // ตั้งค่าความกว้างของแต่ละคอลัมน์ให้ตรงกัน
      function setColumnWidths() {
        $fixedHeader.find('th').each(function(index) {
          $(this).width($header.find('th').eq(index).width());
        });
      }

      // เรียกใช้เมื่อโหลดหน้า
      setColumnWidths();

      // ตรึงแนวหัวตารางเมื่อเลื่อน
      $(window).scroll(function() {
        var offset = $header.offset().top;
        var scrollTop = $(window).scrollTop();

        if (scrollTop >= offset && !$fixedHeader.is(":visible")) {
          $fixedHeader.show();
        } else if (scrollTop < offset && $fixedHeader.is(":visible")) {
          $fixedHeader.hide();
        }
      });

      // เรียกใช้เมื่อมีการเปลี่ยนแปลงขนาดหน้าจอ
      $(window).resize(setColumnWidths);
    });
  </script>
</body>
</html>











PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

การสร้างเว็บไซต์ในปี 2024 เทรนไหนมาแรง

โดย CyberMAN
ในปี 2024 การสร้างเว็บไซต์มีหลายเทรนด์ที่มาแรง ซึ่งเน้นความทันสมัยและการใช้งานที่ตอบโจทย์ผู้ใช้ได้มากขึ้น นี่คือบางเทรนด์ที่น่าสนใจ:

1. AI และ Machine Learning**:
   - การใช้ AI ในการสร้างเว็บไซต์เพื่อให้ประสบการณ์ผู้ใช้ดีขึ้น เช่น Chatbot อัจฉริยะ การวิเคราะห์ข้อมูลผู้ใช้เพื่อปรับปรุงการนำเสนอเนื้อหา หรือการใช้ AI ในการปรับแต่งเว็บไซต์อัตโนมัติ

2. การออกแบบที่ตอบสนองได้ทุกอุปกรณ์ (Responsive Design)**:
   - การออกแบบเว็บไซต์ที่สามารถใช้งานได้ดีบนทุกอุปกรณ์ไม่ว่าจะเป็นมือถือ แท็บเล็ต หรือคอมพิวเตอร์เดสก์ท็อป ด้วยการออกแบบที่ตอบสนองต่อขนาดหน้าจอ (Responsive Design)

3. การใช้ Motion UI และ Microinteractions**:
   - การเพิ่มการเคลื่อนไหว (Animation) และการโต้ตอบเล็กๆ น้อยๆ ในเว็บไซต์เพื่อให้การใช้งานสนุกและดึงดูดผู้ใช้มากขึ้น

4. การใช้เทคโนโลยี WebAssembly**:
   - WebAssembly ช่วยให้เว็บไซต์ทำงานได้เร็วขึ้นและสามารถใช้งานแอปพลิเคชันที่ซับซ้อนได้มากขึ้นโดยไม่ต้องพึ่งพาเซิร์ฟเวอร์มากนัก

5. เว็บไซต์ที่เป็นมิตรกับสิ่งแวดล้อม (Green Hosting)**:
   - การเลือกใช้บริการโฮสติ้งที่เป็นมิตรกับสิ่งแวดล้อมและการออกแบบเว็บไซต์ที่ประหยัดพลังงานมากขึ้น เพื่อสนับสนุนการรักษาสิ่งแวดล้อม

6. การออกแบบตามหลักการ Inclusive Design และ Accessibility**:
   - การออกแบบเว็บไซต์ให้สามารถเข้าถึงได้สำหรับทุกคน ไม่ว่าจะมีความบกพร่องทางกายภาพ หรือความต้องการพิเศษใดๆ เพื่อให้ทุกคนสามารถใช้งานเว็บไซต์ได้อย่างเต็มประสิทธิภาพ

7. การใช้ JavaScript Frameworks ที่ทันสมัย**:
   - การใช้เฟรมเวิร์กใหม่ๆ เช่น React, Vue.js, Angular เพื่อพัฒนาเว็บไซต์ให้มีประสิทธิภาพสูงขึ้นและตอบสนองได้ดี

8. เว็บไซต์ที่มีเนื้อหาแบบวิดีโอและมัลติมีเดีย**:
   - การใช้วิดีโอและมัลติมีเดียเพื่อดึงดูดความสนใจของผู้ใช้และทำให้เนื้อหามีความน่าสนใจมากขึ้น

9. การใช้ Progressive Web Apps (PWA)**:
   - เว็บไซต์ที่สามารถทำงานได้เหมือนแอปพลิเคชันบนมือถือ มีการโหลดเร็ว ใช้งานได้แม้ไม่มีอินเทอร์เน็ต และสามารถติดตั้งบนหน้าจอหลักของอุปกรณ์

10. เน้นประสบการณ์ผู้ใช้ (User Experience)**:
    - การออกแบบที่เน้น UX มากขึ้น โดยศึกษาพฤติกรรมผู้ใช้และปรับปรุงการใช้งานให้เหมาะสมที่สุด

การติดตามและนำเทรนด์เหล่านี้มาใช้ในการพัฒนาเว็บไซต์จะช่วยให้เว็บไซต์มีความทันสมัย มีประสิทธิภาพ และสามารถตอบสนองความต้องการของผู้ใช้ได้ดียิ่งขึ้นในปี 2024.


PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

สร้างเว็บไซต์จองรถตู้ด้วย CodeIgniter + Bootstrap template

โดย CyberMAN

PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

 

 

การสร้างเว็บไซต์จองรถตู้ด้วย CodeIgniter และ Bootstrap template เป็นกระบวนการที่เกี่ยวข้องกับหลายขั้นตอน ตั้งแต่การติดตั้ง CodeIgniter ไปจนถึงการออกแบบส่วนหน้าด้วย Bootstrap และการสร้างฟังก์ชันสำหรับการจองรถตู้ เราจะทำตามขั้นตอนเหล่านี้เพื่อสร้างเว็บไซต์อย่างง่าย:

  1. ติดตั้ง CodeIgniter
  2. ติดตั้ง Bootstrap Template
  3. สร้างฐานข้อมูลสำหรับการจองรถตู้
  4. สร้าง Controller, Model และ View
  5. เพิ่มฟังก์ชันสำหรับการจองรถตู้

ขั้นตอนที่ 1: ติดตั้ง CodeIgniter

  1. ดาวน์โหลด CodeIgniter จาก เว็บไซต์ทางการ
  2. แตกไฟล์ที่ดาวน์โหลดมาและย้ายไปยังโฟลเดอร์ของเว็บเซิร์ฟเวอร์ (เช่น htdocs ของ XAMPP)

ขั้นตอนที่ 2: ติดตั้ง Bootstrap Template

  1. ดาวน์โหลด Bootstrap Template จาก เว็บไซต์ Bootstrap
  2. วางไฟล์ CSS และ JS ของ Bootstrap ในโฟลเดอร์ assets ของโปรเจ็กต์

ขั้นตอนที่ 3: สร้างฐานข้อมูลสำหรับการจองรถตู้

  1. เปิด phpMyAdmin และสร้างฐานข้อมูลใหม่ชื่อ van_booking
  2. สร้างตาราง bookings ด้วยโครงสร้างดังนี้:

CREATE TABLE bookings (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    phone VARCHAR(20) NOT NULL,
    date DATE NOT NULL,
    time TIME NOT NULL,
    destination VARCHAR(200) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);


ขั้นตอนที่ 4: สร้าง Controller, Model และ View

  1. Controller: สร้างไฟล์ Booking.php ในโฟลเดอร์ application/controllers/:

    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    class Booking extends CI_Controller {

        public function __construct() {
            parent::__construct();
            $this->load->model('Booking_model');
            $this->load->helper('url');
            $this->load->library('form_validation');
        }

        public function index() {
            $this->load->view('booking_form');
        }

        public function book() {
            $this->form_validation->set_rules('name', 'Name', 'required');
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            $this->form_validation->set_rules('phone', 'Phone', 'required');
            $this->form_validation->set_rules('date', 'Date', 'required');
            $this->form_validation->set_rules('time', 'Time', 'required');
            $this->form_validation->set_rules('destination', 'Destination', 'required');

            if ($this->form_validation->run() == FALSE) {
                $this->load->view('booking_form');
            } else {
                $data = array(
                    'name' => $this->input->post('name'),
                    'email' => $this->input->post('email'),
                    'phone' => $this->input->post('phone'),
                    'date' => $this->input->post('date'),
                    'time' => $this->input->post('time'),
                    'destination' => $this->input->post('destination')
                );

                $this->Booking_model->insert_booking($data);
                $this->load->view('booking_success');
            }
        }
    }
     



2. Model: สร้างไฟล์ Booking_model.php ในโฟลเดอร์ application/models/:

<?php
class Booking_model extends CI_Model {

    public function __construct() {
        $this->load->database();
    }

    public function insert_booking($data) {
        return $this->db->insert('bookings', $data);
    }
}


3.View: สร้างไฟล์ booking_form.php และ booking_success.php ในโฟลเดอร์ application/views/:

 <!-- booking_form.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Van Booking</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
</head>
<body>
    <div class="container">
        <h2>Van Booking Form</h2>
        <?php echo validation_errors(); ?>
        <?php echo form_open('booking/book'); ?>
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" name="name">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email">
            </div>
            <div class="form-group">
                <label for="phone">Phone:</label>
                <input type="text" class="form-control" id="phone" name="phone">
            </div>
            <div class="form-group">
                <label for="date">Date:</label>
                <input type="date" class="form-control" id="date" name="date">
            </div>
            <div class="form-group">
                <label for="time">Time:</label>
                <input type="time" class="form-control" id="time" name="time">
            </div>
            <div class="form-group">
                <label for="destination">Destination:</label>
                <input type="text" class="form-control" id="destination" name="destination">
            </div>
            <button type="submit" class="btn btn-primary">Book Now</button>
        <?php echo form_close(); ?>
    </div>
    <script src="<?php echo base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>
</body>
</html>


 <!-- booking_success.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking Success</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
</head>
<body>
    <div class="container">
        <h2>Booking Successful</h2>
        <p>Your booking has been made successfully.</p>
        <a href="<?php echo base_url(); ?>" class="btn btn-primary">Back to Home</a>
    </div>
    <script src="<?php echo base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>
</body>
</html>

 

ขั้นตอนที่ 5: เพิ่มฟังก์ชันสำหรับการจองรถตู้

ตอนนี้คุณสามารถทดสอบเว็บไซต์จองรถตู้ของคุณได้โดยการเรียกดู URL ที่เหมาะสม (http://localhost/your_project/booking)

นี่เป็นโครงสร้างพื้นฐานสำหรับการสร้างเว็บไซต์จองรถตู้โดยใช้ CodeIgniter และ Bootstrap template คุณสามารถปรับแต่งเพิ่มเติมตามความต้องการของคุณได้

 

การเพิ่มหน้าเว็บสำหรับแพกเกจทัวร์ในเว็บไซต์จองรถตู้ด้วย CodeIgniter และ Bootstrap template สามารถทำได้โดยทำตามขั้นตอนต่อไปนี้:

  1. สร้างฐานข้อมูลสำหรับแพกเกจทัวร์
  2. สร้าง Controller, Model และ View สำหรับแพกเกจทัวร์
  3. อัปเดตหน้าเว็บเพื่อแสดงรายการแพกเกจทัวร์

ขั้นตอนที่ 1: สร้างฐานข้อมูลสำหรับแพกเกจทัวร์

  1. เปิด phpMyAdmin และสร้างตาราง tour_packages ในฐานข้อมูล van_booking ด้วยโครงสร้างดังนี้:

CREATE TABLE tour_packages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    package_name VARCHAR(100) NOT NULL,
    description TEXT NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

 

 

ขั้นตอนที่ 2: สร้าง Controller, Model และ View สำหรับแพกเกจทัวร์

  1. Model: สร้างไฟล์ Tour_model.php ในโฟลเดอร์ application/models/:

 <?php
class Tour_model extends CI_Model {

    public function __construct() {
        $this->load->database();
    }

    public function get_tours() {
        $query = $this->db->get('tour_packages');
        return $query->result_array();
    }

    public function insert_tour($data) {
        return $this->db->insert('tour_packages', $data);
    }
}

 

2.  Controller: สร้างไฟล์ Tour.php ในโฟลเดอร์ application/controllers/:

 <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Tour extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Tour_model');
        $this->load->helper('url');
        $this->load->library('form_validation');
    }

    public function index() {
        $data['tours'] = $this->Tour_model->get_tours();
        $this->load->view('tour_list', $data);
    }

    public function create() {
        $this->form_validation->set_rules('package_name', 'Package Name', 'required');
        $this->form_validation->set_rules('description', 'Description', 'required');
        $this->form_validation->set_rules('price', 'Price', 'required|numeric');

        if ($this->form_validation->run() == FALSE) {
            $this->load->view('create_tour');
        } else {
            $data = array(
                'package_name' => $this->input->post('package_name'),
                'description' => $this->input->post('description'),
                'price' => $this->input->post('price')
            );

            $this->Tour_model->insert_tour($data);
            redirect('tour');
        }
    }
}

 

3. Views:

  • สร้างไฟล์ tour_list.php ในโฟลเดอร์ application/views/:

 <!-- tour_list.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tour Packages</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
</head>
<body>
    <div class="container">
        <h2>Tour Packages</h2>
        <a href="<?php echo site_url('tour/create'); ?>" class="btn btn-primary mb-3">Add New Package</a>
        <div class="row">
            <?php foreach ($tours as $tour): ?>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title"><?php echo $tour['package_name']; ?></h5>
                        <p class="card-text"><?php echo $tour['description']; ?></p>
                        <p class="card-text"><strong>Price: </strong><?php echo $tour['price']; ?></p>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <script src="<?php echo base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>
</body>
</html>

 สร้างไฟล์ create_tour.php ในโฟลเดอร์ application/views/:

 <!-- create_tour.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Tour Package</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
</head>
<body>
    <div class="container">
        <h2>Create Tour Package</h2>
        <?php echo validation_errors(); ?>
        <?php echo form_open('tour/create'); ?>
            <div class="form-group">
                <label for="package_name">Package Name:</label>
                <input type="text" class="form-control" id="package_name" name="package_name">
            </div>
            <div class="form-group">
                <label for="description">Description:</label>
                <textarea class="form-control" id="description" name="description"></textarea>
            </div>
            <div class="form-group">
                <label for="price">Price:</label>
                <input type="text" class="form-control" id="price" name="price">
            </div>
            <button type="submit" class="btn btn-primary">Create Package</button>
        <?php echo form_close(); ?>
    </div>
    <script src="<?php echo base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>
</body>
</html>

 

ขั้นตอนที่ 3: อัปเดตหน้าเว็บเพื่อแสดงรายการแพกเกจทัวร์

คุณสามารถเพิ่มลิงก์ไปยังหน้าแพกเกจทัวร์ในหน้าเว็บหลักของคุณหรือในเมนูนำทางเพื่อให้ผู้ใช้สามารถเข้าถึงได้ง่าย

ตัวอย่างการอัปเดตเมนูใน application/views/booking_form.php:

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="<?php echo base_url(); ?>">Van Booking</a>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="<?php echo site_url('booking'); ?>">Booking</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="<?php echo site_url('tour'); ?>">Tour Packages</a>
           </li>
       </ul>
   </div>
</nav>
 

 

 ตัวอย่างการอัปเดตเมนูใน application/views/booking_success.php:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="<?php echo base_url(); ?>">Van Booking</a>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="<?php echo site_url('booking'); ?>">Booking</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="<?php echo site_url('tour'); ?>">Tour Packages</a>
           </li>
       </ul>
   </div>
</nav>

 

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