1. INTRODUCTION TO HTML HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which definesthe structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g., HTML) languages are human readable. Language uses tags to define what manipulation has to be done on thetext. HTML is a markup language which is used by the browser to manipulate text, images and othercontent to display it in required format. HTML was created by Tim Berners-Lee in1991. The first everversion of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was publishedin 1999 HTML page structure The Basic structure of HTML page is given below. It contains some elements like head, title, body,etc. These elements are used to build the blocks of web pages. : This tag is used to tells the HTML version. This currently tells that the version is HTML 5. <html>: This is called HTML root element and used to wrap all the code. <head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the element is : <style> <title> <No script> <script> <meta> <title> <body>: Body tag is used to enclosed all the data which a web page has from texts to links. All ofthe content that you see rendered in the browser is contained within this element. Example: HTML page can be created using any text editor (notepad). Then save that file using .htmor .html extension and open that file in browser. It will get the HTML page response . 1 Features of HTML • It is easy to learn and easy to use. • It is platform independent. • Images, video and audio can be added to a web page. • Hypertext can be added to text. • It is a markup language. Why learns HTML? • It is a simple markup language, Its implementation is easy. • It is used to create a website. • Helps in developing fundamentals about web programming. • Boost professional career. Advantages • HTML is used to build a website. • It is supported by all browsers. • It can be integrated with other languages like CSS, JavaScript etc. Disadvantages • HTML can create only static webpages so for dynamic web page other languages have tobe used. • Large amount of code has to be written to create a simple web page. • Security feature is not good. Syntax <!DOCTYPE html> <html> <head> 2 <title></title> </head> <body> </body> </html> 3 2. INTRODUCTION TO CSS Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the colour of the text,the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colours are used, layout designs, variations in display for different devices andscreen sizes as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.HTML was originally designed as a simple way of presenting information, with the aesthetics Of a web page being far less important than the content (and largely being left up to the web browser).Of course, now that the web has become as popular as it has, the presentation of your content has become almost critical to a site’s success. CSS is the key presentational technology that is used to design websites. Benefits: • Pages download faster, sometimes by as much as 50%. • You have to type less code, and your pages are shorter and neater. • The look of your site is kept consistent throughout all the pages that work off thesame stylesheet. • Updating your design and general site maintenance are made much easier, and errors causedby editing multiple HTML pages occur far less often. Well-authored CSS also improves the accessibility of web content, allowing access through myriaddevices (handheld PDAs for example) and ensuring that web users with disabilities are still able to receive it. It also eliminates the need for browser-specific hacks and tags, and there are dozens of powerful extra formatting options and possibilities available through stylesheet commands that are not possible through normal html. You’ll see these later on when we get on things like backgrounds,spacing, layers and borders. 4 Types of CSS I. Inline CSS II. Internal CSS III. External CSS I. Inline CSS In Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever ourrequirements are very small, we can use inline CSS. It will affect only single elements. In HTML werequire that various HTML tag's views are different so then we use inline Cascading Style Sheets. There is a disadvantage of inline Cascading Style Sheets. It must be specified on everyHTML tag. There is a lot of time consumed by that and it is not the best practice for a good programmer and thecode will be quite large and very complex. II. Internal CSS In Internal CSS the style of CSS is specified in the section. This is internal CSS; it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag. III. External CSS In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally,external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a completebody of HTML that inherits the property of the CSS file. Implementation CSS files are termed “cascading” stylesheets because of two reasons: one stylesheet can cascade, orhave influence over, multiple pages. Similarly, many CSS files can define a single page. There are 3 ways to implement CSS commands into your site: • Use one CSS file for all your pages. This is the best way to do it. • Integrate CSS commands into the head of each of your documents. • Use the style attribute to put CSS code directly into a HTML element Advantages of CSS • CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. 5 • Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. • Superior styles to HTML − CSS have a much wider array of attributes than HTML, so you can givea far better look to your HTML page in comparison to HTML attributes. • Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So, its a good idea to start using CSS in all the HTML pages to make them compatible tofuture browsers. 6 3. INTRODUCTION TO JAVASCRIPT JavaScript is a lightweight, interpreted programming language. It is designed for creating network- centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform. Why to Learn JavaScript JavaScript Is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. • JavaScript is the most popular programming language in the world and that makes it a programmer’s great choice. Once you learnt JavaScript, it helps you developing great front-end as well as back-end software’s using different JavaScript based frameworks like jQuery, Node.JS etc. • JavaScript is everywhere, it comes installed on every modern web browser and so to learn JavaScript you really do not need any special environment setup. For example, Chrome, Mozilla Firefox, Safari and every browser you know as of today, supports JavaScript. • JavaScript helps you create really beautiful and crazy fast websites. You can develop your websitewith a console like look and feel and give your users the best Graphical User Experience. • JavaScript usage has now extended to mobile app development, desktop app development, and game development. This opens many opportunities for you as JavaScript Programmer. • Due to high demand, there is tons of job growth and high pay for those who know JavaScript. Youcan navigate over to different job sites to see what having JavaScript skills looks like in the job market. • Great thing about JavaScript is that you will find tons of frameworks and Libraries already developed which can be used directly in your software development to reduce your time to market. 7 There could be 1000s of good reasons to learn JavaScript Programming. But one thing for sure, to learn any programming language, not only JavaScript, you just need to code, and code and finally code until you become expert. There are many useful JavaScript frameworks and libraries available: • Angular • React • jQuery • Vue.js • Ext.js • Ember.js • Meteor • Mithril • Node.js • Polymer • Aurelia • Backbone.js It is really impossible to give a complete list of all the available JavaScript frameworks and libraries. The JavaScript world is just too large and too much new is happening. 8 Applications of JavaScript Programming JavaScript is one of the most widely used programming languages (Front-end as well as Backend). It has its presence in almost every area of software development. There are some applications of JavaScript. • Client-side validation - This is really important to verify any user input beforesubmitting it to the server and JavaScript plays an important role in validating those inputs at front-end itself. • Manipulating HTML Pages - JavaScript helps in manipulating HTML page onthe fly. This helps in adding and deleting any HTML tag very easily using JavaScript and modify your HTML to change its look and feel based on different devices and requirements. • User Notifications - You can use JavaScript to raise dynamic pop-ups on the webpages to give different types of notifications to your website visitors. • Back-end Data Loading - JavaScript provides Ajax library which helps in loading back-end data while you are doing some other processing. This really gives an amazing experience to your website visitors. • Presentations - JavaScript also provides the facility of creating presentations which gives website look and feel. JavaScript provides Reveal JS and Be spokeJS libraries to build a web-based slide presentation. • Server Applications - Node JS is built on Chrome's JavaScript runtime for building fast and scalable network applications. This is an event-based library which helps in developing very sophisticated server applications including Web Servers. This list goes on, there are various areas where millions of software developers are happily using JavaScript to develop great websites and others software’s. Syntax <script type=’’text/JavaScript’’ > 9 4. INTRODUCTION TO PHP The PHP Hypertext Pre-processor (PHP) is a programming language that allows web developers to create dynamic content that interacts with databases. PHP is basically used for developing web- based software applications. Why to Learn PHP? PHP started out as a small open-source project that evolved as more and more people found out howuseful it was. Rasmus Lead off unleashed the first version of PHP way back in 1994. PHP is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. • PHP is a recursive acronym for "PHP: Hypertext Preprocessor". • PHP is a server-side scripting language that is embedded in HTML. It is used to managedynamic content, databases, session tracking, even build entire ecommerce sites. • It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server. • PHP is pleasingly zippy in its execution, especially when compiled as an Apache moduleon the Unix side. The MySQL server, once started, executes even very complex querieswith huge result sets in record-setting time. • PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4added support for Java and distributed object architectures (COM and CORBA), makingn-tier development a possibility for the first time. • PHP is forgiving: PHP language tries to be as forgiving as possible. • PHP Syntax is C-Like. Common uses of PHP • PHP performs system functions, i.e., from files on a system it can create, open, read, write,and close them. • PHP can handle forms, i.e., gather data from files, save data to a file, through email you cansend data, return data to the user. • You add, delete, modify elements within your database through PHP. • Access cookies variables and set cookies. • Using PHP, you can restrict users to access some pages of your website. • It can encrypt data. 10 Characteristics of PHP Five important characteristics make PHP's practical nature possible − • Simplicity • Efficiency • Security • Flexibility • Familiarity Syntax <?PHP //PHP code goes here ?> Applications of PHP PHP is one of the most widely used language over the web. There are some applications of php. • PHP performs system functions, i.e., from files on a system it can create, open, read, write,and close them. • PHP can handle forms, i.e., gather data from files, save data to a file, through email you cansend data, return data to the user. • You add, delete, modify elements within your database through PHP. • Access cookies variables and set cookies. • Using PHP, you can restrict users to access some pages of your website. • It can encrypt data. 11 5. INTRODUCTION TO SQL SQL is a database computer language designed for the retrieval and management of data in a relational database. SQL stands for Structured Query Language. SQL is the language used to create, edit and manipulate a database. In other words, SQL is used tomanage data held within a relational database management system (RDBMS). Because this is a database design series, we will not be working with SQL directly, but will designour database to work with SQL in the future (once it is completely designed and ready to be programmed). SQL is the general language used to communicate with relational database management systems.This means that we use SQL to communicate to MySQL, Oracle, SQL Server, etc. So learning about SQL will help you with a lot of different things! A RDBMS takes SQL and uses it to do something with the database. Why to Learn SQL? SQL is Structured Query Language, which is a computer language for storing, manipulating and retrieving data stored in a relational database. SQL is the standard language for Relational DatabaseSystem. All the Relational Database Management Systems (RDMS) like MySQL, MS Access, Oracle, Sybase, Informix, Postgres and SQL Server use SQL as their standard database language. Also, they are using different dialects, such as − • MS SQL Server using T-SQL, • Oracle using PL/SQL, • MS Access version of SQL is called JET SQL (native format) etc. What Can SQL do? • SQL can execute queries against a database • SQL can retrieve data from a database 12 • SQL can insert records in a database • SQL can update records in a database • SQL can delete records from a database • SQL can create new databases 13 • SQL can create new tables in a database • SQL can create stored procedures in a database • SQL can create views in a database • SQL can set permissions on tables, procedures, and views Applications of SQL SQL is one of the most widely used query language over the databases. There is some applicationsof SQL. • Allows users to access data in the relational database management systems. • Allows users to describe the data. • Allows users to define the data in a database and manipulate that data. • Allows to embed within other languages using SQL modules, libraries & precompilers. • Allows users to create and drop databases and tables. • Allows users to create view, stored procedure, functions in a database. • Allows users to set permissions on tables, procedures and views. 14 6. INTRODUCTION TO PROJECT Order Food online system is a process in which one can order various foods and beverages from some local restaurant and hotels through the use of the internet, just by sitting at home or any place. And the order is delivered to the old location. Nowadays everyone is having a busy schedule whether it is urban areas or rural. But talking specifically about the urban areas and deeply about the big cities, people out there are so busy in their lifethat they don’t get enough time to have their meals properly. These days women are no less than men, in any field. So, in big cities even wives are working women, therefore mostly the small families manage to havetheir food ordered from somewhere, as they lack time. Not only this is the case, if we talk about the childrenin the modern era, they like only fast food or something from the outside. But they ignore eating homemademeals. So, the food ordering system these days has one of the fastest-growing markets, though being a newidea. In this project, we have developed something like the same to learn from and serve the nation in a much better way possible. Nowadays, people are more regular to dine-in at the restaurant for their meals. The online food ordering system provides convenience for the customers that are nothing special but the general busy people of the society. It overcomes the demerits of the manual hotel or mess system and the old-fashioned queuing system. This system enhances the ready-made foods that people. Therefore, this system enhances the speed of getting food on a person’s plate and the quality and manner of taking the order from the customer. It provides a better communication platform. The user’s details are stored using electronic media. The online food ordering system provides the menu online and the customers can easily place the order by just clicking the mouse or by touching a button on their smartphones. Also, with the food ordering system online, people can easily track their orders, and the 15 admin can maintain the customer’s database and advance the food delivery system. This food ordering system allowsthe user to select the desired food items from a list of available menu items provided by the local hotel orrestaurant. The user can place orders for the food items of their like from the list. The payment can be made online or pay-on-delivery system. The user’s details are maintained confidentially because it maintains a separate account for each user. An id and password are provided for each user. 16 7. SYSTEM ANALYSIS STUDY REPORT 1. Does your website have a user-friendly interface? Ans:- Yes. 2. Are online sessions options available for users? Ans:- No. 3. Does the user have the facility to get in touch with your authorities? Ans:- Yes. 4. Does your website consume lots of time? Ans:- N0. 17 8. SCOPE OF SYSTEM Food Ordering app can sale Food product, preferred brands, kitchen needs, essential restaurant supplies and more, through this online, one-stop Food store. It provides you with a convenient way to sale from your Food shopping app. You can use this app as one big super market app to sale product of your store. This app make easy for user to buy product from store with easy steps and store can get easyorder. Nowadays everyone is having a busy schedule whether it is urban areas or rural. But talking specifically about the urban areas and deeply about the big cities, people out there are so busy in their life that they don’t get enough time to have their meals properly. These days women are no less than men, in any field. So, in big cities even wives are working women, therefore mostly the small families manage to havetheir food ordered from somewhere, as they lack time. Not only this is the case, if we talk about the children in the modern era, they like only fast food or something from the outside. But they ignore eatinghomemade meals. • Our project aims to computerize each and every process of taking new update or information of the Food orders. • Save the user’s information. • Have a good interface. 18 9. HARDWARE AND SOFTWARE REQUIRMENT 9.1 Hardware Requirement • 1 Ghz processor. • 1GB RAM. • 128 GB Hard disk drive. • 14 0r 16-inch screen. 9.2 Software requirement • Visual studio code. • Chrome or Microsoft edge browser. • Google Chrome • Notepad++ • Microsoft SQL 19 10. DATA FLOW DIAGRAM The DFD is a simple graphical formalism that can be used to represent a system in terms of the input data to the system, various processing carried out on these data, and the output data generated by the system. The main reason why the DFD technique is so popular is probable because of the fact that DFD is very simple formalism- it is simple to understand and use. A DFD model uses a very limited number of primitive symbols to represent the functions performed by a system and thedata flow among these functions. Entity Attribute Data Flow Fig: Symbols used for designing DFD’s Starting with a set of high-level functions that a system performs, a DFD model hierarchically represents various sub functions. In fact, any hierarchical model is a simple to understand. Human mind is such that it can easily understand any hierarchical model of a system - because in a hierarchical model, starting with a very simple and abstract model of a system, different details ofthe system can be slowly introduced through different hierarchies. ⮚ Attribute Symbol: An attribute is represented using a circle. ⮚ Entity Symbol: External entity symbol is represented by a rectangle. ⮚ Data Flow Symbol: Data flow symbol is represented by an arc or arrow . 20 Data Flow Diagram (0 level): Food Menu Food Order Syste m Purchase History User Account 21 Orde r Data Flow Diagram (1 level): User Food Order System Login Details Verification User Home Page Food Menu Food Menu Admin Search End Project Details 22 11. Entity Relationship Diagram (ER) The ER or (Entity Relational Model) is a high-level conceptual data model diagram. Entity-Relation modelis based on the notion of real-world entities and the relationship between them. ER modeling helps you toanalyze data requirements systematically to produce a welldesigned database. So, it is considered a best practice to complete ER modeling before implementing your database. Components of the ER Diagram This model is based on three basic concepts: ● Entities ● Attributes RelationshipsEntities: A real-world thing either living or non-living that is easily recognizable and unrecognizable. It is anythingin the enterprise that is to be represented in our database. It may be a physical thing or simply a fact aboutthe enterprise or an event that happens in the real world. An attribute describes the property of an entity. An attribute is represented as Oval in an ER diagram. Thereare four types of attributes: 1. Key attributes. 2.Composite attribute. 3.Multivalued attribute.4.Derived attribute. Relationships: Defines the numerical attributes of the relationship between two entities or entity sets. Different types ofcardinal relationships are: ● One-to-One Relationships ● One-to-Many Relationships ● May to One Relationships ● Many-to-Many Relationships ER- Diagram Notations ER- Diagram is a visual representation of data that describe how data is related to each other. ● Rectangles: This symbol represent entity types ● Ellipses: Symbol represent attributes ● Diamonds: This symbol represents relationship type ● Lines: It links attributes to entity types and entity types with other relationship types. 23 ● Primary key: attributes are underlined ● Double Ellipses: Represent Multi-valued attribute ● Dashed Ellipses: Derived Attributes ● Double Rectangles: Weak Entity Sets ● Double Lines: Total participation of an entity in a relationship set 24 25 12. FEASIBILITY STUDY What Is a Feasibility Study? A feasibility study is an analysis that takes all of a project's relevant factors into account— including economic, technical, legal, and scheduling considerations—to ascertain the likelihood of completing the project successfully. Project managers use feasibility studies todiscern the pros and cons of undertaking a project before they invest a lot of time and money into 12.1) Environmental Feasibility: Technical issue involved are the necessary technology existence, technical guarantees of accuracy, reliability, ease of access and security aspect of future expansion. ∙ Technology exists to develop a system. ∙ The proposed system is capable of holding data to be used. ∙ The proposed system is capable of providing adequate response and regardlessof number of users. 12.2) Economical Feasibility: Economic feasibility is most frequently used method for evaluating the effectiveness of the proposed system if the benefits of proposed system outweigh the cost then the decision is made to design and implement the system. ∙ The cost of hardware and software is affordable. ∙ High increase in profit eased by going global. ∙ Easy and cheap maintenance of the system possible. ∙ Very cheap price going global. 12.3) Technical Feasibility: This is concern with specifying equipment and software that will successfully satisfy the use considerably, but might include. 26 13. TESTING 13.1 Black Box Testing: Black box testing is defined as a testing technique in which functionality of the Application under Test (AUT) is tested without looking at the internal code structure, implementation details and knowledge of internal paths of the software. This type of testing is based entirelyon software requirements and specifications. In Black Box Testing we just focus on inputs and output of the software system without bothering about internal knowledge of the software program. The above Black-Box can be any software system you want to test. For Example, an operating system like Windows, a website like Google, a database like Oracle or even yourown custom application. Under Black Box Testing, you can test these applications by just focusing on the inputs and outputs without knowing their internal code implementation. 13.2 White Box Testing: White Box Testing is defined as the testing of a software solution's internal structure, design, and coding. In this type of testing, the code is visible to the tester. It focuses primarily on verifying the flow of inputs and outputs through the application, improving design and usability, strengthening security. White box testing is also known as Clear Boxtesting, Open Box testing, Structural testing, Transparent Box testing, Code-Based testing, and Glass Box testing. It is usually performed by developers. White box testing involves the testing of the software code for the following: ∙ Internal security holes ∙ Broken or poorly structured paths in the coding processes. ∙ The flow of specific inputs through the code . ∙ Expected output. ∙ The functionality of conditional loops. ∙ Testing of each statement, object, and function on an individual basis. The testing can be done at system, integration and unit levels of software development. One of 27 the basic goals of white box testing is to verify a working flow for an application. It involves testing series of predefined inputs against expected or desired outputs so that whena specific input does not result in the expected output, you have encountered a bug. 28 14. DATA DICTIONARY 1.USER NAME OF ATTRIBUTE DATA TYPE CONSTRAINS id INT(10) PRIMARY KEY NAME CHAR (20) NOT-NULL Email ID VARCHAR (10) NOT-NULL Password VARCHAR (10) NOT-NULL ViewID INT (10) NOT-NULL NAME OF ATTRIBUTE DATA TYPE CONSTRAINS PNAME CHAR (20) NOT-NULL PID INT (10) PRIMARY KEY PRODUCT VARCHAR (10) NOT-NULL 2.PRODUCT 29 3.ORDER NAME OF ATTRIBUTE DATA TYPE CONSTRAINS OID INT(10) PRIMARY KEY NAME CHAR (20) NOT-NULL Email ID VARCHAR (10) NOT-NULL QUANTITY INT (10) NOT-NULL PRICE INT (10) NOT-NULL NAME OF ATTRIBUTE DATA TYPE CONSTRAINS UPI CHAR (20) PRIMARY KEY VARCHAR (10) NOT-NULL INT (10) NOT-NULL 4.SALE CARD CASH 30 15. SOURCE CODE 1. Sign Up <?php $con = mysqli_connect('localhost','root'); mysqli_select_db($con,'foodsys'); ?> <?php include('header.php'); ?> <!DOCTYPE html> <html> <body style="background: radial-gradient(circle, rgba(228,151,151,1) 0%, rgba(148,187,233,1) 100%);;"> <div> <nav class="navbar navbar-default navbar-inverse" > <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="index.php"><b>Food Ordering System</b></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> 31 </nav> </div> <div class="container"> <h1 class="text-center text-light"> <u>Welcome to FoodSys</u> </h1><br> <section class="vh-100" style="margin-left: 25%;"> <div class="container py-5 h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-12 col-md-8 col-lg-6 col-xl-5"> <div class="card bg-dark text-white" style="border-radius: 1rem;"> <div class="card-body p-5 text-center"> <div class="mb-md-5 mt-md-4 pb-5"> <h2 class="fw-bold mb-2 text-uppercase">Sign Up</h2> <form class="card-body" action="registration.php" method="post"> <div class="form-group"> <label for="user "> Name: </label> <input type="text" name="name" id="name" class="form-control"> </div> <div class="form-group"> <label for="user "> Email: </label> <input type="text" name="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="pass "> Password: </label> <input type="password" name="pass" id="pass" class="form-control"> </div><br> <button class="btn btn-success d-block m-auto" type="submit"> Submit </button> 32 <div class="duplicate"> </div> </form> </div> <div> <p class="mb-0">Already have a account! <a href="index.php" class="text-white-50 fw-bold"><br> Login</a> </p> </div> </div> </div> </div> </div> </div> </section> </div> <h5 class="text-center" style="position: fixed; left: 0; bottom: 0; width: 100%;"> &copy;2021 </h5> </body> </html> 33 2.Login <?php session_start(); $con = mysqli_connect('localhost','root'); if($con){ echo"connection"; } mysqli_select_db($con,'foodsys'); $email = $_POST['email']; $password = $_POST['pass']; $q = " select * from users where email = '$email' && pass='$password' "; $result = mysqli_query($con,$q); $row = mysqli_num_rows($result); if($row == 1){ $_SESSION['email'] = $email; $userquery = " insert into users(email) values ('$email')"; $userresult = mysqli_query($con,$userquery) ; header('location:home.php'); }else{ header('location:signup.php'); } ?> 34 3. Menu <!-- Edit Product --> <div class="modal fade" id="editproduct<?php echo $row['productid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Edit Product</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <form method="POST" action="editproduct.php?product=<?php echo $row['productid']; ?>" enctype="multipart/form-data"> <div class="form-group" style="margin-top:10px;"> <div class="row"> <div class="col-md-3" style="margin-top:7px;"> <label class="control-label">Product Name:</label> </div> <div class="col-md-9"> <input type="text" class="form-control" value="<?php echo $row['productname']; ?>" name="pname"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-3" style="margin-top:7px;"> <label class="control-label">Category:</label> </div> <div class="col-md-9"> <select class="form-control" name="category"> 35 <option value="<?php echo $row['categoryid']; ?>"><?php echo $row['catname']; ?></option> <?php $sql="select * from category where categoryid != '".$row['categoryid']."'"; $cquery=$conn->query($sql); while($crow=$cquery->fetch_array()){ ?> <option value="<?php echo $crow['categoryid']; ?>"><?php echo $crow['catname']; ?></option> <?php } ?> </select> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-3" style="margin-top:7px;"> <label class="control-label">Price:</label> </div> <div class="col-md-9"> <input type="text" class="form-control" value="<?php echo $row['price']; ?>" name="price"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-3" style="margin-top:7px;"> <label class="control-label">Photo:</label> </div> 36 <div class="col-md-9"> <input type="file" name="photo"> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> <button type="submit" class="btn btn-success"><span class="glyphicon glyphiconedit"></span> Update</button> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- Delete Product --> <div class="modal fade" id="deleteproduct<?php echo $row['productid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Delete Product</h4></center> </div> <div class="modal-body"> <h3 class="text-center"><?php echo $row['productname']; ?></h3> </div> <div class="modal-footer"> 37 <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> <a href="delete_product.php?product=<?php echo $row['productid']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Yes</a> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> 38 4.Order <?php session_start(); if(!isset($_SESSION['email'])){ header('location:index.php'); } $con = mysqli_connect('localhost','root'); mysqli_select_db($con,'foodsys'); ?> <?php include('header.php'); ?> <body style="background: #c2e59c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.16 */ background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ "> <?php include('navbar.php'); ?> <div class="container"> <h1 class="page-header text-center">ORDER</h1> <form method="POST" action="purchase.php"> <table class="table table-striped table-bordered"> <thead> <th class="text-center"><input type="checkbox" id="checkAll"></th> <th>Photo</th> <th>Category</th> <th>Product Name</th> <th>Price</th> 39 <th>Quantity</th> </thead> <tbody> <?php $sql="select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc"; $query=$conn->query($sql); $iterate=0; while($row=$query->fetch_array()){ ?> <tr> <td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td> <td><a href="<?php if(empty($row['photo'])){echo "upload/noimage.jpg";} else{echo $row['photo'];} ?>"><img src="<?php if(empty($row['photo'])){echo "upload/noimage.jpg";} else{echo $row['photo'];} ?>" height="30px" width="40px"></a></td> <td><?php echo $row['catname']; ?></td> <td><?php echo $row['productname']; ?></td> <td class="text-right">&#x20A8; <?php echo number_format($row['price'], 2); ?></td> <td><input type="text" class="formcontrol" name="quantity_<?php echo $iterate; ?>"></td> </tr> <?php $iterate++; } ?> </tbody> </table> 40 <div class="row"> <!-- <div class="col-md-3"> <input type="text" name="" class="form-control" placeholder="Customer Name" required> </div> --> <div style="margin: auto; width: 10%; margin-bottom:20px;"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button> </div> </div> </form> </div> <footer><center>SMA Productions | &copy; 2022</center></footer> <script type="text/javascript"> $(document).ready(function(){ $("#checkAll").click(function(){ $('input:checkbox').not(this).prop('checked', this.checked); }); }); </script> </body> </html> 41 5.Sales <div class="modal fade" id="details<?php echo $row['purchaseid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Sales Full Details</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <h5>Customer: <b><?php echo $row['customer']; ?></b> <span class="pull-right"> <?php echo date('M d, Y h:i A', strtotime($row['date_purchase'])) ?> </span> </h5> <table class="table table-bordered table-striped"> <thead> <th>Product Name</th> <th>Price</th> <th>Purchase Quantity</th> <th>Subtotal</th> </thead> <tbody> <?php $sql="select * from purchase_detail left join product on product.productid=purchase_detail.productid where purchaseid='".$row['purchaseid']."'"; $dquery=$conn->query($sql); while($drow=$dquery->fetch_array()){ ?> <tr> 42 <td><?php echo $drow['productname']; ?></td> <td class="text-right">Rs. <?php echo number_format($drow['price'], 2); ?></td> <td><?php echo $drow['quantity']; ?></td> <td class="text-right">Rs. <?php $subt = $drow['price']*$drow['quantity']; echo number_format($subt, 2); ?> </td> </tr> <?php } ?> <tr> <td colspan="3" class="text-right"><b>TOTAL</b></td> <td class="text-right">Rs. <?php echo number_format($row['total'], 2); ?></td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> 43 <?php include('conn.php'); $pname=$_POST['pname']; $price=$_POST['price']; $category=$_POST['category']; $fileinfo=PATHINFO($_FILES["photo"]["name"]); if(empty($fileinfo['filename'])){ $location=""; } else{ $newFilename=$fileinfo['filename'] ."_". time() . "." . $fileinfo['extension']; move_uploaded_file($_FILES["photo"]["tmp_name"],"upload/" . $newFilename); $location="upload/" . $newFilename; } $sql="insert into product (productname, categoryid, price, photo) values ('$pname', '$category', '$price', '$location')"; $conn->query($sql); header('location:product.php'); ?> <?php include('conn.php'); $pname=$_POST['pname']; $price=$_POST['price']; $category=$_POST['category']; $fileinfo=PATHINFO($_FILES["photo"]["name"]); if(empty($fileinfo['filename'])){ $location=""; } else{ $newFilename=$fileinfo['filename'] ."_". time() . "." . $fileinfo['extension']; move_uploaded_file($_FILES["photo"]["tmp_name"],"upload/" . $newFilename); $location="upload/" . $newFilename; } $sql="insert into product (productname, categoryid, price, photo) values ('$pname', '$category', '$price', '$location')"; $conn->query($sql); header('location:product.php'); ?> 44 <!-- Edit Product --> <div class="modal fade" id="editcategory<?php echo $row['categoryid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Edit Category</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <form method="POST" action="editcategory.php?category=<?php echo $row['categoryid']; ?>" enctype="multipart/form-data"> <div class="form-group" style="margin-top:10px;"> <div class="row"> <div class="col-md-3" style="margin-top:7px;"> <label class="control-label">Category Name:</label> </div> <div class="col-md-9"> <input type="text" class="form-control" value="<?php echo $row['catname']; ?>" name="cname"> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> <button type="submit" class="btn btn-success"><span class="glyphicon glyphiconedit"></span> Update</button> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- Delete Category --> <div class="modal fade" id="deletecategory<?php echo $row['categoryid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Delete Category</h4></center> </div> <div class="modal-body"> <h3 class="text-center"><?php echo $row['catname']; ?></h3> </div> 45 <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> <a href="delete_category.php?category=<?php echo $row['categoryid']; ?>" class="btn btndanger"><span class="glyphicon glyphicon-trash"></span> Yes</a> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <?php include('header.php'); ?> <body> <?php include('navbar.php'); ?> <div class="container"> <h1 class="page-header text-center">CATEGORY CRUD</h1> <div class="row"> <div class="col-md-12"> <a href="#addcategory" data-toggle="modal" class="pull-right btn btnprimary"><span class="glyphicon glyphicon-plus"></span> Category</a> </div> </div> <div style="margin-top:10px;"> <table class="table table-striped table-bordered"> <thead> <th>Category Name</th> <th>Action</th> </thead> <tbody> <?php $sql="select * from category order by categoryid asc"; $query=$conn->query($sql); while($row=$query->fetch_array()){ ?> <tr> 46 <td><?php echo $row['catname']; ?></td> <td> <a href="#editcategory<?php echo $row['categoryid']; ?>" data-toggle="modal" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span> Edit</a> || <a href="#deletecategory<?php echo $row['categoryid']; ?>" data-toggle="modal" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a> <?php include('category_modal.php'); ?> </td> </tr> <?php } ?> </tbody> </table> </div> </div> <?php include('modal.php'); ?> </body> </html> <!-- Sales Details --> <div class="modal fade" id="details<?php echo $row['purchaseid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Sales Full Details</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <h5>Customer: <b><?php echo $row['customer']; ?></b> <span class="pull-right"> <?php echo date('M d, Y h:i A', strtotime($row['date_purchase'])) ?> 47 </span> </h5> <table class="table table-bordered table-striped"> <thead> <th>Product Name</th> <th>Price</th> <th>Purchase Quantity</th> <th>Subtotal</th> </thead> <tbody> <?php $sql="select * from purchase_detail left join product on product.productid=purchase_detail.productid where purchaseid='".$row['purchaseid']."'"; $dquery=$conn->query($sql); while($drow=$dquery->fetch_array()){ ?> <tr> <td><?php echo $drow['productname']; ?></td> <td class="text-right">Rs. <?php echo number_format($drow['price'], 2); ?></td> <td><?php echo $drow['quantity']; ?></td> <td class="text-right">Rs. <?php $subt = $drow['price']*$drow['quantity']; echo number_format($subt, 2); ?> </td> </tr> <?php } ?> <tr> <td colspan="3" class="text-right"><b>TOTAL</b></td> <td class="text-right">Rs. <?php echo number_format($row['total'], 2); ?></td> </tr> </tbody> 48 </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- Sales Details --> <div class="modal fade" id="details<?php echo $row['purchaseid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Sales Full Details</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <h5>Customer: <b><?php echo $row['customer']; ?></b> <span class="pull-right"> <?php echo date('M d, Y h:i A', strtotime($row['date_purchase'])) ?> </span> </h5> <table class="table table-bordered table-striped"> <thead> <th>Product Name</th> <th>Price</th> <th>Purchase Quantity</th> <th>Subtotal</th> 49 </thead> <tbody> <?php $sql="select * from purchase_detail left join product on product.productid=purchase_detail.productid where purchaseid='".$row['purchaseid']."'"; $dquery=$conn->query($sql); while($drow=$dquery->fetch_array()){ ?> <tr> <td><?php echo $drow['productname']; ?></td> <td class="text-right">Rs. <?php echo number_format($drow['price'], 2); ?></td> <td><?php echo $drow['quantity']; ?></td> <td class="text-right">Rs. <?php $subt = $drow['price']*$drow['quantity']; echo number_format($subt, 2); ?> </td> </tr> <?php } ?> <tr> <td colspan="3" class="text-right"><b>TOTAL</b></td> <td class="text-right">Rs. <?php echo number_format($row['total'], 2); ?></td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button> </div> 50 </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <?php $con = mysqli_connect('localhost','root'); mysqli_select_db($con,'foodsys'); ?> <?php include('header.php'); ?> <!DOCTYPE html> <html> <body style="background: radial-gradient(circle, rgba(228,151,151,1) 0%, rgba(148,187,233,1) 100%);;"> <div> <nav class="navbar navbar-default navbar-inverse" > <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="index.php"><b>Food Ordering System</b></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> </div><!-- /.navbar-collapse --> 51 </div><!-- /.container-fluid --> </nav> </div> <div class="container"> <h1 class="text-center text-light"> <u>Welcome to FoodSys</u> </h1><br> <section class="vh-100" style="margin-left: 25%;"> <div class="container py-5 h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-12 col-md-8 col-lg-6 col-xl-5"> <div class="card bg-dark text-white" style="border-radius: 1rem;"> <div class="card-body p-5 text-center"> <div class="mb-md-5 mt-md-4 pb-5"> <h2 class="fw-bold mb-2 text-uppercase">Sign Up</h2> <form class="card-body" action="registration.php" method="post"> <div class="form-group"> <label for="user "> Name: </label> <input type="text" name="name" id="name" class="form-control"> </div> <div class="form-group"> <label for="user "> Email: </label> <input type="text" name="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="pass "> Password: </label> <input type="password" name="pass" id="pass" class="form-control"> </div><br> <button class="btn btn-success d-block m-auto" type="submit"> Submit </button> <div class="duplicate"> </div> </form> 52 </div> <div> <p class="mb-0">Already have a account! <a href="index.php" class="text-white-50 fwbold"><br> Login</a> </p> </div> </div> </div> </div> </div> </div> </section> </div> <h5 class="text-center" style="position: fixed; left: 0; bottom: 0; width: 100%;"> &copy;2021 </h5> </body> </html> <?php include('conn.php'); $id=$_GET['product']; 53 $pname=$_POST['pname']; $category=$_POST['category']; $price=$_POST['price']; $sql="select * from product where productid='$id'"; $query=$conn->query($sql); $row=$query->fetch_array(); $fileinfo=PATHINFO($_FILES["photo"]["name"]); if (empty($fileinfo['filename'])){ $location = $row['photo']; } else{ $newFilename=$fileinfo['filename'] ."_". time() . "." . $fileinfo['extension']; move_uploaded_file($_FILES["photo"]["tmp_name"],"upload/" . $newFilename); $location="upload/" . $newFilename; } $sql="update product set productname='$pname', categoryid='$category', price='$price', photo='$location' where productid='$id'"; $conn->query($sql); header('location:product.php'); ?> <?php include('header.php'); ?> <body> <?php include('navbar.php'); ?> <div class="container"> <h1 class="page-header text-center">PRODUCTS CRUD</h1> 54 <div class="row"> <div class="col-md-12"> <select id="catList" class="btn btn-default"> <option value="0">All Category</option> <?php $sql="select * from category"; $catquery=$conn->query($sql); while($catrow=$catquery->fetch_array()){ $catid = isset($_GET['category']) ? $_GET['category'] : 0; $selected = ($catid == $catrow['categoryid']) ? " selected" : ""; echo "<option$selected value=".$catrow['categoryid'].">".$catrow['catname']."</option>"; } ?> </select> <a href="#addproduct" data-toggle="modal" class="pull-right btn btnprimary"><span class="glyphicon glyphicon-plus"></span> Product</a> </div> </div> <div style="margin-top:10px;"> <table class="table table-striped table-bordered"> <thead> <th>Photo</th> <th>Product Name</th> <th>Price</th> <th>Action</th> </thead> <tbody> <?php $where = ""; if(isset($_GET['category'])) { $catid=$_GET['category']; $where = " WHERE product.categoryid = $catid"; } $sql="select * from product left join category on category.categoryid=product.categoryid $where order by product.categoryid asc, productname asc"; 55 $query=$conn->query($sql); while($row=$query->fetch_array()){ ?> <tr> <td><a href="<?php if(empty($row['photo'])){echo "upload/noimage.jpg";} else{echo $row['photo'];} ?>"><img src="<?php if(empty($row['photo'])){echo "upload/noimage.jpg";} else{echo $row['photo'];} ?>" height="30px" width="40px"></a></td> <td><?php echo $row['productname']; ?></td> <td>Rs. <?php echo number_format($row['price'], 2); ?></td> <td> <a href="#editproduct<?php echo $row['productid']; ?>" data-toggle="modal" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span> Edit</a> || <a href="#deleteproduct<?php echo $row['productid']; ?>" datatoggle="modal" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a> <?php include('product_modal.php'); ?> </td> </tr> <?php } ?> </tbody> </table> </div> </div> <?php include('modal.php'); ?> <script type="text/javascript"> $(document).ready(function(){ $("#catList").on('change', function(){ if($(this).val() == 0) { window.location = 'product.php'; } else { 56 window.location = 'product.php?category='+$(this).val(); } }); }); </script> </body> </html> 57 16. OUTPUT SCREEN 1. Sign Up: 2. Login: 58 3. Menu: 59 60 4. Order: 5. Sales: 61 17. CONCLUSION An online food ordering system is developed where the customers can make an order for the food and avoid the hassles of waiting for the order to be taken by the waiter. Using the application, the end users register online, read the E-menu card and select the food from the emenu card to order food online. Once the customer selects the required food item the chef will be able to see the results on the screen and start processing the food. This application nullifies the need of a waiter or reduces the workload of the waiter. The advantage is that in acrowded restaurant there will be chances that the waiters are overloaded with orders and theyare unable to meet the requirements of the customer in a satisfactory manner. Therefore by using this application, the users can directly place the order for food to the chef online. In conclusion an online food ordering system is proposed which is useful in small family run restaurants as well as in the order personally or over phone, to offer the customer a rich experience and even to process the payment. 62 18. BIBILOGRAPHY • Beginning with a PHP Author: Matt Boyle • SAMS Teach yourself PHP Author Matt Zandstra • MYSQL the complete Reference Author: Vikram Vaswani • HTML The complete Reference Author: Thomas A. Powell • Programming PHP Author: Ramus Leadoff • CSS Mastery Author: Andy Budd 63 19. WEB REFERENCES ∙ www.w3school.com ∙ www.tutorialpoints.com ∙ www.wikipedia.com ∙ www.php.com ∙ www.stackoverflow.com ∙ www.htmlcodetutorial.com 64