Home > Article > Web Front-end > How to create a dynamic website using PHP/javascript/HTML/CSS?

How to create a dynamic website using PHP/javascript/HTML/CSS?

WBOYforward: 2023-08-27 11:49:09762browse

Overview

A dynamic website is a website where users send requests from the client to the server and render data on the backend. Since PHP is a server-side scripting language, it plays a major role in creating dynamic websites. Some dynamic websites are like website admin panel or search content for specific users. Therefore, HTML, CSS, and JavaScript are used on the client side of the website to create the user front-end, and PHP is used as the back-end scripting language to render and retrieve user data and send it back to the user on the front-end. p>

algorithm

Download and install XAMPP server from the official website.
Now start the apache server to run the website on your local computer.
Now open the "htdocs" folder inside the XAMPP folder in the directory.
Now create a folder named "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 specific values of the method and action attributes being "POST" and "data.php" respectively. "data.php" is the backend file for writing php scripts.
Now add two input fields to the form using the submit button, as name and technology.
Now create a "data.php" file in the same folder.
Use php on and off php tags.

<?php?>

Now create if syntax to check whether the server request is POST or GET.

if($_SERVER["REQUEST_METHOD"]=="POST"){}

Now create a variable as name which will store the name of the client.

$name = $_POST['name'];
$tech = strtolower($_POST['tech']);

If the request is a POST, create a class called "MyTech" and create a public variable "username".

class MyTech{
   public $username;
}

Now create three functions: frontend(), backend() and database(), and pass the parameter "name" to the function.

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 for it that checks for the following entries via the frontend.

if ($tech == "frontend" || $tech == "backend" || $tech == "database") {}

If the condition is met, create an object of this class, otherwise print an alert.

$myObj= new MyTech();
$myObj->$tech($username=$name);

else{
   echo "Hello ". $name .", ". $tech ." will be uploaded shortly.";
}

Now use the function "history.back()" outside the php closing tag to create an HTML button pointing to the page

<html>
   <body>
   <button onclick="history.back()">◀ Back</button>
   </body>
</html>

Dynamic website using php is ready.
Now open your browser and enter "localhost/dynamicWeb" in the address bar

http://localhost/dynamicWeb/

The website will open with its functionality.

Example

This is an example that you can use to learn to create dynamic websites using HTML, CSS, JavaScript, and PHP. The front-end part is created using HTML, CSS, and the server-side scripting is done using PHP. In this example, we have created a feature where there is a form where the user can enter his name and the technical name for which he wants to retrieve the information using a button. When the user triggers the button, information from the front-end is sent to the server and the data is rendered and sent back to the user.

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
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>>

in conclusion

PHP is a great server-side scripting language that helps developers embed HTML code. In order to make PHP projects more scalable, we can also use PHP frameworks such as Laravel, symphony cakephp, etc., so these are the most popular frameworks. In the above example we have used the concepts of classes and objects to get user data, but we can also use MySql database, which makes it more helpful to make dynamic websites. So when a user sends a request to the server, the server retrieves the data from the database and sends the user only the specific information the user requested.

The above is the detailed content of How to create a dynamic website using PHP/javascript/HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript laravel mysql css html if 并发对象 history 算法 database 数据库 apache http

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Using margin-right property in CSSNext article：Using margin-right property in CSS

See more

How to create a dynamic website using PHP/javascript/HTML/CSS?

Overview

algorithm

Example

in conclusion

Related articles