Home Website & Development Build a creative and responsive web app |Lets the journey begins with...

Build a creative and responsive web app |Lets the journey begins with web development

If you are knowledgeable with web application languages, and how to use it. So, it is easy to develop a responsive web app.

Now we make some interesting web applications with some operations like animation, validation, font animation, and how to create a database, many more.

So, let’s the journey start to making some interesting web pages.

Before the journey started, we can learn PHP, and database structure. After that, we can make a new web application.

What’s in it learn

  1. Basic of PHP
  2. Application of PHP
  3. Databases List
  4. Create a login and registration page
  5. Animation with web page
  6. PHP code with store upload images or any other material.
  7. FAQ

What is the PHP?

PHP

It stands for “Hypertext Preprocessor”. The dynamic language and communicate with databases.

There is a server-side scripting language. It manages databases, session tracking, dynamic content, and e-commerce site.

It included with MySQL, Oracle, SQL, and Microsoft SQL Server.

PHP perform create, open, read, write, and close operation. Some other operation is also performed like add, delete, modify the database.

PHP handles form like gather the data, save the data files, send the email with the use of data, verify the data.

Set up PHP

If you set up php in your system then you require three components

  • Webserver
  • Database
  • PHP parser

Some platform of PHP

But XAMPP is very easy for use, with the help of XAMPP you can directly connect the WordPress.

Structure of PHP

<?php

?>

 Application of PHP

It is open-source, and free. Most of the web hosting servers are support to the PHP.

With the help of PHP, you can deploy your web app on various OS.

Which web sites PHP use in the real world?

  • Facebook
  • WordPress
  • Yahoo
  • Wikipedia
  • Digg

Above is the example, they have built using PHP.

Databases

Database list

  • MongoDB
  • MySQL
  • Oracle
  • IBM Db2
  • Redis
  • SQLite
  • MariaDB
  • DynamoDB

Above Database engines are popular in nowadays. You can use this in your responsive web application.

Now we can make some interesting and responsive web app.

responsive web pages

First, we make login form and registration form

<!DOCTYPE html>

<html lang=”en” dir=”ltr”>

  <head>

    <meta charset=”utf-8″>

    <link rel=”stylesheet” href=”style.css”>

    <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”>

    <title> Login and UserRegistration </title>

  </head>

  <body>

    <div class=”container”>

      <div class=”login-box”>

        <div class=”row”>

          <div class=”col-md-6 login-left”>

             <h2> Login Here </h2>

             <form action=”validation.php” method=”post”>

            <div class=”form-group”>

            <label> Username </label>

            <input type=”text” name=”user” class=”form-control” required>

           </div>

           <div class=”form-group”>

           <label> Password </label>

           <input type=”password” name=”password” class=”form-control” required>

          </div>

          <button type=”submit” class=”btn btn-primary”> Login </button>

          <p class=”message”><a href=”TPO\forgot-password.html”>Forgot Password? </a>

         </p>

         </form>

       </div>

       <div class=”col-md-6 login-right”>

          <h2> Register Here </h2>

          <form action=”registration.php” method=”post”>

         <div class=”form-group”>

         <label> Username </label>

         <input type=”text” name=”user” class=”form-control” required>

        </div>

        <div class=”form-group”>

        <label> Email </label>

        <input type=”email” name=”email” class=”form-control” required>

       </div>

        <div class=”form-group”>

        <label> Password </label>

        <input type=”password” name=”password” class=”form-control” required>

       </div>

       <button type=”submit” class=”btn btn-primary”> Register </button>

      </form>

    </div>

     </div>

       </div>

     </div>

 </body>

</html>

PHP Code For Registration

<?php
session_start();

$con = mysqli_connect(‘localhost’,’root’,”);

mysqli_select_db($con,’userregistration’);

$name = $_POST[‘user’];
$email = $_POST[’email’];
$pass = $_POST[‘password’];

$s = ” select * from usertable where name = ‘$name'”;

$result = mysqli_query($con,$s);

$num = mysqli_num_rows($result);

if($num == 1){
echo”Username Already Taken”;
}
else {
$reg=”insert into usertable(name,email,password) values(‘$name’,’$email’,’$pass’)”;
mysqli_query($con,$reg);
echo”Register Successful”;
}

Above we use HTML, CSS, and PHP language, and also, we use Bootstrap so our form is responsive and with the help of PHP we can store the data of the user.

With the use of post method, we can send our data to the database.

Output

output1

Now, we create some animation with our web page.

<html>

<head>

  <meta charset=”utf-8″ />

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  <meta name=”viewport” content=”width=device-width, initial-scale=1″>

  <link rel=”stylesheet” type=”text/css” href=”style100.css” />

  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

 </head>

<body>

<a name=”about”>

<div class=”clearfix”> </div>

  <section class=”left-col”>

    <h2>TCS</h2>

    <p style=”text-indent:6%;”>

      TATA Consultancy Services Limited (TCS) is an Indian multinational information technology (IT) service and consulting company headquartered in Mumbai, Maharashtra, India.

      It is a subsidiary of Tata Group and operates in 149 locations across 46 countries. <br>

TCS is the largest Indian company by market capitalization. Tata- consultancy services is now placed among the most valuable IT services brands worldwide.

      In 2015, TCS was ranked 64th overall in the Forbes World’s Most Innovative Companies ranking, making it both the highest-ranked IT services company and the top Indian company.

      It is the world’s largest IT services provider. As of 2018, it is ranked eleventh on the Fortune India 500 list.

<button> <a href=”https://www.tcs.com/”> Read More </a> </button>

      </p>

      </section>

    <section class=”sidebar”>

      <div class=”w3-content w3-section” style=”max-width:500px”>

  <img class=”mySlides” src=”pic30.jpg” style=”width:120%”>

  <img class=”mySlides” src=”pic23.jpg” style=”width:120%”>

  <img class=”mySlides” src=”pic24.jpg” style=”width:120%”>

</div>

    </section>

    <div class=”clearfix”> </div>

<script>

            var myIndex = 0;

            carousel ();

            carousel1();

            carousel2();

            function carousel () {

              var i;

              var x = document. GetElementsByClassName(“mySlides”);

              for (i = 0; i < x. length; i++) {

                x[i]. style. display = “none”;

              }

              myIndex++;

              if (myIndex > x. length) {myIndex = 1}

              x[myIndex-1]. style. display = “block”;

              setTimeout (carousel, 2000); // Change image every 2 seconds

            }

</script>

</body>

</html>

Output

output2
output3

The above web app will be created using HTML, CSS, and Javascript.

With the help of JS, we can animate our images with the help of a loop.

Create a web page with some document upload and store with PHP

<html>

<head>

   <meta charset=”UTF-8″ />

   <meta http-equiv=”X-UA-Compatible” content=”IE=edge, chrome=1″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

</head>

<body>

  <form action=”test.php” method=”post” enctype=”multipart/form-data”>

    <input type=”file” name=”myfile”> <br> <br>

    <input type=”submit” value=”Submit”>

  </form>

</body>

</html>

PHP code

<html>

<head>

   <meta charset=”UTF-8″ />

   <meta http-equiv=”X-UA-Compatible” content=”IE=edge, chrome=1″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

</head>

<body>

  <?php

    if(move_uploaded_file($_FILES[“myfile”] [“tmp_name”],”data/”. $_FILES[“myfile”] [“name”])) {

      echo “Uploaded Success”;

    }

    else {

      echo “Failed”;

    }

   ?>

</body>

</html>

Above page we can create with the help of HTML, and PHP.

Here in this code we can upload any document, and store it with the database. So, the system can verify easily.

In the PHP we can store data with some security.

Conclusion

Overall we can conclude that in this blog we can learn PHP and Databases. Also, we can learn that and generate responsive web pages like sign-up, login, validation, and upload the document using HTML, CSS, JS, and PHP Web language.

FAQ

1) What is viewport?

Viewport means users visible part on the web page. It means your web page can easily convert on your device system by automatically. Like mobile, tablet, computer and many more.

2) What is the post method?

In this method we can transform information through HTTP headers and it can be sent the binary data.

3) What is get method?

It means get method sends the encoded information and they cannot send binary data. In this method data can be access using the QUERY_STRING variable.

4) What is the metadata?

It is always writing in <head> tag. It is used to specify the character set, page description, and viewport. Used by browsers and web services.

5) What is the section tag?

It will define the documents like footer, header, and many more. It will divide the content or Information into sections or subsections. Tag Helpful for both browser and developer.

RELATED ARTICLES

Best Wi-Fi Modem for BSNL Broadband – Detailed Comparison

In this information age, we all firstly depend on the internet very much for day to day tasks. Almost every business has...

Rice Companies in India

Rice, unlike most other cereals, we consume it as a whole grain. No one is there who is not fond of rice....

Best Laptops under 10000-15000 in India

A laptop is an essential accessory for everyone in this internet era. Whether you are a student, working professional, or homemaker, you...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Best Wi-Fi Modem for BSNL Broadband – Detailed Comparison

In this information age, we all firstly depend on the internet very much for day to day tasks. Almost every business has...

Rice Companies in India

Rice, unlike most other cereals, we consume it as a whole grain. No one is there who is not fond of rice....

Best Laptops under 10000-15000 in India

A laptop is an essential accessory for everyone in this internet era. Whether you are a student, working professional, or homemaker, you...

8 Best Treadmill In India That You Can Buy In 2021

Walking and running are the two most important cardio exercises that help you to lose that extra layer of fat. Not only...

Recent Comments