├── README.md ├── client ├── index.html ├── index.js └── stylesheet.css └── server ├── .gitignore ├── app.js ├── dbService.js ├── package-lock.json └── package.json /README.md: -------------------------------------------------------------------------------- 1 | #Node.js, Express & MySQL Tutorial. 2 | 3 | 4 | In this video, we will use the Express framework with HTML, CSS, and JavaScript to build a simple CRUD (Create, Read, Update, Delete) App. 5 | I will show you how to make queries using MySQL and how to connect that to our express app to build a fullstack application. 6 | 7 | https://youtu.be/vrj9AohVhPA -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | web app 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |


16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
IDNameDate AddedDeleteEdit
31 | 32 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | fetch('http://localhost:5000/getAll') 3 | .then(response => response.json()) 4 | .then(data => loadHTMLTable(data['data'])); 5 | 6 | }); 7 | 8 | document.querySelector('table tbody').addEventListener('click', function(event) { 9 | if (event.target.className === "delete-row-btn") { 10 | deleteRowById(event.target.dataset.id); 11 | } 12 | if (event.target.className === "edit-row-btn") { 13 | handleEditRow(event.target.dataset.id); 14 | } 15 | }); 16 | 17 | const updateBtn = document.querySelector('#update-row-btn'); 18 | const searchBtn = document.querySelector('#search-btn'); 19 | 20 | searchBtn.onclick = function() { 21 | const searchValue = document.querySelector('#search-input').value; 22 | 23 | fetch('http://localhost:5000/search/' + searchValue) 24 | .then(response => response.json()) 25 | .then(data => loadHTMLTable(data['data'])); 26 | } 27 | 28 | function deleteRowById(id) { 29 | fetch('http://localhost:5000/delete/' + id, { 30 | method: 'DELETE' 31 | }) 32 | .then(response => response.json()) 33 | .then(data => { 34 | if (data.success) { 35 | location.reload(); 36 | } 37 | }); 38 | } 39 | 40 | function handleEditRow(id) { 41 | const updateSection = document.querySelector('#update-row'); 42 | updateSection.hidden = false; 43 | document.querySelector('#update-name-input').dataset.id = id; 44 | } 45 | 46 | updateBtn.onclick = function() { 47 | const updateNameInput = document.querySelector('#update-name-input'); 48 | 49 | 50 | console.log(updateNameInput); 51 | 52 | fetch('http://localhost:5000/update', { 53 | method: 'PATCH', 54 | headers: { 55 | 'Content-type' : 'application/json' 56 | }, 57 | body: JSON.stringify({ 58 | id: updateNameInput.dataset.id, 59 | name: updateNameInput.value 60 | }) 61 | }) 62 | .then(response => response.json()) 63 | .then(data => { 64 | if (data.success) { 65 | location.reload(); 66 | } 67 | }) 68 | } 69 | 70 | 71 | const addBtn = document.querySelector('#add-name-btn'); 72 | 73 | addBtn.onclick = function () { 74 | const nameInput = document.querySelector('#name-input'); 75 | const name = nameInput.value; 76 | nameInput.value = ""; 77 | 78 | fetch('http://localhost:5000/insert', { 79 | headers: { 80 | 'Content-type': 'application/json' 81 | }, 82 | method: 'POST', 83 | body: JSON.stringify({ name : name}) 84 | }) 85 | .then(response => response.json()) 86 | .then(data => insertRowIntoTable(data['data'])); 87 | } 88 | 89 | function insertRowIntoTable(data) { 90 | console.log(data); 91 | const table = document.querySelector('table tbody'); 92 | const isTableData = table.querySelector('.no-data'); 93 | 94 | let tableHtml = ""; 95 | 96 | for (var key in data) { 97 | if (data.hasOwnProperty(key)) { 98 | if (key === 'dateAdded') { 99 | data[key] = new Date(data[key]).toLocaleString(); 100 | } 101 | tableHtml += `${data[key]}`; 102 | } 103 | } 104 | 105 | tableHtml += `