DG_BOOK

Damietta Guide Supervised by Prof. Dr. Ahmed Mohammed Rabie 1

Damietta Guide Project by: 1. Eman Elsayed Abo Elenin 2. Mariam Alaa Badr 3. Mariam Abdelftah Soliman 4. Nada Khaled Slama 5. Norssine Mohamed Abdulbarri 6. Nahla Anwar Ibrahem 7. Nourhan Ibrahim Sharshera 8. Ebrahem Mohamed Eldesoky 9. Mahmoud Yahya Elhamamsy 10. Ahmed Hesham Empapy Supervised by Prof. Dr. Ahmed Mohammed Rabie 2

ACKNOWLEDGEMENT we would like to express our special thanks to: Prof. Dr. Ahmed Mohammed Rabie, information technology department for his guidance and constant supervision as well as for providing necessary information for project and for his support in completing the project. we would like to express our gratitude towards member of organization for their kendo-operation and encouragement with help us in completion of this project. with deep thanks DG Team members 3

Table of Contents Chapter 1: Introduction ................................................................5 Project overview.........................................................................................................................6 Problem Statement .....................................................................................................................8 Project Scope ..............................................................................................................................9 Objectives ......................................................................................................................................................... 10 References to support the need of the project ..................................................................................................12 Overview of Existing Systems .................................................................................................13 Method / Approach...................................................................................................................22 Chapter 2: Tools of project ......................................................... 24 Web development.............................................................................................................................................. 25 Front-end.......................................................................................................................................................... 29 What is the program used for coding front end and backend .......................................................................... 29 HTML ........................................................................................................................................................... 37 CSS................................................................................................................................................................ 42 JavaScript ...................................................................................................................................................... 52 BootStrap ...................................................................................................................................................... 59 Back-end .......................................................................................................................................................... 64 Node-js ............................................................................................................................................................. 70 SQL-Server ...................................................................................................................................................... 72 JavaScript-TypeScript...................................................................................................................................... 81 Mobile Application Development.................................................................................................................... 86 Flutter ............................................................................................................................................................... 91 UX/UI design ................................................................................................................................................. 110 Chapter 3: System Development Life Cycle.............................. 113 Introduction System Development Life Cycle.........................................................................114 4

Stages Of the System Development Life Cycle ......................................................................116 Methodologies .........................................................................................................................124 Benefits Of SDLC ....................................................................................................................131 System Development Life Cycle in our system ....................................................................133 References……………………………………………………………………………………141 5

Chapter 1: Introduction 6

1.1 PROJECT OVERVIEW Saving time and trying to take advantage of every moment has many importantbenefits in life, up to the point that saving a few seconds can save a human soul. On this basis, we thought of building a complete system application, through which we can request any servicewe want in the easiest and fastest way. A comprehensive system for most of the services that a person needs in his daily life, such as: - Knowing the most famous doctors and their locations. - Knowing the locations of pharmacies. - Knowing where the most famous restaurants are. - Knowing the most famous stores for clothes, fruits, and vegetables and many of the services he needs. The project is a website and application that helps the Damietta citizen obtain the address and number of any brand within the city of new Damietta, and helps the Damietta merchant to register his brand on the site to helphim with the idea of digital transformation. If the citizen of Damietta wants to buy a specific product from the site, the site will suggest the best places fromwhich he can buy through the highest review of the users of our site. Our site helps the Damietta citizen to save his time and effort in going down to search for 7

a brand, doctor,engineering office or others simply by searching by the name of the product. Simply, our project is that by just browsing the website or application, the user can find the most suitable placefor his needs without making any efforts or wasting any time. 8

1.2 Problem Statement Often you may find that you need to buy something, but you do not know the right place, or at least the oneclosest to you, so we found that the solution could be in your hands. You can use this application to reach the nearest place that helps you in your purpose, as it is the easiest andsafest for you in that situation. This application displays commercial places such as clothing stores, restaurants, and others, and divides theminto categories for easy selection according to demand. It helps the user to: Displays the place's data, its location, and its contact information, which facilitates thecommunication process. The application also provides suggestions for the best and most famous places. In addition to the search box through which the user performs a search to reach a specific site. The merchant helps in: The possibility of adding the merchant's shop to the application, so each merchant canput his own store's data. We see that this application will help many of the city's residents in terms of ease of access and saving time andeffort. 9

1.3 Project Scope Nowadays, one of the biggest transformations using technologies is the online shopping. It also has the same size of the market as a general physical market possesses. So, we developed this project to help people in Damietta to manage their Buying and selling process and help people to find the closest place that provide themwith the service they want and can use their location for good suggesting. Damietta’s guide is website and application for online shopping that facilitates communication between customers and sellers in Damietta, as it saves time and effort for anyone who wants to obtain a specific productor service through a simple search for the name of the product or service instead of the hassle of going to stores,which are Sometimes useless and a waste of time. in addition to suggesting the best places that provide you with the best service. customers in Damietta are being provided with finding any brand or product they want to buy or the nearest place that provides specific services they need by simply searching for its name or search for particular productby import image or use barcode after that a lot of results with appear with their feedbacks and reviews , They can also enter a specific store and see all its products, services, and prices, in addition to communicating with stores and sellers directly . Sellers and stores in Damietta can display their services and products at their prices, as the closest customers can deal with them and facilitate the sale process. The system allows sellers and stores to add new particulars tothe items list whenever needed, remove items at any time, modify the price of each item whenever required , update the description of each item ,and to view information about each customer who checkouts the items list. 10

1.4 Objectives In our time, people have developed their activities and areas of work have increased significantly, so it hasbecome difficult to get anywhere easily. We face many difficulties when we want to reach a specific destination, for example, stores, restaurants,doctors, entertainment venues, and other places we need. daily in our normal day. That is why we wanted to implement this project in our city “Damietta” to facilitate a small part of the obstacleswe face. We hope that it will succeed as we hope so that we can develop it more and not only in our city, but in theentire world, and add new features to it that raise its level more and more and make it easier to use. Goal points: - We hope that our final product will provide people with services that help them and make their lives easier - Upon the success of our project in the future, we will add additional features that make it easier and morewidespread, not limited to a city - In the future it can be our business and benefit from it 11

Team goal: And our goal as a team is to benefit scientifically from what we studied in college and apply it as a living example in life, and to benefit people from it and facilitate their lives, and also maybe it our business in thefuture 12

1.5 References to support the need of the project. Project Impact: Every day, most of us face the difficulty of reaching a certain destination during our daily commutes, especiallywhen going to a new place, and even when hiking in a new place that I have not gone before. We face difficultyin shopping, getting food, etc. …Therefore, we thought of a solution that would help eliminate the problem of worrying about going to unfamiliar places, and we decided to start working on a project to solve that problem, and we will start implementing it in our city. After the completion of the project, it is assumed that it will become easy to reach any destination from the areathat is located in the initial space of the project, and that no visitor or anyone will be confused about reaching his destination, or even suggest some destinations to him if he is there just for tourism. Locally: Our project will facilitate access to restaurants, phone stores, clothing stores, doctors of various specialties, food shops, entertainment venues, car showrooms, toy stores, and everything that anyone may needduring their daily life. Globally: This project can be applied globally and applied to the entire world instead of the space of our small city, as it will save a lot of trouble for tourists and even the owners of the country, and anyone in the world can reach any destination they want anywhere they wish. 13

1.6 Overview of Existing Systems Our program is not the only application available for this idea, as more than one other program has beenimplemented. Some of them will be presented as follows: 1- Nearby Places –Everything Chinese application requests access to the location. The section is selected, and then the application identifiesthe nearby places in the range that correspond to the specified section. It has voice and written search, but it does not understand all commands. Only available in English and Chinese. It can be replaced with Google Maps, as it does not add much. 14

15

2- Find nearby places Requests access to the location, and it shows a list of all the sections from which we can choose, and then locates the nearby places on Google Maps. It contains ads and to stop them requires payment. It can also be replaced with Google Maps. The app solves the language problem and provide more than one language, but itdoes not contain Arabic. 16

3- PlacesNearMe Requests access to the location and provides a list of places, and we choose from them. But I faced a problem inusing it, and his answer is that there are no nearby places. In the beginning, you need to create an account or login or an additional option is to enter as a guest. 17

4- Nearby The application requests permission to access the location. We choose the section, and then searches for nearbyplaces and nominates one of them. It Contains ads. 18

5- Around Me The same mechanism of action, but when choosing a section and searching in it, the program exits, and I do notget any results. 19

6- Nearby places The application performs the same work mechanism, but when searching and locating, it exits and does notcomplete the required goal. 20

7- Nearby Place Finder The application requests the location, then we choose the section, and it locates the nearest places using GoogleMaps. 8- NEAR FOR ME It is a little different from other applications, where you choose from several options, then 21

select a more accurate one, and then search and determine the nearby location. There is also another option, which is thenearby discounts, and you choose the special section, and then it opens the chosen sales site. These applications differ slightly from the application being worked on. In this application, we identify all nearby places, with more accurate data, contact and access information, and not just a location. The programalso highlights the best and most famous places within the city. 22

1.7 Method / Approach We will implement our idea through a website and application Website: We have chosen the website for several reasons, including: 1- Websites are among the modern means used in the circulation of information between people, so they area center for many people, which indicates the importance of websites. 2- Through which a lot of work is done through websites without spending a lot of money and time. 3- It saves time, facilitates study, and accomplishes a lot without the burden of mobility, as all this can bedone through the Internet from anywhere. The site is divided into two parts: Front-end, back-end The tools used in front-end: HTML: Pat describes HTML as the skeleton of a webpage. It is used to structure a webpage's content, and it also tells the web browser how to display it. CSS: The \"skin and clothes of the webpage\" according to Pat, CSS (Cascading Style Sheets) gives browsersmore specific information on displaying content, like the size and color of text. JavaScript: There's more to websites than just text. JavaScript allows you to create more complex elements like interactive maps and animated graphics. It is executed both in the browser and the server, which makes it versatile. Bootstrap: is a free and open-source web development framework. It is designed to ease the web developmentprocess of responsive, mobile-first websites by providing a collection of syntax for template designs. The tools used in back-end: Nod.js: is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser. Node.js is a popular, lightweight web 23

framework for beginners, and it is used bymany big companies like Netflix and Uber. SQL: stands for Structured Query Language which is a language used by databases. This language allows tomanage the information using tables and shows a language to query these tables and other objects related (views, functions, procedures, etc.). Most of the databases like SQL Server, Oracle, PostgreSQL, MySQL, MariaDB manage this language (with some extensions and variations) to handle the data. Application: We have chosen the application for several reasons, including: It can be obtained at any time and from anywhere, and the performance of most applications has improved andstarted to provide excellent services. The tools used in Application: Flutter: Flutter is a powerful language packed with a powerful mobile framework that can be used in both iOSand Android applications. Flutter is often used with DART, which is an object- oriented programming languageby Google. 24

Chapter 2: Tools of project 25

2.1 Web Development 2.1.1 Web development Introduction Web development is the process of building, programming, and maintaining websites and web applications. Website developers use various programming languages, like HTML, CSS, and JavaScript, to develop websitesand web applications. It is the practice of developing websites and web apps that live on the internet. 2.1.2Web development and website definition The Web is the information connected or linked in a way that is like a spider’s web. Using a Web browser—the computer program or software that lets you access the World Wide Web— you can find information on almost any topic with just a few clicks of your mouse button Web development refers in general to the tasks associated with developing websites for hosting via intranet or internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks. In a broader sense, web development encompasses all the actions, updates, and operations required to build,maintain and manage a website to ensure its performance, user experience, and speed are optimal Web development ranges from creating plain text pages to complex web-based applications, social networkapplications and electronic business applications. 26

2.1.3 Website features and functions - Product Catalogue: Product catalog forming part of e-commerce website features lists is usually beautifullydesigned to attract users and give them a refreshing experience when using your website. - Display Ads: Include ad placement as one of your website features and functions so that it should beenabled for ads display and or through affiliate marketing. - Social Media Networking Tools: You can create various social media channels to share content to promoteyour brand, product, and services. Your customers will also find it more convenient to connect with you through social media. - About us page: A website without an about us page looks very unserious, unprofessional, and incomplete. The page is one web page that visitors like to visit to learn more about your business and what you areoffering. - User Forum: The website forum is regulated by the website company who has the administrationpower of removing or deleting defaulting members in their ways. Through this forum, the website company can manage a community interested in its products and services. 27

2.1.4 Web categories Web developers tend to fall under one of two categories: Front-end: Everything customers can see The front end is concerned with a website’s appearance, look and feel. (To build a website, afront-end developer takes care of the theme, including the presentation, images and style.) In addition to using HTML, JavaScript and CSS in their projects, most front- enddevelopers today have also mastered more advanced skills and frameworks like React, Angular and Bootstrap, as well as command-line tools. Front end developers should be able to work on a website’s user interface and appearanceusing design tools like Figma, Sketch and Photoshop. They should also know how web hosting and domain purchases work. Back-end: Everything past the point of what customers can see The back end focuses on functionality on a website’s server-side, including all communicationsbetween the browser and the database. (The back end developer takes care of the database, securities, siteperformance and users.) Back-end developers typically rely on PHP, Python, Ruby, Java and Node.js. They should also have a solid understanding of one or two other languages, as well as proficiency in using databases like SQL Server, Oracle, and MySQL. 28

Compared to the front end, back-end development requires more critical thinking inorder to design systems that help the user interact with the webpage. Back-end developers should know where data is stored, the security of storage, how to debug and test a website and how to add features without affecting functionality and scale. 29

30

Now we will discuss about Front-End and Back-end in details 2.2 Front-End 2.2.1 Front-end definition The front-end of a website is the part of the site that users can see and interact with. Everything you see whenbrowsing through the web pages, like colors, themes, and fonts, are front-end elements. The front end of a website is everything the user either sees or interacts with when they visit the website. It isresponsible for the total look and feel of an online experience. - Styles: This includes the buttons, layouts, inputs, text, images, and more. It is the overall look of the website - Accessibility: accessibly features like text-to-speech, voice recognition, simple user flows. and more makewebsites easier to use and provide a better user experience. - Speed: Most people will not wait for a website to load. The faster a website works, the better. 2.2.2 Tasks of Front-end Front-end web development can include a variety of tasks, including [3]: - Updating existing web pages or creating new ones - Building HTML emails for email campaigns - Making sure web pages work well on mobile or tablets - Improving website performance by cleaning and splitting code 31

- Adding and improving accessibility features 2.2.3 Technologies of Front-end Web Development 1- Hypertext Markup Language (HTML) It's used to structure a webpage's content, and it also tells the web browser how to display it. 2- Cascading Style Sheets (CSS) The «skin and clothes of the web pages according to Pat, CSS (Cascading Style Sheets) gives browsers more specific information on displaying content, like the size and color of text. 3- JavaScript (S) JavaScript allows you to create more comply elements like interactive maps and animated graphics. It'sexecuted both in the browser and the server, which makes it versatile 4- Bootstrap Bootstrap is a free and open-source CSS trammer repressive, mobile. First front-end wen development. It contains CSS -and (optionally) JavaScript -based design templates for typography, forms, buttons, navigation,and other interface components. 32

In figure (2) shown the relationships between html , css , js 33

2.2.4 what is the program used for coding with front end and Backend Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft with theElectron Framework, for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality. - What can Visual Studio Code do? Visual Studio Code has some very unique features. They are listed as below: - Support for multiple programming languages: Supports multiple programming languages. - Intelli-Sense: It can detect if any snippet of code is left incomplete. Also, common variable syntaxes andvariable declarations are made automatically. - Cross-Platform Support: Visual Studio Code is cross-platform like Windows, Linux and macOS. - Extensions and Support: Usually supports all the programming languages but, if the user/programmer wantsto use the programming language which is not supported then, he can download the extension and use it. - Repository: With the ever-increasing demand for the code, secure and timely storage is equally important. - Terminal Support: Many of the times, the user needs to start from the root of the directory to start with a particular action, in-built terminal or console provides user support to not to switch in-between two screensfor the same. - Multi-Projects: Multiple projects containing multiple files/folders can be opened simultaneously. Theseprojects/folders might or might not be related to each other. 34

- Git Support: Resources can be pulled from Git Hub Repo online and saving can be done too. - Commenting: Commenting on the code helps the user to recall or track according to the sequence he wants. - Why do we need Visual Studio Code? Till recent times, there’s hardly been an IDE or code editor that has been so user-friendly that even first-timeusers can use each and every feature without any hassles. The coding-friendly feature and code error recognition also helps users a long way into making the code more efficient and error-less. 35

- Advantages and why should we use Visual Studio Code There are many advantages over any other IDE; they are as follow: 1- Cross-platform support: Windows,Linux,Mac 2- Light weight 3- Robust Architecture 4- Intelli-Sense 5- Freeware: Free of Cost- probably the best feature of all for all the programmers out there, even more for theorganizations. 6- Many users will use it or might have used it for desktop applications only, but it also provides great toolsupport for Web Technologies like, HTML, CSS, JSON. There are a few things that one can find a bit odd compared with so many features. It mainly helps the front-enddevelopers as compared with the back-end developers. 36

In fig (3) shows the VC interface 37

HTML 38

2.3 HTML What is HTML? HTML stands for Hyper Text Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements. It’s not considered aprogramming language as it can’t create dynamic functionality. It makes it possible to create static pages withtext, headings, tables, lists, images, links, and so on. t's open source and free language. HTML documents are files that end with a .html or .htm extension. A web browser reads the HTML file and renders its content so that internet users can view it. All HTML pages have a series of HTML elements, consisting of a set of tags and attributes. HTML elementsare the building blocks of a web page. A tag tells the web browser where an element begins and ends, whereas an attribute describes the characteristics of an element. HTML syntax. The HTML element is defined by an opening tag, some content, and closing tag. 1- The opening tag: used to indicate where the element's effect begins. It is represented with opening and closingangle brackets <tag name>. 2- The content: the output that the user sees in the browser. 3- The closing tag: used to indicate where the element's effect ends. It is represented as same as the openingtag but with a forward slash before the tag name </tag name>. So, the basic syntax of a HTML element is: <tag name> the content </tag name>An example of HTML element: <p> 39

This is a paragraph </p> This is element used to add a paragraph. 1- <p>: the opening tag. 2- This is a paragraph: the content. 3- </p>: the closing tag, 40

Why do you Need HTML? If you are building a web application for any user, HTML is simply the only option with respect to theFrontend for the Web. Abstractions like HAML, Jade, etc., are considered to be alternatives to HTML; however, even these abstractions are eventually converted to HTML because that’s what the browser understands! So, if you’re looking to wow your audience, HTML along with CSS (Cascaded Style Sheets)makes a good case for itself. Think of CSS as a make-up artist and HTML as the actor, HTML brings the talent, but it looks plain without CSS! Another fantastic thing about HTML is how easy it is to deploy a website. There are so many tools availableat your disposal these days that make it super simple to build and then update your website. As the basic structure of the web page is created using HTML, with the advent of (Content Management Systems), CMS like WordPress, etc., building a website is now a superpower that almost any average person with a computer has. You don’t need to be a developer anymore to build a website. But, if you wanted to, you couldstill learn HTML and create your first web page within the day. 41

Advantages and drawbacks of HTML. Advantages: - HTML helps to build structure of a website and is a widely used Markup language. - It is easy to learn. - Every browser supports HTML Language. - HTML is light weighted and fast to load. - Do not get to purchase any extra software because it’s by default in every window. - HTML is simple to edit as being a plain text. - It integrates easily with other languages such as JavaScript, CSS etc. - HTML also allows the utilization of templates, which makes designing a webpage easy. - It is fast to download as the text is compressible. - Very useful for beginners in the web designing field. - HTML can be supported to each and every browser, if not supported to all the browsers. - HTML is built on almost every website, if not all websites. - HTML has many tags and attributes which can short your line of code. drawbacks: - It cannot produce dynamic output alone, since it’s a static language. - It is the time consuming as the time it consumes to maintain on the color scheme of a page and tomake lists, tables and forms. - We have to check up the deprecated tags and confirm not to use them to appear because anotherlanguage that works with HTML has replaced the first work of the tag, and hence the opposite language needs to be understood and learned. 42

CSS 43

2.4 CSS what is CSS? CSS stands for Cascading Style Sheets language. It was developed by W3C in 1996. It’s used to stylizeelements written in markup languages like HTML. It’s used to tell a web browser how a particular websiteshould look like. It can’t be used to create new page elements, but it’s used to style HTML elements instead. The relation between HTML and CSS is strongly tied together since HTML is the very foundation of a site and CSS is all of the aesthetics of an entire website. With CSS features you don’t need to repeatedly describe how individual elements look. This savestime, shortens the code, and makes it not as prone to errors. CSS lets you have multiple styles on oneHTML page, therefore making the customization possibilities almost endless. Nowadays, this is becoming more a necessity than a commodity. The CSS syntax structure is pretty simple. It has a selector and a declaration block. You select anelement and then declare what you want to do with it. The selector points to the HTML elements you want to style. The declaration block contains one or more declarations separated by semicolons. Eachdeclaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. 44

syntax of CSS. The syntax of CSS consists of a selector and a declaration block. - Selector: points to the HTML element that will be stylized. - Declaration block: contain the declarations that contain the CSS property name and value. For example: if we have HTML code like: <p> This is a paragraph</p> The CSS code wouldbe like: P {color: red; text-align center} This CSS code used to make the color of the paragraph red and put it to the center of the page. - P: the selector that refers to the HTML element. - {color: red; text-align center}: the declaration block. - color, text-align: the name of the CSS property. - red, center: the value of the CSS property. 45

Types of styles. There are three types of styles: internal, external ,and inline. 1- Internal The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective wayto style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page. Example: Pros of Internal CSS -Internal CSS cannot upload multiple files when we add the code with the HTML page. Cons of Internal CSS: -Adding code in the HTML document will reduce the page size and loading time of the webpage. 46

2-External In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS is moreefficient method for styling a website. By editing the .css file, we can change the whole site at once. Example: Create style.css file then write your CSS code. Then add a reference to the style.css file in the <head> of the HTML file like this: Pros of External CSS: -Our files have a cleaner structure and smaller in size. -We use the same .css file for multiple web pages in external CSS. 47

Cons of External CSS: -The pages cannot be delivered correctly before the external CSS is loaded. -In External CSS, uploading many CSS files can increase the download time of a website. 48

3-Inline Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful insome situations. We have not accessed the CSS files or to apply styles to element. Example: Pros of inline CSS: -We can create CSS rules on the HTML page. -We cannot create and upload a separate document in inline CSS. Cons of inline CSS: -Inline CSS, adding CSS rules to HTML elements is time-consuming and messes up the HTML structure. -It styles multiple elements at the same time which can affect the page size and download time of the page. 49

Advantages and drawbacks of CSS Advantages of CSS: - CSS plays an important role, by using CSS you simply got to specify a repeated style for element once& use it multiple times as because CSS will automatically apply the required styles. - The main advantage of CSS is that style is applied consistently across variety of sites. One instructioncan control several areas which is advantageous. - Web designers needs to use few lines of programming for every page improving site speed. - Cascading sheet not only simplifies website development, but also simplifies the maintenance as achange of one line of code affects the whole web site and maintenance time. - It is less complex therefore the effort is significantly reduced. - It has the power for re-positioning. It helps us to determine the changes within the position of webelements who are there on the page. - These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess ofpages. - Easy for the user to customize the online page - It reduces the file transfer size. 50