How do I create dynamic websites using PHP/javascript/HTML/CSS?
# <br>Overview Dynamic websites are the website on which a user sends the request from the client side to the server side and the data is rendered in the backend, as PHP is a server side scripting language so it plays the main role while creating dynamic websites. Some of the dynamic websites are like website admin panels or the searched content for the specific users. So the HTML, CSS and JavaScript are used on the client side of the website to create a user frontend and the PHP is used as a backend scripting language to render and retrieve the user data and send back to the user in the frontend. # ALGORITHM > + Download and install the XAMPP server from the official website. + Now start the apache server to run the website on our local computer. + Now open the “htdocs” folder in the XAMPP folder of your directory. + Now create a folder as “dynamicWeb”. + Now create a main “index.php” file to start building the website. + Now add the HTML boilerplate to the “index.php” file. + Now add the HTML form to the page with the method and action attribute with their specific value as “POST” and “data.php” respectively. The “data.php” is the backend file in which the php script is written. + Now add two input fields to the form as name and technology with the submit button. + Now create a “data.php” file in the same folder. Use the open and closing php tag to use the php. ```bash <?php?> ``` > + Now create if syntax to check whether the server request is POST or GET. ```php if($_SERVER["REQUEST_METHOD"]=="POST"){} ``` > + Now create a variable as name which will store the name from the client side. ```php $name = $_POST['name']; $tech = strtolower($_POST['tech']); ``` > + If the request is POST then create a class with the name as “MyTech” and also create a public variable “username”. ```php class MyTech{ public $username; } ``` > + Now create three functions as frontend(), backend() and database() with the parameter “name” passed to the function. ```php public function frontend($uname){ echo "Hello ". $uname .', your FrontEnd Content is here. '. "<li>HTML</li> <li>CSS</li> <li>Bootstrap</li> <li>JavaScript</li> <li>ReactJs</li>"; } public function backend($uname){ echo "Hello ". $uname .', your BackEnd Content is here.'."<li>NodeJs</li><li>ExpressJs</li><li>Middlewares</li><li>Http Methods</li>"; } public function database($uname){ echo "Hello ". $uname .', your Database Content is here.'."<li>MySql</li><li>MongoDB</li><li>DynamoDB</li><li>Casandra</li><li>PostgreSql</li>"; } ``` > + Now create another if-else function to it which checks for the following entry through the frontend. ```php if ($tech == "frontend" || $tech == "backend" || $tech == "database") {} ``` > + If the condition satisfies then create the object of the class else print the alert. ```php $myObj= new MyTech(); $myObj->$tech($username=$name); else{ echo "Hello ". $name .", ". $tech ." will be uploaded shortly."; } ``` > + Now create a HTML button to the page with the function “history.back()” outside the php closing tag ```html <html> <body> <button onclick="history.back()">◀ Back</button> </body> </html> ``` > + The dynamic website with php is ready. + Now open the browser and type “localhost/dynamicWeb” in the address bar http://localhost/dynamicWeb/ > + The website will be opened with its functionality. ## Example Here’s an example by which you can learn to create a dynamic website using HTML, CSS, JavaScript and PHP. In which the frontend part is created using HTML, CSS and the server side scripting is done using PHP. In this example we have created a feature in which there is a form in which a user enters his name and the technology name of which he wants to retrieve the information with a button. When the user triggers the button the information from the frontend is sent to the server is the data is rendered and sent back to the user. ```html index.php <html> <head> <title>Dynamic Web</title> <style> * { margin: 0; padding: 0; } #dropFrame { position: fixed; width: 100vw; height: 100vh; top: 0; display: flex; align-items: center; justify-content: center; } #myDrop { width: 20rem; box-shadow: 0 0px 47px #00000021; display: flex; padding: 2rem; border-radius: 0.8rem; flex-direction: column; gap: 1rem; } select, input { width: 100%; padding: 0.5rem; border-radius: 5px; outline: none; border: 1px solid rgb(199, 199, 199); } button { padding: 0.5rem 2rem; width: fit-content; border-radius: 5px; background-color: green; color: white; outline: none; border: none; cursor: pointer; margin: auto; } </style> </head> <body onload="popUp()"> <div id="dropFrame"> <form action="data.php" method="post" id="myDrop"> <div style="text-align:center;color:green;font-weight:700;">tutorialspoint.com</div> <div> <input type="text" placeholder="Write your name" name="name" id="name" required /> </div> <div> <input type="text" name="tech" id="tech" placeholder="Choose your technology*" /> </div> <div> <label style="color:red">Available Technologies</label> <li>Frontend</li> <li>Backend</li> <li>Database</li> </div> <button type="submit">Get Content</button> </form> </div> </body> </html> ``` data.php ```php <?php if($_SERVER["REQUEST_METHOD"]=="POST"){ $name = $_POST['name']; $tech = strtolower($_POST['tech']); class MyTech{ public $username; public function frontend($uname){ echo "Hello ". $uname .', your FrontEnd Content is here.'."<li>HTML</li><li>CSS</li><li>Bootstrap</li><li>JavaScript</li><li>ReactJs</li>"; } public function backend($uname){ echo "Hello ". $uname .', your BackEnd Content is here.'."<li>NodeJs</li><li>ExpressJs</li><li>Middlewares</li><li>Http Methods</li>"; } public function database($uname){ echo "Hello ". $uname .', your Database Content is here.'."<li>MySql</li><li>MongoDB</li><li>DynamoDB</li><li>Casandra</li><li>PostgreSql</li>"; } } if ($tech == "frontend" || $tech == "backend" || $tech == "database") { $myObj= new MyTech(); $myObj->$tech($username=$name); }else{ echo "Hello ". $name .", ". $tech ." will be uploaded shortly."; } } ?> <html> <body> <button onclick="history.back()">◀ Back</button> </body> </html> ``` # CONCLUSION PHP is a good server side scripting language which helps the developer to embed the HTML code with it. To make the PHP project more scalable we can also use the PHP frameworks such as Laravel, symphony cakephp, so these are the most popular frameworks. In the above example we have used the concept of class and objects to get the user data, but we can also use the MySql database which makes it more helpful to make a dynamic website. So when a user sends the request to the server, the server retrieves the data from the database and sends to the user only specific information which the user has requested for.