Most már, hogy egy űrlapon keresztül foglalásokat lehet elküldeni, szükségünk lesz egy admin oldalra, ahol az apartman ügyintézője meg tudja tekinteni, illetve jóvá tudja hagyni a foglalásokat.
Hogy mit jelent itt az hogy AJAX JSON? Elég érdekes öszvér elnevezés. 🙂 AJAX-szal normál esetben egy XML adatstruktúrát vinnénk át az aszinkron javascript üzenetben, ami valahogy így nézne ki egy konkrét foglalás (reservation) adataira.
<xml>
<reservation>
<apartment_id>1</apartment_id>
<approved>1</approved>
..
</reservation>
</xml>
Mégis azonban az ún. JSON formátumot használjuk, ami egy konkrét esetben az alábbi szerverválaszt adja.
{
apartment_id: "1",
approved: "1",
checkin: "2020-07-29",
checkout: "2020-08-01",
created_at: "2020-08-03 03:34:11",
email: "aaa@aaa.hu",
id: "10",
locale: null,
message: "aaa",
name: "aaa",
phone: "",
updated_at: "2020-08-05 01:08:08"
}
Látható, hogy egy eléggé egyszerű adatszerkezet. A JSON leírása részletesen az alábbi címen érhető el: https://hu.wikipedia.org/wiki/JSON.
És akkor nézzük meg a konkrét implementációt. Először is bővítenünk kell a models/Reservations_model.php
modellünket három metódussal.
public function get_reservations() { $this->db->select()->from('reservations')->order_by('created_at', 'DESC'); $query = $this->db->get(); return $query->result(); } public function get_reservation($id) { $query = $this->db->get_where('reservations', array('id' => $id)); return $query->result(); } public function approve_reservation($id) { $date = date('Y-m-d H:i:s'); $this->db->set('updated_at', $date); $this->db->set('approved', 1); $this->db->where('id', $id); $this->db->update('reservations'); }
Az első get_reservations()
metódus a foglalások keletkezésének idejével csökkenő sorrendben egy listát ad vissza a foglalások adataival.
A második get_reservation($id)
metódus egy konkrét foglalás adatait adja vissza.
A harmadik approve_reservation($id)
metódus pedig UPDATE-eli, tehát frissíti a megadott ID-jű foglalás rekordunkat a frissítés dátumával és beállítja az jóváhagyott foglalás értékét 1-esre, ami esetünkben a jóváhagyás tényét jelzi adatbázis szinten.
Nézzük a views/admin.php
view-nkat, hogy mi is kerül bele.
<?php $my_base_url = '/apartman/'; ?> <div class="row"> <div class="col-sm-2"> <div id="fh5co-logo"><a href="index.html">Apartman<span>.</span></a></div> </div> <div class="col-sm-10 text-right menu-1"> <ul> <li><a href="photos"><?php echo $this->lang->line('menu_photos'); ?></a></li> <li><a href="booking_ajax"><?php echo $this->lang->line('menu_booking'); ?></a></li> <li><a href="contact"><?php echo $this->lang->line('menu_contact'); ?></a></li> </ul> </div> </div> </div> </div> </nav> <div class="container"> <div id="fh5co-intro"> <div class="row animate-box"> <div class="col-md-8 col-md-offset-2 col-md-pull-2"> <h2><?php echo $this->lang->line('menu_booking'); ?></h2> <table border="1"> <tr> <th>Name</th><th>Email</th><th>Message</th><th>Checkin</th><th>Checkout</th><th>Created at</th><th>Updated at</th><th>Locale</th><th>Approved</th><th></th> </tr> <?php foreach ($query as $item):?> <tr> <form> <td><?php echo $item->name;?></td> <td><?php echo $item->email;?></td> <td><?php echo $item->message;?></td> <td><?php echo $item->checkin;?></td> <td><?php echo $item->checkout;?></td> <td><?php echo $item->created_at;?></td> <td id="updated<?php echo $item->id;?>"><?php echo $item->updated_at;?></td> <td><?php echo $item->locale;?></td> <td id="approved<?php echo $item->id;?>"><?php echo $item->approved==1?'true':'false';?></td> <td><input id="approve_button<?php echo $item->id;?>" type="button" value="Approve" class="btn btn-primary btn-modify" <?php echo $item->approved==1?'disabled':'';?>></td> </form> <script> $(document).ready(function(){ $( "#approve_button<?php echo $item->id;?>" ).click(function(event) { $.ajax( { type:"post", url: "<?php echo $my_base_url; ?>index.php/apartments/admin_approve_ajax/<?php echo $item->id;?>", data:{ }, contentType: "application/json", dataType:"json", success:function(response) { console.log(response); var obj = $.parseJSON(JSON.stringify(response)); $("#updated<?php echo $item->id;?>").html(obj.updated_at); $('#approved<?php echo $item->id;?>').html(obj.approved==1?'true':'false'); $('#approve_button<?php echo $item->id;?>').prop('disabled', obj.approved==1?true:false); }, error: function(response) { console.log(response); alert("Invalide id=<?php echo $item->id;?>!"); } } ); }); }); </script> </tr> <?php endforeach;?> </table> </div> </div> </div> </div><!-- END container -->
Látható, hogy ebbe egy táblázat került a foglalások adataival, melynek minden sora egy-egy foglalást tartalmaz. Erről az iterációról a <?php foreach ($query as $item):?><?php endforeach;?>
blokk gondoskodik. Minden sort a foglalás ID-je azonosít. Minden sorhoz kerül egy-egy JavaScript blokk is a megfelelő Approve (Jóváhagy) gomb megfelelő “click” eseményének lekezelésével.
Felhívnám a figyelmet a JSON üzenet dekódolására. Ez a var obj = $.parseJSON(JSON.stringify(response));
sorban történik. Először szükséges sztringgé alakítani a válaszüzenetet, mivel az objektum-ként érkezik. Ez a JSON.stringify metódussal történik. Utána csak egy sima parse-olásra lesz szükségünk. 🙂
Nézzük meg végül a controllers/Apartments.php
controller-ünket. Két új metódussal bővül. Az admin()
metódusban csak kirajzoljuk az oldalunkat a modell réteg lista SQL SELECT metódusának meghívásával. Az admin_approve_ajax($id)
metódusban pedig SQL UPDATE hívás majd egy SQL SELECT hívás történik a modell rétegben, illetve a válasz üzenet JSON becsomagolása.
public function admin() { $this->load->model('reservations_model'); $data['query'] = $this->reservations_model->get_reservations(); $this->template->set('title', 'Admin'); $this->template->load('menu_layout', 'contents' , 'admin', $data); } public function admin_approve_ajax($id) { $this->load->model('reservations_model'); $this->reservations_model->approve_reservation($id); $data = $this->reservations_model->get_reservation($id)[0]; header('Content-Type: application/json'); echo json_encode($data); }
Látható, hogy viszonylag egyszerűen megoldottuk az egész adminisztrátori funkcionalitást az AJAX form vezérlés / adatátvitel és a JSON adatformátum hsználatával. 🙂
És akkor lássuk az admin oldalt (http://localhost/apartman/index.php/apartments/admin), egy jóváhagyott foglalással!

Látható, hogy a legfelső, az Approved true, tehát jóváhagyott rendelés – mivel csak angol nyelven implementáltam mindent az egyszerűség kedvéért – melletti Approve gomb már kiszürkült, nem megnyomható újra. Az Updated at – frissítés dátuma – pedig a késői vagy kora hajnali órát jelzi, amikor elkészültem a pilot kódokkal. 🙂