Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Using SQLite inside a Webpage
ID	5618461699080192
Created	10 years ago, 1431127652277
Updated	6 years ago, 1560920667290
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using SQLite inside a Webpage</title> </head> <body> <h1>Todo list</h1> <form id="todo-form" target="self" method="get"> <label>What should you do? <input type="text" id="todo-input"> </label> <button type="submit">Store</button> </form> <h1>All todos:</h1> <ul id="todo-list"> </ul> <script src='https://cdn.jsdelivr.net/npm/sql.js@0.4.0/js/sql.js'></script> <script> /*** DATABASE LOGIC ******** The following code would typically be run on a server, so that the database would be persisted on the server across user sessions. We don't usually use SQLite inside a webpage since we can just as easily store inside JavaScript objects, and using SQLite is less performant. / // Creates the db and table var db = new SQL.Database(); db.run("CREATE TABLE todos (id INTEGER PRIMARY KEY AUTOINCREMENT, item TEXT);"); // Expects a todo (string) and inserts in db var insertTodo = function(todo) { db.run("INSERT INTO todos (item) VALUES (?)", [todo]); }; // Return a list of todos (array of strings) var getAllTodos = function() { var results = db.exec("SELECT item FROM todos"); var todos = []; for (var i = 0; i < results[0].values.length; i++) { todos.push(results[0].values[i]); } return todos; }; /** CLIENT LOGIC ******** The following code would typically be on a webpage, (like it is here) but it'd make AJAX calls to the database instead of directly accessing the DB on the page. */ // Displays a list of todos (array of strings) in an <ul> var displayTodos = function(todos) { var list = document.getElementById("todo-list"); list.innerHTML = ""; for (var i = 0; i < todos.length; i++) { var listItem = document.createElement('li'); listItem.innerText = todos[i]; list.appendChild(listItem); } }; // Hooks up the submit button on the form to // a function that tells the DB to insert it // and updates the list according to current DB var form = document.getElementById("todo-form"); form.addEventListener("submit", function(e) { e.preventDefault(); insertTodo(document.getElementById("todo-input").value); displayTodos(getAllTodos()); form.reset(); }); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIju4L79CQw
Votes	171
Spin-Offs	234
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	pamela ❤
Author Name	pamela
Author ID	kaid_481802608512872365097525
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739398044546
Updated	10 months ago, 1739398055088
Source Deleted	unknown