Module 9 - Revision history

Todd at 13:17, 22 August 2014

2014-08-22T13:17:52Z

Show changes

Vigo: /* Tips */

2014-05-15T17:06:32Z

Tips

Vigo at 23:04, 11 May 2014

2014-05-11T23:04:56Z

Vigo at 05:05, 30 April 2014

2014-04-30T05:05:21Z

Vigo: /* Grading */

2014-04-30T05:03:57Z

Grading

Vigo at 05:03, 30 April 2014

2014-04-30T05:03:22Z

Vigo at 02:00, 30 April 2014

2014-04-30T02:00:17Z

Vigo at 01:55, 30 April 2014

2014-04-30T01:55:24Z

Vigo: Created page with 'NOTOC This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js.
You have already learned (some…'

2014-04-30T01:18:47Z

Created page with '__NOTOC__ This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/> You have already learned (some…'

New page

__NOTOC__

This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>
You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to introduce you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.

== Reading ==

The following articles on the online class wiki textbook contain information that will help you complete the assignment.

*[[MongoDB]]
*[[Express]]
*[[AngularJS]]
*[[Node.js]]

== Assignments ==

=== Individual ===

'''Write a birthday card to a friend or family member using HTML and CSS.''' Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:

* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
* Make the text big and red, and include pictures of hearts
* Use a boxy font with text shadows to make your card look urban (more advanced)

Use this opportunity to experiment with the plethora of CSS properties. Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.

==== How to Edit Your File ====

Starting in Module 2, we will be using Komodo Edit as our primary development tool. However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor.

* On Windows, consider Notepad++. This is already installed for you in the CEC labs. If you prefer to use your personal computer, you can download it from [http://notepad-plus-plus.org/ here].
* On Mac OS X, consider TextWrangler. You can download it from [http://www.barebones.com/products/textwrangler/ here] or from the Apple App Store.
* Most Linux distributions come with gedit pre-installed, which you can use for this lab.

Please save your file as ''birthday.html'' from the plain text editor of your choice.

'''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work. What you need is a plain text editor.

==== How to View Your HTML Document ====

Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.

In Module 2, we will install a web server that serves up pages on the http:// protocol.

==== Validation ====

'''Your birthday card must pass the W3C Validator with no errors.''' From [http://validator.w3.org/ the validator], you can choose to upload your file.

For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]]

=== Make a Portal to a DuckDuckGo Search ===

'''Write an HTML document containing a form that searches DuckDuckGo's web site.''' You should be able to type in a search term and have your form load the DuckDuckGo search page.

# Visit [https://www.duckduckgo.com/ www.duckduckgo.com]. Search for something easy to spot in the URL, like "QUERY".
# Look at the URL of the search page. What is the script URL? What is the query variable?
# Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.

== Grading ==

We will be grading the following aspects of your work. There are 50 points total.

# '''Birthday Card (30 Points):'''
#* Correct usage of HTML and CSS in your birthday card (10 points).
#*: ''Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a stylesheet.''
#* Experimenting with at least 5 different CSS properties in your birthday card (10 points).
#* Birthday card passes the W3C validation for the declared DOCTYPE (e.g., HTML 5) (10 points).
# '''Search Portal (15 Points):'''
#* DuckDuckGo search portal is functional (15 points).
# '''Account Created on Amazon Web Services (5 Points)'''

[[Category:Module 1]]
[[Category:Modules]]

← Older revision		Revision as of 17:06, 15 May 2014
Line 39:		Line 39:
	Keep in mind that you don't have to understand what every line of code does. Whenever in doubt, refer to the default app.		Keep in mind that you don't have to understand what every line of code does. Whenever in doubt, refer to the default app.

		+	You will be making changes on both the server side (the /server directory of your app) and the client side (in the /public directory)
		+	#* Server Side:
		+	Model: add model files to the /server/models folder. There are Mongoose files that define the objects, they are referenced by the controllers.
		+	View: nothing to change
		+	Controller: add controller file(s) for your models (/server/controllers), they are referenced by the routing file
		+	Routing: add a js file in /server/routes folder that responds to client side requests (same format as the one in the default app)
		+	#* Client Side
		+	Model: nothing to change
		+	View: (/public/views directory) views are .html files. Each view that requires data from the server side should be tied to a controller, inside the controller, you can specify methods to update/save/delete objects in the DB, the view and routing section gives an example
		+	Controller: add controller files to /public/controllers. Easy once you go through the AngularJS tutorial. You may need to add multiple services in the /public/services directory (tutorial part 11, and the default MEAN app) to use data received from the back end and persist data across views (look up ngCookie, $cookieStore or the HTML 5 localStorage solution).
		+	Routing: /public/routes directory of your app. Add entries for all views you will use, and specify their urls and templates (stored in /public/views).

	== Grading ==		== Grading ==

← Older revision		Revision as of 23:04, 11 May 2014
Line 2:		Line 2:

	This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>		This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>
−	You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to ~~introduce~~ you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.	+	You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to expose you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.
		+	Follow along the tutorials and complete exercises to learn how things work, and you will be ready to create your own web applications using the MEAN stack very soon!

@@ Line 53: / Line 53: @@
 #* Can view orders, delete orders (10 points).
 #*: ''An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to''
 # '''Design and Misc (5 Points):'''
 #* Site is overall user friendly and utilizes Bootstrap (3 points).
 #* App passes JShint with no errors (2 points)
 # '''Creative Portion (20 Points):'''
 #* TBD

@@ Line 54: / Line 54: @@
 #*: ''An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to''
-# ''Design and Misc (5 Points):'''
+# '''Design and Misc (5 Points):'''
 #* Site is overall user friendly and utilizes Bootstrap (3 points).
 #* App passes JShint with no errors (2 points)
-# ''Creative Portion (20 Points):'''
+# '''Creative Portion (20 Points):'''
 #* TBD
 [[Category:Module 9]]
 [[Category:Modules]]

@@ Line 9: / Line 9: @@
 The following articles on the online class wiki textbook contain information that will help you complete the assignment.
-*[[MongoDB]]
+*[[Preparations]]
 *[[Getting MEAN]]
 == Individual Assignments ==
@@ Line 39: / Line 36: @@
 Review the "Getting MEAN" section to understand the file system so you know how components work with each other.
-Please save your file as ''birthday.html'' from the plain text editor of your choice.
+We will be grading the following aspects of your work.  There are 100 points total.
-==== How to View Your HTML Document ====
+# '''Working E-commerce Site (75 points)'''
+#* MEAN installed and set up correctly (10 points).
-Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox).  For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox.  When the file opens, it should be under the file:/// protocol.
+#* Models set up correctly (15 points).
+#*: ''including products, orders, and adding payment and shipping address to the user model, you don't have to use phones from the Angular tutorial but you are responsible for populating your products table''
-In Module 2, we will install a web server that serves up pages on the http:// protocol.
+#* Can display a list of all products, can search, can view details (15 points).
+#* Can add to cart, view cart, cart sustains (data can be accessed across views and shouldn't be lost when page is refreshed) (20 points).
-==== Validation ====
+#* Can check out (5 points).
+#*: ''A user can check out if she has a payment option and a shipping address, on a successful checkout, the cart should be emptied''
-'''Your birthday card must pass the W3C Validator with no errors.'''  From [http://validator.w3.org/ the validator], you can choose to upload your file.
+#* Can view orders, delete orders (10 points).
+#*: ''An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to''
-We will be grading the following aspects of your work.  There are 50 points total.
+# ''Design and Misc (5 Points):'''
-# '''Birthday Card (30 Points):'''
+# ''Creative Portion (20 Points):'''
-#* Correct usage of HTML and CSS in your birthday card (10 points).
+#* TBD
-[[Category:Module 1]]
+[[Category:Module 9]]
 [[Category:Modules]]

@@ Line 28: / Line 28: @@
 == Group Project ==
 * Make an e-commerce site using the MEAN stack.
-−
 To start, come up with use cases for your site. Think about what products the site is selling, what the user can do, and how information is stored etc.
@@ Line 37: / Line 36: @@
 You may use phone models provided by the Angular Phone Catalog app as your products. Review the MongoDB section on how to import JSON data into MongoDB.
-==== How to Edit Your File ====
+==== Tips ====
 Please save your file as ''birthday.html'' from the plain text editor of your choice.

@@ Line 12: / Line 12: @@
 *[[Express]]
 *[[AngularJS]]
-*[[Node.js]]
+*[[Getting MEAN]]
-== Assignments ==
+== Individual Assignments ==
-=== Individual ===
+=== Tutorials ===
-'''Write a birthday card to a friend or family member using HTML and CSS.'''  Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance.  Some ideas:
+Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.
-* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
+=== Install MEAN ===
-Use this opportunity to experiment with the plethora of CSS properties.  Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly.  The main thing is that you learn HTML and CSS and use them appropriately.
+Follow the steps and install MEAN on your machine, initialize an app and type grunt in your terminal to start the server (make sure your mongoDB server is connected and running).
 ==== How to Edit Your File ====