Recommended
More Related Content
Similar to API Assignment 20RP01868.docx
Similar to API Assignment 20RP01868.docx (20)
Recently uploaded
Recently uploaded (20)
API Assignment 20RP01868.docx
- 1. Dept: ICT Class: Level 7 IT Module: Develop API Module code: ITLWN701 Prepared by: Name: HABIMANA Aime Tresor Reg No: 20RP01868 AJAX ASSIGNMENT Screenshot of information stored in database
- 2. Figure 2JSON information to initialize seed in database where hold provinces and districts Figure 1Routes to provide endpoint to frontend that returns provinces and district and also provide conditional requests
- 3. Figure 3Database seeder: Receive data from json file the put them in database in case they run php artisan db:seed. Figure 4, Table: hold the schema or structure of table
- 4. This is controller that will make query to retrieve data from database and convert them into JSON string This protect incoming request due to incoming series of data
- 5. <body class="flex justify-center items-center h-[100vh] bg-indigo-900"> <div class="bg-indigo-800 rounded-xl shadow p-10 w-1/3"> <h1 class="text-indigo-500 text-3xl">AJAX</h1> <div class="my-6 text-white"> <select id="province-selector" class="py-1 w-full bg-indigo-600 rounded border border-indigo-900 text-white"> <option value="Northern">Northern province</option> <option value="Southern">Southern province</option> <option value="Western">Western province</option> <option value="Eastern">Estern province</option> <option value="Kigali">Kigali city</option> </select> <div id="output" class="block"></div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256- BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script> const elementSelector = $("#province-selector") const outputElemnt = $("#output") elementSelector.change((e) => { const url = `http://localhost:8000/api/region/${e.target.value}` // fetch data fetch(url) .then(res => res.json()) .then(data => displayData(data)) .catch(error => console.error(error)) }) function displayData(data) { const ulElement = $('<ul>') data.forEach(region => { const liElenement = $("<li>") liElenement.text(region.district) ulElement.append(liElenement) }) outputElemnt.html(ulElement) } </script> </body>
- 6. Implementation of AJAX methods that request and Retrieve the selected province value from the AJAX request. And display them on frontend interface