The outputs of all these engines can now be understood by the browser.
To explain this, we need to understand how the server and php work together.
The server is a software program running on a computer trying to listen and server specific requests. When you type antsand.com
on the webbrowser, the browser communicates with a DNS server, translates Antsand.com to an ip/ipv6 address, obtains the ip/ipv6-address, packages a set of information into packets and sends that information to a computer with that specific address over a bunch of routers. The computer with that ip/ipv6-address is where the code for Antsand.com resides. When this computer receives this information, it looks at the packet and checks for programs in the computer that can handle this request. Since the packet that was created by the web-browser is a tcp packet on port 80 or 443, a webserver is listening for any request on those ports. Port 80 and 443 are standards ports for websites. Once, the webserver deciphers the packets, it then looks for what information the browser is requesting. If the page that the browser is requesting needs to be serviced by a 3rd party server, the web-server will send that information to such a server. In this case the 3rd party server is the php engine.
Webbrowser -> router -> Computer(Antsand.com) -> webserver (nginx) -> search for *.php files -> if found send to -> php server (php-fpm)
Webbrowser (html) <- router <- Computer(Antsand.com) <-webserver <- html file <--- php server(php-fpm)
The above steps are repeated till all the information defined in HTML is properly loaded in the webbrowser.
Php Phalcon being an MVC, this is how the code structure at ANTSAND looks like:
Module -> (Model, View, Controller, Vue)
A deep dive into how php-phalcon works or for that matter any MVC.
A MVC is a Model View Controller. Generally, the Models folder contains files that interact with the database and contains core server logic. The Controller folder contains files that help is designing how you want users to navigate through your application and what content you want different users to see. The View folder contains files that tell php how you want HTML to be literally generated. In Phalcon, if integrating the volt engine, your view folder would then have volt files, that are converted to php by the volt engine which is then used to generate HTML files.
Why is this important?
This below picture is the antsand blogging dashboard
a. Profile information
b. The blog navigation panel
c. The editor space
The visual display for each of these components is written in *.vue files.
Just as how we want our front end to be divided into different components, we need to have different controller actions in phalcon that explicitly help in providing the relevant data to each of these vue components. This way, we know that each controller action in phalcon has a specific purpose and is tightly coupled with interacting with vue components for the data requested.
When designing your application, you need to think,
*.vue component -> makes a (ajax request) -> request data from a particular link -> phalcon reads the link, forwards the information to the necessary controller and action -> fetches data from the database -> echo's the result in a JSON string/object. Vue read this string and display the content accordingly. This is the lifecyle between a vue component and php-phalcon.
The below image represents a visual workflow.
Next, How does vue.js work? What are vue.js components and how do they work in vue.js?
Now that all the concepts are explained, in the next article I will give a live example. We will create a simple application where we can render a simple "hello World" page, integrating phalcon and *vue components.
I hope you found the information in this article worthwhile. If you have any questions, or feel some of the information might be incorrect, please comment below. I will be glad to hear your comments. The most valuable comment that I receive, I will send my personal folder structure with all the files and necessary information on implementing these two frameworks. Do COMMENT BELOW.
The article written above has been tested on a real application. After using these frameworks in their most advanced form, the idea to write this article came about.