With reference to last two lectures on JavaScript, we discussed how to handle events in web application, how to read and update HTML elements, their properties and CSS styles of a webpage dynamically. We also discussed how to manipulate HTML forms. This practice task, ask you to perform some operations using the concepts we discussed. Definitely, you may have to Google the stuff that is related but not exactly same what we did in class. Before doing this task, I strongly recommend you to first run and understand the code samples we discussed in class that I have shared with you via Dropbox. It would help you to understand the basics and then you can build on those concepts to complete below given work. To better focus on different parts of the task, I have divided it in 4 sub-tasks, each sub-task UI is given in below mockup. 10.1 Create an option list with "multiple" property enabled, that means, user shall be able to select multiple options by holding the CTRL key. Add a lis...

9.1 Make show-session-data.php, it should display all sessions data (int, float, arrays) in the web page. if the element is array, display array data appropriately. 9.2 Make a form with two input fields i.e. key and value, when user submit the form, store the submitted key  value in session. If same key already exist, display message that key already exist in session and can't be created again. At end of the script, include show-session-data.php script you created in task 9.1 9.3 Make a program that shift all cookies into session and delete them from user browser. Definitely, you have to add some cookie first. 9.4 A request contains multiple parameter with some values. Shift all parameters into session. Using same name and value.

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