WEBVTT

00:00.000 --> 00:06.000
Connecting front-end and back-end.

00:06.000 --> 00:11.000
In this video, we will understand how front-end connects with back-end.

00:11.000 --> 00:15.000
Identify the role of Python Plask in handling back-end operations.

00:15.000 --> 00:20.000
Observe how browser developer tools display network communication.

00:20.000 --> 00:26.000
Explain the complete data flow during the registration process.

00:26.000 --> 00:30.000
Let's open Visual Studio Code and start our project.

00:30.000 --> 00:34.000
Here, I'm opening the folder we already created.

00:34.000 --> 00:38.000
This contains both our front-end and back-end files.

00:38.000 --> 00:41.000
Inside this folder, we have our front-end part.

00:41.000 --> 00:46.000
HT, ML, CSS, and JavaScript.

00:46.000 --> 00:49.000
And our back-end built using Python Plask.

00:49.000 --> 00:52.000
The front-end handles the user interface,

00:52.000 --> 00:57.000
while the back-end manages data and logic behind the scenes.

00:57.000 --> 01:01.000
Next, open the terminal and run the command python run.py.

01:01.000 --> 01:05.000
To start our back-end server, once it starts running,

01:05.000 --> 01:10.000
the message shows back-end started successfully.

01:10.000 --> 01:16.000
Then a new terminal called the front-end website using live server.

01:16.000 --> 01:19.000
Our website opens in the browser.

01:19.000 --> 01:24.000
Let's right-click anywhere on the page and select inspect.

01:24.000 --> 01:28.000
From the developer tools, open the network tab.

01:28.000 --> 01:33.000
Here, we'll be able to see how the front-end communicates with the back-end.

01:33.000 --> 01:40.000
Now, we fill in all the registration fields correctly and click register.

01:40.000 --> 01:43.000
In the network section, notice a new request appears.

01:43.000 --> 01:49.000
It shows details like name, status, type, size, and time.

01:49.000 --> 01:56.000
When we click on that request, we can see more information in the headers and response sections.

01:56.000 --> 01:59.000
This shows that our front-end sends user data to back-end.

01:59.000 --> 02:03.000
The back-end processes it, stores it, and sends a response back.

02:03.000 --> 02:06.000
All happening in real time.