Module 9

2014-04-30T05:03:57Z

Vigo: /* Grading */

2014-04-30T03:12:46Z

Vigo:

Getting MEAN

2014-04-30T02:54:38Z

Vigo: Created page with '=== Installation === * To install MEAN, follow instructions [http://mean.io/#!/docs here] on how to get started. * Take a moment and read the rest of the documentations to get f…'

Module 9

2014-04-30T02:00:17Z

Vigo:

__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]]
*[[Getting MEAN]]

== Individual Assignments ==

=== Tutorials ===

Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.

=== Install MEAN ===

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).
Open up the app in your browser (localhost:3000), and understand what the default app does.

== 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.

You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there. <br/>
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.

==== Tips ====

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.

'''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]]

Module 9

2014-04-30T01:55:24Z

Vigo:

__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]]
*[[Getting MEAN]]

== Individual Assignments ==

=== Tutorials ===

Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.

=== Install MEAN ===

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).
Open up the app in your browser (localhost:3000), and understand what the default app does.

== 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.

You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there. <br/>
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 ====

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]]

Module 9

2014-04-30T01:18:47Z

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. <br/> You have already learned (some…'

__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]]

CSE 330 Online Textbook - Table of Contents

2014-04-30T01:10:37Z

Vigo:

<div style="text-align:center;">[[File:CSE330Banner.png]]</div>

__NOTOC__
<div style="column-width: 300px; -moz-column-width: 300px; -webkit-column-width: 300px;">
{{FrontPageModule
|num=1
|subject=HTML and CSS Fundamentals
|links=
* [[HTML and CSS]]
* [[HTML Forms]]
}}

{{FrontPageModule
|num=2
|subject=Linux, Apache, and PHP
|links=
* [[Linux]]
* [[Bash]]
* [[Amazon Web Services]]
* [[SSH]]
* [[Apache]]
* [[PHP]]
* [[Workflow]]
* [[Web Application Security, Part 1]]
}}

{{FrontPageModule
|num=3
|subject=SQL Databases
|links=
* [[Introduction to MySQL]] (installation)
* [[MySQL Schema and State]] (queries)
* [[PHP and MySQL]] (using MySQL from PHP)
* [[Web Application Security, Part 2]]
}}

{{FrontPageModule
|num=4
|subject=Scripting for Rapid Prototyping
|links=
* [[Python]]
* [[Regular Expressions]]
}}

{{FrontPageModule
|num=5
|subject=Version Control Systems and Web Frameworks
|links=
* [[Git]]
* [[Web Frameworks]]
}}

{{FrontPageModule
|num=6
|subject=JavaScript and APIs
|links=
* [[JavaScript]]
* [[AJAX and JSON]]
* [[Ext JS]]
* [[Extensible Calendar]]
* [[Web Application Security, Part 3]]
}}

{{FrontPageModule
|num=7
|subject=Real-Time Web Applications
|links=
* [[Node.JS]]
* [[Socket.IO]]
* [[Pong Game]]
}}

{{FrontPageModule
|num=8
|subject=Creative Project
|links=
* [[Choosing a Platform]]
}}

{{FrontPageModule
|num=9
|subject=MEAN Stack -- Javascript fullstack for web development
|links=
* [[MongoDB]]
* [[Express]]
* [[AngularJS]]
* [[Node.js]]
}}
</div>

== Reference ==

Use this wiki as a starting place for your projects in CSE 330. However, web development is a large field, so it is impossible for us to document everything you might need to know. Here are some other places you should look when you need to find something:

* [http://www.webplatform.org/ WebPlatform.org], a community-driven source containing documentation and tutorials for Web technologies
* [http://www.w3.org/community/webed/wiki/Main_Page The Web Education Community Group Wiki], also sponsored by the W3C.
* [http://reference.sitepoint.com/html SitePoint], which has a reference page as well as quality articles and tutorials
* Also take a look at [http://designfestival.com/13-time-saving-tools-for-web-designers/ this list of productivity tools] for web development.

If you can't find what you need in any of these places, try using your favorite search engine. '''Be wary of sites that come up on search engines.''' Many HTML reference sites document bad practices and dated techniques. If you're unsure whether a reference site you find is legitimate, ask a TA.

== Want to Learn More? ==

The limited amount of time in CSE 330 means that we can cover only a subset of the wide range of possible topics in the field of rapid prototyping and web development. Indeed, the exact topics covered in CSE 330 change from year to year.

Feel free to browse some of the topics that have previously been covered in CSE 330: [[:Category:Former Content|CSE 330 Former Content]]

You should also consider following blogs like [http://www.sitepoint.com/ SitePoint] to keep up-to-date on the latest developments in the field of web development.

== Content License ==

The content of this wiki is copyright (c) 2013, Washington University in St. Louis, Department of Computer Science. All rights reserved.

=== Modified BSD License ===

Redistribution and use in source and binary forms, with or without modification, by a Third Party who has not completed and is not in the process of completing CSE 330, of the code examples or concepts on this wiki, are permitted, provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of the Washington University School of Engineering and Applied Science nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS TO ALL PARTIES "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

=== What it Means ===

If you are a student in CSE 330, you may use the code from this wiki freely in your projects without the need for attribution. If you are not a student in CSE 330, you may use the code from this wiki freely in your projects with attribution. Either way, the code examples are provided "as is", without any warranty, and Washington University holds no liability for problems arising from the use of the content in this wiki.