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
- Basic of PHP
- Application of PHP
- Databases List
- Create a login and registration page
- Animation with web page
- PHP code with store upload images or any other material.
- FAQ
What is the 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
- XAMPP
- Roslyn
- OpenBSD
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?
- 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.
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
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
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
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.
In this method we can transform information through HTTP headers and it can be sent the binary data.
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.
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.
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.
