Web Development Reviewer PDF

CHAPTER 1 - It serves as a link between the user application and the hardware Software Engineering introduced first in Ex. Compilers, operating system, drivers etc. 1968 - conference...

CHAPTER 1 - It serves as a link between the user application and the hardware Software Engineering introduced first in Ex. Compilers, operating system, drivers etc. 1968 - conference about 'software crisis' when the introduction of third- generation computer Application Software (Real- time software) hardware led to more complex software systems - consists of standalone programs that than before; solve a specific business need. Early approaches based on informal - used to control the business function in methodology leading to: real- time. delays in software delivery higher costs than initially estimated Engineering /Scientific software unreliable, difficult to maintain software - Characterized by "number crunching" algorithms. Even today SE is in a “chronic affliction” state — Ex. Computer Aided Design (CAD), system Pressman p4. (constantly developing) stimulation etc. The term software engineering is the product of Embedded Software two words, software, and engineering. - It resides in read-only memory and is used to control products and systems The software is a collection of integrated - can perform limited and esoteric programs. functions. Ex. keypad control for a microwave oven. Engineering is the application of scientific and practical knowledge to invent, design, build, Product line software (Personal Computer maintain, and improve frameworks, processes, Software) etc. - Designed to provide a specific capability for use by many different customers, Software Engineering product line software can focus on a application of systematic, disciplined, limited and esoteric marketplace. quantifiable approach to the Ex. Word processing, spreadsheet, CG, development, operation and multimedia, etc. maintenance of software; an engineering discipline concerned with Web Applications (Web-based software) all aspects of software production from - a set of linked hypertext files. early specifications through to - It evolving into sophisticated computing maintenance. environments that not only provide standalone features, functions but also SOFTWARE APPLICATIONS AND CATEGORIES integrated with corporate database and System Software business applications. - is specialized software created to run, manage, and cooperate with a Artificial Intelligence software computer's hardware.  - AI software makes use of non-numerical what interfaces are to be established, algorithms to solve complex problems what design constraints exist, and that are not amenable to computation or what validation criteria are required to straightforward analysis define a successful system. Ex. Robotics, expert system, game playing, etc. Activities COMPONENTS OF A SOFTWARE PRODUCT - system or information engineering, 1. Off the shelf Components software project planning and - Existing software that can be acquired requirements analysis. from a third party. 2. Full Experience Components Development Phase "HOW" - Existing past projects that are similar to how data are to be structured the software to be built for the current how function is to be implemented within a project and team members have full software architecture experience. how interfaces are to be characterized 3. Partial Experience components how the design will be translated into a - Existing past project that are related to programming language the software to be built for current project how testing will be performed. but needs substantial modifications 4. New Components Activities - Software components that must be built - software design, code generation, and by the software team specifically for the software testing. needs of the current project Support Phase Attributes of Quality Software 1. Correction 1. Correctness 2. Adaptation 2. Maintainability 3. Enhancement 3. Integrity 4. Prevention 4. Usability 1. Project Manager Issues in Software Development - is the person who supervises the - Inadequate Communication Amongst Teams development process and its market - Poorly Scheduling entry. - Lack of Software Testing - 2. Business Analyst GENERIC PHASES OF SOFTWARE - study and gather all information about the ENGINEERING product, outline the target audience's needs, and act as a bonding agent Definition Phase "WHAT" between the market and engineers. what information is to be processed, what function and performance are desired, what system behavior can be expected, 3. Engineering Manager - their job is to support their department and make sure their employees have the resources they need to meet their project targets - Focused on people, and how people can work together to achieve technical goals - 4. Software Architect - Decision-maker when it comes to the internal arrangement of the software in accordance with product requirements and procured resources. - key responsibilities is to design the 8. Scrum Master system. - organizes daily stand-ups, gathers - feedback from team members, and 5. Software Developers conducts one-to-ones. - These are people who code the software first-hand. 9. Team Lead or Tech Lead o Junior (1-3 years of experience), Technical Lead o Middle (3-5 years of experience) - is an experienced programmer who is o Senior (8-10+ years of coding). responsible for tech tasks. Code review - full-stack, front- or back-end developers and ameliorating the team's technical - skills via mentoring the coders. 6. UX/UI Designers UX designers Team Lead - Make sure that the browsing experience - in turn, prioritize the tasks, maintain and features are accessible for users, cross-team connections, compose and analyzing the target audience's behavior. organize the working process. To allocate the tasks reasonably, team leads must be UI designers well-versed in roles and responsibilities of - Deal with the layout and visual design, a software development team. where fonts, colors, forms, sounds, and animations are his/her instrumental 7. QA Engineer / Testers - They ensure that the software works properly and conforms to quality standards. CHAPTER 2 WEB DEVELOPMENT Web Technology refers to the various tools and Frontend Development techniques that are utilized in the process of - The part of a website that the user communication between different types of interacts directly. It is also referred to as devices over the internet. the 'client side' of the application WEB TECHNOLOGY CAN BE CLASSIFIED INTO FRONTEND DEVELOPMENT 1. Hypertext Markup Language (HTML) - used to www (World Wide Web) design the front- end portion of web pages using - An information system on the internet a markup language. Hypertext defines the link which allows documents to be connected between the web pages. to other documents by hypertext links, - based on several technologies: Web 2. Cascading Style Sheets (CSS) - simply browsers, ,HTML,HTTP. designed language intended to simplify the process of making web pages presentable. Web Browser Allows you to apply styles to web pages. - is an application software to explore www. provides an interface between the 3. JavaScript - famous scripting language used to server and the client and requests to the create magic on the sites to make the site server for web documents and services interactive for the user. It is used to enhancing the functionality of a website to running cool Web Server games and web-based software. - a program which processes the network requests of the users and serves them 4. Asynchronous Javascript and XML (AJAX) - with files that. create web pages. This used to communicate with the server without exchange takes place using HTTP. refreshing the web page and thus increasing the user experience and better performance. Web Pages - is a digital document that is linked to the www and viewable by anyone connected to the internet has a web browser. Web Development Backend Development - refers to the building, creating, and - server side of a website. part of the maintaining of websites. It includes website that users cannot see and aspects such as web design, web. interact. portion of software that does not publishing, web programming, and come in direct contact with the users. It is database management. creation of an used to store and arrange data. application that works over the internet  PUT Replaces all current representations of the target resource with the uploaded content. POST Post request is used to send data to the server, for example, customer information, file upload, Full stack Developer etc, using HTML forms. - do bits of both backend and frontend. Depending on the problem at hand DELETE Removes all current representations of the target resource given by a URI. GET is a simple request, POST can send user What is HTTP Protocol? data. - HyperText Transfer Protocol. Protocol used by webserver and a browser Frameworks - pre-built skeleton or structure for your application. - provides a set of rules, guidelines, and tools to help you build your software. Libraries - a collection of pre- written code that you can use in your program. - provides functions or modules that you can call upon to perform specific tasks. HTTP METHODS GET is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data. CHAPTER 3 Routing - created inside the routes folder. created Laravel popular PHP web application framework in the web.php file for websites. for APIs, designed to simplify web development with a they are created inside api.php modular structure, elegant syntax, and built-in- features. route is a way of creating a request URL for your application - Created by Taylor Otwell in 2011 - follows a model-view-controller design Blade pattern. reuses the existing components - powerful template engine provided by of different frameworks which helps in Laravel. All code inside blade file is creating a web application compiled to static html file support plain PHP WHY LARAVEL? 1. Simplicity Eloquent & database 2. Modularity - Eloquent ORM provides beautiful, simple 3. Built-in features ActiveRecord implementation for working 4. Active community with your database. Each database table has a corresponding "model" which is used to interact with that table Middleware - mechanism for filtering the HTTP requests Laravel middleware's - Authentication, CSRF Protection Auth Middleware - check if the user. visiting the page is LARAVEL FEATURES authenticated through session cookie 1. Routing 2. Middleware CSRF token 3. Blade template engine - protects your application from cross-site 4. Eloquent ORM request forgery attack by adding token key 5. Artisan command line interface. for each generated form 6. Security features Artisan MVC a software architectural pattern. commonly - command-line interface. provides a used for developing user interface that divide the number of helpful commands that can related program logic into a three interconnected assist you while you build your elements. application. This tool allows us to perform the majority of those repetitive and  tedious programming tasks that most of - allows you to reference routes in your the developers avoid performing application more easily and avoids manually. hardcoding URLs in your code. Composer - simplifies the process of installing, updating, and autoloading PHP libraries and frameworks. - All the dependencies are noted in composer.json file which is placed in the source folder. Route Group - allow you to organize routes, apply Laravel Ul middleware to a group of routes, and - package that simplifies scaffolding for share attributes like prefixes and front-end frameworks such as Bootstrap, namespaces among multiple routes. Vue, and React. Built to integrate with Laravel apps and includes pre-made authentication views and routes Routing - process of defining how the application responds to different HTTP requests. Fallback Routes - handle requests that do not match any of the defined routes. useful for displaying a custom 404 page or redirecting the user to a specific route when none of the defined routes match the requested URL. Laravel Blade - Templating engine provided by the Laravel framework. allows to write clean and expressive templates using simple and familiar syntax. Blade views are typically Route Naming stored in the resources/views directory of a Laravel application. Route View called "User Interface" (GUI Java, HTML, - method to quickly define a route that XML). renders a view without the need for a controller. useful for simple routes that The Controller just need to display a view. - link between the view and the model, responsible for receiving and responding to events, typically user actions and invokes changes on the model and probably in the view. BENEFITS CHAPTER 4 1. Organization MODEL VIEW CONTROLLER (MVC) 2. Rapid Application Development Software architecture pattern that separates the 3. Reusing Code model, the user interface and control logic of an 4. Parallel development application in three distinct components. 5. presents the same information in different ways. THE MVC PATTERN 6. views and application behavior should reflect - proposes the construction of three the manipulations of the data immediately. distinct components. One side for the 7. allows different user interface standards or representation of information, and on the port it to other environments other hand for user interaction. HISTORY One model, Many Views, Many Controllers - This model is not new, it was introduced in 1987 in the Smalltalkprogramming The Model Representation of domain data. language. - With the boom of Web applications, has The View User Interface Interaction elements proven to be a programming mode that fits quite well with the internet, being both The Controller Intermediary between Model and the model and the controller executed View. maps user actions model actions Select server side, and the view on the client the view and provide information to itself side executed THE MODEL THE MVC PATTERN - specific representation of the information Control Flow with which the system operates. Logic 1. The user performs an action on the interface. ensures the integrity of data and allows to 2. The controller takes the input event. derive it. 3. The controller notifies the user action to the model, which may involve a change of state of THE VIEW the model. - Represents the model in a suitable format 4. It generates a new view. The view takes the to interact and access the data, usually data model. 5. The user interface waits for another user useful for simple routes that just need to interaction display a view. Laravel Layout - used to define the structure and common elements of your application's views. - typically includes the HTML structure, header, footer, and any other common elements that are shared across multiple pages. Laravel uses Blade templating engine to define layouts. Yield directives - used to display the content of a named section. often paired with the @section MODEL VIEW CONTROLLER directive, which defines the content of a Model: It interacts with the database. section. allows you to create modular and View: User Interface. It contains everything reusable views. which a user can see on the screen. Controller: It helps to connect Model and View and contains all the business logic. It is also known as the "Heart of the application in MVC". @extends directive - used to specify that a child view extends CHAPTER 5 a parent view. allows you to create a Laravel Blade layout or master view that contains the - default templating engine for the Laravel common structure, such as headers, framework. footers, and sidebars, and then have - lets you use variables, loops, conditional individual views that extend and fill in the statements, PHP features directly in your specific content. HTML code. @foreach directive - to loop through arrays and Route View collections in your views. - quickly define a route that renders a view without the need for a controller. This is @forelse directive - similar to @foreach but CONDITIONAL RENDERING includes a section that is displayed if the loop is @if ($condition) empty - checks if a given condition is true. If it is, the content within the @if and the corresponding @endif is rendered. @elseif ($anotherCondition) - allows you to check additional conditions if the initial @if condition is false. WHAT TYPE OF LOOP? @else @foreach Loop - optional and provides a block of content - Use when iterating over an array or to be displayed if none of the preceding collection of items. conditions are true. - Ideal for iterating through a list of items where you need both the key and value @endif (e.g., looping through an associative - marks the end of the conditional block.. array). @php directive @forelse Loop - to include raw PHP code within your - Similar to @foreach but includes an Blade templates. allows you to execute @empty section that is executed if the arbitrary PHP logic directly within the loop is empty. template. - Useful when you want to handle the case where there are no items in the array or @empty collection. - function to check if a variable is considered "empty" or not. returns true if @for Loop the variable is considered empty, and - Use when you need a loop with a known false otherwise. number of iterations (based on a specific o It's null. condition). o It's an empty string ("). - Ideal for iterating a specific number of o It's an empty array. times or when the loop counter is o It's a false boolean value. important. o It's a zero (0 or '0'). @while Loop Bootstrap originally named Twitter Blueprint, - Use when the number of iterations is not was developed by Mark Otto and Jacob Thornton known in advance, and the loop at Twitter as a framework to encourage continues until a certain condition is met. consistency across internal tools. - Ideal for scenarios where the loop termination condition is dynamic. Released dates of bootstrap versions: Bootstrap 2: On January 31, 2012, Bootstrap 3: On August 19, 2013, - specifies the document type and version Bootstrap 4: 4 on October 29, 2014, of HTML that the browser should use to Bootstrap 5: May 5, 2021, render the page correctly. - helps the browser to interpret the HTML Bootstrap code correctly, ensuring backward - is a collection of CSS classes and compatibility and avoiding rendering JavaScript functions the you get ready to issues. use and will not worry about write code Lang Responsive Design - is used to specify the primary language of - about creating web sites which the content within an HTML document. automatically adjust themselves to look - applied to the tag and helps good on all devices, from small phones to browsers and search engines understand large desktops. the language of the document. Easy to use - Anybody with just basic knowledge of HTML and CSS can start using Bootstrap Responsive features - Bootstrap's responsive CSS adjusts to phones, tablets, and desktops. Mobile-first approach Containers - In Bootstrap, mobile-first styles are part - most basic layout element in Bootstrap of the core framework Browser and are required when using the grid Compatibility system. - Bootstrap 5 is compatible with all modern - basically, used to wrap content with some browsers (Chrome, Firefox, Edge, Safari, padding. also used to align the content and Opera) horizontally center on the page in case of fixed width layout Doctype - Include the HTML5 doctype at the.container, which has a max-width at each beginning of the page, along with the lang responsive breakpoint. attribute and the correct character set.container-fluid, which has 100% width at all breakpoints..container-(breakpoint), which has 100% width until the specified breakpoint. - not an HTML tag: it's a declaration that must appear at the very beginning of an HTML document before the tag.  Button - Used to define the clickable button. Tag is used to submit the content CHAPTER 6 Application Programming Interface (API) - software to software interface, not a user interface. - With APIs, applications talk to each other without any user knowledge or intervention. Grid System - Implemented by writing function calls in - Provides an easy and powerful way to the program. create responsive layouts of all shapes and sizes. - built with flexbox with mobile-first approach. fully responsive and uses twelve column system (12 columns available per row) and six default responsive tiers Representational State Transfer (REST) - set of functions to which the developers performs requests and receive responses. In REST API interaction is made via HTTP protocol. - allows computers to talk to each other over a network. - involves using HTTP methods to send and receive messages, and does not require a strict message definition, unlike Web services. - REST messages often take the form of XML, or JavaScript Object Notation (JSON). HTTP Methods WHAT TO USE? debug: Detailed information, typically useful GET: Provides a read only access to a resource. only for developers. POST: Used to update an existing resource or info: General information about the application's create a new resource. flow. PUT: Used to create a new resource. notice: Normal but significant events. DELETE: Used to Remove a resource. warning: Indicating something unexpected happened, but the application is still working. error: Indicates a problem that needs attention, but the application can still recover. Method critical: Critical errors that may cause the - refers to a function defined within a class. application to fail. used to encapsulate logic and behavior alert: Urgent issues that require immediate related to a specific class or object. attention. - often used to handle different HTTP emergency: System-wide failures. requests and perform corresponding actions. Resource Controller - provide the CRUD routes to the controller in a single line of code. used to create a controller that handles all the http requests stored by your application Single Action Controller - is a type of controller that only handles a single action, typically corresponding to a specific route or endpoint in your application. - useful for scenarios where you only need one action, such as displaying a form, processing a form submission, or performing a specific ta Laravel Loggings - built-in feature in the Laravel PHP framework that helps developers track, store, and manage log messages generated by their application. - These logs are valuable for debugging, monitoring, and troubleshooting applications