Due to ever increasing use of fossil fuels (petrol, diesel, etc.) in our daily lives, the amount of greenhouse gases i.e. Carbon Dioxide (CO2) in the atmosphere is rapidly increasing, which is causing global warming. Scientists have associated values called “Carbon Footprint” to almost all human activities. For example each square feet of a covered area generates about 0.005 tons of CO2 annually. A car generates 0.0000292 tons of CO2 for each mile it is driven. In order to handle the “Carbon Footprint”, your job is to create an interface called CarbonFootPrintProducer that shall contain a method declaration called getCarbonFootPrint(), that shall return a double value indicating the amount of CO2 generated by an instance of the implementing class. Your next job is to create two classes i.e. House and Car, both shall implement CarbonFootPrintProducer interface. House must have an attribute coveredArea, while Car must have an attribute milesDriven, both public. Create fully parametri...

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

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

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.

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

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

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

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.

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

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

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

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

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

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

My 5 final year students have a BSCS project pre-defense in coming days. One of them asked for some tips for good online presentation. Here are some quick points, if you are also presenting your academic project, please consider: 1. Claim only what you have done yourself, never make a wrong statement or that you may not justify. Otherwise, you would make your small contribution a waste and the examiner would assume all you work is copied. Claiming less work is far better than claiming more that you have not done yourself. 2. Do not spend too much time on basics e.g. history, problem statement, technologies, etc. if your project is not noval e.g. MIS system or a website. It kills the examiner's interest. Your other job is to keep the examiner interested in your presentation. So present important, challenging, valuable stuff first, that you feel would be new or interesting for the examiner. Keeping the examiner interested is your core responsibility and you do it sharing the right co...

You must be using PHP 7.4, as some of features mentioned below may not be available in PHP earlier versions. Create multiple short programs using PHP that shall perform the functionality described below. You shall be able to do most of stuff if you have attended PHP Functions lecture but some functionality may require you to read more on web to complete, to help you in self learning. Program #1. Write a PHP function that shall take an integer parameter representing year. Your function shall return a boolean representing whether the year is a leap year or not. Mention the type on prototype but do not use strict_type mode. If user passes, a non integer data, you functions hall return null. Program #2. There is a special type of function in PHP, call variadic functions or variable length arguments. Make a function that user shall call passing none, single or any number of numeric paramters. The function shall return sum of all numbers. If nothing is passed as argument, the...

Post Updated On: Nov. 4, 2024 Above is the User Interface of how your application shall look a like. Make a web page using HTML, CSS and JavaScript (you can also use JQuery library for DOM manipulation).  When user fill the form and click the 'add' button, entered record shall be added inside the table on left of the page. 'Action' column of the table shall contain "Update" and "Remove" links. "Update" shall load the corresponding populate record of that row inside the form, to be updated. When user change/edit the form values and press 'update' button, it shall update the corresponding row in the table.  Initially, when the page is loaded, the table shall be empty and "Update" button shall be disabled. When user click the "Update" link in 'Action' column, form's "add" button shall be disabled. The "reset" button shall reinitialize the form at the same state when the page was loade...