Full Stack Development – Ruby/Ruby on Rail & MongoDB – Part 2

This part of the course focus more on implementation of full-stack web development using Ruby/Ruby on Rail, MongoDB and other scripting languages to build a complete interactive web application. After the completion, you will then embark on your capstone project where you will apply your skill.

COURSE DESCRIPTION

Happy learning from part 1. In this part 2 of the course we are moving into more advanced and specialized aspects of the course, we will start with the basic concept of web programming that will take you into real life web application, where you will understand the general concept of web Programming, and then take you deeper into specialized programming language (Ruby),  then get you engage with practical aspect of coding both with front-end and back-end programming – Javascript, HTML, CSS, Ruby and Ruby on Rail,  MongoDB. This course aims to give you what it takes to become a world class full-stack web developer.

CERTIFICATION

On completion.

LEARNING OUTCOME

• Module 10: Web Programming

  • Understand how to build a website with HTML & CSS
  • Understand Responsive Design with Bootstrap 3
  • Understand JavaScript
  • Understand how to Use Github
  • Understand the Concepts of Client Side Server Side
  • Understand the HTTP and the Web Request-Response Cycle
  • And Many More …

• Module 11: Web Application Development

  • Understand Setting Up Ruby on Rail
  • Using the Rails Scaffold Generator
  • Working with Ruby on Rails validations
  • Setting the homepage route in Rails
  • Implementing Image Uploading Gems in Rails
  • Understand how to Integrat Secure Credential Management with the Figaro Gems
  • Understand AngularJS and MongoDB Database Connection
  • Building a Notebook App
  • And Many More …

SYLLABUS

• Week 10: Web Programming – Module 10
• Week 11: Web Application Development – Module 11
• Week 12: Web Application Development with Python – Module 11

CAPSTONE PROJECT

Topic: Online Shopping Store

Online Store has gain ground as an accepted and used business paradigm. More and more business are implementing web sites providing functionality for performing commercial transactions over the web. It is reasonable to say that the process of shopping on the web has come to stay. The objective of this project is to develop an online store where product like clothes, electronics, and other similar product can be bought from the comfort of home through the Internet. However, for implementation purposes, this project will deal with an online shopping for mobile phones.

An online store is a virtual store on the Internet where customers can browse the catalog and select products of interest. The selected items may be collected in a shopping cart. At checkout time, the items in the shopping cart will be presented as an order. At that time, more information will be needed to complete the transaction. Usually, the customer will be asked to fill or select a billing address, a shipping address, a shipping option, and payment information such as credit card number (though in this project we will not integrate our application to any payment platform). An e-mail notification is sent to the customer as soon as the order is placed.

1. Overall Description

• Only registered user can purchase products
• Contact Us page is available to contact Admin for queries.
• There are three roles available: Visitor, User and Admin
  • Visitor can view available products
  • User can view and purchase products
  • An Admin has some extra privilege including all privilege of visitor and user
• Admin can add/remove products and edit product information.
• Admin can add user, edit user information and can remove user.
• Admin can ship order to user based on order placed by sending confirmation mail

1.1 Development Tools

• Back-end development – Ruby/Ruby on Rail; Database – MongoDB
• Front-end development – HTML/HTML5, Javascript, AngularJS, JSON, CSS, CSS3 and other library such as jQuery etc.
• Editor – Use editor of your choice.
• Server – Local or remote

1.2 Web Pages details:

• Home Page
• About Us Page
• Product Page
• Checkout Page
• Cart page
• Single Product Page
• Contact Us Page
• Admin Page
• Logins Page
• Register Page

1.3 Main Menu: Aside the menus that is listed below other pages shouldn’t appear on the main menu, they should only be links to their related content, so that you can navigate in the process of browsing or transaction.

• Home
• Products
• About Us
• Contact Us
• Login
• Register

1.4 Project Detail:
Anyone can view Online Shopping portal and available products, but every user must login by his/her Username and password in order to purchase or order products. Unregistered members can register by navigating to registration page. Only Admin will have access to modify roles, by default developer can be an ‘Admin’. Once you (user) register on the site, your default role will be ‘User’.

• Home Page: The Home page should be informative enough to sell your products
• Products page: This should display all products in a gallery format with centred short description, price and Add to Cart button under each product. Each product image should be link to “Product single page” where you can view product details.
• Single Product Page: In the Single Product page user should be able to increase product quantity – the default quantity should be 1.
• Checkout Page: Unregister users should have option to register on this page otherwise they will not be able to checkout. When “Checkout” button is clicked ( by registered user) it should print the transaction detail to a page, which will include: customer name, reference number, shipping address, customer email, phone number and display message for either successful or failed transaction, if failed the reason for the failure should be stated.
• Cart Page: All product added to cart should display on this page, on the cart page users should be able to remove cart and increase product quantity as will.

• Admin pages: The admin page should only be access by typing it URL into the web browser, which will land you on the Login page. The admin dashboard should contain summary of recent transaction (ie: report) and the following menus:
  • Order – this should display the log of all transactions
  • Product – List of all existing product with their status (Active or Inactive) and an option to edit or delete. Admin should be able to add new product.
  • User – Admin should be able to View, Add, Edit, and Delete users.

   

  • Note that admin should be able to navigate from the admin page to the main site.

Conclusion
A good shopping cart design must be accompanied with user-friendly shopping cart application logic. It should be convenient for the customer to view the contents of their cart and to be able to remove or add items to their cart. The Online Store application described in this project provides a number of features that are designed to make the customer more comfortable.
This project aim at helping you to understanding the creation of an interactive web pages and the technologies used to implement them.

Project Duration: 1 Month