Scribd
Upload
22 views49 pages

Topik 11. CRUD With Ajax and Modals - Updatejun2023

Uploaded by

Patricius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views49 pages

Topik 11. CRUD With Ajax and Modals - Updatejun2023

Uploaded by

Patricius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

CRUD with Ajax and Modals

Web Framework Programming


Jurusan Teknik Informatika,Fakultas Teknik
Universitas Surabaya
Course outline

Learning other UI/UX behavior in CRUD


-New Data Submission with Modal
-Editing data with Modal
-Editing data with Modal , without refreshing page
-Deleting data without refreshing page
New Data Submission with
Modals
Add a new button

Action: show the new form of supplier data


Modal Form

Fill the content by copy-paste the form part from formcreate.blade.php


Insert this code into your index.blade.php (depends on where your button [New Supplier] is implemented)

<div class="modal fade" id="modalCreate" tabindex="-1" role="basic" aria-hidden="true">


<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add New Supplier</h4>
</div>
<div class="modal-body">
//the new category form goes here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Run this HTML and check the
action
Modal Form (2)
You can change [// the new category form goes here ] with this “form” HTML
The highlighted syntax is similar with formcreate.blade.php
Modal Form (3)
Please compile your program and check that the [+Category (modal)] is showing up the modal form

After finish check like the picture above, please move the button Submit and Cancel to the footer by :
- placing the Form element position after page-content.
- remove Close button, move Submit and Cancel button to footer
- add data-dismiss="modal“ in the cancel button
Result
Violaa..
Try to insert your new Category data

Setelah itu, jawablah pertanyaan berikut pada ULS


1. Apa ada kesulitan mengikuti praktik di atas?
2. Poin penting apa yang anda pelajari dalam membuat
modals dan digabung dengan form?
Update Data with Modals
Two mechanisms of User Experience
-Type A : Update data with Refresh whole page
-Type B : Update data without Refresh whole page
Type A

Add new edit button in each record


It opens a modal, ex. modalEdit
It also call an Ajax function to fill in the content of modalEdit with an edit form
The submit button in the edit form calls our previous update
method.
Add a new edit button

- Note that it have an onclick which calling the getEditForm() function


Inside layout/conquer.blade.php
Please consider about the custom javascript, so we need to
make sure that we have “@yield(‘javascript’) in the end of
layout
Prepare the ajax function inside the index.blade.php

Note
1. We consider that this syntax have a new custom routing “(category.getEditForm)”. Don’t forget
to make a new route for this syntax
2. After the ajax succeded it fill in the modalContent with data.msg. Don’t forget to make a new
modals/div with id = “modalContent”
Prepare the Route

- Please add a new router for ‘getEditForm and redirected to CategoryController function ‘getEditForm’.
Note: don’t forget to make a custom function inside Category Controller
Prepare the editModal

• Insert this syntax into index.blade.php


• This syntax constructs the modal that store the result of Ajax Javascript
• Note that the modal-content is equipped with an id=‘modalContent’
Prepare the function in controller

- this function will response with a json element (msg) filled with html string
that showing the edit form from getEditForm2.blade.php
Create the Edit Form
The structure can be taken from the editForm modal. Modify the form action , add with method(‘PUT’), and fill in
the textfield and textarea with the sended data.
Result

When you click submit button, system will store the new value and re open the list of
category page.
Tips
If you have an error or unresponsive experience, you can
trace with:
1. Inspect Element > Console
2. Insepct Element > Network
Example #1: error variable

This error show after user click the “Edit Button”. To solve this,
you must
1. Check the javascript after click (onclick function)
2. Check the Ajax and return value of this Ajax
Solve for Example #1

We realize that category_id is wrong variable. So we must


change with “id”
Example #2: unresponsive but the
HTTP response is 200 OK
Go to Inspect Element > Network and click the button.
If you have a similar behavior, you can check the modals.

The modals can’t show in your screen because the name of “id”
is different between <a href> and modal definition.
You must change the id value.
The limitation of TypeA mechanisms

When editing data, we actually need the current record to be


updated. It is optional to re-load the whole category list page. It
will consume a lot of time and bandwidth if it has abundant
data.
Type B Steps

Add an id for each edited <TD> using any string that express
the field following by the record ID
Add new edit button in each record
It open a modal, and can re-use our previous (type A) modal
The submit button in edit form calling an ajax function which
will updating database and updating the <TD> content
Add ID in TD’s
Add a new edit button (B)
Prepare the ajax function (B)

-There is a custom route with route name (category.getEditFormB) and after the Ajax
succeded it fills in the modalContent with data.msg
Prepare the Route (B)

- Note that it will use function getEditFormB in the Category Controller


Prepare the function in controller (B)

- this function will response with a json element (msg) filled with html string that
showing the edit form from getEditFormB.blade.php
Create the Edit Form (B)
• Copy-paste from the type
A.
Remove the form.
• Specify the ID of textbox
and textarea.
• Modify the button
submit become a normal
button, add a data-
dismiss, and add a
calling ajax function in its
onclick

The called ajax function name is saveDataUpdateTD.


Prepare the Ajax function saveDataUpdateTD
inside index.blade.php of Category

The function pick value from textbox


and textarea via jquery and passing it
as parameters for a function in the
controller. The function will update
data in the database and
after succeeded the TD value will be
updated with the new value.

The function name in the controller in


this example is saveDataTD.
Add the route
Create the saveData function
Result (B)
Delete Data without reload
page
Steps

Add an id for each <TR> using any string following by the


record ID
Add new delete button in each record
It call and ajax function
The ajax function which will deleting database and removing
the <TR>
Add ID in TR
Add a new delete button

- Note that it have an onclick which calling the deleteDataRemoveTR() function


Prepare the ajax function

- Note that there is an url parameter that


use route name (category.deleteData)
and after the ajax succeded it removing
the tr
Add the route
Add controller function
Homework

Try to implement your data:


1. Suppliers
2. Products
3. Transaction
With Ajax CRUD.

You can choose EditA or EditB separately based on your level of


understanding.
Thank you

You might also like