WebFund 2024F: Tutorial 3 - Revision history

Soma: /* formdemo.js */

2024-09-26T17:29:11Z

formdemo.js

← Older revision		Revision as of 17:29, 26 September 2024
Line 144:		Line 144:

	for (let r of state) {		for (let r of state) {
	row.push("<tr>")		row.push("<tr>")
	row.push(rowMarkup(r.name));		row.push(rowMarkup(r.name));
	row.push(rowMarkup(r.city));		row.push(rowMarkup(r.city));
Line 150:		Line 150:
	row.push(rowMarkup(r.birthday));		row.push(rowMarkup(r.birthday));
	row.push(rowMarkup(r.email));		row.push(rowMarkup(r.email));
	row.push("</tr>")		row.push("</tr>")
	}		}

Soma: /* formdemo.js */

2024-09-26T17:28:14Z

formdemo.js

← Older revision		Revision as of 17:28, 26 September 2024
Line 144:		Line 144:

	for (let r of state) {		for (let r of state) {
			row.push("<tr>")
	row.push(rowMarkup(r.name));		row.push(rowMarkup(r.name));
	row.push(rowMarkup(r.city));		row.push(rowMarkup(r.city));
Line 149:		Line 150:
	row.push(rowMarkup(r.birthday));		row.push(rowMarkup(r.birthday));
	row.push(rowMarkup(r.email));		row.push(rowMarkup(r.email));
			row.push("</tr>")
	}		}

Line 250:		Line 252:
	}		}

	Deno.serve(handler);		Deno.serve({ port: 8000, hostname: "0.0.0.0" }, handler);
	</syntaxhighlight>		</syntaxhighlight>

Soma at 15:04, 26 September 2024

2024-09-26T15:04:39Z

← Older revision		Revision as of 15:04, 26 September 2024
Line 230:		Line 230:
	async function handler(req) {		async function handler(req) {

	var ~~path~~ = new URL(req.url).pathname;		var origpath = new URL(req.url).pathname;
			var path = origpath;
	var r = await route(req);		var r = await route(req);

Line 240:		Line 241:
	}		}

	console.log(`${r.status} ${req.method} ${r.contentType} ${~~path~~}`);		console.log(`${r.status} ${req.method} ${r.contentType} ${origpath}`);

	return new Response(r.contents,		return new Response(r.contents,

Soma at 03:58, 26 September 2024

2024-09-26T03:58:24Z

← Older revision		Revision as of 03:58, 26 September 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/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms. You'll also start learning how to debug web applications.		In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms. You'll also start learning how to debug web applications.

Line 17:		Line 15:

	* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. Make changes to all files.		* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. Make changes to all files.
	* Run formdemo under the deno debugger and connect to it. ~~You~~'ll need to be using Chrome or another browser using the V8 JavaScript runtime (or just use VSCode):		* Run formdemo under the deno debugger and connect to it. Set at least one breakpoint and notice how you can step through the code as it runs. Note that you'll need to be using Chrome or another browser using the V8 JavaScript runtime (or just use VSCode):
	deno run --inspect-brk --allow-net --allow-read formdemo.js		deno run --inspect-brk --allow-net --allow-read formdemo.js
	If you're using an SSH jumphost, you need to forward both port 8000 and 9229, e.g.		If you're using an SSH jumphost, you need to forward both port 8000 and 9229, e.g.

Soma: /* Tasks */

2024-09-26T03:47:39Z

Tasks

← Older revision		Revision as of 03:47, 26 September 2024
Line 19:		Line 19:
	* Run formdemo under the deno debugger and connect to it. You'll need to be using Chrome or another browser using the V8 JavaScript runtime (or just use VSCode):		* Run formdemo under the deno debugger and connect to it. You'll need to be using Chrome or another browser using the V8 JavaScript runtime (or just use VSCode):
	deno run --inspect-brk --allow-net --allow-read formdemo.js		deno run --inspect-brk --allow-net --allow-read formdemo.js
			If you're using an SSH jumphost, you need to forward both port 8000 and 9229, e.g.
			ssh -L 8000:localhost:8000 -L 9229:localhost:9229 -J janedoe@access.scs.carleton.ca student@134.117.33.1
	* Change the top-level app page to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!		* Change the top-level app page to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!

Soma at 03:34, 26 September 2024

2024-09-26T03:34:51Z

← Older revision		Revision as of 03:34, 26 September 2024
Line 17:		Line 17:

	* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. Make changes to all files.		* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. Make changes to all files.
	* Run formdemo under the deno debugger and connect to it. You'll need to be using Chrome or another browser using the V8 JavaScript runtime:		* Run formdemo under the deno debugger and connect to it. You'll need to be using Chrome or another browser using the V8 JavaScript runtime (or just use VSCode):
	deno run --inspect-brk --allow-net --allow-read formdemo.js		deno run --inspect-brk --allow-net --allow-read formdemo.js
	* Change the top-level app page to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!		* Change the top-level app page to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!

Soma at 03:34, 26 September 2024

2024-09-26T03:34:13Z

@@ 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/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms.
+In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms. You'll also start learning how to debug web applications.
 ==Code==
 All code: [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo.zip]
 ===formdemo.js===

Soma at 02:12, 26 September 2024

2024-09-26T02:12:22Z

← Older revision		Revision as of 02:12, 26 September 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/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms.		In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms.

Soma: Created page with "In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms. ==Code== All code: [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo.zip] ===formdemo.js=== // SPDX-License-Identifier: GPL-3.0-or-later // Copyright (C) 2024 Anil Somayaji // // formdemo.js /..."

2024-09-26T02:07:35Z

Created page with "In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms. ==Code== All code: [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo.zip] ===formdemo.js=== <syntaxhighlight lang="javascript" line> // SPDX-License-Identifier: GPL-3.0-or-later // Copyright (C) 2024 Anil Somayaji // // formdemo.js /..."

New page

In this tutorial you'll be playing with [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo], a simple Deno application demonstrating how to accept and process HTML forms.

==Code==

All code: [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/formdemo.zip formdemo.zip]

===formdemo.js===

<syntaxhighlight lang="javascript" line>
// SPDX-License-Identifier: GPL-3.0-or-later
// Copyright (C) 2024 Anil Somayaji
//
// formdemo.js
// for COMP 2406 (Fall 2024), Carleton University
//
// Initial version: Sept 25, 2024
//
// run with the following command:
// deno run --allow-net --allow-read formdemo.js
//

const status_NOT_FOUND = 404;
const status_OK = 200;

var state = [];

function MIMEtype(filename) {

const MIME_TYPES = {
'css': 'text/css',
'gif': 'image/gif',
'htm': 'text/html',
'html': 'text/html',
'ico': 'image/x-icon',
'jpeg': 'image/jpeg',
'jpg': 'image/jpeg',
'js': 'text/javascript',
'json': 'application/json',
'png': 'image/png',
'txt': 'text/text'
};

var extension = "";

if (filename) {
extension = filename.slice(filename.lastIndexOf('.')+1).toLowerCase();
}

return MIME_TYPES[extension] || "application/octet-stream";
};

function template_header(title) {
return `<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
<link rel="stylesheet" href="/style.css">
</head>
`
}

function template_notFound(path) {
return template_header("Page not found") +
`<body>
<h1>Page not found</h1>

<p>Sorry, the requested page was not found.</p>
</body>
</html>
`
}

function template_addRecord(obj) {
return template_header("Person just added") +
`<body>
<body>
<h1>Person just added</h1>
<p>Name: ${obj.name}</p>
<p>City: ${obj.city}</p>
<p>Country: ${obj.country}</p>
<p>Birthday: ${obj.birthday}</p>
<p>Email: ${obj.email}</p>
</body>
</html>
`
}

function template_listRecords(state) {
const pageTop = ` <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>`;

const pageBottom = ` </tbody>
</table>
</div>
<form method="get" action="/">
<button type="submit">Home</button>
</form>
</body>
</html>`;

var row = [];

function rowMarkup(s) {
return "<td>" + s + "</td>";
}

for (let r of state) {
row.push(rowMarkup(r.name));
row.push(rowMarkup(r.city));
row.push(rowMarkup(r.country));
row.push(rowMarkup(r.birthday));
row.push(rowMarkup(r.email));
}

return template_header("List of Records") +
pageTop + row.join("\n") + pageBottom;
}

function listRecords(state) {
var response = { contentType: "text/html",
status: status_OK,
contents: template_listRecords(state),
};

return response;
}

async function routeGet(req) {
const path = new URL(req.url).pathname;
if (path === "/list") {
return listRecords(state);
} else {
return null;
}
}

async function addRecord(req) {
var body = await req.formData();
var obj = { name: body.get("name"),
city: body.get("city"),
country: body.get("country"),
birthday: body.get("birthday"),
email: body.get("email") };
state.push(obj);

var response = { contentType: "text/html",
status: status_OK,
contents: template_addRecord(obj),
};

return response;
}

async function routePost(req) {
const path = new URL(req.url).pathname;

if (path === "/add") {
return await addRecord(req);
} else {
return null;
}
}

async function route(req) {

if (req.method === "GET") {
return await routeGet(req);
} else if (req.method === "POST") {
return await routePost(req);
} else {
return null;
}
}

async function fileData(path) {
var contents, status, contentType;

try {
contents = await Deno.readFile("./static" + path);
status = status_OK;
contentType = MIMEtype(path);
} catch (e) {
contents = template_notFound(path);
status = status_NOT_FOUND;
contentType = "text/html";
}

return { contents, status, contentType };
}

async function handler(req) {

var path = new URL(req.url).pathname;
var r = await route(req);

if (!r) {
if (path === "/") {
path = "/index.html";
}
r = await fileData(path);
}

console.log(`${r.status} ${req.method} ${r.contentType} ${path}`);

return new Response(r.contents,
{status: r.status,
headers: {
"content-type": r.contentType,
}});
}

Deno.serve(handler);
</syntaxhighlight>

===static/index.html===

<syntaxhighlight lang="html" line>
<!DOCTYPE html>
<html>
<head>
<title>COMP 2406 Simple form demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>COMP 2406 Simple form demo</h1>
<div>
<p>Fill out your info</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>

===static/style.css===

<syntaxhighlight lang="css" line>
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
color: #00B7FF;
}
</syntaxhighlight>