Question

In: Computer Science

Create a web page using PHP that allows the users to create an account (a username...

Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.

Solutions

Expert Solution

PHP Login System Requirements:

  • We should have knowledge of HTML, CSS, PHP and MySQL for creating the login system.
  • Text Editor - For writing the code. We can use any text editor such as Notepad, Notepad++, Dreamweaver, etc.
  • XAMPP - XAMPP is a cross-platform software, which stands for Cross-platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a complete software package, so, we don't need to install all these separately.

Setup

Now, we need to start the webserver and create the files for the login system. There are a few steps that are given below to set up the environment.

  • Open the XAMPP Control Panel.
  • Start the Apache server by clicking on the Start button.
  • Start the MySQL by clicking on the Start button.
  • Create all the files needed for login.
  • Create login table in the database using phpMyAdmin in XAMPP.

Now, we will create four files here for the login system.

  • index.html:This file is created for the GUI view of the login page and empty field validation.
  • style.css: This file is created for the attractive view of the login form.
  • connection.php: Connection file contains the connection code for database connectivity.
  • authentication.php:This file validates the form data with the database which is submitted by the user.

Save all these files in the htdocs folder inside the Xampp installation folder. The step by step description and code for these files are discussed below.

Step 1: Creating the Database Table

CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

Step 2: Creating the Config File

<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'demo');

/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

Step 3: Creating Login Page

  1. <html>  
  2. <head>  
  3.     <title>PHP login system</title>  
  4.     // insert style.css file inside index.html  
  5.     <link rel = "stylesheet" type = "text/css" href = "style.css">   
  6. </head>  
  7. <body>  
  8.     <div id = "frm">  
  9.         <h1>Login</h1>  
  10.         <form name="f1" action = "authentication.php" onsubmit = "return validation()" method = "POST">  
  11.             <p>  
  12.                 <label> UserName: </label>  
  13.                 <input type = "text" id ="user" name  = "user" />  
  14.             </p>  
  15.             <p>  
  16.                 <label> Password: </label>  
  17.                 <input type = "password" id ="pass" name  = "pass" />  
  18.             </p>  
  19.             <p>     
  20.                 <input type =  "submit" id = "btn" value = "Login" />  
  21.             </p>  
  22.         </form>  
  23.     </div>  
  24.     // validation for empty field   
  25.     <script>  
  26.             function validation()  
  27.             {  
  28.                 var id=document.f1.user.value;  
  29.                 var ps=document.f1.pass.value;  
  30.                 if(id.length=="" && ps.length=="") {  
  31.                     alert("User Name and Password fields are empty");  
  32.                     return false;  
  33.                 }  
  34.                 else  
  35.                 {  
  36.                     if(id.length=="") {  
  37.                         alert("User Name is empty");  
  38.                         return false;  
  39.                     }   
  40.                     if (ps.length=="") {  
  41.                     alert("Password field is empty");  
  42.                     return false;  
  43.                     }  
  44.                 }                             
  45.             }  
  46.         </script>  
  47. </body>     
  48. </html>  

Step 4: Creating a CSS File for Designing

  1. body{   
  2.     background: #eee;  
  3. }  
  4. #frm{  
  5.     border: solid gray 1px;  
  6.     width:25%;  
  7.     border-radius: 2px;  
  8.     margin: 120px auto;  
  9.     background: white;  
  10.     padding: 50px;  
  11. }  
  12. #btn{  
  13.     color: #fff;  
  14.     background: #337ab7;  
  15.     padding: 7px;  
  16.     margin-left: 70%;  
  17. }  

How to run the login form?

  • To run the login form, open the xampp control panel and run the apache server and PHP.
  • Now, type localhost/xampp/folder name/file name in the browser and press Enter key.
  • All setup is done now. Enter the username and password in the login form and click the login button.

venereology answered 8 months ago
Next > < Previous

Related Solutions

You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
Using a combination of HTML/PHP, implement a web page where the users can upload a text...
Using a combination of HTML/PHP, implement a web page where the users can upload a text file, exclusively in .txt format, which contains a string of 400 numbers, such as: 71636269561882670428 85861560789112949495 65727333001053367881 52584907711670556013 53697817977846174064 83972241375657056057 82166370484403199890 96983520312774506326 12540698747158523863 66896648950445244523 05886116467109405077 16427171479924442928 17866458359124566529 24219022671055626321 07198403850962455444 84580156166097919133 62229893423380308135 73167176531330624919 30358907296290491560 70172427121883998797 Your code should contain a PHP function that, accepting the string of 400 numbers in input, is able to find the greatest product of four adjacent numbers in all the...
Create a web page using PHP and HTML that contains a list of movie names available...
Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Using PHP and MySQL Create a simple web form with at least 5 fields Include validation...
Using PHP and MySQL Create a simple web form with at least 5 fields Include validation and error messages Create a MySQL Database Create a table to store submissions from the form Only insert new data into the database when all validation is passed Use PHP to create an HTML table showing all the content of the database   New submissions should appear in table
Choose a software system (or a web page) that you think will benefit the users if...
Choose a software system (or a web page) that you think will benefit the users if it employed the principles of direct manipulation. Illustrate some of the operations under the direct manipulation scheme
Using PHP, Make a form that allows the user to enter the weight of the item...
Using PHP, Make a form that allows the user to enter the weight of the item being shipped. This will be used to calculate the shipping cost.Create a form that uses the method POST The form should capture a customer's package weight with the one field for the package weight in pounds. All fields should have the REQUIRED attribute. The form should have a submit button and a reset button. The form should look nice. All the labels should line...
Using a diagram explain how PHP makes web pages dynamic
Using a diagram explain how PHP makes web pages dynamic
PHP A local client needs to take his static web page for ordering organic vegetables and...
PHP A local client needs to take his static web page for ordering organic vegetables and build a dynamic page. He doesn't have much money to spend, so we are going to write orders to a flat file. He is also going to need a page that he can go to that will display his orders. He has already met with Sharron, so we've got a specification already assembled. Here are the details: The customer will go to a form...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT