Category: CSS Projects

Posted on

Book Reading Event System MVC App Using ASP.Net SQL & Bootstrap

This Book Reading Event App is a combination of tools and processes that manage book-reading events across India. A book reading event where book lovers come together for a community reading of their favorite book. One or more readers read the book loudly and optionally people even play roles from the book.

INTRODUCTION

A book reading event app is an online web application that is a single-point entry for all book lovers across India. Any registered and verified user who wants to keep a book reading event can create an event, invite people they know by specifying their email ids, or can keep the event open for all. The invited people need not be registered users. Due to some problem, if someone is not able to create an event, s/he can ask some other registered user to keep an event on their behalf of her/him. The registered user can check for the public events happening by just browsing into to portal and for private events, one can check the invited list of events by logging into the portal as well as by checking their invitation mail. Admin can see all the events (whether it is public or private) and all the registered users. As per the requirement, the admin can Edit as well as Delete any future public or private event details.

OBJECTIVE

The objective of this Book Reading Event System Project was to manage all the book reading events properties created by one user and send an invitation to the guests by entering their email ids or by keeping an event public. Managing these resources may itself be sufficient enough to give any user a big jump in terms of efficiency. The objective was to build a web application for people that makes use of it to manage their hectic schedule and make the best use of it in a smooth and efficient manner.

FUNCTIONALITY

The project will manage the intellectual property by creating a database of all the users and events, helping users to create an event, edit the event details, delete an event, add comment(s) on the event, invite the guest(s) for the event and to see any book reading event details happening around. Admin simultaneously verifies details of events as well as users. Admin can also edit and delete the event whenever required. Book Reading Event App has two types of users: Registered users, and Admin users.

Registered users are the normal user of the application who has the following rights:

  • View Past and Upcoming Public events
  • Log in to the system using “Email id” and “Password”
  • Create an Event and send the invites by specifying email ids
  • Edit the events created by him/her
  • View the events invitation list along with the details
  • View the list of events created by him/her
  • Add Comments to the Event

Admin Users have all rights throughout the application as follows:

  • View Past and Upcoming Public events
  • Log in to the system using “Email id” and “Password”
  • Create an Event and send the invites by specifying email ids
  • Edit any upcoming event’s detail
  • View the events invitation list along with the details
  • View the list of events created by him/her
  • Add Comments to the Event
  • View list of all the users
  • View a list of all the events

METHODOLOGY AND APPROACH

The following technologies were used for building this project:

  • Frontend – Hypertext Markup Language (HTML) CSS (Cascading Style Sheets), JavaScript, Bootstrap
  • Backend – ASP.NET (Active Server Page) Model View Controller (MVC)
  • Database – Structured Query Language (SQL) Server
  • Framework – Entity framework is used to connect to the database which helps in object-relational mapping

This project is built in an MVC pattern where M is the model which determines the classes, V is a view that determines views shown to the user and C stands for the controller which is used to handle the request. This project follows three layered architecture. The first layer is the presentation layer which includes views, and the second layer is the business layer which includes the services which work as a mediator between the presentation and data access layer. And the third layer is the data access layer which directly interacts with the SQL server database using entity framework and code first approach.

OBSERVATIONS

Graphical User Interface (GUI) – The website contains many links and tabs for various requirements like Create Event, Edit Event, View Invitations, etc. The users of the application consist of users from India. It will lay stress on each

page’s layout and the features to be depicted on that page.

HOME PAGE:

This is the first landing page. Any user can see the Public Book Reading Events without logging into the system by using the Past Events and Upcoming Events links. The past Events link redirects to the Past Public Events and the Upcoming Events link redirects to the Upcoming Public Events along with their details.

PAST EVENTS:

This page is landing by clicking on Past Events on the home page. Any user can land on this page without logging into the system. But one cannot add comments without logging into the system. Users can see the list of Past Public Events along with the details of each event. The working of Upcoming Events on the home page is the same.

A registered user or admin can log in using their credentials.
Depending on the type of user, s/he will have access to various functionalities of the application. In case the email id and password typed by the user do not match any record in the database, a login failure message will be displayed. If not registered already, a user can sign up by clicking on “Signup”.

USER SIGN UP

A user can register using their credentials. After successful registration user will be redirected to the login page. In case of failing the validation requirements of email id or password, a failure message will be displayed. If registered already, a user can log in by clicking on “Login”.

HOME PAGE AFTER LOGIN:

This is the landing page after the user logs in to the system. PAST EVENTS redirect to the page containing the list of past events which either the user invited, or was a public event. UPCOMING EVENTS redirects to the page containing the list of upcoming events to which either the user is invited, or it is a public event.

Navigation bar: Contains the button for CREATE EVENT, MY EVENTS, INVITATIONS, HELP, USER DETAIL and
LOGOUT functionalities.

Only user with Administrator rights has some additional button for some additional functionalities available in the navigation bar are ALL USERS and ALL EVENTS button.

CREATE EVENT:

Users can create a new event. The user just needs to enter some necessary details like Title, Date, Location, Time, Type of event, and some other optional details like Description, and Other Details. Users can invite guests to the event by entering their email ids separated by a comma. Users must provide the creator id for whom they are creating the event. If the user wants to create an event for himself/herself only, then he/she can check the creator id by clicking on DEAR – XXXXX. If the user is creating an event for someone else, then the admin will verify the details with whose creator id has been entered. If the BACK TO LIST button is clicked, the user will be redirected to the HOME PAGE.

MY EVENTS:

Users can see the complete list of events created using their own creator id. From here user can Edit/Delete his/her any upcoming event by clicking on the Edit/Delete button. Users can also create events by the button provided just under the tile MY EVENTS.

COMMENT. And can also see the comments posted by others in the COMMENTS section. The comments in the COMMENTS section are shown anonymously sorted by date and time.

EDIT EVENT:

Users can edit the details of any upcoming events from the list of events provided on the MY EVENTS page. Users can edit any of the details provided in create event form except the creator id. The layout of the page is exactly the same as CREATE EVENT page. Users can return to the MY EVENTS page using the BACK button.

INVITATIONS:

Users can see the complete list of events to he/she is invited. The list of events being shown is sorted by the date and time of the event. As this page proved to be much helpful to users in order to plan their future activities. By clicking on the DETAILS button, the user will be redirected to the EVENT DETAILS page. On the EVENT DETAILS page, users will find some additional information regarding the events such as the type of event(public/private), the number of invitees invited, and the creator of the event.

EVENT DETAILS:

Users can see all the available information regarding the event he/she invited to by clicking on the Details button available on the INVITATIONS page. Here one can find some additional information such as the type of event(public/private), the number of invitees invited, and the creator of the event. Users can also add comments for this particular event by clicking on ADD

USER DETAILS:

Users can check his/her own details by clicking on the DEAR – XXXXX button. One needs to check their user id for creating their event, so here they can find it out. Here the button name is extracted from the email id by which the user has login into the system. As it is clearly visible from the image, if someone logged into the system with [email protected] then the name before @ is shown after the Dear – button like “Dear – XXXX”. The name visible in the button is the extracted from user’s email id leaving the part from @ symbol.

ALL USERS – ADMIN ONLY:

Only users with administrator rights can access this page. This page can be accessed by clicking on the button ALL USERS available in the navigation bar. On this page, the admin user can see the whole list of users who may or may not be an admin. Admin can see each user’s name, id, and email id.

ALL EVENTS – ADMIN ONLY:

Only users with administrator rights can access this page. This page can be accessed by clicking on the button ALL EVENTS available in the navigation bar. On this page, the admin user can see the complete list of events. The list contains both public as well private events. The list contains both past and upcoming events. The events in the list are sorted by date and time. Admin can use create event functionality here also by clicking on CREATE NEW EVENT button.

Admin can see details like Title, Date, Location, Start Time, Type of Event, Duration, Description, Other Details, No. of Invitees invited, and Creator id of all the events. For some specific requirements, the admin can see the details for a particular event by clicking on the DETAILS button available in that event’s particular row which will be redirected to the EVENT DETAILS PAGE as shown before. Admin can not only edit the events created by him/her but also edit events created by other users/admins. Admin can edit any upcoming event by clicking on the EDIT button for that particular event which will redirect to the EDIT EVENT page. Admin can also edit the creator id for the event.

After being done with the usage of the portal, the user/admin can log out from the system by clicking on the LOGOUT button available in the navigation bar. After clicking on the LOGOUT button, the user will be redirected to the HOME PAGE. Users can again use the system any number of times by logging into the system using the same credentials used for the first time.

CONCLUSION

This Book Reading Event system is a user-friendly software that can be used in any locality for any user to arrange the event and to send an invite to guests just by entering their email ids. Due to some problem, if someone might not be able to create an event and send an invite or somebody might not have email ids available for all the guests, in this case, the book reading event app provides functionality to a user to create an event on behalf of someone else and it will be verified by an admin before sending an invitation to the guests and posting that event on the portal.

Allowing all the users to have access to such web-based application software can help anyone who wants to keep an event busy with the preparation of the event can easily send invitations to the guests and save his/her time. Further, this software can be developed to add more functionalities in the future, like setting a reminder for the events and notifying the user time by time, and setting a flag for the events one is interested in. This project can be further extended to keep any event (i.e., House-Party, Get to Gather) and not just only for book reading. The sheer possibility of scaling this application is immense and will definitely go to be proven the most useful software in the future times.

Posted on

Full Stack Project on Restaurant Selection based on Reviews and Ratings

This Website ultimately relies on its users to post reviews, which can be rather subjective and not entirely accurate. Moreover, negative and inflammatory reviews tend to attract significantly more attention than positive reviews. For example, if a restaurant gets 10 positive reviews and just 1 negative review, most people will often scroll down to the negative review and read what it says. This means that even a single bad review can put a business in a bad light. This can pollute their online presence and potentially cause some loss in revenue.

Brief about the Project:

So, the project is titled Review-based Restaurant Selection, where this website will deal with the top-rated and best-reviewed Restaurants present in Mathura.

So, with the help of this website, potential customers weed out their choices of restaurants in Mathura.

Objective

“Review based Restaurant Selection” is the way of giving/providing information related to the best-rated Restaurant in Mathura, because Online review sites have transformed the way we do business and the way your customers make decisions.

 Modules used in the project: 

Detailed Description of Pages

Home Page The home screen consists of a screen where one can browse through the page for getting information about the usefulness of the web page

Home Page

Top 6 Restaurant Page: The screen consists of a screen where one can browse through the top 6 best-Rated Restaurants present in Mathura.

Write Your Review: The user can also Write a Review of any stuff for any Restaurant Present in Mathura Because public opinion matters

Products Page

Review of the Day: – Here on the Screen some Review Added by the user will be shown.

Review of the Day Page

Requirement-: 

Hardware:

  • Personal computer (any configuration)

Software:

  • Brackets source code editor

Technologies used:

  • Full Stack Technology –
  • HTML
  • CSS
  • Bootstrap

Web Page Details

  1. Home Page
  2. About Us
  3. Top 6 Restaurants present in Mathura
  4. Write a Review
  5. People Reviewed

Future Aspects

  1. We can add a query box
  2. We can add the review of the newly opened Restaurant

We can add an SMS tool so that information about the Restaurant can be provided using SMS.

Posted on

Online Cafe and Salon Management System Angular Project

During the Internship, Students worked on various static websites which include websites of café and event management companies. My internship also includes work on the Angular project Salon management system. This management system includes my main contributions in the registration portal, login portal, password changing portal, membership and offer cards, and other registration and contacts forms. This summer internship provided me with team experience and helped me in developing my skills in Web development using HTML, CSS, and JavaScript. Students have worked with the development of the front end and design of a Company’s Website and Dashboard.

Overall, the Internship program helped me in different ways to grow my knowledge in my field and also gave me insight into how to work in a team with proper coordination and in a timely manner.

ACKNOWLEDGEMENT

Working on these Cafe and Salon Management System projects has given us a wide opportunity to think, implement and interact with various aspects of computer technologies as well as learn new skills. One of the most fruitful benefits of working on this project is that we got a proper experience of working as a team, working on our assigned tasks, supervising and correlating with others, and management of the entire team with their tasks and completing the whole project.

I would also like to express our sincere thanks to our HOD and Course Directors, because of them we got the opportunity of having this group project as a subject in our current semester, and as a result, provided us the seed of execution of such a wonderful idea into action.

Overview of Projects

  • The Salon is a salon management system that has functions like admin management, customer tracking, and product shopping from the web.
  • The Café is a static site that has been designed for the users to get acknowledgment about the café. It has functionalities like booking tables, ordering online food, and menu details.

Objective

  • The objective of the salon management system: The Salon is to keep track of its daily expenses, customer, manage staff, and Publicity of its salon.
  • Static website Cafe management system which is designed also has the main objective of reaching more and more people through the help of the internet and making their marketing more strategic in the market.

Tools and Technologies

When the idea of making a web-based application came to our mind, the first thing that was required to be done was to gather information about the things that were required to be learned by us in order to make this project come to life. Hence after some brainstorming and group discussions, we followed the following figure and according to that learned the things in order.

After conducting this brainstorming and learning the process the tools and technologies that we had to use were as follows:

For Salon:

  • Angular
  • NodeJS
  • Stackoverflow (to learn about our software requirements)
  • GitHub (to learn about our topic)

For Static Website (The Cafe): 

  • Html
  • CSS
  • JavaScript
  • Bootstrap

IDE’s:

  • Visual Studio Code

Roles and Responsibility

  • Contributed to the making of a few modules for the Salon which includes modules like registering customers, forgetting passwords, and reset
  • Also contributed to live project

Implementation Environment:

 The backbone and the main aspect of the software side of the project were to run the HTML code, perform the JavaScript and make the site more user-friendly by adding CSS. So the implementation was carried out in such a way that the correlation of different files would be done easily. Hence, the use of an IDE was a must. Initially, we thought of using IntelliJ IDEA but the idea was dropped later on and we began working with the visual studio code 2020.

Sometimes to organize we even had to use some text editors like sublime text, atom, etc. Implementation of the code was done altogether after we researched and sorted the image data that we obtained. The basic approach that we used was the partial compilation method and went on integrating the small amount of the code into larger ones, module by module.

CONCLUSION

 In the end, we would just like to briefly explain how this project helped us to excel at our own best level and made us learn a lot of new things, technologies, and team management. And also implement all of the skills that we previously acquired or learned later on as a part of the completion of the project. Moreover, this project helped us to learn about the real scenarios of working in a team for real tasks and to cope with deadlines, quality management, and each and every aspect of the project. This project gave us the motivation to think differently and express our own ideas to implement them. Also, it taught us how to deal with errors, quality-related, time-related, and other management-related problems.

Most importantly with the medium of this project, we learned Many new skills, ranging from soft skills to technical skills. Qualities related to management, problem-saving time saving, etc. were also learned by us. We tried to make an honest solution for people out there facing problems and learned how all the skills combined: with the help of a perfect team and proper management along with proper skills is the key to providing the solution to any possible problems out there. And we believe that we did a great job implementing all our knowledge, and are grateful to present this execution of one such idea.

Thanking all those who helped us in a big or a small way with this project. Every contribution that has been given is very valuable to us and is the true reason for this project to stand out as a pioneer-based preliminary project and success of this project. With that being notified we heartily present our project and welcome all suggestions or improvements with open hands.

Posted on

Online Banking Website Project using HTML, CSS, and JavaScript

In this academic project, we are going to create an Online Banking Website using basic HTML, CSS, and JavaScript. We have planned and going to create as per the design given by the instructor. Which include:-

  • A home page that will provide all the necessary views. And it includes the link to the various linked pages (login/signup page, services, fixed deposit, e-services, account details, about us).
  • The top bars include the link to every single linked page.
  • We are going to provide services like Personal internet banking, Corporate banking, Merchant business, and Online tax.
  • Payment transfer: – International transfer, National transfer, Bill payment.
  • My Account page contains: – Account No. , Bank / Branch. IFSC Code.
  • ABOUT US page which shows the details of our contacts and our headquarters.2 Online Banking Websites

Concept:-

  • We have used the concept of HTML Programming like o Hyperlink projection.
  • Use of different tags to make it visually better like font, table, listing, hyperlink, styling, etc.

Use of:-

  • Combo Box
  • Search Box
  • Button
  • Text Field
  • Label
  • Fieldset
  • Legend

This project is basically an online banking website where one can create his/hers bank account, and use the same account for various banking services.
All designing and programming are done by us only.
All the members have their role in creating this website.

PROJECT DESCRIPTION

Project Name: Online Banking Website

Languages Used: HTML, CSS, JavaScript

Software Used: Visual Studio Code

Browser Used:  Google Chrome

Description:

This project is not a pure website that works on the internet. This project is just a template of a bank website, which can be used with the backend to create a perfectly working website. This website is work fine with JavaScript, CSS (Cascading Style Sheet), and HTML (Hyper Text Markup Language), with some simple concepts to make it a Responsive Web Page.

PROJECT CONTENT

This website is consist of various HTML pages, which are linked to each other with links (either by link or anchor tag).

Following are the HTML file names involved in the project:

  1. html (Home Page)
  2. html (Login Page)
  3. html (Sign Up Page)
  4. html (Personal Internet Banking)
  5. html (Corporate Banking)
  6. html (Merchant Business)
  7. html (Online Tax)
  8. html ( International Money Transfer
  9. html (National Money Transfer)
  10. html (Bill Payment)
  11. html (Fixed Deposit)
  12. html (E-Services)
  13. html (My Account)
  14. html (About Us)

Following are the CSS files name involved in this project: (Here, we used a simple convention in the naming of the files: “<html_file_name>CSS.css”

  1. css (Home Page)
  2. css (Login Page)
  3. css (Sign Up Page)
  4. css (Personal Internet Banking)
  5. css (Corporate Banking)
  6. css (Merchant Business)
  7. css (Online Tax)
  8. css ( International Money Transfer
  9. css (National Money Transfer)
  10. css (Bill Payment)
  11. css (About Us)
  12. css (My Account)
  13. css (Fixed Deposit)
  14. css (E-Services)

Following are the JavaScript file names involved in this project:

  1. js (Login Page)
  2. js (Sign Up Page)
  3. js (Personal Internet Banking)
  4. js (Fixed Deposit)
  5. js (Bill Payment)

CONCEPTS USED

As above mentioned, this template website is made up of HTML, CSS, and JavaScript.

The concept used in HTML:

  1. Using the link to add an external CSS file to it.
  2. Using the “src” attribute with the “script” tag we link external JavaScript.
  3. Using the “div” tag to separate various parts of the webpage to give functionality and style separately.
  4. Using “h1” tags to give a heading.
  5. Using “img” tag to give images on the webpage.
  6. Using anchor (“a”) tags to link multiple HTML files to each other.
  7. Using “id” and “class” attributes with different tags to give them style and functionality accordingly.
  8. Using the “form” tag to use the form for the login and sign-up page.
  9. Using the “method” attribute’s value as “POST” to give the form data securely.
  10. Using “input” tags to make an input field for the users. (With its different types.)
  11. Using “onload”, “onclick”, “onblur”, “onchange” with its value to call the functions which are in the respective JavaScript files on loading the webpage, on clicking a button, on losing focus, and changing the state respectively.
  12. Using “label” tags to create labels for the input fields.
  13. Using “select” tags to create a drop-down menu or combo box in the form.
  14. Using “option” tags inside the “select” tag to give options in the drop-down menu.
  15. Using “button” tags to create a button for submitting and resetting the form.

The concept used in CSS:

  1. Using “#” and “.” to access elements with their id and class values respectively.
  2. Using some pseudo-classes to make a somewhat interactive web page. (Without using JS.)
  3. Using media queries to make the page responsive for some specific display ratios.
  4. Using “@import” for importing another CSS file to a specific file.

The concept used in JavaScript:

(In this project, JavaScript is used mainly for form validation and for interactive buttons.)

  1. Using Regular Expression (RegEx) for creating a pattern for email and password validations as they have a specific pattern in them.
  2. Using “window.location.replace()” to go to a specific location on calling it.
  3. And using other pre-defined functions to create our user-defined functions.

CONTRIBUTION BY TEAM MEMBERS:

  • The idea of the project and its structure of it.
  • Creating all JavaScript files, to make our web pages interactive.
  • Final touch-up to the project.
  • Creating all CSS files, to make our web pages beautiful.
  • Creating all HTML files, to add content into it.

PROJECT IMPLEMENTATION:

Here are some images of our project.

  • home.html
  • acc.html
  • login.html
  • signUp.html
  • billPay.html 

CONCLUSION

This online banking website project is completed in two scripting languages i.e. HTML and CSS, and JavaScript.

There is a total of 14 .html pages which are linked together to create a full website template for online banking.

In this project, all three developers work equally, with the same amount of effort.

REFERENCES

1. w3school.org
2. geeksofgeeks.com
3. developer.mozilla.com

Download the complete project on code, report of Online Banking Website Project using HTML, CSS, and JavaScript

Posted on

Library Management System Using PHP, JavaScript, HTML, CSS and MySQL

Introduction

The Library Management System is an application to manage various tasks such as check out and check in of books, adding the borrowers, and fine management of the books.

Functions:

1. Search Books based on keywords.
2. Select the book and checkout if available.
3. Check in the book.
4. Pay fines for books checked in after the due date.
5. Add borrowers.

Architecture

To implement the system, various schemas were built which are described below:

1. Book
The book table contains the ISBN, title, and availability of the book. Here, ISBN acts as the primary key of the table.
2. Book Authors
The Book_Authors table contains the Author_id and ISBN number of the book written by the author. Here, Author_id and ISBN act as the primary key.
3. Authors
The Authors table contains the Author_id and name of the author. Here, Author_id is the primary key.
4. Borrower
The Borrower table contains the card_id, SSN, Name, Address, and phone number of the Borrower. Here, card_id is the primary key.
5. Book Loans
The Book_Loans table contains the Loan_id, ISBN, Card_Id, Date_out, Due_date, and Date_in of the book loans. Here, Loan_id is the primary key.
6. Fines
The Fines table contains the Loan_id and Fine_Amount of the book loans. Here, Loan_id is the primary key.

The application is built on MVC (Model View Control) Architecture.

Libraries and Software Used

Software Used: Wamp(Apache, MySQL, PHP)
Database: MySQL
Language: PHP, JavaScript, HTML, CSS, SQL
Libraries: Bootstrap

User Manual

There are 4 navigation links on the index/home page. The following are the functionalities of each tab:

1. Search Books

The user can search books from the database by typing the keywords into the search box provided and clicking the search button. If the keyword matches the records in the database, the result is displayed in tabular format. On clicking the row of the table, the user can proceed to checkout if the book is available by providing the card id.

2. Check in Books

First, the user needs to search for the record by providing the keyword in the search box and clicking the search button. After the results are fetched, on selecting the required row, the user can check in the book.

3. Pay Fines

On clicking the refresh button, the user can see the total summed fines of the borrower based on their card id. On clicking the required row, the user can pay the fines.

4. Add Borrower

By filling out the form and clicking on submit button, the user can add a borrower to the database.

Download Library Management System Project Using PHP, JavaScript, HTML, CSS, and MySQL.

Posted on

Order Management System for Steel Fabrication Factory Java Project

The web-based “Steel fabrication Order management system” project is an attempt to simulate the basic concepts of order management systems. The system enables the customer to do the things such as view all available products, and products by category-wise distribution. The user can place the order, the delivery agent will get the order details and it will be delivered to the customer at their residence. Users can request customized products with their own requirements and budget.

The Order Management System provides a facility that enables users to view details about products without logging in. But if the user wants to place the order, then it is required to log in first. Users can view all available products with detailed descriptions, reviews, and ratings. Users can choose a particular product. The system checks for the availability of the quantity of the product. If the product is available then the system allows the customer to select the product and place an order. To order a product the system asks the customer to enter his details such as first name, last name, city, street, landmark, state, pin, phone number, etc.

Scope 

  1. Order Management System for Steel Fabrication Factory is a web-based application that allows the admin to handle all the activities online quickly.
  2. So, the aim of the project is to provide products to customers. The customer can choose the products from the category and place the order. Users can request customized products to their own requirements and budget. Staff then can contact the user with the details provided by the user at the login time
  3. Staff will arrange the products as per the order and make them available for collection.
  4. Once the order is ready, the delivery agent will collect the products and they will be delivered to the customer at their residence

SYSTEM ANALYSIS AND DESIGN

System analysis is the performance management and documentation of activities late to the life cycle phase of any software namely:

  1. The Study Phase
  1. The Design Phase
  1. The Development Phase
  1. The Implementation Phase
  1. The Testing Phase

Software analysis starts with preliminary analysis and later switches to a detailed one. During the preliminary analysis, the Analyst took a quick look at what is needed and whether the cost benefits. Detailed analysis studies in depth all the cornered factor, which build and strengthens the software.

ER Diagram:

PROJECT FEATURES

Admin module

Admin is the main role in the overall system. Admin can log in into the system using credential where admin credential was already stored in the database.

After successful login into the admin dashboard, there are various operations that the admin can do mentioned below –

  1. View customer: Admin is able to view the list of customers who are already registered into the system. Customer data is stored in a database so the admin can fetch those data to view the list of customers
  2. Add remove staff: Admin can add staff by giving a particular role also admin is able to delete it from the system
  3. View feedback: Admin can view feedback which is given by customers on products after purchasing

Manager module

Like the admin, the manager can log in to the system with the credentials stored in the database. The manager carries out the most of operations on the owner’s side. The manager can perform the following functionalities mentioned below:

  • Manage products: The manager can add products into the system with all the necessary details. As the products are managed category-wise, the manager can add distinct categories first and then products under that specific category. Managers can also update products by changing the price of products or the available quantity of product
  • Manage delivery: The manager is able to see all the orders. After placing an order by the user, the manager assigns that order to the particular delivery That order is visible to that delivery agent’s dashboard with details.
  • View feedback: The manager can view feedback and ratings given by customers on products after purchasing. The manager can review and analyze the feedback
  • View order customization: The manager can review the customized orders that users have requested, and contact that specific user from the contact details given at the login time

User module

User can login into the system, or even without login users can see product lists, detailed descriptions of products, reviews, and ratings of products. Even without a login user can check all available products. But to place an order user needs to log in first to the system.

Registration and creation of user profile

The system shall require a user to register, in order to carry out the process to place an order. For registration it will ask the user for the following information first name, last name, city, street, landmark, state, pin, phone number, email, and password. The system will automatically generate the user’s profile.

Making Order

After registration user’s credential is saved in databases and using the credential user can log in to the system. For place an order user must do login first otherwise the system will not allow the user to place an order.

After login into the system successfully now the user is able to place an order. The first user needs to search for the available product or the user can search for a product by category, one more option is available the user can select a product and customize it according to their need.

If a user wants to place an order of multiple products, then the first user selects one item and moves it to the cart using the ‘add to cart button, after adding it to the cart now user can go for another product and the user can add multiple products to add.

After adding products to the cart, the cart dashboard will show all the products, product quantity, and total price. Now users can place orders by selecting a payment method.

View Order History: The system shall allow a user to view all information about his previous orders. In history, the system shows the previous product, delivery status, etc.

Delivery Agent

Account Delivery agent is another important role in this system. The main role of the delivery agent is to deliver the product to the mentioned address and update the status of delivery. The delivery agent has functionalities mentioned below:

  1. Receive order: The delivery agent received the order and does a job of delivering the product on time
  2. Track order: The tracking status of the product during delivery is updated by the delivery agent. Tracking status like ‘product arrives, ‘on the way, ‘delivered’, etc. Users get to see this status on his/her side
  3. Verify payment: The delivery agent needs to verify the payment details like whether payment is already done or needs to be collected at the time of delivery
  4. Update order status: After delivering the order successfully, the delivery agent needs to update the status as ‘delivered’.

Software Required for Development

Module 1: Database Design – MySQL-for database

Module 2: Front End – HTML, CSS, JavaScript, React js.

Module 3: Back End – Eclipse IDE(Any IDE), Spring tool suite, Tomcat

Download The Complete Project code, report, and PPT of the Order Management System for Steel Fabrication Factory Java & MySQL Project.

Posted on

Online Learning Management System PHP Project

Objectives of the Project:-

The general objective of this Online Learning Management System project is to provide various courses to students as well as others who are interested in learning online. The use of the internet has increased and so the courses are available to be learned online. By providing this option, it would be easy for the users to learn by sitting in a comfortable place and learning based on the time they have.

The courses will be added, deleted, etc. by the admin. This project consists of the front end and back end sides. The front end side of the website is developed for the general public who are interested to know about us and to find out the courses provided by the management system. The back end is for the users who have created their accounts and admin utilities.

Scope of the Project:-

For this project, to store all the data various tables and attributes are required. As the main idea of this project is to provide courses for the students to enroll in and learn, it will also allow the instructors to teach courses. Thus the scope of this project is limited to the following tables: COURSES, USER DETAILS, STUDENTXREF, and INSTRUCTORXREF.

User requirements:-

Following would be the basic user requirements-

  1. Users should be able to view the Home page, About Us, and login/Register page of the website.
  2. Users should be able to search for the courses in which they are interested.
  3. Users will be asked to enter the user type as Student, or Instructor while creating the account.
  4. Users who have been marked as Students will be allowed to enroll in the available courses and will be displayed the courses in which they are already enrolled.
  5. Users marked as Instructors will be able to teach the course which is not taught by anyone else. They will be able to see the courses which are taught.
  6. Admin type of user will be able to add or delete courses as well as delete instructors from the courses.

*Note – User can be general public without creating an account, student, instructor, and admin.

Business Rules:-

Below are some basic business rules-

  1. One student can enroll in many courses.
  2. Every single course can be taken by many students.
  3. One instructor can teach many courses.
  4. One course will be taught by only one instructor.
  5. Users can be students or instructors based on the details entered while creating an account.

Entities and their attributes:

In this proposal, there are basically 4 entities. The description for each is given below-

USERDETAILS Entity –.When a student or instructor wants to enroll/teach for any course, first of all, they will have to create an account on the website by using the login page. All the details entered while creating an account will be stored in this table. This table will consist of the attributes as User id, user last name, user first name, user type (it can be student or instructor), and password. The primary key of this table will be the user id. Once the user has created an account, they will be able to know about the courses.

COURSE Entity – The course table will store all the details related to the courses which are offered. This table will have the following attributes Course id, Course name, course department, course description, course start date, and course end date. Course id will be the primary key for this table. Based on the above attributes, students can decide which course they are interested in. The instructors will also be able to know about the courses which are already taught by some other instructors and the courses available for them to teach.

STUDENTXREF Entity- This table will act as a reference table between the COURSE and USER DETAILS tables. The attributes of this table are student id, course id, and user id. The primary key of this table will be the student id.

INSTRUCTORXREF entity – This table is also a reference table between COURSE and USER DETAILS tables. If the user type is instructor then the details for that user id will be stored in this table. The attributes of this table are instructor id, user id, and course id. Instructor id will be the primary key for this table. Here the course id will be unique as 1 course cannot be taught by multiple instructors.

Entity-Relationship Diagram:-

Fig 1: Entity relationship diagram for Online Learning Management System.

Website Description:-

The online learning management system is a system that provides students to learn about various courses online. Various pages have been created for the users like Home Page, About Us page, Login/Register Page, and Search courses page.

The sitemap for the online Learning management system is as:

The project consists of the Front end and back end. The front-end pages are described below:

Home Page:

This page is the main page of the project. This page gives a brief description of the management system and also posts the latest courses which are going to be added in the future. This page will be linked to all other pages. Whenever the user is interested in learning any course, then they need to create an account by clicking on the Login/Register button provided on the navigation bar.

Login/Register Page:

The login page lets the user enter their username and password to login to their account. There are three different links for students, instructors and admin in the login/register page. Students can click on the enroll/register for courses link in order to login into the account. Students who are already registered can put in their username and password to login to the account. In the case of new users, they can register for a new account by clicking Join us button. In order to sign up for an account a user needs to enter an email address, preferred username and password, and date of birth. The user has to make a selection of the account type either teacher or student from a drop-down menu. Then they can simply login into their account. 

The login page lets the user enter their username and password to login to their account. There are three different links for students, instructors and admin in the login/register page. Students can click on enroll/register for courses link in order to login into the account.

Students who are already registered can put their username and password to login to the account. In case of new users, they can register for a new account by clicking Join us button. In order to sign up for an account a user needs to enter an email address, preferred username and password and date of birth. The user has to make a selection of the account type either teacher or student from a drop down menu. Then they can simply login into their account. 

About Us Page:

This page describes the goal of developing this project. This will make clear to the users what the purpose of developing this website is and how they can use it. Contact information is also provided for the users so that if they have any doubts, they can send an email with the query. 

1.6.4 Search course Page:

When a user is interested in learning any course, before creating an account he can check whether the course in which he is interested is provided by the management system or not. This search option will help them to know about the courses and then they can decide whether to enroll in those courses or not. While using the search option, users are not required to create an account.

The back end part will come into the picture when the user has created an account. Users can be students or instructors. While creating an account, the user will be asked to select the User type from the drop-down option. The pages at the backend side are described below:

Student Page:

This page (student.php) will be displayed to the user whose user type is Student. It will display the courses which are available for a particular student to enroll. He can select multiple courses for enrolling. Checkboxes are provided in front of all courses and then finally enroll button is provided.

Once the student selects any course and clicks on Enroll button, he will be shown a thank you message for enrolling in those courses. Student.php will call enroll.php when an enroll button is clicked by the student. The back button is provided on enroll.php which will re-direct the student to student.php. The student will also be displayed the courses in which he has already enrolled on student.php. 

Instructor Page:

When a user selects the user type as an instructor, he will be directed to instructor.php page. On this page, he will be displayed with the courses which he is already teaching. The instructor will be able to teach courses that are not being taught by any other instructor. A checkbox option will be provided to the instructor to select courses and then he can click on each button. This button will direct the instructor to teach.php page where he will be displayed a thank you message.

Admin Page:

Admin page is designed for the administrator to add and delete courses in the system. In order to login as an admin the user needs to select the admin-Add/Delete courses link from the Login/Register page. Two options appears in the admin page 1.Add a course and 2.Remove a course. Add a course lets the admin add new courses in the system.

The details the admin needs to provide in order to add a course are course name, course department, course description, course start date, and course end date. The admin can simply press the Add Class button. A success message appears on the page after the submission of the details. In order to remove a class the admin can make a selection from the drop-down menu and press the Delete Class button. The success message appears afterward.

Functions provided by the website are:

  1. The following are the functions provided by the online learning management system:
  2. Browse the homepage, and about us page.
  3. Search courses without creating an account.
  4. Interested users can create an account.
  5. Students can enroll in courses.
  6. The instructor can teach courses that are not being taught by any other instructor.
  7. Admin can add/delete courses.

Usability considerations:

The online management learning system website has logical navigation. Users can easily navigate around the webpage. The home page gives the users information about the whole system. All the contents are written in simple language. It has a user-friendly interface and functions well with no broken links. All the links and sub-links are clearly represented. The procedures to log in to the account, register for courses, and add or remove the courses from the system are very clear.

The system lets the users know if their attempts of adding courses or removing courses were successful. When the users put wrong credentials while logging in, it lets users know their attempt has failed because of the wrong username or password. So, that user can put the correct information and log in to the account. The website has all the required functions based on user types. That makes the website informative and user-centered. 

FUTURE ENHANCEMENTS:

  1. Based on the entries in the database, graphs can be created to provide information about the number of students in each course.
  2. A class entity can be added to provide more information about courses like classrooms, class timings, etc.
  3. Change the template to make it more attractive and user-friendly.
  4. Passwords can be stored in an encrypted way to avoid giving away personal information.
Posted on

Employee Task Management System Web Project using PHP and MYSQL

Problem Description

We need to make a system in which mentors can assign tasks to the employee and other mentors can monitor the availability of employees and on that basis, they can assign him/her new task. As well as employees can see all the assigned tasks with priorities. The app should be able to: Store data on new Employees/Trainees and new Task Assignments Employees can see the availability of other employees, trainees, and interns but trainees will not be able to see other availability. Employees can assign tasks with details like task name, task description, assigner, priority, and expected hours for completion to other employees’ or trainees’ ToDo lists considering the maximum limit of a total of eight hours for an employee before assigning any task.

Target Audience

This is a very common problem in companies where an employee already working on an assigned task and another mentor or boss going to assign him a new task, S/He might not know the employee’s availability and the priority of the task on which the employee already working. In that scenario, there will be lots of communication going around to assign the task, due to which task going to be delayed. To resolve these issues and make employee availability transparent, we need to make a system in which mentors can assign tasks to the employee and other mentors can monitor the availability of employees and on that basis, they can assign him/her new task.

As part of the curriculum of B.tech and to gain practical knowledge in the field and Python programming and web development we have made this project. We have boosted our skills through it.

In this Project, we have worked on VS Code and GitHub. Git Bash, Mysql, Software xamp, CSS, and HTML.

Employee Task Management System is created in PHP and MYSQL. It deals with the rundown of workers in an organization or an association. It likewise contains the training went by every Employee. Representative is the foundation of an organization so the Employee Management System is an extremely useful framework for an association or organization.

It also contains training attended by each employee. The employee is the backbone of a company so the Employee Management System is a very helpful system for an organization or company. This system also manages the company employee details like their attendance, their performance, salary details, and leave details.

This section compresses the assessment of the writing important to the Employee Management System. It looks at hypotheses, ideas, methodologies, strategies, and systems important to the venture.
Comparative existing advances identifying with the improvement of the Employee Management Systems are talked about.

In this Project, we have worked on VS Code and GitHub. Git Bash, Mysql, Software xampp, CSS, and HTML. Employee Management System is created in PHP and MYSQL. It deals with the rundown of workers in an organization or an association. It likewise contains the training went by every Employee.

Representative is the foundation of an organization so the Employee Management System is an extremely useful framework for an association or organization. It also contains training attended by each employee. The employee is the backbone of a company so the Employee Management System is a very helpful system for an organization or company. This system also manages the company employee details like their attendance, their performance, salary details, and leave details.

Design Diagrams:

Use Case Diagram:

Data Flow Diagram:

ER Diagram: Sequence Diagram:

Activity Diagram:

Functional Requirements

REQ-1: Authentication 

  1. Login- The user can log in to the system with his/her username and
  2. Logout- The user can log out from the
  3. Login failure- If the user does not exist in the database or the user has not yet been authorized by the

REQ-2:Authorization 

  1. User role check- After logging in, the user role will be checked from the database and the user interface will be displayed according to their role.

REQ-3: Employee Management 

  1. Display- Users with defined roles can display the content of the database. To be more specific, an employee can only view his/her personal Boss and can not only see his/her personal information but also employee’s information who are under his/her department or school.
  2. Edit- A user with an employee role can edit his/her specific personal

information. Boss can only edit employees’ personal information that is under his/her coverage except for user role type. The Boss can check employee availability.

REQ-4:Trainee Management 

  1. Training – The Boss and employee shall create training tasks and assign them to other Bosses and employees and employees and trainees respectively that are required to attend the training as well. Boss and Employee can also check the availability of the trainee.

REQ-5: Task Management 

  1. Tasks – Boss and Employee can check assigned tasks, they can check task priority. they can also create the task and assign the task.

1. Sign Up
2. Login Up
3. View Employee Details
4. Create Task
5. Priority
6. Availability
7. Assign Task
8. Task Status
9. Task Done
10. Task Details
11. Personal Details
12. Submit Task

System Features

Module Description

Sign Up: Bosses, employees, and trainees will sign up using their credentials.

stimulus: boss/employee/trainee will sign up through the signup button.

response: dialogue box for “thank you for signing up” appears.

Log in: Boss, employee or trainee will log in to the system using their unique ID.

stimulus: boss/employee/trainee will log in through the login button.

response: for boss/employee/trainee different pages will appear respectively.

View employee details: contains employees’ details.

stimulus: click on the button to View employee details.

response: Details appear (only boss and employee can view details)

Create Task: boss can create tasks for employees or another boss. Employees can create tasks for trainees or other employees. trainee can not create tasks.

stimulus: click create task button.

response: the task will be created

Priority: Check the assigned task priority.(boss/employee/trainee)

stimulus: click on check assigned task priority.

response : shows priority(High,Medium,Low).

Availability: check availability of boss/employee/trainee for assigning the task.

stimulus: click on the check availability button.

response: shows availability.

Assign Task: After creating the task the creator will assign the task to the boss/employee/trainee.

stimulus: click on the button to assign a task.

response: Task will be assigned

Task Status: change the task status whether it is completed/submitted/in progress.

stimulus: click on the button to change task status.

response: changes will be done according to your status when you choose options from it.

The task is done: The feature indicates the task is done. Only bosses and employees can access this feature.

stimulus: click on the task done button.

response: status will be updated once the task is done.

Task Details: will get trainees through the details of the task assigned.

stimulus: click on the View Task Details button

response: details appeared

Personal Details: will display personal details of the trainee to her /him.

stimulus: click on the View personal details button.

response: personal view appears to him/her.

Submit Task: The feature is for trainees only, to submit the task.

stimulus: click on submit task button

response: the task will be submitted.

Future Scope

1) AI is applied in almost every industry and may become a standard in the near future. 

2) Data visualization represents the data in a visual and understandable manner: graphs, diagrams, maps, etc.

Conclusion

This is a customized task management tool that enables your enterprise to manage all tasks efficiently in this troubled time & even in the post-COVID age. Our robust task management app help organizations face challenges related to project management & gain a higher Return Of Investment over the period while meeting deadlines and utilizing resources effectively.

Download the Complete Employee Task Management System Project code, Report, PPt, and Design Documents

Posted on

LSTM based Automated Essay Scoring System Python Project using HTML, CSS, and Bootstrap

Introduction

Essays are a widely used tool to assess the capabilities of a candidate for a job or an educational institution. Writing an essay given a prompt requires comprehension of a given prompt, followed by analysis or argumentation of viewpoints expressed in the prompt, depending on the needs of the testing authority. They give a deep insight into the reasoning abilities and thought processes of the author, and hence are an integral part of standardized tests like the SAT, TOEFL, and GMAT.

With essays comes the need for personnel qualified enough to carry out the process of grading the essays appropriately and ranking them on the basis of various testing criteria. Our project aims to automate this process of grading the essays with the aid of Deep learning, in particular, using Long Short Term Memory networks which is a special kind of RNN.

Automated Essay Scoring (AES) allows the instructor to assign scores easily to the participants with a pre-trained deep learning model. This model is trained in such a way that the scores assigned are in agreement with the previous scoring patterns of the instructor. So this needs the dataset which contains the information of scores given by the instructor previously. AES uses Natural Language processing, a branch of artificial intelligence enabling the trained model to understand and interpret human language, to assess essays written in human language.

Problem Definition

Given the growing number of candidates applying for standardized tests every year, finding a proportionate number of personnel to grade the essay component of these tests is an arduous task. This personnel must be skilled and capable of analyzing essays, scoring them according to the requirements of the institution, and be able to discern between the good and the excellent.

In addition to this, there are a lot of time constraints in grading multiple essays. This can prove to be cumbersome for a limited number of human essay graders. Having to grade several essays within a deadline can compromise the quality of grading done. Thus, there is a clear need to automate this process so that the institution carrying out the grading can focus on evaluating other aspects of the candidate’s profile.

The challenge was to create a web application to take in the essay and predict a score. We need to train a neural network model to predict the score of the essay in accordance with the rater. The model is to be made using LSTM.

Approach

In order to meet the need for automation of essay grading, we propose an application that provides an interface for users to choose an essay prompt of their choice and provide a response for the same. The user’s response is graded by the application within seconds and a score is displayed.

This application makes use of the technologies of Natural Language Processing that performs operations on textual input, and LSTM, which is used to train a model on how to grade essays. The application also uses the Word2Vec embedding technique to convert the essay into a vector so that the model can be trained addresses the issue of time constraints; automated grading takes place within seconds as compared to physical grading which requires minutes per essay. The net amount of time saved over a period of consistently using the application is vast; costs of maintaining human graders are also saved.

The application gives an output from the pre-trained LSTM model. The model is trained using a dataset provided by Hewlett Foundation in 2012 for a competition on Kaggle.

Web Application (Output)

The front end of the application was implemented using HTML, CSS, and Bootstrap. It provides the option for users to choose from a set of prompts and write an essay accordingly or to grade their own custom essay.

The landing page of the application:

Automated Essay Scoring System

Software Specifications

This application is developed primarily using Python, for the purposes of running the app. The model was built and trained on Jupyter Notebook. The front end of the application was designed with HTML, CSS, and Bootstrap. All the components of this application were integrated with the help of the Flask App, and the final project was deployed on IBM Cloud.

While training the model, the dataset was imported into the model with the Pandas library. Pandas library used was v1.3.0. Numpy v1.19.2 was used to handle array data structure. Natural Language ToolKit v3.6.2 was used to tokenize essays to sentences written in English and also to remove stopwords to make sure the sentences contain only relevant words. RegEx(re) package v2.2.1 was used to remove unnecessary punctuations and symbols present in the essay or sentences. Our model utilizes the Word2Vec technique to convert words to corresponding vectors. Word2Vec v0.11.1 was used to convert words into vectors. Tensorflow v2.5.0 was used to build the model. ScikitLearn v0.24.2 was used for data preprocessing.

To make use of the application, the user needs to have access to a stable internet connection and an operating system compatible with the latest versions of most browsers. In the absence of an internet connection, the application can be run locally. Still, the user needs to have the authorization to access the source code of our project for the same, which is not recommended for intellectual property purposes.

Future Scope

This application could be integrated and used by several testing institutions to meet their needs for essay grading. The model used could be trained with an increasing number of input essays to further improve its accuracy. The model could also be trained on giving a score on specific criteria of essay grading such as relevancy, linguistic and reasoning ability of the author. Research could be conducted on making the model faster. This technology could also be extended for use with languages other than the English language, effectively rendering it useful on a worldwide level.

Posted on

Development of E-Commerce Store Portal using Bootstrap and ReactJS

The main aim of this project is to design, develop, and implement of E-Commerce Store Portal website based on HTML, CSS, Bootstrap, JavaScript, and ReactJS. To give a high openness of administration we will structure the online site that supports local businesses, with the goal that potential clients need not go to a physical shop to purchase items or administrations. The objective of this E-Commerce Store Portal project is to create an e-commerce web portal with a content management system that would allow product information to be updated securely using a system. The E-Commerce Store web portal will have an online interface in the form of an e-commerce website that will allow users to buy goods from the merchants. This web portal will allow local organizations and start-ups to start their businesses and reach out to the market.

INTRODUCTION

This Bootstrap and ReactJS web portal project is aimed at developing an online static website for an E-commerce store that can be used by people to list their business on the website and will also provide customers to buy the products directly from the store. The website is based on HTML, CSS, Bootstrap, JavaScript, and React. Customers can buy the products directly from the store. This will help local businesses to register their products on the website. It will eventually help local businesses to increase their profits and people to buy the goods from the comfort of their homes. Users can see the products from the website. Our website will contain a Homepage where all the basic information about the store and details of the products will be available. This site is easy to operate and user-friendly.

OBJECTIVE OF THE PROJECT

The web portal will have an online interface in the form of an E-commerce website that will allow users to buy goods from the merchants. This web portal will allow local organizations and start-ups to start their businesses and reach out to the market

MOTIVATION

Online shopping practices are increasing rapidly, thanks to digitalization. Online E-commerce store owners are always eager to know how to increase traffic on their E-commerce sites and how to increase their profits to earn more revenue.  Hence by this, bringing together the various local businesses to a single platform so that anyone can access them anywhere according to their need. So, with the increasing importance of online sales and the growing number of customers visiting online stores we are going to develop a website that helps to save the time of the users. This website encourages local businesses to create their online store and supports them to run their business to grow.

E-Commerce Store Portal

Benefits of the proposed work

• Saves time for customers in quickly view various items on the E-Commerce portal.
• The ability to view and purchase items anytime, from anywhere with Internet access.
• Provides information about resort facilities.
• User-friendly interface.
• No Convenience fees.
• Total features of E-Commerce Website are accessible.
• Easy to use and simple to understand.
• Quick and save lots of time.

Modules and their functionalities:

1. Dashboard: This is the home page of our website.
2. Hawkers: This consist of all the hawkers available online for selling their products.
3. Feedback: The feedback area consists of all the feedback given by buyers.
4. Vendors: This contains information about the vendors and their products.
5. Place Order: This is used for placing an order of the product of your choice.
6. About Us: This page consists information of about the team behind the idea of promoting local businesses.

Implementation and User Interface

This E-Commerce Store Portal project is implemented with the help of Visual Code.

The user interface design was one of the core tasks in this project. The aim of UI design is to make the E-commerce application to be accepted and used easily.

Software Requirements:

  • Macintosh /Microsoft Windows /Linux
  • Virtual Studio Code or any other text editor
  • Chrome or any other browser