A Way To Make A Website From Scratch The Usage Of Php And Mysql

In this tutorial, I am going to educate you a way to create a dynamic internet site from scratch the use of PHP 7 and Mysql. This article is a pleasing actual-lifestyles example that could help newbie newbies to apprehend the fundamentals of PHP and MYSQL. It is written for academic functions, however, it represents an amazing base that can be used to deliver a totally-operational virtual product. Together, we will create an example internet site with login and registration form. At the end of the article you will be capable of join PHP with MYSQL, create a website from scratch and upload dynamic content material to it. In order to get the most of this article, you need to have some basic understanding of PHP. You also want a webserver (localhost or hosting account), in which you can placed the scripts. Last however not least, you need a code editor (Notepad ++ is enough for now). I examined the codes and I can affirm that they’re working on my test web server.

1. Create a database

Before we will get things started, we want a database and a desk, where users can check in. Run the subsequent query in MYSQL (you could use phpmyadmin):


Congratulations! You have created a database “db_1”. Now we want to create a desk with columns for username, email, password and a date. Run the subsequent in MYSQL:


`identification` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(50) NOT NULL,

`e-mail` varchar(50) NOT NULL,

`password` varchar(50) NOT NULL,

`trn_date` datetime NOT NULL,

PRIMARY KEY (`identification`)


Good activity! We are done with the MYSQL part for now. Now it’s time to attach PHP and MYSQL

2. Connect PHP and MYSQL

Create a db.Hypertext Preprocessor record and positioned it within the root listing of your webserver. (If you’re strolling XAMPP on Windows, this is htdocs. If you run an Apache webserver on Ubuntu, you want to put the document in var/www/html).

Paste the following code to your code editor:


Please make certain you placed the precise username and password. Save the report as db.personal home page. Now, in your web browser, go to http://localhost/db.personal home page and make certain you’ve got mounted connection with the database.

three. Create Homepage

We need to create a domestic web page. However, we’d need to have a default page template, e.g. header and footer which are steady on all of the pages. This can shop as numerous time, as a substitute of getting to code each web page manually. For the motive, create three new Hypertext Preprocessor files:

Header.personal home page, Footer.Hypertext Preprocessor and Index.Hypertext Preprocessor.


PHP-MySQL Website from Scratch

Great, we have created a header and we are able to now use it on all our Hypertext Preprocessor pages. I will show you the way to do this in a minute. We have also delivered links to bootstrap css. Now let’s move on, create a footer:

footer.Hypertext Preprocessor


Basically, what we did right here is simply including a few hyperlinks to bootstrap and css, not anything to fear approximately. Let’s also upload some custom css:


body padding-pinnacle: 40px;padding-bottom: 40px;background-coloration: #eee;

.shape-signin max-width: 330px;padding: 15px;margin: 0 auto;.shape-signin .shape-signin-heading,

.shape-signin .checkbox margin-backside: 10px;.form-signin .checkbox font-weight: regular;.form-signin .form-control position: relative;peak: car;-webkit-box-sizing: border-container;-moz-container-sizing: border-container;box-sizing: border-container;padding: 10px;font-length: 16px;.form-signin .form-manipulate:cognizance z-index: 2;.form-signin enter[type=”e mail”] margin-backside: -1px;border-bottom-right-radius: zero;border-bottom-left-radius: 0;.shape-signin input[kind=”password”] margin-bottom: 10px;border-top-left-radius: zero;border-pinnacle-proper-radius: 0;

Finally, allow’s make a very easy homepage. We will change it later, but permit’s keep it genuinely simple for now.

index.Hypertext Preprocessor

Welcome to my Awesome Website!

“;echo ‘

New consumer? Please Login or Register

‘;consist of ‘footer.Hypertext Preprocessor’;

Put all of the documents within the root directory of your net server. That’s it! Now we’ve a homepage and we’ve got protected the header and the footer. You ought to be capable of get entry to it at http://localhost/. Now, we need to create the registration form.

four. Create Register web page

Create a document called sign in.php and use the following code:

sign up.personal home page

New file created efficiently!
Click here to Login

“; else echo “Error: ” . $square . “
” . mysqli_error($conn);mysqli_close($conn);?>

This Hypertext Preprocessor code is developing a line within the “person” table from the database db_1, on every occasion a new consumer fills within the registration form. Now, go to http://localhost/sign in.php to check if the whole lot works.

5. Create Login page

Create a record known as login.php and paste the subsequent code:


Home Dashboard Logout“;else//When the consumer visits the web page first time, easy login shape can be displayed.?>User Login Using PHP & MySQL

Please Login



The factors are inside the above code, please study them cautiously. What you need to apprehend is that personal home page does a take a look at with the database whether the submitted facts exists inside the consumer desk that we’ve already created in MYSQL. If this is the case, the user can log in to the restricted place. This is the location for logged-in users, e.g. the dashboard.

6. Create Dashboard and Logout

You need to have a dashboard page for the registered customers. You first need to have a file referred to as auth.personal home page to memorize the consultation. In this way, any non-accepted (not logged-in) users who try and get admission to the dashboard or any other restricted place of your web site, could be redirected to login.php. You need to require auth.php for all the pages on your constrained vicinity.

auth.Hypertext Preprocessor

Now create the dashboard.php record:

dashboard.personal home page

Dashboard – Secured Page


This is your profile page.


This is how your dashboard page should appear like to your browser:

And logout.Hypertext Preprocessor record:

logout.personal home page

7. Different home web page for a new person and a logged-in consumer

Now, eliminate the vintage index.php report and paste this code in index.Hypertext Preprocessor:

index.Hypertext Preprocessor

Hello ” . $username . “!

“;echo “

“;else//Display different textual content if a person is not logged in.echo “

Welcome to my Awesome Website!

“;echo ‘

New consumer? Please Login or Register


About This Project

This is an educational open-source task. It is a dynamic internet site, built from scratch the usage of PHP and MySQL. The main capability of the internet site is to allow customers to sign in and log in. When a person registers, the statistics is saved in the database. When a person attempts to log in, the database is checked. In case of a suit, the user logs in. The records of the internet site modifications whilst a consumer is logged in. That is why that is a dynamic website. The internet site makes use of some very fundamental styling from Bootstrap. Bootstrap is a CSS and JavaScript framework for growing responsive, cellular first websites.

Now, when you go to http://localhost/, it have to resolve on your new website!

This code might appear pretty overwhelming in the beginning, however, the majority of it’s far just bootstrap training and divs to make it look higher and they may be not in the scope of this article.

What is important is to apprehend the logic of the code. Basically, the script tests whether or not a user is logged in or now not and it can display a one of a kind message for logged-in and logged-out customers.

Congratulations! You have achieved pretty loads to date and also you must be proud of yourself. We have constructed an academic dynamic PHP-MySQL website from scratch (aside from bootstrap). Feel loose to apply this code and mess around with it. You can adjust it as much as you want. You might for example need to expand a greater state-of-the-art login gadget, encompass a comment section or even allow customers create their personal posts.

Note: this code is for academic functions handiest and it ought to no longer be used on a manufacturing website, since it is not secure. Security isn’t inside the scope of this article.

© 2017 Atanas Yonkov

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *