Тут я створив простий додаток, який може відображати дані про студентів. Можна сказати, що це лише "прототип", оскільки дані зберігаються в статичній змінній. Але все ж таки фокусуємося на реалізації, оскільки мета — поділитися застосуванням event change (зміни події) в JavaScript. Додаток побудовано за допомогою просторової архітектури MVC (Model-View-Controller).
Photo by Growtika on Unsplash
Model-View-Controller означає застосування принципу "separation of concern" (розподіл відповідальностей) при розробці додатку. Розділення завдань відповідно до їхніх напрямків.
Створити проект
Створіть новий проект, в якому повинно бути кілька папок (я називаю їх "packages"): controllers, models та views. Не забувайте також про файл index.php як шлях для доступу користувачів.
Проект з архітектурою MVC
Файл index.php
Цей файл містить кілька рядків для реалізації функціоналу autoload class (автозавантаження класів), а також для визначення стандартного controller (контролера), method (методу) та params (параметрів).
$method($params);
Файл controllers/Controller.php
В пакеті controllers знаходиться два файли контролерів. Перший — Controller, який містить метод/function під назвою view для виклику файлу view.
model = new Mahasiswa;
}
// метод викликається синхронно
public function index() {
$data['mahasiswa'] = $this->model->getAllMahasiswa();
$this->view('index', $data);
}
// метод викликається асинхронно
public function getMahasiswaFilterByTahun($tahun) {
$data['mahasiswa'] = $this->model->getAllMahasiswa($tahun);
header('Content-Type:application/json');
echo json_encode($data);
}
}
Файл models/Mahasiswa.php
Цей файл відповідає за надання даних, які можуть бути спожиті користувачем додатку через контролер та відображені у view.
На даний момент дані зберігаються в властивості класу (змінній) під назвою $mahasiswa з доступом private.
mahasiswa = [
[
'nim' => '112233',
'nama' => 'Adi Putra',
'prodi' => 'Teknik Listrik',
'angkatan' => 2023
],
[
'nim' => '112244',
'nama' => 'Budi Santoso',
'prodi' => 'Teknik Listrik',
'angkatan' => 2024
],
[
'nim' => '112255',
'nama' => 'Cindy Saputri',
'prodi' => 'Manajemen Informatika',
'angkatan' => 2024
],
[
'nim' => '112266',
'nama' => 'Dodi Supardi',
'prodi' => 'Manajemen Informatika',
'angkatan' => 2025
],
];
}
public function getAllMahasiswa($tahun = null) {
if($tahun != null) {
$mahasiswa = [];
foreach($this->mahasiswa as $item) {
if($item['angkatan'] == $tahun) {
array_push($mahasiswa, $item);
}
}
return $mahasiswa;
}
return $this->mahasiswa;
}
}
Видно, що метод/function getAllMahasiswa може приймати значення $tahun як фільтр для даних.
Якщо $tahun не вказано, за замовчуванням його значення буде null. І якщо null, то метод повертає всі дані з властивості $mahasiswa.
Але якщо $tahun не є null, то відбувається фільтрація даних студентів за роком вступу, результат зберігається в змінній $mahasiswa, а потім передається в MahasiswaController.
Файл views/index.php
Цей файл відповідає за користувацький інтерфейс для взаємодії з додатком, наприклад, для відображення всіх даних у таблиці, поки користувач не застосує фільтр за роком.
Дані студентів із фільтром за роком
Щоб застосувати фільтр, користувач має просто вибрати рік у dropdown (випадаючому списку), і додаток асинхронно отримає вибраний рік, надішле його в контролер MahasiswaController за допомогою методу getMahasiswaFilterByTahun та передасть в модель через JavaScript.
URL, який буде сформовано: index.php?url=MahasiswaController/getMahasiswaFilterByTahun/’ + selectedValue, де “selectedValue” — це рік, вибраний користувачем у dropdown.
Data Mahasiswa
Pilih Tahun
NIM Nama Mahasiswa Program Studi Angkatan
``` Коли цей процес виконується, і користувач вибирає рік, то дані про студентів відображаються в таблиці без перезавантаження сторінки, оскільки все робиться асинхронно.
Перекладено з: [Penerapan “Javascript change event” untuk Filter Data](https://medium.com/@reeyanto/penerapan-javascript-change-event-untuk-filter-data-3c055aedd3ba)