week 6 examples

robynitp · Mar 5, 2015 · aa259f3 · aa259f3
1 parent b0acd87
commit aa259f3
Show file tree

Hide file tree

Showing 31 changed files with 878 additions and 0 deletions.
diff --git a/week6/00-servi-static-files/faq.html b/week6/00-servi-static-files/faq.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<title>FAQ</title>
+</head>
+
+<body>
+	<h1>FAQ</h1>
+	<p><strong>Q: What is Servi?</strong></p>
+	<p><strong>A: </strong>servi.js is a JavaScript node.js microframework for creating web servers. It is inspired by Processing and p5.js.</p>
+	<hr/>
+	<p><strong>Q: Where do I find documentation?</strong></p>
+	<p><strong>A: </strong>For some Servi basics, see the <a href="https://github.com/antiboredom/servi.js/wiki">servi.js github wiki</a></p>
+	<hr/>
+	<p><strong>Q: How do I do this in Servi?</strong></p>
+	<p><strong>A: </strong>For more info on how to do this assingment, see <a href="https://github.com/robynitp/networkedmedia/wiki/Week-5-Notes#using-servijs">Using Servi</a> in the Networked Media class wiki</p>
+</body>
+</html>
diff --git a/week6/00-servi-static-files/server.js b/week6/00-servi-static-files/server.js
@@ -0,0 +1,30 @@
+// every servi application must have these 2 lines
+var servi = require('servi');
+var app = new servi(true);
+
+// set the port (defaults to 3000 if you leave out this line)
+port(3001);  // make sure "port()" line comes before "start()"
+start();
+// set up the routes
+route('/',showHome);
+route('/about',myAboutPage);
+route('/faq',viewFaq);
+
+function showHome(request){
+	// serve a simple string
+	request.respond("This is the home page.");
+}
+
+function myAboutPage(request){
+	// build a string with some HTML in it
+	var myHtml = "<h1>About Me!!!</h1>";
+	myHtml += "<p>I am a person from earth.</p>";
+	// serve the HTML string
+	request.respond(myHtml);
+}
+
+function viewFaq(request){
+	// serve a static HTML file
+	request.serveFile('faq.html');
+}
+
diff --git a/week6/01-servi-userprofiles/server.js b/week6/01-servi-userprofiles/server.js
@@ -0,0 +1,27 @@
+// every servi application must have these 2 lines
+var servi = require('servi');
+var app = new servi(true);
+
+// set the port (defaults to 3000 if you leave out this line)
+port(3111);  // make sure "port()" line comes before "start()"
+start();
+// set up the routes
+route('/',showHome);
+route('/about',myAboutPage);
+
+function showHome(request){
+	request.respond("This is the home page.");
+}
+
+function myAboutPage(request){
+	request.respond("<h1>About Me!!!</h1>");
+}
+
+route('/profile/:username',showProfile);
+
+function showProfile(request){
+	var content = "<h1>" + request.params.username + "</h1>";
+	content += "<p>All the user's info here</p>";
+	request.respond(content);
+}
+
diff --git a/week6/02-servi-userprofiles-data/server.js b/week6/02-servi-userprofiles-data/server.js
@@ -0,0 +1,44 @@
+// every servi application must have these 2 lines
+var servi = require('servi');
+var app = new servi(true);
+
+// set the port (defaults to 3000 if you leave out this line)
+port(7777); //make sure this comes before "start()"
+start();
+// set up the routes
+route('/',showHome);
+route('/profile/:userid',showProfile);
+
+var users = [
+    {
+        "name":  "Joe",
+        "about": "I like cats and kittens."
+    },
+    {
+     	"name":  "Jane",
+     	"about": "I live in Alberta and like to code."
+    },
+    {
+        "name":  "Morgan",
+        "about": "Craft beer and pickles and kale!"
+    }    
+];
+
+function showHome(request){
+	request.respond("This is the home page.");
+}
+
+function showProfile(request){
+	var id = request.params.userid; 
+	if (id in users){
+		var name = users[id].name;
+		var about = users[id].about;
+		var content = "<h1>" + name + "</h1>";
+		content += "<p>" + about + "</p>";
+    	request.respond(content);
+	} else {
+		request.respond("<p>Could not find that user id</p>");
+	}
+}
+
+
diff --git a/week6/03-servi-form-get/form.html b/week6/03-servi-form-get/form.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+	<h1>Who are you and where are you from?</h1>
+	<form method="get" action="/submitform">
+	    <input type="text" name="name" value="Your Name">
+		<input type="text" name="city" value="Your City">
+		<input type="submit" name="submit" value="Submit">
+	</form>
+</body>
+</html>
diff --git a/week6/03-servi-form-get/server.js b/week6/03-servi-form-get/server.js
@@ -0,0 +1,28 @@
+var servi = require('servi');
+var app = new servi(true);
+
+port(3000);
+start();
+
+// --- routes --- //
+route('/', showForm);
+
+// the route here must match the URL in the form element
+// eg, <form method="get" action="/submitform">
+route('/submitform', handleForm);
+
+// --- handlers --- //
+function showForm(request){
+	// Show the form file
+    request.serveFile('form.html');
+}
+
+function handleForm(request) {
+	console.log(request.params); // check what came in 
+
+	// params correspond to the name of the form fields
+	// for example, <input type="text" name="city">
+	var content = "<p>The name submitted was: " + request.params.name + "</p>";
+	content += "<p>The city submitted was: " + request.params.city + "</p>";
+	request.respond(content);
+}
diff --git a/week6/04-servi-form-post/form.html b/week6/04-servi-form-post/form.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+</head>
+<body>
+	<form method="post" action="/submitform">
+		<h3>What's your name?</h3>
+	    <input type="text" name="name">
+
+		<h3>Cats or Dogs?</h3>
+		<input type="radio" name="pet" value="cat">Cats<br/>
+		<input type="radio" name="pet" value="dog">Dogs<br/>
+		<input type="submit" name="submit" value="Submit">
+	</form>
+</body>
+</html>
diff --git a/week6/04-servi-form-post/server.js b/week6/04-servi-form-post/server.js
@@ -0,0 +1,28 @@
+var servi = require('servi');
+var app = new servi(true);
+
+port(3000);
+start();
+
+// --- routes --- //
+route('/', showForm);
+
+// the route here must match the URL in the form element
+// eg, <form method="get" action="/submitform">
+route('/submitform', handleForm);
+
+// --- handlers --- //
+function showForm(request){
+	// Show the form file
+    request.serveFile('form.html');
+}
+
+function handleForm(request) {
+	// for post requests, the values come in the request.fields object
+
+	console.log(request.fields); // check what came in 
+
+	var content = "<p>The name submitted was: " + request.fields.name + "</p>";
+	content += "<p>Preferred pet: " + request.fields.pet + "</p>";
+	request.respond(content);
+}
diff --git a/week6/05-servi-template/server.js b/week6/05-servi-template/server.js
@@ -0,0 +1,48 @@
+// every servi application must have these 2 lines
+var servi = require('servi');
+var app = new servi(true);
+
+// set the port (defaults to 3000 if you leave out this line)
+port(8080);
+
+// set up the routes
+route('/',viewHome);
+route('/:page',viewPage);
+
+// make an object to hold data to feed our template
+var content = {
+	pageTitle: "Cats on Mars",
+	intro: "Cats on Mars explores the mysteries of space cats."
+};
+
+function viewHome(request){
+	request.render("templates/page.template.html",content);
+}
+
+// an object with content for different pages
+var pages = {
+	work: {
+		pageTitle: "Cats at Work",
+		intro: "Martian cats work extremely hard all day long."
+	},
+	play: {
+		pageTitle: "Play time for Cats on Mars!",
+		intro: "A cat on Mars knows how to play like nobody's watching."
+	},
+	sleep:{
+		pageTitle: "Asleep on the Red Planet",
+		intro: "Even Martian cats sleep 18 hours a day."
+	}
+};
+
+function viewPage(request){
+	var pageName = request.params.page; // 'work','play', or 'sleep'
+	if (pageName in pages){
+		request.render("templates/page.template.html",pages[pageName]);
+	} else {
+		request.respond("Page not found");
+	}
+
+}
+// --- START THE SERVER --- //
+start();
diff --git a/week6/05-servi-template/templates/page.template.html b/week6/05-servi-template/templates/page.template.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title><%= pageTitle %></title>
+ </head>
+
+ <body>
+ 	<h1><%= pageTitle %></h1>
+
+  <p><%= intro %></p>
+
+  <p>the end of the page.</p>
+ </body>
+</html>
diff --git a/week6/06-servi-template-loop/server.js b/week6/06-servi-template-loop/server.js
@@ -0,0 +1,33 @@
+// every servi application must have these 2 lines
+var servi = require('servi');
+var app = new servi(true);
+
+// set the port (defaults to 3000 if you leave out this line)
+port(3010);
+// --- START THE SERVER --- //
+start();
+
+// set up the route
+route('/',viewPeople);
+
+// An object with an array of data that the template will use
+var data = {
+	people: [
+	    {
+	        "name": "Brad",
+	        "city": "London"
+	    },
+	    {
+	        "name": "Jill",	
+	        "city": "Tokyo"
+	    },
+	    {
+	        "name": "Kate",
+	        "city": "New York"
+	    }
+	]
+};
+
+function viewPeople(request){
+	request.render("templates/people_list.html",data);
+}
diff --git a/week6/06-servi-template-loop/templates/people_list.html b/week6/06-servi-template-loop/templates/people_list.html
@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <title>People</title>
+  </head>
+  <body>
+    <h1>Where people live</h1>
+    <!-- Embed a loop in <% %> template tags -->
+    <% for (i = 0; i < people.length; i++) { %>
+
+        <li><%= people[i].name %> lives in <%= people[i].city %></li>
+
+    <% } %> <!-- end the for loop -->
+
+  </body>
+</html> 
diff --git a/week6/07-servi-template-data/serve-toad.js b/week6/07-servi-template-data/serve-toad.js
@@ -0,0 +1,40 @@
+var servi = require('servi');
+var app = new servi(true);
+port(3002); 
+start();
+route('/',showHome);
+route('/toads/:toadName',getToad); 
+
+myToadCollection = {
+  yosemite: {
+     common_name: 'Yosemite Toad',
+     scientific_name: 'Anaxyrus canorus',
+     description: 'A robust and stocky toad with dry, uniformly warty skin.',
+     photo: 'http://www.californiaherps.com/frogs/images/acanorusac7116.jpg',
+     sounds: 'http://www.californiaherps.com/sounds/bcanorus7.mp3'
+  },
+  boreal: {
+     common_name: 'Boreal Toad',
+     scientific_name: 'Anaxyrus boreas boreas',
+     description: 'A large and robust toad with dry, warty skin.',
+     photo: 'http://www.californiaherps.com/frogs/images/bbboreasrnphumboldt.jpg',
+     sounds: 'http://www.californiaherps.com/sounds/bbboreasfl406solo.mp3'
+  }
+};
+
+function showHome(request){
+  var toadListText = '';
+  for (shortname in myToadCollection){
+    //console.log(i);
+    var toad = myToadCollection[shortname];
+    // <li><a href="toads/yosemite">Name</a></li>
+    toadListText += '<li><a href="toads/' + shortname + '">' + toad.common_name + '</a></li>';
+  }
+  var title = "<h1>My Toads</h1>";
+  request.respond(title + toadListText);
+}
+function getToad(request){
+  var tname = request.params.toadName; // 'yosemite' or 'boreal'
+  var currentToad = myToadCollection[tname]; // indiv. toad object
+  request.render('toad_profile.html',currentToad);
+}
diff --git a/week6/07-servi-template-data/toad_profile.html b/week6/07-servi-template-data/toad_profile.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title><%= common_name %></title>
+ </head>
+
+ <body>
+ 	<h1>Toads R Us</h1>
+ 	<h2><%= common_name %></h2>
+
+  <p>Common Name: <%= common_name %></p>
+<p>Scientific Name: <%= scientific_name %></p>
+<p>Description: <%= description %></p>
+
+	<hr/>
+  <p><a href="/">Home</a></p>
+ </body>
+</html>
diff --git a/week6/08-servi-db/people.db b/week6/08-servi-db/people.db
@@ -0,0 +1,5 @@
+{"name":"Joe","_id":"1DlDQu55m85dqNQJ"}
+{"name":"Opal","_id":"MKuf4cy0ElnxVDRI"}
+{"name":"Robyn","_id":"hBrMzG83zwZCAocA"}
+{"name":"Bob","city":"New York City","_id":"w405kds0Gu1DLLm5"}
+{"name":"Jane","city":"New York City","_id":"sPdZltYd9jRsdclL"}