Module 10: Web Programming
- Understand how to build a website with HTML & CSS
- Understand Responsive Design with Bootstrap 3
- 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 how to Build Shopping Cart
- Understand MongoDB / Mongoose Setup
- Understand how to Connect to the Database and Outputting Data
- Creating Sign In, Sign Up View, CSRF Protection & User Model
- Creating Sign Up with Passport and Validation
- Understand Route Grouping & Protection (Middleware)
- Stripe Payment and Stripe Verifying Credit Cards
- Storing Orders in the Database and Displaying Orders in the User Profile
- And Many More …
- Week 10: Web Programming – Module 10
- Week 11: Web Application Development – Module 11
- Week 12: Web Application Development with Python – Module 11
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 – NodeJS; Database – MongoDB
- 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.
- About Us
- Contact Us
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.
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
- Lectures 49
- Quizzes 0
- Skill level All levels
- Language English
- Students 24
- Assessments Yes
Module 10: Web Programming
- Basic CSS – How to build a website with HTML & CSS
- How to Create Layout – HTML & CSS
- Responsive Design with Bootstrap 3
- More of CSS Tutorial
- How to put your website online – how to FTP to a domain & upload files to a webhost
- JS Tutorial – If Else & Comparison Operators
- Github Tutorial For Beginners – Github Basics for Mac or Windows & Source Control Basics
- GITHUB PULL REQUEST, Branching, Merging & Team Workflow
- Basic Terminal Usage – Cheat Sheet to make the command line EASY
- How the Internet Works for Developers – Pt 1 – Overview & Frontend
Module 11: Full Stack Web Application Development - Real World App
- NodeJS with MongoDB -1- Shopping Cart
- NodeJS with MongoDB -2- Intro & Setup
- NodeJS with MongoDB -3- Product Index View
- NodeJS with MongoDB -4- MongoDB / Mongoose Setup
- NodeJS with MongoDB -5- Seeding Data
- NodeJS with MongoDB -6- Outputting Data
- NodeJS with MongoDB -7- Sign Up View, CSRF Protection & User Model
- NodeJS with MongoDB -8- Sign Up with Passport
- NodeJS with MongoDB -9- Validation
- NodeJS with MongoDB -10- Sign In
- NodeJS with MongoDB -11- Route Grouping & Protection (Middleware)
- NodeJS with MongoDB -12- Adding a Session Store
- NodeJS with MongoDB -13- Cart Model
- NodeJS with MongoDB -14- Cart Views
- NodeJS with MongoDB -15- Stripe Payment Views
- NodeJS with MongoDB -16- Stripe Verifying Credit Cards
- NodeJS with MongoDB -17- Making Charges with Stripe
- NodeJS with MongoDB -18- Storing Orders in the Database
- NodeJS with MongoDB -19- Forcing User Login
- NodeJS with MongoDB -20- Displaying Orders in the User Profile
- NodeJS with MongoDB -21- Finishing Touches
- NodeJS with MongoDB Resource -1- Express Framework
- NodeJS with MongoDB Resource -2- Middleware
- NodeJS with MongoDB Resource -3- State Management
- NodeJS with MongoDB Resource -4- Express Generator
- NodeJS with MongoDB Resource -5- Mongodb
- NodeJS with MongoDB Resource -6- Mongoose
- NodeJS with MongoDB Resource -7- RESTful API
- View and Download Resource