สร้างเว็บไซต์จองรถตู้ด้วย 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>

 

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



 



บทความเก่ากว่า »