Posts

Showing posts from June, 2020

Ideas for Web Technologies Semester Level Projects

Image
I am teaching Web Technologies this semester using MERN stack. Some of students has asked for semester project ideas for the course.  First of all I suggest you to must get expertise in MERN development using assignments and lab tasks, as its core stack of our course. The better would be if you do the semester project in MERN too, as it would help you to explore more area to complete your project requirements. You can make any consumer website or small scale information system using MERN e.g. classifieds, shopping cart, assets management, fleet management, real estate websie with Google Maps API integration, etc. So these are conventional idea, you can think of any, if you get the idea what mean. If you are confident on your MERN skills and looking for some interesting ideas or unique areas to explore, below are basic ideas, definitely not unique but has something interesting to explore, learn and implement and these are practical and need of the time. Do it only if you think you can d

Server Side Rendering with Session and Cookies Handling - Lab Task 11

Last Updated On: July 30, 2020 Background Modern web applications make extensive use of browser based libraries and frameworks e.g. REACT, Angular, Vue.js, etc. These apps are built on REST API i.e. final HTML code is generated at browser side, only data is sent and received from REST endpoints. Before these technologies and even today, in many web applications, complete web pages are generated at server side and sent to browsers where they are rendered and the output is displayed to user. OpenCart, Magento, Wordpress, OSCommerce, etc. which are very popular open source scripts for online stores, make use of server side rending (at least their inital versions). The objective of this task is to get hands on how server side rendered apps are built and different from REACT based apps. Task Description With reference to lecture 28, following is already implemented in code: Register, login and logout features Product CRUD Add and remove product in cart. and view cart Extend that application

Create REACT Application on REST API - Lab Task 13

Image
In Task 10 , you developed a web application using core JavaScript and JQuery, etc. and connected with the REST API (see Task 7 and  Task 8 for REST API and MongoDB schema details).  Develop a new application, an updated version of Task 10 work, in new app, update the frontend to REACT using components you developed in Task 12 . No changes in backend are required as the application would consume same REST endpoints. This task is most comprehensive and it covers many things that we have done so far by integrateing different concepts in one application. Only authentication is left, that we would cover in some other task.

Create Components in REACT - Lab Task 12

Image
In this task, our objective is not to create a complete web application but to practice how components in REACT are created, how composite components are developed, how the state or data is managed and where we place data that is required in multiple components, etc. You can hard code data in your code or fetch it from any REST API, do as you feel convenient.  Task 12.1 With reference to the lecture on developing custom REACT component. Create REACT components for Student, Course, Address and PhoneNumber, in continuation of your previous example of user, course and address entities. The components shall meet following requirements: The UI shall be Bootstrap based. You may use Cards  for it. The component data shall be stored in itself i.e. the REACT way. Develop components for Student, Address and Course. Remember, the Student component must be composed of Address component and array of Course and PhoneNumber components. As explained in earlier tasks, one student may register multiple

Register a Domain, Configure DNS and Deploy the Web Application - Lab Task 15

Image
By now, you have built the REACT web app with backend in Node.js, Express and MongoDB. Its time to make our app available to world. For how to deploy on Heroku, watch  video lecture about deployment at Heroku i.e. Lecture 4. If you want to deploy on your own virtual or dedicated server, you shall have basic knowledge of operating linux using command line interface. No matter you deploy on Heroku or at your own server. We must buy and link the domains with our hosting server. So in this lab task you are supposed to do following: Choose a quality domain name that well present your objective. If its not available, choose another. You can use Godaddy.com to check whether a domain name you want to purchaes is available Buy the chosen domain from Godaddy.com or some other registrar. For that, you must have a credit card or debit card (not all debit card work for intl' payments, but some do e.g. Meezan Bank) Define DNS server of the domain Add "A RECORD" to link your domain w

Update CRUD Web App. by Connecting with your REST API - Lab Task 10

Image
In Lab Task 8 , you developed REST API in Express and connected to MongoDB for storage. You tested its functionality using Postman. Its time to create your own web application using JQuery, JavaScript, Bootstrap, etc. to perform all operations exposed by your REST endpoints. It would help you to practice JavaScript in good enough detail (as you would be managed composie entities and relational stuff). It will help you to talk to any API from your application later in your professional projects e.g. Facebook APIs, Twitter APIs, etc. or custom APIs exposed by ERPs and ecommernce store (WooCommerce, Magento, Shopify etc. all are exposed as REST Services). You may be thinking about what use cases you shall implement. I recommend you to implement all I described in Lab Task 8. I can understand it would take a lot of time, but its worth it. If you feel yourself very comfortable after doing some work, you may skip very basic use cases e.g. add new course, update course, delete course etc. in

Basic MongoDB Queries and Administration - Lab Task 9

Image
You must have decent knowledge of the persistense storage you are using with your application.  Objective of this task is to make you comfortable with basic queries to run on MongoDB using MongoDB Compass or command prompt based client. These queries include: Apply conditions on single or multiple attributes Select records or summaries based on grouping Sort the fetched records by single or multiple fields Fetch records based on nested objects You should also know basics of MongoDB administration like:  How user authentication work How to add new users with restricted privileges How to take and restore backup of our database or collections How to check storage taken by collection Checking metrices of live server You can add or import some records to run above queries. Feel free to import from any public resource, as data is not important but running queries, in this task.

Connect REST API with MongoDB 'Relational Schema' using Mongoose - Lab Task 8

Image
In previous task we didn't saved the data in MongoDB, lets save in this task. Saving and fetching simple entities with primitive fields in MongoDB is already demonstrated in lecture, as you know. In this task, you are supposed to update the REST API implemented in Express to connect to MongoDB for CRUD operations. The updated code shall comply with below mentioned schema updates and requirements: Make new REST endpoint for 'course' resource with attributes like: id, code, name and pre_requisite_code. The web server shall expose all CRUD operations by RESTful Services. Add 'courses' field in 'student' object / schema as an array of 'course' objects. The RESTful Service of 'student' resource shall process the 'courses' field too i.e. it shall process POST/PUT request to add and update nested fields and the 'student' object returned in reponse to GET request shall hold 'courses' and 'phone_numbers' arrays, in addi

Write REST API with Composite Entities in Express and Test using Postman - Lab Task 7

Image
This is simple task. You have already looked at how to develop a REST API in lecture. We used 'product' entity as an example. In this task you are supposed to extend the lecture code by adding following stuff into API or endpoint: Create API for an object that has multiple attributes e.g. use student with id, name, gender, email, address, phone_numbers. Create multiple endpoints for different operations e.g. CRUD (Create, Retrieve, Update and Delete) and list multiple records. Add 'address' as field in the 'student' object. The 'address' shall be an object in itself with street_address, city and country as fields. It would make the 'student' object composite ... means, an object that has-a object. The 'phone_numbers' field should be an array of string i.e. you shall allow user to manage multiple numbers. It would help you to undertand how we can create and consume JSON for composite objects. In real applications, most of objects are compo

Publish an NPM Package that Download & Send Webpage by Email - Lab Task 6

Image
Background NPM is NodeJS  package manager. Its also a dependency management tool that makes it easy to add libraries into your JavaScript project. It can be used to publish your own JavaScript libraries too, to be used by others' or in your own projects later. You can publish Node packages for public or keep them private i.e. limited to be used by yourself or people you authorize. Making and publishing new packages or librareis is way to publish create and manage reuseable software components that help us to create better softwares later (from productivity and quality perspective). A developer productivity exponentially increase when he/she make use of already available libraries. Generally speaking, any software code is very little fraction of the code that it uses from other libraries or core software development kit. A package may be a finished product for end users but usually packages are libraries that contains pre-implemented and tested functionality that increases develope

Crawl Web Pages, Make XLS File and Email in NodeJS - Lab Task 5

Image
Background These days, huge volume of data is produced that is difficult to process by humans manually. So people make use of automation tools i.e. softwares, to process, filter and understand stuff of their interest. For example, a second-hand mobiles' shopkeeper may be interested in some specific models and makes of mobiles that seller uploads under specific price range from a specific city. To filter such ads, he has to spend a lot of time daily on ads website e.g. olx. What he can do is, make use of software to filter all such ads for him. In data processing projects category on freelancing websites, many clients ask to scrap data from given website/s, filter data of their interest, create XLS or PDF files and to email them or upload at their FTP server, periodically ... all automatically i.e. using a program. Though static typed languages (Java, C# etc.) are better choice and has lot of libraries for such work but as NodeJS is on rise, so in future, there may be lot of data pr

Create CRUD Web Application on Following REST API - Lab Task 4

Image
Background Modern web applications are written using Service Oriented Architecture (SOA). In SOA, the application backend is exposed as a set of services or APIs that can be called from all types of clients e.g. web, mobile, desktop i.e. independent of any programming language and platform the app is built in. These services/APIs send and receive data in standard formats e.g. JSON and XML.  There are following reasons and benefits of using standard format and SOA: All modern programming languages have parsers and generators for JSON and XML, that means, no matter what programming language you are writing your software in, you can generate and consume XML and JSON data using it. So, when you expose data in standard format, you make it easy for others to process it. It decouples the client and server side completely, which help to better develop and maintain both ends.  The JSON/XML data is independed of the presentation logic. That means, a web application can fetch and display data usi

Form Validation using JavaScript - Lab Task 2

Image
Post Updated On: June 1, 2020 Background Quality of any software is strongly associated with how well it manages its data. A software is, broadly speaking, a data structure that faciliate user to search, view, input or update data according to some business processes. Its our responsibility as software engineers, to make sure only valid data is stored in persistent storage e.g. Hard Disk. The early we detect data validation issue, the better, so best place to validate data is exacly when its entered. (we should also validate data at backed to make sure our system do not store even a mistakenly sent invalid data). You must have used input tag with type : radio, text, password and checkbox, etc. HTML 5 has provided some additional input types to be used to get valid data from user so that developers don't have to write custom JavaScript code for basic data types that applications usually store. There are two ways to validate data, either we should use HTML 5 input types. For example