WebFund 2024F: Tutorial 5 - Revision history

Soma: /* static/add.html */

2024-10-15T18:33:47Z

static/add.html

← Older revision		Revision as of 18:33, 15 October 2024
Line 372:		Line 372:
	</div>		</div>
	<div>		<div>
	<input id="~~country~~" type="text" name="city">		<input id="city" type="text" name="city">
	<label>City</label>		<label>City</label>
	</div>		</div>

Soma at 16:35, 10 October 2024

2024-10-10T16:35:38Z

← Older revision		Revision as of 16:35, 10 October 2024
Line 1:		Line 1:
	In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/domdemo.zip domdemo], a version of [[WebFund 2024F: Assignment 1\|Assignment 1's dbdemo2]] modified to use some client-side JavaScript.		In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/domdemo.zip domdemo], a version of [[WebFund 2024F: Assignment 2\|Assignment 2's dbdemo2]] modified to use some client-side JavaScript.

	Once you have the application up and running you should do the following tasks.		Once you have the application up and running you should do the following tasks.

Soma at 04:40, 10 October 2024

2024-10-10T04:40:57Z

← Older revision		Revision as of 04:40, 10 October 2024
Line 1:		Line 1:
	~~'''This tutorial is not yet finalized.'''~~

	In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/domdemo.zip domdemo], a version of [[WebFund 2024F: Assignment 1\|Assignment 1's dbdemo2]] modified to use some client-side JavaScript.		In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/domdemo.zip domdemo], a version of [[WebFund 2024F: Assignment 1\|Assignment 1's dbdemo2]] modified to use some client-side JavaScript.

Soma: /* Tasks */

2024-10-10T04:39:31Z

Tasks

← Older revision		Revision as of 04:39, 10 October 2024
Line 11:		Line 11:
	# Is there similar code to insertTableData() in dbdemo2? How and why do they differ?		# Is there similar code to insertTableData() in dbdemo2? How and why do they differ?
	# Change the analyze page so that it is a static HTML document that loads the data to be displayed from the server as a JSON object.		# Change the analyze page so that it is a static HTML document that loads the data to be displayed from the server as a JSON object.
	# ~~(Advanced)~~ Change the add page to not reload the page when the form is submitted. Instead, it should		# *Change the add page to not reload the page when the form is submitted. Instead, it should
	#* submit the form contents via fetch(),		#* submit the form contents via fetch(),
	#* hide the form fields on submit,		#* hide the form fields on submit,
	#* display the response, which should be a JSON object that reflects what was inserted into the database.		#* display the response, which should be a JSON object that reflects what was inserted into the database.
	# Add a button to the list page that, when clicked, changes the sort order of the list from alphabetical by name to reverse alphabetical by name. This button should cause the list to be sorted on the client, not the server.		# *Add a button to the list page that, when clicked, changes the sort order of the list from alphabetical by name to reverse alphabetical by name. This button should cause the list to be sorted on the client, not the server.

	==Code==		==Code==

Soma: /* Tasks */

2024-10-10T04:38:55Z

Tasks

← Older revision		Revision as of 04:38, 10 October 2024
Line 7:		Line 7:
	==Tasks==		==Tasks==

	# Change ~~dbdemo~~ so that it ~~support sorting of~~ the ~~listed records~~. ~~Specifically~~, it should ~~support~~ the ~~following two requests:~~		# A "GET /list" works differently in domdemo versus dbdemo2. How do they differ? What is the equivalent of domdemo's list.html in dbdemo2?
	#* ~~/list?sort=alpha-name <--- alphabetical sort by name~~		# What is the .then at the end of list.js? What happens if you remove this line?
	#* /list?sort~~=ralpha-~~name ~~<---~~ reverse alphabetical ~~sort~~ by name		# Is there similar code to insertTableData() in dbdemo2? How and why do they differ?
	~~# Try making~~ the ~~above sort happen at the database (through an SQL request) and~~ on the ~~server in JavaScript. Do you think it is better to have the database perform the sort~~, ~~or is it better for~~ the ~~web~~ server ~~to do the sorting? Why?~~		# Change the analyze page so that it is a static HTML document that loads the data to be displayed from the server as a JSON object.
			# (Advanced) Change the add page to not reload the page when the form is submitted. Instead, it should
			#* submit the form contents via fetch(),
			#* hide the form fields on submit,
			#* display the response, which should be a JSON object that reflects what was inserted into the database.
			# Add a button to the list page that, when clicked, changes the sort order of the list from alphabetical by name to reverse alphabetical by name. This button should cause the list to be sorted on the client, not the server.

	==Code==		==Code==

Soma: /* static/list.js */

2024-10-10T04:16:28Z

static/list.js

← Older revision		Revision as of 04:16, 10 October 2024
Line 461:		Line 461:

	try {		try {
	const response = await fetch("/list");		const response = await fetch("/list");
	if (response.ok) {		if (response.ok) {
	const tableData = await response.json();		const tableData = await response.json();
	insertTableData(tableData);		insertTableData(tableData);
	} else {		} else {
	console.error("Table loading error response: " + response.status);		console.error("Table loading error response: " + response.status);
	}		}
	} catch (error) {		} catch (error) {
	console.error("Table loading fetch error: " + error.message);		console.error("Table loading fetch error: " + error.message);
	}		}
	}		}

	updateTable().then(() => {console.log("Table updated!");});		updateTable().then(() => {console.log("Table updated!");});

	</syntaxhighlight>		</syntaxhighlight>

Soma: /* static/list.js */

2024-10-10T04:15:55Z

static/list.js

@@ Line 426: / Line 426: @@
 <syntaxhighlight lang="javascript" line>
 </syntaxhighlight>
 ===static/style.css===

Soma: /* static/list.html */

2024-10-10T04:15:25Z

static/list.html

← Older revision		Revision as of 04:15, 10 October 2024
Line 394:		Line 394:

	<syntaxhighlight lang="html" line>		<syntaxhighlight lang="html" line>
			<!DOCTYPE html>
			<html>
			<head>
			<title>COMP 2406 DOM Demo: List of Records</title>
			<link rel="stylesheet" href="/style.css">
			<script src="/list.js" defer></script>
			</head>
			<body>
			<h1>People Listing</h1>
			<div>
			<div></div>
			<table>
			<thead>
			<th>Name</th>
			<th>City</th>
			<th>Country</th>
			<th>Birthday</th>
			<th>Email</th>
			</thead>
			<tbody id="table"/>
			</table>
			</div>
			<form method="get" action="/">
			<button type="submit">Home</button>
			</form>
			</body>
			</html>
	</syntaxhighlight>		</syntaxhighlight>

Soma: /* static/add.html */

2024-10-10T04:14:55Z

static/add.html

← Older revision		Revision as of 04:14, 10 October 2024
Line 353:		Line 353:

	<syntaxhighlight lang="html" line>		<syntaxhighlight lang="html" line>
			<!DOCTYPE html>
			<html>
			<head>
			<title>COMP 2406 DOM Demo: Add Record</title>
			<link rel="stylesheet" href="/style.css">
			</head>
			<body>
			<h1>Add Record</h1>
			<div>
			<p>Fill out the info for the person to be added:</p>
			<form method="post" action="/add">
			<div>
			<input id="name" type="text" name="name">
			<label>Name</label>
			</div>
			<div>
			<input id="country" type="text" name="city">
			<label>City</label>
			</div>
			<div>
			<input id="country" type="text" name="country">
			<label>Country</label>
			</div>
			<div>
			<input id="birthday" type="text" name="birthday">
			<label>Birthday</label>
			</div>
			<div>
			<input id="email" type="text" name="email">
			<label>Email</label>
			</div>
			<button type="submit">Submit</button>
			</form>
			</div>
			</body>
			</html>
	</syntaxhighlight>		</syntaxhighlight>

Soma: /* static/index.html */

2024-10-10T04:14:29Z

static/index.html

← Older revision		Revision as of 04:14, 10 October 2024
Line 330:		Line 330:

	<syntaxhighlight lang="html" line>		<syntaxhighlight lang="html" line>
			<!DOCTYPE html>
			<html>
			<head>
			<title>COMP 2406 DOM Demo</title>
			<link rel="stylesheet" href="/style.css">
			</head>
			<body>
			<h1>COMP 2406 DOM Demo</h1>

			<p>Please select what you would like to do:
			<ol>
			<li><a href="/add.html">Add a record.</a></li>
			<li><a href="/list.html">List records.</a></li>
			<li><a href="/analyze">Analyze records.</a></li>
			</ol>
			</p>
			</body>
			</html>
	</syntaxhighlight>		</syntaxhighlight>