WELCOME

What Is Web Development?

Web development is a way of building websites on the internet. Web development indicates towards the non-design aspects of a website, like creating features and functionality using programming, markup, and scripting languages. A web developer is the person who -
• Creates and maintains websites and other web applications
• Transform a web layout into a website
• To understand the vision, they interact with clients, stakeholders, and designers
• They may be expert in frontend or backend development. And also they may be full stack developer. Now you have some intro of web development lets look at the different types of web development.

Types of Web Development

Web development has mainly two branches first front-end development and another is back-end development. Now let me introduce about both branches.

What Is Frontend Development?

• Front end development means producing of front end elements of website for the user or clients. actually front end developer do everything that one see on website like graphics, designing , text , alignment, colors, images, styling ect. They work for betterment of user experience as most as possible.
• Their main task is responsiveness and performance of websites.
• What ever is appearing on a site is work of front end development. Front end developer use many skills to work. As everybody know that HTML is the skeleton of a website and CSS is like predefining the skeleton by adding styles to this. CSS make it easy to modify the look of a website. Developers add style into a CSS file and attach it with HTML file. Instead of these languages there are some frameworks also required for front end development like Jquery, Ajax, ReactJs, AngularJs , Bootstarp ect. Javascript is also used for increasing user interaction of web pages by adding more graphics , click trigger ect. Angular is major used front end development framework tool widely used for single page applications. It is now supported by Google. React is also javascript libraries collection built by Facebook used for single page web application. An average frontend developer may earn 6lacs per annum in India ,that is not too bad but much enough!.

What Is Backend Development?

Back end development means the program that occurs behind the window . Backend development includes server side side seb application logic, activities like making api’s , using libraries ect. Backend developer covers the fields that user don’t see like database, server and apps. For pleasing websites it is must to be program run perfectly on the opposite side of front end , that’s why backend development is important. Mainly php , ruby, python are important languages for backend development. And also there should be knowledge of MySQL, Oracle for database management. But widely php is used as backend development programming language. On an average a backend developer may earn around 8-9 lacs per annum.

What Is Full Stack Development?

A person who operates on both side front end and backend is called full stack developer. Backend is like site’s architecture and logic ,front end is like appearance and feel. Full stack developer has knowledge of multiple programming languages like HTML , CSS, JS for front end development and php/ python/ ruby for and backend development and also knowledge of frameworks like bootstrap, vue, react, angular for frontend and sql, mysql , Laravel are required for backend development.

Debugging and testing are also important part of full stack development.

And now one can see that of course full stack developer should be paid high, and surprisingly he may earn aaround 12lacs per year.

What Is Ajax

Ajax, which stands for Asynchronous JavaScript and XML, is a web development technique that facilitates the creation of fully dynamic, quick, and responsive web application pages. I'll explain Ajax and how to use it with PHP in this blog post. Take a closer look at Ajax first:

What is Ajax all about?

The full name of the technology is AJAX, which enables asynchronous data retrieval from the backend without refreshing the page. Take a look at this example to see how AJAX can be used in regular web operations. Consider creating a page that includes a client's information and has sections for social information, messaging, and personnel information. Typically, different WBE pages are built for each segment. The user's browser will now reload the page and show the social information page if they click the social information link. Because the user must wait for the browser to refresh each page, this makes switching between pages more difficult. We can just use AJAX, which loads the entire content without refreshing the page, to escape this torment of refreshing the page and spending time rendering. In this case, retrieving data from the back-end server and displaying it to the user is as simple as using AJAX.

Here is the visual presentation of how AJAX call works all about:

Let me describe this AJAX flow in more detail: 1. The user makes a synchronous request on a web page first. 2. After that, the user clicks on a button or link in the DOM, which sends an asynchronous request to the back-end server. Since the request is made asynchronously and does not cause the browser to refresh, the end user won't be aware of this. 3. The server may deliver XML, JSON, or HTML string data in response to the AJAX request. 4. JavaScript is used to parse the response data. 5. The DOM of the web page is updated with the parsed data.

A Real AJAX Example With PHP

In this section, we'll develop an example that uses AJAX to fetch JSON material from a PHP file on the server. We'll construct a demonstration example that uses AJAX to handle user login. To get started, we need to create an index.php file that displays a simple login form, as seen below.

Username and password fields can be found on the HTML form in the index.php file. A piece of jQuery Javascript is also included. We are making use of the form element's submit event, which is activated when a user clicks the submit button. We have an AJAX call that uses the POST method to asynchronously submit form data to the login.php file in that event handler. When we get a response from the server, we parse it using the JSON object's parse method. Finally, we complete the task at hand based on whether it was successful or unsuccessful.

Here is the login.php page:

The login.php file contains the logic of authenticating users and returns a JSON response based on the success or failure of login.

BUILDING BLOCKS OF LARAVEL APPLICATION

Let's first discuss what Laravel is in reality. An attractive and expressive web application framework is Laravel. Using Laravel, common web development chores like authentication, sessions, caching, routing, and so forth are made simple. Let's now review the prerequisites for moving further with the Laravel application:

=> PHP >= 7.3.

• MySQL databases.
• A localhost web server; I'll be using either WAMP (for Windows), LAMP (for Linux), or MAMP (for MacOs) in this case. You won't need to manually install them because these localhost webservers already have the most recent versions of MySQL and PHP installed. Go to http://ampps.com/downloads and select the appropriate software for your platform to install MAMP, LAMP, or WAMP.
• Composer - Composer is a PHP dependency management tool. Visit https://getcomposer.org/ to download the composer for your platform and install it from there.
• Node.js - This is a JavaScript runtime environment that runs outside of the browser and is free and open source. Although we won't create any Node.js code, Laravel will use it in the background to speed up our work.

• Code editor - Use of a code editor is necessary. Utilize Visual Studio Code, as follows: It's free.
• A web browser; you can use Mozilla Firefox, Safari, Edge, or Google Chrome.
• Familiarity with the PHP programming language. Now that our machine is set up, we can begin developing.
• Open your console and cd to your MAMP, LAMP, or WAMP installation directory's www directory.
• Enter the command as follows:

It will load all of the essential Laravel files into a directory called my-blog. putting our Laravel application in place In order for our Laravel application to function, we must configure our database after installation.
• Go to http://localhost/phpmyadmin/
• Create a new Database by clicking on new (shown below in red)

• Click Create and type in my_blog. We can build up the program to work with the database now that we have one.
• Launch your code editor and go to the my-blog folder in your file explorer
• Change the following values in the.env file:- APP_NAME key to your blog's name, such as "My Blog" My_blog is the key to the database named DB_DATABASE. The finished document should resemble this:

With everything configured it’s time to run our app and see what it looks like. To run the application, type the following command:

It will start the application and give you a URL, http://127.0.0.1:8000, open the URL in your browser and see the application (shown below).

Understanding the Laravel application file structure Before we start coding, let’s understand the file structure of a Laravel application. For example, most of you may not understand why we changed the .env file. Below is the Laravel App file structure

app folder – This contains all the logic in our application, this includes the models, controllers, service providers etc.

In this section, we'll go into detail about the Models and Controllers folders, which are where beginners will spend the majority of their time.
• Models folder—A model is a representation of a real-world item, and this is where your app's business logic is kept. a blog article, as an illustration. The models will be created with the php artisan command make:model and will use a singular title case style of writing. For instance, we could call it BlogPost.php if it represented a blog post model.
• Http/Controllers folder - This is where your application's controller files will be located. A controller establishes a connection between your Views and Models. When a user submits a new blog post form, the data enters the controller where it is cleaned up before being provided to the model to be put in the database. The controller then gives feedback to the view indicating that the blog post has been generated. The php artisan command make:controller will be used to build controllers, which will adhere to a convention of title case singular wording with the word "Controller" trailing. We'll call it BlogPostController.php for our blog post controller.
• Providers folder - This holds all of the service providers for your project. In Laravel, a service provider is a group of code that performs particular tasks for the app as needed.For instance, a billing service provider will be built to support many payment platforms, but all you have to do is call the service provider—rather than specifying a platform in the controller—and a payment platform will be provided dynamically.
• Database folder: This folder houses factories, seeds, and migrations for databases. Database table definitions, such as those for essential keys, columns and their datatypes, etc., are called migrations.
• Public folder - This folder houses the index file that serves as the app's entry point; when a request is made, it first hits this file before being forwarded to the required route. Route information will be provided later. Public materials like public pictures, CSS, and JS can also be kept here.

• resources folder - This folder houses the source code for our app, including views, sass, and raw JavaScript (primarily from Node.js or JS Frameworks) files. Views are created using HTML and a Laravel templating engine called blade, about which we shall learn more in a moment.
• Routes folder - All of our app's route files are contained in this folder, including web.php, api.php, channels.php, and console.php. Each file has several routes that the user has specified. A route is just a web URL that directs users to a certain function, either in the controller or the routes file.
• Vendor folder - All third-party packages delivered by the composer are kept in this location.
• .env file – This file contains the environment variables these variables are brought in through config files using the env helper method.