Codeigniter 4: Как получать записи из MySQL и отображать их в Fullcalendar (полном календаре)

21/04/2022 02:43

В этом учебном пособии вы узнаете, как получать записи из MySQL в приложении codeigniter 4 и отображать их в полном календаре. Это руководство шаг за шагом расскажет вам, как интегрировать Fullcalendar (полный календарь) в приложение Codeigniter 4.

Fullcalendar: Заполнить данные из базы данных в Codeigniter 4

Шаг 1: Загрузите и установите Codeigniter 4

На этом шаге загрузите последнюю версию Codeigniter 4. Перейдите по этой ссылке https://codeigniter.com/download загрузите новую новую установку Codeigniter 4 и разархивируйте установку в вашей локальной системе xampp/htdocs/. И измените имя папки загрузки на «demo».

Шаг 2: Основные конфигурации

Далее вы установите базовую конфигурацию, поэтому давайте перейдем к app/Config/Config.php и откроем этот файл в текстовом редакторе.

Установите базовый URL-адрес следующим образом

public $baseURL = 'http://localhost:8080';
// Замните на:
public $baseURL = 'http://localhost/demo/';

Шаг 3: Создайте таблицу в базе данных

На этом шаге вам нужно создать таблицу в базе данных, а также вставить некоторые данные для приложения fullcalendar в codeiginter 4. Итак, зайдите в панель phpmyadmin и выполните в ней следующий sql-запрос:

CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `start_date` date NOT NULL,
  `end_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Шаг 4: Настройка учетных данных базы данных

На этом шаге вам нужно подключить наш проект к базе данных. вам нужно перейти в app/Config/ и открыть файл Database.php в текстовом редакторе. После открытия файла в текстовом редакторе вам необходимо настроить учетные данные базы данных в этом файле, как показано ниже.

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'demo',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
];

Шаг 5: Создайте контроллер

На этом шаге посетите app/Controllers и создайте имя контроллера FullCalendar.php. В этом контроллере нужно добавить в него следующие методы:

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
 
 
class FullCalendar extends Controller
{
 
    public function index() {
 
        $db      = \Config\Database::connect();
        $builder = $db->table('events');   
        $query = $builder->select('*')
                    ->limit(10)->get();
 
        $data = $query->getResult();
 
       foreach ($data as $key => $value) {
            $data['data'][$key]['title'] = $value->title;
            $data['data'][$key]['start'] = $value->start_date;
            $data['data'][$key]['end'] = $value->end_date;
            $data['data'][$key]['backgroundColor'] = "#00a65a";
        }        
      return view('home',$data);
    }
 
}

Шаг 6: Создайте вид

На этом шаге вам нужно создать один файл представления с именем Home.php и обновить следующий код в вашем файле:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>
   
<div class="container">
    <h1>Codeigniter 4 Fullcalendar example</h1>
    <div class="row" style="width:50%">
       <div class="col-md-12">
           <div id="calendar"></div>
       </div>
    </div>
</div>
    
<script type="text/jаvascript">
    
    var events = <?php echo json_encode($data) ?>;
     
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
            
    $('#calendar').fullCalendar({
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week : 'week',
        day  : 'day'
      },
      events    : events
    })
</script>
    
</body>
</html>

Реализовать код jаvascript

Наконец, необходимо реализовать код jаvascript для отображения данных в полном календаре в приложении codeigniter 4. Теперь вы обновляете код в теге script после закрытия тега body.

<script type="text/jаvascript">
    
    var events = <?php echo json_encode($data) ?>;
     
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
            
    $('#calendar').fullCalendar({
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week : 'week',
        day  : 'day'
      },
      events    : events
    })
</script>

Шаг 7: Создайте маршрут

На этом шаге вам нужно создать маршрут, который отображает таблицу в представлении, поместите следующий код в файл app/Config/Routes.php.

$routes->get('/', 'FullCalendar::index');

Шаг 8: Запустите сервер разработки

На этом шаге откройте терминал и выполните следующую команду:

php spark serve

Затем перейдите в браузер и введите ниже указанный URL:

http://localhost:8080

В этом руководстве вы успешно извлекли данные из базы данных и отобразили их в полном календаре в codeigniter 4.

Codeigniter

0 + 0 -

MakeCodes
0
420