Posts

Signup, Login & Authorization

Objective The objective of this assignment is to extend the Address Book application developed in last lab task (Assignment 3) by implementing a user authentication system and role-based access control . Students will create a Signup and Login system and ensure that only authenticated users can perform Create, Update, and Delete operations. Application Requirements 1. Users Data Storage Create a new JSON file named auth-users.json .  This file will store registered users as an array of objects. You can also use mongodb database to store users data. Each user object must contain: id name email password Password hashing is not required for this assignment. 2. Signup (Registration) Feature Create /signup route. On GET request , display a signup form. Form fields: Name Email Password Confirm Password On POST request : Validate password and confirm password. Check if email already exists in auth-users.json . If validation fails, show an error message on signup page. If successful, ...

Download, Parse and Save data

Using HTTP Client library of your programming language of choice, download this page and parse products’ data i.e. image URL, title, description, price. Make an xlsx file that should contain the parsed data. If you are using Python, you can use Requests library to download, BeautifulSoup library to parse. Use pandas library to make xlsx file. If you are using Java, you can use Apache HTTP Client library to download and parse and Apache POI library to make xlsx file.

Create Listing and Detail Page using HTML/CSS of any e-commerce store

Make two HTML pages i.e. Products Listing Page and Product Detail Page. Listing Page is one where list of products appear when you search or filter some products on an ecommerce store. e.g. https://www.daraz.pk/smartphones https://myshop.pk/laptops-desktops-computers/laptops Product Detail page is one that display individual product detail. e.g.  https://www.daraz.pk/products/105-pta-i656021303-s3082667234.html https://myshop.pk/hp-notebook-15-fd0131wm-pakistan.html Make clone of these two pages using any ecommerce store. Do not use what your friend is using. Select a unique and popular e-commerce website of any country (above links are just example). Please choose a content rich e-commerce website. Means, do not choose a very simple pages layout that display only few attributes of the product. Topics to focus: · HTML - div, a, img, etc. · CSS selector and basic props. · Box Model · Positioning, styling links, images, and text, etc. · Fle...

Express JS - Track Recently Visited Pages in Session

When a user visits any web page, save the page name and URL in the session as an array of objects. Each object should contain the page name and URL. Create a footer.ejs file to display the list of the 10 most recently visited pages in the footer of every EJS page. Each page should appear as a clickable hyperlink in a separate row. If the user clicks on a link, the corresponding page should open. At the end of the list, include a "Remove All" link to clear the list of recently visited pages in the session. Add an "X" next to each link to allow the user to remove that specific page from the session. After removing a page or clearing the list, redirect the user to the /home page. If a user visits a page that is already in the list, move it to the top and remove the previous occurrence to avoid duplicates.

Express JS - Cookies Handling

Implent below tasks in one npm project. Do not create separate project for each task mentioned below. Add appropriate links in header to make moving from page task to another, easy. These may not be used in real world scenerio as-is, as they are designed to understand working of cookies along with forms, ajax, query string, etc. Task 1: Define and Handle /cookie1 Create a route /cookie1 that sets two cookies:  token and last_visit_timestamp , in the user's browser. When the browser sends these cookies back to the server in next HTTP request e.g. /display-cookies , display their values using the cookie1.ejs template. Additionally, calculate and display the time (in seconds) since the user's last visit by subtracting the last_visit_timestamp cookie value from the current time. Ensure that the last_visit_timestamp cookie is updated with the current timestamp on each request. Refresh the page at random intervals to test its functionality. Task 2: Add Cookie Form at /add-cookie...

AJAX and DOM Manipulation - Fetch, Display, Update and Remove Students Records

Make use of JQuery JavaScript library for AJAX functionality and DOM manipulaiton. Use Bootstrap for layout design. Responsive Design: Large screens (e.g., desktops): The webpage should display a single row with four cells. Medium screens (e.g., tablets): The last two cells should move to a new row. Small and extra-small screens (e.g., phones): All cells should stack vertically. Cell Details and Functionality: Fetch student data from  http://192.155.90.208/students.json   using AJAX and store in students array. Make use of this array for below given functionalities. You can treat, student name as primary key. Cell 1: Add a dropdown menu with a list of countries and a " Load Data " button. When the button is clicked, distinct countries from students array shall be loaded into option list. When a country is selected, display the filtered list of students from the selected country in Cell 2.  Cell 2: Show the student list in a table. The table should have the following colum...

AJAX and DOM Manipulation - Display Monthly Expenses

Layout - R ow 1 Create a Bootstrap row with 3 cells . On large screens, cells should be in a row; on smaller screens, stack them vertically. Cell 1: Fetch expense details using AJAX from  http://192.155.90.208/expenses.json Display months names in e.g. January , February , and March , each in a separate <div> element. Cell 2: When month in cell 1 is clicked, show a table with Sr. # , Expense Category , Total columns in cell 2. Add a Grand Total row at the bottom. Cell 3: Add a “Show Details” button below the table in Cell 2. On click, display a table with Sr. #, Description, Category, Amount columns and a final Total Amount row. Row 2 - Cell 1 Create a form with fields for Description , Category , Amount , and Month , along with an Add button to add a new expense. Choose appropriate input types as needed. When the button is clicked, Row 1 data and behavior shall include the new expense added.